/* Path: app/static/css/style.css */


/*
  Variables
*/
:root {
  --vt-blue: #c1e9fb;
  --vt-blue-light: #e9faff;
  --vt-blue-dark: #30a8e0;
  --vt-blue-gradient: linear-gradient(to right, var(--vt-blue), var(--vt-blue-light));

  --vt-deep-blue: #0D6EBA;
  --vt-deep-blue-light: #A4C9F3;
  --vt-deep-blue-gradient: linear-gradient(to right, var(--vt-deep-blue), var(--vt-deep-blue-light));

  --vt-yellow: #fff3ab;
  --vt-yellow-light: #faf6e8;
  --vt-yellow-dark: #f7e967;
  --vt-yellow-gradient: linear-gradient(to right, var(--vt-yellow), var(--vt-yellow-light));
  --vt-yellow-gradient-l: linear-gradient(to left, var(--vt-yellow), var(--vt-yellow-light));

  --vt-pink: #dca2c9;
  --vt-pink-light: #efcee4;
  --vt-pink-dark: #c17ba0;
  --vt-pink-gradient: linear-gradient(to right, var(--vt-pink), var(--vt-pink-light));

  --vt-grey: #f0f0f0;
  --vt-grey-light: #f9f9f9;
  --vt-grey-dark: #e0e0e0;
  --vt-grey-gradient: linear-gradient(to right, var(--vt-grey), var(--vt-grey-light));
  --vt-black-faded: #555;
  --vt-black-gradient: linear-gradient(to right, black, var(--vt-black-faded));

  --vt-danger: #ff0000;

}

/*
Global Styles
 */
html, body {
  overflow-x: hidden;
}
body {
  /*font-family: Arial, Helvetica, sans-serif;*/
  padding-top: 80px;
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 200;
  background: var(--vt-blue-gradient);
  overflow-x: hidden;
}
.bg-vt-blue-light {
    background-color: var(--vt-blue-light);
}
.mb-100px {
  margin-bottom: 100px;
}
.mb-200px {
  margin-bottom: 200px;
}
.mt-100px {
  margin-top: 100px;
}
.mt-200px {
  margin-top: 200px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 800 !important;
}
.uppercase {
  text-transform: uppercase;
}
.dark-bold-text {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 800 !important;
  color: black;
}
.dark-thin-text {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-size: 1.2em;
  color: black;
}
.dark-bold-link {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 800 !important;
  color: black;
  text-decoration: none;
}
.dark-bold-link:hover {
  text-decoration: none;
  color: black;
  text-shadow: 2px 2px #FFFF33;

}
.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.uppercase {
  text-transform: uppercase;
}
.break-425 {
  display: none;
}
@media (max-width: 425px) {
  .break-425 {
    display: block;
  }
}

.proud-flag {
  width: 60px;
}

.btn.small-mobile-font {
  @media (max-width: 576px) {
    font-size: .8em;
  }
}

.std-font {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 200;
}

.std-font-bold {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 600;
}

.std-font-bolder {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 900;
}

.pink-text {
  color: var(--vt-pink);
}

.dark-pink-text {
  color: var(--vt-pink-dark);
}

/*
  Navbar
 */
header {
  top: 0;
  /*height: 100px;*/
  width: 100%;
  position: fixed;
  z-index: 3;
  background-color: var(--vt-blue-light);
  box-shadow: black 0px 0px 20px;
}
#navbar-xxl {
  flex-grow: 0;
  margin: 0 auto;
}
.nav-item {
  ul.dropdown-menu {

    background-color: black;
    border-radius: 0;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    margin-top: 14px;
    padding-top: 1.4em;
    padding-bottom: 1.4em;
    .dropdown-item {
      text-align: center;
      font-family: quasimoda, sans-serif;
      font-style: normal;
      font-weight: 600 !important;
      color: var(--vt-blue-light);
    }
    .dropdown-item:hover {
      background-color: black;
      /*border: 2px solid #FFFF33;*/
      text-decoration: underline;
      /*text-decoration-color: #FFFF33;*/
      text-decoration-color: var(--vt-blue-light);
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }
  }
}


.vt-hr {
  border: 1px solid black;
  opacity: 100%;
  width: 90%;
 }


div.common-header-container {
    display: flex;
    align-items: center;
}
img.common-header-v-logo {
  width: 50px;
  margin-right: 0.6em;
}
h1.common-header-title {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 0;
  padding-top: 0;
  font-size: 2.4em;
  font-weight: 600;
}
@supports (-moz-appearance: none) {
  h1.common-header-title {
    padding-top: 14px;
  }
}


/*
BIG BUTTONS
 */

.btn.btn-white-on-blue {
  background-color: var(--vt-blue-dark);
  color: white;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-blue-dark) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-black-on-white {
  background-color: white;
  color: black;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid white !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-white-on-black {
  background-color: black;
  color: var(--vt-grey);
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid black !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}
.btn.btn-white-on-black:hover {
  background-color: black !important;
  color: var(--vt-grey-light) !important;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-grey) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-pink-on-black {
  background-color: black;
  color: var(--vt-pink-light);
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid black !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}
.btn.btn-pink-on-black:hover {
  background-color: black;
  color: var(--vt-pink-light) !important;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-pink-light) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-yellow-on-black {
  background-color: black;
  color: var(--vt-yellow);
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid black !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}
.btn.btn-yellow-on-black:hover {
  background-color: black;
  color: var(--vt-yellow-light) !important;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-yellow) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-vt-danger {
  background-color: var(--vt-danger);
  color: white;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-danger) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}
.btn.btn-vt-danger:hover {
  background-color: var(--vt-danger);
  color: white;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-grey-light) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-selected-blue {
  background-color: white;
  color: black;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  border: 3px solid var(--vt-blue-dark) !important;
  /*box-shadow: rgba(60,60,60,.6) 6px 8px 6px;*/
}


.btn.btn-blue-on-black {
  background-color: black;
  color: var(--vt-blue-light);
  font-family: quasimoda, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 20px;
  border: 3px solid black !important;
  margin-top: -4px;
  line-height: 2;
  padding-top: .45em;
  box-shadow: rgba(150,150,150,1) 4px 4px 8px;
}
.btn.btn-blue-on-black:hover {
  background-color: black;
  color: var(--vt-blue-light) !important;
  font-family: quasimoda, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 20px;
  border: 3px solid var(--vt-blue-light) !important;
  box-shadow: rgba(150,150,150,1) 4px 4px 8px;
}

.btn.btn-black-on-blue {
  background-color: var(--vt-blue-light);
  color: black;
  font-family: quasimoda, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  border: 3px solid var(--vt-blue-light) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-black-on-pink {
  background-color: var(--vt-pink-light);
  color: black;
  font-family: quasimoda, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  border: 3px solid var(--vt-pink-light) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

.btn.btn-black-on-yellow {
  background-color: var(--vt-yellow);
  color: black;
  font-family: quasimoda, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  border: 3px solid var(--vt-yellow) !important;
  box-shadow: rgba(60,60,60,.6) 6px 8px 6px;
}

a.icon-black {
  color: black;
}

/*
  Footer
 */
section.footer-space {
  height: 100px;
}
section.footer-space-5 {
  height: 500px;
}

.footer {
  position: relative;
  z-index: 2;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--vt-blue-light);
  box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.3);
  color: black;
}
img.versaagency-logo {
  height: 100px;
  width: 100px;
  filter:brightness(0)
}
.nav.nav-footer a {
  color: black !important;
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
}

.contact-icon-phone-hours-block {
    display: flex;
    align-items: center;
    font-family: quasimoda, sans-serif;
    font-style: normal;
    .contact-icon {
        width: 60px;
        height: 60px;
        margin-right:.4rem;
    }
    .info-phone {
        font-weight: 900;
    }
    .info-hours {
        font-weight: 900;
    }
}

.contact-email-icon-label-address-block {
  display: flex;
  align-items: center;
  font-family: quasimoda, sans-serif;

  font-style: normal;
  .contact-email-icon {
    width: 60px;
    height: 60px;
    margin-right: .4rem;
  }
  .info-email-label {
    font-weight: 900;
  }
  .info-email-address {
    font-weight: 900;
  }
}

.location-icon-address-block {
  display: flex;
  align-items: center;
  font-family: quasimoda, sans-serif;
  font-style: normal;
  .location-icon {
    width: 60px;
    height: 60px;
    margin-right: .4rem;
  }
  .info-location-address {
    font-weight: 900;
  }
}

#system-help-button {
    background-color: transparent;
    border: none;
    color: black;
    .rotate {
      transition: transform 5s ease;
      transform-origin: center;
    }
    .rotated {
      /*transform: rotate(720deg);*/
      transform: rotate(1080deg);
    }
}
/*

  Toasts

 */
#toast-container {
  z-index: 10000;
}
div.toast-header {
  border: 1px solid black;
}
div.toast-body {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.toast-header.toast-warning, .toast-body.toast-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.8);
  color: black;
}
.toast-header.toast-success, .toast-body.toast-success {
  background-color: rgba(var(--bs-success-rgb), 0.8);
  color: black;
}
.toast-header.toast-danger, .toast-body.toast-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.8);
  color: black;
}

/*

  Image Display

 */
.product-title-v-logo {
  width: 40px;
  margin-top: -0.4em;
}

img.checkered-background {
  background-image: url('/static/img/graphics/background.png');
}