/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    FORM
    that implement the UU design system specifically for Sitevision

    Note! Background images in this file is copied from Designsystemet.
    CSS rules from Designsystemet are compressed by Sitevision and
    because these background images have spaces in the URL, they are
    not working. This is a bug in Sitevision and when this bug is fixed,
    these rules for background images can be removed from this file.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Color of form-text */
.form-text {
    color: var(--color-text-muted);
}

/* Color when focusing form controls */
.form-control:focus {
    box-shadow: none;
    outline: 3px solid var(--color-focus);
}

.form-select:focus {
    box-shadow: none;
    outline: 2px solid var(--color-focus);
    border-color: var(--color-focus);
}

/* Background images for input */

.was-validated .form-control:valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
    border-color: var(--color-success);
}

.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") !important;
    border-color: var(--color-success) !important;
}

.was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E");
    border-color: var(--color-danger);
}

.form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E") !important;
    border-color: var(--color-danger) !important;
}

.form-control.is-valid:focus {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 .25rem rgba(25, 135, 84, 0.25) !important;
}

.form-control.is-invalid:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, 0.25) !important;
}

/* Background images for select */

/* -webkit-appearance and -moz-appearance are added for backwards compatibility */
.form-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 2.5rem;
}

.was-validated .form-select:valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E");
}

.form-select.is-valid {
    border-color: var(--color-success) !important;
}

.form-select.is-invalid {
    border-color: var(--color-danger) !important;
}

/* Check input */

.form-check-input:checked[type='checkbox'] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Form group */

.form-group-toggle-button,
.form-group-toggle-button:hover {
    padding: 0.5rem 1rem !important;
}

.form-group-toggle-container {
    margin-bottom: 1rem;
}

.form-group-toggle-container.no-validation input:not(.form-multiple-select-option),
.form-group-toggle-container.no-validation textarea,
.form-group-toggle-container.no-validation select,
.form-group-toggle-container.no-validation .form-multiple-select {
    background-image: none !important;
    border-color: var(--color-form-control) !important;
}

.form-group-toggle-container.no-validation select,
.form-group-toggle-container.no-validation .form-multiple-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-group-toggle-container.no-validation input:focus,
.form-group-toggle-container.no-validation textarea:focus,
.form-group-toggle-container.no-validation select:focus,
.form-group-toggle-container.no-validation .form-multiple-select:focus {
    border-color: var(--color-form-control) !important;
    box-shadow: none !important;
}

.form-group-toggle-container.is-valid .form-group-toggle-button span,
.form-group-toggle-container.is-invalid .form-group-toggle-button span,
.form-group-toggle-container.no-validation .form-group-toggle-button span {
    flex-grow: 1;
}

.form-group-toggle-container.is-valid .form-group-toggle-button::after,
.form-group-toggle-container.is-invalid .form-group-toggle-button::after,
.form-group-toggle-container.no-validation .form-group-toggle-button::after {
    background-size: 24px;
    content: ' ';
    display: inline-block;
    height: 24px;
    margin-left: 8px;
    min-width: 24px;
    vertical-align: bottom;
}

.form-group-toggle-container.is-valid .form-group-toggle-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}

.form-group-toggle-container.is-invalid .form-group-toggle-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E");
}

/* Inline form */

@media (min-width: 992px) {
    .form-label-inline {
        margin-right: 1rem;
    }

    .form-check-inline-lg {
        display: inline-block;
        margin-right: 1rem;
    }

    .form-check-inline-lg .form-check-label {
        display: inline;
    }

    .form-check-input-inline {
        float: none !important;
    }
}

/* Multiple select */

.form-multiple-select {
    padding: 0.575rem 2.25rem 0.575rem 0.75rem;
}

.form-multiple-select-options-container {
    position: relative;
    z-index: 10;
}

.form-multiple-select-options {
    background-color: var(--color-white);
    border-radius: 0.25rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    left: 0;
    max-height: 12rem;
    overflow-y: auto;
    padding: 1rem;
    position: absolute;
    scrollbar-color: var(--color-grey-dark) var(--color-grey-light);
    scrollbar-width: thin;
    top: 0;
    width: 100%;
    z-index: 1;
}

@media (min-width: 1200px) {
    .form-multiple-select-options {
        max-height: 20rem;
    }
}

.form-multiple-select-options::-webkit-scrollbar {
    width: 11px;
}

.form-multiple-select-options::-webkit-scrollbar-track {
    background: var(--color-grey-light);
}

.form-multiple-select-options::-webkit-scrollbar-thumb {
    background-color: var(--color-grey-dark);
    border-radius: 6px;
    border: 3px solid var(--color-grey-light);
}

.form-multiple-select-option-container {
    margin-bottom: 0.5rem;
}

.form-multiple-select-option-container:last-child {
    margin-bottom: 0;
}

.form-multiple-select-option,
.form-multiple-select-label {
    cursor: pointer;
}

.form-multiple-select-option:checked {
    background-color: var(--color-active-grey);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    border-color: var(--color-active-grey);
}

.form-multiple-select-option:valid {
    border-color: var(--color-text) !important;
}

.form-multiple-select-option:valid:checked {
    background-color: var(--color-text) !important;
}

.form-multiple-select-option:valid~.form-multiple-select-label {
    color: var(--color-text) !important;
}

/* File input */

.form-file-input input[type='file'] {
    display: none;
}

.form-file-input input[readonly] {
    background-color: white;
    border: 1px solid var(--color-form-control) !important;
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    color: var(--color-text);
    cursor: pointer !important;
}

.form-file-input input[readonly].is-valid {
    border-color: var(--color-success) !important;
}

.form-file-input input[readonly].is-invalid {
    border-color: var(--color-danger) !important;
}

.form-file-input:hover .button {
    background-color: var(--color-button-hover);
}



/********************************

Forms from Ungapped

********************************/

form[action*="ungapped.io"],
form[action*="ungpd.com"] {
    margin-bottom: 1.5rem;
}

form[action*="ungapped.io"] legend,
form[action*="ungpd.com"] legend {
    font-size: 1rem;
    margin-top: 1.5rem;
}

form[action*="ungapped.io"] label,
form[action*="ungpd.com"] label {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
}

form[action*="ungapped.io"] br+label,
form[action*="ungpd.com"] br+label,
form[action*="ungapped.io"] br+input[type=hidden]+label,
form[action*="ungpd.com"] br+input[type=hidden]+label {
    margin-top: 1rem;
}

form[action*="ungapped.io"] label+br+label,
form[action*="ungpd.com"] label+br+label {
    margin-top: -0.5rem;
}

form[action*="ungapped.io"] input[type="text"],
form[action*="ungpd.com"] input[type="text"],
form[action*="ungapped.io"] input[type="email"],
form[action*="ungpd.com"] input[type="email"],
form[action*="ungapped.io"] input[type="number"],
form[action*="ungpd.com"] input[type="number"] {
    width: 100%;
}

form[action*="ungapped.io"] label:has(input[type="checkbox"]),
form[action*="ungpd.com"] label:has(input[type="checkbox"]),
form[action*="ungapped.io"] label:has(input[type="radio"]),
form[action*="ungpd.com"] label:has(input[type="radio"]) {
    padding-left: 1.5em;
}

form[action*="ungapped.io"] label + br + label:has(input[type="checkbox"]),
form[action*="ungpd.com"] label + br + label:has(input[type="checkbox"]),
form[action*="ungapped.io"] label + br + label:has(input[type="radio"]),
form[action*="ungpd.com"] label + br + label:has(input[type="radio"]) {
    margin-top: -1.5em;
}

form[action*="ungapped.io"] input[type="checkbox"],
form[action*="ungpd.com"] input[type="checkbox"],
form[action*="ungapped.io"] input[type="radio"],
form[action*="ungpd.com"] input[type="radio"] {
    appearance: none;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: .25em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    float: left;
    height: 16px;
    margin-left: -1.5em;
    margin-top: .25em;
    padding: 7.5px;
    print-color-adjust: exact;
    vertical-align: top;
    width: 15px;
}

form[action*="ungapped.io"] input[type="checkbox"]:checked,
form[action*="ungpd.com"] input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-color: #0d6efd;
    border-color: #0d6efd;
}

form[action*="ungapped.io"] input[type="radio"]:checked,
form[action*="ungpd.com"] input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    background-color: #0d6efd;
    border-color: #0d6efd;
}

form[action*="ungapped.io"] input[type="radio"],
form[action*="ungpd.com"] input[type="radio"] {
    border-radius: 50%;
}

form[action*="ungapped.io"] input[type="checkbox"]+span,
form[action*="ungpd.com"] input[type="checkbox"]+span,
form[action*="ungapped.io"] input[type="radio"]+span,
form[action*="ungpd.com"] input[type="radio"]+span {
    display: block;
    margin-left: 5px;
    max-width: 50ch;
    width: calc(100% - 20px);
}

form[action*="ungapped.io"] button[type="submit"],
form[action*="ungpd.com"] button[type="submit"] {
    margin-top: 1rem;
}

form[action*="ungapped.io"] br+button[type="submit"],
form[action*="ungpd.com"] br+button[type="submit"] {
    margin-top: -2rem;
}