body {
    background: url(/dist/img/bgLogin.jpg) center center;
    background-size: cover;
}

.bg-page {
    background: url(/dist/img/bgLogin2.jpg) center center;
    background-size: cover;
}

.headerTitle {
    padding-top: 150px;
    display: none;
}

a {
    color: #17a2b8;
}

.title {
    position: absolute;
    top: 15%;
    width: 100vw;
    line-height: 1.6;
    text-align: center;
    font-size: 30px;
    color: #eee;
    text-shadow: rgb(187 187 187) 0px 1px 0px, rgb(181 181 181) 0px 1px 0px, rgb(172 172 172) 0px 2px 0px, rgb(160 160 160) 0px 3px 0px, rgb(145 145 145) 0px 4px 0px, rgb(127 127 127) 0px 5px 0px, rgb(0 0 0 / 20%) 0px 6px 1px, rgb(0 0 0 / 30%) 0px 7px 6px;
    font-weight: bold;
}

.authen {
    overflow: hidden;
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
    -moz-transition: -moz-transform 300ms, box-shadow 300ms;
    transition: transform 300ms, box-shadow 300ms;
    box-shadow: 0px 0px 0px 2px rgba(2, 128, 144, 0.2);
}

    .authen::before, .authen::after {
        content: "";
        position: absolute;
        width: 800px;
        height: 800px;
        border-top-left-radius: 40%;
        border-top-right-radius: 45%;
        border-bottom-left-radius: 35%;
        border-bottom-right-radius: 40%;
        z-index: -1;
    }

    .authen::before {
        left: 40%;
        bottom: -130%;
        -webkit-animation: wawes 6s infinite linear;
        -moz-animation: wawes 6s infinite linear;
        animation: wawes 6s infinite linear;
    }

    .authen::after {
        left: 35%;
        bottom: -125%;
        background-color: rgb(74 161 183 / 40%);
        -webkit-animation: wawes 7s infinite;
        -moz-animation: wawes 7s infinite;
        animation: wawes 7s infinite;
    }



    .authen > input {
        font-family: "Asap", sans-serif;
        display: block;
        border-radius: 5px;
        font-size: 16px;
        background: white;
        width: 100%;
        border: 0;
        padding: 10px 10px;
        margin: 15px -10px;
    }

    .authen > button {
        font-family: "Asap", sans-serif;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        width: 80px;
        border: 0;
        padding: 10px 0;
        margin-top: 10px;
        margin-left: -5px;
        border-radius: 5px;
        background-color: #f45b69;
        -webkit-transition: background-color 300ms;
        -moz-transition: background-color 300ms;
        transition: background-color 300ms;
    }

        .authen > button:hover {
            background-color: #f24353;
        }

.register {
    margin-right: 15px;
}

.loginButton {
    color: white;
    justify-content: center;
    align-items: center;
}

.form-control {
    background-color: #fff !important;
}

    @-webkit-keyframes wawes {
        from {
            -webkit-transform: rotate(0);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-moz-keyframes wawes {
        from {
            -moz-transform: rotate(0);
        }

        to {
            -moz-transform: rotate(360deg);
        }
    }

    @keyframes wawes {
        from {
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }

        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    label .error {
    position: absolute;
    border: 1px solid;
    padding: 0px 5px;
    background: red;
    color: white;
    bottom: 33px;
}

label.error::after {
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #f00;
    bottom: -5px;
    left: 4px;
    position: absolute;
}

.buttonSSO, .loginButton {
    margin-top: 10px;
    display: flex;
    height: 40px;
    padding: 0px;
    background: #17a2b8;
    border: none;
    outline: none;
    border-radius: 5px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

    .buttonSSO:hover {
        background: #008168;
    }

    .buttonSSO:active {
        background: #006e58;
    }

.button__text {
    padding: 0 24px;
    color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

h6 {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    line-height: 0.1em;
    margin: 10px 0 20px;
    font-size: 1rem;
    color: #B0B0B0 !important;
}

    h6 span {
        background: #fff;
        padding: 0 10px;
    }


/*  Update*/
/* Split the screen in half */
.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

/* Control the left side */
.left {
    left: 0;
    background-color: #17a2b8;
}

/* Control the right side */
.right {
    right: 0;
    background-color: white;
}

/* If you want the content centered horizontally and vertically */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    /* Style the image inside the centered container, if needed */
    .centered img {
        width: 150px;
        border-radius: 50%;
    }


@media screen and (max-width: 1400px) {
    .authen {
        max-width: 80%;
    }
}

@media screen and (max-width: 1300px) {
    .authen {
        max-width: 80%;
    }

    .transheader h2 {
        font-size: 35px !important;
    }
}

@media screen and (max-width: 1160px) {

    .transheader h2 {
        font-size: 30px !important;
    }
}

@media screen and (max-width: 1000px) {

    .transheader h2 {
        font-size: 30px !important;
    }
}

@media screen and (max-width: 700px) {
    .split {
        width: 100%;
    }

    .bg-page {
        background: none;
    }

    .right {
        background: url(/dist/img/bgLogin2.jpg) center center;
        background-size: cover;
    }

    .headerTitle {
        display: block;
    }

    .authen {
        top: 55%;
    }

    .transheader {
        padding-top: 50px;
    }
}

@media screen and (max-width: 500px) {
    .authen {
        max-width: 90%;
    }

    .transheader {
        padding-top: 30px;
    }

    .transheader h2 {
        font-size: 25px !important;
    }
}