/* <--- Colors */
:root {
    --formWhite: #ffffff;
    --formBlack: #000000;
}
/* ---> */

/* <--- Default color change */
input[type="checkbox"], input[type="radio"], input[type="range"] {
    accent-color: var(--formInput);
}
/* ---> */

/* <--- General */
/*html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

main {
    min-height: 100vh;
}*/

input {
    height: 2.5em;
}

textarea {
    height: 8em;
}

label {
    color: var(--formLabel);
    font-size: 18pt;
    font-weight: bold;
}

.form-group {
    padding-left: unset;
}

.formBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4em;
}

.formBox {
    width: 100%;
    border: 2px solid var(--darkBlue);
    padding: 1em;
    -webkit-box-shadow: 0px 2px 13px 1px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px 2px 13px 1px rgba(0,0,0,0.30);
    box-shadow: 0px 2px 13px 1px rgba(0,0,0,0.30);
}
/* ---> */

/* <--- Button styles*/
.buttonContainer:has(button[type=submit]) {
    align-items: center;
}

.formButton {
    width: fit-content;
    background-color: var(--submitBtnFill);
    border: 2px solid var(--submitBtnFill);
    color: var(--submitBtnTxt);
    padding: 0.4em 1em;
    font-size: 18pt;
    font-weight: lighter;
}
/* ---> */

/*Error messages form input fields*/
.formErrorTxt {
    color: var(--formError);
    display: none;
}

.inputContainer:has(.form-control.is-valid) .formErrorTxt  {
    display: none;
}

.inputContainer:has(.form-control.is-invalid) .formErrorTxt {
    display: block;
}

/* <--- Color of border and shadow when field is focused*/
.form-control:focus {
    border-color: var(--formDark);
    box-shadow: 0 0 0 0.2rem var(--formShadow);
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: var(--formOk);
}

    .form-control.is-valid:focus, .was-validated .form-control:valid:focus {
        border-color: var(--formOk);
    }

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--formError);
}

    .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
        border-color: var(--formError);
    }
/* ---> */

.colorInput.is-valid, .colorInput.was-validated, .colorInput:valid {
    width: fit-content;
    border-radius: 50%;
    border: 2px solid transparent;
}

/* <--- Range input field styling */
.rangeBox {
    position: relative;
}

.showValue {
    width: 75%;
}

.rangeValue {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: fit-content;
    color: var(--formRangeMark);
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: var(--formInput);
    padding: 5px 10px;
    margin-left: 8px;
}

    .rangeValue::after {
        position: absolute;
        top: 8px;
        left: -7px;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-right: 7px solid var(--formInput);
        border-bottom: 7px solid transparent;
        content: '';
    }

datalist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    writing-mode: var(--writingDirection);
    position: relative;
}

    datalist option {
        padding: 0;
        position: absolute;
        left: 162px;
        transform: translateX(-50%);
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        background: var(--rangeKnob);
        border-radius: 50px;
    }

    input[type=range]::-webkit-slider-thumb {
        background: var(--rangeLine);
        margin-top: -5px;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: var(--rangeKnob);
    }

    input[type=range]::-moz-range-track {
        background: var(--rangeKnob);
    }

    input[type=range]::-moz-range-thumb {
        background: var(--rangeLine);
    }

    input[type=range]::-ms-track {
        background: var(--rangeKnob);
        border-color: var(--rangeKnob);
        color: var(--rangeKnob);
    }

    input[type=range]::-ms-fill-lower {
        background: var(--rangeKnob);
    }

    input[type=range]::-ms-fill-upper {
        background: var(--rangeKnob);
    }

    input[type=range]::-ms-thumb {
        background: var(--rangeLine);
    }

    input[type=range]:focus::-ms-fill-lower {
        background: var(--rangeKnob);
    }

    input[type=range]:focus::-ms-fill-upper {
        background: var(--rangeKnob);
    }

/* ---> */
/* <--- File input field styling */
.fileInputContainer {
    border: 2px dashed rgba(198, 198, 198, 0.65);
    border-radius: 10px;
    padding: 1.5em;
    text-align: center;
}

    .fileInputContainer p {
        color: var(--formPlaceholder);
    }

.fileBrowser {
    text-decoration: none;
    cursor: pointer;
    color: var(--highlight) !important;
    border-bottom: 3px dotted var(--dotedBorder);
}

.uploadIcons {
    color: var(--formIcons);
    opacity: 0.55;
    display: flex;
    justify-content: space-evenly;
    height: 5em;
    margin-bottom: 2em;
}

.fileUploaded {
    flex-direction: column;
    align-items: center;
    height: auto;
}

.bi {
    font-size: 3em;
}

.bi-file-earmark-image {
    transform: rotate(-45deg);
    display: flex;
    align-items: flex-end;
}

.bi-file-earmark-text {
    display: flex;
    align-items: flex-start;
}

.bi-file-earmark-pdf {
    transform: rotate(45deg);
    display: flex;
    align-items: flex-end;
}

.fileInput {
    display: none;
}

.fileName {
    margin: unset !important;
}
/* ---> */

/* <--- Collapse styling */
.collapseBtn {
    width: fit-content;
    color: var(--collapseBtnTxt);
    background-color: var(--collapseBtnFill);
    border: 2px solid var(--collapseBtnFill);
    margin: 0 0 1em 0;
}

.collapseArrowDiv {
    display: flex;
    align-items: center;
}

    .collapseArrowDiv button {
        border-radius: 50px;
    }

    .collapseArrowDiv button i {
        font-size: 1.5em;
    }

    .collapseArrowDiv p {
        margin-left: 1em;
    }

/* ---> */
/* <--- Dropdown Select */
.choices__inner {
    padding: 0 0.5em;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    font-size: 1rem;
    background-color: var(--formWhite);
    min-height: unset;
}

.choices__input {
    background-color: var(--formWhite);
    padding: .375rem .75rem;
    font-size: 1rem;
    margin: 0;
}

.choices__list--multiple .choices__item {
    background-color: var(--highlight);
    border-color: var(--highlight);
    color: var(--dropdownText);
}

.choices[data-type*=select-one] .choices__inner {
    padding: 3.75px;
}
/* ---> */

@media only screen and (min-width: 850px) {
    .formBox {
        width: 70%;
    }
}

@media only screen and (min-width: 600px) {
    /* <--- Button styles*/
    .formButton:hover {
        background-color: var(--submitBtnTxt);
        border-color: var(--submitBtnFill);
        color: var(--submitBtnFill);
    }
    /* ---> */

    /* <--- Collapse styling */
    .collapseBtn:hover {
        color: var(--collapseBtnFill);
        background-color: var(--collapseBtnTxt);
        border-color: var(--collapseBtnFill);
    }
    /* ---> */
}