body {
    background-size: cover !important; /* This property ensures that the background image covers the entire viewport */
    background-repeat: no-repeat !important; /* Prevents the background image from repeating */
    background-position: center !important;
    height: 100vh;
    width: 100vh;
    margin: 0;
    padding: 0;
}

.logincentered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh !important;
    overflow: auto;
}

.logincentered-div {
    width: 420px;
    min-height: 30px;
    background-color: white;
    border-radius: 6px;
    padding: 0px 0px 20px 0px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .4);
}

    .logincentered-div a {
        color: #2D74C6 !important;
    }

#app {
    height: 100%;
    width: 100%;
    margin: 0;
}

.loginimgcontainer {
    text-align: center;
    padding-top: 40px;
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 16px;
    width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.loginfieldholder {
    padding-left: 64px;
    padding-right: 64px;
}

.loginimgcontainer img {
    /*height: 100%;*/
    max-height: 75px;
    width:100%;
    object-fit:contain;
}

.logindivtitle {
    text-align: center;
    padding: 8px 0px 20px 0px;
    font-weight: 500;
    font-size: 24px;
}

.logincentered-div button.btn.btn-primary {
    width: 100%;
    height: 38px;
    background-color: var(--secondary) !important;
    color: var(--secondary-text) !important;
    border: none !important;
}

    .logincentered-div button.btn.btn-primary:hover {
        background-color: var(--secondary) !important;
        color: var(--secondary-text) !important;
        opacity: .9;
    }

button.btn.btn-success {
    color: #fff !important;
    background-color: #5cb85c !important;
    border-color: #4cae4c !important;
}

.loginsmallfont {
    font-size: 11px;
}

.loginimgcontainer {
    background-image: url('../../Media/images/loginscreenlogobackground.png');
    background-size: cover; /* This property ensures that the background image covers the entire viewport */
    background-repeat: no-repeat; /* Prevents the background image from repeating */
    background-position: center;
}

#divErrorMessageHolder {
    margin-left: 64px;
    margin-right: 64px;
}

    #divErrorMessageHolder.pro-note.note-danger::before {
        float: left;
        width: 25px;
    }

/*Extra large devices (large desktops)*/
/*No media query since the extra-large breakpoint has no upper bound on its width*/
/* Change the autofill styles */
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 {
    border: inherit;
    transition: background-color 5000s ease-in-out 0s;
}

div:focus {
    outline-width: 0;
}

body {
    background: var(--login-light);
}

p {
    margin-bottom: 0; /* overriding styles.min.css */
}


#divMessage {
    text-align: center;
}

#app-container, #AppContainer {
    width: 100%;
    height: calc(100vh - 33px);
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}


.item {
    /*width: 66vw;*/
    width: 100%;
    margin: 8px 0;
}

.versionbottom.item {
    width: 100%;
    display: block;
    background: #FFF;
    position: fixed;
    padding: 10px 10px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 2;
    text-align: right;
    margin: 0;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0, .5);
    color: var(--mdc-theme-text-disabled-on-background);
}

.content-item {
    padding: 1em 0;
    line-height: 1.25em;
}

    .content-item.footer.full * {
        width: 100%
    }

    .content-item.footer.full button {
        border-radius: 24px;
    }

    .content-item a {
        color: var(--mdc-theme-primary);
    }

/* =========================================================== */
/*                   START MOBILE RESOLUTION                   */
/* =========================================================== */
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) { /* PHONE RESOLUTION */
    div #app-container {
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
    }

    .versionbottom.item {
        background: transparent;
        text-align: center;
        color: var(--primary);
        font-weight: bold;
        box-shadow: none;
    }
    .mobile { /* PHONE RESOLUTION */
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

        .mobile.blur { /* PHONE RESOLUTION */
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='8');
            -webkit-filter: url(#blur);
            filter: url(#blur);
            -webkit-filter: blur(8px);
            filter: blur(8px);
            height: 180%;
            width: 110%;
            margin: -15px;
            padding: 15px;
        }

    #blur-overlay { /* PHONE RESOLUTION */
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .mobile.blur.svgs { /* PHONE RESOLUTION */
        display: none;
    }

    .content-item.footer.full button {
        border-radius: 6px;
    }
}
/* ===================================== */
/* ======= END MOBILE RESOLUTION ======= */
/* ===================================== */
/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767px) {
}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991px) {
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199px) {
}