/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
    font-family: Poppins-SemiBold;
    src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}

/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

/*---------------------------------------------*/
a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

    a:focus {
        outline: none !important;
    }

    a:hover {
        text-decoration: none;
        color: black;
    }

.navbar-vf {
    position: relative;
    display: -ms-flexbox;
    display: grid;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem;
}

    .navbar-vf .dropdown {
        display: contents;
    }
/*---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}


/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

    textarea:focus, input:focus {
        border-color: transparent !important;
    }

        input:focus::-webkit-input-placeholder {
            color: transparent;
        }

        input:focus:-moz-placeholder {
            color: transparent;
        }

        input:focus::-moz-placeholder {
            color: transparent;
        }

        input:focus:-ms-input-placeholder {
            color: transparent;
        }

        textarea:focus::-webkit-input-placeholder {
            color: transparent;
        }

        textarea:focus:-moz-placeholder {
            color: transparent;
        }

        textarea:focus::-moz-placeholder {
            color: transparent;
        }

        textarea:focus:-ms-input-placeholder {
            color: transparent;
        }

input::-webkit-input-placeholder {
    color: black;
}

input:-moz-placeholder {
    color: black;
}

input::-moz-placeholder {
    color: black;
}

input:-ms-input-placeholder {
    color: black;
}

textarea::-webkit-input-placeholder {
    color: black;
}

textarea:-moz-placeholder {
    color: black;
}

textarea::-moz-placeholder {
    color: black;
}

textarea:-ms-input-placeholder {
    color: black;
}

label {
    margin: 0;
    display: block;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}
/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

    button:hover {
        cursor: pointer;
    }

iframe {
    border: none !important;
}

.appicon {
    width: 35px;
    height: 35px;
}

/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
    font-family: Poppins-Regular;
    font-size: 13px;
    color: black;
    line-height: 1.5;
}


/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
    width: 100%;
    margin: 0 auto;
}

.container-login200 {
    width: 100%;
    min-height: 5vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}


.container-login100 {
    width: 100%;
    min-height: 15vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

    .container-login100::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.wrap-login100 {
    max-width: 520px;
    min-width: 290px;
    min-height: 50vh;
    border-radius: 10px;
    overflow: hidden;
    padding: 100px 55px 37px 55px;
    background-color: #fdd804;
    /*//margin-top: 20vh;*/
}

.wrap-logout {
    max-width: 500px;
    min-width: 360px;
    min-height: 30vh;
    border-radius: 10px;
    overflow: hidden;
    padding: 100px 55px 37px 55px;
    background-color: #fdd804;
}

.wrap-login200 {
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    padding: 80px 55px 37px 55px;
    background-color: #fdd804;
    background-color: #fdd804;
}

.login-page .page-header {
    /*margin-top: 5vh;*/
    display: grid;
}

.page-header span {
    font-size: larger;
}


/*------------------------------------------------------------------
[ Form ]*/
.login100-form {
    width: 100%;
}

.login100-form-logo {
    font-size: 60px;
    color: #333333;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 50px;
}

    .login100-form-logo img {
        width: 100%;
    }

.login100-form-title {
    font-family: Poppins-Medium;
    font-size: 30px;
    color: black;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    display: block;
}

.login100-form-subtitle {
    font-family: Poppins-Medium;
    font-size: 16px;
    color: black;
    text-align: center;
    display: block;
}


/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid rgba(255,255,255,0.24);
    margin-bottom: 30px;
}

.input100 {
    font-family: Poppins-Regular;
    font-size: 16px;
    color: black;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 45px;
    background: transparent;
    padding: 0 5px 0 38px;
}

/*---------------------------------------------*/
.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

    .focus-input100::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        background: #fff;
    }

    .focus-input100::after {
        font-family: Material-Design-Iconic-Font;
        font-size: 22px;
        color: black;
        content: attr(data-placeholder);
        display: block;
        width: 100%;
        position: absolute;
        top: 6px;
        left: 0px;
        padding-left: 5px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }

.input100:focus {
    padding-left: 5px;
}

    .input100:focus + .focus-input100::after {
        top: -22px;
        font-size: 18px;
    }

    .input100:focus + .focus-input100::before {
        width: 100%;
    }

.has-val.input100 + .focus-input100::after {
    top: -22px;
    font-size: 18px;
}

.has-val.input100 + .focus-input100::before {
    width: 100%;
}

.has-val.input100 {
    padding-left: 5px;
}


/*==================================================================
[ Restyle Checkbox ]*/

.contact100-form-checkbox {
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 35px;
}

.input-checkbox100 {
    display: none;
}

.label-checkbox100 {
    font-family: Poppins-Regular;
    font-size: 16px;
    color: black;
    line-height: 1.2;
    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
}

    .label-checkbox100::before {
        content: "\f26b";
        font-family: Material-Design-Iconic-Font;
        font-size: 13px;
        color: transparent;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 2px;
        background: #fff;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

.input-checkbox100:checked + .label-checkbox100::before {
    color: #555555;
}


/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.login100-form-btn {
    font-family: Poppins-Medium;
    font-size: 18px;
    color: #555555;
    line-height: 1.2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 200px;
    height: 45px;
    border-radius: 14px;
    background: #999999;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.2s;
}

    .login100-form-btn::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        border-radius: 14px;
        background-color: #fff;
        top: 0;
        left: 0;
        opacity: 1;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }

    .login100-form-btn:hover {
        color: #fff;
    }

        .login100-form-btn:hover:before {
            opacity: 0;
        }


/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 2px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0px;
    pointer-events: none;
    font-family: Poppins-Regular;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f12a";
    font-family: FontAwesome;
    font-size: 16px;
    color: #c80000;
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}


#mydiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*max-height: -webkit-fill-available;*/
}

#welcome-div {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: -webkit-fill-available;
}

.col-center-block {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alert {
    position: fixed;
    width: 98%;
    margin: 0px 0px 0px 1vw !important
}

.logout-panel {
    text-align: center;
}

.navbar-nav .dropdown-menu {
    background-color: white;
    color: black;
    text-align: center;
}

.navbar-header:hover {
    color: black;
}

#loggedout-div {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: -webkit-fill-available;
}

.back-login {
}

.wrap-logout200 {
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    padding: 80px 55px 37px 55px;
    background-color: #fdd804;
    background-color: #fdd804;
}

/*------------------------------------------------------------------
[ Responsive ]*/
/*Only iPhone 5*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
    .wrap-login100 {
        padding: 60px 15px 17px 15px;
        min-height: 68vh;
        margin-left: 8.3%;
    }

    .wrap-logout {
        padding: 60px 15px 17px 15px;
        min-height: 45vh;
        margin-left: 8.3%;
    }


    .action-panel {
        margin-top: 2vh;
    }
}
/* Galaxy S5 portrait and landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    .wrap-login100 {
        padding: 80px 15px 17px 15px;
        min-height: 68vh;
        margin-left: 2.0%;
    }

    .wrap-logout {
        padding: 80px 15px 17px 15px;
        min-height: 45vh;
        margin-left: 2.0%;
    }
}
/* LG G5 LG G4 LG G3 portrait and landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    .wrap-login100 {
        padding: 80px 15px 17px 15px;
        min-height: 68vh;
        margin-left: 1.0%;
    }

    .wrap-logout {
        padding: 80px 15px 17px 15px;
        min-height: 44vh;
        margin-left: 1.0%;
    }
}
/* Galaxy S8 portrait and landscape */
@media screen and (device-width: 360px) and (device-height: 740px) and (-webkit-device-pixel-ratio: 3) {
    .wrap-login100 {
        padding: 100px 15px 17px 15px;
        min-height: 67vh;
        margin-left: 2.0%;
    }

    .wrap-logout {
        padding: 100px 15px 17px 15px;
        min-height: 44vh;
        margin-left: 2.0%;
    }
}
/* Galaxy S5 portrait and landscape */
@media screen and (device-width: 411px) and (device-height: 731px) and (-webkit-device-pixel-ratio: 2.6) {
    .wrap-login100 {
        padding: 100px 15px 17px 15px;
        min-height: 68vh;
        margin-left: 0.0%;
    }

    .wrap-logout {
        padding: 100px 15px 17px 15px;
        min-height: 45vh;
        margin-left: 0.0%;
    }
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        background-color: #fdd804;
    }

    .wrap-login100 {
        background-color: white;
        padding: 50px 15px 28px 15px;
        margin-top: 19vh;
        min-width: 280px;
        min-height: 50vh;
    }

    .wrap-logout {
        background-color: white;
    }

    .wrap-login200 {
        background-color: white;
        max-width: 68vw;
    }

    .wrap-logout200 {
        background-color: white;
        max-width: 68vw;
        padding: 80px 20px 17px 20px;
    }

    .wrap-input100 {
        width: 100%;
        min-width: 200px;
        position: relative;
        border-bottom: 2px solid #fdd804;
    }

    .label-checkbox100::before {
        background: #fdd804;
    }

    .login100-form-btn {
        background: #fdd804;
    }

        .login100-form-btn::before {
            background: #fdd804;
        }

    #welcome-div {
        top: 50%;
    }

    .wrap-logout {
        padding: 100px 15px 37px 15px;
    }

    #welcome-inner_div {
        text-align: center;
        bottom: 0;
        margin: 20px auto;
    }

    #loggedout-div {
        position: absolute;
        top: 50%;
        left: 12%;
        transform: translate(0%, -50%);
        max-height: -webkit-fill-available;
    }
}
/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375) and (max-device-height: 667) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    .wrap-login100 {
        margin-top: 30vh;
        padding: 65px 15px 10px 15px;
        margin-top: 19vh;
        min-height: 48vh;
    }

    .login-page .page-header {
        margin-top: -2vh;
    }

    #mydiv {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -60%);
    }
}
/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414) and (max-device-height: 736) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    .wrap-login100 {
        margin-top: 12px;
        padding: 70px 15px 10px 15px;
        margin-top: 48vh;
        min-height: 48vh;
    }

    .login-page .page-header {
        margin-top: -4vh;
    }

    #mydiv {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -60%);
    }
}
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .wrap-login100 {
        margin-top: 2px;
        padding: 100px 15px 20px 15px;
    }

    .login-page .page-header {
        margin-top: -2vh;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .wrap-login200 {
        padding: 80px 50px 17px 50px;
    }

    .login-page .page-header {
        margin-top: 6vh;
    }
}
/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}
/* Samsung Galaxy S9 S9+ S8 S8+ ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 740px) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .login-page .page-header {
        margin-top: 3vh;
    }
}
/* Samsung Galaxy S7 S7 Edge ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .login-page .page-header {
        margin-top: 3vh;
    }
}
/*
Phones                  Pixel Size      Viewport
Nexus 6P                1440 x 2560     412 x 732
Nexus 5X                1080 x 1920     412 x 732
Google Pixel 3 XL       1440 x 2960     412 x 847
Google Pixel 3          1080 x 2160     412 x 824
Google Pixel 2 XL       1440 x 2560     412 x 732
Google Pixel XL         1440 x 2560     412 x 732
Google Pixel            1080 x 1920     412 x 732
Samsung Galaxy Note 9   1440 x 2960     360 x 740
Samsung Galaxy Note 5   1440 x 2560     480 x 853
LG G5                   1440 x 2560     480 x 853
One Plus 3              1080 x 1920     480 x 853
Samsung Galaxy S9 +     1440 x 2960     360 x 740
Samsung Galaxy S9       1440 x 2960     360 x 740
Samsung Galaxy S8 +     1440 x 2960     360 x 740
Samsung Galaxy S8       1440 x 2960     360 x 740
Samsung Galaxy S7 Edge  1440 x 2560     360 x 640
Samsung Galaxy S7       1440 x 2560     360 x 640
Tablets
Nexus 9                 1536 x 2048     768 x 1024
Nexus 7 (2013)          1200 x 1920     600 x 960
Samsung Galaxy Tab 10   800 x 1280      800 x 1280
Chromebook Pixel        2560 x 1700     1280 x 850
*/
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}






.clear-fix {
    clear: both !important;
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

        li a:hover {
            background-color: #f5e692;
        }

#ctl02_XXX {
    display: block;
}

a.external-icon {
/*    position: absolute;
    right: -6%;
    width: 100px;*/
}

.externals-login{
    margin-top:2vh;
    margin-bottom:-2.5vh;
}

img.external-icon {
    width: 40px;
    height: 40px;
}

.unauthorized-body {
    margin: 0;
    padding: 20px;
    background-color: #FFC900;
    font-family: arial;
    height: 700px
}


.info {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 110%;
    text-transform: capitalize;
    color: #FFC900;
    font-weight: 700;
    background-color: #fff;
    width: 100%;
    text-align: center
}

.info a {
    text-decoration: none;
    color: #333;    
}

.info a:after {
    content: " | ";
    color: #FFC900
}

.info a:last-of-type:after {
    content: ""
}

.wholediv a{
    font-size:inherit;
}

.box {
    text-align: center;
    position: relative;
}

.box div {
    width: 250px;
    height: 80px;
    line-height: 80px;
    color: #ffc900;
    background-color: #fff;
    font-size: 280%;
    position: absolute;
    top: 410px;
    left: 40%;
    text-transform: capitalize;
    animation: moving 8s linear infinite;
    -webkit-animation: moving 8s linear infinite;
    -moz-animation: moving 8s linear infinite;
    -o-animation: moving 8s linear infinite;
    transform-origin: 50% -400%;
    -webkittransform-origin: 50% -400%;
    -moz-transform-origin: 50% -400%;
    -o-transform-origin: 50% -400%;
}

.box div:before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 45%;
    top: -350px;
}

.box div:after {
    content: "";
    width: 3px;
    height: 335px;
    background-color: #fff;
    display: block;
    position: absolute;
    left: 50%;
    top: -330px;
}

.box p {
    position: absolute;
    top: 500px;
    left: 38%;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    width: 300px
}

    .box p span {
        display: block;
        font-size: 300%
    }
.reason {
    color: black !important;
    text-transform: unset !important;
    margin-top: 90px;
}
.unauthorized-name {
    color: black !important;
    text-transform: unset !important;
    margin-top: 70px;
}
@keyframes moving {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg)
    }
}

@-webkit-keyframes moving {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg)
    }
}

@-moz-keyframes moving {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg)
    }
}

@-o-keyframes moving {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg)
    }
}