:root {
    --fs-normal: 3vw;
    --small-icon: 2.5vh;
    --width-contain: 60vw;
    --background-color-dark: #333333;
    --background-color: #FFFFFF;
    --text-color-dark: #212529;
    --text-color: #F8F9FA;
    --main-color: #8BCD62;
    --warning-color: #EF8354;
    --button-warning-color: #b96845;
    /* ThuyTrang 8/2/2023 Add button register Add↓*/
    --text-color-register: #487a42;
    /* ThuyTrang 8/2/2023 Add button register Add↑*/
}

@media screen and (max-width: 500px) {
    :root {
        --fs-normal: 4vw;
        --width-contain: 90vw;
    }
}

html,
body {
    height: 100vh;
    font-size: var(--fs-normal);
    overflow-x: hidden;
}

body {
    display: flex;
    align-items: center;
    /*    padding-top: 40px;
    padding-bottom: 40px;*/
    color: var(--text-color-dark);
}

.form-signin {
    width: 100%;
    max-width: var(--width-contain);
    padding: 15px;
    margin: auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

.btn-primary {
    background-color: #ef8354;
    border-color: #ef8354;
    border-radius: 50px;
}
    .btn-primary:hover {
        background-color: #ef8354;
        border-color: #ef8354;
        border-radius: 50px;
    }

    .checkbox{
        margin: 1rem auto !important;
    }

.btn-primary:active {
    background-color: #b96845;
    border-color: #b96845;
}

.forgot {
    text-decoration: none;
    color: var(--warning-color);
}

.form-control {
    border-radius: 50px;
    font-weight: bold;
}

    .form-select:focus, .form-control:focus {
        border-color: var(--main-color);
        outline: none !important;
        box-shadow: none !important;
    }

.btn {
    outline: none !important;
    box-shadow: none !important;
}

/* PhuPhan 21/07/2022 Show/Hidden Password Add ↓*/
.show-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

    .show-password .btn-password {
        color: #ABABAB;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .show-password .btn-password.hidden-icon {
            display: none;
        }

.relative-area {
    position: relative;
}

.bottom-absolute-area {
    position: absolute;
    bottom: 0;
}
/* PhuPhan 21/07/2022 Show/Hidden Password Add↑*/

/* PhuPhan 2022/09/23 スマホ版開発 Add↓*/
.spinner {
    background: rgba(75, 75, 75, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1999;
    width: 100vw;
    height: 100vh;
}
/* PhuPhan 2022/09/23 スマホ版開発 Add↑*/
.form-signin img {
    width: 90%;
}

#chkRememberMe {
    width: var(--small-icon);
    height: var(--small-icon);
}

.form-floating svg {
    width: var(--small-icon);
    height: var(--small-icon);
}

.fix-icon-middle-Y {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fix-icon-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#notification .modal-content {
    padding: 0.5rem;
}
#notificationContent {
    padding: 1rem 0;
}

.btn-type {
    width: 90%;
    border-radius: 50px;
    color: var(--text-color);
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    margin: auto;
}

    .btn-type:active {
        color: var(--text-color);
        background-color: var(--button-warning-color);
        border-color: var(--button-warning-color);
        /*background-color: var(--warning-color);
        opacity: 0.7;*/
    }

    .btn-type:hover {
        color: var(--text-color);
    }

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* ThuyTrang 8/2/2023 Add button register Add↓*/
.register {
    text-decoration: none;
    color: var( --text-color-register) !important;
    width: 90%;
}
/* ThuyTrang 8/2/2023 Add button register Add↑*/