@font-face {
   font-family: 'Exo';
   src:
         local('Exo'),
         local('Exo'),
         url('../fonts/Exo/Exo2-Regular.ttf');
}

@font-face {
   font-family: 'Exo';
   src: url('../fonts/Exo/Exo2-Regular.eot');
}

@font-face {
   font-family: 'Exo-SemiBold';
   src:
         local('Exo-SemiBold'),
         local('Exo-SemiBold'),
         url('../fonts/Exo/Exo2-SemiBold.ttf');
}

@font-face {
   font-family: 'Exo-SemiBold';
   src: url('../fonts/Exo/Exo2-SemiBold.eot');
}

/* reset csss for cross browser support */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:100%; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;text-align: center;border: 0;}
td {border: 1px solid #ddd;padding: 5px;vertical-align:middle;}
a button,
button {cursor: pointer;}
/* reset css finish */

pre.code {
  counter-reset: line-numbering;
  background: #2c3e50;
  padding: 12px 0 14px 0;
  padding-left: 2%;
  width: 98%;
  margin: 10px 0;
  color: #ecf0f1;
  line-height: 100%;
}

pre .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 1em;
  /* space after numbers */
  padding-left: 8px;
  width: 1.5em;
  text-align: right;
  opacity: 0.5;
  color: white;
}

.copy-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
}

.copy-btn:hover {
  background-color: #2980b9;
}

/* SYSTEM DEFAULT STYLES */
.selectDisable {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
}

.selectEnable {
   -webkit-user-select: text;
   -khtml-user-select: text;
   -moz-user-select: text;
   -o-user-select: text;
   user-select: text;
}

select {
   vertical-align: middle;
   background-image: none;
   box-sizing: border-box;
   height: 30px;
   padding: 4px 12px;
   background-color: #ffffff;
   border: 1px solid #0075B7;
   min-width: 200px;
}

.btn,
#content a.btn {
   display: inline-block;
   min-width: 40px;
   margin: 15px 5px;
   padding: 5px 12px 6px;
   border: 0;
   font-weight: bold;
   border-radius: 3px;
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   text-transform: capitalize;
}

.btn-no-margin {
   margin: 0 !important;
}

.btn:hover {
   background-color: #ccc;
}

.btn-big {
   min-width: 80px;
   padding: 10px 15px 12px;
}

.btn-blue {background-color: #3398db; color: #ffffff;}
.btn-blue:hover {background-color: #48c;}

.btn-green, .btn-success {background-color: #3398db; color: #ffffff;}
.btn-green:hover, .btn-success:hover {background-color: #68B5E9;}

.btn-red {background-color: #d33; color: #ffffff;}
.btn-red:hover {background-color: #c22;}

.btn-black {background-color: #555; color: #ffffff;}
.btn-black:hover {background-color: #444;}

.frontend_button,
.logout_button {
   margin: 0;
}

#swf_header {
   height: 55px;
   background-color: #444444;
   color: #ffffff;
}

/* text format */
#swf_wrapper .nowrap { white-space: nowrap; }
#swf_wrapper .red, #swf_wrapper_frontend .red{ color: red; }
#swf_wrapper .white, #swf_wrapper_frontend .white { color: white; }
#swf_wrapper .swfblue, #swf_wrapper_frontend .swfblue { color: #3398db; }
#swf_wrapper .outline-red, #swf_wrapper_frontend .outline-red {outline: red solid thin;}
#swf_wrapper .bold, #swf_wrapper_frontend .bold { font-weight: bold; }
#swf_wrapper .width100, #swf_wrapper_frontend .width100 { width: 100%; }
#swf_wrapper .width50, #swf_wrapper_frontend .width50 { width: 50%; }
#swf_wrapper .width45, #swf_wrapper_frontend .width45 { width: 45%; }
#swf_wrapper .width33, #swf_wrapper_frontend .width33 { width: 33%; }
#swf_wrapper .width25, #swf_wrapper_frontend .width25 { width: 25%; }
#swf_wrapper .bggreen, #swf_wrapper_frontend .bggreen { background-color: #799D3B; }
#swf_wrapper .bgred, #swf_wrapper_frontend .bgred { background-color: red; }
#swf_wrapper a, #swf_wrapper_frontend a { color: #3398db; text-decoration: none; }
#swf_wrapper a:hover, #swf_wrapper_frontend a:hover { color: #99CCFF; text-decoration: none; }
#swf_wrapper h3, #swf_wrapper_frontend h3 {padding-bottom: 5px; color: #737373;}
#swf_wrapper h3.swf_form_header, #swf_wrapper_frontend h3.swf_form_header {margin-bottom: 3px}

/* tables */
#swf_wrapper tr.header3 td.txtleft, #swf_wrapper_frontend tr.header3 td.txtleft { text-align: left; }
#swf_wrapper tr.header, #swf_wrapper_frontend tr.header {
   background: #fcfcfc linear-gradient(to top, #ececec, #f9f9f9);
   border-bottom: 1px solid #888;
   font-weight: bold;
   text-transform: capitalize;
}
#swf_wrapper td.header, #swf_wrapper_frontend td.header {
   color: #333;
   font-weight: bold;
   text-align: right;
   text-transform: capitalize;
   vertical-align: top;
}
#swf_wrapper tr.header td, #swf_wrapper_frontend tr.header td {
   color: #333;
   font-size: 90%;
   padding: 5px 10px 5px 10px !important;
   vertical-align: middle;
}
#swf_wrapper tr.subheader, #swf_wrapper_frontend tr.subheader {
   background: #ffffff;
   font-weight: bold;
   text-transform: capitalize;
   font-size: 13px;
}
#swf_wrapper tr td, #swf_wrapper_frontend tr td { text-align: left; }

#swf_wrapper table td.action_cell, #swf_wrapper_frontend table td.action_cell {
   min-width: 48px;
}

#swf_wrapper table td.date_cell, #swf_wrapper_frontend table td.date_cell {
   min-width: 135px;
}

#swf_wrapper table td.title_cell, #swf_wrapper_frontend table td.title_cell {
   min-width: 155px;
}

#swf_wrapper td.icon16x16, #swf_wrapper_frontend td.icon16x16 {
   width: 16px;
   padding: 0;
   text-align: center;
}

.swf_section {
   padding-left: 7%;
   padding-right: 7%;
}

/* buttons */
.btn:hover { cursor: pointer; }

/* layout and components alignment */
#swf_wrapper .alignleft, #swf_wrapper_frontend .alignleft { float: left; }
#swf_wrapper .alignright, #swf_wrapper_frontend .alignright { float: right; }
#swf_wrapper .txtleft, #swf_wrapper_frontend .txtleft { text-align: left; }
#swf_wrapper .txtcenter, #swf_wrapper_frontend .txtcenter { text-align: center; }
#swf_wrapper .txtright, #swf_wrapper_frontend .txtright { text-align: right; }
#swf_wrapper .txtright-force, #swf_wrapper_frontend .txtright-force { text-align: right !important; }
#swf_wrapper .clear, #swf_wrapper_frontend .clear { clear: both; height: 1px; }
#swf_wrapper .hide, #swf_wrapper_frontend .hide { display: none; }

/* menu */
#swf_wrapper #menu, #swf_wrapper_frontend #menu {
   float: left;
   padding-top: 10px;
   position: relative;
   width: 7%;
}

#swf_wrapper #menu ul, #swf_wrapper_frontend #menu ul {
   max-width: 100px;
   min-width: 100px;
}

#swf_wrapper #menu ul, #swf_wrapper_frontend #menu ul { list-style-type: none; position: relative; }
#swf_wrapper #menu ul li, #swf_wrapper_frontend #menu ul li {
   color: black;
   margin-bottom: 15px;
   position: relative;
   text-align: center;
}
#swf_wrapper #menu ul li a, #swf_wrapper_frontend #menu ul li a {
   background: url("../images/menuicon.png") top center no-repeat;
   color: #555555;
   cursor: pointer;
   display: block;
   font-size: 70%;
   padding: 48px 10px 4px 10px;
   text-decoration: none;
}
#swf_wrapper #menu ul li.dashboard a, #swf_wrapper_frontend #menu ul li.dashboard a { background-image: url("../images/dashboard.png"); }
#swf_wrapper #menu ul li.configuration a, #swf_wrapper_frontend #menu ul li.configuration a { background-image: url("../images/configuration.png"); }
#swf_wrapper #menu ul li.codingbot a, #swf_wrapper_frontend #menu ul li.codingbot a { background-image: url("../images/bot.png"); }
#swf_wrapper #menu ul li.active, #swf_wrapper_frontend #menu ul li.active { font-weight: bold; }
#swf_wrapper #menu ul li:hover a, #swf_wrapper_frontend #menu ul li:hover a { color: #3398db; }

/* menu second lvl */
#swf_wrapper #modlue_menu_wrapper, #swf_wrapper_frontend #modlue_menu_wrapper {
   background-color: #f0f0f0;
   float: left;
   margin-bottom: 15px;
   margin-top: 5px;
   position: relative;
   width: 12%;
}
#swf_wrapper #modlue_menu_wrapper ul, #swf_wrapper_frontend #modlue_menu_wrapper ul { list-style-type: none; position: relative; }
#swf_wrapper #modlue_menu_wrapper ul li, #swf_wrapper_frontend #modlue_menu_wrapper ul li {
   color: black;
   height: 38px;
   position: relative;
   width: 100%;
}
#swf_wrapper #modlue_menu_wrapper ul li:first-child a, #swf_wrapper_frontend #modlue_menu_wrapper ul li:first-child a {
   background-color: #ffffff;
   color: #3398db;
   font-weight: bold;
   text-transform: capitalize;
}
#swf_wrapper #modlue_menu_wrapper a, #swf_wrapper_frontend #modlue_menu_wrapper a {
   color: #000;
   display: block;
   font-size: 95%;
   line-height: 38px;
   padding-left: 15px;
}
#swf_wrapper #modlue_menu_wrapper ul li.current_menu_item a, #swf_wrapper_frontend #modlue_menu_wrapper ul li.current_menu_item a { background-color: #ffffff; font-weight: bold; }
#swf_wrapper #modlue_menu_wrapper ul li.current_menu_item, #swf_wrapper_frontend #modlue_menu_wrapper ul li.current_menu_item { border-bottom: 1px solid #6d6968; border-top: 1px solid #6d6968; }
#swf_wrapper #modlue_menu_wrapper a:hover, #swf_wrapper_frontend #modlue_menu_wrapper a:hover { background-color: #ffffff; text-decoration: none; }

/* html components */
body,
body.x-body {
   background-color: #ffffff;
   color: #000;
   font-family: Exo, Arial, 'MS Sans Serif', serif;
   -webkit-font-smoothing: antialiased;
   font-size: 90%;
   margin: 0 auto;
   line-height: 15px;
}
#swf_wrapper h1, #swf_wrapper_frontend h1 { color: #0075B7; font-size: 17px; }
#swf_wrapper h2, #swf_wrapper_frontend h2 {
   color: #000;
   font-size: 16px;
   font-weight: normal;
   padding: 10px 0 10px 0;
   margin: 10px 0 25px 0;
   text-align: left;
   text-transform: capitalize;
   border-bottom: 1px solid #ddddd6;
}
#swf_wrapper h2.top {
   padding: 0 0 10px 0;
   margin-top: 20px;
}
#swf_wrapper h2.underline, #swf_wrapper_frontend h2.underline {
   text-align: left;
   border-bottom: 2px solid #3398db;
   margin-bottom: 10px;
   font-weight: bold;
   background-color: #f9f9f9;
   color: #3398db;
   padding-left: 5px !important;
   padding-bottom: 7px !important;
}
#swf_wrapper h1.underline, #swf_wrapper_frontend h1.underline {
   text-align: left;
   border-bottom: 2px solid #3398db;
   margin-bottom: 10px;
   margin-left: -10px;
   margin-right: -10px;
   font-weight: bold;
   background-color: #f9f9f9;
   color: #3398db;
   padding: 10px 5px 10px 7px;
}
#swf_wrapper input[type="text"],
#swf_wrapper_frontend input[type="text"],
#swf_wrapper input[type="email"],
#swf_wrapper_frontend input[type="email"],
#swf_wrapper input[type="date"],
#swf_wrapper input[type="number"],
#swf_wrapper input[type="password"]{
   border: 1px solid #0075B7;
   height: 30px;
   min-width: 200px;
   padding: 4px 17px;
   box-sizing: border-box;
   vertical-align: middle;
}

#swf_wrapper input.chosen-search-input {
   min-width: 160px;
}

#swf_wrapper input[type="text"]:focus {
   outline: none;
}
#swf_wrapper input[type="password"], #swf_wrapper_frontend input[type="password"] {
   border: 1px solid #0075B7;
   width: 200px;
}
#swf_wrapper textarea, #swf_wrapper_frontend textarea { border: 1px solid #0075B7; }
#header {
   background-repeat: no-repeat;
   box-shadow: #ddddd6 0 1px, rgba(0, 0, 0, 0.05) 0 3px;
   font-size: 100%;
   min-height: 55px;
   position: relative;
   text-align: center;
   width: 100%;
}
#swf_wrapper, #swf_wrapper_frontend { margin: 0 auto; width: 100%; }
#swf_wrapper .float_left, #swf_wrapper_frontend .float_left {
   float: left;
}
div#swf_logo { float: left; padding-left: 10px; }
#swf_content {
   float: left;
   min-height: 400px;
   position: relative;
}
.swf_content {
   width: 60%;
}
.content-full-screen {
   width: 79%;
}
#swf_sidebar {
   float: left;
   margin-left: 1%;
   width: 17%;
}
#swf_sidebar p {
   line-height: 18px;
}
#swf_footer {
   background-color: #6D6968;
   margin-top: 15px;
   position: relative;
}
#swf_footer div.swf_footer_content {
   background-color: #181818;
   padding: 10px 0;
   position: relative;;
}
#swf_footer div.copyrights {
   color: #FFFFFF;
   text-align: center;
   width: 100%;
}
div.swf_content_middle {
   background-color: white;
   border: 1px solid #ddddd6;
   border-top: 0;
   box-shadow: #e6e6e1 4px 6px 0 0;
   margin: 0 10px 0 0;
   min-height: 400px;
   padding: 0 10px 10px 10px;
}
div.swf_content_middle div.center { margin: 0 auto; }
div.system_version {
   color: #ffffff;
   font-size: 85%;
   padding: 3px 0;
   text-align: center;
}
div.logged_in {
   padding: 15px 15px 0 0;
   position: absolute;
   right: 0;
   text-align: right;
   top: 0;
}
div.logged_in * { float: right; }
div.logged_in span,
div.logged_in img {
   margin-right: 15px;
   padding-top: 3px;
}

/* edit existing users */
div.edit_users_div,
div.delete_users_div { position: relative; }

/* edit plugins */
img.edit_plugins { cursor: pointer; }
img.edit_module { cursor: pointer; }

/* swf validation */
#swf_wrapper .swf_validation_error, #swf_wrapper_frontend .swf_validation_error { color: red; font-size: 90%; }

#swf_wrapper input.fullwidth,
#swf_wrapper textarea.fullwidth,
#swf_wrapper_frontend input.fullwidth,
#swf_wrapper_frontend textarea.fullwidth{
   width: 99% !important;
   margin-bottom: 10px !important;
   padding: 3px 0.5% !important;
}

#swf_wrapper input[type='text'].inline,
#swf_wrapper_frontend input[type='text'].inline {
   margin-right: 10px;
   margin-bottom: 10px;
   padding: 3px 0.5%;
}

#swf_wrapper select.inline,
#swf_wrapper_frontend select.inline {
   margin-right: 10px;
}

.swf-scroll-wrapper {
   max-width: 100%;
   overflow-x: auto;
}

div.module-tab-navigation {
   border-bottom: 1px solid #e5e5e5;
   margin-top: 20px;
   margin-bottom: 20px;
}

div.module-tab {
   display: none;
}

div.module-tab-navigation ul {
   display: flex;
   flex-wrap: wrap;
   padding: 0;
   list-style: none;
   position: relative;
}

div.module-tab-navigation ul li {
   flex: none;
   padding-left: 20px;
   position: relative;
   display: list-item;
   height: 27px;
}

div.module-tab-navigation ul li:first-child {
   padding-left: 0;
}

div.module-tab-navigation ul li a {
   color: #222 !important;
   padding: 9px 20px;
   line-height: 20px;
   cursor: pointer;
}

div.module-tab-navigation ul li.active-tab a {
   border-bottom: 2px solid #3398db;
}

div.module-tab-navigation button.active-tab {
   background-color: #3398db; color: #ffffff;
}

div.module-tab-active {
   display: block;
}

/* mobile menu */
div#mobile_menu_wrapper {
   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: #000;
   z-index: 1001;
}

div#mobile_menu_wrapper h1 {
   background-color: #ffffff;
   padding: 10px;
}

div#mobile_menu {
   position: absolute;
   width: 50%;
   top: 0;
   left: 0;
}

div#mobile_menu_2lvl {
   position: absolute;
   width: 50%;
   top: 0;
   right: 0;
}

#mobile_menu ul li,
div#mobile_menu_2lvl ul li {
   width: 100%;
   text-align: left;
   border-bottom: 1px solid #e5e2e2;
   list-style-type: none;
   -khtml-opacity: .80;
   -ms-filter: alpha(opacity=80)”;
   -moz-opacity: .80;
   opacity: .80;
   background-color: #000;
}

#mobile_menu ul li a,
div#mobile_menu_2lvl ul li a {
   font-size: 90%;
   text-decoration: none;
   color: #ffffff;
   text-align: left;
   font-weight: bold;
   display: block;
   padding-top: 10px;
   padding-bottom: 10px;
   font-family: Arial,"sans-serif";
   text-transform: uppercase;
   padding-left: 3px;
}

#mobile_menu ul li a {
   color: #ffffff;
}

div#mobile_menu_2lvl ul li a {
   text-transform: none;
}

#mobile_menu ul li.current_menu_item,
div#mobile_menu_2lvl ul li.current_menu_item {
   background-color: #ffffff;
}

#mobile_menu ul li.current_menu_item a,
div#mobile_menu_2lvl ul li.current_menu_item a {
   color: #3398db;
}

.content-full-screen {
   width: 79%;
}

/* RESPONSIVE DESIGN */
/* Small screens */
@media only screen {
   .hide_mobile {display: none;}
   .hide_desktop {display: block;}

   /* sidebar */
   #swf_sidebar {
      width: 100%;
      float: none;
   }
   /* -- sidebar */

   /* content */
   #swf_content {
      float: none;
   }
   .swf_content {
      width: 100%;
   }
   .content-full-screen {
      width: 100%;
   }
   /* -- content */
   #swf_wrapper #swf_content .module_mobile_menu { width: 100%; float: none;}
}

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens */
@media only screen and (min-width: 40.063em) {
   .hide_mobile {display: block;}
   .hide_desktop {display: none;}

   /* sidebar */
   #swf_sidebar {
      width: 17%;
      float: left;
   }
   /* -- sidebar */

   /* content */
   #swf_content {
      float: left;
   }
   .swf_content {
      width: 60%;
   }
   .content-full-screen {
      width: 79%;
   }
   /* -- content */

} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/*  Large screens */
@media only screen and (min-width: 64.063em) {
   .hide_mobile {display: block;}
   .hide_desktop {display: none;}

   /* sidebar */
   #swf_sidebar {
      width: 17%;
      float: left;
   }
   /* -- sidebar */

   /* content */
   #swf_content {
      float: left;
   }
   .swf_content {
      width: 60%;
   }
   .content-full-screen {
      width: 79%;
   }
   /* -- content */

} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

/*  XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */

.stats-box {
    display: inline-block;
    margin: 10px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: calc(20% - 30px); /* Adjust width as needed */
    box-sizing: border-box;
}

.stats-box-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.stats-box-content {
    font-size: 16px;
}

.stats-box .green {
    background-color: #d4edda;
}

@media (max-width: 768px) {
    .stats-box {
        width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .stats-box {
        width: calc(100% - 20px);
    }
}