/* Daftar Beasiswa */
/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) {
    .login_form {
        padding: 0em;
        width: 100%;
        /* height: 80em; */
        height: 100em;
        /* opacity: 0.4; */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        /* background: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255); */
    }

    .login_form::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: -1;
        opacity: 0.3;
    }

    .login_form .box {
        /* background-image: none; */
        margin: 10em 10px;
        background-size: cover;
        background-position: -600px center;
        background-repeat: no-repeat;
        flex: 0 0 850px;
        max-width: 900px;
        min-width: 1200px;
        max-height: 900px;
        /* min-height: 900px; */
        min-height: 1200px;
        box-shadow: 0 0 10px #dddddd;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
        transition: all 0.5s ease-in-out;
        /* background: rgba(255, 255, 255, 0.5); */
        /* background: rgba(255, 255, 255); */
    }

    .login_form .box.slide-active {
        background-position: 0px center;
    }

    .login_form .box::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .login_form .box .left,
    .login_form .box .right {
        flex: 0 0 50%;
        max-width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 40px 0;
    }

    .login_form .box .left h3,
    .login_form .box .right h3 {
        font-size: 20px;
        color: #ffffff;
        margin: 0 0 15px;
    }

    .login_form .box .form .login-form {
        margin-top: -5em;
    }

    .login_form .box .form .register-form {
        margin: 3em 0;
        /* padding-left: 3em;
        padding-right: 3em;
        padding-bottom: -1px;
        padding-top: 3em; */
        padding: 3em;
        /* margin-top: 2em; */
        box-shadow: 1px;
    }

    .login_form .box .form .lost-password-form {
        /* padding-left: 2em;
        padding-right: 2em; */
        padding: 5em 2em;
        margin-top: -8em;
    }

    .login_form .box .left .register-btn,
    .login_form .box .right .login-btn {
        background-color: #ff8a73;
        padding: 10px 35px;
        color: #ffffff;
        border: 1px solid #ffffff;
        font-size: 16px;
        cursor: pointer;
        border-radius: 25px;
    }

    .login_form .box .left .register-btn:focus,
    .login_form .box .right .login-btn:focus {
        outline: none;
    }

    .login_form .box .left .register-btn:hover,
    .login_form .box .right .login-btn:hover {
        outline: none;
        text-decoration: none;
        /* color: #001aff; */
        background-color: whitesmoke;
        color: #062bfd;
        border: 1px solid black;
    }

    .login_form .box .form {
        position: absolute;
        background-color: #ffffff;
        height: 100%;
        width: 50%;
        right: 0;
        top: 0;
        padding: 30px;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;
        transition: all 0.5s ease-in-out;
    }

    .login_form .box.slide-active .form {
        right: 50%;
    }



    .login_form .box .form h3 {
        font-size: 20px;
        color: #000000;
        margin: 0 0 30px;
    }

    /* .login_form .box .form .login-form {
        flex: 0 0 100%;
        max-width: 100%;
    } */

    .login_form .box .form .form-group {
        margin-bottom: 20px;
    }

    .login_form .box .form .lost-password-form,
    .login_form .box .form .login-form,
    .login_form .box .form .register-form {
        transition: all 0.5s ease-in-out;
    }

    .login_form .box .form .form-control {
        width: 100%;
        height: 45px;
        font-size: 16px;
        color: #000000;
        border: none;
        border-bottom: 1px solid #cccccc;
        padding: 0 10px;
    }

    .login_form .box .form .form-control:focus {
        outline: none;
    }

    .login_form .box .form label {
        font-size: 16px;
        color: #555555;
    }

    .login_form .box .form .submit-reset-btn {
        /* width: 65%; */
        height: 48px;
        background-color: #ff8a73;
        border: none;
        border-radius: 20px;
        color: #ffffff;
        text-transform: uppercase;
        margin-top: 25px;
        /* margin-left: 3.2em;
        margin-right: 2em;*/
        /* padding-right: 50%;
        padding-left: 50%; */
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: 50%;
        margin-right: 50%;
        position: static;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 16px;
        /* cursor: pointer; */
        justify-content: center;
        align-items: center;
    }

    .login_form .box .form .submit-btn {
        /* width: 60%; */
        height: 40px;
        background-color: #ff8a73;
        border: none;
        border-radius: 20px;
        color: #ffffff;
        text-transform: uppercase;
        margin-top: 25px;
        margin-bottom: 25px;
        /* margin-left: 3.2em;
        margin-right: 2em; */
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: 50%;
        margin-right: 50%;
        position: static;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 16px;
        /* cursor: pointer; */
        justify-content: center;
        align-items: center;
    }

    .login_form .box .form .submit-reset-btn:focus {
        outline: none;
    }

    .login_form .box .form .submit-btn:focus {
        outline: none;
    }

    .login_form .box .form .submit-btn:hover {
        outline: none;
        text-decoration: none;
        /* color: #001aff; */
        background-color: #062bfd;
        color: whitesmoke;
        border: 1px solid black;
    }

    .login_form .box .form .submit-reset-btn:hover {
        outline: none;
        text-decoration: none;
        /* color: #001aff; */
        background-color: #062bfd;
        color: whitesmoke;
        border: 1px solid black;
    }

    .login_form .box .form p {
        margin-top: 20px;
        text-align: center;
    }

    .login_form .box .form h5 {
        font-size: 15px;
        color: #555555;
        margin: 0 0 30px;
        font-weight: normal;
    }

    .login_form .box .form p a {
        font-size: 15px;
        text-decoration: none;
        display: inline-block;
        color: #3F51B5;
    }

    .login_form .box .form .form-hidden {
        max-height: 0;
        visibility: hidden;
        opacity: 0;
        overflow: hidden;
        /* margin-top: -3em; */
        /* position: static; */
    }

    .checkbox {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 0 2.5em;
    }

    .checkbox label {
        align-items: flex-start;
    }

    .checkbox h6 {
        align-items: flex-end;
        font-weight: normal;
        font-style: normal;
        font-size: 15px;
    }

    /* .login_form .box .left {
        background-color: red;
    }

    .login_form .box .right {
        background-color: green;
    } */

    .break-form {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 2em 0;
    }

    .break-form::before,
    .break-form::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #000;
        width: 10%;
    }

    .break-form:not(:empty)::before {
        margin-right: .20em;
    }

    .break-form:not(:empty)::after {
        margin-left: .20em;
    }

    .social-media {
        display: block;
        justify-content: center;
        margin: 2em 0;
    }

    .social-media h3 {
        text-align: center;
        margin: 1em 0 2em;
    }

    .social-media-button {
        display: flex;
        justify-content: center;
        align-items: stretch;
        align-content: stretch;
        margin: 1em 0 0;
    }

    .social-media-button a {
        background-color: white;
        border: none;
        /* color: white; */
        padding: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 10px;
        border-radius: 43%;
        box-shadow: 0 0 10px #ccc;
        -moz-box-shadow: 0 10px 20px grey;
        -webkit-box-shadow: 0 10px 20px grey;
        /* transition: width 1s, height 1s, linear 2s, transform 2s; */
        /* box-shadow: 0 0 10px #ccc;
        -moz-box-shadow: 0 12px 50px grey;
        -webkit-box-shadow: 0 12px 50px grey; */
    }

    .social-media-button a:hover {
        background-color: #ff8a73;
        /* color: white; */
        /* box-shadow: 20px 20px 50px grey;
        -moz-box-shadow: 20px 20px 50px grey;
        -webkit-box-shadow: 20px 20px 50px grey; */
        /* box-shadow: 0 0 10px #ccc; */
        /* box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
            0 17px 50px 0 rgba(0, 0, 0, 0.19); */
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
            0 12px 30px 0 rgba(0, 0, 0, 0.19);
        width: 70px;
        height: 70px;
        /* padding: 20px; */
        transition-timing-function: ease-out;
    }

    .social-media-button a:active {
        box-shadow: 0 5px #666;
        transform: translateY(3px);
    }

    .social-media-button a:focus {
        background-color: #ff8a73;
        box-shadow: 0 5px #666;
    }

    /* .social-media-button a img:hover {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    } */


}

























@media (max-width: 767.98px) {
    .login_form {
        padding: 0em;
        width: 100%;
        /* height: 100em; */
        height: 120em;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .login_form::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: -1;
        opacity: 0.3;
    }

    .login_form .box {
        margin: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* flex: 0 0 850px; */
        max-width: 100%;
        /* min-width: 600px; */
        max-height: 1100px;
        /* min-height: 700px; */
        min-height: 1000px;
        box-shadow: 0 0 10px #dddddd;
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
    }

    .login_form .box.slide-active {
        /* background-position: 125px center; */
        right: auto;
    }

    .login_form .box::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 100%;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .login_form .box .left,
    .login_form .box .right {
        flex: 0 0 50%;
        max-width: 50%;
        flex: 1;
        /* display: inline-block; */
        display: flex;
        margin: auto;
        /* padding-left: 8%; */
        padding: 20px 0;
        /* padding-right: 15%; */
        /* border: 1px solid black; */
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .login_form .box .left h3 {
        font-size: 16px;
        /* color: #ffffff; */
        color: black;
        margin: 0 0 15px;
        padding-left: 12px;
    }

    .login_form .box .right h3 {
        font-size: 16px;
        /* color: #ffffff; */
        color: black;
        margin: 0 0 15px;
        padding-left: 8.5px;
    }

    /* .login_form .box .left button,
    .login_form .box .right button {
        padding: 0 5px;
    } */

    .login_form .box .form .login-form {
        margin: -1em 2em -1em;
        box-shadow: 1px;
        /* margin-left: 2em;
        margin-right: 2em; */
    }

    .login_form .box .form .register-form {
        margin-top: -5em;
        margin-bottom: -5em;
        /* padding: -3em 3em -1px; */
        padding-left: 3em;
        padding-right: 3em;
        /* padding-bottom: -1px;
        padding-top: -3em;
        box-shadow: 1px; */
    }

    .login_form .box .form .lost-password-form {
        margin-top: 5em;
        margin-bottom: -5em;
        padding-left: 3em;
        padding-right: 3em;
        /* padding-top: 5em; */
    }

    .login_form .box .left .register-btn {
        margin-left: 1em;
        background-color: #ff8a73;
        padding: 10px 35px;
        color: #ffffff;
        border: 1px solid #ffffff;
        font-size: 16px;
        cursor: pointer;
        border-radius: 25px;
    }


    .login_form .box .right .login-btn {
        margin-left: 1em;
        background-color: #ff8a73;
        padding: 10px 35px;
        color: #ffffff;
        border: 1px solid #ffffff;
        font-size: 16px;
        cursor: pointer;
        border-radius: 25px;
    }




    .login_form .box .left .register-btn:focus,
    .login_form .box .right .login-btn:focus {
        outline: none;
    }

    .login_form .box .left .register-btn:hover,
    .login_form .box .right .login-btn:hover {
        outline: none;
        text-decoration: none;
        /* color: #001aff; */
        /* background-color: whitesmoke; */
        background-color: blue;
        /* color: #062bfd; */
        color: whitesmoke;
        border: 1px solid black;
    }

    .login_form .box .form {
        margin-top: 2em;
        /* margin-bottom: 7em; */
        position: relative;
        background-color: #ffffff;
        height: 100%;
        width: 100%;
        right: auto;
        top: auto;
        padding-top: 5em;
        padding-bottom: 10em;
    }

    .login_form .box.slide-active .form {
        right: auto;
    }



    .login_form .box .form h3 {
        font-size: 20px;
        color: #000000;
        margin: 0 0 30px;
    }

    /* .login_form .box .form .login-form {
        flex: 0 0 100%;
        max-width: 100%;
    } */

    .login_form .box .form .form-group {
        margin-bottom: 20px;
    }

    .login_form .box .form .lost-password-form,
    .login_form .box .form .login-form,
    .login_form .box .form .register-form {
        transition: all 0.5s ease-in-out;
    }

    .login_form .box .form .form-control {
        width: 100%;
        height: 45px;
        font-size: 16px;
        color: #000000;
        border: none;
        border-bottom: 1px solid #cccccc;
        padding: 0 10px;
    }

    .login_form .box .form .form-control:focus {
        outline: none;
    }

    .login_form .box .form label {
        font-size: 16px;
        color: #555555;
    }

    .login_form .box .form .submit-reset-btn {
        /* width: 100%; */
        /* height: 48px; */
        /* width: 30%; */
        height: 40%;
        background-color: #ff8a73;
        border: none;
        border-radius: 20px;
        color: #ffffff;
        text-transform: uppercase;
        /* margin-top: 10px; */
        margin-top: 10%;
        /* margin-left: 3.2em;
        margin-right: 2em; */
        margin-left: 50%;
        margin-right: 50%;
        /* padding-right: -4em; */
        position: static;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 16px;
        /* cursor: pointer; */
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .login_form .box .form .submit-btn {
        /* width: 30%; */
        height: 40%;
        background-color: #ff8a73;
        border: none;
        border-radius: 20px;
        color: #ffffff;
        text-transform: uppercase;
        margin-top: 10%;
        margin-bottom: 5%;
        font-size: 16px;
        margin-left: 50%;
        margin-right: 50%;
        position: static;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        /* cursor: pointer; */
        /* display: flex; */
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .login_form .box .form .submit-reset-btn:focus {
        outline: none;
    }

    .login_form .box .form .submit-btn:focus {
        outline: none;
    }

    .login_form .box .form .submit-btn:hover {
        outline: none;
        text-decoration: none;
        /* color: #001aff; */
        background-color: #062bfd;
        color: whitesmoke;
        border: 1px solid black;
    }

    .login_form .box .form .submit-reset-btn:hover {
        outline: none;
        text-decoration: none;
        /* color: #001aff; */
        background-color: #062bfd;
        color: whitesmoke;
        border: 1px solid black;
    }

    .login_form .box .form p {
        margin-top: 20px;
        text-align: center;
    }

    .login_form .box .form h5 {
        font-size: 15px;
        color: #555555;
        margin: 0 0 30px;
        font-weight: normal;
    }

    .login_form .box .form p a {
        font-size: 15px;
        text-decoration: none;
        display: inline-block;
        color: #3F51B5;
    }

    .login_form .box .form .form-hidden {
        max-height: 0;
        visibility: hidden;
        opacity: 0;
        overflow: hidden;

        /* margin-top: 5px; */
        padding-top: 3em;
        /* position: static; */
    }

    .checkbox {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .checkbox label {
        align-items: flex-start;
    }

    .checkbox h6 {
        align-items: flex-end;
        font-weight: normal;
        font-style: normal;
        font-size: 15px;
    }

    .break-form {
        display: flex;
        align-items: center;
        text-align: center;
    }

    .break-form::before,
    .break-form::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #000;
        width: 10%;
    }

    .break-form:not(:empty)::before {
        margin-right: .20em;
    }

    .break-form:not(:empty)::after {
        margin-left: .20em;
    }

    .social-media {
        display: block;
        justify-content: center;
        margin: 4em 0;
        padding: -4em 0;
    }

    .social-media h3 {
        text-align: center;
        margin: 0 2em;
    }

    .social-media-button {
        display: flex;
        justify-content: center;
    }

    .social-media-button a {
        background-color: white;
        border: none;
        /* color: white; */
        padding: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 10px;
        border-radius: 43%;
        box-shadow: 0 0 10px #ccc;
        -moz-box-shadow: 0 10px 20px grey;
        -webkit-box-shadow: 0 10px 20px grey;
    }

    .social-media-button a:hover {
        background-color: #ff8a73;
        /* color: white; */
        /* box-shadow: 20px 20px 50px grey;
        -moz-box-shadow: 20px 20px 50px grey;
        -webkit-box-shadow: 20px 20px 50px grey; */
        /* box-shadow: 0 0 10px #ccc; */
        box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.24),
            0 8px 50px 0 rgba(0, 0, 0, 0.19);
        width: 70px;
        height: 70px;
        padding: 20px;
        transition-timing-function: ease-out;
        border: none;
    }

    .social-media-button a:active {
        box-shadow: 0 5px #666;
        transform: translateY(3px);
        /* border: none; */
    }

    .social-media-button a:focus {
        background-color: #ff8a73;
        box-shadow: 0 5px #666;
    }

    /* .social-media-button a img:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        border: none;
    } */
}