:root .nice-form-group {
    /* Variables for nice-forms overrides */
    --nf-input-focus-border-color: var(--color-vinacles-blue);
    --nf-label-font-family: 'Vinacles', sans-serif;
    --nf-small-font-size: calc(var(--nf-input-size) * 0.9);
    --nf-input-size: 0.9rem;
    --nf-input-font-family: 'Verdana', sans-serif;

    .form-check > label {
        @apply font-normal text-[var(--nf-label-color)] text-[var(--nf-label-font-size)] mb-[calc(var(--nf-input-size)/2)] whitespace-normal;
        font-weight: var(--nf-label-font-weight);
        font-family: var(--nf-label-font-family);
    }

    input[type="file"] {
        @apply font-sans p-1 m-[-4px] relative outline-none opacity-80 text-base cursor-pointer;
        font-family: var(--nf-label-font-family);
        font-size: 1rem;

        &::file-selector-button {
            @apply opacity-100 rounded px-4 h-10 bg-white border border-black/16 shadow-sm m-[0.5ch_1ch] text-[90%];
            box-shadow: 0px 1px 0px rgba(0,0,0,0.05);
            color: var(--color-vinacles-text);
            cursor: pointer;

            @supports (-moz-appearance: none) {
                color: var(--color-vinacles-text);
            }

            &:hover {
                @apply bg-gray-100;
            }

            &:active {
                @apply bg-gray-200;
            }
        }

        /* Pseudo elements cannot be @apply */
        &::before {
            position: absolute;
            pointer-events: none;
            top: 19px;
            left: 25px;
            height: 20px;
            width: 20px;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
        }

        &::after {
            position: absolute;
            pointer-events: none;
            top: 16px;
            left: 40px;
            color: var(--color-vinacles-text);
        }

        &:focus-within::file-selector-button,
        &:focus::file-selector-button {
            outline: 2px solid var(--color-vinacles-text);
            outline-offset: 2px;
        }
    }

    @media (max-width: 768px) {
        input[type="file"] {
            @apply text-sm max-w-[17rem];
            font-size: 0.8rem;
        }
    }

    div.nice-form-group.input-group {
        @apply mt-0 grid grid-cols-[max-content_max-content_max-content] gap-x-1;

        > select {
            @apply pr-7;
        }
    }

    label.required:after {
        content: " *";
    }

    button {
        line-height: 2;
    }
}

/* License plate */
.kentekenplaat {
    @apply relative block rounded border-2 border-gray-800 whitespace-nowrap overflow-hidden;
    background-color: #343439;
    height: 45px;
    width: 190px !important;

    .kentekenplaat__landcode {
        @apply float-left flex items-center;
        background-color: #003399; /* eu background */
        width: 25px;
        height: 100%;
        padding: 4px 5px 4px 4px;
    }

    .kentekenplaat__form-control {
        @apply h-full pl-[25px];
    }

    .kentekenplaat__input {
        @apply bg-[#ffcc33] border-none outline-none w-full h-full uppercase text-center text-[31px];
    }
}