/*=============================================================
    Authour URI: www.binarycart.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */
/*==============================================
    GENERAL  STYLES    
    =============================================*/
body {
    font-family: 'Open Sans', sans-serif !important;
    line-height:30px;
}

 #wrapper {
    width: 100%;
    margin-top:50px;
}

#page-wrapper {
    padding: 15px 15px;
    min-height: 600px;
    background:#F3F3F3;
    padding-top: 20px;
   
}
#page-inner {
    width:100%;
    margin:10px 20px 10px 0px;
    background-color:#fff!important;
    padding:10px;
    min-height:1050px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.pad-top {
    padding-top:20px;
}

/*==============================================
    MENU STYLES    
    =============================================*/
  .navbar {
    background-color: white !important; /* Background color */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); /* Shadow below navbar */
  }
  .navbar-icon > .bi-camera-fill{
    font-size: 1.4rem;
  }



  .navbar-toggler {
    border: none; /* Remove border around the icon */
    color: black !important; /* Icon color */
  }

  .navbar-toggler:hover {
    border: none !important;/* Remove border on hover */
    color: #0bb7d185 !important;
  }
  

 /* Custom styling for navbar links */
 .navbar-nav .nav-link {
  color: #525252; /* Text color */
  text-transform: uppercase; /* Convert text to uppercase */
  padding: 10px 15px; /* Padding around the links */

  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition effects */
  text-decoration: none !important; /* Remove underline */
}

/* Hover effect for navbar links */
.navbar-nav .nav-link:hover {
  background-color: #dddddd7c; /* Background color on hover */
  color: #333; /* Text color on hover */
}

/* Active link styling */
.navbar-nav .active-link .nav-link {
  background-color: #ffffff63; /* Background color for active link */
  color: #0bb6d1; /* Text color for active link */
}


.logout-spn {
    color:#0bb6d1;
    font-size:10px;
    font-weight:800;
    margin-left: 8px;
    
} 
  .logout-spn a {
    color:#0bb6d1;
    text-decoration:none;
}

.active-icon {
    color: #0bb6d1; /* Text color for active link */
    font-size: 18px; /* Icon size */
    margin: 0 10px; /* Spacing between icons */
    transition: color 0.3s; /* Smooth transition effect */
}



/* Modern styling for the fixed bottom navbar */
/* .navbar.fixed-bottom {
  background-color: #000000c2 !important; 
  padding-top: 15px; 
  padding-bottom: 15px; 
  box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1); 
} */


.navbar-icon {
  color: #a5a5a5; /* Icon color */
  font-size: 18px; /* Icon size */
  margin: 0 10px; /* Spacing between icons */
  transition: color 0.3s; /* Smooth transition effect */
}

.navbar-icon > .fa-solid {
 padding-bottom:10px;
}
.navbar-icon > .snooze-icon {
 padding-bottom:20px;
}

.navbar-icon:hover {
  color: #0bb7d185; /* Change icon color on hover */
}

/*==============================================
    DASHBOARD STYLES    
    =============================================*/
.div-square {
    padding:5px;
    border:3px double #e1e1e1;
    -webkit-border-radius:8px;
   -moz-border-radius:8px;
    border-radius:8px;
    margin:5px;

}

.div-square> a,.div-square> a:hover {
    color:#808080;
     text-decoration:none;
}

.div-square-main {
    padding:5px;
    border:3px double #e1e1e1;
    -webkit-border-radius:8px;
   -moz-border-radius:8px;
    border-radius:8px;
    margin:5px;

}

.div-square-main:hover {
    color:#808080;
     text-decoration:none;
}
/*==============================================
    FOOTER STYLES     
    =============================================*/
.footer {
    background-color:#214761;
    width:100%;
    color:#fff;
    padding:20px 50px 20px 50px;
     padding-left:20px;
}


    .footer > a, .footer>a:hover {
       
        color:#fff;
    }

/*==============================================
    WEBRTC VIDEO ZOOM/PAN STYLES
    =============================================*/
/* Modal body styles for video zoom/pan support */
.fs_modal .modal-body {
    overflow: hidden;
    position: relative;
    touch-action: none; /* Disable default touch behaviors */
}

/* WebRTC video container styles */
.webrtc-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none; /* Allow custom touch handling */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Remote video element styles with zoom/pan support */
#remoteVideo {
    position: relative;
    transform-origin: center center;
    transition: none; /* Disable transitions for smooth touch response */
    will-change: transform; /* Optimize for transform changes */
    
    /* iOS specific styles */
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    
    /* Prevent iOS bounce effect */
    -webkit-overflow-scrolling: touch;
}

/* Zoomed state for video */
#remoteVideo.zoomed {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

#remoteVideo.zoomed:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

/* Touch action styles for different states */
.webrtc-video-container.zoom-enabled {
    touch-action: pinch-zoom;
}

.webrtc-video-container.panning {
    touch-action: pan-x pan-y;
}

/* Ensure modal footer stays on top */
.fs_modal .modal-footer {
    position: relative;
    z-index: 10;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .webrtc-video-container {
        -webkit-touch-callout: none;
    }
    
    #remoteVideo {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Android specific optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #remoteVideo {
        transform: translateZ(0); /* Force hardware acceleration */
    }
}

/*==============================================
    MEDIA QUERIES     
    =============================================*/
 
 @media(min-width:768px) {
     #page-wrapper{
        margin: 0 0 0 260px;
        padding: 15px 30px;
        min-height: 1050px;
		
    }
	
	
    .navbar-side {
        z-index: 1;
        position: absolute;
        width: 260px;
       
    }

 
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}




/*==============================================
    BUTTONS    
    =============================================*/
    /* Adjusted style to display buttons in one line with spacing */
  .button-container-fit {
    display: flex;
    justify-content: space-between;
    gap: 5px; /* Added space between buttons */
}

.button {
    width: 100%;
    background-color: #0bb6d1;
    color: #fff;
    border: none;
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    display: flex;
    font-size: 16px;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.3s;
    align-items: center;
    justify-content: center;
}

.button:hover {
    background-color: #0bb7d185;
}


.remove-button {
  color: #020202;
  background: none;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.remove-button:hover {
  background: none;
}

.round-button {
display: inline-block;
border-radius: 50%; 
width: 50px;
height: 50px;
font-size: 24px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Container for the button */
.button-container {
  text-align: right;
  margin: 20px; /* Add margin for spacing if needed */
  } 
    

    
    /* Hover effect
    .round-button-white:hover {
    background-color: #ffffffa4;
    } 
    */

  
  .round-button-grey {
    display: inline-block;
    border: 2px solid #ccc; /* Blue color for the border */
    border-radius: 50%; /* Make it round */
    background-color: white; /* Blue color for the background */
    color: #ccc; /* White color for the text */
    width: 50px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }
        
    /* Hover effect */
    .round-button-grey:hover {
    background-color: #b9b9b985; /* Darker blue on hover */
    }

  /* Adjusted style to display buttons in one line with spacing */
  .bluebutton-container {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* Added space between buttons */
}

.bluebutton {
    width: 100%;
    background-color: #0bb6d1;
    color: #fff;
    border: none;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bluebutton:hover {
    background-color: #0bb7d185;
}


/*SQUARE BUTTON */
.button5 {
  padding: 5px 5px;
  width:35px;
  border-radius: 12px;
  background-color: white;
  color: black;
  border: 1px solid #0bb6d1; /*blue*/
  font-size: 15px;
  margin: 5px;
}

.button5:hover {
  background-color: #0bb6d1;
  color: white;
}



/*==============================================
    CHECKBOXES    
    =============================================*/
/* Customized checkbox style */
.blueCheckbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #0bb6d1; /* Button color */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
}

.blueCheckbox:checked {
  background-color: #0bb6d1; /* Button color when checked */
}

.blueCheckbox:checked::before {
  content: '\2713'; /* Unicode character for checkmark */
  font-size: 14px;
  color: #fff; /* Checkmark color */
}


/* Hide the default checkbox */
.custom-checkbox {
  display: none;
}

/* Style for the custom checkbox */
.custom-checkbox-label {
  position: relative; /* Set position to relative */
  display: inline-block;
  /* border: #d8d8d8c2 1px solid; */
  border-radius: 4px;
  height: 20px;
  width: 20px;
  background-image: url('/assets/img/fixed/police.png'); /* Set the icon as background */
  background-size: contain; /* Ensure the icon fits inside the checkbox */
  background-repeat: no-repeat; /* Prevent the icon from repeating */
  cursor: pointer;
}

/* Style for the checked state of the custom checkbox */
.custom-checkbox:checked + .custom-checkbox-label {
  opacity: 1; /* Make the icon fully visible when checked */
}

/* Style for the unchecked state of the custom checkbox */
.custom-checkbox:not(:checked) + .custom-checkbox-label {
  opacity: 0.3; /* Make the icon faded when not checked */
}

/* Style for the diagonal line */
.custom-checkbox:not(:checked) + .custom-checkbox-label::before {
  content: ''; /* Add content */
  position: absolute; /* Set position to absolute */
  top: 50%; /* Position the line vertically in the middle of the checkbox */
  left: 50%; /* Position the line horizontally in the middle of the checkbox */
  width: 150%; /* Adjust width of the line */
  height: 1px; /* Adjust thickness of the line */
  background-color: #000000; /* Set color of the line */
  transform: translate(-50%, -50%) rotate(135deg); /* Rotate line diagonally */
}

/* Style for the checked state of the custom checkbox
#custom-checkbox:checked + .custom-checkbox-label {
  /* Add styles to indicate the checkbox is checked */
  /* For example, you can change the background color or add a border */
  /* Example: background-color: #0bb6d1; */
/*}*/

/*==============================================
    TOGGLE SWITCH    
    =============================================*/
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.toggle-switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

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

input:checked + .slider {
  background-color: #0bb6d1;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Adjust layout for toggle switch and remove button */
.toggle-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%; /* Added to ensure full height */
}

.toggle-container .toggle-switch {
  margin-right: 10px;
}
/*==============================================
   INPUT FIELDS
    =============================================*/
  input[type="text"] {
    border-radius: 50px;
    padding: 5px; /* Optional: Add padding to input field */
    width: 75%;
  }


/*TABLE - blue heading*/
.scheduling_table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.scheduling_table td, .scheduling_table th {
  border: 1px solid #ddd;
  padding: 8px;
}
.scheduling_table tr:nth-child(even){background-color: #f2f2f2;}


.scheduling_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #00345B;
  color: white;
}

/*TABLE 2 - blue heading*/
.scheduling_table2 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.scheduling_table2 td, .scheduling_table2 th {
  border: 1px solid #ddd;
  padding: 8px;
}
.scheduling_table2 tr:nth-child(even){background-color: #f2f2f2;}

.scheduling_table2 tr:hover {background-color: #ddd;}

.scheduling_table2 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #00345B;
  color: white;
}

/*TABLE - transparent*/
.invisible_table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.invisible_table td, .invisible_table th {
  padding: 1px;
/*   text-align: center; */
}

/*ARMED RESPONSE CHECKBOX*/
/* The container */




.container2 {
  display: inline-block;
/*   display: block; */
  position: relative;
  padding-left: 30px;
  padding-bottom: 25px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* Hide the browser's default checkbox */
.container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.indicator2 {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: white;
  border: 1px solid #0bb6d1; /*blue*/
  border-radius: 8px;
  font-size: 18px;
}


/* On mouse-over, add a grey background color */
.container2:hover input ~ .indicator2 {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
/*.container input:checked ~ .indicator {
  background-color: #0BB6D1;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
.indicator2:after {
  content: "👮";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .indicator2:after {
  display: block;
}

/* Style the checkmark/indicator */
.container2 .indicator2:after {
  left: 4px;
  top: 0px;
}

/*==============================================
    SCHEDULING TABLE STYLES    
    =============================================*/
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 10px;
  text-align: center;
  transition: background-color 0.3s, opacity 0.5s; /* Smooth transition for background-color and opacity */
}

.outerTable {
border-top: 0.5px solid #ccc; /* Add top border */
border-bottom: 0.5px solid #ccc; /* Add bottom border */
}



/* Faded effect for unchecked rows */
tr.faded {
  opacity: 0.3;
}

/* Style for nested table */
.nested-table {
  width: 100%;
}

.nested-left {
  text-align: left;
}

.nested-right {
  text-align: right;
}

.nested-second-row {
  text-align: left;
}

/*==============================================
    NEW SCHEDULE POPUP STYLES    
    =============================================*/
/* Add a new style for the pop-up overlay */
#popupOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center !important;
      align-items: center !important;
      padding-top: 60px; /* Adjust according to the height of your navbar/header */
  }

  /* Style for the pop-up content */
  #popupContent {
      /* background-color: #ffffff; */
      border-radius: 8px;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
      padding: 20px;
      max-width: 1000px;
      width: 100%;
      text-align: center;
      display: grid;
      justify-content: center;
      align-items: center;
      max-height: calc(100vh - 40px); /* Set maximum height to 100% of viewport height minus some padding */
      overflow-y: auto; /* Enable vertical scrolling if content exceeds the maximum height */


  }

  /* detection ON/OFF options box */
  .container {
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.493);
      padding: 20px;
      max-width: 900px;
      width: 100%;
      text-align: center;
      display: grid;
      gap: 20px;
      margin-top: 20px; /* Added margin-top */
      max-height: calc(100vh - 80px); /* Set maximum height to 100% of viewport height minus some padding */
      overflow-y: auto; /* Enable vertical scrolling if content exceeds the maximum height */
      margin-top: auto; /* Push the container to the top of its parent */


  }


  .ON-OFF-table-row {

    display : grid;
    grid-template-columns: auto 1fr auto;
    gap:0.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.7rem 0.5rem 0.7rem;

  }

  #onoff_cameras , #AR_cameras{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  

.offcanvas {
  background-color: #ffffffad !important;
  backdrop-filter: blur(8px); /* Optional: Add a blur effect to the background */

}

.offcanvas-end{
  width:100% !important;
}

@media (min-width: 1024px) {
  .offcanvas-end {
    width: 70% !important;
  }
}
select, input{
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
}

/* Remove border for input[type="range"] */
input[type="range"] {
  border: none;
}
  #dayPicker {
      display: flex;
      justify-content: space-between;
      /* margin-bottom: 16px; */
  }

  #dayPicker label {
      position: relative;
      cursor: pointer;
      padding-left: 5px;
      display: flex;
      align-items: center;
  }

  #dayPicker input {
      position: absolute;
      opacity: 0;
  }

  #dayPicker span {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 4px;
      margin-right: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #000; /* Black by default */
  }

  #dayPicker input:checked + span {
      color: #0bb6d1; /* Blue when selected */
  }

  #dayPicker input:checked + span::after {
      content: '';
      position: absolute;
      width: 22px; /* Adjust width to fit the letter */
      height: 22px;
      border-radius: 50%;
      border: 1px solid #0bb6d1;
      top: 50%;
      left: 46%;
      transform: translate(-50%, -50%); }

  
  /* Fade button when disabled */
  .disabled {
    opacity: 0.5; /* Faded appearance */
    background-color: #00c3ff69(154, 154, 155);
    pointer-events: none;
}

#notificationIcon1 > .bi {
  /* background-color: rgba(255, 70, 70, 0.266); */
  padding: 1rem;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(92, 92, 92);
}
#notificationIcon1 {
  padding-left: 0.4rem;
}
.premium-icon{
  margin: 0.2rem;

}

.pi-1r{
  width: 1.3rem;
  height: 1.3rem;
}





/*==============================================
   REGISTRATION PAGE POPUPS   
    =============================================*/

    .registrationNavbar {
      height: 75px;
      
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    #registrationNavbar-brand {
      display: inline-block;
      align-items: center;
    }
  
    .page-content {
      padding-top: 20px;
      text-align: center;
    }
    
    /* Add style for error message */
    .error-msg {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }
  
    .registration_button {
      width: 75%;
      background-color: #0bb6d1;
      color: #fff;
      border: none;
      padding: 5px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
  
    .registration_button:hover {
      background-color: #0bb7d185;
    }

#cellNumberPopup {
    display: none;
  }

#createAccountPopup {
  display: none;
}

#otpPopup {
  display: none;
}

#serialPopup {
  display: none;
}

#accountPopup {
  display: none;
}

.popupContainer {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: calc(100vw - 40px);
  max-width: 800px;
  text-align: center;
  justify-content: center;
  align-items: center;
  max-height: calc(100vh - 40px); /* Set maximum height to 100% of viewport height minus some padding */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds the maximum height */
  position: relative; /* Add relative positioning */
}

.popupOver {
  display: grid;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px); /* Optional: Add a blur effect to the background */
}

/* Style for the close tag */
.close {
  position: absolute;
  top: 20px; /* Adjust distance from top */
  right: 20px; /* Adjust distance from right */
  cursor: pointer;
  font-size: 20px;
  color: black;
  background: none;
  border: none;
}

.close:hover {
  color: #0bb6d1;
}

/* label {
  margin-top: 10px;
} */

  .cellNumberInput {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.cellNumberInput input {
    flex: 1;
    margin-right: 5px;
    width: calc(50% - 10px); /* Adjust width as needed */
}

.separator {
  margin: 0 5px;
}


.auto_snooze_info {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: rgba(93, 77, 179, 0.1);
  border-radius: 8px;
}
        
.auto-snooze-header {
  font-weight: bold;
  margin-bottom: 5px;
  color: #5D4DB3;
}

.auto-snooze-list {
  margin: 0;
  padding-left: 20px;
}

.auto-snooze-list li {
  margin-bottom: 3px;
  color: #333;
}




.camera-selection-section {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.5rem;
  gap: 0.3rem;
}

.action-section[style*="grid-column: 1 / span 2"] {
  grid-column: 1 / span 2;
}

/* Hide camera selection completely when non-specific is active */
.camera-selection-section.non-spesific {
  display: none !important;
}

/* Camera checkbox styling */
.camera-selection-section .form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #ccc;
  box-shadow: #00000016 0px 0px 5px;
  border-radius: 0.8rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0 !important;
}

.camera-selection-section .form-check > label {
  margin: 0 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.camera-selection-section .form-check > input {
  margin-left: 1px;
  margin-top: 1px !important;
  border-radius: 50%;
}






.dropdown-bottom > .snoozed_until {

margin: 0 !important;
margin-bottom: 0.4rem !important;


}

.muliti-cam-switch-container {
  padding: 0.5rem !important;
  margin: 0 0 0.3rem 0 !important;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.muliti-cam-switch-container > .form-check {
  border: none;
  box-shadow: none;
  justify-content: center;

  /* background-color: turquoise; */



}

#snap_container{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  
}


.muliti-cam-switch-container > .form-switch .form-check-input {
  width: 2.4em;
}

.muliti-cam-switch-container > .form-switch .form-check-input:checked {
  background-color: #0bb6d1 !important;
  border-color: #0bb6d1 !important;
  box-shadow: none !important;
}

.muliti-cam-switch-container > .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(11, 182, 209, 0.5) !important;
  border-color: #0bb6d1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgb(210%2C210%2C210)'/%3E%3C/svg%3E");
}

#multi-cam-switch{
  width: 2.5em !important;
}

.camera-selection-section .form-check-input:checked {
  background-color: #0bb6d1 !important;
  border-color: #0bb6d1 !important;
}

.camera-selection-section .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(11, 182, 209, 0.5) !important;
  border-color: #0bb6d1 !important;
}

.snooze-camera-item > .form-check-input{
  border-radius: 50% !important;
  margin-left: 0 !important;
}



/* Action section layout */
.action-section {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0.5rem;
}

/* Controls container - adaptive layout */

.snoozed-header {

  font-size: 0.9rem;

}

.controls-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  height: 100%;
  margin: 0 !important;
}


.options-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  height: 100%;
}


/* .options-container > button { */
.snooze-action-btn {
  width: 100%;
  padding: 0.4rem 0;
  /* margin-bottom: 1.4rem; */
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
  font-weight: bold;
  background-color: #f0f0f088;
  border: 1px solid #ccc;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
  color: #1b1b1b;
}


/*navbar*/
/*ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}*/


body_text_f,
.body_text_f {
  font-family: inherit;
  font-size: 15px;
  color: black;
/*   color: inherit; */
/*   font-weight: bold; */

}


.btn-primary{
  background-color: var(--primary-color, #0bb6d1) !important;
  border-color: #1aa1b6 !important;
  color: #fff !important;
  font-weight: bold;
}

/*==============================================
    WEBRTC MODAL STYLES
    =============================================*/
/* Dark background for WebRTC modal */
#WEBRTC_MODAL .modal-content {
    background-color: #1a1a1a;
    border: none;
}

#WEBRTC_MODAL .modal-body {
    background-color: #000000;
    padding: 0;
}

/* WebRTC video wrapper styles */
.webrtc-video-wrapper {
    background-color: #000000;
    width: 100%;
    height: 100%;
}

/* WebRTC status and debug info styles for dark background */
.webrtc-status {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.webrtc-debug-info {
    color: #cccccc;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    padding: 5px;
    border-radius: 3px;
}

/* WebRTC spinner style for dark background */
.webrtc-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.webrtc-spinner .spin {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #0bb6d1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* WebRTC floating controls for dark background */
.webrtc-floating-controls {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.webrtc-floating-controls .multicam-page-control {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.webrtc-floating-controls .multicam-page-control:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* WebRTC close button style for dark background */
.webrtc-close-btn {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.webrtc-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* WebRTC logo container */
.webrtc-logo {
    filter: brightness(0.9);
}


.minw-12r {
  min-width: 12rem;
}

.minw-1r{
  min-width: 1rem;
}

.min-4r {
  min-width: 4rem;
}

.min-8r{
  min-width: 8rem;
}