/*--------------------------------------------
    General CSS
--------------------------------------------*/
body {
    font-size: 16px;
    font-family: "Titillium Web", sans-serif;
    background-color: #1b3620;
    background-image: url(img/bg_login.png);
    background-repeat: repeat;
    background-size: 400px;
    background-blend-mode: overlay;
}

.body-lecturer {
    font-family: "Titillium Web", sans-serif;
    background-color: #002739;
    background-image: url(img/bg_login.png);
    background-repeat: repeat;
    background-size: 400px;
    background-blend-mode: multiply;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --ltc1-color: #2a6535; /* Default color used for the majority of the text content across the entire website */
    --ltc2-color: #215429; /* Color for headings, subheadings and title throughout the website */
    --ltc3-color: #81af81; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --lecturer-color: #00344d;
    --lecturerbtn-color: #008fd1;
    --hover-btn: #fdfdfda1;
    --card-bg: #bac1c2;
    /* --font-utama: 'Times New Roman', Times, serif; */
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .right-menu {
        display: flex !important;
    }
}


/*--------------------------------------------
    Header
--------------------------------------------*/
.header-area {
    height: 100px;
    background-image: linear-gradient(#112414, #17301c00);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-area-lecturer {
    height: 100px;
    background-image: linear-gradient(#111e24, #17263000);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo Styling */
.header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header-logo img {
    width: auto;
    height: 70px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 3px 8px #0e0e0e;
}

/* Left and Right Menu Items */
.left-menu a, .right-menu a {
    font-size: 1.5rem;
    color: #758285;
    margin-left: 20px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.right-menu-icon {
    width: 1.7rem;
    height: 1.7rem;
    transition: 0.5s;
    margin-left: 5px;
    filter: drop-shadow(0px 0 8px #161616);
}

.right-menu-icon:hover {
    width: 1.7rem;
    height: 1.7rem;
    transition: 0.5s;
    margin-left: 5px;
    filter: drop-shadow(0px 10px 8px #161616);
}

.left-menu a:first-child,
.right-menu a:first-child {
    margin-left: 0;
}

.left-menu a:hover, .right-menu a:hover {
    color: var(--ltc3-color);
}

/*--------------------------------------------
    Menu at Content
--------------------------------------------*/
.menu-item {
    background-color: var(--ltc3-color);
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center; /* Align image in the center */
    background-blend-mode: multiply;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 20px;
    border-style: solid;
    border-width: 1px 0px 0 0;
    border-color: #ffffff6e;
    transition: background-color 0.3s, transform 0.3s;
    position: relative; /* Enable layering with pseudo-elements */
}

.menu-item-lecturer {
    background-color: var(--lecturerbtn-color);
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center; /* Align image in the center */
    background-blend-mode: multiply;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 20px;
    border-style: solid;
    border-width: 1px 0px 0 0;
    border-color: #ffffff6e;
    transition: background-color 0.3s, transform 0.3s;
    position: relative; /* Enable layering with pseudo-elements */
}

.menu-item-admin {
    background-color: #b75300;
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center; /* Align image in the center */
    background-blend-mode: hard-light;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 20px;
    border-style: solid;
    border-width: 1px 0px 0 0;
    border-color: #ffffff6e;
    transition: background-color 0.3s, transform 0.3s;
    position: relative; /* Enable layering with pseudo-elements */
}

.menu-item-admin:hover {
    background-color: #d56000;
    transform: scale(1.01);
    box-shadow: 0 0 20px #ffdd00 inset;
    transition: 0.3s;
}

.menu-item:hover {
    background-color: var(--ltc1-color);
    transform: scale(1.01);
    box-shadow: 0 0 20px var(--ltc3-color) inset;
    transition: 0.3s;
}

.menu-item-lecturer:hover {
    background-color: var(--lecturerbtn-color);
    transform: scale(1.01);
    box-shadow: 0 0 20px 4px var(--lecturerbtn-color) inset;
    transition: 0.3s;
}

/* Menu Icon */
.menu-icon {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
    margin-right: 0.8rem;
    filter: drop-shadow(0px 7px 6px #3232329d);
}

.menu-item:hover .menu-icon {
    transform: scale(1.2);
}

/* Menu Text */
.menu-text {
    font-size: 20px;
    font-weight: 500;
    text-shadow: 0 1px 3px #282626;
    color: var(--background-color);
    margin-left: 0;
    transition: transform 0.3s ease;
    transition: 0.3s;
}

.menu-item:hover .menu-text {
    text-shadow: 0 1px 10px #282626;
    transition: 0.3s ease;
    margin-left: 5px;
}

/*--------------------------------------------
    Footer For Web View
--------------------------------------------*/

.footer-web {
    margin-top: 40px;
    padding-top: 10px;
    align-content: center;
    justify-content: center;
    display: flex;
    font-size: 12px;
    color: #cfcfcf;
    letter-spacing: 1px;
}

.ltcname {
    color: var(--ltc3-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
}

/*--------------------------------------------
    Card Content
--------------------------------------------*/

.kad {
    background-color: var(--card-bg);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 3px 10px #0000009d;
}

.kad a{
    text-decoration: none;
}

.form-select {
    background-color: var(--ltc2-color);
    color: var(--background-color);
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px;
    border-style: none;
}

.box-content {
    background-color: #919191;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-title {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: 0 1px 8px #000000;
    text-align: center;
}

.card h1 {
    font-size: 65px;
    font-weight: 600;
    font-weight: 600;
    text-shadow: 0 1px 8px #000000a5;
    color: var(--background-color);
}

.card h2 {
    font-weight: 600;
    text-shadow: 0 1px 8px #000000;
    color: var(--background-color);
}

.card h3 {
    font-size: 18px;
    font-weight: 300;
    text-shadow: 0 1px 8px #000000;
    color: var(--background-color);
    letter-spacing: 1px;
}

.card {
    border-radius: 8px;
    overflow: hidden;
    transition: 0.5s;
}

.card:hover {
   box-shadow: 0 0 10px 4px var(--lecturerbtn-color);
   transition: 0.5s;
}

.card a{
    text-decoration: none;
}

/*--------------------------------------------
    Footer For Phone View
--------------------------------------------*/

.footer-phone {
    background-color: var(--ltc2-color);
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: bottom; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: -2px 0 15px #000000;
    border-radius: 20px 20px 0 0;
    border-style: solid;
    border-width: 1px 1px 0 0;
    border-color: #828282;
}

.footer-phone-lecturer {
    background-color: var(--lecturer-color);
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: top; /* Align image in the center */
    background-blend-mode: luminosity;
    box-shadow: -2px 0 15px #000000;
    border-radius: 20px 20px 0 0;
    border-style: solid;
    border-width: 1px 1px 0 0;
    border-color: #828282;
}

.footer-menu {
    margin-top: 10px;
    margin-bottom: 10px;
}

footer.fixed-bottom .footer-menu-icon {
    width: 2rem;
    height: 2rem;
    transition: 0.5s;
    filter: drop-shadow(0px 0 8px #161616);
    margin-top: 10px;
    margin-bottom: 15px;
}

footer.fixed.bottom .footer-menu-icon:hover {
    width: 2rem;
    height: 2rem;
    transition: 0.5s;
    filter: drop-shadow(0px 0px 8px #86c401);
}

/* footer.fixed-bottom .footer-menu i {
    font-size: 2rem;
    color: var(--ltc1-color);
    transition: 0.5s;
}

footer.fixed-bottom .footer-menu i:hover {
    color: var(--ltc3-color);
    font-size: 1.8rem;
    transition: 0.5s;
} */

/* Notification Badge */
.notification-badge {
    font-size: 0.75rem;
    padding: 0.4em 0.6em;
    margin-top: 10px;
    text-decoration: none;
}

/*--------------------------------------------
   Name Heading
--------------------------------------------*/

.name {
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--ltc3-color);
    padding: 6px;
    border-top: 1px solid var(--ltc2-color);
    border-bottom: 1px solid var(--ltc2-color);
    background-color: #00000053;
}

.name-lecturer {
    font-size: 15px;
    letter-spacing: 1px;
    color: #009ae1;
    padding: 6px;
    border-top: 1px solid #0073a9;
    border-bottom: 1px solid #0073a9;
    background-color: #00000053;
}

.title {
    font-weight: 600;
    color: var(--background-color);
}

.title, span {
    white-space: nowrap;
}

/*--------------------------------------------
   Breadcrumb
--------------------------------------------*/

.breadcrumb-area {
    display: relative;
    align-items: center;
    justify-content: center;
    border-radius: 15px 15px 0 0;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1px;
    background-color: var(--ltc1-color);
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: top; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: 0px -3px 8px #00000067;
}

.breadcrumb-area-hafazan {
    border-radius: 20px;
    padding: 12px;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 400;
    text-shadow: 0 2px 4px #000000;
    letter-spacing: 1px;
    background-color: var(--lecturerbtn-color);
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: bottom; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: 0px 0px 8px #00000067;
    transition: 0.5s;
}

.breadcrumb-area-hafazan:hover {
    background-color: var(--ltc1-color);
    color: #ffffff;
    transition: 0.5s;
}

.breadcrumb-area img {
    width: 47px;
    height: 47px;
    align-items: center;
    margin-left: 15px;
    margin-bottom: 7px;
    justify-content: center;
    filter: drop-shadow(0px 7px 6px #3232329d);
    transition: 0.5s;
}

.breadcrumb-area img:hover {
    filter: drop-shadow(0px 0px 17px #000000);
    transition: 0.5s;
}

.breadcrumb-title {
    font-weight: 600;
    color: var(--background-color);
    text-shadow: 0 1px 8px #000000;
    letter-spacing: 1px;
}

#breadcrumb a {
    text-decoration: none;
    color: #007bff; /* Bootstrap primary color */
}

#breadcrumb a:hover {
    text-decoration: underline;
}

/*--------------------------------------------
   Effect
--------------------------------------------*/

/* Fade In Effect */
.fade-in {
    opacity: 0; /* Start as invisible */
    transition: opacity 0.8s ease; /* Transition for fade-in */
}

.fade-in.show {
    opacity: 1; /* Fully visible */
}

.disabled {
    pointer-events: none;
    cursor: default;
}

/*-----------------------------
 Login Form
------------------------------*/

.login-box {
    width: 500px;
    margin-top: 50px;
    background-color: var(--ltc3-color);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 15px #000000aa;
  }
  
  .login-box .header {
    width: 100%; /* Full width of the box */
    background-color: var(--ltc2-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: top; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: -2px 0 15px #000000;
  }

  .login-box .content {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 0 35px 0 30px;
  }
  
  .login-box .header .title {
    font-size: 25px;
    font-weight: 500;
    color: var(--background-color);
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-shadow: 0 2px 3px #000000;
  }
  
  .login-box .footer {
    font-size: 12px;
    color: var(--background-color);
    text-shadow: 0 2px 3px #000000;
    width: 100%; /* Full width of the box */
    background-color: var(--ltc2-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: bottom; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: -2px 0 15px #000000;
  }

  @media (max-width: 600px) {
    .login-box .footer {
      font-size: 12px;
      padding: 8px;
    }
    .login-box .footer span {
      display: block;
      margin-top: 5px;
    }
  }

/*-----------------------------
 Register Form
------------------------------*/
.login-box-register {
    width: 900px;
    margin-top: 50px;
    background-color: var(--ltc3-color);
    border-radius: 15px;
    box-shadow: 0 8px 15px #000000aa;
  }
.login-box-register .header {
    width: 100%; /* Full width of the box */
    background-color: var(--ltc2-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: top; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: -2px 0 15px #000000;
  }
  
.login-box-register .header .title {
    font-size: 25px;
    font-weight: 500;
    color: var(--background-color);
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-shadow: 0 2px 3px #000000;
  }

.login-box-register .content {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 20px 0 20px;
    text-align: left;
  }

.login-box-register .footer {
    font-size: 12px;
    color: var(--background-color);
    text-shadow: 0 2px 3px #000000;
    width: 100%; /* Full width of the box */
    background-color: var(--ltc2-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-image: url(../assets/img/btn_img.png);
    background-size: cover; /* Scale the image to fit */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: bottom; /* Align image in the center */
    background-blend-mode: overlay;
    box-shadow: -2px 0 15px #000000;
  }

@media (max-width: 600px) {
    .login-box-register .footer {
      font-size: 12px;
      padding: 8px;
    }
    .login-box-register .footer span {
      display: block;
      margin-top: 5px;
    }
  }

/*-----------------------------
  Table
------------------------------*/

.title-table {
    font-size: calc(1rem + 0.5vw);
    color: var(--background-color);
    text-shadow: 0 2px 3px #000000bd;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 12px;
    background-color: var(--ltc2-color);
    border-radius: 10px;
    margin-top: 20px
}

.table-css {
    margin-top: 10px;
}

.table-css .title{
    font-size: 1rem;
    color: var(--ltc2-color);
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-left: 3px;
    text-decoration: underline;
}

.table-status {
    font-size: 12px;
}

.table-css .hadir{
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 20px;
    border-radius: 15px;
    background-color: #007aa6;
    padding: 9px;
}

.table-css .code{
    font-size: 0.7rem;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 20px;
    border-radius: 9px;
    background-color: #003b50;
    padding: 9px;
}