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

.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-blue);
    color: var(--bs-secondary);
}

#logon-template-component .logon-template-header {
    justify-content: start !important;
    background-color: #fff;
}

.logon-template-body {
    background-image: url('../images/Login.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (min-width:900px) {
    .logon-main-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-20%, -50%);
    }
}

@media (max-width:899px) {

    .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;
    }
}