/* Minification failed. Returning unminified contents.
(1063,37): run-time error CSS1046: Expect comma, found '179'
(1063,44): run-time error CSS1046: Expect comma, found ')'
(1730,36): run-time error CSS1046: Expect comma, found '0'
(1730,40): run-time error CSS1046: Expect comma, found '/'
(1730,67): run-time error CSS1046: Expect comma, found '0'
(1730,71): run-time error CSS1046: Expect comma, found '/'
 */
/******* HHO FORM PAGE STYLE SHEET BY MAYA JAFFARY FEB 2022 *******/

/******* Header and Footer from Styles.css *******/
/******* <<<<<< MIAN CONTENT >>>>>> *******/
main {
    display: grid;
    grid-area: main;
    height: auto;
    width: auto;
    /*    color: #FFFFFF;*/
    color: #000000;
    padding: 0px;
    /*    font-family: "Arial", sans-serif;*/
    font-family: Lato,Helvetica,Arial,Verdana,sans-serif;
    font-size: 1.8rem;
    
    
}


/*FORM*/
.pageGrid {
    display:grid;
    grid-template-columns: 5% 90% 5%;
    align-content:center;
}
.form_container {
    grid-column:2;
    width : 100%;
    
}
.form_wrapper {
    grid-column:2;
    align-self:center;
    box-sizing: border-box;
    display: grid;
    grid-template-areas: "CF1"
        "form";
    grid-row: 10px fit-content;
    justify-self: left;
    align-self: left;
    text-align: left;
    
    background-color: white;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin-top: 50px;
    padding-bottom: 50px;
    box-sizing:border-box;
    
}
@media (max-width : 800px) {
    .form_wrapper {
        grid-column : 1;
    }
    .pageGrid {
        grid-template-columns: 100%;
    }
}
@media (max-width: 1130px) {
    .form_wrapper {
        /*padding-top: 50px;*/
        grid-row: auto;
      
    }
}

@media (max-width: 700px) {
    .form_wrapper {
        padding-left: 1rem;
        grid-column:1/3;
    }
}

.cf1Num {
    grid-row: 1/2;
/*    color: #707070;*/
    color: #000000;
    padding-top:1rem;
    padding-left:10rem;
}
@media (max-width: 1500px) {
    
    .cf1Num {
        padding-left: 6rem;
   }
}
@media (max-width: 1100px) {
    .cf1Num {
        padding-left: 2rem;
        max-width: 350px;
    }
}

.signup_form {
    box-sizing:border-box;
    display: grid;
    grid-area: form;
    grid-template-areas: "reqType"
        "name"
        "address"
        "contact"
        "notes"
        "buttons"
        "errorMsg";
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
    /*    grid-template-rows: 5rem;*/
    
    align-self: center;
    
    padding-left: 10rem;
    padding-right: 10rem;
    padding-top: 3vmin;
    font-size: 1.8rem;
    color: #000000;
    width:100%
    
}




@media (max-width: 1100px) {
    .signup_form {
        display: grid;
        grid-template-areas: "mytextlabel"
            "input"
            "button";
        grid-template-columns: 100%;
        grid-row-gap: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        font-size:1.6rem;
    }
    .signup_form input{
        /*height:3rem;*/
    }

}


.providerWarning {
    grid-column: span 4;
    padding-top: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #da291c;
    text-shadow: 1px 1px 4px white;
}

/*FORM ITEMS - DESKTOP SIZE*/
@media (min-width: 1501px) {
    .reqType_wrapper {
        display: grid;
        grid-template-areas: "Req HHO Propane1 warning"
            ". . Notice ."
            ". . . .";
        grid-column: 1/3;
        grid-template-columns: minmax(300px, auto) minmax(300px, auto) minmax(300px, auto) auto;
        padding-left: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border: solid;
        border-width: thin;
        border-color: black;
        
    }
    .providerWarning {
        grid-area: warning;
    }
    .name_wrapper {
        display: grid;
        grid-template-areas: "header header header header"
            "fName fName lName lName"
            "fNameWarning fNameWarning lNameWarning lNameWarning";
        grid-template-columns: 13rem auto 13rem auto;
        column-gap: 2rem;
        row-gap: 1rem;
        padding-left: 2rem;
        padding-right: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-column: 1/3;
        grid-row-start: 2;
        border: solid;
        border-width: thin;
        border-color: black;
    }
    .nameHeader {
        grid-area: header;
        color: #414141;
        font-weight: bold;
        font-size: smaller;
    }
    .fNameWarning {
        grid-area: fNameWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .lNameWarning {
        grid-area: lNameWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .address_wrapper {
        display: grid;
        grid-template-areas: "header header header header header header"
            "houseNum houseNum address address address address"
            "houseNumWarning houseNumWarning addressWarning addressWarning addressWarning addressWarning"
            "unitNum unitNum POBox POBox city city"
            "unitNumWarning unitNumWarning poBoxWarning poBoxWarning cityWarning cityWarning"
            "province province province postCode postCode postCode"
            "provinceWarning provinceWarning postalCodeWarning postalCodeWarning postalCodeWarning postalCodeWarning";
        grid-template-columns: auto 15rem auto auto auto auto;
        column-gap: 2rem;
        row-gap: 1.5rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-row-start: 3;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
        
    }
/*        .address_wrapper:nth-child(3) {
            column-gap:12rem;
        }*/
    .addressHeader {
        grid-area: header;
        color: #414141;
        font-weight: bold;
        font-size: smaller;
    }
    .address {
        grid-column: 4/7;
    }
    .select province {
        max-width: 15rem;
    }
    .provincelabel {
        text-align: right;
    }
    .houseNumWarning {
        grid-area: houseNumWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .addressWarning {
        grid-area: addressWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .unitNumWarning {
        grid-area: unitNumWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .poBoxWarning {
        grid-area: poBoxWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .cityWarning {
        grid-area: cityWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .provinceWarning {
        grid-area: provinceWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .postalCodeWarning {
        grid-area: postalCodeWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }

    .contact_wrapper {
        display: grid;
        grid-template-areas: "header header header header header"
            "pNumLabel pNum pNum ext1L ext1"
            "pPhoneWarning pPhoneWarning pPhoneWarning pPhoneExtWarning pPhoneExtWarning"
            "sNumLabel sNum sNum ext2L ext2"
            "sPhoneWarning sPhoneWarning sPhoneWarning sPhoneExtWarning sPhoneExtWarning"
            "cellLabel cell cell . ."
            "cellphoneWarning cellphoneWarning cellphoneWarning cellphoneWarning ."
            "emailLabel email email . ."
            "emailWarning emailWarning emailWarning emailWarning .";
        grid-template-columns: minmax(28rem,auto) 28rem 20rem 10rem auto;
        column-gap: 2rem;
        row-gap: 1.5rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-row-start: 4;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
    }
    .contactHeader {
        grid-area: header;
        color: #414141;
        font-weight: bold;
        font-size: smaller;
    }
    .pPhoneNum{
        /*grid-column:2/4;*/
        grid-area: pNum;
    }
    .pPhoneNumLabel {
        grid-area: pNumLabel;
    }
    .ext1 {
        max-width: 15rem;
        grid-area: ext1;
    }
    .ext1label {
        grid-area: ext1L;
        text-align: right;
        justify-self:right;
    }
    .pPhoneWarning {
        grid-area: pPhoneWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .pPhoneExtWarning {
        grid-area: pPhoneExtWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .sPhoneNum {
        /*grid-column: 2/4;*/
        grid-area: sNum;
    }
    .sPhoneNumLabel{
        grid-area:sNumLabel;
    }
    .ext2 {
        max-width: 15rem;
        grid-area: ext2;
    }
    .ext2label {
        grid-area: ext2L;
        text-align: right;
    }
    .sPhoneWarning {
        grid-area: sPhoneWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .sPhoneExtWarning {
        grid-area: sPhoneExtWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .cellNum {
        grid-area: cell;
    }
    .cellNumLabel {
        grid-area:cellLabel;
    }
    .cellphoneWarning {
        grid-area: cellphoneWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .emailLabel {
        grid-area: emailLabel;
    }
    .email{
        grid-area: email;
    }
    .emailWarning {
        grid-area: emailWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    .note_checkbox_wrapper {
        display: grid;
        grid-template-areas: "notesLabel notes friendEmail friendEmail"
            "notesWarning notes friendEmail friendEmail"
            "checkbox checkbox friendEmail friendEmail";
        grid-template-columns: 280px 350px auto auto;
        grid-template-rows: 50px auto auto;
        column-gap: 3rem;
        row-gap: 1.5rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-row-start: 5;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
        width:fit-content;
    }

    .friendReferralText{
        padding-bottom: 2rem;
    }
    .noteBoxLabel {
        grid-area: notesLabel;
    }

    .noteBoxInput {
        grid-area: notes;
        width: 350px;
        height: 210px;
    }
    .notesWarning {
        grid-area: notesWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }
    /*.adsCheckbox, .referralCheckbox {*/
/*        grid-area: checkbox;*/
    /*}*/

    .emailPreferance {
        grid-area: checkbox;
        grid-column: span 2;
        justify-self: flex-start;
        align-self: center;
        font-size: 14px;
    }

    .refer {
        font-size: 1.4rem;
        justify-self: left;
        grid-area: friendEmail;
        border: dashed;
        border-width: 0.1rem;
        
        border-color: gray;
        visibility: visible;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 3rem;
        padding-right: 3rem;
/*        visibility: collapse;*/
    }
    .refer input {
        font-size: 1.6rem;
        min-width: 40rem;
    }
    .FriendEmailWarning, .FriendNameWarning {
        grid-area: friendEmailWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }

    #expand-toggle {
    }
    
    #expand-toggle:checked ~ * .refer{
        color: green;
        visibility: visible;
    }

}

/*FORM ITEMS - TABLET SIZE*/
@media (max-width: 1500px) {
    .signup_form{
        font-size: 1.6rem;
        justify-content:center;
        column-gap: 0;
        
    }
    .reqType_wrapper {
        display: grid;
        grid-template-areas: "Req "
            "HHO "
            "Propane1 "
            "Notice ";
        grid-template-rows: 3.5rem 5rem 5rem auto;
        grid-template-columns: 1fr;
        width: 100%;
        /*        height: 21rem;
*/ padding-bottom: 1rem;
        padding-left: 2rem;
        padding-top: 0.5rem;
        border: solid;
        border-width: thin;
        border-color: black;
        column-gap: 0;
        box-sizing: border-box;
    }

    .name_wrapper {
        display: grid;
        grid-template-areas: "header "
            "fNameLabel"
            "fName"
            "fNameWarning"
            "lNameLabel"
            "lName"
            "lNameWarning";
        column-gap: 0;
        row-gap: 1.5rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
        box-sizing: border-box;
    }

    .nameHeader {
        grid-area: header;
        grid-column: span 3;
        color: #414141;
        font-weight: bold;
        font-size: smaller;
    }
    .fNameLabel{
        grid-area: fNameLabel;
    }
    .fNameInput{
        grid-area: fName;
    }
    .lNameLabel{
        grid-area: lNameLabel;
    }
    .lNameInput{
        grid-area: lName;
    }
    .fNameWarning {
        grid-area: fNameWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .lNameWarning {
        grid-area: lNameWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .address_wrapper {
        display: grid;
        grid-template-areas: "header"
            "houseNumberLabel"
            "houseNum"
            "houseNumWarning"
            "addressLabel "
            "address "
            "addressWarning"
            "unitNumLabel "
            "unitNum "
            "unitNumWarning"
            "poBoxLabel "
            "poBox "
            "poBoxWarning"
            "cityLabel "
            "city "
            "cityWarning"
            "provinceLabel "
            "province "
            "provinceWarning"
            "postalCodeLabel"
            "postCode"
            "postalCodeWarning";
        column-gap: 0;
        row-gap: 1.5rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
        box-sizing: border-box;
    }

    .addressHeader {
        grid-area: header;
        grid-column:span 3;
        color: #414141;
        font-weight: bold;
        font-size: smaller;
    }
    .houseNumberLabel {
        grid-area: houseNumberLabel;
    }
    .houseNumber {
        grid-area: houseNum;
    }
    .addressLabel {
        grid-area: addressLabel;
    }
    .address {
        grid-area: address;
    }
    .unitNumLabel {
        grid-area: unitNumLabel;
    }
    .unitNum {
        grid-area: unitNum;
    }
    .poBoxLabel {
        grid-area: poBoxLabel;
    }
    .poBox {
        grid-area: poBox;
    }
    .cityLabel {
        grid-area: cityLabel;
    }
    .city {
        grid-area: city;
    }
    .provinceLabel {
        grid-area: provinceLabel;
    }
    .province {
        grid-area: province;
    }
    .postalCodeLabel {
        grid-area: postalCodeLabel;
    }
    .postalCode {
        grid-area: postCode;
    }
    .houseNumWarning {
        grid-area: houseNumWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .addressWarning {
        grid-area: addressWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .unitNumWarning {
        grid-area: unitNumWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .poBoxWarning {
        grid-area: poBoxWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .cityWarning {
        grid-area: cityWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .provinceWarning {
        grid-area: provinceWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .postalCodeWarning {
        grid-area: postalCodeWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 4;
    }

    .contact_wrapper {
        display: grid;
        grid-template-areas: "header header"
            "pNumLabel pNumLabel"
            "pNum pNum"
            "pPhoneWarning pPhoneWarning"
            "ext1L ext1L"
            "ext1 ext1"
            "pPhoneExtWarning pPhoneExtWarning"
            "sNumLabel sNumLabel"
            "sNum sNum"
            "sPhoneWarning sPhoneWarning"
            "ext2L ext2L"
            "ext2 ext2"
            "sPhoneExtWarning sPhoneExtWarning"
            "cellLabel cellLabel"
            "cell cell"
            "cellphoneWarning cellphoneWarning"
            "emailLabel emailLabel"
            "email email"
            "emailWarning emailWarning";
        column-gap: 0;
        row-gap: 1.5rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
    }

    .contactHeader {
        grid-area: header;
        grid-column: span 3;
        color: #414141;
        font-weight: bold;
        font-size: smaller;
    }

    .pPhoneNum {
        grid-area: pNum;
    }

    .pPhoneNumLabel {
        grid-area: pNumLabel;
    }

    .ext1 {
        max-width: 15rem;
        grid-area: ext1;
    }

/*    .ext1L {
        grid-area: ext1L;
    }*/

    .pPhoneWarning {
        grid-area: pPhoneWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 3;
    }

    .pPhoneExtWarning {
        grid-area: pPhoneExtWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 3;
    }

    .sPhoneNum {
        grid-area: sNum;
    }

    .sPhoneNumLabel {
        grid-area: sNumLabel;
    }

    .ext2 {
        max-width: 15rem;
        grid-area: ext2;
    }

/*    .ext2L {
        grid-area: ext2L;
    }*/

    .sPhoneWarning {
        grid-area: sPhoneWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 3;
    }

    .sPhoneExtWarning {
        grid-area: sPhoneExtWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 3;
    }

    .cellNum {
        grid-area: cell;
    }

    .cellNumLabel {
        grid-area: cellLabel;
    }

    .cellphoneWarning {
        grid-area: cellphoneWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 3;
    }

    .emailLabel {
        grid-area: emailLabel;
    }

    .email {
        grid-area: email;
    }

    .emailWarning {
        grid-area: emailWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
        grid-column: span 3;
    }

    .note_checkbox_wrapper {
        display: grid;
        grid-template-areas: "noteLabel"
            "notes"
            "checkbox"
            "friendEmail"
            "friendEmailWarning";
        max-width: 60rem;
        grid-template-rows: 2rem 15rem 3rem auto auto;
        column-gap: 0;
        row-gap: 2rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        grid-column: 1/3;
        border: solid;
        border-width: thin;
        border-color: black;
    }
    .friendReferralText {
        padding-bottom: 2rem;
    }

    .noteBoxLabel {
        grid-column: span 4;
    }

    .noteBoxInput {
        grid-column: span 4;
        max-width: 400px;
        height: 150px;
    }

    .friendEmail {
        font-size: 1.2rem;
        justify-self: left;     
        grid-area: friendEmail;
    }

    .refer {
        grid-area: friendEmail;
        border: dashed;
        border-width: 0.1rem;
        
        border-color: gray;
        visibility: visible;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 40rem;
        font-size: 1.4rem;
    }
    .refer input {
        max-width: 25rem;
        font-size: 1.4rem;
    }

    .emailPreferance {
        grid-area: checkbox;
        grid-column: span 2;
        justify-self: flex-start;
        align-self: center;
        font-size: 1.4rem;
    }

    .FriendEmailWarning, .FriendNameWarning {
        grid-area: friendEmailWarning;
        font-size: 1.4rem;
        font-weight: 700;
        color: #da291c;
        text-shadow: 1px 1px 4px white;
    }

}




/*FORM ITEMS - MOBILE SIZE*/
/*
@media (max-width: 830px) {
    .reqType_wrapper {
        grid-column:1/4;
        max-width: 35rem;
        grid-template-columns: 1fr;
    }
    .name_wrapper {
        grid-column: 1/4;
        max-width: 35rem;
        grid-template-columns: 1fr;
    }
    .address_wrapper {
        grid-column: 1/4;
        max-width: 35rem;
        grid-template-columns: 1fr;
    }
    .contact_wrapper {
        grid-column: 1/4;
        grid-template-columns: 1fr;
        max-width: 35rem;
    }
    .note_checkbox_wrapper {
        max-width: 35rem;
        grid-template-rows: 2rem 15rem 3rem auto auto;
        grid-template-columns: 1fr;
        grid-column: 1;
    }

    .noteBoxInput {
        grid-column: span 4;
        width: 310px;
        height: 150px;
    }
    .emailPreferance{
        max-width: 32rem;
    }
    .refer{
        max-width: 31rem;
    }
        .refer input {
            max-width: 22rem;
            /*font-size: 1.2rem;*/
            /*height: 3rem;*/
      /*  }
}*/



/*LABELS*/
.signup_form label {
    grid-template-areas: mytextlabel;
    text-align: right;
}

@media (max-width: 1500px) {
    .signup_form label {
        grid-column: span 3;
        text-align: left;
    }
}

@media (max-width: 700px) {
    .signup_form label {
        grid-column: span 4;
        font-size: 90%;
    }
    .signup_form {
        font-size: 90%;
    }
}
/*INPUT BOXES*/
.signup_form input {
    grid-template-areas: input;
}

@media (max-width: 1500px) {
    .signup_form input, select {
        grid-column: span 4;
        
    }
}
.privacyWarning {
    padding-left: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #da291c;
    text-shadow: 1px 1px 4px white;
}


.signup_form input, select, textarea {
    font-size: 1.8rem;
    padding-left: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    border: 0.0625rem solid rgb(179 179 179);
    background: white;
}
@media (max-width: 830px) {
    .signup_form input, select, textarea {
        grid-column: span 4;
        font-size: 1.4rem;
        
    }
}
    select:hover{
        background: white;
    }
.signup_form textarea:hover,
.signup_form input:hover {
    background: white;
}

    .signup_form input:disabled:hover {
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(217,217,217,1) 100%);
    }


/*NOTICE*/
.notice {
    grid-area: Notice;
    padding-top: 1rem;
    padding-left: 1rem;
    font-size: 1.4rem;
    font-weight: 900;
    color: #da291c;
    letter-spacing: 1px;
    /*    color: red;*/
    /*    animation-name: flicker;
    animation-duration: 5s;
    animation-iteration-count: infinite;*/
}
@keyframes flicker {
    0% {
        color: red
    }

    50% {
        color: #FF5021
    }

    100% {
        color: red
    }
}
@media (max-width: 1500px) {
    .notice {
        justify-self: left;
        grid-column: span 4;
        padding-top: 1rem;
        padding-left: 0rem;
        margin: 5px;
    }
    .Notice, .reqType {
        grid-column: span 4;
        font-size: smaller;
    }
}

/*@media (max-width: 700px) {
    .notice, .reqType, .cf1Num {
        font-size: smaller; 
    }
}*/
/*.providerWarning {
    grid-column: span 4;
    padding-top: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #da291c;
    text-shadow: 1px 1px 4px white;
}*/

.provinceSelect {
    cursor: pointer;
    

}
/*Preferances*/
@media (max-width: 1500px) {
    .emailPreferance input {
            width: 20px;
            cursor: pointer;
        }

        .emailPreferance label {
            grid-column: 1/4;

        }
}


    .refer label {
        font-size: 1.4rem;
    }


/*BUTTONS*/
.signup_form button {
   
    white-space:nowrap;
    width: 140px;
    height: 4.5rem;
    padding: 0.7rem;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: .02em;
    border-color: #df271c;
    color: whitesmoke;
    background-color: #df271c;
    /*    border-style: solid;*/
    border-radius: 2em;
    text-align: center;
    vertical-align: middle;
    transition-property: background-color,border-color,color;
    transition-duration: .1s;
    transition-timing-function: ease-out;
}
@media (max-width: 1500px) {
    .signup_form button {
        
        justify-self: left;
        width: 150px;
        height: 4rem;
        font-size: 1.8rem;
        
    }
}
@media (max-width: 1100px) {
    .signup_form button {
        grid-column:  1/3;
        justify-self: left;
    }
}
@media (max-width: 700px) {
    .signup_form button {
        grid-column: span 3;
        font-size: 1.6rem;
        height: 20px;
        width:140px;
        text-align: center;
        padding-bottom: 2rem;
        padding-top:0.5rem;
    }
}

.reset_cancel{
    justify-self: right;
    grid-column:2/3;
    grid-row: 6/7;
}

@media (max-width: 1500px) {
    .reset_cancel {
        grid-row: 7/8;
        grid-column:1/2;
        justify-self: left;
    }
}
@media(max-width: 700px) {
    .reset_cancel {
        
        text-decoration: none;
    }
}

.submit_button2--cta {
    background-color: #da291c;
    color: white;
    font-size: 2.4rem;
    padding: 12px;
    border-color: #707070;
    border-style: none;
    border-radius: 0.5em 0.5em;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    text-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 2rem;
}

    .submit_button2--cta:disabled {
        background-color: gray;
        cursor: default;
    }
        .submit_button2--cta:disabled:hover {
            background-color: gray;
        }

.submit_button2:hover {
/*    background-color: #bd2119;*/
    background-color: #eb2a1c;
    text-shadow: #707070;
/*    text-indent: 2px;*/
}

    /*privacy policy*/
.privacyPolicy {
    font-size: 1.2rem;
    /*    color: white;*/
    color: #000000;
    font-family: Lato,Helvetica,Arial,Verdana,sans-serif;
    text-decoration: none;
    padding-left: 1rem;
    
}

    .privacyPolicy a,
    .privacyPolicy a:active {
        color: #da291c;
        font-size: 1.14rem;
    }

    .privacyPolicy a:visited {
/*        color: whitesmoke;*/
        color: #000000;
        text-decoration: none;
    }

    .privacyPolicy a:hover {
        font-variant: small-caps;
    }
@media (min-width: 1501px) {
    .privacyPolicy {
        grid-row: 8/9;
        grid-column: 1/2;
        justify-self: left;
        padding-left:2rem;
    }
    .submit_button_4 {
        grid-row: 9/9;
        grid-column: 1/3;
    }
    .reset_cancel {
        grid-row: 9/9;
        grid-column: 2/3;
    }
}
    @media (max-width: 1500px) {

        .privacyPolicy {
            grid-row: 8/9;
            grid-column: 1/2;
            justify-self: left;
        }
        .submit_button_4 {
            grid-row: 9/10;
            grid-column: 1/2;
        }
        .reset_cancel {
            grid-row: 10/11;
            grid-column: 1/2;
        }

        .privacyPolicy input {
            width: 20px;
            cursor: pointer;
        }

            .privacyPolicy label {
                grid-column: 1/4;
            }
    }

    /*data validation error message*/
    .dataValidation {
        grid-template-areas: errorMsg;
        grid-column: span 3;
        min-height: 5rem;
        color: #da291c;
        text-decoration-style: solid;
        text-align: center;
        justify-self: center;
        font-family: Lato,Helvetica,Arial,Verdana,sans-serif;
        font-size: 1.9rem;
        z-index: 12;
    }

    @media (max-width: 1100px) {
        .dataValidation {
            justify-self: left;
            font-size: 1.8rem;
        }
    }

    @media (max-width: 750px) {
        .dataValidation {
            font-size: 1.7rem;
            width: 32rem;
            text-align: left;
        }
    }



    /*Oil and Propane Toggles*/
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        
        border: 0.25rem solid rgb(94,95,94);
        -webkit-transition: .4s;
        transition: .4s;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 1px;
            bottom: 0.5px;
            background-color: rgb(94,95,94);
            transition: .4s;
        }

    /*  hidden field  */
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
    border: 0.25rem solid #df271c;
}

    input[type="checkbox"]:focus + input[type="hidden"] + .slider,
    input[type="checkbox"]:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
        background-color: blue;
    }

input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
    background-color: #df271c;
    transform: translateX(26px);
}

    /* Rounded sliders */
    .slider.round {
        border-radius: 2em 2em;
    }

        .slider.round:before {
            border-radius: 2em 2em;
        }


    /*Toggle switch*/
    .switch {
        position: absolute;
        display: inline-block;
        /*    width: 55px;
    height: 28px;*/
    }
.switchOil {
    position: absolute;
    display: inline-block;
    /*    width: 55px;
    height: 28px;*/
}

        .switch input {
            display: none;
        }

    .slider.round {
        left: 1rem;
        height: 24px;
        width: 56px;
    }

    .slider:before {
        height: 22px;
        width: 22px;
    }

    .toggleHHO label {
        grid-area: HHO;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .togglePropane label {
        grid-area: Propane1;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* Slider - Tablet size */
    @media(max-width:1500px) {
        .switch {
            display: grid;
            position: absolute;
            width: 55px;
            height: 20px;
        }

        .switchOil {
            display: grid;
            position: absolute;
            width: 55px;
            height: 50px;
        }

        .togglePropane label {
            padding-left: 0rem;
            padding-right: 5rem;
            grid-area: Propane1Toggle;
        }

        .toggleHHO label {
            padding-left: 0rem;
            padding-right: 5rem;
            align-self: center;
        }

        .toggleHHO {
            font-size: smaller;
           
            align-items: center;
            align-self: center;
            justify-self: start;
            text-align: justify;
        }

        .togglePropane {
            font-size: smaller;
            grid-area: Propane1;
            display: grid;
            align-items: center;
            align-self: center;
            justify-self: start;
            text-align: justify;
        }

        .slider.round {
            left: 18rem;
            height: 19px;
            width: 52px;
        }


        .slider:before {
            height: 18px;
            width: 18px;
        }
    }
@font-face {
    font-family: "Lato Black";
    src: url("../fonts/Lato-Black.ttf");
}
@font-face {
    font-family: "WorkSans Black";
    src: url("../fonts/WorkSans-Black.ttf");
}
html {
    height: 100%;
    font-size: 62.5%;
    padding-block: 0px;
}
/*Header Section*/
header {
    display: grid;
    grid-template-areas: "empty . myimage"
        "logo . myimage"
        "title . myimage";
    height: 338px;
    margin: 0px;
    grid-template-columns: auto fit-content auto fit-content;
    grid-column-gap: 0px;
    grid-template-rows: 58px 80px 200px; /*58px 80px 200px;*/
    grid-row-gap: 0px;
    z-index: 11;
    color: #FFFFFF;
    font-weight: 900;
    font-family: 'Work Sans', sans-serif;
    font-family: Lato,Helvetica,Arial,Verdana,sans-serif;
    font-family: 'Lucida Sans Typewriter',sans-serif;
    padding: 0px;
    padding-top: 0px;
    justify-items: left;
    /*banner arrow*/
    background-color: #da291c;
    background-image: url('topribbon4_Short_Gray.svg');
    background-position: left;
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    background-size: auto;
}
.CanexLogo {
    width: 170px;
    height: auto;
}
@media (min-width: 1401px) {
    .hideDesktop {
        display:none;
    }
    header {
        /*Removing banner arrow when zoomed in*/
        background-color: #333232;
        /*        background-color: #FFFFFF;*/
    }
}
@media (max-width: 1400px) {
    .myimage {
        display:none;
    }
}
.logo {
    align-self: flex-end;
    justify-self: left;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0px;
    z-index: 10;
    display: grid;
    grid-area: logo;
}
.myimage {
    align-self: center;
    justify-self: right;
    justify-items: stretch;
    grid-area: myimage;
    height: 100%;
    width: 100%;
    object-fit:contain;
    object-position:right;
}
nav {
    justify-items: center;
    font-size: 3.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom:50px;
    font-family: Times, serif;
    /*    font-family: 'Metal', cursive;*/
    /*    font-family: Lato,Helvetica,Arial,Verdana,sans-serif;*/
    font-weight: 900;
    grid-area: title;
    height: fit-content;
}
.navProgram {
    font-family: 'Lato Black', sans-serif;
    font-weight: 900;
    transform: scale(1, 0.5);
    text-transform: uppercase;
    /*making font bolder than 900*/
    text-shadow: 1px 0 #FFFFFF;
    letter-spacing: 1px;
}
.language {
    font-size: 1.5rem;
    color: white;
    font-family: Lato,Helvetica,Arial,Verdana,sans-serif;
    text-decoration: none;
    padding-left: 6.5rem;
    text-decoration:underline;
}
.language a:active {
    color: #da291c;
    color: whitesmoke;
    font-size: 1.28rem;
    text-decoration: none;
}

.language a:visited {
    /*        color: whitesmoke;*/
    color: maroon;
    color: #da291c;
    color: white;
    text-decoration: none;
}



body {
    display: grid;
    margin: 0px;
    height: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: "header"
        "main"
        "footer";
    grid-template-rows: 338px auto auto;
    color: #FFFFFF;
    padding: 0px;
    padding-top: 0px;
    overflow-x: hidden;
}
main {
    display: grid;
    grid-area: main;
    height: auto;
    width: auto;
    /*    color: #FFFFFF;*/
    color: #000000;
    padding: 0px;
    /*    font-family: "Arial", sans-serif;*/
    font-family: Lato,Helvetica,Arial,Verdana,sans-serif;
    font-size: 1.8rem;
    min-height: 60vh;
}
/******* <<<<<< FOOTER >>>>>> *******/
footer {
    
    
   
    display: grid;
    grid-area: footer;
    height: 100px;
    /*font-family: "Arial", sans-serif;*/
    font-family: Lato, Helvetica, Arial, Verdana, sans-serif;
    /*font-size: 2.0rem;*/
    font-size: 1.4rem;
    background-color: #1f2225 !important;
    color: #FFFFFF;
    padding: 1.6rem;
    text-align: center;
    color: white;
    
}


hr.customWidth {
    width: 100%;
    margin: auto;
    grid-area: HR;
}
/*CF1 entry section*/

.textBoxContainer {
    padding-top: 100px;
    padding-bottom: 30px;
    display: grid;
    width: 100%;
    
    padding-bottom: 100px;
    font-size: 25px;
}
.contentGrid {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    justify-items: center;
    background: linear-gradient(180deg,rgba(215,215,215,1) 0%,rgba(250,250,250,1) 100%);
}

.textbox {
    grid-area: content;
    display: grid;
    grid-row: 1;
    box-sizing: border-box;
    color: white;
    grid-column: 2;
    grid-column-gap: 2rem;
    grid-template-columns: 20% 60% 20%;
    width: 100%;
    min-height: fit-content;
    
    background: #da291c;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    
    justify-content: center;
    margin-top: 100px;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
}


.textbox label {
    
    align-self: baseline;
    font-weight: bold;
}

.labelCF1 {
    padding-top: 1rem;
    
}
.textbox input {
   
    
    max-width: 750px;
    font-size: 1.3rem;
    padding: 12px;
    padding-left: 2rem;
    border-radius: 2em 2em;
    border-style: none;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(217,217,217,1) 100%);
    border-radius: unset;
}
.textbox button {
    
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition-property: background-color,border-color,color;
    transition-duration: .1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    max-width: 150px;
    background-color: #1f2225;
    border-radius: unset;
}

.textbox button:hover {
    background-color: dimgray;
}

@media(max-width: 601px) {
    .faqPageAnswerText {
        margin-left: 50px!important;
        margin-right: 50px!important;
        white-space: pre-wrap;
    }

}


@media(max-width: 550px) {
    
    header {
        background-position-y: -195px !important;
        height: 136px !important;
    }
    .logo {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 6px!important;
    }
    .language {
        padding-left:41px;
    }
    .CanexLogo {
        
        width:110px;
        height: auto;
    }
    nav {
        font-size: 18px;   
        padding-left:unset;
        padding-right:8px;
    }
    .homePageInfoContainer {
        
        padding: 0;
    }
    .textbox {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
        box-shadow: unset;
        row-gap: 15px;
        justify-items: center;
        grid-column-gap: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
        .textbox input {
            grid-column: 1;
        }
    .textbox button {
        grid-column: 1;    
    }
    .textbox label {
        grid-column: 1;
    }
}

    .submit_button--cta {
        background-color: #da291c;
        color: white;
        font-size: 2.4rem;
        padding: 12px;
        border-color: #707070;
        border-style: none;
        border-radius: 2em 2em;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        text-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        text-align: center;
        vertical-align: middle;
        transition-property: background-color,border-color,color;
        transition-duration: .1s;
        transition-timing-function: ease-out;
        cursor: pointer;
    }

    .submit_button3--cta {
        background-color: #da291c;
        color: white;
        font-size: 1.8rem;
        padding: 7px;
        border-color: #707070;
        border-style: none;
        border-radius: 5em 5em;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        text-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        text-decoration: none;
        max-width: 10rem;
        max-height: 6rem;
        cursor: pointer;
    }

    .submit_button3:hover {
        background-color: #bd2119;
        text-shadow: #707070;
        text-indent: 2px;
    }
    /*cf1 number data validation error message*/
    .dataValidation {
        grid-template-areas: errorMsg;
        grid-column: span 3;
        /*color: red;*/
        text-decoration-style: solid;
        text-align: center;
        justify-self: center;
        font-family: "Arial", sans-serif;
        /*font-size: 1.9rem;*/
        z-index: 12;
        font-size: 1.4rem;
        font-weight: 700;
        color: white;
    }

.CF1Link {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    padding-top: 0px;
    font-size: 1.5rem;
    margin-top: 30px;
    /*    padding-top: 10rem;*/
    color: #af1f14;
    padding:0 50px 50px 50px;
}

    .CF1Link a {
        color: #af1f14;
        cursor: pointer !important;
    }

        .CF1Link a:hover {
            color: #af1f14;
        }

    .CFOneLink {
        cursor: pointer !important;
    }

.HomePageImageInfoGrid {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 100px;
    background: white;
    
       
}
.homePageImage {
    height: 100%;
    width: 100%;
    object-position: right;
    object-fit: cover;
    display: block;
}


    /*Front page info*/
    .infoTitle {
        font-weight: bold;
        justify-self: center;
        text-align: center !important;
        font-size: larger;
    }

    .infoText {
        text-align: left !important;
    }

    .extraInfoText {
        font-size: 13px;
    }

.homePageInfo {
    align-items: center;
    padding: 25px 25px 0 25px;
    justify-content: center;
    background: white;
    
    padding-bottom: unset;
}

.homePageInfoContainer {
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    height: 100%
}
@media (max-width: 1400px) {
    body {
        grid-template-rows: auto auto auto;
    }
    .hideMobile{
        display: none; 
    }
    nav {
        height: fit-content;
        grid-column: 2;
        grid-area: unset;
        padding-top:6px;
    }
    .logo {
        align-self: unset;
        height: fit-content;
        grid-column: 1;
        padding-top:20px;
        grid-area:unset;
    }
    header {
        grid-template-areas: unset;
        grid-template-columns: min-content 1fr;
            
        background-position-y: -158px;
        height: 160px;
    }
    .faqGrid {
        grid-template-columns: 50px 1fr 50px !important;
    }
    .myimage {
        display:none;
    }
    .contentGrid {
        grid-template-columns: 100%;
    }
    .textbox {
        padding-top:unset;
        grid-column: unset !important;
        margin: unset;
        box-shadow: unset;
    }
    .CF1Link {
        grid-column: unset !important;
    }
    .homePageInfoContainer {
        grid-column: unset !important;
    }
    .HomePageImageInfoGrid {
        grid-column: unset !important;
    }
    .homePageImage {
        
    }
}
@media(max-width: 1001px) {
    .HomePageImageInfoGrid {
        grid-column: unset !important;
        grid-template-columns: 1fr;
    }
    .homePageImage {
        display:none;
    }
    .homePageInfoContainer {
        width: 100%;
        padding: 50px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
    .homePageInfo {
        padding:unset;
    }

}

    /* FAQ Section*/
    .collapseQ {
        grid-column: 2;
        font-weight: normal;
        background-color: #1f2225;
        color: white;
        cursor: pointer;
        padding: 18px;
        border-color: white;
        border: 1px solid #767676;
        color: #fff;
        text-align: left;
        outline: none;
        font-size: 15px;
        width: 100%;
        transition: border-radius 0.2s ease-out;
        line-height: 1.2;
    }

    .faqPageCollapseQ {
        font-weight: normal;
        background-color: unset;
        cursor: pointer;
        padding: 18px;
        border: 0px;
        text-align: left;
        outline: none;
        font-size: 17px;
        width: 100%;
        transition: border-radius 0.2s ease-out;
        line-height: 1.2;
    }

    .faqPageCollapseQOpened {
        color: red;
        border: 0px;
        font-weight: bold;
    }

    .faqPageCollapseA {
        font-weight: normal;
        font-size: 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        text-align: left;
        width: 100%;
        border-bottom: 5px solid #e6e6e6;
        
    }

.faqPageAnswerText {
    margin-left: 100px;
    margin-right: 100px;
    white-space: pre-wrap;
}
@media(max-width: 400px) {
    .faqPageAnswerText {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding: 20px;
        white-space: pre-wrap;
    }
    
}

    .arrowDown {
        text-align: right;
    }

    .faqPageCollapseQ:hover {
        color: red;
    }

    .collapseQ:hover {
        background-color: #1f2225;
        border-color: red;
    }

    .collapseQClosed {
    }

    .collapseA {
        margin-bottom: 10px;
        grid-column: 2;
        font-weight: normal;
        color: white;
        font-size: 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #da291c;
        text-align: left;
        width: 100%;
    }

    .faqGrid {
        display: grid;
        grid-template-columns: 15% 70% 15%;
        justify-items: center;
    }

    .faqPageGrid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*background-color: #1f2225; */

        width: 80vw;
    }

    .faqContainer {
        background-color: #1f2225;
        width: 100%;
    }

    .faqPageContainer {
        background-color: #1f2225;
        max-width: 100vw;
        min-width: 100%;
        background: white;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin-bottom: 25px;
    }

    .faqPageLink {
        color: white !important;
        background-color: #1f2225;
        padding-top: 50px;
    }

    .answerText {
        padding-left: 18px;
        padding-right: 18px;
        white-space: pre-wrap;
    }

.faqTitle {
    grid-column: 2;
    color: white;
    text-align: center;
    
    font-size: 3rem;
    line-height: 1;
    text-transform: uppercase;
    font-family: "Montserrat",sans-serif;
    font-weight: 900;
    padding: 50px 0 50px 0px;
}

    .faqPageTitle {
        color: black;
    }

    .faqLink {
        grid-column: 2;
        background-color: #da291c;
        line-height: 1.2;
        padding: 15px 20px;
        color: #fff;
        display: block;
        text-decoration: none;
        transition: border-color .3s;
        width: fit-content;
    }

    .faqLink:hover {
        background-color: red;
    }

    .faqPageLink {
        margin-top: 40px;
    }

    .redWord {
        color: red !important;
    }
.disabledCheckbox {
    opacity: 0.2;
    cursor: not-allowed;
}