@import 'iconmoon.css';

:root {
    --afdFormMainColor : #43B4E3 ;
    --afdFormMainColorHover : #8addff;
    --afdFormMainColorTxt : #5a606c;
    --afdFormMainColorTxt2 : #fff;
    --afdLabelBackground : #e8f0f5;
    --afdRadioBackground : #fdfdfd;
}



.amfd_contact_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width:100%;
    max-width: 1300px;
    margin:auto;
    color:var(--afdFormMainColorTxt);
}
.amfd_contact_form h1 {
    font-size:3rem;
    line-height: 3.5rem;
}

.amfd_contact_form  > div  , .amfd_contact_form  form > div{
    padding:0.5rem;
    margin:0.25rem 0;
}


.amfd_contact_form  div {
    max-width: 100vw;
}


.amfd_contact_form  label {
    background-color:var(--afdLabelBackground);
    padding:1rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width:250px ;
    min-width: 250px;
}



.amfd_contact_form  form input {
    padding: 0.5rem;
    max-width: 100%;
    min-height: 3rem;
}



.amfd_contact_form p {
   width:100%;
    margin:0.5rem 0;
}

.amfd_contact_form h1 {
   width:100%;
}


/* ------------------------------------------------------------------- SUBMIT ---------------------------------------------------------------------- */
.amfd_contact_form  form .submitBtn {
   width:200px;
    padding:1.5rem;
    color: var(--afdFormMainColorTxt2);
    background:var(--afdFormMainColor);
    border:none;
    cursor: pointer;
}

.amfd_contact_form  form .submitBtn:hover {
   width:200px;
    padding:1.5rem;
    color: var(--afdFormMainColorTxt2);
    background:var(--afdFormMainColorHover);
}

.amfd_contact_form  form .submitContainer {
   width:100%;
    text-align: center;
}


/* ------------------------------------------------------------------- IDENTITY ---------------------------------------------------------------------- */

.amfd_contact_form .identity  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width:100%;
}

.amfd_contact_form .identity div {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 400px;
    flex-basis: 400px;
    width:50%;
    margin-bottom:0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.amfd_contact_form .identity input {
    width:100%;
}


/*@media screen and (min-width:1200px) {
    .amfd_contact_form .identity input:nth-of-type(2) {
        margin-left:1rem;
    }
}*/


/* ------------------------------------------------------------------- Checkbox ---------------------------------------------------------------------- */

.amfd_contact_form .checkBox {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 400px;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.amfd_contact_form .checkBox span {
    background-color: var(--afdLabelBackground);
    padding:1rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width:250px;
}

.amfd_contact_form .checkBox  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.amfd_contact_form .checkBox div  {
    padding:0.5rem;
}




.amfd_contact_form .checkBox .checkOptions  {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}



.amfd_contact_form .checkBox .checkOptions .checkOptionValue label  {
    padding:1rem;
    border:1px solid grey;
    cursor: pointer;
}

.amfd_contact_form .checkBox .checkOptions .checkOptionValue label:hover  {
    padding:1rem;
    border:1px solid var(--afdFormMainColorHover);
    cursor: pointer;
}

.amfd_contact_form .checkBox .checkOptions .checkOptionValue input  {
    display:none;
}

.amfd_contact_form .checkBox .checkOptions .checkOptionValue input:checked + label  {
    padding:1rem;
    border:1px solid var(--afdFormMainColor);
    background:var(--afdFormMainColor);
    color:var(--afdFormMainColorTxt2);

}


/* ------------------------------------------------------------------- Checkbox ---------------------------------------------------------------------- */

.amfd_contact_form .checkRadio {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 400px;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.amfd_contact_form .checkRadio span {
    background-color:var(--afdLabelBackground);
    padding:1rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width:250px;
}

.amfd_contact_form .checkRadio  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.amfd_contact_form .checkRadio div  {
    padding:0.5rem;
}




.amfd_contact_form .checkRadio .checkOptions  {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}



.amfd_contact_form .checkRadio .checkOptions .checkOptionValue {
    margin:0 0 1rem 0;
}

.amfd_contact_form .checkRadio .checkOptions .checkOptionValue label  {
    padding:1rem;
    border:1px solid  var(--afdLabelBackground);
    cursor: pointer;
    background:var(--afdRadioBackground);
}

.amfd_contact_form .checkRadio .checkOptions .checkOptionValue label:hover  {
    padding:1rem;
    border:1px solid var(--afdFormMainColorHover);
    cursor: pointer;
}

.amfd_contact_form .checkRadio .checkOptions .checkOptionValue input  {
    display:none;
}

.amfd_contact_form .checkRadio .checkOptions .checkOptionValue input:checked + label  {
    padding:1rem;
    border:1px solid var(--afdFormMainColor);
    background:var(--afdFormMainColor);
    color:var(--afdFormMainColorTxt2);

}



/* ------------------------------------------------------------------- TEXT AREA ---------------------------------------------------------------------- */


.amfd_contact_form .inputTextArea {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 400px;
    flex-basis: 100%;
}