$base-font-family: 'Open Sans', sans-serif;
$head-font-family: 'Noto Serif', serif;
$navblue: #0066cc;

// Your variable overrides
$container-max-widths: (
  xl: 980px,
);

$font-family-base: $base-font-family;
$font-size-base: 0.75rem;
$line-height-base: 1.5;
$lead-font-size: 0.8125rem;

$headings-font-family: $head-font-family;
$headings-font-weight: 400;

$navbar-light-color: Black;
$navbar-light-hover-color: $navblue;
$navbar-nav-link-padding-x: 0.625rem;

$body-color: Black;
$theme-colors: (
  "primary": #3b5998,
  //header fonts
  "info": dodgerblue,
  //outline
  "success": #89b03e,
  "warning":   #ffc107,
  //action,
  "dark": #343a40,
  "secondary": #6c757d,
  "light": #f8f9fa,
  "danger": #dc3545,
  "dodgerblue": dodgerblue,
  "header-form": #3B5998
);

$jumbotron-bg: transparent;

$btn-padding-y: 0.5rem;

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: 2.5rem,
  6: 3rem,
  7: 7.5rem,
);
$enable-rfs: false;
$sizes: (
  flag: 2.5rem,
);

$h1-font-size: 2.5rem; //40px
$h2-font-size: 2.25rem; //36px
$h3-font-size: 1.875rem; //30px
$h4-font-size: 1.125rem; //18px
$h5-font-size: 1rem; //16px
$h6-font-size: 0.875rem; //14px

$tooltip-padding-x: 0.875rem;
$tooltip-padding-y: 0.75rem;
$tooltip-max-width: 450px;
$tooltip-bg: rgba(0, 0, 0, 0.8);
$tooltip-font-size: 0.6875rem;

$table-border-color: #bbbbbb;
$table-cell-padding: 1rem;
$modal-lg: 900px;
$card-spacer-y: 1rem;
$card-cap-bg: rgba(0, 0, 0, 0.015);

$font-size-lg: 0.875rem;
$border-radius-lg: 0.1875rem;

$input-btn-focus-box-shadow: none;
$list-group-bg: transparent;
$input-color: Black;

$dropdown-link-active-bg: transparent;
$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size,
  7: 12px,
  8: 10px,
);
@import "../../node_modules/bootstrap/scss/bootstrap";

// body {
//   min-height: 100vh;
//   position: relative;
//   footer {
//     position: absolute;
//     width: 100%;
//     bottom: 0;
//   }
// }

.font-family-base {
  font-family: $font-family-base;
}

.headings-font-family {
  font-family: $head-font-family;
}

[v-cloak] {
  display: none;
}

// Class overrides
.navbar-nav {
  >li {
    &:not(:last-child) {
      margin-right: 0.8125rem;
    }

    >a {
      text-transform: uppercase;
      font-weight: $font-weight-bold;
      text-decoration: none;
    }
  }
}


header {
  >nav {
    background: rgba(242, 247, 250, 0.8) !important;
    box-shadow: 0 0 0.1px rgba(10, 10, 10, 0.2) !important;
    -webkit-box-shadow: 0 0 0.1px rgba(10, 10, 10, 0.2) !important;
    -moz-box-shadow: 0 0 0.1px rgba(10, 10, 10, 0.2) !important;

    div.dropdown-menu-end {
      >a {
        >strong {
          color: dodgerblue;
          font-size: $h6-font-size;
        }

        >p {
          color: #6c757d;
          margin-bottom: 8px;
        }
      }

      >a:hover {
        text-decoration: none;
      }
    }
  }
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.cur-pointer {
  cursor: pointer
}

@mixin theme-success() {
  color: white !important;
  border-color: #6b8a30;
}

.border-success {
  @include theme-success();
}

.btn-success {
  @include theme-success();
  text-transform: uppercase;
  font-weight: bold;
}

main {
  .text-green {
    color: green;
  }
}

img.flag {
  width: 1rem;
  margin-right: 0.5rem;
}

footer {

  i.fa-solid,
  i.fa-brands,
  i.far {
    color: white;
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  p.social-media>a>i.fa-brands {
    font-size: 2rem;
  }

  p>span {
    width: 6.625rem;
    display: inline-block;
  }
}

.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 0.875rem;
  border-radius: 0.1875rem;
}

.f-size-11px {
  font-size: 0.6875rem;
}

//Mobile Syling
@media (max-width: 575.98px) {
  header {
    background-color: #f4f5f7;
  }

  .w-xs-100 {
    width: 100%;
  }

  ul.navbar-nav {
    >li.nav-item {
      >a {
        font-size: $h6-font-size;
        padding-top: $h6-font-size;
        padding-bottom: $h6-font-size;
      }
    }
  }
}

// https://getbootstrap.com/docs/5.0/migration/#jumbotron

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0.1875rem;
}

a {
  color: #3b5998;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #263961;
  text-decoration: underline;
}

.btn:hover {
  color: white;
  text-decoration: none;
}

.long-dd-text {
  white-space: normal;
}

.resource-accrd {
  strong {
    color: dodgerblue !important;

  }

  p {
    color: #6c757d;
  }
}

.accordion-submenu {
  h2 {
    font-family: Open Sans, sans-serif;
  }

  .accordion-button {
    font-family: "Noto Serif", serif !important;
  }

  .dropdown-item {
    padding: 10px 20px;
  }

  .accordion-button:not(.collapsed) {
    background-color: white !important;
    color: black !important;
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }

  @media(max-width: 992px) {
    width: 95vw !important;
  }

  .accordion-body {
    padding: 0;

    p {
      margin-bottom: 0px
    }
  }

  @media (min-width: 992px) {
    position: absolute;
    width: max-content;
  }
}