/*FORMS*/
main form{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: flex-start;
}


/*form rows > input boxes*/



main form > div{
    margin-top: 15px;
}

/*FORMROWS*/
main div.formRow{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;

    margin: 25px 0 7px;
}

main div.formRow.multi{
    gap: 5px;
}
main div.formRow.center{
    justify-content: center;
}

@media screen and (max-width: 800px) {
    main div.formRow {

        margin: 11px 0 5px;
    }
}

main div.formRow h1{
    margin: 0;
    font-size: 65px;
    text-align: center;
    /*margin: 0 auto; !* TODO: Make this actually center with row extra items *!*/
}
@media screen and (max-width: 800px) {
    main div.formRow h1 {
        font-size: 45px;
    }
}
main h2{
    font-size: 35px;
    margin: 0 0 10px;
}
main h3{
    font-size: 22px;
    margin: 0 0 10px;
}
main p{
    font-size: 17px;
    margin: 10px 6px 0 0;
}
main iframe {
    width: 100%;
    height: auto;
}


main div.formRow.small{
    margin-top: 2px;
}
main div.formRow.small *{
    font-size: 15px;
}
main div.formRow.lowpad{
    margin: 10px !important;
}
main div.formRow.lowpadTop{
    margin-top: 10px !important;
}
main div.formRow.lowpadBottom{
    margin-bottom: 10px;
}
main div.formRow.nopad{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
main div.formRow.nopadBottom{
    margin-bottom: 0 !important;
}
main div.formRow.nopadTop{
    margin-top: 0 !important;
}

main div.formRow.column{
    flex-direction: column;
    align-items: flex-start;
}



main div.formRow div.filepond{
    margin: 0;
    width: 45%;
}
@media screen and (max-width: 800px) {
    main div.formRow div.filepond{
        width: 80%;

    }
}



/*FORM INPUTS*/
div.formInput, div.formCheckBox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0;
}

div.formInput.nopad{
    margin: 0 !important;
}
div.formInput.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div.formInput b{
    color: var(--primary-color);
}
div.formInput b.warning{
    color: var(--error-color);
}

form div.formTextBox input, form div.formTextBox textarea, form div.formTextBox select, form .formButton{

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 100%;
    /*	padding: 0;*/
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    font-size: 20px;

    outline: 0;
    border: 1px solid var(--primary-color-light);
    border-radius: var(--item-border-radius-small);

    display: block;
    padding: 15px;

    background-color: var(--body-color-light);
    color: var(--text-color-grey);

    transition: color 0.2s ease;

}


main.form div.formTextBox input:focus, main.form div.formTextBox textarea:focus, main.form div.formTextBox select:focus {
    color: var(--text-color);
}

main.form div.formTextBox {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    padding: 2px;
}

main.form div.formTextBox textarea{
    resize: vertical;
    height: 125px;
    display: block;
}
/*WIDE INPUT*/
div.formInput.wide{
    flex-direction: row;
    align-items: center;
}
div.formInput.wide.float{
    justify-content: space-between;
}

main.form div.formInput.wide div.formTextBox, main.form div.formInput.wide .formButton{
    width: 35%;
}


/*Form Buttons*/
main .formButton{
    text-transform: uppercase;
    background: var(--primary-color);
    background-color: var(--primary-color);
    color: white;
    transition: 0.15s ease-in-out background, 0.15s ease-in-out background-color, 0.15s ease-in-out color;
    cursor: pointer;
    text-align: center;

    width: calc(100%);
    margin-top: 25px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;

}
main.form .formButton.nopad{
    margin-top: 0;
}

main .formButton:hover, main .formButton:active, main .formButton:focus {
    background: var(--primary-color-dark);
    color: white;
}
main .formButton.warning{
    background: var(--body-color-light);
    color: var(--error-color);
    border: 0;
}
main .formButton.success{
    background: var(--body-color-light);
    color: var(--success-color);
    border: 0;
}
main .formButton.skeleton{
    background: var(--body-color-light);
    color: var(--primary-color);
    border: 0;
}
main .formButton.skeleton:hover, main .formButton.skeleton:active, main .formButton.skeleton:focus {
    background: var(--primary-color);
    color: var(--text-color);
}
main .formButton.warning:hover,  main .formButton.warning:active,  main .formButton.warning:focus {
    background: var(--primary-color-dark);
    color: var(--text-color);
}
main .formButton.warning:hover,  main .formButton.warning:active,  main .formButton.warning:focus {
    background: var(--error-color);
    color: var(--text-color);
    border: 0;
}
main .formButton.success:hover,  main .formButton.success:active,  main .formButton.success:focus {
    background: var(--success-color);
    color: var(--text-color);
    border: 0;
}

main .formButton.disabled{
    background: var(--body-color-light);
    color: var(--text-color-grey);
    border: 0;
    cursor: not-allowed;
    pointer-events: none;
}

/*FILEPOND*/

div.formRow.filepond{
    min-height: 270px;
}

.filepond--panel-root {
    background-color: var(--body-color-light);
    border: 1px solid var(--primary-color-light);
    border-radius: var(--item-border-radius-small);
}

.filepond--drop-label {
    color: var(--text-color);
}

.filepond--credits {
    color: var(--text-color-grey);
    pointer-events: none;
}

.filepond--image-preview-overlay-idle {
    /*mix-blend-mode: ;*/
    color: rgba(0, 0, 0, 0.9);
}

/*!CHOICES!*/

div.choices {

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;

    font-size: 20px;
    outline: 0;
    border: 0;
    padding: 0;
    z-index: 10;
}

div.choices__inner{
    border: 1px solid grey !important;
    border-radius: var(--item-border-radius-small) !important;
    background-color: white;
    padding: 12px;
    padding-bottom: calc(12px - 3.75px);
}

div.choices input{
    background-color: white !important;
}

div.choices__item {
    border-radius: var(--item-border-radius-small) !important;
    font-size: 15px !important;
}
.choices__list--multiple .choices__item{
    background-color: var(--primary-color);
    border: 1px var(--primary-color-light);
}
.choices__list--multiple .choices__item button{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-light) !important;
}

/*!*!CHECKBOX*!*/

.checkBoxCont {
    display: flex;
    flex-direction: row;
    align-content: space-between;
    align-items: center;
    margin: 10px 0 10px 15px;
}

.checkBoxCont input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;

    background-color: rgba(0,0,0,0);

    margin: 0;

    font: inherit;
    color: currentColor;
    width: 24px;
    height: 24px;
    border: 0.15em solid currentColor;
    border-radius: 5px;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;

    cursor: pointer;
}

.checkBoxCont input[type="checkbox"]::before {
    content: "";
    width: 16px;
    height: 16px;
    /*transform: scale(0);*/
    /*transition: 120ms transform ease-in-out;*/
    transition: 100ms box-shadow ease;
    box-shadow: inset 1em 1em rgba(0,0,0,0);

    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkBoxCont input[type="checkbox"]:checked::before {
    /*transform: scale(1);*/
    box-shadow: inset 1em 1em var(--primary-color);
}

label.disclaimer{
    font-size: 15px;
}

/*div.formInput.checkBox.wide{*/
/*    flex-direction: row;*/
/*    flex-grow: 1;*/

/*    gap: 15px;*/

/*    align-items: center;*/
/*}*/

/*div.formInput.checkBox.wide.float {*/
/*    justify-content: space-between;*/
/*}*/

/*.checkBoxCont {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    width: 60px;*/
/*    height: 34px;*/
/*    margin: 10px 0 10px;*/
/*}*/

/*.checkBoxCont input {*/
/*    opacity: 0;*/
/*    width: 0;*/
/*    height: 0;*/
/*}*/

/*.checkBoxSlide {*/
/*    position: absolute;*/
/*    cursor: pointer;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background-color: var(--body-color-dark);*/
/*    -webkit-transition: .4s;*/
/*    transition: .4s;*/
/*    border-radius: 34px;*/

/*    box-sizing: content-box;*/
/*    border: 1px solid var(--primary-color);*/
/*}*/
/*.checkBox.warning .checkBoxSlide {*/
/*    border: 1px solid var(--error-color);*/
/*}*/

/*.checkBoxSlide:before {*/
/*    position: absolute;*/
/*    content: "";*/
/*    height: 26px;*/
/*    border-radius: 50%;*/
/*    width: 26px;*/
/*    left: 4px;*/
/*    bottom: 3px;*/
/*    background-color: white;*/
/*    -webkit-transition: .2s ease;*/
/*    transition: .2s ease;*/
/*}*/


/*input:checked + .checkBoxSlide {*/
/*    background-color: var(--primary-color);*/
/*}*/

/*input:focus + .checkBoxSlide {*/
/*    box-shadow: 0 0 1px var(--primary-color);*/
/*}*/

/*.checkBox.warning input:checked + .checkBoxSlide {*/
/*    background-color: var(--error-color);*/
/*}*/

/*.checkBox.warning input:focus + .checkBoxSlide {*/
/*    box-shadow: 0 0 1px var(--error-color);*/
/*}*/

/*input:checked + .checkBoxSlide:before {*/
/*    -webkit-transform: translateX(24px);*/
/*    -ms-transform: translateX(24px);*/
/*    transform: translateX(24px);*/
/*}*/

/*input:disabled + .checkBoxSlide {*/
/*    background-color: var(--body-color-superlight);*/
/*    cursor: not-allowed;*/
/*    pointer-events: none;*/
/*}*/