/* CSS */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

:root {
  /* BRAND COLORS */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  /* PEACH CREAM COLOR PALETTE */
  --peach-cream-50: #FDFBF7;
  --peach-cream-100: #FAEEE1;
  --peach-cream-200: #F4D8B4;
  --peach-cream-300: #ECBD85;
  --peach-cream-400: #E39854;
  --peach-cream-500: #DD7D32;
  --peach-cream-600: #CE6628;
  --peach-cream-700: #AB4F23;
  --peach-cream-800: #893F23;
  --peach-cream-900: #6F361F;
  --peach-cream-950: #3C190E;

  /* GOSSAMER COLOR PALETTE */
  --gossamer-50: #F2FBF8;
  --gossamer-100: #D2F5EB;
  --gossamer-200: #A4EBD7;
  --gossamer-300: #6FD9C1;
  --gossamer-400: #41C0A6;
  --gossamer-500: #28A48D;
  --gossamer-600: #208676;
  --gossamer-700: #1B6A5E;
  --gossamer-800: #1A554C;
  --gossamer-900: #1A4740;
  --gossamer-950: #092A26;

  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;

  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --amber-950: #451A03;

  --rose-50: #FFF1F2;
  --rose-100: #FFE4E6;
  --rose-200: #FECDD3;
  --rose-300: #FDA4AF;
  --rose-400: #F97066;
  --rose-500: #F04438;
  --rose-600: #DB2777;
  --rose-700: #BE123C;
  --rose-800: #9F1239;
  --rose-900: #881337;
  --rose-950: #4C0519;

  /* OTHER */
  --mc-transition-ease: background-color 0.5s ease;

  /* BRAND COLORS: MARKETING PAGES */
  --brand-green: #20917E;
  --brand-light-green: #BAC3A4;
  --brand-dark-green: #2B645C;
  --citrine-white: #FAEEDC;
  --brand-blue: #4AA9E4;
  --brand-very-dark-green: #062117;
  
  --brand-dark-text: #0C2518;
  --brand-dark-text-2nd: #030504;
  --brand-light-text: var(--citrine-white);
  --brand-light-text-secondary: rgba(227, 221, 211, 1);
  --brand-light-text-alternative: var(--gossamer-300);
  --brand-foreground: #FFFFFF;
  --brand-background: #FFFFFF;
  --brand-border: var(--brand-green);
  --brand-accent: #0C2518;

  /* LEGACY COLORS */
  --mc-blue: var(--brand-dark-green); /* BLUE IS NO LONGER USED, SAME AS BRAND DARK GREEN */
  --mc-green: var(--brand-green); /* SAME AS BRAND GREEN */
  
  
}

.v3 input[type='text'], .v3 input[type='password'], .v3 input[type='email'], .v3 input[type='date'], .v3 input[type='url'], .v3 input[type='number'], .v3 input[type='tags'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 41px;
    padding: 5px 15px;
    border-radius: 5px;
    outline: none;
    border: 2px solid #e7edf3;
    background: #f8f9fb;
    color: black;
    font-size: 17px;
}

.v3 input::placeholder {
    color: #c1cad4;
    font-style: italic;
}

.v3 select, .v3 textarea, .v3 input[type='textarea'] {
    -webkit-appearance: none;
    width: 100%;
    padding: 5px 15px;
    outline: none;
    background: #f8f9fb;
    color: black;
    font-size: 17px;
    border-radius: 5px !important;
    border: 2px solid #e7edf3 !important;
}

.v3 textarea {
    padding: 10px 15px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.v3 label {
    display: inline-block;
    text-transform: uppercase;
    font-size: 9pt;
    font-weight: 700;
    color: #868686;
    margin-bottom: 5px;
}

.star-rating-display {
    font-size: 1.1em;
    unicode-bidi: bidi-override;
    color: #BDC1C8;
    display: inline-block;
    position: relative;
    margin-top: 0;
}

.rating-display {
    margin-bottom: 3px;
    font-size: 0.8em;
    vertical-align: text-top;
}


.has-text-blue {
    color: var(--mc-blue);
}

.white {
    color: white !important;
}

.inv-primary-green {
    display: inline-block;
    background-color: #d5fbf4;
    color: #318273 !important;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 5px;
    transition: 0.3s;
    border: 0;
    cursor: pointer;
}

.inv-primary-green.small {
    padding: 8px 12px;
}

.inv-primary-green:hover {
    background-color: #9de6d9;
}

@media only screen and (max-width: 767px) {

    .mobile-filter {
        display: none;
    }

    .mobile-filter.open {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .hero.is-primary .nav-menu {
        background-color: #f8f8f8;
    }
}


/** Modal **/

.modal-card {
    border-radius: 10px;
}

.modal-background {
    position: fixed;
}

.modal-card-head {
    border-bottom: 0;
    font-weight: 700;
    background-color: white !important;
    padding: 30px;
    padding-bottom: 10px;
}

.modal-card-body {
    padding: 30px;
    padding-top: 10px;
}

.modal-card-foot {
    border-top: 0;
}

.modal-card-title {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 768px) {
    .modal-card-title {
        max-width: 85%;
    }
}

.delete {
    height: 40px;
    max-height: 40px;
    max-width: 40px;
    min-height: 40px;
    min-width: 40px;
    width: 40px;
    background-color: rgb(249 250 251);
    transition: background-color 0.2s;
}

.delete:hover {
    background-color: rgb(229 231 235);
}

.delete:before, .delete:after {
    background-color: rgb(156 163 175);
}

.delete:before {
    height: 1px;
}

.delete:after {
    width: 1px;
}

.ugc p:not(:empty):not(.blog) {
    margin-top: 1rem;
}


.delete {
    user-select: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: rgba(10, 10, 10, 0.2);
    border: none;
    border-radius: 290486px;
    cursor: pointer;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 1rem;
    height: 20px;
    max-height: 20px;
    max-width: 20px;
    min-height: 20px;
    min-width: 20px;
    outline: 0;
    position: relative;
    width: 20px;
}
.delete:after,
.delete:before {
    background-color: #fff;
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}