:root {
  --accent: #58C4BC;
  --secondary: #B1463C;
  --base: #FFFBFC;
  --contrast: #031926;
  --contrast2: rgba(3, 25, 38, 0.5);
  --contrast3: rgba(3, 25, 38, 0.15);
  --contrast4: rgba(3, 25, 38, 0.05);
  --input-border: 1px solid var(--contrast3);
  --div-hover: var(--contrast4);
  --button-radius: 8px;
  --padding-button: 8px 16px;
  --container-radius: 16px;
  --heading-font: "Ubuntu", serif;
  --body-font: "Open Sans", serif;
  --transition: all 0.3s ease;
  --row-gutter: 24px;
  --placeholder-opacity: 50%;
  --valid: #157F1F;
  --invalid: var(--secondary);
  --input-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

*, *::after, *::before {
  box-sizing: border-box !important;
  font-family: var(--body-font);
  border: none;
  outline: none;
}

html, body {
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin: 0;
  padding: 0;
  background-color: var(--base);
}

body {
  background-image: url("/public/assets/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h5 {
  font-family: var(--heading-font);
}

*::placeholder, small {
  opacity: var(--placeholder-opacity);
  color: var(--contrast)
}

a, a:visited {
  color: var(--secondary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8em;
}

a:hover {
  text-decoration: none;
}

/* disable cancel button */
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
}

input, button, .form-control {
  padding: var(--padding-button);
  border-radius: var(--button-radius) !important;
  border: var(--input-border) !important;
}

.form-check-input {
  padding: 0;
}

form > input, .password-input, button, .search-input, {
  box-shadow: var(--input-box-shadow) !important;
}

form input {
  background-color: var(--base);
  text-align: left;
}

form a {
  align-self: flex-end;
}

.password-input, .search-input {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: var(--button-radius) !important;
  box-shadow: var(--input-box-shadow) !important;
  border: var(--input-border) !important;
}

.password-input input, .search-input input {
  width: 100%;
  border: none !important;
  box-shadow: none !important;
}

.search-input input {
  padding-left: 0;
}

input:focus, .password-input:focus-within, .search-input:focus-within, .form-control:focus {
  border: 1px solid var(--accent) !important;
  box-shadow: none !important;
}

.password-input input:focus, .search-input input:focus {
  border: none !important;
}

.password-input i {
  cursor: pointer;
  padding: 0px 16px;
}

.search-input i {
  padding: 0px 16px;
}

input:-webkit-autofill, input:-internal-autofill-selected {
  background-color: var(--base) !important;
}

.button-container {
  width: 100%;
}

button {
  background-color: var(--contrast);
  color: var(--base);
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.button-secondary {
  background-color: var(--base);
  color: var(--contrast);
  border: 1px solid var(--contrast) !important;
}

button:disabled {
  opacity: 50% !important;
  cursor: default;
}

button:hover {
  opacity: 80%;
}

button.shake {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

.image-container img {
  display: block;
  width: 300px;
}

.error-container, .info-container {
  width: 100%;
  gap: 8px;
  font-size: 1em;
  align-items: center;
  text-align: left;
  display: none;
}

.error-container {
  color: var(--invalid);
}

.info-container {
  color: var(--valid);
}

#logo {
  cursor: pointer;
}

.button-loading span {
  visibility: hidden;
  opacity: 0;
}

.button-loading {
  pointer-events: none;
  opacity: 50%;
  cursor: default;
}

.button-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: var(--base);
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}