/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section,
 summary {
   display: block;
 }
 
 /**
  * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
 audio,
 canvas,
 video {
   display: inline-block;
   *display: inline;
   *zoom: 1;
 }
 
 /**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
  */
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 
 /**
  * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
  * Known issue: no IE 6 support.
  */
 [hidden] {
   display: none;
 }
 
 /* ==========================================================================
    Base
    ========================================================================== */
 /**
  * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
  *    `em` units.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 html {
   font-size: 100%; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -ms-text-size-adjust: 100%; /* 2 */
 }
 
 /**
  * Address `font-family` inconsistency between `textarea` and other form
  * elements.
  */
 html,
 button,
 input,
 select,
 textarea {
   font-family: "Lexend", sans-serif;
 }
 
 /**
  * Address margins handled incorrectly in IE 6/7.
  */
 body {
   margin: 0;
 }
 
 /* ==========================================================================
    Links
    ========================================================================== */
 /**
  * Address `outline` inconsistency between Chrome and other browsers.
  */
 a:focus {
   outline: thin dotted;
 }
 
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
 a:active,
 a:hover {
   outline: 0;
 }
 
 /* ==========================================================================
    Typography
    ========================================================================== */
 /**
  * Address font sizes and margins set differently in IE 6/7.
  * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
  * and Chrome.
  */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 
 h2 {
   font-size: 1.5em;
   margin: 0.83em 0;
 }
 
 h3 {
   font-size: 1.17em;
   margin: 1em 0;
 }
 
 h4 {
   font-size: 1em;
   margin: 1.33em 0;
 }
 
 h5 {
   font-size: 0.83em;
   margin: 1.67em 0;
 }
 
 h6 {
   font-size: 0.67em;
   margin: 2.33em 0;
 }
 
 /**
  * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
  */
 abbr[title] {
   border-bottom: 1px dotted;
 }
 
 /**
  * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
  */
 b,
 strong {
   font-weight: bold;
 }
 
 blockquote {
   margin: 1em 40px;
 }
 
 /**
  * Address styling not present in Safari 5 and Chrome.
  */
 dfn {
   font-style: italic;
 }
 
 /**
  * Address differences between Firefox and other browsers.
  * Known issue: no IE 6/7 normalization.
  */
 hr {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0;
 }
 
 /**
  * Address styling not present in IE 6/7/8/9.
  */
 mark {
   background: #ff0;
   color: #000;
 }
 
 /**
  * Address margins set differently in IE 6/7.
  */
 p,
 pre {
   margin: 1em 0;
 }
 
 /**
  * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  */
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, serif;
   _font-family: "courier new", monospace;
   font-size: 1em;
 }
 
 /**
  * Improve readability of pre-formatted text in all browsers.
  */
 pre {
   white-space: pre;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 /**
  * Address CSS quotes not supported in IE 6/7.
  */
 q {
   quotes: none;
 }
 
 /**
  * Address `quotes` property not supported in Safari 4.
  */
 q:before,
 q:after {
   content: "";
   content: none;
 }
 
 /**
  * Address inconsistent and variable font size in all browsers.
  */
 small {
   font-size: 80%;
 }
 
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 
 sup {
   top: -0.5em;
 }
 
 sub {
   bottom: -0.25em;
 }
 
 /* ==========================================================================
    Lists
    ========================================================================== */
 /**
  * Address margins set differently in IE 6/7.
  */
 dl,
 menu,
 ol,
 ul {
   margin: 1em 0;
 }
 
 dd {
   margin: 0 0 0 40px;
 }
 
 /**
  * Address paddings set differently in IE 6/7.
  */
 menu,
 ol,
 ul {
   padding: 0 0 0 40px;
 }
 
 /**
  * Correct list images handled incorrectly in IE 7.
  */
 nav ul,
 nav ol {
   list-style: none;
   list-style-image: none;
 }
 
 /* ==========================================================================
    Embedded content
    ========================================================================== */
 /**
  * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
  * 2. Improve image quality when scaled in IE 7.
  */
 img {
   border: 0; /* 1 */
   -ms-interpolation-mode: bicubic; /* 2 */
 }
 
 /**
  * Correct overflow displayed oddly in IE 9.
  */
 svg:not(:root) {
   overflow: hidden;
 }
 
 /* ==========================================================================
    Figures
    ========================================================================== */
 /**
  * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
  */
 figure {
   margin: 0;
 }
 
 /* ==========================================================================
    Forms
    ========================================================================== */
 /**
  * Correct margin displayed oddly in IE 6/7.
  */
 form {
   margin: 0;
 }
 
 /**
  * Define consistent border, margin, and padding.
  */
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
 }
 
 /**
  * 1. Correct color not being inherited in IE 6/7/8/9.
  * 2. Correct text not wrapping in Firefox 3.
  * 3. Correct alignment displayed oddly in IE 6/7.
  */
 legend {
   border: 0; /* 1 */
   padding: 0;
   white-space: normal; /* 2 */
   *margin-left: -7px; /* 3 */
 }
 
 /**
  * 1. Correct font size not being inherited in all browsers.
  * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
  *    and Chrome.
  * 3. Improve appearance and consistency in all browsers.
  */
 button,
 input,
 select,
 textarea {
   font-size: 100%; /* 1 */
   margin: 0; /* 2 */
   vertical-align: baseline; /* 3 */
   *vertical-align: middle; /* 3 */
 }
 
 /**
  * Address Firefox 3+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
 button,
 input {
   line-height: normal;
 }
 
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
  * Correct `select` style inheritance in Firefox 4+ and Opera.
  */
 button,
 select {
   text-transform: none;
 }
 
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
  * 2. Correct inability to style clickable `input` types in iOS.
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
  * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
  *    Known issue: inner spacing remains in IE 6.
  */
 button,
 html input[type=button],
 input[type=reset],
 input[type=submit] {
   -webkit-appearance: button; /* 2 */
   cursor: pointer; /* 3 */
   *overflow: visible; /* 4 */
 }
 
 /**
  * Re-set default cursor for disabled elements.
  */
 button[disabled],
 html input[disabled] {
   cursor: default;
 }
 
 /**
  * 1. Address box sizing set to content-box in IE 8/9.
  * 2. Remove excess padding in IE 8/9.
  * 3. Remove excess padding in IE 7.
  *    Known issue: excess padding remains in IE 6.
  */
 input[type=checkbox],
 input[type=radio] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
   *height: 13px; /* 3 */
   *width: 13px; /* 3 */
 }
 
 /**
  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  *    (include `-moz` to future-proof).
  */
 input[type=search] {
   -webkit-appearance: textfield; /* 1 */
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; /* 2 */
   box-sizing: content-box;
 }
 
 /**
  * Remove inner padding and search cancel button in Safari 5 and Chrome
  * on OS X.
  */
 input[type=search]::-webkit-search-cancel-button,
 input[type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 /**
  * Remove inner padding and border in Firefox 3+.
  */
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 
 /**
  * 1. Remove default vertical scrollbar in IE 6/7/8/9.
  * 2. Improve readability and alignment in all browsers.
  */
 textarea {
   overflow: auto; /* 1 */
   vertical-align: top; /* 2 */
 }
 
 /* ==========================================================================
    Tables
    ========================================================================== */
 /**
  * Remove most spacing between table cells.
  */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 /* Lists
    ========================================================================== */
 /**
  * Remove default list styles, margins and padding.
  */
 ol,
 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 /**********
 In this file only apply styles to 3 elements: Universal, UL, P
 ***********/
 input {
   border: none;
 }
 
 button {
   border: none;
   background-color: white;
 }
 
 /**********
 Font Variables
 ***********/
 /**
 :root{
     --Poppins: 'Poppins', sans-serif;
     --Lexend: 'Lexend', sans-serif;
 }
 
 
 Available Font Weights:
 Poppins: 
     ExtraLight 200
     ExtraLight 200 Italic
     Regular 400
     Regular 400 Italic
     Medium 500
     Medium 500 Italic
     Bold 700
     Bold 700 Italic
 Lexend:
     Thin 100
     ExtraLight 200
     Regular 400
     Medium 500
     SemiBold 600
 **/
 /**********
 font sizes
 **********/
 /**********
 Color Variables
 ***********/
 /*Grayscale*/
 /*Primary*/
 /*Secondary*/
 /*Tertiary*/
 /*Positive*/
 /*Warning*/
 /*Negative*/
 /*
 $main-font-color: grey;
 $alt-color: #66f5bc;
 $turquise-blue: #45e0f7;
 $emerald: #5ece75;
 $sunglo: #e67478;
 $coral: #ff784f;
 $purple-majesty: #9279c3;
 */
 /**********
 Breakpoint Variables
 #52bab3
 ***********/
 /****
 Drop Shadows
 *****/
 /**********
 BEM Mixins
 ***********/
 /**********
 font Mixins
 ***********/
 /*********
 Color Mixins
 ***********/
 /**********
 Placement
 ***********/
 /**********
 Media Queries
 ***********/
 /**********
 Flexbox Settings
 ***********/
 /**********
 Buttons
 ***********/
 .btn__pill--error, .btn__pill--warning, .btn__pill--success, .btn__pill--tertiary, .btn__pill--secondary, .btn__pill--primary {
   padding: 1%;
   margin: 2%;
   border-radius: 25px;
   border: 1px solid #246b24;
   max-width: 25%;
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-size: 1.2em;
   box-shadow: 0px 2px 5px #e6e6e6, 0px 4px 8px -3px #CCC, 0px 14px 20px -2px #b3b3b3;
   /*
   color: $White100;
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
   padding: 0.75em 1.5em;
   border-radius: 0.35em;
   margin-left: auto;
   margin-right: auto;
   margin-top: 1.5em;
   border: 0;
   */
 }
 
 .container {
   width: 90%;
   max-width: 1050px;
   margin-left: auto;
   margin-right: auto;
 }
 
 .grid__col--primary {
   background-color: #66cccc;
 }
 .grid__col--secondary {
   background-color: #ffcc99;
 }
 .grid__col--tertiary {
   background-color: #f96;
 }
 .grid__col--success {
   background-color: #40bf55;
 }
 .grid__col--warning {
   background-color: #fc6;
 }
 .grid__col--error {
   background-color: #c66;
 }
 
 /*
 [class^= "grid__col--"].theme__colors {
   @include side;
   @include text-left;
 }
 
 [class^= "grid__col--"]:not(.theme__colors) {
   background-color: white;
 }
 */
 @media (min-width: 1px) and (Max-width: 768px) {
   .grid__row {
     text-align: center;
     padding-top: 10px;
     margin-top: 10px;
     padding-bottom: 20px;
     margin-bottom: 20px;
     min-width: 90%;
   }
 }
 @media (min-width: 769px) {
   .grid__row {
     display: flex;
     flex-direction: row;
     justify-content: center;
     text-align: center;
     padding-top: 10px;
     margin-top: 0px;
     padding-bottom: 10px;
     margin-bottom: 5px;
     min-width: 90%;
   }
 }
 @media (min-width: 769px) {
   .grid__row .grid__col--1 {
     width: 7.2289156627%;
   }
   .grid__row .grid__col--2 {
     width: 15.6626506024%;
   }
   .grid__row .grid__col--3 {
     width: 24.0963855422%;
   }
   .grid__row .grid__col--4 {
     width: 32.5301204819%;
   }
   .grid__row .grid__col--5 {
     width: 40.9638554217%;
   }
   .grid__row .grid__col--6 {
     width: 49.3975903614%;
   }
   .grid__row .grid__col--7 {
     width: 57.8313253012%;
   }
   .grid__row .grid__col--8 {
     width: 66.265060241%;
   }
   .grid__row .grid__col--9 {
     width: 74.6987951807%;
   }
   .grid__row .grid__col--10 {
     width: 83.1325301205%;
   }
   .grid__row .grid__col--11 {
     width: 91.5662650602%;
   }
   .grid__row .grid__col--12 {
     width: 100%;
   }
 }
 
 @media (min-width: 1px) and (Max-width: 768px) {
   [class^=grid__col--] {
     margin-top: em(12px);
     margin-bottom: em(12px);
     display: flex;
     flex-direction: column;
   }
 }
 @media (min-width: 769px) {
   [class^=grid__col--] {
     float: left;
     min-height: 1px;
     padding-left: 10px;
     padding-right: 10px;
   }
   [class^=grid__col--] + [class^=grid__col--] {
     margin-left: 1.2048192771%;
   }
   [class^=grid__col--]:last-of-type {
     float: right;
   }
 }
 
 .card {
   margin-left: 50px;
   margin-right: 30px;
 }
 
 @media (min-width: 769px) {
   .grid__col--12 {
     display: flex;
     justify-content: space-around;
   }
 }
 
 .column--items {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-bottom: 10px;
 }
 
 .headline--primary {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   color: #000;
   font-size: 1.5em;
   padding-left: 15px;
   max-width: 75%;
 }
 
 .headline--secondary {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   color: #000;
   font-size: 1.4em;
 }
 
 .headline--tertiary {
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   color: #000;
   font-size: 1.2em;
 }
 
 .p--text {
   font-family: "Lexend", sans-serif;
   font-weight: 400;
   color: #000;
   font-size: 1em;
 }
 
 .caption--text {
   font-family: "Lexend", sans-serif;
   font-weight: 200;
   color: #000;
   font-size: 0.75em;
   margin-top: -2.5px;
   margin-left: 5px;
 }
 
 .link {
   color: #0f5757;
   font-weight: 600;
   text-decoration: underline;
 }
 .link:hover {
   color: #218383;
 }
 .link:visited {
   color: #c60;
 }
 
 .alignLeft {
   text-align: left;
 }
 
 .xtraHeight {
   line-height: 1.5em;
 }
 
 /***********
 Reference Styles from previous to clean up
 
 .card {
   @include typog($primary-font-family,
   $light-font-weight,
   $Black1000,
   $sml-font-size,
   1.7em);
 }
 
 .blockquote {
   @include typog(
     $primary-font-family,
     $light-font-weight,
     $Black1000,
     $md-font-size);
   border-radius: 5px;
   border-left: 10px solid $Primary30;
   margin: 30px 20px 50px 20px;
   padding: 0.5em 10px;
   font-style: italic;
 }
 
 .nav__item a {
   @include typog(
     $primary-font-family,
     $light-font-weight,
     $Black1000);
   //@include nodecor; 
   &:hover {
     //color: ;
   }
 }
 
 
 .form__input{
   @include typog(
     $primary-font-family,
     $reg-font-weight,
     $Black1000);
     border-bottom: 5px solid $Primary30;
     border-top: 0;
     border-left: 0;
     border-right: 0;
     padding-bottom: 5px;
     padding-left: 20px;
 }
 
 .form__label--hidden {
   visibility: hidden;
   //Note this change
 }
 
 End Reference *****/
 .nav {
   padding: 10px;
   margin: 10px;
 }
 @media (min-width: 769px) {
   .nav {
     display: flex;
     flex-direction: row;
     justify-content: center;
     text-align: center;
     padding-top: 10px;
     margin-top: 0px;
     padding-bottom: 10px;
     margin-bottom: 5px;
     min-width: 90%;
   }
 }
 .nav__item {
   padding: 10px;
   margin: 10px;
 }
 .nav__item:hover {
   background-color: #0f5757;
   border-radius: 0.35em;
   padding: 10px;
 }
 
 .footer {
   flex-shrink: 0;
 }
 
 .status {
   background-color: rgba(102, 204, 204, 0.8);
   border-radius: 25px;
 }
 @media (min-width: 1px) and (Max-width: 768px) {
   .status {
     align-items: center;
   }
 }
 
 .status__pos {
   background-color: #40bf55;
   border-radius: 25px;
 }
 @media (min-width: 1px) and (Max-width: 768px) {
   .status__pos {
     align-items: center;
   }
 }
 
 .status svg, .status__pos svg {
   background-color: #FFF;
   border-radius: 50%;
 }
 
 .status svg {
   margin-top: 10%;
 }
 
 /******
 Find a place for these colored containers
 maybe into 2 diferent classes: container ui color and container type
 ******/
 .primary {
   background-color: rgba(102, 204, 204, 0.4);
   border-radius: 15px;
 }
 
 .secondary {
   background-color: rgba(255, 204, 153, 0.4);
   border-radius: 15px;
   /*Makes it a column that takes up the full column space*/
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .tertiary {
   background-color: rgba(255, 153, 102, 0.4);
   border-radius: 15px;
   /*columns that take up the full area */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-bottom: 10px;
 }
 
 .hero--carousel {
   border: 2px solid #0f5757;
   border-radius: 15px;
   background-color: rgba(102, 204, 204, 0.3);
   padding: 2%;
   box-shadow: 0px 2px 5px #e6e6e6, 0px 4px 8px -3px #CCC, 0px 14px 20px -2px #b3b3b3;
   height: 200px;
 }
 @media (min-width: 1px) and (Max-width: 768px) {
   .hero--carousel {
     height: 300px;
   }
 }
 
 #carouselItems {
   border-left: 1px solid #000;
   margin-right: -7.5%;
 }
 @media (min-width: 1px) and (Max-width: 768px) {
   #carouselItems {
     border: none;
     margin: auto;
   }
 }
 
 #carouselItems span:hover {
   cursor: pointer;
 }
 
 .active__car {
   /*text-decoration: underline;*/
   border-bottom: 2px solid black;
 }
 
 .img {
   min-width: 90%;
   max-width: 90%;
   min-height: 50px;
 }
 .img--logo {
   max-height: 150px;
 }
 
 .img--stats {
   min-width: 90%;
   max-width: 90%;
   min-height: 50px;
   margin-top: -7.5%;
   margin-bottom: -7.5%;
 }
 
 .warning {
   background-color: #ffe6b3;
 }
 
 .btn {
   padding: 2%;
   margin: 2%;
   border-radius: 10px;
   border: 1px solid #808080;
   min-width: 75%;
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-size: 1.2em;
   box-shadow: 0px 2px 5px #e6e6e6, 0px 4px 8px -3px #CCC, 0px 14px 20px -2px #b3b3b3;
   /**
     @include bg-colors($ui-colors);
     @include m(default);
     @include m(success);
     @include m(error);
     @include m(warning);
     @include m(info);
     ***/
 }
 @media (min-width: 1px) and (Max-width: 768px) {
   .btn {
     margin-bottom: 3%;
   }
 }
 
 .btn__pill {
   /*
    padding: 1%;
    margin: 2%;
    border-radius: 25px;
    border: 1px solid $Positive40;
   // background-color: $Positive10;
    max-width: 25%;
    font-family: $header-font-family;
    font-weight: $bold-font-weight;
    font-size: $md-font-size;
    box-shadow: $shadow2;
    */
 }
 .btn__pill--primary {
   background-color: #66cccc;
 }
 .btn__pill--secondary {
   background-color: #ffcc99;
 }
 .btn__pill--tertiary {
   background-color: #f96;
 }
 .btn__pill--success {
   background-color: #40bf55;
 }
 .btn__pill--warning {
   background-color: #fc6;
 }
 .btn__pill--error {
   background-color: #c66;
 }
 .btn__pill--success {
   font-size: 1vw;
   min-width: 35%;
   padding: 1% 0;
   margin: 1% 0;
 }
 @media (min-width: 1px) and (Max-width: 768px) {
   .btn__pill--success {
     min-height: 50px;
     font-size: 2.5vw;
   }
 }
 
 .btn:hover, [class^=btn__pill--]:hover {
   border-width: 1px;
   border-style: solid;
   box-shadow: 0px 2px 6px #CCC, 0px 4px 10px #b3b3b3, 0px 14px 28px #b3b3b3;
 }
 .btn:hover--primary, [class^=btn__pill--]:hover--primary {
   border-color: #0a4343;
 }
 .btn:hover--secondary, [class^=btn__pill--]:hover--secondary {
   border-color: #994d00;
 }
 .btn:hover--tertiary, [class^=btn__pill--]:hover--tertiary {
   border-color: #620;
 }
 .btn:hover--success, [class^=btn__pill--]:hover--success {
   border-color: #206020;
 }
 .btn:hover--warning, [class^=btn__pill--]:hover--warning {
   border-color: #b27700;
 }
 .btn:hover--error, [class^=btn__pill--]:hover--error {
   border-color: #761919;
 }
 
 .btn:active, [class^=btn__pill--]:active {
   box-shadow: inset 0px 14px 20px -2px #e6e6e6, inset 0px 4px 8px -3px #CCC, inset 0px 2px 5px #CCC;
 }
 
 @media (min-width: 1px) and (Max-width: 768px) {
   [class^=btn--] {
     width: 100%;
   }
 }
 
 .modal {
   border: 2px solid #c60;
   border-radius: 15px;
   background-color: #FFF;
   text-align: center;
   z-index: 50;
   box-shadow: 0px 2px 6px #CCC, 0px 4px 10px #b3b3b3, 0px 14px 28px #b3b3b3;
   position: fixed;
   width: 90%;
 }
 
 .modal p {
   background-color: #ffcc99;
   width: 80%;
   margin-left: 10%;
   margin-top: -2%;
   padding: 2%;
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   color: #000;
   font-size: 1.2em;
 }
 
 .modal .modal__close {
   border: 2px solid #000;
   border-radius: 35px;
   box-shadow: 0px 1px 3px #e6e6e6, 0px 2px 5px #e6e6e6, 0px 4px 12px #e6e6e6;
   position: sticky;
   left: 90%;
   margin-top: 10px;
   padding: 0% 1%;
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   color: #000;
   font-size: 1.2em;
 }
 
 /**Tooltip **/
 .tooltip {
   z-index: 10;
   border: solid 1px #000;
   border-radius: 15px;
   box-shadow: 0px 1px 3px #e6e6e6, 0px 2px 5px #e6e6e6, 0px 4px 12px #e6e6e6;
   padding: 2.5px;
 }
 
 /**reduce margin **/
 .reduce__margin {
   margin-top: -2.5%;
 }
 
 .form {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 @media (min-width: 769px) {
   .form {
     width: 90%;
     padding-top: 1em;
     padding-left: 2em;
   }
   .form__input {
     padding-left: 1em;
     padding-right: 1em;
     margin: 0.5em;
   }
   .form .btn--default {
     width: 100%;
   }
 }
 
 .form__label {
   text-align: left;
   margin: 5px;
 }
 
 .form__text {
   border: 1px solid #666;
   border-radius: 10px;
   box-shadow: inset 0px 4px 12px #e6e6e6, inset 0px 2px 5px #e6e6e6, inset 0px 1px 3px #e6e6e6;
   padding: 10px;
   margin: 5px 5px 20px 5px;
   max-width: 75%;
 }
.form__text--neg, .input-validation-error:not([type='checkbox']) {
    border: 5px solid #9e2e2e;
    border-radius: 10px;
    box-shadow: inset 0px 4px 12px #e6e6e6, inset 0px 2px 5px #e6e6e6, inset 0px 1px 3px #e6e6e6;
    padding: 10px;
    margin: 5px 5px 20px 5px;
    max-width: 75%;
}

 input ~ svg, .custom-select ~ svg, textarea ~ svg, div:has(~ label > input) > svg {
     display: none;
 }

.field-validation-valid {
    display: none;
}

.input-validation-error ~ svg {
    display: block;
}

div:has(.input-validation-error) ~ svg, div:has(+ label > .input-validation-error) > svg {
    display: block;
}
 
 /*Custom Select */
 .custom-select {
   position: relative;
   font-family: "Lexend", sans-serif;
   margin-bottom: 20px;
 }
 
 .custom-select select {
   display: none; /*hide original SELECT element: */
 }
 
 .select-selected {
   background-color: #FFF;
   border: 1px solid #000;
   border-radius: 15px;
 }
 
 /* Style the arrow inside the select element: */
 .select-selected:after {
   position: absolute;
   content: "";
   top: 14px;
   right: 10px;
   width: 0;
   height: 0;
   border: 6px solid black;
   border-color: #0a4343 transparent transparent transparent;
 }
 
 /* Point the arrow upwards when the select box is open (active): */
 .select-selected.select-arrow-active:after {
   border-color: transparent transparent #0a4343 transparent;
   top: 7px;
 }
 
 /* style the items (options), including the selected item: */
 .select-items div, .select-selected {
   color: #000;
   padding: 8px 16px;
   border-color: #0a4343;
   cursor: pointer;
 }
 
 div .select-items {
   border: 1px solid #0a4343;
   border-radius: 15px;
 }
 
 /* Style items (options): */
 .select-items {
   position: absolute;
   background-color: #FFF;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 99;
 }
 
 /* Hide the items when the select box is closed: */
 .select-hide {
   display: none;
 }
 
 .select-items div:hover, .same-as-selected, .isHover {
   background-color: #66cccc;
   box-shadow: 0px 2px 5px #e6e6e6, 0px 4px 8px -3px #CCC, 0px 14px 20px -2px #b3b3b3;
 }
 
 /***
 File upload
 ***/
 input[type=file]::file-selector-button {
   border-radius: 15px;
   box-shadow: 0px 1px 3px #e6e6e6, 0px 2px 5px #e6e6e6, 0px 4px 12px #e6e6e6;
   padding: 10px 15px;
   margin: 5px;
   font-family: "Lexend", sans-serif;
 }
 
 /*********
 Form Validation Messages
 ********/
 .required, .field-validation-error, .validation-summary-errors {
   font-family: "Lexend", sans-serif;
   font-weight: 500;
   color: #8a2828;
   font-size: 1.2em;
   line-height: normal;
   text-align: left;
   margin-top: -4px;
   margin-left: 5px;
 }
 
 .iconoir-eye-empty {
   color: #009926;
   width: 2em;
   height: 2em;
 }
 
 .iconoir-eye-off {
   color: #009926;
 }
 
 .iconoir-warning-circle {
   color: #9e2e2e;
 }
 
 .iconoir-warning-triangle {
   color: #fa0;
 }
 
 #showPW {
   justify-content: flex-start;
 }
 
 #showPW svg {
   margin-left: 1%;
   margin-top: -4%;
 }
 
 #showPW .caption--text {
   margin-top: -4%;
   margin-left: -2px;
   padding: 5px 5px 5.5px 5px;
 }
 
 .hide {
   display: none;
 }
 
 /*# sourceMappingURL=styles.css.map */