/* Theme Variables */
:root {
    --primary-color: #550000;
    --hover-color: rgb(216, 216, 216);
    --glow-color: #bd2f2f;
    --border-color: #550000;
    --logo-width: 350px;
    --logo-clip: none;
    --logo-mask: none;
    --pulpit-black: #000000;
    --pulpit-maroon: #550000;
    --pulpit-gold: #D3AF37;
    --button-color-pulpit: #550000;
    --button-text-color-pulpit: #D3AF37;
    --button-border-color-pulpit: #D3AF37;
    --button-hover-color-pulpit: #D3AF37;
    --button-hover-border-color-pulpit: #550000;
    --button-hover-text-color-pulpit: #550000;
    --button-glow-color-pulpit: #D3AF37;
}

:root[data-theme="kindred"] {
    --primary-color: #990000;
    --hover-color: #f5f5f5;
    --glow-color: #ff3333;
    --border-color: #800000;
}

@font-face {
  font-family: 'Trajan Pro';
  src: url('./TrajanPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;  /* This helps with font loading behavior */
}

/* Reset default body margin and padding */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0b0b0b;
  color: #800391;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  /* Align content at the top */
  align-items: center;
  text-align: center;
  height: 100vh;
  /* Make the body fill the full height of the viewport */
}

/* Reset margin and padding on html */
html {
  margin: 0;
  padding: 0;
}

/* Link Styles */
a {
  color: #e61919;
  /* Link color */
  text-decoration: none;
  /* Optional: remove underline from links */
  font-family: Arial, Helvetica, sans-serif;
}

a:visited {
  color: #e61919;
  /* Visited link color (same as unvisited) */
}

/* Image Dialog Styles */
#imageDialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 0;
  /* Remove padding around the dialog */
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 45px;
  /* Remove margins around the dialog */
}


.imageDialog button {
  font-size: 1.5em;
  border: none;
  padding: 10px;
  cursor: pointer;
  pointer-events: auto;
}

#imageDialog img {
  max-width: 98.6%;
  max-height: 98.6%;
  object-fit: contain;
  /* Preserve aspect ratio */
}

/* Loading Dialog Styles */
#loadingDialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 0;
  /* Remove padding around the dialog */
  margin: 0;
  /* Remove margins around the dialog */
}

button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.dialog-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  pointer-events: none;
}

.dialog-buttons button {
  background-color: #2a0030;
  color: white;
  font-size: 1.5em;
  border: none;
  padding: 10px;
  cursor: pointer;
  pointer-events: auto;
}

.dialog-buttons button:hover {
  background-color: #800391;
}

.dialog-buttons button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 129, 206, 0.5);
}

.dialog-buttons button:disabled {
  background-color: #666;
  cursor: not-allowed;
}

.dashboard-title {
  color: #000000;
  font-family: 'Trajan Pro', serif !important;
  font-size: 38px;
  font-weight: bold;
  text-shadow: 3px 3px 3px gray;
  padding: 15px 40px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #ffffff;
  border: 5px solid var(--border-color) ;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-align: center;
  width: 65%;
  max-width: 900px;
  display: inline-block;
  transform: translateY(-20vh); /* Initial off-screen state */
  opacity: 0; /* Start hidden */
  transition: transform .3s ease-out, opacity .3s ease-out; /* Smooth transition */
}

#versionLabel {
  display: grid;
  left: 670px;
  position: fixed;  /*  Absolute positioning */
  justify-content: center;
  text-align: right;
  transform: translateX(-50%);  /* Ensure proper centering */
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(73, 73, 73);
  padding-left: 5px;
  top: 55px;
   /* Ensure it sits above the dashboard title */
  font-weight: bold;
  text-shadow: 3px 3px 3px gray;
  
}

.dashboard-title.visible {
  transform: translateY(0);
  /* Fly in to its normal position */
  opacity: .65;
  /* Fade in to full visibility */
}

/* Optional: You can add hover effects if needed */
.dashboard-title:hover {
  transform: scale(1.03);
}

#collapsibleDiv {
  overflow-y: auto;
  border: var(--border-color) 1px solid;
  border-radius: 10px;
  width: 255px;
  height: 27px;
  /* Initially collapsed */
  text-align: left;
  padding-left: 10px;
  position: relative;
  margin-left: 85px;
  margin-top: 25px;
  background-color: rgba(0, 0, 0, 0.2);;

  box-shadow:
    -1px -1px 4px 0px #000000, /* Top left black shadow with blur */
    1px -1px 4px 0px #000000, /* Top right black shadow with blur */
    -1px 1px 4px 0px #929292,  /* Bottom left gray shadow with blur */
    1px 1px 4px 0px #929292;   /* Bottom right gray shadow with blur */
}

#buttonFieldset {
  border-radius: 10px;
  padding: 10px;
  border: var(--border-color) 1px solid;
  box-shadow:
    -1px -1px 4px 0px #000000, /* Top left black shadow with blur */
    1px -1px 4px 0px #000000, /* Top right black shadow with blur */
    -1px 1px 4px 0px #929292,  /* Bottom left gray shadow with blur */
    1px 1px 4px 0px #929292;   /* Bottom right gray shadow with blur */
}

.admin-tab {
    position: absolute;
    top: 0;
    left: 25px;
    background: #222;
    color: #e6e4e4;
    padding: 6px 25px;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 1000;
    border: 1px solid #444;
    border-top: none;
    transition: all 0.2s ease;
    -webkit-text-decoration: none;
    text-decoration: none;
}

.admin-tab:hover {
  background: #333;
  padding-top: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.6);
}

/* Remove the pseudo-elements as they're not needed */
.admin-tab::before,
.admin-tab::after {
  display: none;
}

.toggle-container {
  position: absolute;
  display: flex;
  align-items: center;
  margin-top: 10px;
  height: 32px;
}

.bannedusers-popout-container {
  position: absolute;
  display: flex;
  align-items: center;
  margin-top: 55px;
  margin-left: 60px;
  height: 32px;
}

.toggle-link {
  margin-left: 50px;
  color: var(--border-color);
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;
  text-shadow:
    -1px -1px 2px #000, /* Top left shadow with blur */
    1px -1px 2px #696969, /* Top right shadow with blur */
    -1px  1px 2px #696969, /* Bottom left shadow with blur */
    1px  1px 2px #b2b1b3; /* Bottom right shadow with blur */
}

ul {
  margin: 0;
  padding: 0;
  color: #afb4af;
  list-style-type: none;
  display: none;
  font-family: 'Courier New', Courier, monospace;
}

li {
  margin-bottom: 6px;
}

/* Red button */
.button-red {
  background-color: #990000;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 18px; /* Slightly smaller padding */
  font-size: 12px; /* Smaller font size */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 0 5px #a8a8a8; /* Subtle glow */
}

/* Hover effect */
.button-red:hover {
  background-color: var(--hover-color);
  color: #f05f5f; 
  box-shadow: 0 0 15px #f05f5f, 0 0 30px #f05f5f; /* Glow effect */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Focus effect */
.button-red:focus {
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.274); */
}

.button-lightred {
  background-color: #b64a4a;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 18px; /* Slightly smaller padding */
  font-size: 12px; /* Smaller font size */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 0 5px #a8a8a8; /* Subtle glow */
}

/* Hover effect */
.button-lightred:hover {
  background-color: var(--hover-color);
  color: #f05f5f; 
  box-shadow: 0 0 15px #f05f5f, 0 0 30px #f05f5f; /* Glow effect */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Focus effect */
.button-lightred:focus {
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.274); */
}

:root[data-theme="kindred"] .button-lightred {
  background-color: #615fd3;
}

:root[data-theme="kindred"] .button-lightred:hover {
  background-color: var(--hover-color);
  box-shadow: 0 0 15px #615fd3, 0 0 30px #615fd3; 
  color: #615fd3;
}

.material-icons {
  cursor: pointer; 
  user-select: none; 
  color: #afb4af;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}


/* Green button */
.button-green {
  background-color: #218838;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 18px; /* Slightly smaller padding */
  font-size: 12px; /* Smaller font size */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 0 5px #a8a8a8; /* Subtle glow */
}

/* Hover effect */
.button-green:hover {
  background-color: var(--hover-color);
  color: #28a745; 
  box-shadow: 0 0 15px #28a745, 0 0 30px #28a745; /* Glow effect */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Focus effect */
.button-green:focus {
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.274); */
}


/* Orange button */
.button-orange {
  background-color: #a77028;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 18px; /* Slightly smaller padding */
  font-size: 12px; /* Smaller font size */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 0 5px #a8a8a8; /* Subtle glow */
}

/* Hover effect */
.button-orange:hover {
  background-color: var(--hover-color);;
  color: #886c21; 
  box-shadow: 0 0 15px #886c21, 0 0 30px #886c21; /* Glow effect */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Focus effect */
.button-orange:focus {
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(255, 174, 0, 0.5);*/
} 

/* Purple button */
.button-purple {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 18px; /* Slightly smaller padding */
  font-size: 12px; /* Smaller font size */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 0 5px #a8a8a8; /* Subtle glow */
}

/* Hover effect */
.button-purple:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
  box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color);
  transform: scale(1.05);
}

/* Focus effect */
.button-purple:focus {
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(75, 44, 94, 0.5);  */
}

.button-purple:disabled {
  background-color: #666;
  cursor: not-allowed;
  box-shadow: none; /* Glow effect */
  transform: none; /* Slightly larger on hover */
}

.button-purple-image-dialog {
  background-color: #4b2c5e; /* Darker purple closer to the logo */
  color: #bfbfbf;
  border: none;
  border-radius: 5px;
  padding: 8px 18px; /* Slightly smaller padding */
  font-size: 12px; /* Smaller font size */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
}

/* Hover effect */
.button-purple-image-dialog:hover {
  background-color: #5f3a75;
  color: #fff; /* Dark purple text on hover */

}

.button-purple-image-dialog:disabled {
  color: #3a3939;
  background-color: #666;
  cursor: not-allowed;
  box-shadow: none; /* Glow effect */
  transform: none; /* Slightly larger on hover */
}

.headings {
  font-family: 'Trajan Pro', serif !important;
  font-size: 20px;
  color: #fff; 
  background-color: rgba(0, 0, 0, 0.25);
  margin-top: 20px;
  border-bottom: var(--border-color) 2px solid; /* Purple border under heading */
  padding-bottom: 10px;
  opacity: .75;
  text-shadow: 
    -1px -1px 0 #000000, /* Top left */
    1px -1px 0 #000000, /* Top right */
    -1px  1px 0 gray, /* Bottom */
    1px  1px 0 gray; /* Bottom */
  box-shadow:
    -1px -1px 4px 0px #000000, /* Top left black shadow with blur */
    1px -1px 4px 0px #000000, /* Top right black shadow with blur */
    -1px 1px 4px 0px #929292,  /* Bottom left gray shadow with blur */
    1px 1px 4px 0px #929292;   /* Bottom right gray shadow with blur */
}

.title-headings {
  font-family: 'Trajan Pro', serif !important;
  font-size: 20px;
  color: #fff; 
  background-color: rgba(0, 0, 0, 0.25);
  margin-top: 20px;
  padding-bottom: 10px;
  opacity: .75;
  text-shadow: 
    -1px -1px 0 #000000, /* Top left */
    1px -1px 0 #000000, /* Top right */
    -1px  1px 0 gray, /* Bottom */
    1px  1px 0 gray; /* Bottom */

}

#privacyMode {
  color: #929292;
}

.linksheadings {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  color: #fff; /* Purple text */
  opacity: .75;
  text-shadow: 
    -1px -1px 0 #000000, /* Top left white outline */
    1px -1px 0 #000000, /* Top right white outline */
    -1px  1px 0 #800391, /* Bottom left white outline */
    1px  1px 0 #800391; /* Bottom right white outline */

}


/* Progress Bar Styles */
#progressBarContainer {
  width: 80%;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

#progressBar {
  height: 100%;
  width: 0;
  background-color: var(--border-color);
  border-radius: 5px;
  transition: width 0.3s ease-in-out;
  border: var(--button-border-color-pulpit) 1px solid;
  /* Smooth animation */
}

:root[data-theme="kindred"] #progressBar {
  background-color: #800000;
}



/* Links Dialog Styles */
#linksDialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 0;
  /* Remove padding around the dialog */
  margin: 0;
  /* Remove margins around the dialog */
  font-family: Arial, Helvetica, sans-serif;
}

#linksDialog table {
  width: 99%;
  border-collapse: collapse;
}

#linksDialog td {
  padding: 8px;
  vertical-align: middle;
}

#linksDialog td:first-child {
  width: 200px;
  color: #bfbfbf;
  text-align: right;
  text-shadow: 
    -1px -1px 0 #000000, /* Top left white outline */
    1px -1px 0 #000000, /* Top right white outline */
    -1px  1px 0 #800391, /* Bottom left white outline */
    1px  1px 0 #800391; /* Bottom right white outline */
}

#linksDialog td:nth-child(2) {
  width: 50px;
  text-align: center;
}

input {
  flex: 1;
  /* Allows textarea to grow within the flex container */
  display: flex;
  resize: none;
  /* Prevents manual resizing */
  width: 100%;
  /* Ensures it fills the width */
  font-size: 14px;
  font-family: monospace;
  border: none;
  /* Removes border */
  outline: none;
  /* Removes focus outline */
}

.textareadiv {
  display: flex;
  align-items: center;
  /* Aligns child elements vertically */
  width: 96%;
  font-family: monospace;
  font-size: 14px;
  padding: 10px;
  background-color: #262626;
  color: #e6e6e6;
  border: 1px solid #a378be;
  border-radius: 5px;
  justify-content: left;
  text-align: left;
  box-shadow:
        -1px -1px 4px 0px #000000, /* Top left black shadow with blur */
        1px -1px 4px 0px #000000, /* Top right black shadow with blur */
        -1px 1px 4px 0px #929292,  /* Bottom left gray shadow with blur */
        1px 1px 4px 0px #929292;   /* Bottom right gray shadow with blur */
}

:root[data-theme="kindred"] .textareadiv {
  border: #800000 1px solid;
}

#closeLinksInline {
  border: #4b2c5e 1px solid;
  padding: 3px;
  cursor: pointer;
  margin-left: auto;
}

#bannedUsersPopout {
  border: var(--border-color) 2px;
  border-style: dashed;
  padding: 1px;
  cursor: pointer;
  border-radius: 7px;
}

:root[data-theme="kindred"] #bannedUsersPopout {
  border: #800000 2px;
  border-style: dashed;
}

.timerDisplay, .timerDisplay2 {
  cursor: default;
  font-size: 24px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  margin-right: 10px;
  background-color: #bfbfbf;
  border: var(--primary-color) 2px solid;
  color: #414040;
  border-radius: 8px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 0;
  text-shadow: 
    -1px -1px 0 #000, /* Top left white outline */
     1px -1px 0 #b2b1b3, /* Top right white outline */
    -1px  1px 0 #b2b1b3, /* Bottom left white outline */
     1px  1px 0 #b2b1b3; /* Bottom right white outline */
}

.timerDisplay2 {
  z-index: 1; 
  position: absolute; 
  top: 20px; 
  left:50px;
  transition: opacity 2s ease-out;
  opacity: 1;
}

.timerDisplay2.hidden {
  opacity: 0;
}

.timerDisplayBlinking {
  font-size: 24px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin-right: 10px;
  background-color: #1b1b1b;
  border: #4b2c5e 2px solid;
  color: #4b2c5e;
  border-radius: 8px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  -webkit-text-stroke-color: #d30000b6;
  -webkit-text-stroke-width: .5px;
  cursor: pointer;
  text-shadow: 
    -1px -1px 0 #000, /* Top left white outline */
     1px -1px 0 #000000, /* Top right white outline */
    -1px  1px 0 #3a3a3a, /* Bottom left white outline */
     1px  1px 0 #3a3a3a; /* Bottom right white outline */
}

.glow-link {
  transition: all 0.1s ease;
  color: var(--pulpit-maroon); 
  font-size: 15px;
}

.glow-link:visited {
  color: #afb4af; 
}

.glow-link:hover {
  text-decoration: none;
  filter: drop-shadow(0 0 5px #550000)
         drop-shadow(0 0 8px #550000)
         drop-shadow(0 0 11px #550000);
}

.glow-link:hover span {
  color: #ffffff !important;
}

.glow-link:hover image {
  opacity: 1 !important;
}

@keyframes pulse-animation {
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}

/* Optional: If you want to control this separately via JS, you can add this */
.pulse {
  animation: pulse-animation 1.5s ease-in-out infinite;
}

.splashImage {
  width: 300px; 
  height: 300px;
}

/* Class for the animation */
.animate {
  animation: flipZoom 1.5s ease-out forwards;
  transform-origin: center;
}

@keyframes flipZoom {
  0% {
    transform: scale(1) rotateY(0deg); /* Starting position */
  }
  33% {
    transform: scale(1) rotateY(0deg); /* Stay in the same place for 1 second */
  }
  100% {
    transform: scale(0) rotateY(180deg); /* Flip on the Y-axis and zoom out */
  }
}

/* Full-page div with 50% transparency */
#msgDiv {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9998;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
}

/* Centered message box */
#hiddenMessage {
  opacity: 1;
  transition: opacity 2s;
  width: 350px;
  height: 40px;
  margin-left: 100px;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  display: flex; 
  justify-content: center;
  align-items: center;
  color: #c5a0a0;
  border: #da6c6c 1px solid;
  padding: 7px;
  border-radius: 10px;
  background-color: #000;
  text-shadow: 0px 0px 0px #000000; 
  box-shadow: 0 0 15px #f05f5f, 0 0 30px #f05f5f; /* Glow effect */
  z-index: 9999; /* Highest z-index */
}

.windowMaximizedMessage {
  opacity: 1;
  transition: opacity 2s;
  width: 350px;
  height: 40px;
  margin-left: 100px;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace; 
  display: flex; 
  justify-content: center;
  align-items: center;
  color: #c5a0a0;
  border: #da6c6c 1px solid;
  padding: 7px;
  border-radius: 10px;
  background-color: #000;
  text-shadow: 0px 0px 0px #000000; 
  box-shadow: 0 0 15px #f05f5f, 0 0 30px #f05f5f; /* Glow effect */
  z-index: 9999; /* Highest z-index */
}

/* Animation keyframes */
@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.show-message {
  animation: fadeInOut 2.5s forwards;
}

/* Sign In Container Styles */
.sign-in-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    width: 560px;
    padding: 20px;
    padding-top: 20px;
    padding-bottom: 5px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--primary-color);
}

.sign-in-title {
  color: #000000;
  font-family: 'Trajan Pro', serif !important;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 3px 3px 3px gray;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0px;
  margin-bottom: 30px;
  background-color: #ffffff;
  border: 5px solid #4b2048;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-align: center;
  width: 490px;
  display: inline-block;
}

.access-denied-title {
    color: #f5f5f5; /* Off-white color */
    font-family: 'Trajan Pro', serif;
    font-size: 32px;
    margin-bottom: 20px;
    text-shadow: 
        2px 2px 0 #4b2c5e; /* Silverish solid drop shadow */
}

.sign-in-text {
    color: white;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 16px;
    
}

.google-sign-in-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0 20px;
    height: 60px;
}

#googleSignInButton {
    margin: 0 auto;
}

/* Theme Toggle Container */
.theme-toggle-container {
    position: absolute;
    top: 125px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
}

.theme-label {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    transition: .3s;
    border-radius: 24px;
}

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

input:checked + .slider {
    background-color: var(--primary-color);
}

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

/* Update button styles to use CSS variables */
.button-purple {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 18px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px #a8a8a8;
}

.button-purple:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
    box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color);
    transform: scale(1.05);
}

/* Update other elements to use theme variables */
.headings {
    border-bottom: var(--border-color) 2px solid;
}

#collapsibleDiv {
    border: var(--border-color) 1px solid;
}

.toggle-link {
    color: var(--border-color);
}

.timerDisplay, .timerDisplay2 {
    border: var(--primary-color) 2px solid;
    /* color: var(--primary-color); */
}

.sign-in-container {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--primary-color);
}

#mainLogo {
    opacity: 75%;
    transition: width 0.3s ease;
}

/* Add styles for the facilitator document buttons container */
.facilitator-docs {
    min-height: 90px;
    position: relative;
    height: 85px; 
}

.facilitator-docs > div {
    position: absolute;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.facilitator-docs > div.active {
    visibility: visible;
    opacity: 1;
}

/* Update the JavaScript to use opacity instead of display */

/* Add a fixed height to the button container div */
.button-purple[onclick*="openFACReadingWindow"] {
    height: 35px;
}

#btnRecoveryReadingDoc {
    transition: all 0.3s ease;
}

:root[data-theme="kindred"] #btnRecoveryReadingDoc {
    background-color: var(--primary-color);
    color: white;
}

:root[data-theme="kindred"] #btnRecoveryReadingDoc:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
    box-shadow: 0 0 15px var(--glow-color);
}

#btnRecoveryReadingDocContainer,
#btnKOReadingDocContainer {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

:root[data-theme="kindred"] #btnKOReadingDocContainer {
    opacity: 1;
    visibility: visible !important;
}

:root[data-theme="kindred"] #btnRecoveryReadingDocContainer {
  opacity: 0;
  visibility: hidden !important;
}

:root[data-theme=""] #btnKOReadingDocContainer {
    opacity: 0;
    visibility: hidden !important;
}

:root[data-theme=""] #btnRecoveryReadingDocContainer {
    opacity: 1;
    visibility: visible !important;
}


#btnKOReadingDoc:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
    box-shadow: 0 0 15px var(--glow-color);
}

/* Add Kindred Order theme styles */
[data-theme="kindred"] .glow-link:hover {
    text-decoration: none;
    filter: drop-shadow(0 0 5px rgba(153, 0, 0, 0.9))
           drop-shadow(0 0 8px rgba(153, 0, 0, 0.8))
           drop-shadow(0 0 11px rgba(153, 0, 0, 0.7));
}

/* Banned Users List Styles */
.banned-user-item {
    color: #afb4af;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px;
    margin: 2px;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

.banned-user-item:hover {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
}

/* Status Background Colors */
.status-new {
    background-color: #ccf16566;
    color: #dddddd;
    font-weight: bold;
}

.status-under-review {
    background-color: #1E90FF66;
    color: #dddddd;
    font-weight: bold;
}

.status-banned {
    background-color: #fa879366;
    color: #dddddd;
    font-weight: normal;
}

.welcome-user {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}

.welcome-name {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #b388ff;
  text-shadow: 0 2px 8px #00000055;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.user-name {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 4px #6a1b9a99;
}

.welcome-email {
  font-size: 1rem;
  color: #e0e0e0;
  margin-top: 4px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.user-email {
  color: #fffde7;
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 1rem;
  opacity: 0.85;
}

/* The Satanic Pulpit button */
.button-pulpit {
  background-color: var(--button-color-pulpit);
  color: var(--button-text-color-pulpit);
  border: 2px solid var(--button-border-color-pulpit);
  border-radius: 5px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px var(--button-glow-color-pulpit, #000);
}

.button-pulpit:hover {
  background-color: var(--button-hover-color-pulpit);
  color: var(--button-hover-text-color-pulpit);
  border-color: var(--button-hover-border-color-pulpit);
  box-shadow: 0 0 18px var(--button-glow-color-pulpit);
  transform: scale(1.06);
}

.button-pulpit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(211, 175, 55, 0.4);
}

.button-pulpit:disabled {
  background-color: #333;
  color: #888;
  border-color: #222;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.button-pulpit-image-dialog {
  background-color: var(--pulpit-black);
  color: var(--pulpit-gold);
  border: 2px solid var(--pulpit-gold);
  border-radius: 5px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-pulpit-image-dialog:hover {
  background-color: var(--);
  color: var(--pulpit-black);
  border-color: var(--pulpit-maroon);
}

.button-pulpit-image-dialog:disabled {
  background-color: #333;
  color: #888;
  border-color: #222;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}