/* ==========================================================================
   #  Custom CSS
   ========================================================================== */

   /* Fonts */
   @font-face {
      font-family: slabo27px;
      font-style: normal;
      font-weight: normal;
      src: url(fonts/slabo27px/slabo27px-regular.ttf);
   }

   /* Variables */
   :root {
      --sascha-blue-og: #0000CD;
      --sascha-blue: #3535cd;
      --light-blue: #b4d3dd;
      --even-lighter-blue: #b6e5f3;
      --azure-white: #F0FFFF;


      /* Color Scheme*/
      --color-lightest: #F2F2F2;
      --color-accent: #dfdfdf;
      --color-lighter: #B6E7F2;
      --color-light: #627FD9;
      --color-default: #3B42D9;
/*      --color-dark: #343BBF;*/
      --color-dark: #076AE1;

   }

   /* Custom Element Styles */
   a {
      word-wrap: break-word;
      word-break: break-word;
   }

   body {
      font-family: slabo27px, arial, sans-serif;
      background-color: var(--color-lightest);
   }

   dd {
      margin-left: 3rem;
   }

   ::-webkit-scrollbar {
      width: 10px;
      background-color: #202324;
      color: #aba499;
   }
   
   ::-webkit-scrollbar-corner {
      background-color: #181a1b;
   }

   ::-webkit-scrollbar-thumb {
      background-color: #454a4d;
   }

   ::-webkit-scrollbar-thumb:hover {
      background-color: #575e62;
   }

   /* Custom Class Styles */
   .alert-icon {
      font-size: xx-large;
   }

   .ppal-container {
      min-width: 355px;
      min-height: 317px;
   }

   @media only screen and (max-width: 599px) {
      .ppal-container {
         min-width: auto;
      }
   }
   
   #btn-back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: var(--color-default);
      visibility: hidden;
      opacity: 0;
      transition: opacity 350ms ease-in, visibility 0ms ease-in 350ms;
   }

   #btn-back-to-top.show {
      visibility: visible;
      opacity: 0.9;
      transition-delay: 0ms;
   }

   .dl-faq dd::before {
      content: "\279C";
      font-style: normal;
      font-weight: normal !important;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: -.15rem;
      margin-right: 5px;
      margin-left: -27px;
      font-size: 1.6rem;
   }

   .dl-faq dt{
      font-size: 1.5rem !important;
   }
   
   .dl-vita dd {
      display: list-item;
   }

   .dl-vita .no-bullet{
      line-height: 1.6rem;
      display: block;
   }

   .flex-gap-1 {
      gap: 0.25rem !important;
   }

   .flex-gap-2 {
      gap: 0.5rem !important;
   }

   .flex-gap-3 {
      gap: 1rem !important;
   }

   .flex-gap-4 {
      gap: 1.5rem !important;
   }

   .flex-gap-5 {
      gap: 3rem !important;
   }

   .icon-primary{
      padding: 10px;
   }

   .li-check {
      list-style-type: none;
   }

   .li-check li::before {
      content: "\F26E";
      color: green;
      font-family: bootstrap-icons !important;
      font-style: normal;
      font-weight: normal !important;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: -.4rem;
      margin-right: 5px;
      margin-left: -30px;
      font-size: 1.6rem;
   }
   
   .video-container video {
      width: 100%;
   }

   .introduction-video {
      width: 100%;
   }

   .main-logo-container{
      padding-top: 2.6rem;
      padding-left: 2.6rem;
      padding-right: 2.6rem;
   }

   .main-logo {
      max-width: 10vw;
      min-width: 80px;
   }

   .main-picture {
      max-width: 10vw;
      min-width: 100px;
   }

   .profile-picture {
      max-width: 15vw;
      min-width: 200px;
      border-radius: 50%;
   }

   .product-picture {
      max-width: 15vw;
      min-width: 200px;
      border-radius: 10px;
   }

   .container-slim .alert{
      width: 25vw;
      margin: auto;
   }

   .container-slim form {
      width: 25vw;
      margin: auto;
   }

   .product-card {
      background-color: var(--color-accent);
      border-style: solid;
      border-width: 1px;
      border-color: var(--color-light);
      border-radius: 10px;
      padding: 25px;
   }

   .square-bullets{
      list-style-type: square;
   }

   /* Overridden Bootstrap Styles */   
	.alert-danger {
		color: #ffa374 !important;
		background-color: #b8000f !important;
		border-color: #ffa374 !important;
	}

	.alert-info {
      background-color: var(--color-lightest) !important;
      border-color: var(--color-light) !important;
	}

   .btn-primary {
      background-color: var(--color-dark) !important;
   }

   .footer {
      background-color: var(--color-dark) !important;
   }

   .footer *{
      color: var(--azure-white) !important;
   }

   .footer .nav-link:hover{
      color: var(--light-blue)!important;
   }

   .navbar {
      background-color: var(--color-dark) !important;
   }

   .navbar .nav-link{
      color: var(--color-lightest) !important;
   }

   .navbar .nav-link:hover{
      color: var(--color-lighter) !important;
   }

   /* MEDIUM-LARGE SCREEN CSS */
   @media only screen and (max-width: 1500px) {
      .container-slim form {
         width: 50%;
      }
   }

   /* MEDIUM SCREEN CSS */
   @media only screen and (max-width: 800px) {
      .container-slim form {
         width: 70%;
      }
   }

   /* SLIM SCREEN CSS */
   @media only screen and (max-width: 500px) {
      .container-slim form {
         width: 100%;
      }

      .main-logo-container{
         padding-top: 10px;
         padding-left: 10px;
         padding-right: 10px;
      }   
   }

   /* EXTREME SLIM SCREEN CSS */
   @media only screen and (max-width: 400px) {
      .main-picture {
         max-width: 10vw;
         min-width: 70px;
      }

      .main-logo {
         max-width: 10vw;
         min-width: 40px;
      }
   }