﻿body { font-family: Segoe UI, sans-serif !Important; margin: 0; }
.clear { clear: both; }
.loginLeftBlock { float: left; width: 70%; }
.imageWrapper img { width: 128px; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; }
    .imageWrapper img:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.loginLeftBlock .imageWrapper { width: 128px; margin: auto; cursor: pointer; position: absolute; top: 37%; left: 35%; }
.loginRightBlock { float: right; width: 30%; }
.loginWrapper { width: 92%; margin: auto; }
.loginRight { background: #f0f4f7; padding: 20px; margin-top: 50px; border-radius: 5px; box-shadow: 2px 2px 2px #000000; }
.loginBox { margin: auto; width: 100%; padding-bottom: 5px; padding-top: 5px; }
.control { margin-bottom: 25px; margin-top: 25px; }
.logonButton { margin-top: 40px; }
.siteSeal { padding-top: 18px; text-align: center; }
.rightLinks { text-align: center; color: #FFFFFF; }
    .rightLinks a { color: #02adeb; text-decoration: none; }
.message { margin-top: 10px; text-align: center; }
.loginLogoWrapper { width: 210px; margin: auto; }
.linkBarButton p { color: #0479c2; display: block; float: left; font-size: 12px; margin: 0; padding: 0; }
.linkBarButton { float: left; margin-right: 15px; }
.linkBarBtnWrap { width: 295px; margin: 20px auto 0px auto; }

/*--Do not change--*/
@media only screen and (min-width : 180px) and (max-width : 768px) {
    .loginWrapper { width: 100%; }
    .loginLeftBlock { width: 90%; margin: auto; float: none; }
    .loginRightBlock { width: 90%; margin: auto; float: none; }
    .loginRight { margin-top: 25px; }
    #htmlTag { background-size: initial !important; }
    .loginLeftBlock .imageWrapper { width: 128px; margin: auto; cursor: pointer; margin-top: 50px; position: inherit; }
}

@media only screen and (min-width : 768px) and (max-width : 1224px) {
}

@media only screen and (min-width : 1824px) {
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .loginWrapper { width: 100%; }
    .loginLeftBlock { width: 90%; margin: auto; float: none; }
    .loginRightBlock { width: 90%; margin: auto; float: none; }
    .loginRight { margin-top: 25px; }
    #htmlTag { background-size: initial !important; }
    .loginLeftBlock .imageWrapper { width: 128px; margin: auto; cursor: pointer; margin-top: 50px; position: inherit; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
}
.depMsg {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    animation: scrollText 10s linear infinite;
    color: white;
    font-size: 22px;
    font-weight: bold;

}
@keyframes scrollText {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}