body {

}@font-face {
    font-family: AvenirLTPro-Roman;
    src: url('fonts/AvenirLTPro-Roman.woff') format('woff'),
    url('fonts/AvenirLTPro-Roman.woff2') format('woff2');
  }
  
  @font-face {
    font-family: AvenirLTPro-Black;
    src: url('fonts/AvenirLTPro-Black.woff') format('woff'),
    url('fonts/AvenirLTPro-Black.woff2') format('woff2');
  }

/*input text, body, and checkmark bg color and check share the same color variable*/
/*this value would have to be updated to change the input colors*/
:root {
    --input-text-color: #000000;
    --submit-button-text-color: #ffffff;
  --submit-button-bg-color: #e60021;
 --submit-button-hover-state-bg-color: #b5001a;
 --submit-button-hover-state-text-color: #ffffff;
 --submit-button-hover-state-opacity: 1;
  }


/*replaced 0046b with 00324f per several headings in auto site as well as zip code field label*/
body {
    font-family: 'AvenirLTPro-Roman', Arial, Helvetica, sans-serif;
    color: #000000;
    margin: 0;
    background-color:  var(--input-text-color);
}

h1{
    color: #000000;
    font-family: 'AvenirLTPro-Black', Arial, Helvetica, sans-serif;
}

a{
text-decoration: underline;
}
/* unvisited link */
a:link {
    color: #0a7bbc;
}

/* visited link */
a:visited {
    color: #0a7bbc;
}

/* mouse over link */
a:hover {
    color: #0a7bbc;
}

/* selected link */
a:active {
    color: #0a7bbc;
}

/*input{

font: 400 14px Arial;
}*/

/*STYLES FOR INPUT FIELDS */
/*Note: 3 values need to be updated for spaces in between field rows*/
input,
select {
    background-color: #A4A4A4;
}


input[type=text],
input[type=email] {
    padding: 9px 9px;
    margin: 9px 0;
    width: 100%;
    outline: 0;
    color: var(--input-text-color);
  /*  border: none; 
    border-width: 0; */
 border: 2px solid #000000;
   /* box-shadow: none; */
    border-radius: 0px;
    font-family: 'AvenirLTPro-Regular', Arial, Helvetica, sans-serif;
    font-size: 18px;
}

/*remove the margin bottom for the last element*/
/* input[type=text]:last-of-type, input[type=email]:last-of-type {
margin-bottom: 0;
}*/

td.checkbox-padding {
    padding: 9px 0;
}


::placeholder {
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;
    font-size:18px;
    font-weight:normal;
    color: var(--input-text-color);
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;
    font-size: 18px;
    color: var(--input-text-color);
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;
    font-size: 18px;
    color: var(--input-text-color);
}




select {
    width: 100%;
    /*updated select margin value from 6 to 8 to match inputs*/
    /*select looks weird and needed 1 px*/
    margin: 9px 0;
    padding: 11px 9px;
    outline: 0;
   /* border: none; 
    border-width: 0; */
 border: 2px solid #ffffff;
    box-shadow: none;
    vertical-align: baseline;
    font-weight: bold;
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;
    font-size: 18px;
    border-radius:0px;

}


select > option {
    color: var(--input-text-color);
    font-weight:bold;
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;

  }
  select option[value=""] {
    color: var(--input-text-color);
  }
  select[placeholder="State"] {
    color: var(--input-text-color);
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;
  }

/*to remove margin bottom from last item in list*/
/*select:last-of-type{
margin-bottom:0;
}*/
/*styles for checkbox*/
input[type=checkbox] {
    display: none;
}

/*override bootstrap*/

label {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: 14px;
}

/*override bootstrap*/

/*new checkmark*/
/*CHECKBOX AND CHECKMARK*/
input[type=checkbox]{
    display:none;
}

.checkboxContainer{
    display:inline-block;
    position:relative;
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*space for new styles button*/
    padding-left: 45px;
    text-align:center;

}


.checkboxContainer .checkmark{
    position: absolute;
    top: 0;
    left: 0; 
    height: 30px;
    width: 30px;
    background-color:  #A4A4A4;
    border: 2px solid #000000;
    border-radius: 0;
}


.checkboxContainer:hover .checkmark{
        background-color:#A4A4A4;
    }

    .checkboxContainer input:checked ~ .checkmark {
        background-color: #172955;
    }

/*This draws the checkmark*/
.checkboxContainer input:checked ~ .checkmark:after{
    content:"";
    width: 12px;
    height: 20px;
    border: solid  #DF0C2D;
    border-width: 0 6px 6px 0;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.checkboxContainer p{
    font-size:16px;
    vertical-align:middle;
}
/*CHECKBOX AND CHECKMARK*/

input[type=radio] {
    display: none;
}


label[for=amazon] span,
label[for=donate] span {
    display: inline-block;
    background: url("https://www.sc.pages01.net/lp/1689/222568/lcfs-radio-deselected.png");
    background-size: 20px;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}


input[type=radio]:checked+label span {
    background-image: url(https://www.sc.pages01.net/lp/1689/222568/lcfs-radio-selected_1.png);
    background-size: 20px;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

input[type=radio]:checked {
    background-image: url(https://www.sc.pages01.net/lp/1689/222568/lcfs-radio-deselected.png);
}

/*STYLES FOR INPUT FIELDS */



/*override bootstrap accordion*/
.btn-link {
    text-decoration: none;
    font-size: 20px;
    text-align: left;
    color: #000000;
    text-align: center;
    font-family: 'AvenirLTPro-Roman', Arial, Helvetica, sans-serif;

}


.mb-0 {
    text-align: center;
    font-family: 'AvenirLTPro-Roman', Arial, Helvetica, sans-serif;
 

}

.card-body {
    text-align: left;
    font-size: 14px;
    line-height: 24px;
}

.card-header {
    border-bottom-width: 3px;
    border-bottom-color: #000000;
}

/*override bootstrap accordion*/
/*override bootstrap columns*/
.col-md-2,
.col-md-5 {
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: 'AvenirLTPro-Roman', Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: left;
    font-size: 14px;
    line-height: 24px;
}

/*override bootstrap columns*/
/*removed spacing from all p elements*/
p {
    margin: 0;
    padding: 0;
    /*this p controls all p element text color*/
    color: #000000;
    font-family: 'AvenirLTPro-Roman', Arial, Helvetica, sans-serif;

}

ol {
    margin: 0 0 0 10px;
    padding: 0;
}

/*chart styles*/
td.chart,
th.chart {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
    font-family: 'AvenirLTPro-Roman', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
}


 .error{
color: #ff4040 !important;
border: #ff4040 solid .2rem !important;

}

@media (max-width: 992px) {
    .container {
        max-width: 100%;
    }

    .col-md-2 {
        position: relative;
        width: 100% !important;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-md-2 {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    .col-md-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }

}

/*these media queries are to clean up labels in different screen sizes: when they start to look bad*/
@media screen and (max-width: 1174px) and (min-width: 849px) {
    td.form-label1 {
        height: 108px !important;
    }

    td.form-label2 {
        height: 108px !important;
    }
}

@media screen and (max-width: 868px) and (min-width: 480px) {
    
    
    td.form-label1 {
        height: 132px !important;
    }

    td.form-label2 {
        height: 132px !important;
    }
}

@media screen and (max-width: 1024px) {
  
    td.wrapper-padding {
        padding: 30px 15px !important;
    }

    table.wrapper {
        width: 90% !important;
    }
    
}

@media screen and (max-width: 768px) {
  
    img.scale{
        width: 60% !important;
    }
}
@media screen and (max-width: 480px) {
    img.scale{
        width: 82% !important;
    }
    /*chart styles*/
    .show-div {
        display: block !important;
    }

    .hide-div {
        display: none !important;
    }

    /*override bootstrap column*/

    /*this fixes the IE problem*/

    .row {
        display: block !important;
    }

    /*this fixes the IE problem*/

    .w100pc {
        width: 100% !important;
        min-width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .questions1 {
        width: 100% !important;
        min-width: 100% !important;
        padding-top: 45px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;

    }

    .questions2 {
        width: 100% !important;
        min-width: 100% !important;
        /*removed this style
padding-top:50px !important;
padding-right:10px !important;
padding-left:10px !important;
*/

    }

    .p0 {
        padding-top: 0 !important;
        padding-bottom: 45px !important;
    }



    .mobilesubmit {
        padding-left: 0px !important;
        text-align: center;
    }

    .submitbutton {
        width: 100% !important;
        min-width: 100% !important;
        /*removed this style
padding-top: 30px;*/
        /*added this style*/
        padding-bottom: 50px !important;
    }

    .pt20 {
        padding-top: 30px;
    }

    .pl0 {

        padding-left: 0 !important;
    }

    .pb0 {
        padding-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .w50pc {
        width: 50% !important;
        min-width: 50% !important;
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .w33pc {
        width: 33.33% !important;
        min-width: 33.33% !important;
        /*removed this from original template
padding-left:10px !important;
padding-top: 20px !important;
*/
        padding-right: 10px !important;
    }

    .w66pc {
        width: 66.66% !important;
        min-width: 66.66% !important;
        /*removed this from original template
padding-right:10px !important;
padding-top: 20px !important;
*/
        padding-left: 10px !important;
    }


    td.form-label1 {
        height: 84px !important;
    }

    td.form-label2 {
        height: 84px !important;
    }

    td.wrapper-padding {
        padding: 15px 15px 65px 15px !important;
    }

    table.wrapper {
        width: 90% !important;
    }

    td.pr-0 {
        padding-right: 0px !important;
    }

    td.pl-0 {
        padding-left: 0px !important;
    }
}

/*added this breakpoint for form labels*/
/*chart styles*/

.added-required::after {
    content: " *Required";
    color: #ff4040;
}



.button {
    display: inline-block;
    text-align: center;
    font-family: 'AcuraBespokeRegular,Avenir,Arial,Helvetica,sans-serif;
    font-weight: normal;
    background-color: var(--submit-button-bg-color);
    border: none;
    border-radius: 10px;
    font-size: 24px;
    color: var(--submit-button-text-color);
    line-height: 1.1;
    padding: 10px 100px;
    transition: fill .3s,color .3s,background-color .3s, opacity .3s;
}

a .button:link {
    color: var(--submit-button-text-color);
    text-decoration: none;

}

.button:hover {
    background-color:var(--submit-button-hover-state-bg-color);
    color:var(--submit-button-hover-state-text-color);
    text-decoration:none;
    opacity: var(--submit-button-hover-state-opacity);
    
    }

.button:active {
    background-color:var(--button-text-color);
    color: #ccc;
    text-decoration: none;

}

/*override SFMC styles*/
.layout-canvas-g > .section { margin: 0px 0px; }

/*oveerride SFMC styles*/