HTML, BODY {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #161616 !important;
    color: #a5a5a5;
    font-size: 1rem;
}

.bgImg {
    position: absolute;
    z-index: 0;
    top: 0;
    height: 100%;
}

.body-cnt {
    width: 100%;
    height: 100%;
    background-color: #161616;
    /*background: radial-gradient(circle farthest-side at 50% 65%, #3D3C41 0.01%, #0D0D0D 60%);*/
    /*background-image: url(../assets/images/global-bg.svg);*/
    background-image: url(../assets/images/special-bg.svg);
    background-repeat: no-repeat;
    background-position-x: 50%;
    /*background-size: contain;*/
    background-size: cover;
}

.logo-login-cnt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 65.555vh;
    padding: 10.555vh 0 16.111vh;
}

.spinner-cnt {
    position: relative;
    width: 27.555vh;
    height: 32.222vh;
    margin: auto;
}

.logo-cnt {
    width: 19.3577vh;
    height: 3.5555vh;
    margin: auto;
    background-image: url(../assets/images/logo.svg);
    background-repeat: no-repeat;
}

.login-frm {/*290 180*/
    display: flex;
    box-sizing: border-box;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    width: 32.22vh;
    height: 20vh; /*  + 3.333vh */
    margin: auto;
    background-color: #232227;
    padding: 3.666vh 0;
    border-width: 0.2222vh;
    box-shadow: 0 0 0.1rem 0.1rem rgba(0, 0, 0, 0.5);
}

.loginBtn, .txtInput {
    display: block;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    outline: none;
    border: none;
    padding: 0;
    margin: auto;
    background-repeat: no-repeat;
    background-color: transparent;
    box-sizing: border-box;
    text-align: center;
    
}

.loginBtn {/*200 40*/
    width: 22.22vh;
    height: 4.444vh;
    background-image: url(../assets/images/btn/btn.svg);
    cursor: pointer;
    color: #D4D4D4;
    text-transform: uppercase;
    font-weight: bold;
}

.loginBtn:hover {
    background-image: url(../assets/images/btn/btn-h.svg);
    color: #fff;
}

.loginBtn:active {
    background-image: url(../assets/images/btn/btn-a.svg);
    color: #fff;
}

.txtInput {
    margin: auto;
    padding: 0;
    /*border: 1px solid yellow;*/
    width: 22.22vh;
    height: 3.333vh;
    min-height: 3.333vh;
    color: #D4D4D4;
    background-image: url(../assets/images/input/input.svg), url(../assets/images/input/input-a.svg);
    line-height: 3.333vh;
}

.txtInput:active, .txtInput:focus {
    background-image: url(../assets/images/input/input-a.svg), url(../assets/images/input/input.svg);
}

.txtInput:focus {
    background-image: url(../assets/images/input/input-a.svg), url(../assets/images/input/input.svg) !important;
}

::-webkit-input-placeholder {
    font-size: 0.8rem;
    opacity: 0.7;
    vertical-align: middle;
}
::-moz-placeholder {
    font-size: 0.8rem;
    opacity: 0.7;
    vertical-align: middle;
}

:-ms-input-placeholder {
    font-size: 0.8rem;
    opacity: 0.7;
    vertical-align: middle;
}

:-moz-placeholder {
    font-size: 0.8rem;
    opacity: 0.7;
    vertical-align: middle;
}

::placeholder {
    font-size: 0.8rem;
    opacity: 0.7;
    vertical-align: middle;
}

/*
@media screen and (orientation: landscape) {
    .logo-login-cnt {
        height: 84.285vh;
        padding: 2.857vh 0;
    }

    .spinner-cnt {
        width: 27.777vh;
        height: 32.2222vh;
    }

    .logo-cnt {
        width: 24.888vh;
        height: 4.57vh;
    }

    .login-frm {
        width: 42.57vh;
        height: calc(26.4278vh + 4.2857vh);
        padding: 4.5714vh 0;
        border-width: 0.2857vh;
        border-style: solid;
        border-image: 
            linear-gradient(to bottom, #202020 0%, #717174 50%, #2C2C2C 100%) 1 100%;
        -moz-border-image:
            -moz-linear-gradient(to bottom, #202020 0%, #717174 50%, #2C2C2C 100%) 1 100%;
        -o-border-image:
            -o-linear-gradient(to bottom, #202020 0%, #717174 50%, #2C2C2C 100%) 1 100%;
        border-image:
            linear-gradient(to bottom, #202020 0%, #717174 50%, #2C2C2C 100%) 1 100%;
    }

    .loginBtn, .txtInput {200 40
        width: 28.57vh;
        height: 5.7142vh;
    }
}
*/


@media screen and (orientation: portrait) {
    .body-cnt {
        background-size: cover;
    }
}

.footer-title {
    color: #AAAAB7;
    margin: 0 auto;
}

canvas {
    position: absolute;
    left: -50%;
    top: calc(-50% + 15px);
}

.warning {
    position: absolute;
    display: none;
    width: 100%;
    height: 3.666vh;
    bottom: 0;
    font-size: 1.4vh;
    font-weight: bold;
    color: #DB423C;
    margin: 0 auto;
    text-align: center; 
    /*display: flex;*/
    justify-content: center;
    line-height: 250%;
}

.worningIcon {
    width: 1.666vh;
    height: 1.555vh;
    background-image: url(../assets/images/warning.svg);
    align-self: center;
}

footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 7.777vh;
    font-size: 0.7rem;
}