/* GOOGLE FONTS IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body{
    background: rgb(232,238,245);
    background: linear-gradient(215deg, rgba(232,238,245,1) 50%, rgba(164,186,214,1) 50%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 100%; */
    /* height: 800px; */
    /* max-height: 100vh; */
    /* gk worth it */
}

:root{
    /* background colors */
    --bg-color-1: #a4bad6;
    --bg-color-2: #e8eef5;
    --bg-color-3: #dde8f7;
    --bg-reg-mobile-1: #f8fbff;
    --bg-reg-mobile-2: #57708f;

    /* font colors */
    --color-1: #143a6a;
    --color-2: #011D31;
    --color-3: #7798c1; /*hover navbar*/ /*#a4bad6*/
    --color-4: #e8eef5;

    /* Button colors */
    --btn-color-1: #3677b0;
    --btn-color-2: #3c84c4;
    --btn-color-3: #f8f5f5;
    
    /* Button hover */
    --link-color-1: #19a6f3;
    --link-color-2: #0767a2;

    /* Fonts Bold */
    --bold-1: 300;
    --bold-2: 400;
    --bold-3: 600;
    --bold-4: 900; 
}

/* Navbar section */
header {
    width: 100%;
}
nav{
    /* height: 8vh; */
    /* box-shadow: 0.2px 2px rgba(0, 0, 0, 0.1); */
    position: fixed;
    width: 100%;
    z-index: 100;
    color: #030310;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    padding: 0 10px;
    transition: 0.2s;
    background-color: var(--bg-color-1);
}
.nav-logo {
    width: 50px;
    height: auto;
    margin: -50px 20px;
}
.navbar {
    /* background-color: bisque; */
    display: flex;
    list-style-type: none;
    margin: 5px 20px;
}
.navbar > li {
    padding: 0 4px;
}
.navbar > li a {
    text-decoration: none;
    color: var(--color-2);
    cursor: pointer;
}
.navbar > li a:hover {
    color: var(--link-color-2);
}
.nav-p {
    text-align: center;
    padding-top: 12px;
}


.signup-container {
    display: flex;
    flex-direction: row;
    width:70%;
    margin: 9.5rem auto;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
}
.signup-left-container {
    background-color: rgba(255, 255, 255, 0.7);
    width: 50%;
    position: relative;
    text-align: center;
    display: block;
    justify-content: center;
    border-radius: 15px 0 0 15px;
    padding: 1rem 0;
}
.signup-img1{
    width: 50px;
}
.signup-left-title{
    font-size: 15px;
    font-weight: var(--bold-3);
    margin-top: 5px;
}
.signup-left-description{
    font-size: 10px;
    margin-top: 16px;
    font-weight: var(--bold-2);
}
.signup-img2{
    width: 250px;
    margin-top: 1rem;
}
.signup-icon-sosmed{
    margin-top: 2rem;
}
.socmed-link{
    color: #000000;
}
.socmed-link:hover{
    color: var(--btn-color-1);
}
.bi{
    font-size: 12px;
    padding: 0 4px;
    cursor: pointer
}
.signup-copyright{
    margin-top: 20px;
    font-size: 8px;;
}
.error-container{
    font-size: 12px;
    width: 48%;
    padding: 0;
    margin-left: 12px;
}
.signup-right-container{
    background-color: #FFFFFF;
    width: 100%;
    border-radius: 0 15px 15px 0;
}
.signup-right{
    width: 100%;
    padding-left: 5rem;
    margin-top: 5rem;
}
.signup-right-title{
    font-size: 16px;
}
.signup-right-title-mobile {
    font-size: 22px;
    font-weight: 600;
    display: none;
}
.signup-right-description{
    font-size: 12px;
}
.signup-right-description-mobile {
    display: none;
    font-size: 12px;
}
.form label {
    font-size: 12px;
    /* background-color: #0001; */
    width: 50%;
}
.form div{
    width: 50%;
}
.form-control {
    margin: 1px 0 10px 0;
    font-size: 8pt !important;
    padding: 4.5px 8px !important;
    border: 1px solid var(--bg-color-1) !important;
    border-radius: 5px;
    width: 50% !important;
    /* background-color: #030310 !; */
}
#password-input, #cpassword-input {
    border-right-width: 0 !important;
}
.form-btn-container {
    padding-top: 4px;
}
.form-btn{
    /* ws minimum wi width e */
    width: 100px;
    background-color: var(--btn-color-2);
    border-radius: 5px;
    border-width: 0;
    color: #fff;
    font-size: 10pt;
    padding: 4px 0;
}
.form-btn:hover{
    background-color: var(--btn-color-1);
}
.signup-main-title{
    margin-top: 1rem;
}
.signup-confirm{
    font-size: 12px;
    width: 50%;
}
.signup-confirm-masuk{
    text-decoration: none;
    color: var(--btn-color-2);
}
.password-eye, .cpassword-eye {
    background-color: #0000 !important;
    padding: 4px 4px !important;
    margin: 1px 0 0 0 !important;
    height: 27px !important;
    border: 1px solid #a7bfd4 !important;
    border-left-width: 0 !important;
    cursor: pointer;
}
.password-eye i, .cpassword-eye i {
    margin: 0 0 0 0 !important;
    font-size: 14px;
}
.password-group-container, .cpassword-group-container {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* SEMANGAT GESS !! */
/* PULANG DULSS GESS */
/* OK 👌 */

@media screen and (max-width: 992px) {
    .signup-left-container {
        display: none;
    }
    .error-container {
        width: 100%;
        margin: 0 !important;
    }
    .error-container ul {
        padding-left: 0 !important;
    }
    .error-container div {
        width: 48%;
    }
    .signup-right-container{
        background-color: #FFFFFF;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .signup-right{
        width: 100%;
        padding-left: 0;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .signup-main-title {
        /* background-color: #0002; */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /* padding-bottom: 0 !important; */
    }
    .signup-right-title {
        /* background-color: #0001; */
        width: 50%;
        padding: 0 !important;
    }
    .signup-right-description{
        /* background-color: #0001; */
        width: 50%;
        padding: 0 !important;
        margin: 0 !important;
    }
    .form {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .form label {
        padding: 3px 0;
    }
    .form-btn{
        margin-bottom: 5px;
        /* align-self: flex-start;
        margin-left: 167px; */
    }
}

@media screen and (max-width: 768px) {
    .error-container div {
        width: 71%;
    }
    .signup-right-title {
        width: 75%;
        padding: 0 !important;
    }
    .signup-right-description {
        width: 75%;
    }
    .form label {
        width: 75%;
    }
    .form div{
        width: 75%;
    }
    .form-control {
        width: 75% !important;
    }
    .signup-confirm{
        font-size: 12px;
        width: 75%;
    }
}

@media screen and (max-width: 576px) {
    .signup-container{
        margin: 10.6rem auto;
    }
    .error-container ul {
        padding-left: 0 !important;
    }
    .error-container{
        width: 100%;
        /* background-color: #000000 !important; */
        /* display: none; */
    }
    .signup-right {
        margin-top: 0;
        background-color: var(--bg-reg-mobile-2);
        border-radius: 15px;
        margin-bottom: 0;
        padding-bottom: 1rem;
    }
    .signup-main-title:first-child {
        background-color: var(--bg-reg-mobile-1);
        margin-top: 0 !important;
        border-radius: 15px 15px 0 40px;
        padding: 2rem 0;
    }
    .signup-right-title {
        display: none;
    }
    .signup-right-title-mobile {
        display: block;
        width: 75% !important;
        padding: 0 !important;
        color: var(--bg-reg-mobile-2);
    }
    .signup-right-description {
        display: none;
    }
    .signup-right-description-mobile {
        display: block;
        width: 75%;
        color: var(--bg-reg-mobile-2);
    }
    .form{
        margin-top: 16px
    }
    .form label {
        color: var(--bg-color-2);
        width: 80%;
    }
    .form-control {
        width: 80% !important;
        color: var(--bg-reg-mobile-1) !important;
        background-color: var(--bg-reg-mobile-2) !important;
        box-shadow: 0 0 1.6px 0.2px;
        outline: none !important;
    }
    .form-control::placeholder {
        color: var(--bg-reg-mobile-1) !important;
        opacity: 0.3 !important;
    }
    .input-group {
        width: 80% !important;
    }
    .input-group-text {
        background-color: var(--bg-reg-mobile-2);
        box-shadow: 0 0 1.6px 0.2px var(--bg-reg-mobile-1);
    }
    .input-group-text i {
        color: var(--bg-reg-mobile-1);
        box-shadow: -3px 0 0 2px var(--bg-reg-mobile-2);
        z-index: 2;
    }
    .form-btn-container {
        width: 80% !important;
    }
    .form-btn {
        width: 100%;
        color: var(--bg-reg-mobile-2);
        background-color: var(--bg-reg-mobile-1);
        font-weight: 550;
    }
    .form-btn:hover{
        color: var(--bg-reg-mobile-2) !important;
        background-color: var(--btn-color-3) !important;
    }
    .signup-confirm {
        color: var(--bg-color-1);
        font-weight: 350;
    }
    .signup-confirm a {
        color: var(--bg-reg-mobile-1);
        font-weight: 450;
    }
    .signup-confirm a:hover {
        color: var(--bg-color-1);
    }
}

@media screen and (max-width: 360px) {
    .signup-container{
        margin: 9.6rem auto;
    }
    .error-container{
        width: 100%;
        /* display: none; */
    }
    .error-container ul {
        padding-left: 0 !important;
    }
}