/*
 * Mesh Client
 * ----------
 * mc.theme.var var(--main-theme-color)
 */

:root {
  --main-theme-color: #505050; /* Default: #3c8dbc */
  --main-theme-color-hover: #505050; /* Default: #367fa9 */
  --main-theme-top-nav-height: 72px; /* Default: #3c8dbc */
  --main-menu-collapse-hover: #505050; /* Default: #357ca5 */
  --main-header-text: #ffffff; /* Default: #ffffff */
  --main-light-text: #ffffff; /* Default: #ffffff */
  --main-light-text-active: #ffffff; /* Default: #ffffff */
  --main-light-text-hover: #f6f6f6;
  --livearea-background: #D3D3D3; /* Default: #ecf0f5*/
  --left-menu-background: #505050;
  --left-menu-Main-item-left-border: #FF0000; /* Default: #635a54*/
  --left-menu-main-item-text: #b8c7ce;
  --left-menu-main-item-text-link: #b8c7ce;
  --left-menu-main-item-text-hover: #b8c7ce;
  --left-menu-main-item-text-active: #b8c7ce;
  --left-menu-main-item-active-bg: #505050;
  --left-menu-main-item-hover-bg: #505050;
  --left-submenu-bg: #888888;
  --left-submenu-bg-active: #888888; /* Default: #2c3b41*/
  --left-submenu-bg-hover: #888888; /* Default: #2c3b41*/
  --left-submenu-text-link: #b8c7ce;
  --left-submenu-text-active: #FFFFFF; /* Default: #8aa4af*/
  --left-submenu-text-hover: #FFFFFF; /* Default: #8aa4af*/
  --left-menu-width: 216px;
  --left-menu-form-bg: #2d5e01;
  --left-menu-form-btn-hover: #999;
  --left-menu-form-text: #666;
  --footer-bg-color: #505050; /* Default: #3c8dbc */
 --footer-text: #ffffff; /* Default: #ffffff */
 --footer-text-link: #f6f6f6; /* Default: #ffffff */

  
  

  
  

}

.box.box-primary {
    border-top-color: var(--main-theme-color);
}

a {
    color: var(--main-theme-color);
}

.mesh-client .nav-client-name {color: white; 
                       font-weight: 
                           bold;display: block;
    float: left;
    height: 72px;
    font-size: 20px;
    line-height: 50px;
    text-align: left;
    width: 170px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    padding: 0px 5px 0px 0px;
        }

.mesh-client .main-header .navbar {
  background-color: var(--main-theme-color);
}
.mesh-client .main-header .navbar .nav > li > a {
  color: var(--main-light-text);
}
.mesh-client .main-header .navbar .nav > li > a:hover,
.mesh-client .main-header .navbar .nav > li > a:active,
.mesh-client .main-header .navbar .nav > li > a:focus,
.mesh-client .main-header .navbar .nav .open > a,
.mesh-client .main-header .navbar .nav .open > a:hover,
.mesh-client .main-header .navbar .nav .open > a:focus,
.mesh-client .main-header .navbar .nav > .active > a {
  background: rgba(0, 0, 0, 0.1);
  color: var(--main-light-text-hover);
}
.mesh-client .main-header .navbar .sidebar-toggle {
  color: var(--main-light-text);
}
.mesh-client .main-header .navbar .sidebar-toggle:hover {
  color: var(--main-light-text-hover);
  background: rgba(0, 0, 0, 0.1);
}
.mesh-client .main-header .navbar .sidebar-toggle {
  color: var(--main-header-text);
}
.mesh-client .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--main-theme-color-hover);
}
@media (max-width: 767px) {
  .mesh-client .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .mesh-client .main-header .navbar .dropdown-menu li a {
    color: var(--main-header-text);
  }
  .mesh-client .main-header .navbar .dropdown-menu li a:hover {
    background: var(--main-theme-color-hover);
  }

}

.content-wrapper {
    
    background-color: var(--livearea-background);
}



@media screen and (min-width: 767px) {
    .mesh-client .main-sidebar, .skin-blue .left-side { width: var(--left-menu-width);} /* Left Menu*/
    .content-wrapper {margin-left: var(--left-menu-width);background-color: var(--livearea-background);} /* adjust live area left margin for left menu width */
    .main-footer {margin-left: var(--left-menu-width);} /* adjust Footer left margin width with Left Menu*/

    .mesh-client .content-wrapper, .mesh-client .wrapper, .wrapper {
        background-color: gainsboro;
        background-color: rgba(220,220,220, 0.3);
    }
    body {
        background: url('themes/base/images/NetLinkBackground.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.main-sidebar, .left-side {
    padding-top: var(--main-theme-top-nav-height);
  }

@media (max-width: 767px) {
  .main-sidebar,
  .left-side {
    padding-top: var(--main-theme-top-nav-height);
  }
}


.mesh-client .main-header .logo {
  background-color: var(--main-theme-color-hover);
  color: var(--main-light-text);
  border-bottom: 0 solid transparent;
}
.mesh-client .main-header .logo:hover {
  background-color: var(--main-menu-collapse-hover);
}
.mesh-client .main-header li.user-header {
  background-color: var(--main-theme-color);
}
.mesh-client .content-header {
  background: transparent;
}
.mesh-client .wrapper,
.mesh-client .main-sidebar,
.mesh-client .left-side {
  /*background-color: var(--left-menu-background);*/

    background-color: gainsboro;
    background-color: rgba(220,220,220, 0.3);
}

.content{ padding: 5px 5px 5px 15px;}
.contentol {
    padding: 15px;
    background-color: white;
    background-color: rgba(255,255,255, 0.8);
}
.mesh-client .user-panel > .info,
.mesh-client .user-panel > .info > a {
    color: var(--main-header-text);
}
.mesh-client .sidebar-menu > li.header {
  color: var(--left-menu-main-item-text);
  background: var(--left-menu-background); /*#1a2226;*/
   
}
.mesh-client .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    background: var(--left-menu-main-item-active-bg);
    margin-top: 5px;
}
.mesh-client .sidebar-menu > li:hover > a,
.mesh-client .sidebar-menu > li.active > a {
  color: var(--main-light-text);
  background: var(--left-menu-main-item-active-bg);
  border-left-color: var(--main-theme-color);
}
.mesh-client .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: var(--left-submenu-bg);
}
.mesh-client .sidebar a {
  color: var(--left-menu-text-link);
}
.mesh-client .sidebar a:hover {
  text-decoration: none;
}
.mesh-client .treeview-menu > li > a {
  color: var(--left-submenu-text-link);
}
.mesh-client .treeview-menu > li.active > a,
.mesh-client .treeview-menu > li > a:hover {
  color: var(--main-light-text);
}
.mesh-client .sidebar-form {
  border-radius: 3px;
  border: 1px solid var(--left-menu-form-bg);
  margin: 10px 10px;
}
.mesh-client .sidebar-form input[type="text"],
.mesh-client .sidebar-form .btn {
  box-shadow: none;
  background-color: var(--left-menu-form-bg);
  border: 1px solid transparent;
  height: 35px;
}
.mesh-client .sidebar-form input[type="text"] {
  color: var(--left-menu-form-text);
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}
.mesh-client .sidebar-form input[type="text"]:focus,
.mesh-client .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: var(--left-menu-form-text);
}
.mesh-client .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.mesh-client .sidebar-form .btn {
  color: var(--left-menu-form-btn-hover);
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}
.mesh-client.layout-top-nav .main-header > .logo {
  background-color: var(--main-theme-color);
  color: var(--main-light-text);
  border-bottom: 0 solid transparent;
}
.mesh-client.layout-top-nav .main-header > .logo:hover {
  background-color: var(--main-menu-collapse-hover);
}

/* User Dropdown */
.navbar-nav>.user-menu>.dropdown-menu>li.user-header { height: 60px;background-color: var(--main-theme-color-hover);} /* User Top Menu*/
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p { margin-top: 0px;} /* User Top Menu*/
.navbar-nav>.user-menu>.dropdown-menu>.user-footer { background-color: var(--main-theme-color-hover);} /* User Top Menu*/

/* Footer */
.main-footer, .main-full-footer {background-color: var(--footer-bg-color); color:var(--footer-text)}
.main-footer a, .main-footer a:link, .main-footer a:visited,
.main-full-footer a, .main-full-footer a:link, .main-full-footer a:visited  {color:var(--footer-text-link)}
.main-full-footer { padding: 15px; z-index: 1020; position: absolute; bottom: 0px; width: 100%;}

/* Top Nav Bar */
.mesh-client .main-header .navbar, 
.mesh-client .main-header .navbar a.sidebar-toggle, 
.mesh-client .main-header .navbar .nav > li > a  { height: var(--main-theme-top-nav-height);} /* Top Nav Bar Height*/

.mesh-client .main-header .navbar a.sidebar-toggle:hover, 
.mesh-client .main-header .navbar .nav > li > a:hover  { color: var(--main-light-text-hover);} /* Top Nav Bar items Hover*/

.mesh-client .main-header .navbar a.sidebar-toggle, 
.mesh-client .main-header .navbar .nav > li > a    { color: var(--main-light-text);} /* Top Nav Bar Items standard*/

                                                                                     
/* Left Menu */

.mesh-client .sidebar-menu>li>a { color:var(--left-menu-main-item-text-active); } /* Left Menu Main Font Active*/
.mesh-client .sidebar-menu>li.active>a { color:var(--left-menu-main-item-text-active); background: var(--left-menu-main-item-active-bg); border-left-color: var(--left-menu-Main-item-left-border);} /* Left Menu Main Font Active*/
.mesh-client .sidebar-menu>li:hover>a { color:var(--left-menu-main-item-text-hover); background: var(--left-menu-main-item-hover-bg); border-left-color: var(--left-menu-Main-item-left-border);} /* Left Menu Main Font Active*/

/*.mesh-client .sidebar-menu>li>.treeview-menu { background-color: red;} /* Left Menu Expanded*/*/

.mesh-client .treeview-menu>li>a { color:green;} /* Left Menu Expanded Font*/
.mesh-client .treeview-menu>li.active>a { color:var(--left-submenu-text-active);background: var(--left-submenu-bg-active);} /* Left Menu Expanded Font Active*/
.mesh-client .treeview-menu>li>a:hover { background:var(--left-submenu-bg-hover);color: var(--left-submenu-text-hover);} /* Left Menu Expanded Font*/


