@media only screen and (max-width: 650px) {
}
@media only screen and (min-width: 650px) and (max-width: 1000px) {
}
@media only screen and (min-width: 1000px) {
}
:root{
    --fieldLargeHeight: 4rem;
    --brownColor: #6a3a00;
}
.formBody,
.authFormBody {
    font-size: var(--baseSize12);
    padding: var(--baseSize16);
    border-radius:var(--borderRadiusThin);
    /*-webkit-box-shadow: 0 0 var(--baseSize16) var(--borderColor);*/
    -webkit-box-shadow: 0 0 var(--baseSize16) var(--orangeColor);
    margin-top: var(--baseSize16);
    margin-bottom: var(--baseSize16);
    background: var(--bgColor);
}
.formSubmit,
.connectFormSubmit, 
.formField,
.formFieldV2,
.connectFormField {
    border-radius: var(--borderRadiusThin);
    margin-bottom: var(--baseSize16);
    background:var(--bodyBackground);
}
.formSubmit,
.connectFormSubmit, 
.formField,
.connectFormField {
    display: flex;
    flex-wrap: nowrap;
    overflow:hidden;
    height:var(--fieldHeight);
}
.formField:has(.error),
.connectFormField:has(.error) {
    margin-bottom:0;
}
.connectFormField:has(.foxReminderSelect), 
.connectFormField:has(.foxReminderInnerSelect){ 
    overflow:inherit;
}
.connectFormField {
    margin-top: var(--baseSize4);
}
/*.formField,*/
.connectFormField {
    /*border: var(--borderWidthThin) solid var(--borderColor);*/
    border: var(--borderWidthThin) solid var(--orangeColor);
}
.formSubmit,
.connectFormSubmit:not(.red) {
    margin-top: var(--baseSize16);
}
.formSubmit.orangeBorder{
    border:solid 1px var(--orangeDeepColor);
}
.authFormBody .submit{
    /*text-shadow: 0.1rem 0.1rem 0.1rem #888;*/
}
.submit{
    width:100%;
}
.formField img,
.connectFormField img{
    padding:0.4rem;
}

input.submit{
    border:None;
}
.formField input,
.connectFormField input{
    flex:100%;
    align-content:center;
    padding-left: var(--baseSize16);
    padding-right: var(--baseSize16);
    text-align: left;
    background:None;
    border:0;
    color:var(--white);
    transition: 0.3s;
}

.connectFormField input:autofill,
.connectFormField input:autofill:hover,
.connectFormField input:autofill:focus,
.connectFormField input:autofill:active,
.connectFormField input:-webkit-autofill,
.connectFormField input:-webkit-autofill:hover,
.connectFormField input:-webkit-autofill:active,
.formField input:autofill,
.formField input:autofill:hover,
.formField input:autofill:focus,
.formField input:autofill:active,
.formField input:-webkit-autofill,
.formField input:-webkit-autofill:hover,
.formField input:-webkit-autofill:active{
    transition: 0.3s;
    -webkit-box-shadow:0 0 0 2rem var(--bodyBackground) inset !important;
    -webkit-text-fill-color: var(--myWhite) !important;
}
.connectFormField input:autofill:focus,
.connectFormField input:-webkit-autofill:focus,
.connectFormField input:focus,
.formField input:autofill:focus,
.formField input:-webkit-autofill:focus,
.formField input:focus{
    outline:none !important;
    transition: 0.3s;
    background:var(--borderColor-muted);
    -webkit-box-shadow:0 0 0 2rem var(--borderColor-muted) inset !important;
    -webkit-text-fill-color: var(--myWhite) !important;
    font-size: 1rem; 
}
.connectFormField div.error,
input.error {
    /*background: linear-gradient(red,#8b0000);*/
    /*background: #75360b;*/
    color:red;
}
.errorlist {
    list-style-type: none;
    padding: var(--baseSize4);
    font-style: italic;
    text-align: center;
    margin-top:var(--baseSize8);
    font-weight:bold;
    border-radius:var(--borderRadiusThin);
    border: solid var(--borderWidthThin) red;
    background: rgba(255,0,0,0.5);
}
input {
    z-index:1;
}

.hidden-field {
    display:none;
}


/* input-wrapper is used when we have a right icon inside a field tu avoid to hide the icon
   for exemple on signin page the password field */
.input-wrapper{
    flex:100%;
    display:flex;
    overflow:hidden;
}
.input-wrapper input{
    flex:100%;
}

.formDecoratorWrapper ul.errorlist {
    background: rgba(255,0,0,0.8);
    position: relative;
}

/* -------------------------------------------------- */
/*          CSS for the image fox searching           */
/* -------------------------------------------------- */
.formDecoratorBgSearch img.illustration,
.formDecoratorSearch img.illustration {
    position: relative;
    height: 20rem;
    top: 14rem;
    left: -1.5rem;
}
.formDecoratorBgSearch {
    width:80%;
    margin:0 auto;
}
.formDecoratorSearch {
    margin-top: -20rem;
}
.formDecoratorWrapper.search h1{
    text-align:center;
    margin-bottom:6rem;
}

/* -------------------------------------------------- */
/* CSS for the image send message (fox, letter, bird) */
/* -------------------------------------------------- */
.formDecoratorSend img.illustration {
    position: relative;
    height: 12rem;
    top: 1.5rem;
    left: -1.5rem;
    z-index:0;
    margin: auto;
}
.formDecoratorSend {
    display: flex;
    flex-direction: column;
    margin-top: -2rem;
    margin-bottom: 3rem;
}
.formDecoratorSend .formBody {
    position: relative;
    z-index:2;
}
.formDecoratorWrapper.send h1{
    text-align:center;
}


/* -------------------------------------------------- */
/* CSS for fields with label effect                   */
/* -------------------------------------------------- */
#contactDetails .formBody {
    margin: var(--baseSize20);
    -webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);
}

.formFieldV2{ 
    display:block;
    min-height:var(--fieldLargeHeight);
    border: 1px solid var(--borderColor);
    -webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);
    margin:2rem 0rem;
}

.formFieldV2 p,
.formFieldV2 label {
    margin: auto 0.5rem 1rem 0.5rem;
    overflow-x:scroll;
}
.formFieldV2 label {
    transition: 0.5s;
    position: relative;
    background: var(--bgColor);
    border-radius:var(--borderRadiusThin);
    color:#DDD;
    padding:0.2rem;
    font-size:var(--baseSize12);
    top: calc(-1*var(--fieldLargeHeight)/5);
}
.formFieldV2 label.placeholder {
    background: none;
    border-radius:var(--borderRadiusThin);
    color:#999;
    padding:0;
    font-size:var(--baseSize16);
    top:calc(var(--fieldLargeHeight)/3);
}
.formFieldV2 p {
    font-size:var(--baseSize16);
}
.formFieldV3 textarea{
    padding:1rem;
}
.blackBlock,
.formFieldV3 textarea,
.formFieldV3 input:not([type=submit]):not([type="checkbox"]){
    border-radius: var(--borderRadiusThin);
    margin-bottom: var(--baseSize16);
    background:var(--bodyBackground);
    display:block;
    border: 1px solid var(--borderColor);
    /*-webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);*/
    color: var(--myWhite);
    font-size: var(--baseSize16);
    width:100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}
.blackBlock div.formFieldV3 input{
    background:var(--bgColor) !important;
}
.formFieldV3 input:not([type=submit]){
    overflow-x:scroll;
}
.formFieldV3 input:not([type=checkbox],[type=submit]){
    min-height:var(--fieldLargeHeight);
    padding:0 1rem;
}
.formFieldV3 input.error{
    border: 1px solid red;
    -webkit-box-shadow: 0 0 var(--baseSize8) red;
}
.formFieldV3 ul.errorlist{
    width: max-content;
    margin: auto;
    font-size: 0.8rem;
}
.formFieldV3 label{
    margin-left: 0.5rem;
    position: relative;
    background: var(--bgColor);
    border-radius: var(--borderRadiusThin);
    color: #DDD;
    padding: 0.2rem;
    font-size: var(--baseSize12);
    top: calc(var(--fieldLargeHeight)/5);
    -webkit-box-shadow: 0 0 var(--baseSize4);
}
.formFieldV3 input:not([type=submit]):autofill:focus,
.formFieldV3 input:not([type=submit]):-webkit-autofill:focus,
.formFieldV3 input:not([type=submit]):focus{
    outline:none !important;
    background:var(--borderColor-muted);
}
.formFieldV3 input:autofill,
.formFieldV3 input:-webkit-autofill,
.formFieldV3 input:-webkit-autofill:hover,
.formFieldV3 input:-webkit-autofill:active,
.formFieldV3 input:-webkit-autofill:focus,
.formFieldV3 input:autofill:hover,
.formFieldV3 input:autofill:focus,
.formFieldV3 input:autofill:active{
    background: black;
}
label.selected{
    z-index:51;
}
.linkSimulateSubmit{
    color: black;
    text-align: center;
    align-content: center;
}
.blackBlock {
    padding: 2rem 1rem 0rem 1rem;
}
.info{
    color:var(--white);
    font-size:var(--baseSize12);
}
.red input:hover{
    /*
    background: linear-gradient(red,50%, darkred);
    */
    color: var(--white);
}