.head-box {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

}

.head-box .box {

  background: #fff !important;

  padding: 20px;

  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.1);

  border-radius: 5px;

  width: 100%;

  position: relative;

}

.head-box .box i {

  display: none;

}

.settings {

  position: absolute;

  top: 15px;

  right: 15px;

}

.head-box .box:hover i {

  display: inline-block;

}

@media (max-width: 767px) {

  .head-box {

    flex-wrap: wrap;

  }

  .head-box div {

    width: 45vw !important;

  }

}

@media (max-width: 588px) {

  .head-box {

    flex-wrap: wrap;

  }

  .head-box div {

    width: 90vw !important;

  }

}



/* Table design */

.tables {

  display: flex;

  flex-wrap: wrap;

  padding: 40px 0px;

  gap: 10px;

  justify-content: space-between;

  align-items: center;

}



.sTable {

  position: relative;

  width: 49%;

  background: #fff;

  padding: 20px;

  border-radius: 7px;

  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);

}

.sTable .settings {

  position: absolute;

  right: 20px;

  top: 20px;

}

.sTable .body {

  height: 400px;

  overflow-y: scroll;

}

.sTable .body::-webkit-scrollbar {

  width: 10px;

}



/* Track */

.sTable .body::-webkit-scrollbar-track {

  background: #f1f1f1;

}



/* Handle */

.sTable .body::-webkit-scrollbar-thumb {

  background: #888;

}



/* Handle on hover */

.sTable .body::-webkit-scrollbar-thumb:hover {

  background: #555;

}

.sTable table {

  margin-top: 30px;

}

.sTable table tr {

  border-bottom: 1px solid rgba(0, 0, 0, 0.4);

}

.sTable table tr th {

  border-right: 1px solid rgba(0, 0, 0, 0.1);

  padding: 0px 10px;

  font-size: 16px;

  font-weight: 900;

  color: #060607;

  font-size: 13px;

}

.sTable table tr td {

  padding: 5px 10px;

}

.sTable table tr:first-child {

  border-top: 1px solid rgba(0, 0, 0, 0.3);

}

.sTable table tr td:nth-child(1),

.sTable table tr td:nth-child(5),

.sTable table tr td:nth-child(6) {

  color: var(--ct-heading-color);

}



.sTable table tr td i {

  color: #060607;

  opacity: 0.7;

}

/* .sTable table tr td:nth-child(6){

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

} */

.sTable table tr td:nth-child(6) img {

  width: 30px;

  height: 30px;

  object-fit: contain;

  border-radius: 50%;

}

.sTable .fa-rotate-right,

.sTable .fa-ellipsis-vertical {

  display: none;

}

.sTable:hover .fa-rotate-right,

.sTable:hover .fa-ellipsis-vertical {

  display: inline-block;

}

table tbody tr:hover {

  background: aliceblue;

}

@media (max-width: 992px) {

  .sTable {

    width: 100%;

  }

  .sTable .body {

    height: auto;

  }

}

.side-nav-second-level {

    display: block;

    white-space: nowrap;

    overflow-x: auto;

    width: max-content;  

    min-width: 290px;     

}

.side-nav-second-level li a{

  padding-left: 8px !important;

}





















@media (max-width: 900px){

.side-nav-second-level {

    display: block;

    white-space: nowrap;

    overflow-x: auto;

    width: max-content; 

    min-width: 290px;   

    margin-top: 1px;

}



.side-nav-second-level li a{

  padding-left: 8px !important;

  

}





}









@media (max-width: 560px){

  .nav-tabs.nav-bordered li a{

    padding: 10px;

    font-size: 12px;

  }

  .breadcrumb{

    font-size: 9px;

  }

  .breadcrumb-item + .breadcrumb-item::before{

    font-size: 9px;

  }

}

/* left side menu */



.leftside-menu {

  background: #eff1fd;

  border-right: 3px solid #fff;

}

.hi {

  height: 300px;

  overflow-y: scroll;

}

.nav-link.dropdown-toggle.arrow-none.plus {

  width: 30px;

  height: 30px;

  background: gray;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  border-radius: 5px;

}

.span {

  position: relative;

}

.span + span {

  display: none;



}

.span:hover + span {

  display: block;

  z-index: 1000;

  position: absolute;

  top: 50px;

  background: black;

  padding: 5px;

  border-radius: 10px;

  color: #fff;

}

.search-form {

  display: flex;

 

  flex-direction: column;

}

.search-form-div{

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid grey;

}

.search-form-div input{

 width: 80%;

 border: 0;

 outline: 0;

}

.search-form-span {

  display: flex;

  justify-content: flex-end;

  margin-top: 10px;

  color:  #0070E0;

}

.signal-on-board-image {

  width: 80%;

  height: 80%;

}

.offcanvas-body.notify{

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

}

.offcanvas-body.notify .fontsmooth{

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;



}

.notify-btn {

    color: #fff;

    border-radius: 6px;

   

    box-sizing: border-box;

    padding: 8px 20px;

    box-shadow: inset 0 -2px 0 #003CCA;

    background: linear-gradient(0deg, #0279ff 0%, #00a3f3 100%);

    font-size: 16px;

    position: relative;

    border: 0;

    outline: 0;

    cursor: pointer;

    text-align: center;

    margin-right: 8px;

    white-space: nowrap;

  }

  .notify-btn:hover{

    background: linear-gradient(90deg, #0279ff 0%, #00a3f3 100%);



  }





























  

  .status-card {

    border: none;

    border-radius: 15px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

  }



  .status-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

  }



  .status-icon {

    width: 60px;

    height: 60px;

    background-color: rgba(0, 123, 255, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    font-size: 28px;

  }



  .status-title {

    font-size: 25px;

    font-weight: 700;

    color: #333;

  }



  .status-label {

    font-size: 15px;

    color: #6c757d;

    font-weight: 500;

  }



  .status-up {

    color: #28a745;

    font-size: 18px;

    vertical-align: middle;

  }





/* Reduce font size for the whole control */





  .choices__inner,

  .choices__list--dropdown .choices__item,

  .choices__input,

  .choices__placeholder {

    font-size: 12px !important;

    margin-bottom: 0px !important;

    padding: 2px 0 2px 2px !important;

    background-color: white !important;

    border-radius: 0.25rem !important;

  }



  /* Optional: adjust height so it looks like Bootstrap form-control */

  .choices__inner {

    min-height: calc(1.5em + 0.75rem + 2px) !important; /* matches .form-select */

    padding: 0.375rem 0.75rem !important;

  }



  .choices__list--multiple .choices__item{

    background-color: #727cf5 !important;

  border: 1px solid #727cf5 !important;

  }





  .imagePreview img {

  width: 100px;         /* Thumbnail width */

  height: 100px;        /* Thumbnail height */

  object-fit: cover;    /* Maintain aspect ratio */

  border: 1px solid #ddd;

  border-radius: 4px;

  margin: 5px;

}



/* Mobile view: smaller thumbnails */

@media (max-width: 576px) {

  .imagePreview img {

    width: 70px;

    height: 70px;

  }

}



.videoPreview video {

  width: 200px;         /* Video width */

  height: 120px;        /* Video height */

  border: 1px solid #ddd;

  border-radius: 4px;

  margin-top: 5px;

}



/* Mobile view: smaller video */

@media (max-width: 576px) {

  .videoPreview video {

    width: 150px;

    height: 90px;

  }

}