form {
    position: relative;
    margin: 0;
}

textarea {
    resize: vertical;
    min-height: 75px;
}

textarea, select, option, input {
    font-family: inherit;
    font-weight: 300;
    line-height: 22px;
    outline: none;
    background: white;
    cursor: pointer;
}

label, input, textarea, select {
    vertical-align: middle;
}

select {
    overflow: hidden;
    text-overflow: ellipsis;
}

select option,
select optgroup::before {
    border: 0;
    background: white;
    color: #333;
}
select optgroup::before {
    background: #eee;
    text-align: center;
}

legend {
    padding: 0;
}

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




/**
 * for form > input[submit] and other buttons, take a look at buttons
 */


.input {
    padding: 6px 8px;
    display: flex;
}
.input + .input,
.tips + .input,
.error + .input
{
    margin-top: 9px;
}

form.condensed .input {
    padding: 0;
}
/* specific to tags selector */
.input:not(.input-tags) {
    flex-flow: column wrap;
}

.checkboxs-inline > label {
    width: 100%;
    display: block;
    padding: 12px 8px 0 0;
}
.checkboxs-inline .input {
    flex: 1;
    width: 31%;
    display: inline-block;
}


.input .checkbox+label {
    margin-bottom: 0;
}




.input label {
    width: 100%;
    display: block;
    font-size: 1rem;
    padding: 0 0 0.25rem 0;
    line-height: 24px;
    color: rgb(62, 62, 62);
}
body.dark .input label {
    color: var(--dark_font-color);
}
.input:has(:focus) label
{
    color: var(--blue-default);
}






.input input,
.input textarea,
.input select,
.select
{
    font-size: 1.05rem;
    padding: 8px 6px;
    box-shadow: none;
    color: rgb(7, 7, 7);
    border: 2px solid rgba(0, 0, 0, 0.22);
    border-radius: var(--rounded);
    outline: 0;
    width: 100%;
    max-width: 100%;
    /* font-size: 1rem; */
}

body.dark .input input,
body.dark .input textarea,
body.dark .input select,
body.dark .select
{
    border: 2px solid rgba(255, 255, 255, 0.22);
}

.input select,
.select
{
    margin-right: 0;
    padding: 8px 4px;
}
.input option{
    /* padding: 8px 0; */
}




.condensed .input input,
.condensed .input textarea,
.condensed .input select,
.condensed .select
{
    padding: 3px 0;
}



.large {
    padding: 12px 8px;
}
.large input,
.large textarea,
.large select,
.large .select
{
    padding: 8px 0;
    font-size: 1.1rem;
}
.large input,
.large select,
.large .select
{
    max-height: 38px;
}


.input input:focus,
.input textarea:focus,
.input select:active,
.input select:focus,
.select:active,
.select:focus
{
    color: rgb(4, 4, 4);
    border-color: var(--blue-default);
    outline: 0;
}

.input input:disabled,
.input textarea:disabled,
.input select:disabled,
.select:disabled
{
    border-color: rgba(0, 0, 0, 0.32) 75%;
    cursor: not-allowed;
}
body.dark .input input:disabled,
body.dark .input textarea:disabled,
body.dark .input select:disabled,
body.dark .select:disabled
{
    border-color: rgba(255, 255, 255, 0.32) 75%;
}


.input input:read-only,
.input textarea:read-only
{
    border-color: rgba(0, 0, 0, 0.32) 75%;
    cursor: not-allowed;
}
body.dark .input input:read-only,
body.dark .input textarea:read-only
{
    border-color: rgba(255, 255, 255, 0.32) 75%;
}


.input input:invalid,
.input textarea:invalid,
.input select:invalid,
.select:invalid
{
    border-color: var(--red-default);
}



/* for messages (tips and error) */
form .tips,
form .input .error,
{
    width: 100%;
    margin-top: 0;
    color: rgba(0, 0, 0, 0.52);
    font-size: 1rem;
    padding: 0 8px;
    padding-left: 8px;
    line-height: 1.4em;
}
form .input .error,
.form .input .error,
.inline .input .error {
    color: var(--red-default);
}
form .tips+.tips,
form .tips+.error,
form .error+.error
{
    margin-top:0;
}


/* inline*/

.inline .input {
    flex-flow: unset;
    align-items: center;
}

.inline .input label {
    padding: 8px 0;
    /* flex: 1; */
    text-align:right;
    padding-right: 1em;
    width: 50%;
}
.inline .tips,
.inline .input .error
{
    padding-left: 34%;
    width: 100%;
}

.inline .input input.text,
.inline .input textarea.text,
.inline .input select
.inline .select,
{
    flex: 2;
}
form .tips,
form .error {
    padding-left: 8px;
}
form .tips ul,
form .input .error ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* padding-left: 14px; */
}
form .tips li {
    margin: 0;
    padding: 0;
}




/* checkbox */
.radio,
.checkbox,
.checkbox-toggle {
    position: absolute;
    left: -9999px;
}


.inline .input:has(.radio) label,
.inline .input:has(.checkbox) label,
.inline .input:has(.checkbox-toggle) label
{
    margin-left: 33%;
    padding: 0;
    padding-left: .5%;
}
.input:has(.radio) label,
.input:has(.checkbox) label,
.input:has(.checkbox-toggle) label
{
    cursor: pointer;
    position: relative;
    margin-left: 24px;/* equal to .[radio|checkbox]+label::after{ left: X }*/
    padding: 3px 0;
    width: auto;
    text-align: left !important;
}
.input:has(.checkbox-toggle) label {
    margin-left: 50px;
}

.input:has(.radio.right) label,
.input:has(.checkbox-toggle.right) label,
.input:has(.checkbox.right) label+label
{
    margin-left: 0;
}

/* the checkbox */
.input:has(.radio) label::after,
.input:has(.checkbox) label::after
{
    /* content: '\e905'; */
    content: '✓';
    text-align: center;
    color: white;
    font-size: 1rem;
    border: 2px solid rgba(0, 0, 0, .3);
    /* border-radius: 3px; */
    border-radius: var(--rounded);
    background-color: white;
    position: absolute;
    top: 50%;
    left: -24px;
    transform: translate(0, -50%);
    width: 20px;
    height: 20px;
    line-height: 14px;
    transition: background-color 1s, border-color 1s;
}
.input:has(.radio) label::after {
    border-radius: 100%;
}
.input:has(.radio.right) label::after
.input:has(.checkbox.right) label::after
{
    left: auto;
    right: 0;
}

.input:has(.radio:checked) label::after,
.input:has(.checkbox:checked) label::after
{ /* the checkbox -- checked */
    border-color: rgba(33, 150, 243, 0);
    background-color: rgba(33, 150, 243, 1);
}
.input:has(.radio:checked:disabled) label::after,
.input:has(.checkbox:checked:disabled) label::after
{
    background-color: rgb(146, 148, 150);
}

.input:has(.radio) label::before,
.input:has(.checkbox) label::before
{ /* the focus ripple */
    content: '';
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .1);
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translate(-50%, -50%) scale(0);
    width: 2px;
    height: 2px;
}

.input:has(.radio.right) label::before,
.input:has(.checkbox.right) label::before
{
    left: auto;
    right: 8px;
}

.input:has(.radio:focus) label::before,
.input:has(.checkbox:focus) label::before
{
    animation: md-ripple 1s ease-out;
}

 .inline .input:has(.radio) label,
 .inline .input:has(.checkbox) label
{
    text-align: left;
}

.input:has(.checkbox-toggle) label::after {
    position: absolute;
    left: -51px;
    top: 50%;
    transform: translate(0, -50%);
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    background: #ECECEC;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    content: '';
    transition: all 0.3s ease;
}
.input:has(.checkbox-toggle.right) label::after {
    left: auto;
    right: 20px;
}

.input:has(.checkbox-toggle:checked) label::after {
    left: -30px;
    background: #4285F4;
}
.input:has(.checkbox-toggle.right:checked) label::after {
    left: auto;
    right: 0;
}

.input:has(.checkbox-toggle) label::before {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translate(0, -50%);
    display: block;
    height: 15px;
    width: 40px;
    background: #B2B2B2;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    content: '';
}
.input:has(.checkbox-toggle.right) label::before {
    left: auto;
    right: 0;
}

.input:has(.checkbox-toggle:checked) label::before {
    background: #A0C2F9;
}

.input:has(.checkbox-toggle:focus) label::after{
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2), 0 0 0 5px rgba(0, 0, 0, .1);
}

.input:has(.checkbox-toggle:disabled) label:before
.input:has(.checkbox-toggle:disabled) label::after {
    background:#BDBDBD;
}


/** to do : repenser le selector */
.checkbox-toggle:not(:disabled):active+label::after {
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2), 0 0 0 15px rgba(160, 194, 249, .4);
}


/* mark input with a * in label */
.input:has(input:required) label:after {
    content: "*";
    margin-left: 0.2em;
    color: var(--green-default);/* orange */
    vertical-align: super;
    font-size: smaller;
}
.input:has(input:required:invalid) label {
    color:var(--red-default);/* red */
}


::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholderr,
[placeholder]
{
    color: pink;
}
.text:focus::-webkit-input-placeholder,
.text:focus::-moz-placeholder,
.text:-moz-placeholder:focus
.text:-ms-input-placeholder:focus,
.text[placeholder]:focus
{
    color: red;
}

.form.sticky,
.form-sticky {
    position: relative;
}

form.sticky .btn-container {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: right;
    box-shadow: 0 0 6px rgba(0,0,0,.4);
    background: #eee;
    padding: 12px 8px;
}


select[multiple] {
    overflow-y: auto;
}
select[multiple] option{
    position: relative;
    padding-left: 30px;
}
select[multiple] option::after {
    content: '\e905';
    text-align: center;
    color: white;
    font-size: 1em;
    border: 2px solid rgba(0, 0, 0, .3);
    /* border-radius: 3px; */
    border-radius: var(--rounded);
    background-color: white;
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translate(0, -50%);
    width: 18px;
    height: 18px;
    line-height: 14px;
    transition: background-color 1s, border-color 1s;
}

select[multiple] option::before {
    content: '';
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .1);
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translate(-50%, -50%) scale(0);
    width: 2px;
    height: 2px;
}
select[multiple] option:checked::after {
    border-color: rgba(33, 150, 243, 0);
    background-color: rgba(33, 150, 243, 1);
}

.range {
    flex: 2;
    display: flex;
    width: 100%;
}
.input .range .text:nth-of-type(1) {
    flex: 1;
    width: auto;
}
.input .range .text:nth-of-type(2) {
    flex: 0 0 60px;
    width: 60px;
    text-align:center;
}
input[type=range] {
    -webkit-appearance: none;
    margin: 8px 0;
    width: 100%;
    border: 0 !important;
    background: none !important;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #A0C2F9;
  border-radius: 2px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #A0C2F9;
  border-radius: 2px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-webkit-slider-thumb {
    background: #4285F4;
    cursor: pointer;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    content: '';
    margin-top: -8px;
}

input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}

form.inline .input label {
    padding: 0 1em 0 0;
}


@media (max-width: 640px) {
    form.inline .input {
        flex-direction: column;
    }
    form.inline .input label,
    form.inline .input .text,
    form.inline .tips,
    form.inline .error
    {
        width: 100%;
        flex: 1 1 100%;
        text-align: left;
        padding-left: 0;
    }
    form.inline .input label {
        padding: 0;
    }
    form.inline .tips,
    form.inline .error
    {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/*
.input + .input,
.tips  + .input,
.error + .input
{
    margin-top: 12px;
}
.form-condensed .input + .input,
.form-condensed .tips  + .input,
.form-condensed .error + .input
{
    margin-top: 8px;
}
*/

.input:-webkit-full-screen {
    width: 100vw !important;
    max-width: 960px;
    height: 100vh !important;
    margin: 0 auto;
}
.input:-moz-full-screen {
    width: 100vw !important;
    max-width: 960px;
    height: 100vh !important;
    margin: 0 auto;
}
.input:-ms-full-screen {
    width: 100vw !important;
    max-width: 960px;
    height: 100vh !important;
    margin: 0 auto;
}
.input:fullscreen {
    width: 100vw !important;
    max-width: 960px;
    height: 100vh !important;
    margin: 0 auto;
}
.input:-webkit-full-screen textarea {
    width: 100%;
    height: calc(100vh - 110px);
}
.input:-moz-full-screen textarea {
    width: 100%;
    height: calc(100vh - 110px);
}
.input:-ms-full-screen textarea {
    width: 100%;
    height: calc(100vh - 110px);
}
.input:fullscreen textarea {
    width: 100%;
    height: calc(100vh - 110px);
}
.input:fullscreen textarea {
    width: 100%;
    height: calc(100vh - 110px);
}

.input-month {
    max-width: 120px !important;
}
.input-statut {
    max-width: 100px !important;
}


textarea, select, option, optgroup, input {
    background: var(--background-block);
}
body.dark textarea,
body.dark textarea:active,
body.dark textarea:focus,
body.dark select,
body.dark select:active,
body.dark select:focus,
body.dark option,
body.dark optgroup,
body.dark input,
body.dark input:active,
body.dark input:focus
{
    background: var(--dark-background_block);
    color: var(--dark_font-color);
}