/* ----- Themes ----- */
.theme-light {
  --first-color: #ffffff;
  --second-color: #f1f1f1;
  --third-color: #dedede;
  --fourth-color: #000000;

  --form-color: #ffffff;

  --text900: #000000;
  --text800: #202020;
  --text700: #202020;
  --text600: #C1C1C1;
}

.theme-dark {
  --first-color: #2a2a2a;
  --second-color: #212121;
  --third-color: #595959;
  --fourth-color: #596969;

  --form-color: #21212180;

  --text900: #ffffff;
  --text800: #c1c1c1;
  --text700: #585858;
  --text600: #3E3B3B;
}


h1 {
  font-size: 2em;
} 

h2 {
  font-size: 1.8em;
} 

h3 {
  font-size: 1.6em;
}

h4 {
  font-size: 1.4em;
}

h5, h6 {
  font-size: 1em;
}

/* MONOCHROME THEME */
.monochrome {
  filter: grayscale(100%);
}

/* COLORBLIND THEME */
.colorblind {
  filter: hue-rotate(90deg);
}

/* REDUCED CONTRAST 1 */
.highContrast1 *:not(.overlay, .fontsize-controls *, .steps .step *, .button-accessibility *, .btn-red, .btn-red *) {
  background-color: #99CCFF !important;
  color: #000000 !important;
  background-image: none !important;
  text-shadow: none !important;
  fill: #000000;
}

.highContrast1 .card-course {
  border: 1px solid #000000;
  overflow: hidden;
}

.highContrast1 .card-course a.btn {
  border: 1px solid #000000;
}

/* RESET MOODLE STYLE */
@media (max-width: 767.98px) {
  body {
    font-size: inherit !important;
  }
}

.highContrast1 .accessibility .popover-accessibility {
  border: 1px solid #FFFFFF;
}

.highContrast1 .accessibility header {
  color: #000000 !important;
}

/* REDUCED CONTRAST 2 */
.highContrast2 *:not(.overlay, .fontsize-controls *, .steps .step *, .button-accessibility *, .btn-red, .btn-red *) {
  background-color: #FFFFCC !important;
  color: #000000 !important;
  background-image: none !important;
  text-shadow: none !important;
  fill: #000000;
}

.highContrast2 mark {
  color: red !important;
}

.highContrast2 .welcome h1 {
  color: #000000 !important;
}

.highContrast2 .accessibility header {
  color: #000000 !important;
}

.highContrast2 .accessibility .popover-accessibility {
  border: 1px solid #00000070;
}

.highContrast2 .card-course {
  border: 1px solid #000000;
  overflow: hidden;
}

.highContrast2 .card-course a.btn {
  border: 1px solid #000000;
}

/* HIGH CONTRAST THEME */
.highContrast3 *:not(.overlay, .fontsize-controls .progress-bar *, .button-accessibility, .button-accessibility *, .btn-red, .btn-red *) {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  background-image: none !important;
  text-shadow: none !important;
  fill: #FFFF00;
}

.highContrast3 .card-login {
  background: white !important;
  background-color: white !important;
}

.highContrast3 .card-login .form-control::placeholder {
  color: #FFFF00 !important;
}

.highContrast3 .accessibility .popover-accessibility h6 {
  color: #FFFF00 !important;
}

.highContrast3 .switch-darkmode .circle {
  background-color: #FFFF00 !important;
}

.highContrast3 .card-course {
  border: 1px solid #FFFFFF;
  overflow: hidden;
}

.highContrast3 .card-course a.btn {
  border: 1px solid #FFFFFF;
}

.highContrast3 .accessibility .popover-accessibility {
  border: 1px solid #FFFFFF;
}

.highContrast3 .input-group.password input:focus + .input-group-addon {
  background: transparent !important;
}

/* POPOVER CUSTOM */
.accessibility {
  --color-primary: #e30613;
  --color-secondary: #9a1915;

  --color-white: #FFFFFF;

  --overlay-color: #00000050;

  --color-gray-100: #F1F1F1;
  --color-gray-200: #E5E5E5;
  --box-shadow-popover: 0px 4px 25px rgba(0, 0, 0, 0.1);

  position: fixed;
  top: 70svh;
  right: 10px;
  z-index: 99999999999;
  overflow: hidden;
  display: flex;
  align-items: center;
  user-select: none;
}

.accessibility .button-accessibility,
.accessibility .button-accessibility * {
  width: 40px;
  height: 40px;
  background-color: var(--color-primary) !important;
  font-size: 20px;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  outline: none;
  transition: 200ms;
  cursor: pointer;
  padding: 0 !important;
}

.accessibility .button-accessibility svg {
  background-color: transparent !important;
  fill: var(--color-white);
  width: 24px;
}

.accessibility .button-accessibility:hover div {
  background-color: var(--color-secondary) !important;
}

.accessibility .popover-accessibility {
  position: fixed;
  right: 10px;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--box-shadow-popover);
  max-width: 384px;
  margin-left: 8px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: all 200ms;
  overflow: hidden;
  z-index: 99999;
}

.accessibility .popover-accessibility header {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
}

.accessibility .popover-accessibility header svg {
  width: 24px;
  fill: var(--color-white);
}

.accessibility .popover-accessibility header button {
  padding: 0 5px;
  color: var(--color-white);
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 200ms;
  border-radius: 8px;
  cursor: pointer;
}

.accessibility .popover-accessibility header button:hover {
  background-color: var(--color-secondary);
}

.accessibility .popover-accessibility .content-accessibility {
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.accessibility .popover-accessibility .content-accessibility .resource-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accessibility .popover-accessibility .content-accessibility .resource-group h6 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #000000;
}

.accessibility .popover-accessibility.opened {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.accessibility .popover-accessibility.opened+.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--overlay-color);
  z-index: 88888;
  cursor: pointer;
}

.accessibility .switch-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.accessibility .switch-group .col-span-2 {
  grid-column: span 2 / span 2;
}

.accessibility .switch-group label {
  width: 100%;
}

.accessibility .switch-group .switch input {
  display: none;
}

.accessibility .switch-group .switch {
  width: 100%;
  font-size: 0.75rem;
  text-align: center;
}

.accessibility .switch-group .switch svg {
  width: 1.5rem;
}

.accessibility .switch-group .switch input+label .checkbox-acessibility {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-100);
  border-radius: 7px;
  color: #00000090;
  cursor: pointer;
  user-select: none;
  transition: 200ms;
}

.accessibility .switch-group .switch .checkbox-acessibility:hover {
  background-color: var(--color-gray-100);
}

.accessibility .switch-group .switch input:checked+label .checkbox-acessibility {
  border-color: var(--color-primary);
}

input[type="range"] {
  display: none;
}

.fontsize-controls {
  width: 100%;
  height: 25px;
  z-index: 1;
  overflow: hidden;
  display: flex;
  gap: 4px;
}

.fontsize-controls button {
  top: 0;
  height: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  background-color: var(--color-gray-100);
  transition: 200ms;
}

.fontsize-controls button:hover {
  background-color: var(--color-gray-200);
}

.fontsize-controls button svg {
  width: 1rem;
}

.fontsize-controls .progress-bar {
  position: relative;
  background: var(--color-gray-100);
  flex: 1;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: width 200ms;
}

.fontsize-controls .bar {
  position: absolute;
  background-color: var(--color-primary);
  width: 30%;
  height: 100%;
  border-radius: 8px;
  transition: width 200ms;
}

@media (max-height: 1100px) {
  .accessibility .popover-accessibility {
    bottom: 5svh;
  }
}

@media (max-height: 578px) {
  .accessibility .popover-accessibility {
    bottom: 2svh;
  }
}

/* ------ Switch Dark Mode ------ */

input:checked + label .switch-darkmode .circle {
  transform: translateX(40px);
  background-color: #ffff;
}

input:checked + label .switch-darkmode {
  background-color: #000000;
  color: #ffffff;
}

.switch-darkmode {
  width: 80px;
  height: 35px;
  position: relative;
  border-radius: 30px;
  background-color: #f1f1f1;
  transition: 200ms;
  cursor: pointer;
}

.switch-darkmode:hover {
  transform: scale(0.9);
}

.switch-darkmode .icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 22px;
  font-size: 18px;
} 

.switch-darkmode .circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  left: 7px;
  top: 5px;
  transition: 200ms cubic-bezier(0.88, 1.99, 0, 0.25);
}

.switch-group input {
  display: none;
}