form{
border:none;
}

fieldset{
border:none;
margin:0;
padding:0;
}

/* Mobile View */
@media screen and (max-width: 45rem){

/* Formular only */
#form{
margin:0;
padding:0 .75rem;
}

}

/* Tablet and above && Desktop View */
@media screen and (min-width: 45rem){

/* Formular only */
#form{
margin:0;
padding:0;
}

}


form .small{
float:left;
width:100%;
margin:.5rem 0 .25rem 0;
padding:0;
font-size:var(--fs-s);
}

form .alert{
min-height:1.5rem;
margin:0 0 .5rem 0;
}


form legend{
float:left;
width:100%;
margin:.5rem 0 .25rem 0;
padding:0;
font-size:var(--fs-h2);
font-weight:bold;
}

form h2{
float:left;
width:100%;
margin:.5rem 0 .25rem 0;
padding:0;
font-size:var(--fs-m);
font-weight:bold;
}

form p{
float:left;
width:100%;
margin:1.5rem 0 0 0;
padding:0;
}

form .label{
display:inline-block;
width:100%;
margin:.5rem 0 0 0;
padding:0;
color:var(--form-input-clr-primary-300);
font-size:var(--fs-s);
}

form .input,
form .date,
form .textarea{
transition:border 150ms ease-in;
border-radius:.25rem;
}

form .input.required,
form .date.required,
form .textarea.required{
border:var(--form-input-brd-primary-300) 1px solid;
}

form .select.true,
form .input.true,
form .date.true,
form .textarea.true{
border:1px solid #0FF000;
}

form .select.false,
form .input.false,
form .date.false,
form .textarea.false{
border:1px solid #FF0000;
}

form .form_input_response{
display:inline-block;
margin:0 0 .5rem 0;
padding:0;
}

form .form_input_response > *{
display:inline-block;
margin:0;
padding:0;
font-size:var(--fs-xs);
}

form .input,
form .date,
form .file{
display:inline-block;
width:100%;
height:2rem;
margin:0;
padding:.25rem;
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--form-input-bgr-primary-300);
color:var(--form-input-clr-primary-300);
font-family:var(--primary-font-family);
font-size:var(--fs-p);
transition:border ease-in .15s;
}

form .date::placeholder,
form .input::placeholder{
font-size:var(--fs-xs);
}


form .form_input_validate{
display:inline-block;
width:100%;
margin:0;
padding:0;
position:relative;
}

input + span {
position: relative;
}

input + span::before {
position: absolute;
right: .5rem;
top: 0;
}

form .input.false + span::before {
content: "✖";
color: #FF0000;
}

form .input.true + span::before {
content: "✓";
color: #0FF000;
}


form .textarea{
display:inline-block;
width:100%;
height:20rem;
margin:0;
padding:.25rem;
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--form-input-bgr-primary-300);
color:var(--form-input-clr-primary-300);
font-family:var(--primary-font-family);
font-size:var(--fs-p);
resize:vertical;
}

form .textarea.short{
height:12rem;
}

form .select{
display:inline-block;
width:auto;
height:2rem;
margin:0 0 .5rem 0;
padding:.25rem;
border:var(--form-input-brd-primary-300) 1px solid;
background: var(--form-input-bgr-primary-300);
color:var(--form-input-clr-primary-300);
border-radius:.25rem;
}

form .select{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

/**/
form ul.list{
clear:both;
float:left;
width:auto;
margin:0;
padding:0;
}

form ul.list li{
display:inline-block;
margin:.5rem .5rem .5rem 0;
padding:0 .25rem .15rem 0;
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--form-input-bgr-primary-300);
}

form ul.list li.pending{
color:var(--status-pending-font-color);
border:var(--status-pending-border-color) 1px solid;
background:var(--status-pending-background-color);
}

form ul.list li.done{
color:var(--status-succes-font-color);
border:var(--status-succes-border-color) 1px solid;
background:var(--status-succes-background-color);
}

form ul.list li.alert{
color:var(--status-alert-font-color);
border:var(--status-alert-border-color) 1px solid;
background:var(--status-alert-background-color);
}

form ul.list li:before{
display:none;
}

form ul.list li .radio,
form ul.list li .checkbox{
display:inline-block;
margin:.25rem .25rem;
padding:0;
}

form ul.list li label{
display:inline-block;
margin:0;
padding:.5rem 0 .25rem 0;
}

form ul.list li{
color:var(--form-btn-clr-default);
border:var(--form-btn-bgr-default) 1px solid;
background:var(--form-btn-bgr-default);
}

form ul.list li.on{
font-weight:bold;
color:var(--form-btn-clr-active);
border:var(--form-btn-bgr-active) 1px solid;
background:var(--form-btn-bgr-active);
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

form ul.list li:hover{
color:var(--form-btn-clr-active);
border:var(--form-btn-bgr-active) 1px solid;
background:var(--form-btn-bgr-active);
}

}


#form button{
display:inline-block;
width:auto;
margin:.5rem 0;
padding:.25rem .75rem;
}

#form button{
font-weight:bold;
cursor:pointer;
text-align:center;
font-size:var(--fs-p);
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--bgr-accent-300);
color:var(--clr-primary-300);
border-radius:.25rem;

&:hover{
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--bgr-accent-400);
color:var(--clr-primary-400);
}

}

#form button[disabled]{
cursor:not-allowed;
}