.card-login-atas{
        position: relative;
        display: -webkit-box;
        display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 0px solid #edeff1;
        width: 350px;
        height: 100px;
        margin-left: 65px;
        border-top-left-radius:  3.25rem;
        border-top-right-radius:  3.25rem;
    }

    .card-login-bawah{
        position: relative;
        display: -webkit-box;
        display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #ECF7FF;
        background-clip: border-box;
        border: 0px solid #edeff1;
        width: 350px;
        height: 330px;
        margin-left: 65px;
        border-bottom-left-radius: 3.25rem; 
        border-bottom-right-radius: 3.25rem; 
    }

    .bg-primary-login {
        background: radial-gradient(circle at bottom right, #F6C16E,#1B315D);
       /* background-color: #3051D3 !important; */
    }

    .input-login{
        border-radius: 1.25rem; 
    }

    .border-menu{
        border-radius: 30px;
    }

    .ex3{
        background-color: white;  
        border-radius : 30px;
        color : black;
    }

    .ex3:hover, .ex3:active{
        background: radial-gradient(circle at top left, #F6C16E,#1B315D);  
        border-radius : 30px;
        color : white;
    }

    .box {
        background: radial-gradient(circle at top left, #1B315D, #F6C16E);    
    }

    .btn-light-panduan {
        color: white;
    }

    .btn-light-panduan:hover{
        color: white;
        background-color: #0e0f0f4f;
        border-color: #0e0f0f4f; 
    }


/*mobile*/
    .box-mobile {
        background: #1B315D;    
    }

    .border-menu-mobile{
        position: relative;
        display: -webkit-box;
        display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #ECF7FF;
        background-clip: border-box;
        border: 0px solid #edeff1;
        width: 110%;
        height: 170px;
        margin-left: -10px;
        border-radius: 30px; 
    }

    .card-login-atas-mobile{
        position: relative;
        display: -webkit-box;
        display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 0px solid #edeff1;
        width: 300px;
        height: 100px;
        margin-left: 45px;
        border-top-left-radius:  3.25rem;
        border-top-right-radius:  3.25rem;
    }

    .card-login-bawah-mobile{
        position: relative;
        display: -webkit-box;
        display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #ECF7FF;
        background-clip: border-box;
        border: 0px solid #edeff1;
        width: 300px;
        height: 330px;
        margin-left: 45px;
        border-bottom-left-radius: 3.25rem; 
        border-bottom-right-radius: 3.25rem; 
    }