* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Poppins", sans-serif;
}

.container-log {
    background-image: linear-gradient(to bottom, #1A2157, #06A7DD);
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .box-log {
        background-color: whitesmoke;
        width: 400px;   
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 30px;
        box-sizing: border-box;
        border-radius: 10px;
        text-align: center;

        h1 {
            font-size: 40px;
        }

        .role-selection {
            background-color: #06A7DD;
            margin-top: 15px;
            width: 70%;
            height: 40px;
            border-radius: 10px;
            padding: 5px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            justify-content: space-between;
            gap: 10px;

            .button-tmp {
                background-color: whitesmoke;
                width: 50%;
                height: 100%;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .button-tmp:hover {
                cursor: pointer;
            }

            .selected {
                background-color: #1A2157;
                font-weight: bold;
                color: whitesmoke;
            }

        }

        form {
            margin-top: 15px;
            width: 100%;

            .kelas-jurusan-form {
                margin-top: 15px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 6px;


                .option {
                    width: 100%;
                    display: flex;
                    gap: 5px;

                    .dropdown-kelas {
                        width: 30%;
                        border-radius: 8px;
                        padding: 10px 12px;
                        border: none;
                    }

                    .dropdown-jurusan {
                        width: 70%;
                        border: none;
                        border-radius: 8px;
                        padding: 10px 12px;
                    }


                }
            }

            .kelas-jurusan-form label {
                color: #1A2157;
                font-size: 14px;
                font-weight: 500;
                text-align: left;
            }

            .input-form {
                margin-top: 15px;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 6px;

                label {
                    color: #1A2157;
                    font-size: 14px;
                    font-weight: 500;
                    text-align: left;
                }

                .input-box {
                    width: 100%;
                    min-width: 0;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    border: 1px solid #cbd2df;
                    border-radius: 8px;
                    padding: 10px 12px;
                    background-color: white;
                }


                .input-box input {
                    width: 100%;
                    min-width: 0;
                    border: none;
                    outline: none;
                    background: transparent;
                    color: #1A2157;
                    font: inherit;
                    font-size: 14px;
                }

                .input-box input::placeholder {
                    color: #8b93a5;
                }
            }

            .submit-but {
                margin-top: 15px;
                width: 100%;
                padding: 10px 12px;
                background-color: #1A2157;
                color: whitesmoke;
                border: none;
                font-family: "Poppins", sans-serif;
                font-size: 17px;
                border-radius: 8px;
            }

            .submit-but:hover {
                cursor: pointer;
            }


            /* Mengatur textarea kesan dan pesan */
            .input-form textarea {
                width: 100%;
                height: 75px;
                padding: 10px 12px;
                box-sizing: border-box;

                border: none;
                border-radius: 8px;


                font-family: "Poppins", sans-serif;
                font-size: 13px;

                resize: vertical;
                outline: none;

            }


            .optional {
                color: #F62440;
                font-weight: 400;
                font-size: 12px;
            }

            [hidden] {
                display: none !important;
            }

        }

    }

}