$font-family-sans-serif: 'Lato', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
$font-family-monospace: 'Roboto Mono', 'Liberation Mono', 'Courier New', monospace !default;

$theme-colors: (
  primary: #659dbd,
  secondary: #39596c,
);

$body-bg: #f9f9f9;
$body-color: #38383f;

:root {
  --border-md: #eaecef;
  --code-bg-md: #f6f8fa;
  --body-light-bg: #f9f9f9;

  --color-1-100: #f1f6fa;
  --color-1-300: #b2cede;
  --color-1-500: #659dbd;
  --color-1-700: #39596c;
  --color-1-900: #1c2c35;

  --color-1-2: rgba(28, 44, 53, 0.02);
  --color-1-5: rgba(28, 44, 53, 0.05);
  --color-1-10: rgba(28, 44, 53, 0.1);
  --color-1-20: rgba(28, 44, 53, 0.2);

  --color-2-500: #b0cee0;

  --color-2-10: rgba(176, 206, 224, 0.1);

  --color-3-10: rgba(101, 157, 189, 0.1);

  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-15: rgba(0, 0, 0, 0.15);
  --color-black-25: rgba(0, 0, 0, 0.25);

  --color-white-50: rgba(256, 256, 256, 0.5);

  --logo-font: 'Archivo Black', cursive;

  --color-font: #38383f;
  --body-bg: #f9f9f9;
}

@import '~bootstrap/scss/bootstrap.scss';

.dropdown-item {
  padding: 0.5rem 1.5rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(101, 157, 189, 0.5);
}

.was-validated .form-control:valid {
  border-color: #ced4da !important;
  background-image: none !important;
  padding-right: 0.75rem !important;
}

.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label,
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label {
  color: $body-color;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before,
.was-validated .custom-select:valid,
.custom-select.is-valid,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
  border-color: #adb5bd;
}

.was-validated .custom-select:valid,
.custom-select.is-valid,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
    no-repeat right 0.75rem center/8px 10px;
}

.dropdown-menu .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
  top: calc(-0.5rem - 1px);
  right: 1rem;

  &.arrow-iconBtn {
    right: 0.18rem;
  }

  &::before,
  &::after {
    position: absolute;
    display: block;
    content: '';
    border-color: transparent;
    border-style: solid;
  }

  &::before {
    top: 0;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-bottom-color: rgba(0, 0, 0, 0.25);
  }

  &::after {
    top: 1px;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-bottom-color: #fff;
  }
}

button.text-dark:hover,
button.text-dark:focus {
  color: #121416 !important;
}

label,
a,
button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
