/*SCROLLBAR CSS*/

/* width */
.navcontainer::-webkit-scrollbar {
  width: 10px;
  height: 4px;
}

.navcontainer{
  scrollbar-color: #fff;
  scrollbar-width: 1px;
}

/* Track */
.navcontainer::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px white; 
  border-radius: 10px;
  width: 10px;
}
 
/* Handle */
.navcontainer::-webkit-scrollbar-thumb {
  background: #ccc; 
  border-radius: 10px;
  width: 10px;
}

/* Handle on hover */
.navcontainer::-webkit-scrollbar-thumb:hover {
  background: #bbb; 
}



/*LOGO CSS*/
.layout-top-nav .wrapper .brand-image{
  height:45px!important;
}

.dash-title{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 58%;
}

.secnav{
  overflow-x: auto;
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
  border: 1px solid black;
  background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
  width: 10px;
  background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
  background-color: #000000;  
}


/*CHROME FOCUS DISABLE*/*
 input:focus, textarea:focus, select:focus, button:focus{
        outline: none;
    }
/*COMMON CSS CLASSES*/
.widget_header{
  cursor:grab;
}
.widget_header:active{
  cursor:move;
}
.placetext{
  font-family: 'LatoWeb'!important;
  font-size: 1.5em!important;
  opacity:0.5!important;
  text-align: center!important;
  top:15%!important;
}
.p_icon{
  opacity: 1!important;
    -moz-animation: p_icon 2s infinite;
  -webkit-animation: p_icon 2s infinite;
  animation: p_icon 2s infinite;
}
@keyframes p_icon {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.sort-highlight{
  text-align: center!important;
  border: 2px dashed #000 !important;
  background-color: rgba(255,255,255,.75)!important;
}

.lato{
	font-family: LatoWeb!important;
	font-size: 1em!important;
}
.roboto{
	font-family: 'Roboto Regular'!important;
	font-size: 1.3em!important;
  font-color:#061844;
}
.l_card{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}

.fa-pencil:hover{
  color:#6C757D;
}

/*  LOGIN PAGE CSS*/
/*----------------------------*/
/*LEFT CSS*/
.lato1{
    font-family: 'LatoWeb'!important;
}
.left {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    width: 40%;
    background: #fff;
    }
.login-container, #demo
{
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  -ms-flex-pack: center;
  justify-content: center;
}
.login-box, .signup-box, #demo-inner{
    width: 75%;
}
@media (max-width: 576px){
.login-box, .register-box {
  margin-top: 5px!important;
  }
}
/*RIGHT SIDE CSS*/
.right {
    position: absolute;
    top: 0;
    right:0%;
    bottom: 0;
    width: 60%;
    background-color: #00416A;
} 
/*Login - Page*/
.input100{
height: 45px!important;
}
.login100-form-btn{
height: 45px!important;
}
.help{
    opacity: 0.3;
    margin-left: 90%;
    display: inline-block;
    position: absolute;
    top:25%;
}
.help:hover{
    cursor: pointer;
    opacity: 1;
}
/***** Slide Right *****/
.slide-right {
  animation: .8s slide-right;
}
@keyframes slide-right {
  from {
    margin-left: -200%;
  }
  to {
    margin-left: 0%;
  }
}
/*  END LOGIN PAGE CSS*/
/*----------------------------*/


/*BrokerUItab - Page*/
.main-header .navbar-nav .nav-item{
  margin-left:1.5rem;
  margin-right:1.5rem;
}
#second-navbar .navbar-nav .nav-item{
  margin-left:0rem;
  margin-right:0rem;
  padding-left:.8rem;
  padding-right:.8rem;   
}
.secnav
.dashboard-navbar{
  padding-bottom: 0rem!important;
}
.mainbar > .nav-item{
	/*padding-top: 1rem!important;*/
  /*padding-bottom: 1.3rem;*/
}
.nav-item > a{
	color:rgba(255,255,255,.60);
  font-weight: bold;
}
.nav-item > a:active{
	color:white;
}
.nav-item > a:hover{
	/*color:#F3CA5E;*/
  color:white;
}
.active-navbar {
	/*border-bottom: 4px solid #02ca8f;*/
	/*border-bottom: 2px solid #F3CA5E;*/
  /*border-bottom: 2px solid #FFF;*/
}	
.active-navbar a {
	color: white !important;
}
.dashboard-navbar-active {
	border-bottom: 2px solid #444444;
  background: #d2e0ec7d;
  padding-left: 5px;
  padding-right: 5px;  
}
.dashboard-navbar-active a {
	color: white !important;
}
#second-navbar:active{
  color:white!important;
}
.bg {
	background-color: rgba(0,0,0,0.1);
}
.navbar-nav > li > a{
	font-size: 1em;
}
.modal-header{
	background-color: #eee;
}
.text-info{
	color:#000 !important;
}
.table-info{
  background-color:#fff !important;
}
.text-green{
  color: #378A78;
}
.btn-warning{
  background-color:#4664AA!important;
  color:white!important;
  border-color:#000044!important;
}
.btn-warning:hover{
  background-color:#40578e!important;
  color:white!important;
  border-color:#4664AA!important;
}

.dropdown-item:active{
  background-color: #f8f9fa!important;
  color:black!important;
}
/*WIDGET-HTML PAGE*/

	.led-red {
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    height: 80px;
    background-color: #000000;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px, inset #600 0 -1px 9px, #F00 0 2px 12px;
    }
    .led-yellow {
        margin: 20px auto;
        width: 50px;
        height: 50px;
        background-color: #fff200;
        border-radius: 50%;
        box-shadow: #000 0 -1px 7px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
    }
    .switch1 {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch1 input {position: absolute; opacity: 0;}

.slider1 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider1:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider1 {
  background-color: #2ab934;
}

input:focus + .slider1 {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider1:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on1
{
  display: none;
}

.on1, .off1
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider1 .on1
{display: block;}

input:checked + .slider1 .off1
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider1.round {
  border-radius: 34px;
}

.slider1.round:before {
  border-radius: 50%;}

/*END WIDGET*/

/*MEDIA QUERIES*/

@media only screen and (max-width: 767px) {


.dashboard-navbar-active {
  border-bottom: none!important;
}
.active-navbar {
  /*border-bottom: 4px solid #02ca8f;*/
  border-bottom:none!important;
}
.second_logo{
  display: block!important;
} 
.dash_dropdown{
  display:none!important;
}
#user-login-settings{
  display: block!important;
}
#main_nav{
  display:none!important;
}
#second-navbar{
  z-index: 10!important;
}
#mqtt-navbar{
  display: block!important;
}
}



/* FOR TABLE MODIFICATION DATA-TH*/
@media only screen and (max-width: 48em) {
  thead th {
    display: none;
  }
  td, th {
    display: block;
    clear: both;
  }
  td[data-th]:before {
    font-weight: bold;
    color:darkblue !important;
    content: attr(data-th);
    float: left;
  }
  .table td {
    border-top: 0px;
  }
  .table tr {
    border-top: 1px solid  #d8d8d8;
  }
  .card-body.p-0 .table tbody > tr > td:first-of-type, .card-body.p-0 { 
    padding-left: 0.75rem !important;
}
    .textbox {
        float: right;
    } 
    tbody > tr > td > p  {
        margin-left: 35%;
        max-width:100%; 
        word-break: break-all !important;
    }
  
}

.l_hover{
  transition: .3s;
}

.l_hover:hover{
  box-shadow: 0px 20px 40px rgba(0,0,0,0.2)!important;
  transform: scale(1.05,1.05)!important;
  transition: .3s;
}

/* Navbar Design */

@media (min-width: 768px){
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0rem!important;
    padding-left: 0rem!important;
}
}

@media screen and (max-width: 767px) {
#pushmenu
   {
    display:block!important;
  }
}
/*Ends @media screen 



/*  Mobile Menu Sidebar */

/*  CUSTOM SIDEBAR DIV  */

.menuside {
  /*height: calc(100% - (3.5rem + 1px));*/
  width: 0;
  position: absolute;
  z-index: 1999;
  top: 0em;
  right: 0em;
  background-color: white;
  overflow-x: hidden;
  transition: 0.2s;
  /*padding-top: 60px;*/
  opacity:1!important;
  box-shadow: 0 8px 10px -5px rgb(0 0 0 / 20%), 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%);
}



.menuside a {
  padding: .4rem .7rem;
  font-family: 'LatoWeb';
  font-size: 0.8em; 
  display: block;
  transition: 0.2s;
}




/*  WIDGET PRELOADER  */

.eq-spinner {
  height: 20px;
  width: 21px;
  margin: 100px auto;
  transform: rotate(180deg);
}  
.eq-spinner:before, .eq-spinner:after, .eq-spinner > i {
  float: left;
  width: 5px;
  height: 20px;
  margin-left: 3px;
  content: "";
}
.eq-spinner:before {
  margin-left: 0;
}

.eq-spinner:before {
  animation: bounce-3 1s infinite linear;
}
.eq-spinner > i {
  animation: bounce-2 1s infinite linear;
}
.eq-spinner:after {
  animation: bounce-1 1s infinite linear;
}
@keyframes bounce-1 {
  0% { height: 1px ; background: #00b894; border:1px solid darkgreen;}
  16.7% { height: 20px ; background: #00b894; border:1px solid darkgreen;}
  33.4% { height: 20px ; background: #00b894;border:1px solid darkgreen;}
  100% { height: 1px ; background: #00b894; border:1px solid darkgreen;}
}
@keyframes bounce-3 {
  0% { height: 1px ; background: #ade3ed; border:1px solid darkblue; }
  16.7% { height: 1px; background: #ade3ed; border:1px solid darkblue;}
  33.4% { height: 20px; background: #ade3ed; border:1px solid darkblue;}
  50% { height: 20px; background: #ade3ed; border:1px solid darkblue;}
  100% { height: 1px; background: #ade3ed; border:1px solid darkblue;}
}
@keyframes bounce-2 {
  0% { height: 1px ; background: #fcdc8d; border:1px solid darkorange; }
  33.4% { height: 1px ; background: #fcdc8d; border:1px solid darkorange; }
  50% { height: 20px ; background: #fcdc8d; border:1px solid darkorange; }
  66.7% { height: 20px ; background: #fcdc8d; border:1px solid darkorange; }
  100% { height: 1px ; background: #fcdc8d; border:1px solid darkorange; }

  /*  End Preloader */