/* ---------------------------------- Import ---------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
@import url("variables.css");

/* ------------------------------------ CSS ------------------------------------ */


/* ------------------------ Body ------------------------ */

* {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    background: var(--body-color);
    font-family: var(--theme-font);
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

body.h-100 {
    height: 100vh;
    overflow: hidden;
}


/* ----------------------- Loader ----------------------- */

.loader-contianer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}


/* --------------------- Scroll Bar --------------------- */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--theme-color);
}

::-webkit-scrollbar-thumb {
    background: var(--white-color-low-opacity);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--white-color-mid-opacity);
}


/* ---------------------- Selection ---------------------- */

::selection {
    background: var(--theme-color);
    color: var(--white-color);
}


/* --------------------- Scroll Top --------------------- */

#Scroll-Top-Btn {
    background: var(--theme-color);
    color: var(--white-color);
    text-align: center;
    text-shadow: none;
    border: none;
    border-radius: 5px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    z-index: 10;
    display: none;
    position: fixed;
    bottom: 50px;
    right: 30px;
}

#Scroll-Top-Btn:hover,
#Scroll-Top-Btn:active {
    background: var(--theme-color-hover);
}

#Scroll-Top-Btn .icon {
    font-size: 30px;
    line-height: 36px;
}


/* --------------------- Sweet Alert --------------------- */

.swal2-container {
    background: var(--fade-color) !important;
    backdrop-filter: blur(3px);
}

.swal-modal {
    background: var(--body-color) !important;
    color: var(--title-color);
}

.swal2-icon {
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
}

.swal2-success-ring {
    border-color: var(--theme-color) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background: var(--theme-color) !important;
}

.swal2-success-line-long {
    background: var(--theme-color) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
}

.swal2-title {
    color: var(--theme-color) !important;
    padding-top: 0 !important;
}

.swal2-html-container {
    margin: 0 !important;
}

.swal-title {
    color: var(--title-color);
}

.swal-text {
    color: var(--text-color-light);
}

.swal2-confirm {
    background: var(--theme-color) !important;
}

.swal2-cancel {
    background: #e7e7e7 !important;
    color: var(--black-color) !important;
}


/* ------------------------ Icon ------------------------ */

.material-symbols-outlined {
    user-select: none;
}


/* ------------------------ Image ------------------------ */

img {
    user-select: none;
}


/* ------------------------ Input ------------------------ */

form {
    width: 100%;
    max-width: 600px;
}

.input-field-box {
    display: block;
    width: 100%;
    height: 30px;
    position: relative;
    margin-bottom: 25px;
}

.input-field-box.text-box {
    height: 120px;
    margin-bottom: 40px;
}

.input-field-box.text-box textarea {
    height: 120px;
    white-space: pre-wrap !important;
}

.input-field-box.text-box textarea::-webkit-scrollbar {
    width: 5px;
}

.input-field-box.text-box textarea::-webkit-scrollbar-track {
    background: var(--white-color);
}

.input-field-box.text-box textarea::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 20px;
}

.input-field-box.text-box textarea::-webkit-scrollbar-thumb:hover {
    background: var(--theme-color-hover);
}

.input-field-box .input-field {
    background: transparent;
    color: var(--black-color);
    font-size: 14px;
    font-weight: 400;
    line-height: inherit;
    padding: 10px 15px;
    border: 1px solid var(--light-color);
    border-radius: 5px;
    resize: none;
    transition: all 0.2s ease-in-out;
    width: calc(100% - 30px);
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.input-field-box .input-field.error {
    border-color: #f00;
}

select {
    background: transparent;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 400;
    line-height: inherit;
    padding: 10px;
    border: 1px solid var(--light-color);
    border-radius: 5px;
    outline: none;
    width: 100%;
    overflow: hidden;
    height: auto;
}

select:hover,
select:focus {
    border-color: var(--theme-color);
}

.input-field-box .input-field::placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent;
}

.input-field-box .input-field:focus {
    border-color: var(--theme-color);
    outline: none;
    transition: color .1s linear;
}

.input-field-box .input-field.error {
    border-color: #f00;
}

.input-field-box .input-label {
    background: var(--white-color);
    padding: 0 3px;
    color: #a9a9a9;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    z-index: 1;
    position: absolute;
    top: 60%;
    left: 20px;
    transform: translateY(-50%);
}

.input-field-box .input-label .required {
    color: red;
}

.input-field-box .input-field:focus~.input-label {
    color: var(--theme-color);
    top: -8px;
    left: 15px;
    transform: translateY(-0%);
    z-index: 9;
    font-size: 10px;
}

.input-field-box .input-field:not(:placeholder-shown).input-field:not(:focus)~.input-label {
    color: var(--light-black-color);
    top: -8px;
    left: 15px;
    transform: translateY(-0%);
    z-index: 9;
    font-size: 10px;
}

.input-field-box .show-password {
    background: var(--white-color);
    color: var(--black-color);
    font-size: 16px !important;
    line-height: 16px !important;
    padding: 3px 4px;
    border-radius: 20px;
    box-shadow: 0px 0px 4px var(--theme-shadow-color);
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 60%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 2;
}

.upload-image-div {
    background: var(--background-color-1);
    padding: 0px;
    border-radius: 5px;
    box-shadow: var(--shadow-3);
    outline: none;
    margin-bottom: 15px;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    display: block;
    z-index: 0;
}

.upload-image-div .upload-image-preview {
    margin: 0 auto;
    width: 100%;
    display: block;
    z-index: 1;
    border-radius: 10px !important;
}

.upload-image-div .upload-image-input {
    display: none;
}

.upload-image-div .upload-image-label {
    background: var(--fade-color);
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.upload-image-div .upload-image-label::after {
    content: "Choose Image";
    text-transform: uppercase;
    background: transparent;
    color: var(--title-color);
    font-size: 23px;
    font-family: var(--open-sans-bold-font);
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

button {
    cursor: pointer;
}

button.submit {
    background: var(--theme-color);
    color: var(--white-color);
    font-size: 15px;
    line-height: 15px;
    text-transform: uppercase;
    padding: 12px 15px;
    border-radius: 5px;
    border: none;
    outline: none;
    display: inline-block;
    cursor: pointer;
}

button.submit:hover {
    background: var(--theme-color-hover);
    transition: .4s;
}

button.back {
    background: lightgray;
    color: var(--black-color);
}

button.back.center {
    display: block;
    margin: 0 auto;
}

button.back:hover {
    background: lightgray;
    color: var(--black-color);
}

p.error {
    color: var(--theme-color);
    font-size: 12px;
    line-height: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 3px 0 4px 8px;
    margin: 0 0 15px 0;
    border-left: 2px solid var(--theme-color);
    display: none;
}


/* ----------------- Search And Add Button ----------------- */

section.all .search-add {
    display: flex;
    align-items: center;
    gap: 10px;
}

section.all .search-add .search-bar {
    display: flex;
    align-items: center;
    width: 100%;
}

section.all .search-add .search-bar .icon {
    background: var(--theme-color);
    fill: var(--white-color);
    height: 15px;
    padding: 9px 13px;
    border-radius: 5px 0 0 5px;
}

section.all .search-add .search-bar input {
    background: var(--white-color);
    font-size: 17px;
    line-height: 31px;
    padding: 0 0 0 10px;
    border: 1px solid var(--theme-color);
    outline: none;
    border-radius: 0 5px 5px 0;
    width: 100%;
}

section.all .search-add .add-btn {
    background: var(--theme-color);
    color: var(--white-color);
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    padding: 7px 8px;
    border: none;
    border-radius: 5px;
    outline: none;
    width: 275px;
}

section.all .search-add .add-btn:hover {
    background: var(--theme-color-hover);
}

/*.table-responsive {*/
/*    width: 100%;*/
/*    overflow-x: auto;*/
/*}*/

/*.table-responsive table {*/
/*    font-family: var(--theme-font);*/
/*    border-collapse: collapse;*/
/*    width: 100%;*/
/*    margin-top: 5px;*/
/*}*/

/*.table-responsive::-webkit-scrollbar {*/
/*    height: 10px;*/
/*    border-radius: 10px;*/
/*}*/

/*.table-responsive::-webkit-scrollbar-track {*/
/*    background: var(--theme-color);*/
/*    border-radius: 10px !important;*/
/*}*/

/*.table-responsive::-webkit-scrollbar-thumb {*/
/*    background: var(--white-color-low-opacity);*/
/*    border-radius: 10px;*/
/*}*/

/*.table-responsive::-webkit-scrollbar-thumb:hover {*/
/*    background: var(--white-color-mid-opacity);*/
/*}*/

/*.table-responsive table thead {*/
/*    color: var(--theme-color);*/
/*    text-align: left;*/
/*}*/

/*.table-responsive table thead tr,*/
/*.table-responsive table tbody tr {*/
/*    border-top: 1px solid var(--theme-color);*/
/*}*/

/*.table-responsive table thead tr {*/
/*    border: none;*/
/*}*/

/*.table-responsive table thead tr th {*/
/*    font-size: 16px;*/
/*    font-weight: 600;*/
/*}*/

/*.table-responsive table thead tr th,*/
/*.table-responsive table tbody tr td {*/
/*    padding: 8px 8px 8px 2px;*/
/*}*/
table tbody tr td .button-group {
    display: flex;
    align-items: center;
    gap: 0 10px;
}

 table tbody tr td .button-group .action-btn {
    background: var(--theme-color-light);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--theme-font);
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
 table tbody tr td .button-group .action-btn:hover {
    background: var(--theme-color-hover);
}
 table tbody tr td .button-group .action-btn .icon {
    fill: var(--white-color);
    width: 18px;
}
 table tbody tr td .button-group .action-btn.delete .icon {
    fill: var(--white-color);
    width: 14px;
}
 table tbody tr td .picture {
    border: 4px solid var(--white-color);
    border-radius: 10px;
    box-shadow: 0 0 3px var(--theme-shadow-color);
    width: 100px;
}


/* ---------------------- Add Section ---------------------- */

section .heading {
    color: var(--theme-color);
    font-size: 25px;
    line-height: 30px;
    padding-bottom: 4px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--theme-color);
}

section .heading.m-0 {
    margin: 0;
}

section .heading.text-center {
    text-align: center;
}

.pdf-preview {
    border-radius: 10px;
    width: 100%;
    height: 50vh;
}


/* -------------------- Details Section -------------------- */

section .width {
    max-width: 600px;
}

section .employee-image {
    width: 200px;
    border: 4px solid var(--white-color);
    border-radius: 10px;
    box-shadow: 0 0 3px var(--theme-shadow-color);
}

section .details {
    color: var(--title-color);
    font-size: 17px;
    font-weight: var(--theme-font);
    font-weight: 600;
    margin-bottom: 5px;
}

section .details .value {
    color: var(--title-color);
    font-weight: normal;
    text-decoration: none;
}


/* ---------------------- Container ---------------------- */

.container {
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    display: block;
}


/* ---------------------- Side Bar ---------------------- */

.body {
    display: flex;
}

aside.side-bar {
    background: var(--theme-color);
    width: 62px;
    height: 100vh;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 10;
}

aside.side-bar.open {
    width: 245px;
}

aside.side-bar .header {
    padding: 10px;
}

aside.side-bar.open .header {
    padding: 10px 20px;
}

aside.side-bar .header .logo.full {
    width: 150px;
    display: none;
}

aside.side-bar.open .header .logo.full {
    display: block;
}

aside.side-bar .header .logo.collapse {
    width: 80%;
    display: block;
    margin: 0 auto;
}

aside.side-bar.open .header .logo.collapse {
    display: none;
}

aside.side-bar .nav-list {
    list-style: none;
    height: 100%;
    max-height: calc(100vh - 94px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px 0;
    padding: 10px;
}

aside.side-bar.open .nav-list {
    align-items: flex-start;
    padding: 10px;
}

aside.side-bar .nav-list::-webkit-scrollbar {
    width: 10px;
}

aside.side-bar .nav-list::-webkit-scrollbar-track {
    background: var(--theme-color);
    border-radius: 10px;
}

aside.side-bar .nav-list::-webkit-scrollbar-thumb {
    background: var(--white-color);
    border-radius: 10px;
}

aside.side-bar .nav-list::-webkit-scrollbar-thumb:hover {
    background: var(--white-color);
}

aside.side-bar .nav-list .list {
    width: calc(100%);
}

aside.side-bar .nav-list .list a.link {
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0 15px;
}

aside.side-bar.open .nav-list .list a.link {
    width: calc(100% - 20px);
    padding: 8px 10px;
}

aside.side-bar .nav-list .list a.link:hover,
aside.side-bar .nav-list .list a.link.active {
    background: var(--white-color);
}

aside.side-bar .nav-list .list a.link .icon {
    fill: var(--white-color);
    width: 22px;
}

aside.side-bar .nav-list .list a.link:hover .icon,
aside.side-bar .nav-list .list a.link.active .icon {
    fill: var(--theme-color);
}

aside.side-bar.open .nav-list .list a.link .icon {
    width: 20px;
}

aside.side-bar .nav-list .list a.link .text {
    color: var(--white-color);
    text-transform: uppercase;
    display: none;
}

aside.side-bar .nav-list .list a.link:hover .text,
aside.side-bar .nav-list .list a.link.active .text {
    color: var(--theme-color);
}

aside.side-bar.open .nav-list .list a.link .text {
    display: block;
}


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

.side-bar-content {
    width: calc(100% - 60px);
    position: relative;
}

.side-bar-content .content {
    padding: 20px;
    width: calc(100% - 40px);
}

aside.side-bar.open~.side-bar-content {
    width: calc(100% - 214px);
}


/* ----------------------- Header ----------------------- */

.side-bar-content header {
    background: var(--theme-color);
    display: flex;
    align-items: center;
    gap: 0 12px;
    padding: 10px 20px;
    width: calc(100% - 40px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.side-bar-content header .icon {
    fill: var(--white-color);
    width: 23px;
    cursor: pointer;
}

.side-bar-content header .heading {
    color: var(--white-color);
}

.side-bar-content header button {
    background: transparent;
    color: transparent;
    line-height: 0;
    padding: 0;
    border: none;
    outline: none;
}

.side-bar-content header button .icon {
    width: 23px
}


/* --------------------- Dashboard --------------------- */

.side-bar-content .content .boxes-parent {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.side-bar-content .content .boxes-parent .box {
    /* background: var(--white-color);
    border: 2px solid var(--theme-color);
    text-decoration: none;
    padding: 10px;
    border-radius: 10px; */
    width: calc(33.3% - 37.2px);
    display: flex;
    align-items: center;
    gap: 0 20px;
}

.side-bar.open~.side-bar-content .content .boxes-parent .box {
    width: calc(33.3% - 37.2px);
}

.side-bar-content .content .boxes-parent .box.birthday {
    width: 100% !important;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 0;
}

.side-bar-content .content .boxes-parent .box.birthday .birthday-card {
    background: linear-gradient(to top left, #0575E6, #021B79);
    border-radius: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-bar-content .content .boxes-parent .box.birthday .birthday-card .left {
    width: 95%;
    padding-left: 5%;
}

.side-bar-content .content .boxes-parent .box.birthday .birthday-card .left .date {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    font-family: var(--stylish-font);
    position: relative;
}

.side-bar-content .content .boxes-parent .box.birthday .birthday-card .left .date::before {
    content: "";
    border-bottom: 2px dotted var(--white-color);
    width: 150px;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 2;
}

.side-bar-content .content .boxes-parent .box.birthday .birthday-card .left .wish {
    color: var(--white-color);
    font-size: 40px;
    font-weight: 500;
    font-family: var(--stylish-font);
}

.side-bar-content .content .boxes-parent .box.birthday .birthday-card .cake-image {
    width: 300px;
}

.side-bar-content .content .boxes-parent .box .icon {
    width: 40px;
    fill: var(--theme-color);
}

.side-bar-content .content .boxes-parent .box .icon.tshirt {
    stroke: var(--theme-color);
}

.side-bar-content .content .boxes-parent .box .heading {
    color: var(--title-color);
    font-weight: 600;
    text-transform: uppercase;
}

.side-bar-content .content .boxes-parent .box .value {
    font-size: 14px;
    color: var(--text-color);
}

.side-bar-content .content .boxes-parent .chart {
    background: var(--white-color);
    border: 2px solid var(--theme-color);
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    width: calc(100% - 25px);
    display: flex;
    align-items: center;
    gap: 0 20px;
}


/* -------------------- Slider Settings -------------------- */

.swiper-button-prev,
.swiper-button-next {
    color: var(--theme-color) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: var(--theme-color-hover) !important;
}


/* ----------------------- Login Page ----------------------- */

.login .login-box-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.login .login-box-outer .login-box {
    background: var(--theme-color);
    padding: 20px;
    box-shadow: 0 0 15px var(--theme-shadow-color);
    border-radius: 15px;
    width: 350px;
}

.login .login-box-outer .login-box .logo {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 0 auto 20px auto;
}

.login .login-box-outer .login-box .input-field-box .input-field {
    border-color: #cacaca;
    color: #fff;
}

.login .login-box-outer .login-box .input-field-box .input-label {
    background: var(--theme-color);
    color: #cacaca;
}

.login .login-box-outer .login-box .input-field-box .input-label .required {
    color: red;
}

.login .login-box-outer .login-box .input-field-box .input-field:focus~.input-label {
    color: #fff;
}

.login .login-box-outer .login-box .input-field-box .input-field:not(:placeholder-shown).input-field:not(:focus)~.input-label {
    color: #cacaca;
}

.login .login-box-outer .login-box .input-field-box .show-password {
    background: var(--theme-color);
    color: var(--white-color);
}

.login .login-box-outer .login-box button.submit {
    background: var(--white-color);
    color: var(--theme-color);
    width: 100%;
    margin: 0 0 5px 0;
}

.login .login-box-outer .login-box p.error {
    color: var(--white-color);
    border-color: var(--white-color);
}


/* ------------------------ Employees ------------------------ */

/*table.employees {*/
/*    width: 100%;*/
/*    min-width: 1010px;*/
/*}*/

/*table.employees thead tr th:nth-child(1),*/
/*table.employees tbody tr td:nth-child(1) {*/
/*    width: 60px;*/
/*}*/

/*table.employees thead tr th:nth-child(2),*/
/*table.employees tbody tr td:nth-child(2) {*/
/*    width: 250px;*/
/*}*/

/*table.employees thead tr th:nth-child(3),*/
/*table.employees tbody tr td:nth-child(3) {*/
/*    width: 200px;*/
/*}*/

/*table.employees thead tr th:nth-child(4),*/
/*table.employees tbody tr td:nth-child(4) {*/
/*    width: 150px;*/
/*}*/

/*table.employees thead tr th:nth-child(5),*/
/*table.employees tbody tr td:nth-child(5) {*/
/*    width: 180px;*/
/*}*/

/*table.employees thead tr th:nth-child(6),*/
/*table.employees tbody tr td:nth-child(6) {*/
/*    width: 170px;*/
/*}*/


/* ------------------- Employee Attendance ------------------- */

.employees .attendance .calendar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.employees .attendance .calendar .month .month-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-collapse: collapse;
}

.employees .attendance .calendar .day {
    width: calc(14.2% - 21.1px);
    border: 1px solid var(--theme-color);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

aside.side-bar.open~.side-bar-content .content .attendance .calendar .day {
    width: calc(19.9% - 21.1px) !important;
}

.employees .attendance .calendar .day .full-date {
    font-size: 14px;
    line-height: 20px;
}

.employees .attendance .calendar .day .full-date .big-font {
    color: var(--theme-color);
    font-size: 22px;
    line-height: 22px;
    font-weight: 700;
}

.employees .attendance .calendar .day .date-day {
    font-size: 14px;
    line-height: 18px;
}

.employees .attendance .calendar .day .time {
    font-size: 14px;
    line-height: 18px;
}

.employees .attendance .calendar .day select {
    padding: 5px;
    font-size: 12px;
}


/* ------------------------ Attendance ------------------------ */

table.attendance {
    width: 100%;
    min-width: 1010px;
}

table.attendance thead tr th:nth-child(1),
table.attendance tbody tr td:nth-child(1) {
    width: 60px;
}

table.attendance thead tr th:nth-child(2),
table.attendance tbody tr td:nth-child(2) {
    width: 200px;
}

table.attendance thead tr th:nth-child(3),
table.attendance tbody tr td:nth-child(3) {
    width: 150px;
}

table.attendance thead tr th:nth-child(4),
table.attendance tbody tr td:nth-child(4) {
    width: 150px;
}

table.attendance thead tr th:nth-child(5),
table.attendance tbody tr td:nth-child(5) {
    width: 150px;
}

table.attendance thead tr th:nth-child(6),
table.attendance tbody tr td:nth-child(6) {
    width: 150px;
}

table.attendance thead tr th:nth-child(6) select,
table.attendance tbody tr td:nth-child(6) select {
    width: 150px;
}


/* -------------------------- Salary -------------------------- */

table.salary {
    width: 100%;
    min-width: 1100px;
}

table.salary thead tr th:nth-child(1),
table.salary tbody tr td:nth-child(1) {
    width: 60px;
}

table.salary thead tr th:nth-child(2),
table.salary tbody tr td:nth-child(2) {
    width: 250px;
}

table.salary thead tr th:nth-child(3),
table.salary tbody tr td:nth-child(3) {
    width: 400px;
}

table.salary thead tr th:nth-child(4),
table.salary tbody tr td:nth-child(4) {
    width: 250px;
}

table.salary thead tr th:nth-child(5),
table.salary tbody tr td:nth-child(5) {
    width: 150px;
}


/* ----------------------- Salary Slip ----------------------- */

.salary-slip {
    width: calc(100vw - 5px);
    overflow-x: hidden;
}

.salary-slip .content {
    width: calc(100% - 60px);
    height: 100%;
    padding: 30px;
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
}

.salary-slip .head {
    width: 100%;
    background: var(--theme-color);
    padding: 10px 0;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}

.salary-slip .title {
    color: var(--white-color);
    font-size: 30px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.salary-slip .logo {
    width: 200px;
    display: block;
    margin: 0 auto;
}

.salary-slip .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.salary-slip .row .col {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.salary-slip .row .col .label {
    font-size: 15px;
    color: var(--theme-color);
    font-weight: 600;
    width: 130px;
    display: inline-block;
    padding: 0 0 0 8px;
}

.salary-slip .row .col.l-width .label {
    width: 90px;
    padding: 0;
}

.salary-slip.report-slip .row .col.l-width .label {
    width: 103px;
}

.salary-slip .row .col .divider {
    font-size: 15px;
    color: var(--black-color);
    width: 45px;
    text-align: center;
    display: inline-block;
}

.salary-slip .row .col .value {
    font-size: 15px;
    color: var(--black-color);
    font-weight: 500;
    width: 150px;
    display: inline-block;
}

.salary-slip .row .col.l-width .value {
    padding: 0 8px 0 0;
    width: 145px;
}

.salary-slip table {
    font-family: var(--theme-font);
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.salary-slip table.mb-0 {
    margin-bottom: 3px;
}

.salary-slip table thead {
    color: var(--theme-color);
    text-align: left;
}

.salary-slip.salary-slip table tbody tr {
    border: none;
}

.salary-slip table thead tr {
    border: none;
}

.salary-slip.salary-slip table thead tr th,
.salary-slip.salary-slip table tbody tr td,
.salary-slip.salary-slip table tfoot tr td {
    padding: 25px 8px;
    border: 1px solid var(--theme-color);
}

.salary-slip.salary-slip table tfoot tr td .calculation {
    display: flex;
    justify-content: center;
    width: 100%;
}

.salary-slip.salary-slip table tfoot tr td .calculation .label {
    width: 130px;
}

.salary-slip.salary-slip table tfoot tr td .calculation .divider {
    text-align: center;
    width: 40px;
}

.salary-slip.salary-slip table tfoot tr td .calculation .value {
    text-align: right;
    width: 80px;
}

.salary-slip.salary-slip table thead tr th:nth-child(1),
.salary-slip.salary-slip table tbody tr td:nth-child(1),
.salary-slip.salary-slip table thead tr th:nth-child(3),
.salary-slip.salary-slip table tbody tr td:nth-child(3) {
    width: 40%;
}

.salary-slip.salary-slip table thead tr th:nth-child(2),
.salary-slip.salary-slip table tbody tr td:nth-child(2),
.salary-slip.salary-slip table thead tr th:nth-child(4),
.salary-slip.salary-slip table tbody tr td:nth-child(4) {
    width: 10%;
}

.salary-slip.report-slip table tbody td {
    width: 30% !important;
}

.salary-slip table thead .highlight {
    background: var(--theme-color);
    color: var(--white-color);
}

.salary-slip table td.highlight {
    background: var(--theme-color);
    color: var(--white-color);
}

.salary-slip table td.highlight.bold {
    font-weight: 600;
    text-align: center;
}

.salary-slip .amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px 0;
    margin: 15px 0;
}

.salary-slip .amount span {
    font-size: 16px;
}


/* ------------------------ Interview ------------------------ */

table.interview {
    width: 100%;
    min-width: 1610px;
}

table.interview thead tr th:nth-child(1),
table.interview tbody tr td:nth-child(1) {
    width: 60px;
}

table.interview thead tr th:nth-child(2),
table.interview tbody tr td:nth-child(2) {
    width: 350px;
}

table.interview thead tr th:nth-child(3),
table.interview tbody tr td:nth-child(3) {
    width: 200px;
}

table.interview thead tr th:nth-child(4),
table.interview tbody tr td:nth-child(4) {
    width: 200px;
}

table.interview thead tr th:nth-child(5),
table.interview tbody tr td:nth-child(5) {
    width: 400px;
}

table.interview thead tr th:nth-child(6),
table.interview tbody tr td:nth-child(6) {
    width: 200px;
}

table.interview thead tr th:nth-child(7),
table.interview tbody tr td:nth-child(7) {
    width: 200px;
}

.testResult .typing-result {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.testResult .details.essay {
    margin-bottom: 20px;
    display: block;
}

/* ----------------------- Datatable ----------------------- */
.dataTables_wrapper .dataTables_length {
    margin-top: 3px;
}
.dataTables_wrapper .dataTables_length label {
    color: var(--theme-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
}
.dataTables_wrapper .dataTables_length select {
    background: var(--white-color);
    color: var(--black-color);
    border: 1px solid var(--theme-color);
    font-size: 13px;
    padding: 0px;
    outline: none;
    max-width: 54px;
}
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 13px;
}
 .dataTables_wrapper .dataTables_filter label {
    color: var(--theme-color) !important;
    font-size: 14px;
}
 .dataTables_wrapper .dataTables_filter input {
    color: var(--black-color);
    outline: none;
    padding: 3px 6px;
    border: 1px solid var(--theme-color) !important;
}
 .dataTables_wrapper .dataTables_info {
    font-size: 12px;
}
 .dataTables_wrapper .dataTables_paginate .paginate_button {
    transition: all .3s;
    font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--white-color) !important;
}
 .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled).current,
 .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled).current:hover {
    background: var(--theme-color);
    color: var(--white-color) !important;
    border: 1px solid var(--theme-color);
}