/* Formularelemente */


textarea{
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    letter-spacing: var(--letterSpacing);
    color: rgb(var(--colUIText03));
    background-color: rgb(var(--colBG));
    border: none;
    padding: 0.3em;
    width: 100%;
    min-height: 2em;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

textarea:read-only{
    background-color: rgba(0,0,0,0);
    resize: none;}

textarea.inputReadonly::placeholder {
    color: rgba(0,0,0,0);
}

fieldset{
    display: block;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-block-start: 0px;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    padding-block-end: 0px;
    min-inline-size: unset;
    border-width: 0px;
    border-style: none;
    border-color: none;
    border-image: none;
}


input, textarea,.entryInput{
    width: 100%;
    color: rgb(var(--colUIText03));
    background-color: rgb(var(--colBG));
    line-height: normal;
    padding: 0.4em;
    border: 0px;
    font-size: 1em;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    letter-spacing: var(--letterSpacing);
}

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    /* Firefox */
    input[type=number] {
    -moz-appearance: textfield;
    }

::placeholder{
    font-style: oblique;
    letter-spacing: var(--letterSpacing);
    font-weight: var(--fontWeight);
    color: rgba(var(--colUIText03),0.5);
  }
    ::-webkit-input-placeholder { /* Edge */
        font-style: oblique;
        font-weight: var(--fontWeight);
        color: rgba(var(--colUIText03),0.5);
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        font-style: oblique;
        font-weight: var(--fontWeight);
        color: rgba(var(--colUIText03),0.5);
    }

/* Select dropdown */

.select {
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-color: rgb(var(--colUIText03));
    color: rgba(var(--colUIText05),0.8);
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-align-last: center;
    padding: 0.8em;
    border-radius: 0.75em;
    font-family: var(--fontFamily);
    font-size: 1em;
    font-weight: 100;
    cursor: pointer;
    flex-grow: 1;
    /* direction: rtl; */
    z-index: 1;
  }

  .noTouch .select:hover{
     background-color: rgba(var(--colUIText02),0.8);
  }



    .select__input{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .select__input--arrowed:after{
        --arrowSize: 0.5em;
        position: absolute;
        right: 0.75em;
        content: "";
        width: 0px;
        height: 0px;
        border: 0px solid transparent;
        border-top: var(--arrowSize) solid rgb(var(--colUIText04));
        border-left: var(--arrowSize) solid transparent;
        border-right: var(--arrowSize) solid transparent;
    }

    .select__list{
        background-color: rgb(var(--colBG));
        border-color: none;
    }

    .select__item{
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        background-color: rgb(var(--colBG));
    }

    .select::-ms-expand {
        display: none;
        }
    .select:focus::-ms-value {
        background-color: transparent;
      }

    .select--small{
        border-radius: 0.45em;
        font-weight: 300;
        max-height: 2em;
        padding: 0.25em 0px;
        -webkit-appearance: unset;
        appearance: unset;
        direction: ltr;
    }

    .select--simple{
        flex-grow: 0;
        padding: 0.5em;
        border-radius: 0.5em;
    }


    .select--buttonLike,
    .select--buttonLike>.select__list{
        background-color: rgb(var(--colBG));
        color: rgb(var(--colUIText03));
    }

    .noTouch .select--buttonLike:hover{
        background-color: rgb(var(--colUIBack04));
    }

    .select__list{
        width: 100%;
        list-style: none;
        /* position: absolute;
        top: 1.5em;
        left: 0px; */
        border-radius: 0.5em;
        padding: 0.25em;
        background-color: rgb(var(--colUIText03));
        -webkit-box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        -moz-box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        box-shadow: 3px 1px 3px rgba(var(--boxShadow));
        -webkit-box-shadow: 3px 1px 3px rgb(0 0 0 / 40%);
        -moz-box-shadow: 3px 1px 3px rgba(0,0,0,0.4);
        box-shadow: 3px 1px 3px rgb(0 0 0 / 40%);
        opacity: 1;
        transition: opacity 0.2s ease;
    }

        .select__list--closed{
            opacity: 0;
            pointer-events: none;
        }

    .select__option{
        padding: 0px 0.25em;
        margin: 0.1em;
        border-radius: 0.5em;
        white-space: nowrap;
    }

    .select__option--selected{
        background-color: rgba(var(--colUIText02),0.5);
    }

    .noTouch .select__option:hover{
        background-color: rgb(var(--colUIText02));
    }

    .noTouch .select--buttonLike>.select__list>.select__option:hover{
        background-color: rgb(var(--colUIBack02));
    }

    .select--buttonLike>.select__list>.select__option--selected{
        background-color: rgba(var(--colUIBack02),0.5);

    }
    .select--buttonLike>.select__list>.select__option--selected:hover{
        background-color: rgba(var(--colUIBack02),0.8);
    }




/* Checkbox switcher */

.customCheckbox{
    display: flex;
    flex-direction: row;
    height: 2em;
    max-width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}




    .customCheckbox__line{
        min-width: 1.2em;
        margin: 0px 0.8em;
        height: 0px;
        border-bottom: var(--strokeWidth) solid rgb(var(--colUIText03));
        content: "";
  }

    .noTouch .customCheckbox:hover>.customCheckbox__line {
        border-bottom: var(--strokeWidth) solid rgb(var(--colUIBack01));
    }

    .customCheckbox__dot {
        width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
        border: var(--strokeWidth) solid rgb(var(--colUIText03));
        background-color: rgb(var(--colUIBack03));
        content: "";
        transition: margin 0.05s linear, background-color 0.1s linear;
        position: absolute;
        left: 0.6em;
  }

    .noTouch .customCheckbox:hover>.customCheckbox__dot{
        background-color: rgb(var(--colUIText04));
        border-color: rgb(var(--colUIBack01));
    }


    .customCheckbox__dot.customCheckbox__dot--active{
        left: 1.4em;
        background-color: rgb(var(--colUIText03));
    }


/* Slider */

input[type=range]{
    -webkit-appearance: none;
    appearance: none;
    height: 0.8em;
    padding: 0px;
    margin:0px;
    border-radius: 0.4em;
    background: rgba(var(--colUIText03),0.05);
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    display:flex;
    justify-content: space-between;
    cursor: pointer;

}

    .noTouch input[type="range"]:hover{
        background-color: rgba(var(--colUIText03),0.5);
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
        border: 1px solid rgb(var(--colUIText03));
        background-color: rgb(var(--colUIText03));
        transition: background-color 0.2s;
        position: relative;
    }

    .noTouch input[type="range"]::-webkit-slider-thumb:hover {
        background-color: rgb(var(--colUIBack03));

    }

    input[type="range"]::-webkit-slider-thumb {
        background-color: rgb(var(--colUIText03));
    }

    input[type="range"].inputRangeUnset::-webkit-slider-thumb{
        background-color: rgb(var(--colUIBack03));
    }


    input[name="Practice-Note"]{
        background: linear-gradient(90deg, rgba(var(--colContra01),0.25), rgba(var(--colAttention01),0.25), rgba(var(--colPro01),0.25));
    }

.inputSlider{
    width: 100%;
    margin: 0.5em 1em 0px 0.5em;
}

    .inputSlider--ok{
        margin-right: 3em;
    }

    .inputSlider__scale{
        content: "";
        margin-top: -0.8em;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .inputSlider__pip{
        width: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible;
        text-align: center;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        z-index: -1;
        cursor: pointer;
    }

    .inputSlider__line{
        background-color: rgb(var(--colUIText03));
        width: 1px;
        min-height: 0.8em;
        content: "";
    }

    .inputSlider__label{
        font-size: 0.8em;
        color: rgb(var(--colUIText03))}



.sliderTime{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.timescale{
    flex-direction: row;
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 0.8em;
}

#TASDepth{
    background-image: repeating-linear-gradient(90deg,
                        rgb(var(--colUIText03)) 0%,
                        rgb(var(--colUIText03)) 0.333%, rgba(0,0,0,0) 0.333%,
                        rgba(0,0,0,0) 16.666%);
}

#TASComplex{
    background-image: repeating-linear-gradient(90deg,
                        rgb(var(--colUIText03)) 0%,
                        rgb(var(--colUIText03)) 0.333%, rgba(0,0,0,0) 0.333%,
                        rgba(0,0,0,0) 24.666%);
}

.form__error{
    display: inline-block;
    justify-content: center;
    padding: 0.5em 0.6em 0.5em 0.5em;
    margin-bottom: 0.5em;
    margin-top: -0.2em;
    -webkit-box-shadow: 2px 2px 3px rgba(var(--boxShadow));
    -moz-box-shadow: 2px 2px 3px rgba(var(--boxShadow));
    box-shadow: 2px 2px 3px rgba(var(--boxShadow));
    position: relative;
    font-size: 0.8em;
    color: rgb(var(--colUIText03));
    background-color: rgb(var(--colUIBack04));
    border-radius: 1em;
    border: solid transparent;
    border-color: rgb(var(--colUIText04));
    border-width: 1px 0 0 1px;
}

.form__inputError::before{
    content: " ";
    position: absolute;
    pointer-events: none;
    top: -0.6em;
    left: 1em;
    margin-top: 0px;
    background-color: rgb(var(--colUIBack04));
    border: solid transparent;
    border-left-color: rgba(var(--colUIText04));
    border-top-color: rgb(var(--colUIText04), 0.4);
    border-width: 1px 0 0 1px;
    width: 1em;
    height: 1em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    }


.entryInput.inputReadonly{
    background-color: rgba(0,0,0,0);
    resize: none;
}