.ImageContainer, .logon-toolbar::before {
    width: 130px;
    background-color: var(--bs-primary);
}

.ImageContainer {
    align-content: center;
    border: 0px !important;
    margin: -1px 0px;
}

.ImageContainer + *, .logon-toolbar {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

.logon-toolbar {
    display:flex;
}

.logon-toolbar::before {
    content: '';
    display: block;
    margin: calc(var(--bs-card-cap-padding-y) * -1) calc(var(--bs-card-cap-padding-x) * -1);
    margin-right: var(--bs-card-cap-padding-x);
}

.ImageContainer img.static-image {
    filter: brightness(100);
    width: 70px !important;
    height: 70px !important;
}

.logon-main {
    border: none;
    border-radius: 5px;
}

.card-body {
    padding: 0px !important;
}

.logon-main .dxbl-fl .dxbl-row {
    --dxbl-row-item-spacing-x: 0;
    --dxbl-row-item-spacing-y: 0;
}

 .logon-main .card-header {
    padding-left: calc(var(--bs-card-cap-padding-x) + 130px);
}

.logon-main .card-header {
    border: none !important;
    background-color: #fff;
}

.logon-main.card .card-header {
    background-color: var(--bs-primary);
    color: #fff;
}



.logon-template-body {
    position: relative;
    background-image: url('../images/FondoLogin.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.logon-template-body::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 70%, #0b1220 30%) 100% );
    mix-blend-mode: multiply;
    opacity: .92;
}


#logon-template-component .logon-template-header {
    position: absolute !important;
    top: 39%;
    left: 125px;
    z-index: 50;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}




    #logon-template-component .logon-template-header .card-header {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #logon-template-component .logon-template-header img,
    #logon-template-component .logon-template-header svg {
        height: 54px;
        width: auto;
        filter: brightness(0) invert(1);
        opacity: .96;
    }

    #logon-template-component .logon-template-header .dxbl-image,
    #logon-template-component .logon-template-header .dxbl-text {
        color: #fff !important;
        fill: #fff !important;
    }


@media (min-width:900px) {

    #logon-template-component .logon-template-header .header-logo {
        width: 220px;
        height: 90px;
        background-size: auto 80px;
    }

    .logon-main-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-20%, -50%);
    }
}

@media (max-width:899px) {

    #logon-template-component .logon-template-header {
        top: 18px;
        left: 22px;
    }

        #logon-template-component .logon-template-header img,
        #logon-template-component .logon-template-header svg {
            height: 42px;
        }

    .logon-toolbar::before, .ImageContainer {
        display: none!important;
    }

    .logon-main .card-header {
        padding-left: var(--bs-card-cap-padding-x) !important;
    }

    .logon-toolbar, .logon-main .card-header {
        margin-left: 0px;
    }
}