.wrapper {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.intro {
    height: 100%;
    display: flex;
}

.left {
    width: 40%;
}

.form {
    padding: calc(17vw + -15vh) 7vw;
    text-align: center;
}

h1 {
    margin: 7vh 0px 2vh 0px;
}

h2 {
    font-size: 2vw;
}

h6 {
    color: #8A8A8A;
    font-weight: bold;
    font-size: 1vw;
}

label {
    font-weight: bold;
    color: #9e9e9d;
    margin: 0.5vw 0;
    font-size: 0.9vw;
}

input {
    width: 100%;
    font-size: 0.95vw;
    font-weight: 500;
    transition: .3s ease;
    border: 2px #f4f4f4 solid;
    border-radius: 7px;
    padding: 0.75vw 0.75vw 0.75vw 2.5vw;
}

    input::placeholder {
        color: #acacad;
    }

    input:focus {
        outline: none;
        border-color: #00a268;
    }

.logo {
    max-width: 18vw;
    max-height: 4vw;
    margin: 1.5vw;
}

.forget-password-label {
    color: rgb(0 162 104);
    font-size: 1vw;
    font-weight: bold;
}

.button-submit {
    margin: 2vw 0px;
    width: 100%;
    font-size: 1vw;
    font-weight: bold;
    color: whitesmoke;
    border-radius: 0.5vw;
    transition: 0.5s;
    background-color: #2f4150;
    padding: 1vw;
}

    .button-submit:focus, .button-submit:hover {
        outline-color: transparent;
    }

    .button-submit:disabled {
        background-color: #b9bdc6;
    }

    .button-submit.google {
        color: black;
        background-color: white;
        background-color: white;
        border: 1px black solid;
    }

.group {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 1.75vw 0px;
    text-align: left;
}

    .group > i {
        width: 1.5vw;
        float: right;
        margin-top: -2vw;
        margin-right: 0.75vw;
        filter: brightness(5);
        font-size: 1vw;
    }

.ico {
    width: 1.5vw;
    float: left;
    margin-top: -2.4vw;
    margin-left: 0.7vw;
    filter: brightness(4);
}

html {
    user-select: none;
}

.right {
    width: 60%;
    background-image: url(../../../images/login/login.jpg);
    background-position: center;
    background-size: cover;
}

    .right .container {
        box-shadow: inset 0 0 10px rgb(255 255 255 / 50%);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0);
        border-radius: 2vw;
        border: 1px solid #ffffff33;
        padding: 2.5vw;
        max-width: 100%;
        color: white;
        text-align: left;
        margin-top: 3vw;
    }

        .right .container h5 {
            font-size: 1.3vw;
        }

        .right .container .col-lg:first-child {
            border-right: 1px darkgray solid;
            padding-right: 2vw;
        }

        .right .container .col-lg:last-child {
            padding-left: 2vw;
        }

    .right hr {
        border: 2px #28785f solid;
        margin-bottom: 2vw;
    }

    .right .image {
        text-align: center;
    }

        .right .image img {
            width: 100%;
            padding-bottom: 1vw;
        }

    .right .desc {
        text-align: left;
    }

        .right .desc div {
            text-align: right;
        }

        .right .desc p {
            margin: 0;
            font-size: 0.9vw;
        }

        .right .desc .button-more {
            background-color: #46a06f;
            color: white;
            padding: 0.55vw 1vw;
            font-size: 0.9vw;
            margin-bottom: 0.5vw;
        }

    .right .footer {
        text-align: right;
    }

        .right .footer a {
            color: white;
        }

    .right .phrase {
        color: white;
        text-align: center;
        bottom: 0;
        position: absolute;
        right: 0%;
        left: 40%;
        padding: 1.5vw;
        font-size: 1vw;
    }

    .right .phrase2 {
        position: initial;
        margin: 15vw 0;
    }

.carousel-indicators {
    right: auto;
    bottom: -4vw;
    left: 0;
    margin: 0;
}

    .carousel-indicators li {
        width: 1vw;
        height: 1vw;
        border-radius: 50%;
    }

@media (max-width: 1024px) {

    .wrapper {
        overflow: auto;
    }

    .hide {
        display: none;
    }

    .intro {
        height: auto;
        display: block;
    }

    .left {
        overflow: auto;
        width: 100% !important;
    }

    .wrapper:after {
        display: none !important;
    }

    h2 {
        font-size: 3vh;
    }

    h6 {
        font-size: 2vh;
    }

    .button-submit {
        font-size: 2vh;
        margin: 3vh 0px;
        padding: 2vh;
    }

    .logo {
        max-width: 20vh;
        max-height: 5vh;
    }

    label {
        font-size: 1.75vh;
    }

    input {
        font-size: 2vh;
        padding: 1vh 1vh 1vh 4.5vh;
    }

    .ico {
        width: 3vh;
        margin-top: -4.5vh;
        margin-left: 1vh;
    }

    .group {
        margin: 4vh 0px;
    }

    .forget-password-label {
        font-size: 1.75vh;
    }

    .form .group > i {
        margin-top: -4vh;
        margin-right: 4vh;
        font-size: 3vh;
    }

    .right {
        width: 100% !important;
    }

        .right .container {
            padding: 4vh;
            margin-top: 0;
        }

            .right .container h5 {
                font-size: 2.5vh;
            }

        .right hr {
            margin-bottom: 3vh;
        }

        .right .image img {
            height: 100%;
            padding-bottom: 2vh;
        }

        .right .desc p {
            margin: 1vh 0;
            font-size: 2vh;
        }

        .right .desc .button-more {
            padding: 1.5vh 2vh;
            font-size: 2vh;
            width: 100%;
            margin-bottom: 3vh;
        }

        .right .phrase {
            position: initial;
            padding: 3vh;
            font-size: 1.5vh;
        }

    .carousel-indicators {
        bottom: -8vh;
    }

        .carousel-indicators li {
            width: 3vh;
            height: 3vh;
        }

    @media (orientation: landscape) {
        .left {
            overflow: auto;
            width: 100% !important;
        }

        .wrapper:after {
            display: none !important;
        }

        h2 {
            font-size: 3vw;
        }

        h6 {
            font-size: 2vw;
        }

        .button-submit {
            font-size: 2vw;
            margin: 3vw 0px;
            padding: 2vw;
        }

        .logo {
            max-width: 20vw;
            max-height: 5vw;
        }

        label {
            font-size: 1.75vw;
        }

        input {
            font-size: 2vw;
            padding: 1vw 1vw 1vw 4.5vw;
        }

        .ico {
            width: 3vw;
            margin-top: -4.5vw;
            margin-left: 1vw;
        }

        .group {
            margin: 4vw 0px;
        }

        .forget-password-label {
            font-size: 1.75vw;
        }

        .form .group > i {
            margin-top: -4vw;
            margin-right: 4vw;
            font-size: 3vw;
        }

        .right {
            width: 100% !important;
        }

            .right .container {
                padding: 4vw;
                margin-top: 0;
            }

                .right .container h5 {
                    font-size: 2.5vw;
                }

            .right hr {
                margin-bottom: 3vw;
            }

            .right .image img {
                height: 100%;
                padding-bottom: 2vw;
            }

            .right .desc p {
                margin: 1vw 0;
                font-size: 2vw;
            }

            .right .desc .button-more {
                padding: 1.5vw 2vw;
                font-size: 2vw;
                width: 100%;
                margin-bottom: 3vw;
            }

            .right .phrase {
                position: initial;
                padding: 3vw;
                font-size: 1.5vw;
            }

        .carousel-indicators {
            bottom: -8vw;
        }

            .carousel-indicators li {
                width: 3vw;
                height: 3vw;
            }
    }
}