/* @import url(../fonts/font.scss); */

* {
  border: border-box;
}

html {
  font-size: 18px;
}

/*
https://fonts.google.com/specimen/Cormorant+Infant
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 400 to 900
*/
body {
  /* NUMBERS LOOK WEIRD */
  /* font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; */

  /* GOOD FONT, GOOD WEIGHT! */
  font-family: "Cormorant Infant", serif;
  font-weight: 600;
  font-style: normal;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}

.logo-container-small {
  height: 5vh;
}

.logo-container-medium {
  height: 10vh;
}

.logo-container-large {
  height: 20vh;
}

.logo {
  font-size: 48px;
  position: relative;
  cursor: pointer;
}

.vindex-text,
.v-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 1.5s ease;
}

.vindex-opacity {
  opacity: 1;
}

.v-opacity {
  opacity: 0;
}

.navbar-vindex-text {
  opacity: 1;
  transition: opacity 1.5s ease;
}

.logo:hover .vindex-text,
.logo:hover .navbar-vindex-text {
  opacity: 0;
}

.navbar-v-text {
  margin-left: -40px;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.logo:hover .v-text,
.logo:hover .navbar-v-text {
  opacity: 1;
}

.logo-small {
  font-size: 20px; /* Adjust the font size for smaller logos */
}

.logo-medium {
  font-size: 36px; /* Adjust the font size for medium-sized logos */
}

.logo-large {
  font-size: 60px; /* Adjust the font size for larger logos */
}

.alert-on-top {
  z-index: 3;
}

.info-button {
  padding: 1;
  background: transparent;
  border: none;
  border-radius: 4px;
}

[data-bs-theme="dark"] .info-button {
  color: white;
}

[data-bs-theme="light"] .info-button {
  color: #212529;
}

.disabled {
  pointer-events: none;
  color: #9e9d9d;
  text-decoration: none;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-transition {
  transition: all 0.5s ease-in-out;
}

.hover-raise:hover {
  transform: translateY(-3px); /* Raise on hover */
}

[data-bs-theme="dark"] .new-link-color {
  color: #adb5bd;
}

[data-bs-theme="light"] .new-link-color {
  color: #212529;
}

[data-bs-theme="dark"] .hover-medium-glow:hover {
  color: white;
  border-color: white;
  box-shadow: 0 0 8px white; /* Add glowing effect to div element */
}

[data-bs-theme="light"] .hover-medium-glow:hover {
  border-color: #0c9741;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}

[data-bs-theme="dark"] .hover-accordion-glow-green {
  color: white;
  background-color: #486553;
}

[data-bs-theme="light"] .hover-accordion-glow-green {
  background-color: #e2f9eb;
}


[data-bs-theme="dark"] .hover-accordion-glow-green:hover {
  color: black;
  border-color: black;
  background-color: #b3e0c4;
  box-shadow: 0 0 8px white; /* Add glowing effect to div element */
}

[data-bs-theme="light"] .hover-accordion-glow-green:hover {
  border-color: black;
  background-color: #b3e0c4;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}

[data-bs-theme="dark"] .hover-accordion-glow-magenta {
  color: white;
  background-color: #654848;
}

[data-bs-theme="light"] .hover-accordion-glow-magenta {
  background-color: #f9e2e2;
}


[data-bs-theme="dark"] .hover-accordion-glow-magenta:hover {
  color: black;
  border-color: black;
  background-color: #e0b3b3;
  box-shadow: 0 0 8px white; /* Add glowing effect to div element */
}

[data-bs-theme="light"] .hover-accordion-glow-magenta:hover {
  border-color: black;
  background-color: #e0b3b3;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}

[data-bs-theme="dark"] .hover-accordion-glow-blue {
  color: white;
  background-color: #485065;
}

[data-bs-theme="light"] .hover-accordion-glow-blue {
  background-color: #e2ecf9;
}


[data-bs-theme="dark"] .hover-accordion-glow-blue:hover {
  color: black;
  border-color: black;
  background-color: #b3c4e0;
  box-shadow: 0 0 8px white; /* Add glowing effect to div element */
}

[data-bs-theme="light"] .hover-accordion-glow-blue:hover {
  border-color: black;
  background-color: #b3c4e0;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}

.table-fixed {
  table-layout: fixed;
  width: 100%;
}

.bg-calendar-today {
  background-color: rgb(53, 53, 53);
}

.calendar-date-tile a {
  border-radius: 5pt; /* Update with desired hover background color */
  /* color: #ebebeb; */
}

.calendar-date-tile a:hover {
  background-color: rgb(73, 73, 73);
  border-radius: 5pt; /* Update with desired hover background color */
  /* color: white; */
}

.table-container {
  border: 1px solid rgb(97, 97, 97);
  border-radius: 5px;
  overflow: hidden;
}

.borderless_table_bottom_row {
  border: 1px solid Transparent !important;
}

.table-no-wrap-text {
  white-space: nowrap;
}

/* Adding styles to flask security login etc error messages */
.fs-error-msg {
  color:rgb(255, 34, 34);
  list-style-type: none;
  margin-left: -20px;
}

@media (max-width: 375px) {
  .hide-xs-icon {
    display: none !important;
  }
}
@media (min-width: 376px) {
  .hide-xs-icon {
    display: inline-block;
  }
}