* {
    margin: 0;
    padding: 0;
    outline: none;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #eaeaea;
}

:root {
    --navWidth: 215.42px;
    --black: #000;
    --lightBlack: #000818;
    --blueBlack: #0f141a;
    --blueBlackDark: #090c0f;
    --blueBlackDarkest: #07090c;
    --whiteGreyBlack: #ffffff;
    --textBlack: #000;
    --textWhite: #fff;
    --transBlack: rgba(0, 0, 0, 0.6);
    --white: #fff;
    --orange: #0066cc;
    --grey: #ccc;
    --darkGray: #181818;
    --grey33: #333333;
    --grey44: #444444;
    --grey66: #666666;
    --lightDarkGrey: #999999;
    --lightblue: #0075bb;
    --red: #c50202;
    --green: #1BBA00;
    --yellow: #c5a902;
    --purple: #b952ff;

    --purpletrans50: #b157ff4D;
    --orangetrans50: #ffa5574D;

    --lightbluetrans50: #579aff4D;
    --redtrans50: #c502024D;
    --greentrans50: #1BBA004D;
    --yellowtrans50: #c5a9024D;

    --lightbluetrans60: #579aff99;

    --present: 100%;
    --absent: 0%;
    --leave: 0%;
    --medical: 0%;
    --sports: 0%;
}


/* 
Light mode
black : #fff
blueBlack : #ccc
white : #000 

Dark Mode
black : #000
blueBlack : #0f141a
white : #fff
*/

/* Optional smoother scrollbar */
#noticeBoard::-webkit-scrollbar {
    width: 6px;
  }
  #noticeBoard::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
  }


.btnGrey {
    padding: 10px 20px;
    background-color: #eaeaea;
    color: black;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
}

.btnGrey:hover {
    background-color: #dddcdc;
    /* background-color: #cc450c; */
}

.btnGreyDark {
    padding: 10px 20px;
    background-color: #dddcdc;
    color: black;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
}

.btnGreyDark:hover {
    background-color: #cecece;
    /* background-color: #cc450c; */
}

.btnOrange {
    padding: 10px 20px;
    background-color: var(--orange);
    color: white;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
}

.btnOrange:hover {
    background-color: #cc450c;
}

.btnWhiteOrange {
    padding: 10px 20px;
    background-color: white;
    color: var(--orange);
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
}

.btnWhiteOrange:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.navHead {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navHead a {
    color: black;
    cursor: pointer;
}

.navHead a:hover {
    color: var(--orange);
}


#login {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(149deg, rgba(0, 38, 142, 1) 0%, rgba(0, 117, 187, 1) 100%);
}

#logindiv {
    max-width: 95%;
    width: 400px;
    color: var(--white);
    padding: 20px 30px 30px 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.textInput {
    width: 100%;
    color: black;
    border: 3px solid var(--lightDarkGrey);
    background-color: white;
    padding: 10px 15px 10px 15px;
    border-radius: 7px;
    font-size: 16px;
}

.textInputLogin {
    width: 100%;
    color: black;
    background-color: white;
    padding: 10px 15px 10px 15px;
    border-radius: 8px;
    font-size: 16px;
}

.textInputBorder {
    width: 100%;
    color: var(--textWhite);
    padding: 10px 15px 10px 15px;
    border: 3px solid var(--whiteGreyBlack);
    background-color: transparent;
    border-radius: 8px;
    font-size: 16px;
}

.selectBlack {
    width: 100%;
    color: var(--textWhite);
    padding: 10px 15px 10px 15px;
    border: 3px solid var(--whiteGreyBlack);
    background-color: var(--black);
    border-radius: 7px;
    font-size: 16px;
}

.selectBlueBlack {
    width: 100%;
    color: var(--textWhite);
    padding: 10px 15px 10px 15px;
    border: 3px solid var(--whiteGreyBlack);
    background-color: var(--blueBlack);
    border-radius: 7px;
    font-size: 16px;
}

.selectWhite {
    width: 100%;
    color: var(--textWhite);
    padding: 10px 15px 10px 15px;
    border: 3px solid var(--whiteGreyBlack);
    background-color: var(--white);
    border-radius: 7px;
    font-size: 16px;
}

::-webkit-calendar-picker-indicator {
    background-color: white;
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
}

.textInputBorderWhite {
    width: 100%;
    color: var(--textWhite);
    padding: 10px 15px 10px 15px;
    border: 3px solid var(--whiteGreyBlack);
    background-color: transparent;
    border-radius: 7px;
    font-size: 16px;
}

.textColor {
    color: var(--textWhite);
}

.textColorOpposite {
    color: var(--textBlack);
}

.textXLarge {
    font-size: 70px;
    font-weight: bold;
}

.textVVLarge {
    font-size: 3.5vmax;
    font-weight: bold;
}

.textVLLarge {
    font-size: 45px;
    font-weight: bold;
}

.textVLarge {
    font-size: 38px;
    font-weight: bold;
}

.textMLarge {
    font-size: 33px;
    font-weight: bold;
}

.textLarge {
    font-size: 28px;
    font-weight: 600;
}

.textLMedium {
    font-size: 25px;
    font-weight: 600;
}

.textMedium {
    font-size: 22px;
    font-weight: 600;
}

.textMMMedium {
    font-size: 20px;
    font-weight: 600;
}

.textMMedium {
    font-size: 18px;
    font-weight: 600;
}

.textMSmall {
    font-size: 17px;
    font-weight: 500;
}

.textSmallBold {
    font-size: 15px;
    font-weight: 500;
}

.textSmall {
    font-size: 15px;
}

.textVSmall {
    font-size: 13px;
}

.textVSmallBold {
    font-size: 13px;
    font-weight: 500;
}

.textVVSmall {
    font-size: 10px;
}

.textVVSmallBold {
    font-size: 10px;
    font-weight: 500;
}

.textXSmall {
    font-size: 8px;
}

.btnBlack {
    width: 100%;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 15px;
    color: var(--white);
    background-color: var(--black);
    border-radius: 8px;
    font-weight: 600;
    transition-duration: 0.4s;
}

.btnBlackLogin {
    width: 100%;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 15px;
    color: white;
    background-color: black;
    border: 3px solid black;
    border-radius: 8px;
    font-weight: 600;
    transition-duration: 0.2s;
}

.btnBlackLogin:hover {
    background: transparent;
}

.btnBlackOrange {
    width: 100%;
    padding: 10px 10px 10px 10px;
    text-align: center;
    font-size: 15px;
    color: var(--black);
    background-color: var(--white);
    border-radius: 8px;
    font-weight: 600;
}

.btnBlackOrange:hover {
    background-color: var(--grey66);
}


.btnBlueLightBlue {
    width: 100%;
    padding: 10px 10px 10px 10px;
    text-align: center;
    font-size: 15px;
    color: white;
    background-color: var(--lightblue);
    border-radius: 8px;
    font-weight: 600;
}

.btnBlueLightBlue:hover {
    background-color: var(--lightbluetrans60);
}


.popBack {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: var(--transBlack);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popBackNormal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: var(--transBlack);
    padding: 15px 0px 15px 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: start;
}

.popBackNormal::-webkit-scrollbar {
    background-color: transparent;
}

.popBackNormal::-webkit-scrollbar-thumb {
    background: var(--white);
    border-radius: 10px;
}

.popDiv {
    background-color: var(--blueBlack);
    border-radius: 10px;
}

#popHeader {
    background-color: var(--black);
    padding: 12px 25px 8px 25px;
    border-radius: 10px 10px 0px 0px;
}

.popDivLoading {
    background: var(--black);
    border-radius: 10px;
    padding: 20px;
}

.popBackRight {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: var(--transBlack);
    display: flex;
    justify-content: end;
    align-items: center;
}

#popNotification {
    height: 100%;
}

#loading {
    width: 60px;
    height: 60px;
    border: 8px solid var(--grey);
    border-top: 8px solid var(--orange);
    border-radius: 100%;
    display: inline-block;
    animation: 1.5s ease-in 0s infinite both loading;
}

@keyframes loading {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

#headerBar {
    padding: 9px;
    background: linear-gradient(149deg, var(--blueBlack) 10%, var(--orange) 110%);
    color: var(--white);
    display: flex;
    flex-direction: row;
}

#headerBar div {
    display: flex;
    justify-content: center;
    align-items: center;
}


#navOption {
    background-color: var(--blueBlack);
    visibility: hidden;
    transition: 0.3s;
}

#navOption p {
    padding: 12px 50px 10px 20px;
    background-color: var(--blueBlack);
    border-radius: 8px;
    color: var(--white);
    margin: 8px;
    cursor: pointer;
}

#navOption p:hover {
    background-color: var(--black);
}

#main {
    /* padding: 15px 0px 15px 10px; */
    display: flex;
    flex-direction: row;
    background-color: var(--black);
}

#main #page {
    flex-grow: 1;
    color: var(--white);
}

::-webkit-scrollbar {
    width: 8px;
    background-color:white;
}

::-webkit-scrollbar-thumb {
    background: var(--orange);
}

#contentArea {
    padding: 25px;
}

#footer {
    width: 100%;
    background-color: var(--black);
}

#footerDiv {
    background-color: var(--blueBlack);
    color: var(--white);
    font-size: 14px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footerDiv div {
    flex-grow: 1;
}

#nav {
    height: 100%;
    min-width: var(--navWidth);
    overflow: auto;
    background-color: var(--blueBlack);
}

.navMenu {
    padding: 15px 18px 15px 18px;
    color: var(--white);
    text-align: start;
    font-size: 13px;
    background-color: var(--blueBlack);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.navMenu:hover {
    background-color: var(--black);
}

.inNavMenuHead {
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    background-color: var(--blueBlackDark);
}

.inNavMenu {
    padding: 10px 0px 10px 30px;
    color: var(--white);
    text-align: start;
    font-size: 13px;
    background-color: var(--blueBlackDark);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.inNavMenu:hover {
    background-color: var(--black);
}

.navIcon {
    font-size: 15px;
    text-align: center;
}

.navIconDiv {
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navTitle {
    flex-grow: 1;
    padding-right: 30px;
    font-weight: 500;
}

.activeMenu {
    background-color: var(--black);
}

.activeMenu i {
    color: var(--orange);
}

.d1 {
    display: flex;
    justify-content: space-evenly;
}

.blockDashboard {
    padding: 15px 22px 15px 22px;
    margin: 0px 0px 0px 10px;
    border-radius: 10px;
    flex-grow: 1;
    background-color: var(--blueBlack);
    color: var(--white);
    display: flex;
}

.blockDashboardColor {
    padding: 15px 24px 10px 24px;
    margin: 0px 0px 0px 10px;
    border-radius: 10px;
    flex-grow: 1;
    background-color: var(--blueBlack);
    color: var(--white);
    display: flex;
}

.blockDashIcon {
    width: 67px;
    height: 67px;
    background-color:var(--black);
    font-size: 25px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnBlue {
    padding: 8px 22px 8px 22px;
    background-color: var(--lightblue);
    color: white;
    text-align: center;
    border: 3px solid var(--lightblue);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnBlue:hover {
    background-color: transparent;
    color: var(--white);
    border: 3px solid var(--lightblue);
}

.btnBlueBorder {
    padding: 8px 22px 8px 22px;
    color: white;
    background-color: transparent;
    color: var(--white);
    text-align: center;
    border: 3px solid var(--lightblue);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
}

.btnBlueBorder:hover {
    background-color: var(--lightblue);
    border: 3px solid var(--lightblue);
}

.btnBlueLight {
    padding: 8px 22px 8px 22px;
    background-color: var(--lightblue);
    color: white;
    text-align: center;
    border: 3px solid var(--lightblue);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnBlueLight:hover {
    background-color: transparent;
    color: var(--black);
    border: 3px solid var(--lightblue);
}

.btnBlueLightFull {
    width: 100%;
    padding: 8px 22px 8px 22px;
    background-color: var(--lightblue);
    color: white;
    text-align: center;
    border: 3px solid var(--lightblue);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnBlueLightFull:hover {
    background-color: transparent;
    color: black;
}

.btnBlackFull {
    width: 100%;
    padding: 8px 22px 8px 22px;
    background-color: black;
    color: white;
    text-align: center;
    border: 3px solid black;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnBlackFull:hover {
    background-color: transparent;
    color: black;
}

.btnRed {
    padding: 8px 22px 8px 22px;
    background-color: var(--red);
    color: white;
    text-align: center;
    border: 3px solid var(--red);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnRed:hover {
    background-color: transparent;
    color: var(--white);
    border: 3px solid var(--red);
}

.btnRedLight {
    padding: 8px 22px 8px 22px;
    background-color: var(--red);
    color: white;
    text-align: center;
    border: 3px solid var(--red);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnRedLight:hover {
    background-color: transparent;
    color: var(--black);
    border: 3px solid var(--red);
}

.btnGreen {
    padding: 8px 22px 8px 22px;
    background-color: var(--green);
    color: white;
    text-align: center;
    border: 3px solid var(--green);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnGreen:hover {
    background-color: transparent;
    color: var(--white);
    border: 3px solid var(--green);
}

.btnYellow {
    padding: 8px 22px 8px 22px;
    background-color: var(--yellow);
    color: white;
    text-align: center;
    border: 3px solid var(--yellow);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnYellow:hover {
    background-color: transparent;
    color: var(--white);
    border: 3px solid var(--yellow);
}

.btnYellowLight {
    padding: 8px 22px 8px 22px;
    background-color: var(--yellow);
    color: white;
    text-align: center;
    border: 3px solid var(--yellow);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnYellowLight:hover {
    background-color: transparent;
    color: var(--black);
    border: 3px solid var(--yellow);
}

.btnYellowBorder {
    padding: 8px 22px 8px 22px;
    color: white;
    background-color: transparent;
    color: var(--white);
    text-align: center;
    border: 3px solid var(--yellow);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.btnYellowBorder:hover {
    background-color: var(--yellow);
}

table {
    width: 100%;
    font-size: 18px;
    text-align: center;
}

table thead th {
    padding: 15px 0px 15px 0px;
    background-color: var(--blueBlack);
    border: 3px solid var(--black);
    font-weight: 500;
    border-radius: 15px;
}

#tableBlack {
    color: var(--white);
}

#tableBlack thead th {
    padding: 10px 0px 10px 0px;
    background-color: var(--black);
    font-weight: 500;
    border-radius: 0px;
}

table tbody tr td {
    padding: 15px 0px 15px 0px;
    text-align: center;
    background-color: #d3d3d3;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    border: 4px solid #eaeaea;
}

.tableLight thead th {
    padding: 15px 0px 15px 0px;
    background-color: #eaeaea;
    border: 3px solid var(--white);
    font-weight: 500;
    border-radius: 15px;
}

.tableLight tbody tr td {
    padding: 5px 0px 5px 0px;
    text-align: center;
    font-size: 16px;
    border: 3px solid var(--white);
}

table tbody tr:nth-child(even) {
    /* background-color: var(--blueBlackDark); */
    background-color: #cacaca;
}

table tbody tr td:hover {
    background-color: #bdbdbd;
    /* background: var(--blueBlackDarkest); */
}

.smallBtn {
    padding: 4px 15px 4px 15px;
    border: 3px solid var(--blueBlackDarkest);
    color: var(--white);
    border-radius: 30px;
    cursor: pointer;
}

#isNewNotify {
    animation: 0.5s ease 0s infinite alternate blinkNotify;
}

@keyframes blinkNotify {
    from {
        background-color: transparent;
    }
    to {
        background-color: red;
    }
}

.checkedStar {
    color: var(--orange);
}



input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* @media(max-width: 800px){
    #nav {
        position: fixed;
        display: none;
    }
} */


.textActive {
    border: none;
    border-bottom: 2px solid black;
}

.textActive:focus {
    border-bottom: 2px solid var(--orange);
}



.navHeadDemo {
    display: inline-block;
}

.firstColumn {
    height: calc(100vh - 112px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.forPC {
    display: block;
}
.forMobile {
    display: none;
}

@media only screen and (max-width: 900px) {
    /* .navHead {
        display: none;
    }
    .navHeadDemo {
        display: none;
    }
    .firstColumn {
        height: auto;
        padding: 20px 15px;
        display: block;
    }
    .firstColumn div {
        width: 100%;
    } */

    /* .forPC {
        display: none;
    }

    .forMobile {
        display: block;
    } */


    /* .btnOrange {
        padding: 7px 14px;
        font-size: 13px;
        background-color: var(--orange);
        color: white;
        cursor: pointer;
        border-radius: 10px;
        font-weight: 600;
    }
    
    .btnOrange:hover {
        background-color: #cc450c;
    }

    .btnWhiteOrange {
        padding: 7px 14px;
        background-color: white;
        font-size: 13px;
        color: var(--orange);
        cursor: pointer;
        border-radius: 10px;
        font-weight: 600;
    }
    
    .btnWhiteOrange:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .textXLarge {
        font-size: 34px;
        font-weight: bold;
    }
    
    .textVVLarge {
        font-size: 2.2vw;
        font-weight: bold;
    }
    
    .textVLLarge {
        font-size: 21px;
        font-weight: bold;
    }
    
    .textVLarge {
        font-size: 18px;
        font-weight: bold;
    }
    
    .textMLarge {
        font-size: 16px;
        font-weight: bold;
    }
    
    .textLarge {
        font-size: 17px;
        font-weight: 600;
    }

    .textLargeL {
        font-size: 15px;
        font-weight: 600;
    }
    
    .textLMedium {
        font-size: 14px;
        font-weight: 600;
    }
    
    .textLMMedium {
        font-size: 14px;
        font-weight: 600;
    }
    
    .textMedium {
        font-size: 14px;
        font-weight: 600;
    }
    
    .textMMMedium {
        font-size: 13px;
        font-weight: 600;
    }
    
    .textMMedium {
        font-size: 13px;
        font-weight: 600;
    }
    
    .textMSmall {
        font-size: 14px;
        font-weight: 500;
    }
    
    .textSmallBold {
        font-size: 1em;
        font-weight: 500;
    }
    
    .textSmall {
        font-size: 12px;
    }
    
    .textVSmall {
        font-size: 11px;
    }
    
    .textVSmallBold {
        font-size: 11px;
        font-weight: 500;
    }
    
    .textVVSmall {
        font-size: 9px;
    }
    
    .textVVSmallBold {
        font-size: 9px;
        font-weight: 500;
    }
    
    .textXSmall {
        font-size: 7px;
    } */
}







.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}