: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);
}

/*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) {
        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.7em;
        height: 0.7em;
        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, .form-checkbox-input {
        display: grid;
        grid-template-columns: 1.3em auto;
        gap: 0.5em;
        margin-left: 7px;
        cursor: pointer;
        align-items: center;
        margin-bottom: 7px;
    }

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

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

    .form-checkbox-input input[type="checkbox"]:before {
        content: "";
        width: 0.3em;
        height: 0.6em;
        border-right: 0.2em solid var(--theme-color);
        border-bottom: 0.20em 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;
    }

    .form-checkbox-input input[type="checkbox"]: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 {
        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: 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 {
        /*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);
    }

    .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) !important;
    }
    .form-input-div input, .form-input-div select, .form-input-div textarea, .form-radio-input, .form-checkbox-input{
        letter-spacing: 0.02em;
    }

    .form-input:disabled, .form-select:disabled, .form-radio-input input:disabled, .form-checkbox-input 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-4-color) !important;
        color: grey;
    }

    .form-input-div select, .form-select {
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /*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;
    }
}

@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*/
}