@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");


/** FONT FACES **/


/*** replace with project specific fonts ***/
@font-face {
    font-family: "SpaceGrotesk-Bold";
    src: url("/fonts/FWWC23/SpaceGrotesk-Bold.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk-Light";
    src: url("/fonts/FWWC23/SpaceGrotesk-Light.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk-Medium";
    src: url("/fonts/FWWC23/SpaceGrotesk-Medium.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk-Regular";
    src: url("/fonts/FWWC23/SpaceGrotesk-Regular.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk-SemiBold";
    src: url("/fonts/FWWC23/SpaceGrotesk-SemiBold.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FWWC2023-Bold";
    src: url("/fonts/FWWC23/FWWC2023-Bold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FWWC2023-Regular";
    src: url("/fonts/FWWC23/FWWC2023-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FWWC2023-SemiBold";
    src: url("/fonts/FWWC23/FWWC2023-SemiBold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Regular";
    src: url("/fonts/FWWC23/Roboto-Regular.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Bold";
    src: url("/fonts/FWWC23/Roboto-Bold.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

:root {
    --base-color: #2b8680; /*Greenblue*/
    --base-color-secondary: #7cddd0; /*Turquoise*/
    --base-color-third: #eeecd4; /*Beige*/
    --base-color-fourth: #fdc82f; /*Yellow*/

    --base-text-color: white;
    --base-font-family: $SpaceGrotesk-Regular;
    --base-corp-font-thin: 'FWWC2023-Regular';
    --base-corp-font-medium: 'FWWC2023-SemiBold';
    --base-corp-font-bold: 'FWWC2023-Bold';
    --base-font-size: 14px;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
}

h1, .-h1-font, h2, .-h2-font, h3, h4, h5, h6 {
    font-weight: normal;
    margin-bottom: 1rem;
}

h1, .-h1-font, h2, .-h2-font, h3, .-h3-font {
    font-family: "FWWC2023-Bold", Arial, Helvetica, sans-serif;
}

h1, .-h1-font {
    display: block;
    font-size: 50px;
    line-height: 52px;
    margin-bottom: 2rem;
}

@media all and (max-width: 568px) {
    h1, .-h1-font {
        font-size: 42px;
        line-height: 44px;
    }
}

h2, .-h2-font {
    display: block;
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 1.5rem;
}

h4 {
    font-size: 22px;
    line-height: 26px;
    color: #30726d;
}

/*** CHECKBOXES ***/
input[type=checkbox]:checked + label:before {
    background-color: var(--base-color-secondary);
    border: none;
}

input[type=checkbox] + label:before {
    background-color: white;
}

/*** DROPDOWNS ***/


.input-row .dropdown .vs__dropdown-toggle, .input-row .dropdown .vs__dropdown-toggle input {
    background-color: #FFF;
    color: #959595;
    font-size: 13px;
    border: none;
    border-radius: 25px;
}

    .input-row .dropdown .vs__dropdown-toggle .vs__actions {
        background: var(--base-color-secondary);
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }

.input-row .dropdown .vs__actions svg {
    fill: white;
}

.v-select {
    --vs-dropdown-color: #666;
}

.vs--multiple .vs__selected-options:first-child {
    margin-left: 15px;
}

.vs--multiple .vs__selected-options .vs__selected {
    margin-bottom: 5px;
}



/*** BUTTONS ***/
.submit-button {
    border-style: solid;
    border-radius: 25px;
    border-width: 3px;
    background-color: var(--base-color-secondary);
    color: white;
    font-family: var(--base-corp-font-bold), "Roboto", Arial, Helvetica, sans-serif;
    border-color: transparent;
}

    .submit-button:hover {
        color: #666666;
    }


/*** TABS ***/

.tab-content, .tabbed-content .tab-list .tab.active {
    background-color: #30726d;
    border-color: #30726d;
}

.tab-link {
    color: #3D3D3D;
}

.tab.active .tab-link {
    color: white;
}


/*** FORMS ***/

.ecommerce-form {
    color: var(--base-color-secondary);
}

/*** SWEET ALERT ***/

.swal2-popup .swal2-icon {
    display: none !important;
}

.swal2-container .swal2-popup {
    background: var(--base-color);
    border: 3px solid #fff;
    color: #fff;
    width: 40em;
    padding: 8.5em;
}

.swal2-popup .swal2-html-container,
.swal2-popup .swal2-title,
.swal2-popup .swal2-close {
    color: white;
}

.swal2-popup .swal2-html-container {
    border-top: 2px solid white;
    padding-top: 30px;
}


/*** CONTACT US - GENERIC REQUEST ***/
.contact-us .text-input,
.generic-request-form .text-input {
    border-radius: 25px;
    background: #fff;
    color: #000;
    border: none;
    font-size: 13px;
}

.generic-request-form .label-text {
    color: var(--base-color-secondary);
}

.newsletter {
    background-image: url('/media/6171/newsletter-expanded.svg');
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

    .newsletter .text-input {
        border-radius: 40px;
        font-size: 14px;
        height: 50px;
        outline: 0;
        font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
        color: var(--base-color);
    }

    .newsletter.is-expanded {
        background-image: none;
        background-color: #fe5211;
    }

    .newsletter .icon-field {
        display: none;
    }

    .newsletter .submit-button {
        font-size: 18px;
        line-height: 24px;
        border-color: var(--base-color);
        background-color: var(--base-color-third);
        color: var(--base-color);
    }

        .newsletter .submit-button:hover {
            background-color: var(--base-color);
            color: white;
        }

    .newsletter .field-validation-error {
        color: var(--base-color-fourth);
    }

/** LEGAL CHECKS **/
#FWWC23 .contact-us .check-row,
#FWWC23 .generic-request-form .check-row,
#FWWC23 .newsletter .check-row {
    border: none;
}

    #FWWC23 .newsletter .check-row .field-validation-error {
        color: var(--base-color-fourth);
        font-size: 12px;
        font-weight: 700;
    }

.wrap-legal-check input[type='checkbox'] + label::before {
    border-radius: 50%;
}

#FWWC23 .contact-us .check-row .check-text label,
#FWWC23 .generic-request-form .check-row .check-text label {
    color: #F8F7EC !important;
    font-size: 13px;
    font-family: var(--base-corp-font-medium) !important;
    line-height: 24px;
}


/*** ATC FIFA ***/
.column-select input[type=radio] + label {
    background-image: none;
    border: 2px solid #333;
    border-radius: 20px;
    height: 19px;
    width: 19px;
}

.column-select input[type=radio]:checked + label {
    padding: 1px;
    border: 2px solid var(--base-color-secondary);
}

    .column-select input[type=radio]:checked + label:before {
        content: "";
        border: 2px solid var(--base-color-secondary);
        border-radius: 20px;
        height: 7px;
        width: 7px;
        top: 2px;
        display: inline-block;
        position: relative;
        background-color: var(--base-color-secondary);
    }