body {
  background-color:black;
}

#clock-container {
  position: absolute; /* or 'absolute' if you need it to be taken out of flow */
  overflow: hidden; /* This will hide all scrollbars */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* Fill the width */
  max-height: 100vh; /* Do not exceed the height of the viewport */
  aspect-ratio: 3.5 / 1; /* Maintain the aspect ratio */
  background-color: black; /* Background color of the clock */
}

#banded-area {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%; /* Height of the banded area */
}

#effects-canvas {
  position: absolute;
  z-index: 10; /* Higher value to be on top */
  top: 0;
  left: 0;
}

#tracker-canvas {
  position: absolute;
  z-index: 9; /* Higher value to be on top */
  top: 0;
  left: 0;
}

#base-canvas, #glow-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#label-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; /* Height of the label area */
  background-color: black;
}

#lowerLeft-container {
  position: absolute;
  top: 50%;
  left: 1.5%;
  font: 2.5vw Arial, sans-serif;
  transform: translateY(-50%);
  width: auto; /* or specify a width */
  height: auto; /* or specify a height */
}

#lowerLeft-data {
  position: absolute;
  left: 0%;
  transform: translateY(-50%);
  color: #1e4f55;
  font: 1.6vw Arial, sans-serif;
  white-space: pre;
}

.label {
  font-family: Arial, sans-serif;
  font-size: 14px; /* Adjust as needed */
  font-weight: bold;
  color: #4dada3; 
  margin-bottom: 5px; /* Space between label and input field */
}

.hour-label {
  position: absolute;
  top: 10%;
  color: #1e4f55;
  font: 1.5vw Arial, sans-serif;
  text-align: center;
}

.current-hour {
  /* Style for the current hour */
  text-shadow: 0 0 8px rgba(255, 165, 0, 1); /* Adjust the color and opacity */
}

.past-hour {
  /* Style for past hours */
  text-shadow: 0 0 8px rgba(255, 165, 0, 0.5); /* More transparent variant */
}

#time-tooltip {
  position: absolute;
  font: 1.5vw Arial, sans-serif;
  display: none;
  padding: 1px;
  padding-left: 3px;
  padding-right: 3px;
  background: black;
  border: 1px solid #1e4f55;
  z-index: 1000;
  pointer-events: none;
}

.settingsColorOverlay {
  position: absolute;
  overflow: hidden; 
  background-Color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  width: 100%; /* Fill the width */
  max-height: 100vh; /* Do not exceed the height of the viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 3.5 / 1; /* Maintain the aspect ratio */
  z-index: 90;
  display: none; /* Hidden by default */
}

.settingsContainer {
  display: none; /* Hidden by default - toggles to 'grid' */
  position: absolute;
  overflow: hidden; /* This will hide all scrollbars */
  border: 2px solid #3a7c72;
  background-color: black;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  grid-template-columns: 100%;
  grid-template-rows: 22% 64% 14%; 
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: stretch;
  grid-template-areas:
    "titleBarArea"
    "bodyArea"
    "footerArea";
}

header {
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Arial, sans-serif';
  color: #339999;
  letter-spacing: 0.35em;
  font-size: 3.5vw;
  line-height: 1;
}

.settingsTitleBar {
  position: relative;
  grid-area: titleBarArea;
  display: flex; /* Use Flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

#close-button {
  position: absolute;
  top: 3px;
  right: 3px;
  height: 2.75em;
  width: 2.75em;
  transform-origin: top right;
  margin: 0px;
}

.divider {
  position: absolute; /* Position it relative to its parent */
  bottom: 0; /* Align it to the bottom */
  left: 50%; /* Start at 50% of the parent's width */
  transform: translateX(-50%); /* Center the divider */
  width: 100%; /* Make the width 80% of the parent */
  height: 2px; /* Adjust the thickness of the line as needed */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.settingsBody {  display: grid;
  grid-area: bodyArea;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 100%;
  gap: 0px 0%;
  grid-auto-flow: row;
  justify-content: space-around;
  align-items: center;
  grid-template-areas:
    "windowSettingsArea timeSettingsArea customizationSettingsArea";
}

.windowSettings {  
  grid-area: windowSettingsArea;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 30% 30%;
  gap: 10% 0px;
  margin-left: 12%;
  justify-content: center;
  align-content: center;
  justify-self: center;
  align-self: center;
  width: 90%;
  height: 90%;
  grid-template-areas:
  "popoutButtonArea"
  "installButtonArea";
}

#popout-button {
  height: 100%;
  width: 75%;
  justify-self: center;
  color: #309393;
}

#install-button {
  height: 100%;
  width: 75%;
  justify-self: center;
  color: #309393;
}

.timeSettings {
  grid-area: timeSettingsArea;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  justify-content: center;
  align-content: center;
  justify-self: center;
  align-self: center;
  width: 90%;
  height: 100%;
  grid-template-areas:
  "wakeTimeLabelArea sleepTimeLabelArea"
  "wakeTimeInputArea sleepTimeInputArea";
}

label[for="wake-time"] {
  font-family: 'Arial, sans-serif';
  font-size: 3.5vw;
  color: #339999;
  justify-self: center;
  margin-bottom: 4%;
}

input[type="time"] {
  -webkit-appearance: none; /* Removes default styling for Webkit browsers */
  -moz-appearance: none; /* Removes default styling for Mozilla browsers */
  appearance: none; /* Standard CSS property to remove default styling */
  text-align: center; /* Centers the text */
  color: #339999; /* Text color */
  background-color: transparent; /* Makes the background transparent */
  border: 1px solid #339999; /* Border properties */
  padding: 5px; /* Padding inside the input */
  font-family: Arial, sans-serif; /* Font family */
  font-size: 3vw; /* Sets the size of the font */
}

/* Hide the spin button for Webkit browsers */
input[type="time"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

/* Hide the clear and dropdown button for Webkit browsers */
input[type="time"]::-webkit-clear-button,
input[type="time"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  display: none;
}

/* For Mozilla Firefox */
input[type="time"]::-moz-focus-inner {
  border: 0;
}

label[for="sleep-time"] {
  font-family: 'Arial, sans-serif';
  font-size: 3.5vw;
  color: #339999;
  justify-self: center;
  margin-bottom: 4%;
}

.customizationSettings {
  grid-area: customizationSettingsArea;
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 25% 25% 25%;
  gap: 2% 0px;
  margin-right: 12%;
  justify-content: center;
  align-content: center;
  justify-self: center;
  align-self: center;
  width: 90%;
  height: 90%;
  grid-template-areas:
  "glowColorSwatchArea glowColorLabelArea"
  "showTimeToggleArea showTimeLabelArea"
  "noSleepToggleArea noSleepLabelArea";
}

#glow-color {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent; /* To remove any unwanted background */
  width: 2vw; /* Or any size that matches your toggle */
  height: 2vw; /* To create a square */
  transform: translateX(-2px); /* Adjust as needed */
  border: none; /* Removing the default border */
  cursor: pointer; /* To indicate it's clickable */
  display: block;
  margin: auto; /* This will center the swatch if its container is a flexbox */
}

/* For WebKit browsers like Chrome and Safari */
#glow-color::-webkit-color-swatch-wrapper {
  padding: 0;
  width: 2vw; /* Matching the width and height */
  height: 2vw;
}

#glow-color::-webkit-color-swatch {
  border: 1px solid #737373; /* You can adjust the border as needed */
  border-radius: 2px; /* Rounded corners for the swatch */
  width: 2vw; /* Making sure the swatch is square */
  height: 2vw;
}

.toggle-wrapper {
  width: 2vw; /* or use em/rem */
  height: 2vw; /* or use em/rem */
  /* Additional styling */
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color:  transparent;
  width: 2vw; /* Matching the width and height */
  height: 2vw;
  border: 1px solid #339999; /* Border properties */
  cursor: pointer;
  position: relative;
  display: block;
  margin: auto; 
}

input[type="checkbox"]:checked {
  background-color: #0e3034;;
}

input[type="checkbox"]:checked::before {
  content: '\F0132'; /* Make sure this is the correct unicode for mdi-check-bold */
  font-family: "Material Design Icons"; /* This should match the font-family in the MDI CSS file */
  color: #59c7c7;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  font-size: 1.5vw;
}

/* Style for checkbox hover in unchecked state */
input[type="checkbox"]:hover:not(:checked) {
  border-color: #a7d9d9; /* Change border color on hover when unchecked */
  background-color: #11353a; /* Light background color for unchecked hover state */
}

/* Style for checkbox hover in checked state */
input[type="checkbox"]:hover:checked {
  border-color: #a7d9d9; /* Change border color on hover when checked */
  background-color: #1f6067; /* Lighter green background for checked hover state */
}

/* Style for the checkmark on hover in checked state */
input[type="checkbox"]:hover:checked::after {
  content: '\F0132'; /* Make sure this is the correct unicode for mdi-check-bold */
  font-family: "Material Design Icons";
  color: #a7d9d9; /* Lighter color for the checkmark on hover */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  font-size: 1.8vw;
}

label {
  font-family: 'Arial';
  color: #339999;
  font-size: 1.75vw;
  line-height: 1;
  align-self: center;
}

.settingsFooter {
  grid-area: footerArea;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.copyright-text {
  font-family: 'Arial', sans-serif;
  color: #339999;
  font-size: 1.5vw;
  letter-spacing: 0.2em;
  margin: 0;
  padding: 10px 0;
  line-height: normal;
}

#apply-button {
  grid-area: footerArea;
  position: absolute;
  bottom: 3px;
  right: 3px;
  height: 2.75em;
  width: 2.75em;
  transform-origin: bottom right;
  margin: 0px;
}

input {
  display: flex; /* To allow justify-content and align-items to work */
  justify-content: center;
  align-items: center;
  margin: 5px;
  color: #3c929b;
  background-color: transparent;
  border: 1px solid #21555e; /* Dim blue border */
}

input:hover {
  color: #acd7d3;
  border: 1px solid #4dada3;
}

/*///////////////////////////////////////////////////////////////////////*/

button {
  display: flex; /* To allow justify-content and align-items to work */
  justify-content: center;
  align-items: center;
  font-size: 1.75vw;
  cursor: pointer;
  color: #1b5555;
  background-color: #011214;
  border: 1px solid #165158; /* Dim blue border */
}

button:hover {
  color: #7bf6f6;
  border: 1px solid #42a49a;
}

button i {
  transform-origin: center;
  pointer-events: none; /* Prevents the icon from blocking button clicks */
}

button .mdi {
  font-size: 250%;
}