* {
  font-family: Poppins, sans-serif;
}

:root {
  --border-radius: 0.125rem;

  --primary-dark: #2f6e80;
  --primary-light: #77c5b8;
  --primary: var(--primary-dark);

  --primary-dark-100: rgba(47, 110, 128, 0.8);
  --primary-dark-200: rgba(47, 110, 128, 0.6);
  --primary-dark-300: rgba(47, 110, 128, 0.4);
  --primary-dark-400: rgba(47, 110, 128, 0.2);
  --primary-dark-500: var(--primary-dark);
  --primary-dark-600: rgba(47, 110, 128, 0.8);
  --primary-dark-700: rgba(47, 110, 128, 0.6);
  --primary-dark-800: rgba(47, 110, 128, 0.4);
  --primary-dark-900: rgba(47, 110, 128, 0.2);

  --primary-light-100: rgba(119, 197, 184, 0.8);
  --primary-light-200: rgba(119, 197, 184, 0.6);
  --primary-light-300: rgba(119, 197, 184, 0.4);
  --primary-light-400: rgba(119, 197, 184, 0.2);
  --primary-light-500: var(--primary-light);
  --primary-light-600: rgba(119, 197, 184, 0.8);
  --primary-light-700: rgba(119, 197, 184, 0.6);
  --primary-light-800: rgba(119, 197, 184, 0.4);
  --primary-light-900: rgba(119, 197, 184, 0.2);

  --body-gray: #fbfbfb;

  --text-muted: #adb5bd;
  --body-color: var(--body-gray);

  /* Button */
  --btn-padding-y: 0.375rem;
  --btn-padding-x: 3rem;
  --btn-font-family: inherit;
  --btn-font-size: 1rem;
  --btn-line-height: 1.5;
  --btn-white-space: unset; /* Default Bootstrap value */

  --btn-padding-y-sm: 0.25rem;
  --btn-padding-x-sm: 1.5rem;
  --btn-font-size-sm: 0.875rem;

  --btn-padding-y-lg: 0.75rem;
  --btn-padding-x-lg: 3rem;
  --btn-font-size-lg: 1.25rem;

  --btn-border-width: 1px;
  --btn-border-radius: var(--border-radius);

  --btn-font-weight: bold; /* Default Bootstrap value */
  --btn-box-shadow: none; /* Default Bootstrap value */
  --btn-focus-width: 0.2rem;
  --btn-focus-box-shadow: 0 0 0 0.2rem rgb(47, 110, 128, .25);
  --btn-disabled-opacity: 0.65;
  --btn-active-box-shadow: 0 0 0 0.2rem rgb(47, 110, 128, .5);

  /*--btn-link-color: var(--link-color);*/
  /*--btn-link-hover-color: var(--link-hover-color);*/
  --btn-link-disabled-color: #6c757d; /* Default Bootstrap value */

  /* Input */
  --input-padding-y: 0.625rem;
  --input-padding-x: 1rem;
  --input-line-height: 1.5;
  /*--input-color: #000;*/
  --input-bg: #fff;
  --input-border-width: 1px;
  --input-border-color: #ced4da;
  --input-border-radius: var(--border-radius);
  --input-box-shadow: none;
  --input-focus-color: var(--primary-light);
  --input-focus-bg: #fff;
  --input-focus-border-color: var(--primary);
  --input-focus-box-shadow: 0 0 0 0.25rem rgb(47, 110, 128, .25);
  --input-disabled-bg: #e9ecef;
  --input-disabled-opacity: 0.65;
  --input-placeholder-color: #6c757d;
  --input-plain-text-color: inherit;
  --input-plain-text-bg: transparent;
  --input-plain-text-border-width: 0;
  --input-height-sm: calc(1.5em + 0.5rem + 2px);
  --input-height-lg: calc(1.5em + 1rem + 2px);
  --input-font-size-sm: 0.875rem;
  --input-font-size-lg: 1.25rem;

  /* CARDS */
  --card-border-radius: var(--border-radius);

  /* ALERTS */
  --alert-bg: transparent;
  --alert-padding-x: 1rem;
  --alert-padding-x: var(--input-padding-x);
  --alert-padding-y: var(--input-padding-y);
  --alert-margin-bottom: #{$alert-margin-bottom};
  --alert-color: inherit;
  --alert-border-color: transparent;
  --alert-border: #{$alert-border-width} solid var(--alert-border-color);
  --alert-border-radius: var(--border-radius);

  /*HEADINGS*/
  --heading-margin-x: 2rem;
  --heading-margin-y: 2rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff; /* Darker hover color */
  --bs-btn-hover-bg: var(--primary-light);
  --bs-btn-hover-border-color: var(--primary-light);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  /*--bs-btn-disabled-bg: #0d6efd;*/
  /*--bs-btn-disabled-border-color: #0d6efd;*/
}

.input.form-control:focus {
  --bs-input-focus-bg: var(--primary) !important;
}


.link-primary {
  color: var(--primary) !important;
  --bs-link-color: var(--primary) !important;
}

.link-primary:focus, .link-primary:hover, .link-primary:visited{
  color: var(--primary-light) !important;
  --bs-link-color: var(--primary-light) !important;
  --bs-link-hover-color: var(--primary-light) !important;
}

.btn {
  --bs-btn-padding-x: var(--btn-padding-x);
  --bs-btn-padding-y: var(--btn-padding-y);
  --bs-btn-font-family: var(--btn-font-family);
  --bs-btn-font-weight: var(--btn-font-weight);
  --bs-btn-line-height: var(--btn-line-height);
  --bs-btn-border-width: var(--btn-border-width);
  /*--bs-btn-border-color: transparent;*/
  --bs-btn-border-radius: var(--btn-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: var(--btn-box-shadow);
  --bs-btn-disabled-opacity: var(--btn-disabled-opacity);
  --bs-btn-focus-box-shadow: 0 0 0 var(--btn-focus-width)
    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: var(--body-gray);
}

/* Inputs */
input.form-control {
  --bs-input-padding-y: var(--input-padding-y);
  --bs-input-padding-x: var(--input-padding-x);
  --bs-input-line-height: var(--input-line-height);
  /*--bs-input-color: var(--input-color);*/
  --bs-input-bg: var(--input-bg);
  --bs-input-border-width: var(--input-border-width);
  --bs-input-border-color: var(--input-border-color);
  --bs-input-border-radius: var(--input-border-radius);
  --bs-input-box-shadow: var(--input-box-shadow);

  padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
  line-height: var(--bs-input-line-height);
  /*color: var(--bs-input-color);*/
  background-color: var(--bs-input-bg);
  border-width: var(--bs-input-border-width);
  border-color: var(--bs-input-border-color);
  border-radius: var(--bs-input-border-radius);
  box-shadow: var(--bs-input-box-shadow);
}

input.form-control:focus {
  --bs-input-focus-bg: var(--input-focus-bg);
  --bs-input-focus-border-color: var(--input-focus-border-color);
  --bs-input-focus-box-shadow: var(--input-focus-box-shadow);

  background-color: var(--bs-input-focus-bg);
  border-color: var(--bs-input-focus-border-color);
  box-shadow: var(--bs-input-focus-box-shadow);
}

.card {
  --bs-card-border-radius: var(--card-border-radius);
}

input.touched:invalid + .alert {
  display: block !important;
}

.alert {
  --bs-alert-border-radius: var(--alert-border-radius);
  --bs-alert-padding-x: var(--alert-padding-x);
  --bs-alert-padding-y: var(--alert-padding-y);
}

.alert-success {
    --bs-alert-bg: var(--primary-light-900);
    --bs-alert-color: var(--primary-dark);
}

h1,
h2,
h3,
h4,
h5 {
  margin-bottom: var(--heading-margin-y);
}

footer {
  & ul {
    font-size: 10px;
  }
  & li .nav-link {
    padding: 0;
    margin: 0 0.1rem !important;
  }
}

@media (max-width: 768px) {
  .tuv img {
    width: 100px;
  }
}

@media (min-width: 576px) {
  footer {
    & ul {
      font-size: unset;
    }
  }
}

ol li{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#togglePassword {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    color: var(--text-muted);
    font-size: 1.2em;
}

#toggleIcon {
    font-size: 1.2em;
}

#toggleIcon .eye-slash svg{
    fill: var(--text-muted);
    width: 20px;
}

#toggleIcon .eye svg{
    fill: var(--primary-dark);
    width: 20px;
}

.form-control {
    padding-right: 2.5rem;
}

.footer-links:not(:last-child) {
    border-right: 1px solid #6c757d;
}