:root {
    /*--form-input-background-color: rgba(255, 255, 255, 0.7);*/
    --form-input-background-color: var(--black-white-with-theme);
    /*dark pink: #660066*/
}

[data-theme="dark"] {
    /*--form-input-background-color: var(--background-color);*/
    /*--form-input-background-color: var(--background-accent-4-color);*/
    --form-input-background-color: hsla(212, 28%, 24%, .5);
}

/*mobile first min-width sets base and content is adapted to computers.*/
@media (min-width: 100px) {

    .form-input-div {
        position: relative;
        margin-bottom: 20px;
    }

    .form-input-div:first-of-type {
        padding-top: 0;
    }

    .form-input§-div:last-of-type {
        padding-bottom: 0;
    }

    .form-input-div label {
        color: var(--black-white-opposite-theme);
    }

    .form-input-div label:not(.form-radio-input):not(.form-checkbox-input-container) {
        padding: 0 0 10px 6px;
        display: inline-block; /*For label to take into account padding*/
        letter-spacing: 0.02em;
        font-weight: 500;
    }

    /*Radio button styling https://moderncss.dev/pure-css-custom-styled-radio-buttons/*/
    .form-input-div label.form-radio-input, .form-radio-input {
        display: grid;
        grid-template-columns: 1em auto;
        gap: 0.5em;
        margin-left: 7px;
        cursor: pointer;
        align-items: center;
        margin-bottom: 7px;
    }

    .form-radio-input input[type="radio"] {
        appearance: none;
        background-color: var(--form-input-background-color);
        margin: 0;
        font: inherit; /*Inherit font size*/
        width: 1.15em;
        height: 1.15em;
        border: var(--border-thickness) solid var(--border-color);
        border-radius: 50%;
        /*adjustments so the input stays horizontally centered in relation to the first line of the label text*/
        /*transform: translateY(-0.075em);*/
        display: grid;
        place-content: center;
        cursor: pointer;
    }

    .form-radio-input input[type="radio"]:checked {
        background-color: var(--black-white-with-theme);
        border: var(--border-thickness) solid var(--theme-color);
    }

    .form-radio-input input[type="radio"]:before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--theme-color);
    }

    .form-radio-input input[type="radio"]:checked:before {
        transform: scale(1);
    }

    /*Checkbox styling similar to radio but square with checkmark*/
    .form-input-div label.form-checkbox-input-container, .form-checkbox-input-container {
        display: grid;
        grid-template-columns: 1.3em auto;
        gap: 0.5em;
        margin-left: 7px;
        cursor: pointer;
        align-items: center;
        margin-bottom: 7px;
    }

    input[type="checkbox"].form-checkbox-input {
        appearance: none;
        background-color: var(--form-input-background-color);
        margin: 0;
        font: inherit;
        /*width: 1.25em;*/
        /*height: 1.25em;*/
        width: 30px;
        height: 30px;
        border: var(--border-thickness) solid var(--border-color);
        border-radius: 10px;
        display: grid;
        place-content: center;
        cursor: pointer;
        box-shadow: var(--light-box-shadow);
    }


    input[type="checkbox"].form-checkbox-input:checked {
        background-color: var(--black-white-with-theme);
        /*border: var(--border-thickness) solid var(--theme-color);*/
        /*box-shadow: var(--light-box-shadow);*/
        /*border: none;*/
    }

    input[type="checkbox"].form-checkbox-input:before {
        content: "";
        width: 0.3em;
        height: 0.8em;
        border-right: 0.17em solid var(--theme-color);
        border-bottom: 0.17em solid var(--theme-color);
        transform: rotate(45deg) scale(0);
        transition: 120ms transform ease-in-out;
        transform-origin: center;
        /* Center the checkmark in the square */
        box-sizing: content-box;
    }

    input[type="checkbox"].form-checkbox-input:checked:before {
        transform: rotate(45deg) scale(1) translate(-1px, -1px);
    }

    .form-input-div input::placeholder, .form-input-div textarea::placeholder {
        color: var(--tertiary-text-color);
    }

    .form-input-div input:not([type="radio"]):not([type="checkbox"]), .form-input:not([type="radio"]):not([type="checkbox"]),
    .form-input-div textarea, textarea.form-input, .form-input-div select, select.form-input, .form-select {
        background-color: var(--form-input-background-color);
        /*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);*/
        /*border: none;*/
        /*border: 1px solid var(--primary-color);*/
        border: none;
        box-shadow: var(--light-box-shadow);
        font-size: 17px;
        width: 100%; /*Container should reduce width*/
        display: block;
        box-sizing: border-box;
        padding: 10px 15px;
        border-radius: 10px;
        color: var(--black-white-opposite-theme);
        position: relative;
        z-index: 1;
        transition: all 0.1s ease;
        outline-offset: 2px;
        /*outline: var(--border-thickness) solid var(--border-color);*/
    }

    .form-input-div input:not([type="radio"]):not([type="checkbox"]):not(:disabled):hover,
    .form-input:not([type="radio"]):not([type="checkbox"]):not(:disabled):hover,
    .form-input-div textarea:not(:disabled):hover,
    textarea.form-input:not(:disabled):hover,
    .form-input-div select:not(:disabled):hover,
    select.form-input:not(:disabled):hover,
    .form-select:not(:disabled):hover {
        /*Keep the same box shadow on hover*/
        /*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);*/
        /*box-shadow: 0 0 0 3px var(--theme-color-2);*/
        /*filter: brightness(110%);*/
        /*outline: 3px solid var(--border-color);*/
        box-shadow: var(--default-box-shadow);
    }

    .form-input-div input:not([type="radio"]):not([type="checkbox"]):focus,
    .form-input:not([type="radio"]):not([type="checkbox"]):focus, .form-input-div textarea:focus,
    textarea.form-input:focus, .form-input-div select:focus, select.form-input:focus {
        /*filter: brightness(120%);*/
        /*border-bottom: none;*/
        /*border: none;*/
        /*Override high specificity of :hover*/
        /*outline: 3px solid var(--theme-color-2) !important;*/
        box-shadow: var(--default-box-shadow);
        outline: 2px solid var(--text-color);
    }

    .form-input-div input, .form-input-div select, .form-input-div textarea, .form-radio-input, .form-checkbox-input-container {
        letter-spacing: 0.02em;
    }

    .form-input:disabled, .form-select:disabled, .form-radio-input input:disabled, input.form-checkbox-input:disabled,
    .form-input-div input:disabled, .form-input-div select:disabled, .form-input-div input[type="radio"]:disabled, .form-input-div input[type="checkbox"]:disabled, .form-input-div textarea:disabled {
        /*Important needed as specificity is higher when setting the non-disabled value*/
        background-color: var(--background-accent-2-color) !important;
        color: grey !important;
    }

    .form-input-div select, .form-select {
        border: none;
        box-shadow: var(--light-box-shadow);
        /*font-size: 15px;*/
        width: 100%;
        display: block;
        padding: 10px 15px;
        border-radius: 10px;
        letter-spacing: 0.01em;
    }

    /* .form-input-div input[type=submit], .submit-btn {
         width: fit-content;
         min-width: 160px;
         float: right;
         color: var(--black-white-text-color);
         border-radius: 99px;
         padding: 12px 20px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
         background-color: var(--btn-color);
         letter-spacing: 0.05em;
         border: none;
         cursor: pointer;
         font-size: 100%;
         white-space: normal; !*Break when not enough space*!
         transition: filter 250ms;
     }

     .modal-form input[type=submit]:hover:enabled, .submit-btn:hover:enabled {
         filter: brightness(90%);
     }

     .modal-form input[type=submit]:focus:enabled, .submit-btn:focus:enabled {
         filter: brightness(80%) saturate(140%);
     }

     .form input[type=submit]:disabled, .submit-btn:disabled {
         background: var(--background-accent-4-color);
         color: grey;
         cursor: default;
     }*/
    /*When form input group is faulty after submit (server response)*/
    .input-group-error label, label.invalid-input {
        font-weight: bold;
    }

    .input-group-error input, input.invalid-input, textarea.invalid-input {
        outline: var(--border-thickness) solid var(--danger-color) !important; /*Important as form is overwritten by template specific css*/
        box-shadow: none !important;
    }

    .err-msg {
        padding-top: 10px;
        display: block;
        color: var(--danger-color) !important;
        font-size: 15px;
        font-weight: bold;
    }

    form .err-msg {
        padding-left: 15px;
    }

    #form-general-error-msg {
        margin-bottom: 20px;
    }

    .success-msg {
        font-weight: bold;
    }

    .input-warning {
        font-weight: 400;
        margin-top: 10px;
        display: inline-block;
        color: #d66500;
    }

    .content-below-input {
        margin-left: 15px;
    }


    /* Checkbox Chip Style */
    .checkbox-chip-container {
        /*No need for display flex as .checkbox-chip is a label and label is inline-block and has a padding left and bottom*/
    }

    .checkbox-chip {
        cursor: pointer;
        display: inline-block;
    }

    .checkbox-chip input {
        display: none;
    }

    .checkbox-chip span {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 20px;
        background-color: var(--form-input-background-color);
        /*border: 2px solid var(--border-color);*/
        color: var(--secondary-text-color);
        font-weight: 500;
        transition: all 0.15s ease;
        box-shadow: var(--light-box-shadow);
        font-size: 0.9em;
    }

    .checkbox-chip:hover span {
        background-color: var(--background-accent-1-color);
        border-color: var(--secondary-text-color);
        box-shadow: var(--default-box-shadow);
    }

    .checkbox-chip input:checked + span {
        background-color: var(--theme-color);
        border-color: var(--theme-color);
        color: white;
        box-shadow: var(--default-box-shadow);
    }

    /* Clear indicator that it can be unselected */
    .checkbox-chip input:checked + span::after {
        content: ' \2715'; /* Multiplication X */
        font-size: 0.8em;
    }

}

@media (min-width: 641px) {
    /*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
}

@media (min-width: 961px) {
    /*tablet, landscape iPad, lo-res laptops ands desktops*/

}

@media (min-width: 1025px) {
    /*big landscape tablets, laptops, and desktops*/

}

@media (min-width: 1281px) {
    /*hi-res laptops and desktops*/
}