@layer base, components, utilities;


@import url("_content/Auto.Blazor/css/bootstrap/bootstrap.min.css") layer(base.bootstrap);
@import url("_content/Radzen.Blazor/css/standard-base.css") layer(base.radzen);
@import url("_content/Auto.Blazor/css/auto.css") layer(base.auto);

@import url("LeaseManager.Client.styles.css") layer(app); 

#app-loading {
    height: 100%;
    width: 100%;
    margin: 0;
    position: fixed;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
    font-size: 18px;
}

#app-loading .range {
    position: relative;
    background-color: #fff;
    width: 300px;
    height: 30px;
    transform: skew(30deg);
    font-family: 'Roboto', monospace;
    border: 1px solid #000;
}

#app-loading .range:before {
    --width: var(--blazor-load-percentage, 0%);
    width: var(--width);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0,116,221,1);
    z-index: 0;
}

#app-loading .range:after {
    content: var(--blazor-load-percentage-text, "0%");
    color: #fff;
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%) skewX(-30deg);
    z-index: 1;
}

#app-loading .range__label {
    transform: skew(-30deg) translateY(-100%);
    line-height: 1.5;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    background: #ffc6c6;
}

[class*="grid-columns-"] {
    display: grid;
    gap: 1rem;
}

.grid-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.d-grid-2 {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.d-grid-2 .rz-text-body1 {
    font-size: clamp(.75rem, 1.25vw, 0.875rem);

    @media only screen and (max-width: 1550px){
        font-size: clamp(.65rem, 1.25vw, 0.775rem);
    }
}

.calculation-form .auto-form-label {
    font-size: 0.75rem;
}

.calculation-form .label-text {
    font-size: 0.75rem;
}

.d-grid-2 h6 {
    font-size: clamp(.75rem, 1.25vw, 0.875rem);

    @media only screen and (max-width: 1550px) {

        font-size: clamp(.65rem, 1.25vw, 0.775rem);
    }

    font-weight: 700;
}