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

body.portal {
    font-family: "Segoe UI", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math" !important;
    font-size: 15px;
    background-image: url('/images/login/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.dashboard #header-wrap {
    position: static !important;
    background-color: transparent;
}

.dashboard .header-wrap-clone {
    display: none !important;
}

.dashboard .gallery-fixed-btn-row {
    position: absolute;
    top: var(--menu-row-top-mobile);
}

@media (min-width: 576px) {
    .dashboard .gallery-fixed-btn-row {
        top: var(--menu-row-top);
    }
}

.dashboard #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: url('/images/DSC01933.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dashboard #content {
    flex: 1 0 auto;
    background-color: transparent;
}

.dashboard .login-header {
    color: unset;
}

#content .container {
    margin-top: 12%;
}

.main-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
}

.login-container {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(6px);
    z-index: 9;
    height: 497px;
    padding: 44px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
}

.lower-box {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(6px);
    z-index: 9;
    width: 440px;
    height: auto;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
}

.lower-box-content {
    min-height: 64px;
    padding: 12px 44px;
    display: flex;
    align-items: center;
}

.lower-box-key {
    background-image: url('/images/login/key.svg');
    background-size: cover;
    background-position: center;
    min-width: 32px;
    height: 32px;
}

.timer-box {
    display: none;
    color: green;
    width: 352px;
    padding: 6px 10px 6px 0px;
    font-size: inherit;
    font-weight: 400;
    line-height: 20px;
    margin: 16px 0px 16px 0px;
}

.error-messages {
    color: #D72727;
    font-size: 15px;
    padding-left: 12px;
}

.logo-placeholder {
    background-image: url('/images/login/FCL-grey.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 12px;
    width: 100%;
    height: 140px;
}

.contour {
    background: #111111 url('/images/dots-white-r.png') 100% 0% no-repeat;
    background-size: contain;
    padding-top: 18px;
}

.text-box {
    width: 440px;
    padding: 44px;
}

.top-box {
    background: #050505;
    width: 100vw;
    height: 430px;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
}

.bottom-box {
    background: rgba(128, 128, 128, 0.2);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.dashboard .login-container {
    background: #111111;
    backdrop-filter: none;
    box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.4);
    justify-content: unset;
    height: 430px;
    margin-bottom: 0px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px !important;
}

    .form-group.fh {
        height: 133px;
    }

    .form-group.fl {
        height: 143px;
    }

    .form-group .error-messages {
        font-family: inherit;
        font-size: 15px;
        font-weight: 400;
        color: #D72727;
        width: 352px;
        height: 20px;
        line-height: 20px;
        padding: 0px;
        margin-bottom: 91px;
    }

.login-header {
    font-size: 24px;
    font-weight: 600;
    color: #1B1B1B;
    text-align: left;
    margin-top: 12px;
}

.login-message {
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    color: #1B1B1B;
    line-height: 20px !important;
}

.username-input,
.password-input {
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #666;
    border-radius: 0px;
    width: 352px;
    padding: 6px 10px 6px 0px;
    font-size: inherit;
    font-weight: 400;
    line-height: 20px;
    margin: 16px 0px 16px 0px;
}

    .username-input::placeholder,
    .password-input::placeholder {
        color: #525252;
    }

    .username-input:focus, .password-input:focus {
        outline: none;
        border-bottom: 1px solid #0067b8;
        background-color: transparent;
    }

    .username-input:-webkit-autofill,
    .password-input:-webkit-autofill {
        color: inherit;
        background-color: #FFF !important;
        background-clip: content-box !important;
        -webkit-box-shadow: 0 0 0 1000px #FFF inset !important;
    }

.next-button {
    align-self: flex-end;
    width: 108px;
    height: 32px;
    padding: 4px 12px;
    background-color: #0067b8;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
}

    .next-button:hover {
        background-color: #004b85;
    }

.arrow-nav {
    display: flex;
    align-items: center;
    width: 100%;
}

.back-button {
    background-image: url('/images/login/arrow_left.svg');
    background-color: transparent;
    border-color: #808080;
    border-width: thin;
    border-radius: 3px;
    display: block;
    cursor: pointer;
    min-height: 26px;
    min-width: 26px;
    margin-right: 6px;
}

    .back-button:hover {
        background-color: rgb(255, 255, 255, 0.6);
    }

    .back-button.dark {
        background-image: url('/images/login/arrow_left_dark.svg');
        border-color: #999999;
    }

        .back-button.dark:hover {
            background-color: rgb(255, 255, 255, 0.18);
        }

.username-display {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    color: #1B1B1B;
    height: 24px;
    width: 100%;
    margin: 12px 0px 12px 0px;
}


.create-account {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #1B1B1B;
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0px 2px;
    margin-bottom: 45px;
}

    .create-account span {
        color: rgb(0, 103, 184);
    }

.version-label {
    position: fixed; /* Fix the position relative to the viewport */
    bottom: 10px; /* Distance from the bottom edge */
    right: 10px; /* Distance from the right edge */
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
    /*  background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    padding: 5px 10px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);  */
    z-index: 1000; /* Ensure it stays above other elements */
}

.version-label-static {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* Animation for fade-out and push left */
@keyframes nextgo {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-352px);
    }
}

/* Animation for sliding out and fading */
@keyframes nextcome {
    0% {
        opacity: 0;
        transform: translateX(352px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* Animation for fading in and sliding left */
@keyframes backgo {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 0;
        transform: translateX(352px);
    }
}

/* Animation for sliding out and fading */
@keyframes backcome {
    0% {
        opacity: 0;
        transform: translateX(-352px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}


@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Apply animations when classes are added */
.next-go {
    animation: nextgo 0.4s forwards;
}

.next-come {
    animation: nextcome 0.4s forwards;
}

.back-go {
    animation: backgo 0.4s forwards;
}

.back-come {
    animation: backcome 0.4s forwards;
}

.fade-out {
    animation: fadeout 0.4s forwards;
}

.fade-in {
    animation: fadein 1s forwards;
}

.fade-in-slow {
    animation: fadein 4s forwards;
}

@media (max-width: 1199px) {

    .top-box {
        width: auto;
    }
}


@media (max-width: 992px) {

    #content .container {
        margin-top: 28%;
    }
}

@media (max-width: 575px) {

    .dashboard #wrapper {
        background: #050505;
    }

    .dashboard #content {
        -webkit-text-size-adjust: 90%;
    }

    .col-xs-440 {
        flex: 0 0 auto;
        width: 100%;
    }

    .px-xs-0 {
        padding-right: 0;
        padding-left: 0;
    }

    .dashboard .main-box {
        background: #111111;
    }

    .dashboard .login-container {
        box-shadow: none;
    }

    .text-box {
        width: 396px;
    }

    .top-box,
    .bottom-box {
        display: flex;
        justify-content: center;
        box-shadow: none;
        height: auto;
    }

    .bottom-box {
        background-color: #050505;
    }

    .lower-box {
        width: 394px;
    }

    .username-input,
    .password-input,
    .error-messages {
        width: 306px !important;
    }
}

@media (min-width: 576px) {

    .col-sm-440 {
        flex: 0 0 auto;
        width: 440px;
    }
}