/* Center the card */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #007bff, #ffffff); /* Kombinasi warna biru dan putih */
}

/* Center the form inside the card */
.card {
    width: 350px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background-color: #f6f8f96b; /* Warna latar belakang halaman */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(173, 17, 17, 0.1);
}

.mb-3{
    padding:5px;
}

/* Style the form elements */
#username,
#password {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

/* Style the "Sign In" button */
button[type="submit"] {
    width: 60%;
    padding: 10px;
    background-color: #007bff; /* Warna latar belakang tombol */
    color: #fff; /* Warna teks tombol */
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Style the "Login" text */
.login-text {
    background-color: #007bff; /* Warna latar belakang teks "Login" */
    color: #fff; /* Warna teks "Login" */
    padding: 5px 10px; /* Spasi dalam teks "Login" */
    border-radius: 3px;
    font-size: 20px;
}

.logonusput {
    
    max-width: 50%;
    height: 120px; /* Maintain aspect ratio */
    display: block; /* Center the image horizontally */
    margin: 0 auto;
    }

html {
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom, #007bff, #ffffff);
        }

        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .rectangle-button {
            width: 204.8px;
            height: 78px;
            flex-shrink: 0;
            background: #D9D9D9;
            border: none;
            font-size: 20px;
            padding: 0px 0px;
        }

        .rectangle-button:hover {
            background-color: aliceblue;
            cursor: pointer;
            transition: 0.5s;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: 0;
            position: relative;
        }


        .select-container {
            display: flex;
            align-items: center;
            margin-left: 50px;
            margin-right: auto;
        }

        .buttontahunakademik {
            padding: 10px 15px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 500px;
            margin-left: 30px;
        }

        .buttonsemester {
            padding: 10px 15px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 50px;
            margin-left: 30px;
        }

        /* */

        .inner-rectangle {
            width: 1024px;
            background: #F7F7F7;
            margin: 50px auto;
            margin-top: 0;
        }

        .top-rectangle {
            width: 1024px;
            height: 78px;
            background: #D9D9D9;
            border: 1px solid #000;
            display: flex;
        }

        .bottom-rectangle {
            width: 1024px;
            height: 600px;
            flex-shrink: 0;
            border: 1px solid #000;
            background: rgba(217, 217, 217, 0.00);
            position: relative;
        }

        .rectangle-button-Prestasi {
            width: 204.8px;
            height: 78px;
            flex-shrink: 0;
            background: #D9D9D9;
            border: 1px solid black;
            border-right: 2px solid black;
            font-size: 20px;
            padding: 0px 0px;
        }

        .rectangle-meti-Akademik {
            width: 204.8px;
            height: 78px;
            flex-shrink: 0;
            background: #D9D9D9;
            border: 1px solid black;
            border-right: 2px solid black;
            font-size: 20px;
            padding: 0px 0px;
        }


        .rectangle-meti-Ikutserta {
            width: 204.8px;
            height: 78px;
            flex-shrink: 0;
            background: #D9D9D9;
            border: none;
            /* Menghapus garis pinggir tombol jika ada */
            font-size: 20px;
        }

        .rectangle-meti-Ikutserta:hover {
            background-color: aliceblue;
            cursor: pointer;
            transition: 0.5s;
        }

        .meti {
            border: 1px solid #000;
            border-top: 0px solid black;
            border-right: 0px solid black;
            border-left: 0px solid black;
            display: flex;
        }


        .button-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .button {
            padding: 10px 15px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 10px;
        }

        .button-selected {
            background-color: #3498db;
            color: #fff;
        }

        .category-section {
            max-width: 1204.8px;
            margin-bottom: 20px;
            margin-left: 50px;
            display: flex;
            flex-direction: column;
        }

        .inputcontainer {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .inputcontainer3 {
            display: flex;
            align-items: center;
            margin-bottom: 120px;
        }

        .inputcontainer3 label {
            width: 204.8px;
            /* Adjust the width as needed */
            margin-right: 10px;
            /* Add spacing between label and input */
        }

        .inputcontainer3 input,
        .inputcontainer3 select {
            flex: 1;
            padding: 5px;
            margin-bottom: 10px;
            max-width: 75%;
        }

        .inputcontainer3 select {
            margin-top: 5px;
        }

        .inputcontainer label {
            width: 204.8px;
            /* Adjust the width as needed */
            margin-right: 10px;
            /* Add spacing between label and input */
        }

        .inputcontainer input,
        .inputcontainer select {
            flex: 1;
            padding: 5px;
            margin-bottom: 10px;
            max-width: 75%;
        }

        .inputcontainer select {
            margin-top: 5px;
        }

        .category-section .file-input-label {
            display: block;
            margin-top: 5px;
        }

        .category-section .file-input {
            margin-top: 5px;
            border: 1px solid black;
        }

        .update-delete-buttons {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
            margin: 0 auto;
            margin-right: 12px;
        }

        .update-button {
            width: 100px;
            height: 50px;
            flex-shrink: 0;
            border-radius: 30px;
            padding: 10px 15px;
            font-size: 15px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
            border: 2px;
            color: black;
            color: #FFF;
            text-align: center;
            font-family: Inter;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            letter-spacing: 0.513px;
            margin-right: 10px;
        }

        .delete-button {
            width: 100px;
            height: 50px;
            flex-shrink: 0;
            border-radius: 30px;
            padding: 10px 15px;
            font-size: 15px;
            cursor: pointer;
            background-color: red;
            color: white;
            border: 2px;
            color: black;
            color: #FFF;
            text-align: center;
            font-family: Inter;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            letter-spacing: 0.513px;
        }

        .button-back {
            width: 100px;
            height: 50px;
            flex-shrink: 0;
            border-radius: 30px;
            padding: 10px 15px;
            font-size: 15px;
            cursor: pointer;
            background-color: red;
            color: white;
            border: 2px;
            /* Menambahkan garis batas */
            text-align: center;
            font-family: Inter;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            letter-spacing: 0.513px;
        }

        .button-back a {
            color: white;
            text-decoration: none;
        }

        .button-back:hover {
            background-color: gray;
            color: #fff;
        }

        /* */

        .outtcontainer {
            display: flex;
            align-items: center;
            margin-right: 50px;
            margin-bottom: 20px;
        }

        .buttonkelas {
            width: 100px;
            height: 37px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 70px;
            margin-left: 170px;
        }

        .outtcontainer2 {
            display: flex;
            align-items: center;
            margin-right: 50px;
            margin-bottom: 20px;
        }

        .buttonsmt2 {
            width: 100px;
            height: 37px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 10px;
            margin-left: 142px;
        }

        .tempatimage {
            margin-left: 140px;
        }

        h1 {
            font-size: 20px;
        }