:root {
    --banner-height: 6.5rem;
    --login-box-width: 20rem;
    --full-page-height: calc(100vh - var(--banner-height));
}

body {
    margin-bottom: 0;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    display: block; /* or flex if you prefer */
}

.boxx-banner {
    min-height: var(--banner-height);
}

.login-box {
    min-width: var(--login-box-width);
    overflow: auto;
}

.login-box .alert.alert-light ul {
    margin-bottom: 0;
}

.bg-employer {
    background-color: var(--boxx-green);
}

.bg-hover-employer:hover {
    background-color: var(--boxx-green);
}

.bg-employee {
    background-color: var(--boxx-blue);
}

.bg-hover-employee:hover {
    background-color: var(--boxx-blue);
}

.bg-secondary-portal {
    background-color: var(--secondary-portal-color);
}

.bg-boxx {
    background-color: var(--boxx-orange);
}

.bg-hover-boxx:hover {
    background-color: var(--boxx-orange);
}

.bg-background {
    background-color: var(--background);
}

.bg-hover-employer .btn.btn-primary:hover {
    --secondary: var(--boxx-green);
}

.bg-hover-employee .btn.btn-primary:hover {
    --secondary: var(--boxx-blue);
}

.bg-hover-boxx .btn.btn-primary:hover {
    --secondary: var(--boxx-orange);
}

.full-page-height {
    height: var(--full-page-height);
}

h1 {
    font-family: 'Roboto-Light';
    font-weight: 300;
}

input.text-line {
    background-color: transparent;
    color: white;
    outline: none;
    border: none;
    border-bottom: solid white 1px;
    padding: 0.2rem 0.4rem;
}


/* floating line */

.floating-line {
    position: relative;
    margin-bottom: 1.5rem;
}

    .floating-line input, 
    .floating-line select {
        width: 100%;
        background-color: transparent;
        color: white;
        border: none;
        border-bottom: 1px solid white;
        padding: 0.5rem 0;
        font-size: 1rem;
        outline: none;
        transition: border-color 0.2s ease-in-out;
    }

        .floating-line input::placeholder {
            color: transparent;
        }

    .floating-line label {
        position: absolute;
        left: 0;
        top: 0.5rem;
        pointer-events: none;
        font-size: 1rem;
        color: white;
        transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
        transform-origin: 0 0;
    }

    .floating-line input:focus + label,
    .floating-line input:not(:placeholder-shown) + label,
    .floating-line select:focus + label,
    .floating-line select:valid + label {
        transform: translateY(-1.2rem) scale(0.85);
        color: white;
    }

    .floating-line input:focus,
    .floating-line select:focus {
        border-bottom-color: white;
    }

select.select-options-contrast option {
    color: black;
    background-color: white;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    box-shadow: inset 0 0 0px 1000px var(--secondary) !important;
    background-image: none !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.floating-line span.text-danger:not(:empty) {
    background: #ffffff;
    padding: 0.125rem 0.4rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-top: 0.25rem;
    line-height: 1;
}

.no-hover,
.no-hover .k-table-td {
    cursor: auto !important;
}

.no-hover-header th *,
.no-hover-header table *:has(th),
.no-hover-header table span.k-link {
    cursor: auto;
}

.k-grid.no-hover tbody > tr:not(.k-detail-row):hover,
.k-grid.no-hover .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
    background-color: unset;
}

.k-grid:not(.no-hover) .k-master-row:hover {
    background-color: var(--hover) !important;
    color: var(--hover-text);
}

/* Kendo editor */
.k-editor-toolbar.k-toolbar {
    justify-content: start;
    padding-top: 0;
    padding-bottom: 0;
}

.k-editor-toolbar .k-button.k-button-md {
    padding: 0;
}