* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
    font-variant-ligatures: none;
    /* border: white .06rem solid; */
}

body, html {
  overflow: hidden;
  height: 100%;
}

body {
  position: relative;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

/* FONT CONFIGURATION */
h1 {
    font-weight: 600;
    line-height: 2;
    color: var(--loading-dark);
    font-size: 1.69rem;
}

h2 {
    font-weight: 500;
    line-height: 2;
    color: var(--loading-dark);
    font-size: 1.25rem;
}

h3 {
    font-weight: 500;
    line-height: 2;
    color: var(--loading-dark);
}

p, li {
    font-size: 1.13rem;
    font-weight: 400;
    color: var(--loading-dark);
}

span {
    font-size: 1.13rem;
    font-weight: 300;
    color: var(--loading-dark);
}

a {
    text-decoration: none;
    line-height: 0;
}

button {
    font-weight: 500;
    font-size: 1.13rem;
    cursor: pointer;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  /* border-radius: .63rem; */
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 1rem;
}

thead {
  background-color: var(--main-background); 
  color: var(--loading-dark);
  user-select: none;
  pointer-events: none;
  font-weight: 500;
  border-radius: .63rem;
  overflow: hidden;
  border-radius: .63rem !important;
}

thead th {
  background-color: var(--main-background);
  color: var(--loading-dark);
  
 
  border-top: .06rem solid transparent; 
  border-bottom: .06rem solid transparent;
}

thead th:first-child {
  border-top-left-radius: .63rem;
  border-bottom-left-radius: .63rem;
}

thead th:last-child {
  border-top-right-radius: .63rem;
  border-bottom-right-radius: .63rem; 
}

tbody tr:hover {
    background-color: var(--main-background-data); 
    cursor: pointer;
}

th {
  background-color: var(--main-background); 
  color: var(--loading-dark);
  user-select: none;
  pointer-events: none;
  font-weight: 500;
  font-size: 1rem;
  text-align: left;
  border: none;
  padding: .88rem;
  /* border-radius: .63rem; */
}

td {
  padding: .63rem .75rem;
  text-align: left;
  border: none;
  opacity: 0.75;
}

tr:not(:nth-child(1)) {
  border-bottom: .06rem solid var(--nav-focused);
  border-top: .06rem solid var(--nav-focused);
}

tr:hover {
  opacity: 1;
}

tr:nth-last-child(1) {
  border-bottom: none;
}

thead tr {
  border-bottom: .09rem solid var(--text-outline-light);
}

option {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /*ayaw mawala ng ligatures so i used this*/
}

select {
  cursor: pointer;
}

option:hover {
  accent-color: var(--red-light);
}

hr {
  opacity: 0.5;
  /* border: .06rem solid var(--red-vdark); */
}

input[type="checkbox"] {
  accent-color: var(--red-dark);
  cursor: pointer;
}

/*Dashboard Structure*/
.dashboard {
    display: grid;
    height: 100vh;
    grid-template-rows: 1fr;
    grid-template-columns: 21.88rem minmax(0, 1fr);
    grid-template-areas: "side main";
    background: var(--red-gradient-nav);
    padding: .94rem;
}

    .navigation_bar {
        grid-area: side;
        display: grid;
        height: 100%;
        grid-template-rows: 7em auto auto auto;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "logo" 
        "links"
        "links_admin"
        "bottom"
        ;
        background-color: transparent;
        padding: 1.25rem 2.5rem 1.25rem 1.25rem;
        overflow: hidden;
    }

      .nav_logo {
        grid-area: logo;
        display: flex;
        justify-content: center;
      }

      .nav_logo img {
        height: 5em;
        width: auto;
      }

      .nav_links {
        grid-area: links;
        height: 100%;
      }

        .nav_links ul {
          display: flex;
          flex-direction: column;        
        }

          .nav_links .links, .nav_links li, .nav_links_admin li, .nav_links_admin .links {
            list-style-type: none;
            padding: .94rem .94rem .94rem 1.25rem;
            opacity: 0.85;
            transition: 0.2s;
            color: var(--main-content);
            border-radius: 1.56rem;
          }

          .nav_links li, .nav_links_admin li {
            list-style-type: none;
            padding: 0 0 .94rem;
            opacity: 0.8;
            color: var(--main-content);
            font-size: .88rem;
          }

          .nav_links img, .nav_links_admin img {
            opacity: 0.75;
          }

          .nav_links .links a, .nav_links_admin .links a {
            display: flex;
            align-items: center;
            column-gap: 1.25rem;
          }

          .nav_links .links p, .nav_links_admin .links p {
            color: var(--main-content); 
            font-weight: 400;
          }

          .nav_links .links:hover, .nav_links_admin .links:hover {
            opacity: 1;
          }

          .nav_links .links:hover img, .nav_links_admin .links:hover img {
            opacity: 1;
          }

      .nav_links_admin {
        grid-area: links_admin;
      }

        .nav_links_admin ul {
          display: flex;
          flex-direction: column;
        }

      .bottom {
        grid-area: bottom;
        background-color: var(--red-vdark);
        border-radius: 1.25rem;
      }

    .main_content {
        grid-area: main;
        background-color: var(--main-background);
        padding: .94rem;
        border-radius: .94rem;
        height: 100%;
        overflow: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: .63rem;
        grid-template-areas: 
        "top"
        "center";
        overflow: hidden;
    }

    .top_panel {
        grid-area: top;
        padding: .31rem;
    }

    .top_panel_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--main-content);
        border-radius: .63rem;
        box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
        padding: .75rem 1.25rem;
    }

      .text_cont {
        width: 25%;
      }

      .search_cont {
        width: 40%;
        position: relative;
      }

        .search_cont input[type="text"] {
          width: 100%;
          border: none;
          padding: .81rem .81rem .81rem 3.13rem;
          background-color: var(--main-background);
          border-radius: .44rem;
          font-size: .94rem;
          outline: none;
          color: var(--search);
        }

        .search_cont input[type="text"]::placeholder {
          color: var(--search);
        }

        .search_cont img {
          position: absolute;
          /* top: 10; */
          left: 15;
        }

      .account_cont {
        width: 25%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.56rem;
      }

          .profile_circle {
            width:  2.5rem;
            padding: .63rem;
            font-size: 1.13rem;
            background: var(--reports-gradient);
            border-radius: 50%;
          }

            .profile_circle p {
              text-align: center;
              color: var(--main-content);
              font-weight: 500;
            }

          .profile_text {
            flex: 3;
          }

            .profile_text p:nth-child(1) {
              font-size: 1.13rem;
              font-weight: 500;
              line-height: 1.3;
              text-overflow: ellipsis;
            }

            .profile_text p:nth-child(2) {
              font-size: 1rem;
              opacity: 0.75;
            }

            .p_settings {
              font-size: .94rem;
              opacity: 1;
              margin-top: .31rem;
            }

          .account_cont_actions {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

            .account_cont_actions button {
              background-color: transparent;
              border: none;
            }

        /*For staff management*/
        .central_panel {
          grid-area: center;
          padding: .31rem;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr;
          grid-template-areas: "left right";
          gap: 1.25rem;
          height: 100%;
          overflow: hidden;
        }

        /*For inventory*/
        .central_panelB {
          grid-area: center;
          display: grid;
          grid-template-rows: 8.44rem 1fr;
          grid-template-columns: 1fr;
          grid-gap: 1.25rem;
          grid-template-areas: "hero" "table";
          padding: .31rem;
          overflow: hidden;
          height: 100%;
        }

        /*For transactions*/
        /*For message logs*/
        .central_panelC {
          grid-area: center;
          display: grid;
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
          grid-gap: 1.25rem;
          grid-template-areas: "center";
          padding: .31rem;
          overflow: hidden;
          height: 100%;
        }

        /*For reports*/
        .central_panelD {
          grid-area: center;
          display: grid;
          grid-template-rows: 1fr 3fr;
          grid-template-columns: 1fr;
          grid-gap: 1.25rem;
          grid-template-areas: "hero" "table";
          padding: .31rem;
          overflow: hidden;
          height: 100%;
        }

        /*For home*/
        .central_panelE {
          grid-area: center;
          display: grid;
          grid-template-rows: 0.45fr 3fr;
          grid-template-columns: 1fr;
          grid-gap: 1.25rem;
          grid-template-areas: "quick" "center";
          padding: .31rem;
          overflow: hidden;
          height: 100%;
        }

        /*For details*/
        .central_panelF {
          grid-area: center;
          display: grid;
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
          grid-gap: 1.25rem;
          grid-template-areas: "center";
          padding: .31rem;
          overflow: hidden;
          height: auto;
        }

        .central_panelG {
          grid-area: center;
          padding: .31rem;
          display: grid;
          grid-template-columns: 2fr 1fr;
          grid-template-rows: 1fr;
          grid-template-areas: "left right";
          gap: 1.25rem;
          height: 100%;
          overflow: hidden;
        }

        .hero_panel {
          grid-area: hero;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 100%;
          margin-bottom: .94rem;
        }

        .hero_panelB {
          grid-area: hero;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 100%;
          margin-bottom: .94rem;
        }

          .hero_content {
            width: 70%;
            height: 100%;
          }

          .hero_contentB {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: .94rem;
          }

            .filter-group {
              /* border: .06rem solid red; */
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              gap: .31rem;
              min-width: 18.75rem;
            }

            .filter-title h2 {
              padding-top: 0;
              line-height: 1;
            }

            .filter-input {
              margin-top: .63rem;
            }

            .filter-input .label p {
              font-size: 1rem;
              margin-bottom: .5rem;
            }

            .range input {
              padding: .31rem .94rem .31rem 1.56rem;
              background-color: var(--main-background-data);
              border-radius: .31rem;
              background-color: transparent;
              border: none;
              outline: none;
              position: relative;
              cursor: pointer;
            }

            .range input::-webkit-calendar-picker-indicator {
              position: absolute;
              cursor: pointer;
              left: 0;
            }

            .hero_content p {
              font-size: .94rem;
              opacity: 0.85;
              line-height: 1.5;
              margin: .19rem 0 0;
            }

          .hero_action {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 25%;
          }

            .hero_action button {
              display: inline-block !important;
              background-color: transparent;
              color: var(--red-dark);
              padding: .63rem !important;
              border-radius: .63rem;
              border: .13rem solid var(--red-dark);
              font-size: 1rem;
            }

        .data_tableB {
          grid-area: table;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          height: 100%;
          margin-bottom: .94rem;
        }

        .data_table_actions {
          height: 7%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: .94rem;
        }

          .data_table_actions_components {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .94rem;
            /* border: .06rem solid red; */
            max-width: 37.5rem;
            height: 100%;
          }

          .data_table_actions_components p {
            font-size: .94rem;
          }

            .data_table_actions_components .pagination {
              display: flex;
              text-align: center;
              justify-content: center;
              align-items: center;
              gap: .63rem;
              min-width: 18.75rem;
              max-width: 37.5rem;
            }

              .page_button a {
                padding: .31rem .5rem;
                font-size: .94rem;
                background-color: var(--nav-focused);
                border-radius: .31rem;
                color: var(--black-dark);
                opacity: 0.6;
                font-weight: 500;
              }
              .page_button_active {
                padding: .31rem .5rem;
                font-size: .94rem;
                background-color: var(--purple);
                border-radius: .31rem;
                color: var(--main-content);
                font-weight: 500;
              }
              .page_button_direct a {
                padding: .31rem .5rem;
                font-size: .94rem;
                background-color: #e2dae2;
                border-radius: .31rem;
                color: #836d83;
                font-weight: 500;
              }

            .data_actions {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 1.25rem;
              /* border: .06rem solid red; */
            }

            .data_actions button {
              border: none;
              padding: .63rem;
              display: flex;
              align-items: center;
              gap: .63rem;
              font-size: .94rem;
              background-color: transparent;
              border-radius: .31rem;
              transition: background-color 0.1s ease;
            }

            .data_actions button:hover, .data_actions button:focus {
              background-color: var(--main-background);
            }

            .data_actions button img {
              height: auto;
              width: 1.13rem;
            }

            .form form button {
                font-size: .94rem;
                font-weight: 400;
                border: none;
                border-radius: .63rem;
                color: var(--main-content);
                background-color: var(--red-dark);
                display: flex;
                gap: .5rem;
                align-items: center;
                justify-content: center;
                transition: background-color 0.2s ease;
            }

            .form form button:hover {
                background-color: var(--red-vdark);
            }

            .form form button img {
                padding: none;
                width: 1.25rem;
                height: auto;
            }

        .data_controlsB {
          grid-area: center;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          height: 100%;
          margin-bottom: .94rem;
        }

        .data_controlsC {
          grid-area: center;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          max-height: 27rem;
          margin-bottom: .94rem;
        }
        /*---*/


        .data_table {
          grid-area: left;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          height: 100%;
        }

        .data_tableC {
          grid-area: center;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          height: 100%;
        }

        .table_cont {
          flex: 1;
          width:100%;
          overflow-x: auto;
          min-height: 0;
          position: relative;
          max-height: 90%;
          border-bottom: .06rem solid var(--nav-focused);
          margin: 0 0 .94rem;
        }

          .table_cont table thead {
            position: sticky;
            z-index: 5;
            top: 0;
          }

          .table_cont::-webkit-scrollbar {
            width: .38rem;
            height: .38rem;
          }

          .table_cont::-webkit-scrollbar-track {
            background: transparent;
          }

          .table_cont::-webkit-scrollbar-thumb {
            background: var(--red-more-lighter);
          }

          .table_cont::-webkit-scrollbar-button {
            display: none;
          }

        .data_controls {
          grid-area: right;
          background-color: var(--main-content);
          border-radius: .63rem;
          box-shadow: 0 .25rem .5rem rgba(115, 42, 42, 0.04);
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          justify-content: start;
        }

          .data_controls_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .94rem; 
            margin-bottom: .63rem;
          }

          .data_controls_header_text {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: .94rem; 
            margin-bottom: .63rem;
          }

          .data_controls_header_button {
            min-width: 5rem;
          }

            .data_controls_header_button button {
              outline: none;
              padding: .5rem .75rem .5rem .5rem;
              border: none;
              border-radius: .5rem;
              font-size: 1rem;
              font-weight: 400;
              display: flex;
              gap: .63rem;
              justify-content: center;
              align-items: center;
              background-color: var(--main-background-data);
              color: var(--black-dark);
              transition: background-color 0.1s ease;
            }

            .data_controls_header_button button img {
              opacity: 0.9;
            }

            .data_controls_header_button button:hover {
              background-color: var(--nav-focused);
            }

          .icon_table {
            background-color: #bbdac1;
            padding: .5rem;
            border-radius: .31rem;
          }

          .icon_normal {
            background-color: var(--purple);
            padding: .5rem;
            border-radius: .31rem;
          }

          .icon_principal {
            background-color: var(--purple);
            padding: .5rem;
            border-radius: .31rem;
          }

          .icon_overdue {
            background-color: var(--purple);
            padding: .5rem;
            border-radius: .31rem;
          }

          .icon_redeemed {
            background-color: var(--purple);
            padding: .5rem;
            border-radius: .31rem;
          }

          .icon_active {
            background-color: var(--purple);
            padding: .5rem;
            border-radius: .31rem;
          }

.result_cont {
  margin: .94rem 0 0;
  width: 100%;
}

.result_cont_bar {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translate(-50%);
  min-width: 25rem;
  z-index: 999;
}

    .message_success_d {
        display: flex;
        align-items: center;
        gap: .75rem;
        background-color: var(--black-dark);
        color: var(--main-content);
        font-size: .88rem;
        padding: .63rem .75rem;
        border-radius: .63rem;
        width: 100%;
        font-weight: 400;
        text-align: justify;
        line-height: 1.3;
    }

    .message_success {
        display: flex;
        align-items: center;
        gap: .75rem;
        background-color: #daebd8ff;
        color: #89ad7d;
        font-size: .88rem;
        padding: .63rem .75rem;
        border-radius: .63rem;
        width: 100%;
        font-weight: 400;
        text-align: justify;
        line-height: 1.3;
    }

    .message_error {
        display: flex;
        align-items: center;
        gap: .75rem;
        background-color: #f8cebf;
        color: #ab6757;
        font-size: .88rem;
        padding: .63rem .75rem;
        border-radius: .63rem;
        width: 100%;
        font-weight: 400;
        text-align: justify;
        line-height: 1.3;
    }

    .message_info {
        display: flex;
        align-items: center;
        gap: .75rem;
        background-color: var(--main-background-data);
        color: #9f9c93;
        font-size: .88rem;
        padding: .63rem .75rem;
        border-radius: .63rem;
        width: 100%;
        font-weight: 400;
        text-align: justify;
        line-height: 1.3;
    }

    .message_warning {
        display: flex;
        align-items: center;
        gap: .75rem;
        background-color: #f8dfbf;
        color: #af8651;
        font-size: .88rem;
        padding: .63rem .75rem;
        border-radius: .63rem;
        width: 100%;
        font-weight: 400;
        text-align: justify;
        line-height: 1.3;
    }

/*Dashboard Structure Responsiveness*/
/* malaking tabletsssss */
@media (max-width: 75rem) {
  h1 {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 1.13rem;
  }
  .dashboard {
    grid-template-columns: 6.25rem 1fr; 
    padding: .63rem;
  }

  .main_content {
    border-radius: .63rem;
  }

    .navigation_bar {
        grid-template-rows: auto auto auto auto;
    }

      .nav_logo img {
        height: 2em;
        width: auto;
      }

        .nav_links .links, .nav_links li, .nav_links_admin li, .nav_links_admin .links {
          padding: .94rem;
        }

          .nav_links ul li a p {
            display: none;
          }

          .nav_links ul br {
            display: none;
          }

          .nav_links ul li:nth-child(1), .nav_links ul li:nth-child(8) {
            display: none;
          }

        .nav_links_admin ul li a p {
          display: none;
        }

        .nav_links_admin ul li:nth-child(1) {
          display: none;
        }

        .search_cont input[type="text"] {
          font-size: .88rem;
        }

      .text_cont {
        width: 25%;
      }

      .search_cont {
        display: none;
      }

      .account_cont {
        width: 40%;
        gap: .63rem;
      }

          .profile_circle {
            width:  2.19rem;
            padding: .5rem;
            font-size: .88rem;
          }

            .profile_circle p {
              text-align: center;
              color: var(--main-content);
              font-weight: 500;
            }

            .profile_text p:nth-child(1) {
              font-size: .88rem;
            }

            .profile_text p:nth-child(2) {
              font-size: .75rem;
            }

          .account_cont_actions {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

            .account_cont_actions button {
              background-color: transparent;
              border: none;
            }

            .account_cont_actions button img {
              width: 99%;
              height: auto;
            }

}

/* maliit na device */
@media (max-width: 48rem) {
  .dashboard {
    grid-template-columns: 1fr; 
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "side"
      "main"; 
    padding: 0;
  }

  .navigation_bar {
    padding: .94rem;
  }

  .main_content {
    border-radius: 0;
  }
}


/*Error and Warning Messages */
.error_container {
    margin: .63rem 0;
    width: 100%;
}
    .error {
        align-items: center;
        background-color: #f8cebf;
        color: #a56555;
        column-gap: 3%;
        padding: .63rem;
        border-radius: .63rem;
        
    }

        .error img {
            height: 1.25rem;
            width: auto;
        }
        .error span {
            font-size: .94rem;
            color: #a56555;
            font-weight: 400;
        }