/*! - forms.css */
/*.page.forms-page {}*/

/* form wrapper
======================================================================================================================================================================================================== */
.form-wrapper {position: relative; display: block; float: left; width: 100%; height: auto; margin: 5rem 0 0 0; padding: 0;}

/* specific form wrapper
======================================================================================================================================================================================================== */
/*.form-wrapper.contact-form {}*/

/* fieldset
======================================================================================================================================================================================================== */
.form-wrapper fieldset
{
    position: relative; display: block; float: left; width: 100%; height: auto; margin: 0; padding: 0;
    border-width: 0; border-style: solid; border-color: rgba(0,0,0,0.1);
}

/* legend
======================================================================================================================================================================================================== */
.form-wrapper fieldset legend
{
    position: relative; display: block; float: left; width: 100%; height: auto; margin: 0; padding: 0 0 1rem 0;
    font-family: "Oswald", sans-serif; font-weight: 400; font-size: 2.6rem; line-height: 3.6rem;
    border-width: 0 0 0.2rem 0; border-style: dotted; border-color: rgba(0,0,0,0.1);
}

/* form row
======================================================================================================================================================================================================== */
.form-wrapper .f-row {position: relative; display: block; float: left; width: calc(100% + 2rem); height: auto; margin: 0 0 0 -1rem; padding: 0;}
/* form row margins */
/* top */
.form-wrapper .f-row.m-t-5p {margin-top: 0.5rem;}
.form-wrapper .f-row.m-t-10p {margin-top: 1rem;}
.form-wrapper .f-row.m-t-15p {margin-top: 1.5rem;}
.form-wrapper .f-row.m-t-20p {margin-top: 2rem;}
.form-wrapper .f-row.m-t-30p {margin-top: 3rem;}
.form-wrapper .f-row.m-t-50p {margin-top: 5rem;}
/* bottom */
.form-wrapper .f-row.m-b-5p {margin-bottom: 0.5rem;}
.form-wrapper .f-row.m-b-10p {margin-bottom: 1rem;}
.form-wrapper .f-row.m-b-15p {margin-bottom: 1.5rem;}
.form-wrapper .f-row.m-b-20p {margin-bottom: 2rem;}
.form-wrapper .f-row.m-b-30p {margin-bottom: 3rem;}
.form-wrapper .f-row.m-b-50p {margin-bottom: 5rem;}

/* form column
======================================================================================================================================================================================================== */
.form-wrapper .f-col {position: relative; display: block; float: left; height: auto; min-height: 0.1rem; margin: 0 0 3rem 0; padding: 0 1rem;}
/* form column paddings */
/* no padding */
.form-wrapper .f-col.p-0 {padding: 0;}
/* no margin */
.form-wrapper .f-col.m-0 {margin: 0;}
/* top */
.form-wrapper .f-col.p-t-5p {padding-top: 0.5rem;}
.form-wrapper .f-col.p-t-10p {padding-top: 1rem;}
.form-wrapper .f-col.p-t-15p {padding-top: 1.5rem;}
.form-wrapper .f-col.p-t-20p {padding-top: 2rem;}
.form-wrapper .f-col.p-t-30p {padding-top: 3rem;}
.form-wrapper .f-col.p-t-50p {padding-top: 5rem;}
/* right */
.form-wrapper .f-col.p-r-5p {padding-right: 0.5rem;}
.form-wrapper .f-col.p-r-10p {padding-right: 1rem;}
.form-wrapper .f-col.p-r-15p {padding-right: 1.5rem;}
.form-wrapper .f-col.p-r-20p {padding-right: 2rem;}
.form-wrapper .f-col.p-r-30p {padding-right: 3rem;}
.form-wrapper .f-col.p-r-50p {padding-right: 5rem;}
/* bottom */
.form-wrapper .f-col.p-b-5p {padding-bottom: 0.5rem;}
.form-wrapper .f-col.p-b-10p {padding-bottom: 1rem;}
.form-wrapper .f-col.p-b-15p {padding-bottom: 1.5rem;}
.form-wrapper .f-col.p-b-20p {padding-bottom: 2rem;}
.form-wrapper .f-col.p-b-30p {padding-bottom: 3rem;}
.form-wrapper .f-col.p-b-50p {padding-bottom: 5rem;}
/* left */
.form-wrapper .f-col.p-l-5p {padding-left: 0.5rem;}
.form-wrapper .f-col.p-l-10p {padding-left: 1rem;}
.form-wrapper .f-col.p-l-15p {padding-left: 1.5rem;}
.form-wrapper .f-col.p-l-20p {padding-left: 2rem;}
.form-wrapper .f-col.p-l-30p {padding-left: 3rem;}
.form-wrapper .f-col.p-l-50p {padding-left: 5rem;}
/* all */
.form-wrapper .f-col.p-all-5p {padding: 0.5rem;}
.form-wrapper .f-col.p-all-10p {padding: 1rem;}
.form-wrapper .f-col.p-all-15p {padding: 1.5rem;}
.form-wrapper .f-col.p-all-20p {padding: 2rem;}
.form-wrapper .f-col.p-all-30p {padding: 3rem;}
.form-wrapper .f-col.p-all-50p {padding: 5rem;}

/* hidden columns */
.form-wrapper .f-col[data-visible="false"] {display: none;}
.form-wrapper .f-col[data-visible="true"] {display: block;}

/* form column widths
======================================================================================================================================================================================================== */
/* extra large */
@media only screen and (min-width: 1281px)
{
    .f-xs-00 {width: 0%;} .f-xs-01 {width: 8.3333%;} .f-xs-02 {width: 16.6666%;} .f-xs-03 {width: 25%;} .f-xs-04 {width: 33.3333%;} .f-xs-05 {width: 41.6666%;} .f-xs-06 {width: 50%;} .f-xs-07 {width: 58.3333%;} .f-xs-08 {width: 66.6666%;} .f-xs-09 {width: 75%;} .f-xs-10 {width: 83.3333%;} .f-xs-11 {width: 91.6666%;} .f-xs-12 {width: 100%;}
    .f-sm-00 {width: 0%;} .f-sm-01 {width: 8.3333%;} .f-sm-02 {width: 16.6666%;} .f-sm-03 {width: 25%;} .f-sm-04 {width: 33.3333%;} .f-sm-05 {width: 41.6666%;} .f-sm-06 {width: 50%;} .f-sm-07 {width: 58.3333%;} .f-sm-08 {width: 66.6666%;} .f-sm-09 {width: 75%;} .f-sm-10 {width: 83.3333%;} .f-sm-11 {width: 91.6666%;} .f-sm-12 {width: 100%;}
    .f-md-00 {width: 0%;} .f-md-01 {width: 8.3333%;} .f-md-02 {width: 16.6666%;} .f-md-03 {width: 25%;} .f-md-04 {width: 33.3333%;} .f-md-05 {width: 41.6666%;} .f-md-06 {width: 50%;} .f-md-07 {width: 58.3333%;} .f-md-08 {width: 66.6666%;} .f-md-09 {width: 75%;} .f-md-10 {width: 83.3333%;} .f-md-11 {width: 91.6666%;} .f-md-12 {width: 100%;}
    .f-lg-00 {width: 0%;} .f-lg-01 {width: 8.3333%;} .f-lg-02 {width: 16.6666%;} .f-lg-03 {width: 25%;} .f-lg-04 {width: 33.3333%;} .f-lg-05 {width: 41.6666%;} .f-lg-06 {width: 50%;} .f-lg-07 {width: 58.3333%;} .f-lg-08 {width: 66.6666%;} .f-lg-09 {width: 75%;} .f-lg-10 {width: 83.3333%;} .f-lg-11 {width: 91.6666%;} .f-lg-12 {width: 100%;}
    .f-xl-00 {width: 0%;} .f-xl-01 {width: 8.3333%;} .f-xl-02 {width: 16.6666%;} .f-xl-03 {width: 25%;} .f-xl-04 {width: 33.3333%;} .f-xl-05 {width: 41.6666%;} .f-xl-06 {width: 50%;} .f-xl-07 {width: 58.3333%;} .f-xl-08 {width: 66.6666%;} .f-xl-09 {width: 75%;} .f-xl-10 {width: 83.3333%;} .f-xl-11 {width: 91.6666%;} .f-xl-12 {width: 100%;}
}
/* large */
@media only screen and (max-width: 1280px) and (min-width: 1025px)
{
    .f-xs-00 {width: 0%;} .f-xs-01 {width: 8.3333%;} .f-xs-02 {width: 16.6666%;} .f-xs-03 {width: 25%;} .f-xs-04 {width: 33.3333%;} .f-xs-05 {width: 41.6666%;} .f-xs-06 {width: 50%;} .f-xs-07 {width: 58.3333%;} .f-xs-08 {width: 66.6666%;} .f-xs-09 {width: 75%;} .f-xs-10 {width: 83.3333%;} .f-xs-11 {width: 91.6666%;} .f-xs-12 {width: 100%;}
    .f-sm-00 {width: 0%;} .f-sm-01 {width: 8.3333%;} .f-sm-02 {width: 16.6666%;} .f-sm-03 {width: 25%;} .f-sm-04 {width: 33.3333%;} .f-sm-05 {width: 41.6666%;} .f-sm-06 {width: 50%;} .f-sm-07 {width: 58.3333%;} .f-sm-08 {width: 66.6666%;} .f-sm-09 {width: 75%;} .f-sm-10 {width: 83.3333%;} .f-sm-11 {width: 91.6666%;} .f-sm-12 {width: 100%;}
    .f-md-00 {width: 0%;} .f-md-01 {width: 8.3333%;} .f-md-02 {width: 16.6666%;} .f-md-03 {width: 25%;} .f-md-04 {width: 33.3333%;} .f-md-05 {width: 41.6666%;} .f-md-06 {width: 50%;} .f-md-07 {width: 58.3333%;} .f-md-08 {width: 66.6666%;} .f-md-09 {width: 75%;} .f-md-10 {width: 83.3333%;} .f-md-11 {width: 91.6666%;} .f-md-12 {width: 100%;}
    .f-xl-00 {width: 0%;} .f-xl-01 {width: 8.3333%;} .f-xl-02 {width: 16.6666%;} .f-xl-03 {width: 25%;} .f-xl-04 {width: 33.3333%;} .f-xl-05 {width: 41.6666%;} .f-xl-06 {width: 50%;} .f-xl-07 {width: 58.3333%;} .f-xl-08 {width: 66.6666%;} .f-xl-09 {width: 75%;} .f-xl-10 {width: 83.3333%;} .f-xl-11 {width: 91.6666%;} .f-xl-12 {width: 100%;}
    .f-lg-00 {width: 0%;} .f-lg-01 {width: 8.3333%;} .f-lg-02 {width: 16.6666%;} .f-lg-03 {width: 25%;} .f-lg-04 {width: 33.3333%;} .f-lg-05 {width: 41.6666%;} .f-lg-06 {width: 50%;} .f-lg-07 {width: 58.3333%;} .f-lg-08 {width: 66.6666%;} .f-lg-09 {width: 75%;} .f-lg-10 {width: 83.3333%;} .f-lg-11 {width: 91.6666%;} .f-lg-12 {width: 100%;}
}
/* medium */
@media only screen and (max-width: 1024px) and (min-width: 769px)
{
    .f-xs-00 {width: 0%;} .f-xs-01 {width: 8.3333%;} .f-xs-02 {width: 16.6666%;} .f-xs-03 {width: 25%;} .f-xs-04 {width: 33.3333%;} .f-xs-05 {width: 41.6666%;} .f-xs-06 {width: 50%;} .f-xs-07 {width: 58.3333%;} .f-xs-08 {width: 66.6666%;} .f-xs-09 {width: 75%;} .f-xs-10 {width: 83.3333%;} .f-xs-11 {width: 91.6666%;} .f-xs-12 {width: 100%;}
    .f-sm-00 {width: 0%;} .f-sm-01 {width: 8.3333%;} .f-sm-02 {width: 16.6666%;} .f-sm-03 {width: 25%;} .f-sm-04 {width: 33.3333%;} .f-sm-05 {width: 41.6666%;} .f-sm-06 {width: 50%;} .f-sm-07 {width: 58.3333%;} .f-sm-08 {width: 66.6666%;} .f-sm-09 {width: 75%;} .f-sm-10 {width: 83.3333%;} .f-sm-11 {width: 91.6666%;} .f-sm-12 {width: 100%;}
    .f-xl-00 {width: 0%;} .f-xl-01 {width: 8.3333%;} .f-xl-02 {width: 16.6666%;} .f-xl-03 {width: 25%;} .f-xl-04 {width: 33.3333%;} .f-xl-05 {width: 41.6666%;} .f-xl-06 {width: 50%;} .f-xl-07 {width: 58.3333%;} .f-xl-08 {width: 66.6666%;} .f-xl-09 {width: 75%;} .f-xl-10 {width: 83.3333%;} .f-xl-11 {width: 91.6666%;} .f-xl-12 {width: 100%;}
    .f-lg-00 {width: 0%;} .f-lg-01 {width: 8.3333%;} .f-lg-02 {width: 16.6666%;} .f-lg-03 {width: 25%;} .f-lg-04 {width: 33.3333%;} .f-lg-05 {width: 41.6666%;} .f-lg-06 {width: 50%;} .f-lg-07 {width: 58.3333%;} .f-lg-08 {width: 66.6666%;} .f-lg-09 {width: 75%;} .f-lg-10 {width: 83.3333%;} .f-lg-11 {width: 91.6666%;} .f-lg-12 {width: 100%;}
    .f-md-00 {width: 0%;} .f-md-01 {width: 8.3333%;} .f-md-02 {width: 16.6666%;} .f-md-03 {width: 25%;} .f-md-04 {width: 33.3333%;} .f-md-05 {width: 41.6666%;} .f-md-06 {width: 50%;} .f-md-07 {width: 58.3333%;} .f-md-08 {width: 66.6666%;} .f-md-09 {width: 75%;} .f-md-10 {width: 83.3333%;} .f-md-11 {width: 91.6666%;} .f-md-12 {width: 100%;}
}
/* small */
@media only screen and (max-width: 768px) and (min-width: 481px)
{
    .f-xs-00 {width: 0%;} .f-xs-01 {width: 8.3333%;} .f-xs-02 {width: 16.6666%;} .f-xs-03 {width: 25%;} .f-xs-04 {width: 33.3333%;} .f-xs-05 {width: 41.6666%;} .f-xs-06 {width: 50%;} .f-xs-07 {width: 58.3333%;} .f-xs-08 {width: 66.6666%;} .f-xs-09 {width: 75%;} .f-xs-10 {width: 83.3333%;} .f-xs-11 {width: 91.6666%;} .f-xs-12 {width: 100%;}
    .f-xl-00 {width: 0%;} .f-xl-01 {width: 8.3333%;} .f-xl-02 {width: 16.6666%;} .f-xl-03 {width: 25%;} .f-xl-04 {width: 33.3333%;} .f-xl-05 {width: 41.6666%;} .f-xl-06 {width: 50%;} .f-xl-07 {width: 58.3333%;} .f-xl-08 {width: 66.6666%;} .f-xl-09 {width: 75%;} .f-xl-10 {width: 83.3333%;} .f-xl-11 {width: 91.6666%;} .f-xl-12 {width: 100%;}
    .f-lg-00 {width: 0%;} .f-lg-01 {width: 8.3333%;} .f-lg-02 {width: 16.6666%;} .f-lg-03 {width: 25%;} .f-lg-04 {width: 33.3333%;} .f-lg-05 {width: 41.6666%;} .f-lg-06 {width: 50%;} .f-lg-07 {width: 58.3333%;} .f-lg-08 {width: 66.6666%;} .f-lg-09 {width: 75%;} .f-lg-10 {width: 83.3333%;} .f-lg-11 {width: 91.6666%;} .f-lg-12 {width: 100%;}
    .f-md-00 {width: 0%;} .f-md-01 {width: 8.3333%;} .f-md-02 {width: 16.6666%;} .f-md-03 {width: 25%;} .f-md-04 {width: 33.3333%;} .f-md-05 {width: 41.6666%;} .f-md-06 {width: 50%;} .f-md-07 {width: 58.3333%;} .f-md-08 {width: 66.6666%;} .f-md-09 {width: 75%;} .f-md-10 {width: 83.3333%;} .f-md-11 {width: 91.6666%;} .f-md-12 {width: 100%;}
    .f-sm-00 {width: 0%;} .f-sm-01 {width: 8.3333%;} .f-sm-02 {width: 16.6666%;} .f-sm-03 {width: 25%;} .f-sm-04 {width: 33.3333%;} .f-sm-05 {width: 41.6666%;} .f-sm-06 {width: 50%;} .f-sm-07 {width: 58.3333%;} .f-sm-08 {width: 66.6666%;} .f-sm-09 {width: 75%;} .f-sm-10 {width: 83.3333%;} .f-sm-11 {width: 91.6666%;} .f-sm-12 {width: 100%;}
}
/* extra small */
@media only screen and (max-width: 480px)
{
    .f-xl-00 {width: 0%;} .f-xl-01 {width: 8.3333%;} .f-xl-02 {width: 16.6666%;} .f-xl-03 {width: 25%;} .f-xl-04 {width: 33.3333%;} .f-xl-05 {width: 41.6666%;} .f-xl-06 {width: 50%;} .f-xl-07 {width: 58.3333%;} .f-xl-08 {width: 66.6666%;} .f-xl-09 {width: 75%;} .f-xl-10 {width: 83.3333%;} .f-xl-11 {width: 91.6666%;} .f-xl-12 {width: 100%;}
    .f-lg-00 {width: 0%;} .f-lg-01 {width: 8.3333%;} .f-lg-02 {width: 16.6666%;} .f-lg-03 {width: 25%;} .f-lg-04 {width: 33.3333%;} .f-lg-05 {width: 41.6666%;} .f-lg-06 {width: 50%;} .f-lg-07 {width: 58.3333%;} .f-lg-08 {width: 66.6666%;} .f-lg-09 {width: 75%;} .f-lg-10 {width: 83.3333%;} .f-lg-11 {width: 91.6666%;} .f-lg-12 {width: 100%;}
    .f-md-00 {width: 0%;} .f-md-01 {width: 8.3333%;} .f-md-02 {width: 16.6666%;} .f-md-03 {width: 25%;} .f-md-04 {width: 33.3333%;} .f-md-05 {width: 41.6666%;} .f-md-06 {width: 50%;} .f-md-07 {width: 58.3333%;} .f-md-08 {width: 66.6666%;} .f-md-09 {width: 75%;} .f-md-10 {width: 83.3333%;} .f-md-11 {width: 91.6666%;} .f-md-12 {width: 100%;}
    .f-sm-00 {width: 0%;} .f-sm-01 {width: 8.3333%;} .f-sm-02 {width: 16.6666%;} .f-sm-03 {width: 25%;} .f-sm-04 {width: 33.3333%;} .f-sm-05 {width: 41.6666%;} .f-sm-06 {width: 50%;} .f-sm-07 {width: 58.3333%;} .f-sm-08 {width: 66.6666%;} .f-sm-09 {width: 75%;} .f-sm-10 {width: 83.3333%;} .f-sm-11 {width: 91.6666%;} .f-sm-12 {width: 100%;}
    .f-xs-00 {width: 0%;} .f-xs-01 {width: 8.3333%;} .f-xs-02 {width: 16.6666%;} .f-xs-03 {width: 25%;} .f-xs-04 {width: 33.3333%;} .f-xs-05 {width: 41.6666%;} .f-xs-06 {width: 50%;} .f-xs-07 {width: 58.3333%;} .f-xs-08 {width: 66.6666%;} .f-xs-09 {width: 75%;} .f-xs-10 {width: 83.3333%;} .f-xs-11 {width: 91.6666%;} .f-xs-12 {width: 100%;}
}

/* label
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper label
{
    position: absolute; top: 0; left: 0; display: block; float: left; width: auto; height: auto; margin: 0; padding: 0.8rem 1rem 0.4rem 1rem; white-space: nowrap;
    text-transform: uppercase; text-align: right;
    font-weight: 800; font-size: 1rem; line-height: 1em;
    color: rgba(0,0,0,0.5);
    transition: color 0.3s ease 0s;
}
.form-wrapper .input-wrapper .form-input:hover ~ label {color: rgba(0,0,0,0.8);}
.form-wrapper .input-wrapper .form-input:focus ~ label {color: rgba(0,0,0,0.2);}
.form-wrapper .input-wrapper .form-input.has-value ~ label {color: rgba(0,0,0,0.2);}

/* input line
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper .input-line {position: absolute; bottom: -0.2rem; left: 0; display: block; float: left; width: 100%; height: 0.3rem; margin: 0; padding: 0;}
.form-wrapper .input-wrapper .input-line::before
{
    position: absolute; top: 0; left: 0; display: block; float: left; width: 0; height: 100%; margin: 0; padding: 0; box-sizing: border-box; content: "";
    background-color: var(--persian-norm);
    transition: width 0.3s ease 0s;
}
.form-wrapper .input-wrapper .form-input:focus ~ .input-line::before {width: 100%;}

/* input wrapper
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper
{
    position: relative; display: block; float: left; width: 100%; height: auto; margin: 0; padding: 0;
    background-color: rgba(255,255,255,0.5);
    box-shadow: inset 0 -0.1rem 0 0 rgba(0,0,0,0.1), 0 0.2rem 0 0 rgba(0,0,0,0.1);
    transition: background-color 0.3s ease 0s, box-shadow 0.3s ease 0s;
}
/*
.form-wrapper .input-wrapper.text {}
.form-wrapper .input-wrapper.number {}
.form-wrapper .input-wrapper.date {}
.form-wrapper .input-wrapper.textarea {}
.form-wrapper .input-wrapper.select {}
.form-wrapper .input-wrapper.checkbox {}
.form-wrapper .input-wrapper.radio {}
*/

/* field has value */
.form-wrapper .input-wrapper.has-value
{
    background-color: rgba(255,255,255,1);
    box-shadow: inset 0 -0.1rem 0 0 var(--green), 0 0.2rem 0 0 var(--green);
}

/* global input
======================================================================================================================================================================================================== */
.form-wrapper .form-input
{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative; display: block; float: left; width: 100%; height: 6rem; margin: 0; padding: 1.8rem 0 0 1rem;
    font-family: inherit; font-weight: 400; font-size: 1.6em; line-height: 6rem;
    background-color: rgba(255,255,255,0);
    border-width: 0; border-style: solid; border-color: rgba(0,0,0,0);
    border-radius: 0;
    outline: none;
    transition: color 0.3s ease 0s, background-color 0.3s ease 0s, border-color 0.3s ease 0s, box-shadow 0.3s ease 0s;
}
.form-wrapper .form-input:focus
{
    border-color: rgba(0,0,0,0.3);
    border-radius: 0;
    box-shadow: 0.1rem 0.2rem 0.2rem 0 rgba(0,0,0,0.1), 0.5rem 1rem 1rem -0.5rem rgba(0,0,0,0.2);
    outline: none;
}

/* text input
======================================================================================================================================================================================================== */
/*.form-wrapper .input-wrapper input.form-input {}*/

/* select input
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper select.form-input {padding: 0.9rem 0 0 1rem;}
/*.form-wrapper .input-wrapper select.form-input option {}*/
.form-wrapper .input-wrapper select.form-input:hover {cursor: pointer;}
/* down arrow */
.form-wrapper .input-wrapper.select::after
{
    z-index: 1;
    position: absolute; top: 0; right: 0; display: block; float: right; width: auto; height: 6rem; margin: 0; padding: 0.8rem 1rem 0 1rem; box-sizing: border-box; content: "\f107";
    font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 2rem; line-height: 6rem;
    color: rgba(0,0,0,0.3);
    background-color: rgba(0,0,0,0);
}
/* z-index */
.form-wrapper .input-wrapper.select label {z-index: 4;}
.form-wrapper .input-wrapper.select select.form-input {z-index: 3;}
.form-wrapper .input-wrapper.select .input-line {z-index: 2;}
.form-wrapper .input-wrapper.select::after {z-index: 1;}

/* textarea input
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper textarea.form-input
{
    min-height: 10rem; padding: 2.8rem 0 0 1rem;
    line-height: 1.5em;
}

/* text highlight/selection
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper .form-input::selection
{
    color: var(--white);
    background-color: rgba(204,051,051,0.99); /* var(--persian-norm) - we have to set the alpha to 0.99 to keep it from being opaque by default */
}

/* autocomplete field colors
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper .form-input:-webkit-autofill,
.form-wrapper .input-wrapper .form-input:-webkit-autofill:hover
{
    -webkit-text-fill-color: var(--eerie-norm);
    -webkit-box-shadow: inset 0 0 0 10rem rgba(255,255,255,1);
}
/* autocomplete focus */
.form-wrapper .input-wrapper .form-input:-webkit-autofill:focus
{
    -webkit-text-fill-color: var(--eerie-norm);
    -webkit-box-shadow: inset 0 0 0 10rem rgba(255,255,255,1), 0.1rem 0.2rem 0.2rem 0 rgba(0,0,0,0.1), 0.5rem 1rem 1rem -0.5rem rgba(0,0,0,0.2);
}
/* autocomplete selection color */
.form-wrapper .input-wrapper .form-input:-webkit-autofill::selection,
.form-wrapper .input-wrapper .form-input:-webkit-autofill:hover::selection,
.form-wrapper .input-wrapper .form-input:-webkit-autofill:focus::selection {-webkit-text-fill-color: var(--white-norm);}

/* placeholder text
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper .form-input::placeholder
{
    color: rgba(0,0,0,0.35);
    transition: color 0.3s ease 0s;
}
.form-wrapper .input-wrapper .form-input:focus::placeholder
{
    color: rgba(0,0,0,0.1);
}

/* radio and checkbox buttons
======================================================================================================================================================================================================== */
.form-wrapper .input-wrapper.radio,
.form-wrapper .input-wrapper.checkbox
{
    width: auto; margin: 0 1.2rem 1.2rem 0; padding: 0.8rem 1.2rem 0.8rem 0.8rem;
    box-shadow: none;
    border-width: 0 0 0.2rem 0; border-style: solid; border-color: rgba(0,0,0,0.1);
}

/* the label */
.form-wrapper .input-wrapper.radio label,
.form-wrapper .input-wrapper.checkbox label
{
    position: relative; min-height: 2.4rem; padding: 0 0 0 0; white-space: normal;
    text-align: left; text-transform: none;
    font-family: inherit; font-weight: 400; font-size: 1.6em; line-height: 2.4rem;
    color: var(--eerie-norm);
}
/* when label is hovered */
.form-wrapper .input-wrapper.radio label:hover,
.form-wrapper .input-wrapper.checkbox label:hover {cursor: pointer;}

/* the actual radio button or checkbox */
.form-wrapper .input-wrapper.radio label input[type=radio],
.form-wrapper .input-wrapper.checkbox label input[type=checkbox]
{
    z-index: -1;
    position: absolute; top: 0; left: 0; display: block; float: left; width: 0.1rem; height: 0.1rem; margin: 0; padding: 0;
    opacity: 0; visibility: visible;
}

/* the div containing the text */
.form-wrapper .input-wrapper.radio label div,
.form-wrapper .input-wrapper.checkbox label div {position: relative; display: block; float: left; width: auto; height: auto; min-height: 2.4rem; margin: 0; padding: 0 0 0 3.2rem;}

/* the radio dot or check mark container  */
.form-wrapper .input-wrapper.radio label div::before,
.form-wrapper .input-wrapper.checkbox label div::before
{
    position: absolute; top: 0; left: 0; display: block; float: left; width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; box-sizing: border-box; content: "";
    border-width: 0.2rem; border-style: solid; border-color: rgba(0,0,0,0.2);
    transition: border-color 0.3s ease 0s;
}

/* the radio dot or check mark container when label is hovered  */
.form-wrapper .input-wrapper.radio label:hover div::before,
.form-wrapper .input-wrapper.checkbox label:hover div::before {border-color: rgba(0,0,0,0.5);}

/* the radio dot or check mark container when input is focused  */
.form-wrapper .input-wrapper.radio label input[type=radio]:focus + div::before,
.form-wrapper .input-wrapper.radio label input[type=checkbox]:focus + div::before,
.form-wrapper .input-wrapper.checkbox label input[type=radio]:focus + div::before,
.form-wrapper .input-wrapper.checkbox label input[type=checkbox]:focus + div::before {border-color: rgba(0,0,0,0.5);}

/* the actual radio dot or check mark */
.form-wrapper .input-wrapper.radio label div::after,
.form-wrapper .input-wrapper.checkbox label div::after {position: absolute; display: block; float: left; width: auto; height: auto; margin: 0; padding: 0; box-sizing: border-box;}

/* specific for radio */
.form-wrapper .input-wrapper.radio label div::before {border-radius: 50%;}
.form-wrapper .input-wrapper.radio label div::after
{
    top: 0.6rem; left: 0.6rem;
    width: 1.2rem; height: 1.2rem; content: "";
    opacity: 0; visibility: hidden;
    background-color: var(--persian-norm);
    border-radius: 50%;
    transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
}
/* radio when checked */
.form-wrapper .input-wrapper.radio label input[type=radio]:checked + div::after,
.form-wrapper .input-wrapper.radio label input[type=checkbox]:checked + div::after
{
    opacity: 1; visibility: visible;
}

/* specific for checkbox */
.form-wrapper .input-wrapper.checkbox label div::after
{
    top: 0; left: 0; padding: 0 0 0 0.3rem; overflow: hidden;
    width: 0; height: 2.4rem; content: "\f00c";
    text-align: left;
    font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 1.8rem; line-height: 2.4rem;
    color: var(--persian-norm);
    transition: width 0.3s ease 0s;
}
/* checkbox when checked */
.form-wrapper .input-wrapper.checkbox label input[type=radio]:checked + div::after,
.form-wrapper .input-wrapper.checkbox label input[type=checkbox]:checked + div::after {width: 2.4rem;}

/* radio and checkbox buttons on dark background
======================================================================================================================================================================================================== */
/* legend */
.eerie-norm-bg .form-wrapper fieldset legend {border-color: rgba(255,255,255,0.2);}

/* labels */
.eerie-norm-bg .form-wrapper .input-wrapper label {font-weight: 600; color: rgba(255,255,255,0.6);}
.eerie-norm-bg .form-wrapper .input-wrapper .form-input:hover ~ label {color: rgba(255,255,255,1);}
.eerie-norm-bg .form-wrapper .input-wrapper .form-input:focus ~ label {color: rgba(255,255,255,0.3);}

/* input wrapper */
.eerie-norm-bg .form-wrapper .input-wrapper {box-shadow: inset 0 -0.2rem 0 0 rgba(255,255,255,0.2);}

/* global input */
.eerie-norm-bg .form-wrapper .form-input {color: var(--white);}
.eerie-norm-bg .form-wrapper .form-input:focus {border-color: rgba(255,255,255,0.4);}

/* select option color */
.eerie-norm-bg .form-wrapper .input-wrapper.select option {color: var(--eerie-norm);}

/* select down arrow */
.eerie-norm-bg .form-wrapper .input-wrapper.select::after {color: rgba(255,255,255,0.4);}

/* auto complete field colors */
.eerie-norm-bg .form-wrapper .input-wrapper .form-input:-webkit-autofill,
.eerie-norm-bg .form-wrapper .input-wrapper .form-input:-webkit-autofill:hover
{
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: inset 0 -0.2rem 0 0 rgba(255,255,255,0.2), inset 0 0 0 3rem var(--eerie-norm);
}
/* auto complete field focus colors */
.eerie-norm-bg .form-wrapper .input-wrapper .form-input:-webkit-autofill:focus
{
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: inset 0 -0.2rem 0 0 rgba(255,255,255,0.2), inset 0 0 0 3rem var(--eerie-norm);
}

/* placeholder */
.eerie-norm-bg .form-wrapper .input-wrapper .form-input::placeholder
{
    color: rgba(255,255,255,0.3);
}

/* bottom border on radio and checkbox buttons */
.eerie-norm-bg .form-wrapper .input-wrapper.radio,
.eerie-norm-bg .form-wrapper .input-wrapper.checkbox {border-color: rgba(255,255,255,0);}

/* text color of labels */
.eerie-norm-bg .form-wrapper .input-wrapper.radio label,
.eerie-norm-bg .form-wrapper .input-wrapper.checkbox label {font-weight: 400; color: var(--white);}

/* border around radio dot or checkbox check mark */
.eerie-norm-bg .form-wrapper .input-wrapper.radio label div::before,
.eerie-norm-bg .form-wrapper .input-wrapper.checkbox label div::before {border-color: rgba(255,255,255,0.3);}

/* border around radio dot or checkbox check mark when hovered */
.eerie-norm-bg .form-wrapper .input-wrapper.radio label:hover div::before,
.eerie-norm-bg .form-wrapper .input-wrapper.checkbox label:hover div::before {border-color: rgba(255,255,255,0.8);}

/* border around radio dot or checkbox check mark when focused */
.eerie-norm-bg .form-wrapper .input-wrapper.radio label input[type=radio]:focus + div::before,
.eerie-norm-bg .form-wrapper .input-wrapper.radio label input[type=checkbox]:focus + div::before,
.eerie-norm-bg .form-wrapper .input-wrapper.checkbox label input[type=radio]:focus + div::before,
.eerie-norm-bg .form-wrapper .input-wrapper.checkbox label input[type=checkbox]:focus + div::before {border-color: rgba(255,255,255,0.8);}

/* required field alert
======================================================================================================================================================================================================== */
span.alert-text,
span.invalid-text
{
    position: absolute; top: 100%; left: 0; display: block; float: left; width: 100%; height: auto; margin: 0; padding: 0.2rem 0.8rem;
    font-size: 1.2rem; line-height: 1.5em;
    color: var(--white);
    background-color: var(--persian-norm);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
}

span.alert-text {z-index: 10;}
span.invalid-text {z-index: 11;}

.form-input.alert ~ span.alert-text,
.form-input.invalid ~ span.invalid-text,
span.alert-text.visible,
span.invalid-text.visible {position: relative; top: auto; left: auto; opacity: 1; visibility: visible;}

/* field validation summary
======================================================================================================================================================================================================== */
.validation-summary-errors
{
    position: relative; display: block; float: left; width: 100%; height: auto; margin: 0 0 3rem 0; padding: 0;
    border-width: 0; border-style: dashed; border-color: var(--persian-norm);
}
.validation-summary-errors ul {position: relative; display: block; float: left; width: 100%; height: auto; margin: 0; padding: 0;}
.validation-summary-errors ul li
{
    position: relative; display: block; float: left; width: 100%; height: auto; margin: 0 0 1rem 0; padding: 0 0 0 5rem; list-style-type: none;
    font-weight: 500; font-size: 1.6rem; line-height: 2em;
    color: var(--white-norm);
    background-color: var(--persian-norm);
}
.validation-summary-errors ul li:last-of-type {margin: 0;}
.validation-summary-errors ul li::before
{
    position: absolute; top: 0; left: 0; display: block; float: left; width: auto; height: 100%; margin: 0; padding: 0 1rem; box-sizing: border-box; content: "\f071";
    font-family: var(--fa); font-weight: 700; font-size: 1.6rem; line-height: 2em;
    border-radius: 0;
}

/* responsive media queries
======================================================================================================================================================================================================== */
@media only screen and (max-width: 768px)
{
    .validation-summary-errors ul li {font-size: 1.4rem;}
    .validation-summary-errors ul li::before {font-size: 1.4rem;}
}



















/* recaptcha badge placement
======================================================================================================================================================================================================== */
div > div.grecaptcha-badge
{
    z-index: 9999;
    transform: translate3d(18.6rem,0,0);
    position: absolute!important; top: 0!important; bottom: auto!important; left: auto!important; right: -7rem!important;
    will-change: auto;
    transition: transform 0.3s ease 0s!important;
}
div > div.grecaptcha-badge:hover
{
    transform: translate3d(0,0,0);
}

@media only screen and (max-width: 1280px)
{
    div > div.grecaptcha-badge {right: -3rem!important;}
}
@media only screen and (max-width: 768px)
{
    div > div.grecaptcha-badge {top: calc(100% + 1rem)!important;}
}
@media only screen and (max-width: 480px)
{
    div > div.grecaptcha-badge {right: -2rem!important;}
}





















/* javascript message overlay
======================================================================================================================================================================================================== */

/* main container */
fieldset .js-message-overlay
{
    z-index: 100;
    position: absolute; top: -2rem; left: -2rem; width: calc(100% + 4rem); height: calc(100% + 4rem);
    background: linear-gradient(to top right, rgba(225,225,225,0.85), rgba(245,245,245,0.85));
    border-width: 0.1rem; border-style: solid; border-color: rgba(0,0,0,0.25);
    box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.1);
}

/* js text */
fieldset .js-message-overlay::after
{
    z-index: 101;
    transform: translate3d(-50%,-50%,0);
    top: 50%; left: 50%; display: block; float: left; width: auto; height: auto; content: "\f3b9";
    font-family: var(--fab); font-weight: 400; font-size: 20rem; line-height: 1em;
    color: rgba(0,0,0,0.15);
}

/* message */
fieldset .js-message-overlay p
{
    z-index: 102;
    transform: translate3d(0,-50%,0);
    position: absolute; top: 50%; left: 0;
    text-align: center;
    font-weight: 700; font-size: 2rem; line-height: 1.5em;
}