.toast{
  display: none;
  min-width: 20vw
}
 body {
        font-family: 'Roboto', sans-serif;
    }

    h1 {
        font-family: 'Montserrat', sans-serif;
    }
.toast.show {
    display: block;
    opacity: 1;
    position: fixed;
    z-index: 99999999;
    margin: 20px;
    right: 0;
    top: 3.5rem;
}
.swal2-container{
    z-index: 99999999;
}
#preloader2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #ffffff82;
}

#preloader2:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 3px solid #80888e; /* Gray for all sides */
  border-top-color: #b0b8bf; /* Lighter gray for the top border */

  border-radius: 50%;
  width: 45px;
  height: 45px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 .modal-dialog.large {
    width: 80% !important;
    max-width: unset;
  }
  .modal-dialog.mid-large {
    width: 50% !important;
    max-width: unset;
  }
  #viewer_modal .btn-close {
    position: absolute;
    z-index: 999999;
    /*right: -4.5em;*/
    background: unset;
    color: white;
    border: unset;
    font-size: 27px;
    top: 0;
}
#viewer_modal .modal-dialog {
        width: 80%;
    max-width: unset;
    height: calc(90%);
    max-height: unset;
}
  #viewer_modal .modal-content {
       background: black;
    border: unset;
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #viewer_modal img,#viewer_modal video{
    max-height: calc(100%);
    max-width: calc(100%);
  }

  

  .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #606a74 !important;
    color: #fff;
}

.navbar-success {
    background-color: #1e293b !important;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
    background-color: #1e293b !important;
}

tbody {
  font-size:14px !important;
}

/* General Sidebar Styling */
.main-sidebar {
  background-color: #1e293b; /* Dark gray-blue */
  color: #fff; /* White text */
  font-family: 'Arial', sans-serif;
 
}



/* List Item Styling */
.main-sidebar .nav-item a {
  font-size: 14px !important;; /* Smaller font size */
  padding: 8px 12px !important;; /* Adjust padding for compact design */
  color: #cbd5e1 !important;; /* Light gray text */
  border-radius: 6px !important;; /* Rounded edges */
  transition: background-color 0.3s ease, color 0.3s ease !important;;
}

/* Hover Effect */
.main-sidebar .nav-item a:hover {
  background-color: #515967 !important;; /* Blue background on hover */
  color: #ffffff !important;; /* White text on hover */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;; /* Subtle shadow */
}

/* Active Link Styling */
.main-sidebar .nav-item a.active {
  background-color: #4e5360 !important;; /* Highlight active link */
  color: #fff !important;;

}

/* Treeview Dropdown Styling */
.main-sidebar .nav-treeview {
  background-color: #1e293b !important;; /* Same as sidebar for consistency */
  padding-left: 15px !important;; /* Indentation for tree items */
}

/* Treeview Item Styling */
.main-sidebar .nav-treeview .nav-item a {
  font-size: 12px !important;; /* Slightly smaller for nested items */
  color: #a0aec0 !important;; /* Muted gray text */
}

.main-sidebar .nav-treeview .nav-item a:hover {
  background-color: #49546b !important;; /* Darker blue on hover */
  color: #ffffff !important;;
}

    /* Basic styling for a cleaner look */
    .card {
      border-radius: 10px !important;
  }
  
  .card-header {
      
      /* Reduce padding */
      font-size: 13px !important;
      /* Smaller font size */
      height: auto !important;
      /* Automatically adjust height */
      line-height: 1.2 !important;
      /* Tighter line spacing */
  }
  
  
  .card-header2 {
      background-color: grey !important;
      color: white !important;
      border-top-left-radius: 5px !important;
      border-top-right-radius: 5px !important;
  }
  
  @media (max-width: 768px) {
      .table-responsive {
          font-size: 12px !important;
      }
  }
  
  #intercomAnalysisTable, #list {
      width: 100% !important;
  }


 td, th {
    font-size:13px;
  }

 
  /* Calendar container */
#calendar {
  margin-top: 20px;
}

/* Error styling */
.is-invalid {
  border-color: red !important;
}

.error-message {
  color: red;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Optional: Style for the error message container */
.error-message {
  font-size: 0.9em;
}

.fc-timegrid-slot {
  height: 50px !important;
  /* Adjust this value as needed */
}

.fc-timegrid-axis {
  line-height: 50px !important;
  /* Ensure alignment of time labels */
}

.card-header2 {
  background-color: grey;
  color: #fff;
}


.card-title {
  font-size: 0.9rem !important; 
  
}

#tableContentView td, #tableContentView th {
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden;   /* Hide overflowing content */
  text-overflow: ellipsis; /* Add ellipsis (...) for overflowing text */
}

#tableContentView {
  table-layout: auto; /* Let the table adjust column widths automatically */
}

/* Underline and 4 dots effect */
.editable-score {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  /* Space for the underline */
}

.editable-score:focus {
  outline: none;
  border-bottom: 2px solid #007bff;
  /* Change color when focused */
}

/* Show 4 dots when focused */
.editable-score:focus::after {
  content: "....";
  position: absolute;
  bottom: -5px;
  /* Adjust positioning of dots */
  right: 0;
  font-size: 18px;
  color: #007bff;
}

/* Ensure dots don't appear when not focused */
.editable-score:not(:focus)::after {
  content: "";
}

table th {
  background-color: rgb(229 229 229);
  font-weight: bold;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* Reduced width */
  height: 20px; /* Reduced height */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  transition: .4s;
  border-radius: 20px; /* Adjusted to match height */
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* Reduced handle size */
  width: 16px;  /* Reduced handle size */
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: green;
}

input:checked + .slider:before {
  transform: translateX(20px); /* Adjusted for smaller size */
}