@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

:root {
    --txt-color: #09060f;
    --bg-color: #fbfafd;
    --primary-color: #7542d5;
    --secondary-color: #af8def;
    --accent-color: #8b53f3;
}

* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



html {

    font-family: 'Poppins', sans-serif;

    font-size: 62.5%;

    overflow-x: hidden;

}



body {

    font-size: 1.6rem;

}



input:-webkit-autofill {

    color: transparent;

}



.signin {

    width: 100%;

    height: 100vh;

    background: url(./pict/background-loginsvg.svg);

    background-size: cover;

    background-repeat: no-repeat;

    overflow-x: hidden;



    display: flex;

    justify-content: flex-start;

    align-items: center;

}



.signin .card {

    font-size: 16px;

    font-family: 'Poppins', sans-serif;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    width: max(500px);

    height: 100vh;

    border-radius: 0 10px 10px 0;

    background: rgba(255, 255, 255, 0.25);

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(7.5px);

    -webkit-backdrop-filter: blur(7.5px);

    border: 1px solid rgba(255, 255, 255, 0.18);

    padding: 20px;

    margin-right: 20px;

}



.signin .card .logo {

    width: 100px;

    height: auto;

    margin-bottom: 20px;

}



.signin .card h1 {

    font-weight: bold;

    color: #fff;

    justify-self: start;

    margin-bottom: 50px;

}



.status {

    color: #42c53d;

    text-align: center;

    width: 100%;

}



.inputs {

    position: relative;

}



.inputs label {

    font-size: 16px;

    position: absolute;

    top: 0;

    left: 0;

    padding: 2px 0 0 10px;

    transition: top .5s ease, color .5s ease;

}



.inputs button {

    padding: 7px 10px;

    font-size: 16px;



    position: absolute;

    top: 0;

    right: 0;

    border: none;

    outline: none;

    background: transparent;

}



.inputs input {

    width: 300px;

    height: 30px;

    padding-left: 10px;

    margin-bottom: 30px;



    font-size: 18px;



    background: rgba(255, 255, 255, 0.35);

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border: none;

    outline: none;

}



.inputs input:valid {

    background: rgba(124, 255, 1, 0.35);

}



.inputs input:focus~label {

    font-size: 13px;

    top: -23px;

    left: 0;

}



.inputs input:valid~label {

    color: greenyellow;

    font-size: 13px;

    top: -23px;

    left: 0;

}



.signin .card .link {

    display: flex;

    justify-content: space-between;

}



form .link>* {

    background: transparent;

    border: none;

    outline: none;

    cursor: pointer;





    font-size: 18px;

    text-decoration: none;

    color: antiquewhite;

}



form .link .login {

    padding: 10px 20px 10px 20px;

    background-color: rgb(123, 30, 211);

    font-weight: 500;

    border-radius: 15px;

}



.signin .sekolah {

    margin: auto;

    font-family: 'Poppins', sans-serif;

    color: #fff;

    font-size: 8.1rem;

    transform: translateX(20%);

    opacity: 0;

    animation: text 1s forwards;

}

/* Phosphor Icon Sizing */
.ph-32 {
    font-size: 32px;
}


/* dashboard page */

.dashboard,

.absen,

.passwords,

.history,

.generator,

.mapel,

.monitoring {

    background: var(--background-color);

}



.dash {

    display: flex;

    flex-direction: column;

    position: relative;



    width: 100%;

    min-height: 125vh;

}



.profile .photo {
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
    margin: 3rem 0 2rem;
    overflow: hidden;
    border-radius: 50%;
    border: 5px solid #873cfa;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 
.photo-profile {
    width: 150px;
    height: 150px;
    overflow: hidden;
} */

.profile {

    width: 100%;

    height: fit-content;

    position: relative;

    background-color: #fff;

    /* border-bottom: 2px solid #873cfa;

    box-shadow: inset 0 -10px 0 #873cfa; */

    padding: 3rem 0 5rem;

}



.profile .welcome {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 50%;

}



/* .profile .photo img {

    width: 100%;

    height: 100%;

} */

.profile h1 {

    text-align: center;

    font-size: 40px;

    color: rgb(0, 0, 0);

    margin-left: 10px;

    transform: translateY(-40%);

    opacity: 0;

    animation: text 1.2s forwards;

}



.profile h1:not(.ket) {

    margin: 30px 0 0 10px;

}



.profile h1.date {

    font-size: 2.1rem;

}



svg {

    position: relative;

    bottom: -10px;

    width: 100%;

}



.svgs {

    z-index: -1;

}



.menu {

    display: flex;

    gap: 10rem;

    justify-content: center;

    flex-wrap: wrap;

    width: 100%;

    min-height: 62vh;

    padding: 4rem 0 12rem 0;

    border-radius: 20px 20px 0 0;

    /* background: var(--primary-color); */

}



.menu .item {

    width: 33%;

    height: fit-content;

    padding: 2rem;

    border-radius: 15px;

    background-color: var(--accent-color);

}


.menu .menu-izin .title {

    padding-bottom: 17px;

}



.menu .item .menu-izin--button {

    margin-top: 10px;

    display: flex;

    justify-content: center;

}



.menu .item.absen,

.menu .item.kegiatan,

.menu .item.menu-izin {

    height: fit-content;
}



.absen,

.laporan,

.kegiatan {

    display: flex;

    flex-direction: column;

    padding: 10px;

    align-content: center;

}



.title {

    position: relative;

    width: 100%;

    height: min-content;

    padding: 10px;



    display: flex;

    column-gap: 10px;

    align-items: center;



    /* border-bottom: 2px solid white; */



}



.title .icon {

    width: 13%;

}



.title h1 {

    font-size: 2.5rem;

    color: #fff;

}



.title::before {

    position: absolute;

    bottom: 0;

    content: '';

    width: 90%;

    height: 2px;

    background-color: #fff;

}



.tabel {

    height: 20vh;

    overflow-y: auto;

}



table:not(#myTable) {

    margin-top: 10px;

    width: 100%;

    border-collapse: collapse;

}



table:not(#myTable),

table:not(#myTable) th,

table:not(#myTable) td {

    border: 2px solid rgb(0, 0, 0);

    text-align: center;

    color: white;

}



table:not(#myTable) th {

    font-size: 15px;

}



table:not(#myTable) td {

    font-size: 12px;

    padding: 5px;

}



div.dataTables_wrapper {

    margin-top: 3.5rem;

    background-color: var(--bg-color);

    padding: 2rem;

    border-radius: 15px;

}



.absen .daftar {

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    gap: 0.5em;

    /* align-items: center; */



    padding: 10px;

    width: 100%;

    height: 100%;

}



.bn11 {

    font-family: 'Poppins', sans-serif;

    display: inline-block;

    padding: 0.5em 1em;

    border: 0.16em solid rgba(255, 255, 255, 0);

    background-color: var(--bg-color);

    box-sizing: border-box;

    text-decoration: none;

    font-weight: 400;

    color: var(--txt-color);

    text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);

    text-align: center;

    transition: all 0.2s;

    border-radius: 12px;


    /* width: 180px; */

    flex: 1 1 20%;

    height: fit-content;

}

.bn11.absensi {
    color: white;
    background-color: var(--primary-color);
}


.full-bn {

    flex: 1 0 100% !important;

}



.bn11:hover {

    border-color: rgb(255, 255, 255);

}



.gantipw.bn11 {

    /* color: #000; */

    font-weight: 500;

    background-color: rgb(25, 114, 5);

}



.laporan {

    justify-content: flex-start;

}


.laporan a.map:hover {

    color: rgb(127, 255, 144);

}



.laporan .history {

    margin-top: 10px;

    flex: 0 1 10%;

}

.history {
    background-color: var(--accent-color);
}



nav {

    position: sticky;

    left: 0;

    bottom: 0;

    width: 100%;

    min-height: 10vh;

    background: var(--primary-color);

    padding: 10px;

    /* overflow: hidden; */

    display: flex;

    justify-content: center;

    align-items: center;

    column-gap: 15px;

    /* z-index: -1; */

}



nav a,
nav button {

    font-size: 14px;

    text-decoration: none;

    color: antiquewhite;

    background-color: transparent;

    border: none;

    outline: none;

    cursor: pointer;

    font-family: 'Poppins', sans-serif;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



nav a i,
nav button i {

    width: 30px;

    transition: .3s ease;

}



nav a:hover i,
nav button:hover i {

    transform: translateY(-15%);

}

nav .setting-popup {
    position: absolute;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    width: 100%;
    height: auto;
    background-color: var(--accent-color);
    border-radius: 20px 20px 0 0;
    opacity: 0;
    visibility: hidden;
    bottom: 80%;
    transition: all .5s ease;
    box-shadow: -6px -19px 47px -17px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -6px -19px 47px -17px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -6px -19px 47px -17px rgba(0, 0, 0, 0.3);
}

nav .setting-popup a {
    flex-direction: row;
    justify-content: start;
    gap: 1.5rem;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 10px;
    background-color: #2a1c4f;
}

nav .setting-popup.visible {
    transform: translateY(-8%);
    opacity: 1;
    visibility: visible;
}


footer {

    width: 100%;

    min-height: 30vh;

    background: var(--secondary-color);

    padding: 4rem 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    row-gap: 10px;


}



footer .credits h1 {

    font-size: 40px;

    color: white;

}



footer .credits span {

    color: red;

}



footer .social a {

    margin-left: 15px;

}



footer .social a img {

    width: 15%;

}



footer .social a img {

    transition: .3s ease;

}



footer .social a:hover img {

    transform: translateY(-15%);

}







/* Absensi page */



.row {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.row .col>* {

    text-align: center;

    color: #fff;

}



.result {

    background-color: green;

    color: #fff;

    padding: 20px;

    width: 100px;

    height: 100px;

}

.absen {
    padding: 0 !important;
}

.absen main {

    width: 100%;

    height: 90vh;

    display: flex;

    justify-content: center;

    align-items: center;

}



#html5-qrcode-anchor-scan-type-change {

    display: none;

}



/* Passowrd page */

.passwords main {

    width: 100vw;

    min-height: 100vh;



    display: flex;

    justify-content: center;

    align-items: center;

}



.passwords .changepw {

    width: min(100% - 4rem, 55ch);

    min-height: 90vh;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    border-radius: 50px;

    background: #b68ce5;

}



.passwords .changepw h1 {

    margin-bottom: 50px;

}



/* Histori Absensi */

.history main {

    width: 100vw;

    min-height: 90vh;

    display: flex;

    flex-direction: column;

    padding: 5rem 1.5rem;

    gap: 3rem;

}



main p,

main h1 {

    text-align: center;

    color: white;

}



.history .data {

    display: flex;

    flex-direction: column;

    height: auto;

    padding: 5.5rem 3rem;

    border-radius: 15px;

    background-color: #b68ce5;

}



.history .data.absen {

    align-items: center;

}



.data p {

    min-height: 3vh;

    font-size: 110%;

    color: #fff;

    font-weight: 500;

    text-align: center;

}



.data h1 {

    width: 100%;

    height: 5vh;

    text-align: center;

    margin-bottom: 20px;

    color: #fff;

}



.data .data-absen {

    width: 100%;



    overflow: auto;

    margin-top: 15px;

}



.data form {

    display: flex;

    flex-direction: column;

    justify-content: center;

    /* align-items: center; */



    margin-top: 15px;

}



.data form span {

    color: white;

}



.data form button {

    flex: 1 0 10%;

    margin: 10px 0 0 0;

}



/* Generator QRCODE */

.generator main {

    width: 100vw;

    min-height: 100vh;



    display: flex;

    justify-content: center;

    align-items: center;

}



.generator .option {

    width: 80%;

    min-height: 80vh;

    padding: 20px;

    margin-bottom: 80px;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    border-radius: 50px;

    background: linear-gradient(145deg, #7a36e1, #9040ff);

    box-shadow: 20px 20px 60px #7333d5,

        -20px -20px 60px #9b45ff;

}



.generator h1 {

    width: 100%;

    height: 5vh;

    color: #fff;

    font-size: 200%;

    text-align: center;

}



.generator .data-qrcode {

    width: 100%;

    min-height: 30vh;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;





    overflow: auto;

    margin-top: 30px;

    margin-bottom: 5rem;

    gap: 1.5rem;

}



.generator h1:nth-last-child(2),

.generator h1:nth-last-child(4) {

    margin-top: 40px;

}



.generator .monitoring-kegiatan {

    justify-content: start;

    height: 30vh;

    overflow-y: auto;

    padding-bottom: 10px;

}



.generator .monitoring-kegiatan .tabel {

    width: 100%;

}



.data-qrcode>* {

    width: 50%;

    height: min-content;

    text-align: center;

}



.data-qrcode.monitoring-data {

    min-height: 8vh;

}



/* qrcode mapel & ekskul */

.mapel main {

    width: 100vw;

    min-height: 100vh;



    display: flex;

    justify-content: center;

    align-items: center;

}



.mapel .filter {

    width: 80%;

    min-height: 80vh;

    padding: 15px;

    margin-bottom: 80px;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    border-radius: 50px;

    background: linear-gradient(145deg, #7a36e1, #9040ff);

    box-shadow: 20px 20px 60px #7333d5,

        -20px -20px 60px #9b45ff;

}



.mapel h1 {

    width: 100%;

    height: 5vh;

    font-size: 200%;

    text-align: center;

    color: #fff;

}



.mapel form {

    width: 80%;

    margin-top: 40px;

    padding: 10px;

}



.filter datalist option {

    font-size: 0.8em;

    padding: 0.3em 1em;

    background-color: #ccc;

    cursor: pointer;

}



.choice {

    position: relative;

    width: 100%;

}



.choice label {

    font-size: 16px;

    position: absolute;

    top: 0;

    left: 0;

    padding: 2px 0 0 5px;

    transition: top .5s ease, color .5s ease;

}



.choice button {

    padding: 7px 10px;

    font-size: 16px;



    position: absolute;

    top: 0;

    right: 0;

    border: none;

    outline: none;

    background: transparent;

}



.choice input {

    width: 100%;

    height: 30px;

    padding-left: 10px;

    margin-bottom: 30px;



    font-size: 18px;



    background: rgba(255, 255, 255, 0.35);

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border: none;

    outline: none;

}



.choice input:focus~label {

    font-size: 15px;

    top: -25px;

    left: 0;

}



.choice input:valid~label {

    font-size: 15px;

    font-weight: 500;

    top: -25px;

    left: 0;

}



.filter .generate {

    font-family: 'Poppins', sans-serif;

    font-weight: 700;

    cursor: pointer;



    padding: 10px;

    background-color: rgb(23, 180, 70);

    border: 3px solid rgb(26, 226, 86);

    border-radius: 15px;

    outline: none;

    transition: bacground-color .3s ease;

}



.filter .generate:hover {

    background-color: rgb(20, 151, 59);

}



.filter .form-button {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Monitoring Page */

.monitoring main {

    width: 100vw;

    min-height: 100vh;



    display: flex;

    justify-content: center;

    align-items: center;

}



.monitoring .monitoring-card {

    width: 90%;

    min-height: 80vh;

    padding: 15px;

    margin-bottom: 70px;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    border-radius: 50px;

    background: linear-gradient(145deg, #7a36e1, #9040ff);

    box-shadow: 20px 20px 60px #7333d5,

        -20px -20px 60px #9b45ff;

}



.monitoring-card h1 {

    color: #fff;

}



.monitoring-card h3 {

    color: white;

}



.monitoring-card .monitoring-form {

    display: flex;

    flex-direction: column;

    justify-content: center;



    margin-top: 15px;

}



.monitoring-card .monitoring-form label {

    color: white;

}



.monitoring-card .monitoring-form input {

    width: 65%;

}



.monitoring-card .monitoring-form button {

    flex: 1 0 10%;

    margin: 10px 0 0 0;

}



.monitoring-card .monitoring-form--filter {

    display: flex;

    justify-content: center;

    align-items: center;



    column-gap: 5px;

}



.monitoring-card .monitoring-form--filter span {

    font-weight: 900;

    color: white;

}



.monitoring-card .monitoring-table {

    width: 100%;

    height: 60vh;



    overflow-y: auto;

}



.monitoring-card .monitoring-table .monitoring-table--fullname {

    text-align: left;

}



/* surat_izin page */

.wrapper-surat {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    gap: 20px;

    min-height: 100dvh;

    background-color: var(--accent-color);

}



.wrapper-surat .title-page {

    font-size: 3.4rem;

    color: #fff;

}



.wrapper-surat .form-surat {

    width: min(100% - 4rem, 55ch);

    height: auto;

    padding: 5.5rem 3rem;

    border-radius: 15px;

    background-color: #b68ce5;

}



.wrapper-surat .input-wrapper {

    display: flex;

    flex-direction: column;

    padding: 0 2rem;

    gap: 30px;

}



.input-wrapper .input-group {

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    gap: 1.2rem;

    width: 100%;

    min-height: 7rem;

}



.input-wrapper button {

    min-height: 3.5rem;

    margin-top: 1.5rem;

    background: rgb(247, 190, 34);

    border-radius: 10px;

    border: none;

    text-transform: uppercase;

    font-weight: 900;

}



.input-wrapper button:hover {

    border: 2px solid black;

    cursor: pointer;

}



.input-group label {

    font-weight: 500;

    min-width: 12rem;

}



.input-group :is(input, textarea) {

    outline: none;

    border: none;

    padding: 1rem;

    border-radius: 5px;

    flex-grow: 1;

}



.input-group textarea {

    resize: vertical;

}



/* History surat */

.cancel,

.proceed,

.accepted,

.rejected {

    outline: none;

    border: none;

    padding: .5rem 1rem;

    font-weight: 500;

    border-radius: 4px;

}



.proceed {

    color: white;

    background: #217bf1;

}



.accepted {

    color: white;

    background-color: #21af1c;

}



.rejected {

    color: white;

    background-color: rgb(255, 0, 85);

}



.cancel {

    color: white;

    background-color: rgb(255, 0, 85);

    cursor: pointer;

}



.center-text {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 2rem 3rem !important;



}



/** Animation */

@keyframes text {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/** Container */



/** Media Queries */

@media screen and (max-width: 940px) {

    .menu {

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .menu .item {

        width: 90%;

    }



    .title .icon {

        width: 10%;

        height: auto;

    }



}



@media screen and (max-width: 680px) {

    .signin .sekolah {

        display: none;

    }



    .signin .card {

        width: 100%;

        margin-right: 0;

    }



    .absen .daftar .bn11 {

        display: inline-block;

        padding: 15px;

        border: 0.16em solid rgba(255, 255, 255, 0);

        box-sizing: border-box;

        text-decoration: none;

        font-weight: 300;

        font-size: 16px;

        text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);

        text-align: center;

        transition: all 0.2s;



        /* width: 150px; */

        flex: 1;

        height: fit-content;

    }



    .mapel .filter h1 {

        width: 100%;

        font-size: 2.1rem;

    }

}



@media screen and (max-width: 400px) {

    .profile h1 {

        text-align: center;

        font-size: 200%;

        color: rgb(0, 0, 0);

        margin-left: 10px;

        transform: translateY(-40%);

        opacity: 0;

        animation: text 1.2s forwards;

    }



    .title .icon {

        width: 15%;

        height: auto;

    }



    footer {

        min-height: 30vh;

    }



    footer .credits h1 {

        font-size: 200%;

    }



    .generator h1 {

        width: 100%;

        height: 5vh;

        font-size: 100%;

        text-align: center;

    }



    .mapel .filter h1 {

        width: 100%;

        height: 5vh;

        font-size: 1.8rem;

        text-align: center;

    }



    /* History Page */

    .data h1 {

        width: 100%;

        height: 5vh;

        font-size: 200%;

        text-align: center;

        margin-bottom: 20px;

        color: #fff;

    }



    /* Admin Dashboard */

    .generator .data-qrcode {

        margin-top: 15px;

    }



    .data-qrcode>* {

        width: 50%;

        height: min-content;

        text-align: center;

        font-size: 12px;

    }

}