html, body {
      height: 100%;
      margin: 0;
    }

html {
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
min-height: 100%;
}

body {
display: flex;
flex-direction: column; /* Use flexbox to layout the body */
min-height: 100%;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/
background-position: center;
margin-top:0px;
background-color: #000;
background-repeat: no-repeat;
background-attachment: fixed;
}

[data-bs-theme="dark"] .uv-text {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

[data-bs-theme="light"] .uv-text {
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .navbar {
    background: #0056b3;
}

[data-bs-theme="light"] .navbar {
    background: #0C6EFC;
}

[data-bs-theme="light"] .navbar-brand {
    color: #FFF;
}

[data-bs-theme="dark"] .navbar-brand {
    color: #FFF;
}

.navbar-brand {
    white-space: nowrap; /* Prevents wrapping of "MySite" */
    margin-bottom: 0; /* Ensures alignment */
    font-size: 1.25rem;
}


main {
	flex: 1;
	width: 100%;
	}
	
  .disclaimer {
    font-size: 0.8rem; /* Adjust as necessary */
  }

  /* Add hover effect and pointer cursor */


  .accordion-button::after {
    content: "\25BC"; /* Downward caret symbol */
    position: absolute;
    right: 1rem; /* Align it to the right */
    font-size: 1.2rem; /* Adjust size */
    transition: transform 0.3s ease; /* Smooth rotation */
  }

  .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg); /* Rotate caret when expanded */
  }

  .accordion-button:hover {
    background-color: #0056b3; /* Darken background on hover */
    color: #ffffff; /* Ensure text remains white */
  }

  .accordion-button h5 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  /* Optional: Enhance the collapse/expand effect */
  .accordion-item {
    border-radius: 0.25rem;
	background: #fff; /* Set the background color to white to cover any behind content */
	border: none; /* Optional: Remove any borders for a cleaner look */
  }


  
#collapseSensors {
  position: relative; /* Ensure proper stacking context */
  z-index: 2; /* Bring the accordion content to the front */
}

#collapseSensors.collapse:not(.show) {
  display: none !important; /* Ensure it's completely hidden when collapsed */
}

.placeholder {
    height: 1rem; /* Match the height of a typical span */
    visibility: hidden; /* Invisible but retains space */
    display: block; /* Ensure it behaves like a span */
}

/* General forecast-icon styling */
.forecast-icon {
    max-width: 80px; /* Ensure icons don't exceed this size */
    max-height: 80px;
    display: inline-block; /* Allows alignment with text */
    vertical-align: middle; /* Aligns icons with text */
    margin-right: 1rem; /* Add spacing between the icon and the text */
    line-height: 1; /* Consistent alignment */
}

/* Specific rules for SVGs */
.forecast-icon svg {
    width: 100%; /* Scale SVG to fit the container */
    height: 100%; /* Maintain aspect ratio */
    display: block; /* Prevent inline styling conflicts */
    vertical-align: middle; /* Align SVGs with surrounding text */
    fill: currentColor; /* Allow dynamic color changes */
}

/* Specific rules for Font Awesome icons */
.forecast-icon.fas {
    font-size: 80px; /* Match the size of the SVGs */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Retain shadow effect */
    vertical-align: middle; /* Align with text */
}



.moon-icon {
    width: 80px; /* Match FA icon size */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensures the image scales nicely */
}

.forecast-icon img {
    width: 80px; /* Ensure moon images match icon size */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Ensures proper layout inside container */
}

.forecast-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Center icons in the same row with text */
.row .forecast-icon {
    display: flex;
    align-items: center;
}

/* Ensure text and icon spacing */
.row .forecast-icon + .forecast-text, 
.row .forecast-text + .forecast-icon {
    margin-left: 1rem; /* Optional for RTL compatibility */
}

.scrollable-row {
    position: relative; /* Ensure the row is the parent for positioning */
}

.scroll-hint {
    position: absolute;
    bottom: 0;
    left: 10px;
    z-index: 10;
    background-color: rgba(var(--bs-body-bg-rgb), 0.8);
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    animation: fade-in-out 3s infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: opacity 1s ease, visibility 1s ease; /* Smooth fade-out */
}

.scroll-hint.hidden {
    opacity: 0; /* Make the hint invisible */
    visibility: hidden; /* Ensure it is fully removed from view */
    pointer-events: none; /* Prevent interaction */
}



@keyframes fade-in-out {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}









.gradient-icon {
    display: inline-flex; /* Use flexbox for alignment */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background: linear-gradient(45deg, #f6e58d, #f9ca24, #f0932b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 4rem; /* Matches fa-4x size */
    width: 64px; /* Explicitly set the width */
    height: 64px; /* Explicitly set the height */
}
.gradient-icon i {
    font-size: inherit; /* Inherit size from container */
    line-height: 1; /* Aligns content without extra spacing */
}

.row {
    margin-right:0!important;
    margin-left:0!important;
}

.navbar {
    width: 100%; /* Ensure full width */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.navbar-toggler {
    display: flex;
    align-items: center;
}




.nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff !important;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.dropdown-menu {
    background-color: #0056b3;
    border: none;
}

.dropdown-item {
    color: #ffffff;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.icon-outline {
    text-shadow: 
        -1px -1px 0 #000, /* Top-left */
         1px -1px 0 #000, /* Top-right */
        -1px  1px 0 #000, /* Bottom-left */
         1px  1px 0 #000; /* Bottom-right */
}

.icon-wrapper i {
    color: #f6f7f5; /* Original icon color */
    text-shadow: 
        -1px -1px 0 #000, /* Top-left */
         1px -1px 0 #000, /* Top-right */
        -1px  1px 0 #000, /* Bottom-left */
         1px  1px 0 #000; /* Bottom-right */
    display: inline-block;
}

.vertical-text {
	transform: rotate(270deg);
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
	margin-top:60px;
	transform-origin: left;
	float: left;
	background-color:red;
	height:100%;

}

.tooltip_templates { display: none; }

.profile-user-box {
    position: relative;
}

.card-box {
    padding: 20px;
    background-color: #000;
}

.back-to-top {
  position: relative;
  z-index: 9999; }
  .back-to-top .btn-dark {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #2e2e2e;
    border-color: #2e2e2e;
    display: none;
    z-index: 99999;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear; }
    .back-to-top .btn-dark:hover {
      cursor: pointer;
      background: #FA6742;
      border-color: #FA6742; }

.user-settings {
  position: relative;
  z-index: 2; }
  .user-settings .btn-dark {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #2e2e2e;
    border-color: #2e2e2e;
    display: none;
    z-index: 999;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear; }
    .user-settings .btn-dark:hover {
      cursor: pointer;
      background: #FA6742;
      border-color: #FA6742; }
	  
.user-report {
  position: relative;
  z-index: 2; }
  .user-report .btn-dark {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    position: fixed;
    bottom: 20px;
    left: 60px;
    background: #2e2e2e;
    border-color: #2e2e2e;
    display: none;
    z-index: 999;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear; }
    .user-report .btn-dark:hover {
      cursor: pointer;
      background: #FA6742;
      border-color: #FA6742; }

.grecaptcha-badge{display:none;}




.blocks {
display: block;
text-align: center;
margin-top: 10px;
}

#ccblocks {
display:none;
}

.font-13 {
    font-size: 13px!important;
}


#fixedspace {
width:100%;
}



a:hover { 
	text-decoration: none;
}

.cent {
	text-align:center;
}

.curValueCirc {
    width:150px;
    height:150px;
    border-radius:50%;
    display:inline-block;
    line-height:155px;
    text-align:center;
    color:black;
	font-size:3.0rem;
}

#curValueCircLight {
    height:60px;
    border-radius:50%;
    display:inline-block;
    line-height:65px;
    text-align:center;
	font-size:2.0rem;

}

/* UV CSS */

.uvtext {
    color: white;
    text-shadow: 0 1px black;
    background: #333;
    background: rgba(0,0,0,0.50);
    padding: 4px 8px;
}

.uv1 {
background-color: #299501;
text-shadow: 0 2px black;
color: white!important;
}

.uv2 {
background-color: #F7E401;
color: black!important;
}

.uv3 {
background-color: #F95901;
text-shadow: 0 1px black;
color: white!important;
}

.uv4 {
background-color: #D90011;
text-shadow: 0 2px black;
color: white!important;
}

.uv5 {
background-color: #6C49CB;
text-shadow: 0 2px black;
color: white!important;
}

/* END UV CSS */

/* AQI CSS */

.aqitext {
    color: white;
    text-shadow: 0 1px black;
    background: #333;
    background: rgba(0,0,0,0.50);
    padding: 4px 8px;
}

.aqi0 {
background-color: #FFF;
text-shadow: 0 2px white;
color: black!important;
}

.aqi1 {
background-color: #01E400;
text-shadow: 0 2px black;
color: white!important;
}

.aqi2 {
background-color: #FFFA00;
color: black!important;
}

.aqi3 {
background-color: #FF7E00;
text-shadow: 0 2px black;
color: white!important;
}

.aqi4 {
background-color: #FE0000;
text-shadow: 0 2px black;
color: white!important;
}

.aqi5 {
background-color: #8E3F98;
text-shadow: 0 2px black;
color: white!important;
}

.aqi6 {
background-color: #7E0123;
text-shadow: 0 2px black;
color: white!important;
}

.aqi7 {
background-color: #000;
text-shadow: 0 2px black;
color: white!important;
}

table th {
   text-align: center; 
}

/* END AQI CSS */

.modal-open[style] {
padding-right: 0px !important;
}

.gauge2s {
	color: white;
	text-shadow: 0 1px black;
    font-size: 16px;
}

.cardgauges{
 opacity: .8;
  }
  
.cardcc {
height: 25rem;
width:20.5rem;
}


p.left {
text-align:left;
margin-top:3px;
margin-bottom:13px;
}

.left {
text-align:left;
}

.colma {
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) and (max-width: 820px) {
    .scrollable-row .col-md-2 {
        flex: 0 0 17%; /* Adjust as needed for desired width */
        max-width: 22%; /* Matches flex width */
    }
}