/*SCROLLBAR CSS*/

.notification-card {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  z-index: 1000;
}

.notification-card-header {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #f8f9fa;
  font-weight: bold;
}

.notification-card-body {
  padding: 10px;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item i {
  margin-right: 10px;
  color: #ffcc00; /* Change color as needed */
}

.badge-notification {
  position: absolute;
  padding: 7px 7px;
  top: 17;
  right: 122px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  transform: translate(50%, -50%);
}

/* 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;
  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;
  right: 0;
  width: 50%;
  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: 60%;
}

.login-box {
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}

@media (max-width: 576px) {

  .login-box,
  .register-box {
    margin-top: 5px !important;
  }
}

/*RIGHT SIDE CSS*/
.right {
  position: absolute;
  top: 0;
  left: 0%;
  bottom: 0;
  width: 50%;
  background-color: #003556;
}

/*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; */
  color: #003556;
}

.nav-item>a:active {
  color: white;
}

.nav-item>a:hover {
  /*color:#F3CA5E;*/
  color: #003556;
}

.main-header .nav-link {
  padding: 0px !important;
  height: unset !important;
  padding: 10px 10px !important;
}

.active-navbar {
  /*border-bottom: 4px solid #02ca8f;*/
  /*border-bottom: 2px solid #F3CA5E;*/
  /*border-bottom: 2px solid #FFF;*/
  background-color: #003556;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.active-navbar a {
  color: #fff !important;
  /* color: white !important; */
}

.routeNavBar .active-navbar {
  background-color: #ffffff;
  border-radius: 4px;
}

.routeNavBar .active-navbar a {
  color: #003556 !important;
  /* color: white !important; */
}

.dashboard-navbar-active {
  /* border-bottom: 2px solid #444444; */
  /* background: #d2e0ec7d; */
  /* border: 1px solid #444444; */
  background-color: #ffffff;
  border: 1px solid transparent;
  border-bottom: 0px;
  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 */

.pointer-hand {
  cursor: pointer;
}

.btn-group-sm>.btn,
.btn-sm {
  padding: .10rem .3rem;
}

.text30m {
  font-size: 14px;
  opacity: 0.6;
}

/* login slider css */
 /* Slider container */
 .nsliderHead {
  font-size: 32px;
  font-weight: bold;
  color: white;
  width: 90%;
  margin: 0 auto;
}

.nsliderContent {
  font-size: 20px;
  color: white !important;
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}

.nslider-container {
  position: relative;
  width: 75%;
  margin: 0 auto;
  overflow: hidden;
}

/* nSlider content */
.nslides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Single nslide */
.nslide {
  flex: 0 0 100%;
  text-align: center;
  padding: 0 10px;
}


/* Navigation arrows */
.prevArrow,
.nextArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 100;
  transition: transform 0.3s ease-in-out;
  color: white;
  font-size: 20px;
}

.prevArrow {
  left: 0;
}

.nextArrow {
  right: 0;
}

/* Dot indicators */
.dots {
  text-align: center;
  margin-top: 20px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #a6a6a678;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
}

.dot.active {
  background-color: white;
  width: 20px;
  height: 10px;
  border-radius: 10px;
}