:root {
    --vc-pgn-active-color: #2196F3 !important;
    --vc-pgn-background-color: #e9ecef !important;
  }

.dropdown-toggle::after{
    border-top: none;
}

.navbar-brand-logo{
    /* color:white; */
    font-size: 24px;
    text-transform: uppercase;
    max-width: 100%;
    font-weight: 700;
    letter-spacing: -1px;
    margin-top: -3px;
    line-height:1;
    text-wrap: wrap;
    min-width: unset;
    max-width: unset;
}

.navbar-brand-logo span, .navbar-brand-logo-mini span {
    color: #4994fe;
}

.navbar-brand-logo-mini{
    font-size: 24px;
}

.navbar-vertical-aside-transition-on .navbar-vertical-aside .navbar-vertical-footer{
    opacity: 1 !important;
}

.theme-dark .p-float-label input:focus ~ label,
.theme-dark .p-float-label input.p-filled ~ label,
.theme-dark .p-float-label textarea:focus ~ label,
.theme-dark .p-float-label textarea.p-filled ~ label,
.theme-dark .p-float-label .p-inputwrapper-focus ~ label,
.theme-dark .p-float-label .p-inputwrapper-filled ~ label
{
    background-color: #4e4747 !important;
}

.footer{
    position: relative !important;
    margin:0 !important;
}

body{
    background: #ecf2f5;
}

label{
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.bg-warning{
    background-color:#ffc107 !important;
}

.legend.bg-warning{
    background-color:#ffc107 !important;
}

span.text-warning{
    color: #ffc107 !important;
}

.fc-daygrid-day-events .bg-warning .fc-event-title {
    color: #1E2022 !important;
}

a.bg-warning{
    background:#ffc107 !important ;
}

.theme-dark .p-datatable .p-datatable-thead > tr > th,
.theme-dark .p-datatable .p-datatable-tbody > tr > td{
    background-color: #26282a;
    color: #c5c8cc;
    border-color: #2f3235;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-4 > td {
    background-color: #6A6D70 !important;
    color: #fff;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-3 > td {
    background-color: #5A5D60 !important;
    color: #fff;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-2 > td {
    background-color: #4A4D50 !important;
    color: #fff;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-1 > td {
    background-color: #3A3D40 !important;
    color: #fff;
}

.p-datatable .p-datatable-tbody tr.highlight-row-4 > td {
    background-color: #B1E2F3 !important; 
}

.p-datatable .p-datatable-tbody tr.highlight-row-3 > td {
    background-color: #BCE7F2  !important;
}

.p-datatable .p-datatable-tbody tr.highlight-row-2 > td {
    background-color: #D9F3FB !important;
}

.p-datatable .p-datatable-tbody tr.highlight-row-1 > td {
    background-color: #E8FBFF !important;
}

.p-datatable .p-datatable-tbody tr.disabled-row > td {
    background-color: #f8f9fa !important;
    opacity: 0.7;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-green > td {
    background-color: #529652 !important;
    color: #fff;
}

.p-datatable .p-datatable-tbody tr.highlight-row-green > td {
    background-color: rgb(0 128 0 / 30%) !important;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-red > td {
    background-color: #714848 !important;
    color: #fff;
}

.p-datatable .p-datatable-tbody tr.highlight-row-red > td {
    background-color: rgb(255 0 0 / 30%) !important;
}

.p-datatable .p-datatable-tbody tr.highlight-row-green > td .btn , .p-datatable .p-datatable-tbody tr.highlight-row-red > td .btn {
    --bs-btn-bg: #f8f8f8;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-green > td .btn ,.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-red > td .btn {
    --bs-btn-bg: #25282a;
}

.p-datatable .p-datatable-tbody tr.highlight-row-green > td .btn:hover , .p-datatable .p-datatable-tbody tr.highlight-row-red > td .btn:hover {
    background: #f3f3f3 !important;
    border-color: #c6c6c6 !important;
    color: #5a5a5a !important;
}

.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-green > td .btn:hover ,.theme-dark .p-datatable .p-datatable-tbody tr.highlight-row-red > td .btn:hover {
    background: #1e1f1f !important;
    border-color: #636363 !important;
    color: #f0f0f0 !important;
}

.p-dialog .p-dialog-content{
    overflow: hidden;
}

div.p-invalid {
    border: 1px solid #f44336b3 !important;
    border-radius: 7px !important;
}

.p-inputtext:enabled:focus{
    color: #1e2022;
    border-color: rgba(140, 152, 164, .25) !important;
    outline: 0 !important;
    box-shadow: 0 0 1rem 0 rgba(140,152,164,.25) !important;
}

.p-inputnumber.p-inputwrapper-focus, 
.p-inputnumber:hover,
.p-inputtext:enabled:hover {
    border-color:  rgba(140, 152, 164, .25) !important;
}

label {
    font-size: 13.5px;
    font-weight: normal;
    text-transform: capitalize;
    margin-bottom: 0.35rem;
    margin-top: 0.6rem;
}

.step-view .col-12 {
    /* padding-top: 2px !important;
    padding-bottom: 4px !important; */

    padding: 2px 5px 4px 5px !important;
}

.p-datatable .p-datatable-thead > tr > th,
.p-datatable .p-datatable-tbody > tr > td{
    font-size: 14px !important;
}

.theme-dark .p-paginator{
    background-color: transparent;
    color: #fff;
    border-color: #444;
}

.theme-dark .p-checkbox .p-checkbox-box{
    background: #333 !important;
    border-color: #444 !important;
}

input[type="checkbox"] {
    border: 2px solid #ced4da;
    background: #ffffff;
    width: 20px;
    height: 20px;
    color: #495057;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.list-group-item{
    padding: .3rem .3rem !important;
}

.column-3 .comment-upload-item,  
.column-3 .upload-item {
    max-width: calc((100% / 3) - 0.75rem) !important;
    width: 100% !important;
}

.column-2 .comment-upload-item,
.column-2 .upload-item {
    max-width: calc((100% / 2) - 1rem) !important;
    width: 100% !important;
}

input[type="checkbox"]:checked{
    border-color: #0b7ad1 !important;
    background: #0b7ad1 !important;
    color: #ffffff;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
    background: #377dff !important;
    border-color: #377dff !important;
    color: #fff !important;
}

.theme-dark .p-float-label .p-inputwrapper-filled ~ label{
    background: transparent !important;
    color: #fff;
}

.theme-dark .p-datatable .p-sortable-column:not(.p-highlight):hover,
.theme-dark .p-datatable .p-sortable-column:not(.p-highlight):active,
.theme-dark .p-datatable .p-sortable-column.p-highlight:hover {
    background: #444;
    color: #fff;
}

.theme-dark .p-datatable .p-sortable-column:focus {
    box-shadow: inset 0 0 0 0.15rem #333;
}

.theme-dark .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{
    color: #fff !important;
}

.close {
    font-size: 18px;
    font-weight: 500;
  }

.p-button-filter{
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

.kebab-btn.p-button:enabled:hover{
    background: unset;
    border-color: transparent;
}

.p-dialog .p-confirm-dialog-accept.p-button.p-button-danger:hover ,
.p-dialog .p-confirm-dialog-accept.p-button.p-button-danger {
    color: #000;
}

/* checkbox */

.theme-dark .p-checkbox .p-checkbox-box{
    background: #333 !important;
    border-color: #444 !important;
}

.theme-dark .p-checkbox .p-checkbox-box.p-highlight {
    border-color: #2196F3 !important;
    background: #2196F3 !important;
}

.chart-three{
    height: 40px;
}

div.simple-typeahead-list{
    background-color: #444 !important;
}

.hr-color{
    color: rgba(231, 234, 243, 0.7);
}

.gender-container > div:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.gender-container > div:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.gender-container .label-gender{
    font-weight: 400;
    color: #677788;
}

.custom-tab{
    background-color: #e7e7e747;
    padding: 0.1rem;
    border-radius: 0.5rem;

}

.custom-tab .nav-item .col-6{
    padding: 0 !important;
}

div.upload-container.p-invalid {
    border: 1px solid #f44336b3 !important;
    border-radius: 7px !important;
}

.summary-cont{
    max-height: 500px;
    overflow-y: auto;
}

.btn-group{
    position: relative;
    display: flex;
    display: inline-flex;
    vertical-align: middle;
}

.p-inputnumber > input{
    width: 100%;
    font-size: 13.5px;
}

span.p-inputnumber.p-component{
    padding: 0;
}

.custom-tab a.nav-link{
    color: #677788;
    font-size: .8125rem;
    padding: 0.5rem 0.8125rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
}

.custom-tab a.nav-link:hover {
    color: #377dff;
}

.custom-tab a.nav-link.active {
    color: #1e2022;
    background-color: #fff;
    box-shadow: 0 0.1875rem 0.375rem 0 rgba(140,152,164,.25);
}

.p-datatable.p-invalid,
.p-dropdown.p-invalid.p-component,
.card.p-invalid,
input[type="time"].form-control.p-invalid {
    border: 1px solid #f44336 !important;
}

.theme-dark .fc.fc-theme-standard .fc-view-harness th,
.theme-dark .fc.fc-theme-standard .fc-view-harness td{
    background: #25282A;
}

.theme-dark .fc.fc-theme-standard .fc-view-harness th,
.theme-dark .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid,
.theme-dark .fc.fc-theme-standard .fc-view-harness td{
    border-color: #333;
}

.p-button.p-button-info:enabled:focus,
.p-buttonset.p-button-info > .p-button:enabled:focus,
.p-splitbutton.p-button-info > .p-button:enabled:focus{
    box-shadow: none !important;
}

.theme-dark .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event{
    border-color: #333 !important;
}

.theme-dark .fc .fc-daygrid-day.fc-day-today{
    background-color:#333 !important;
}

.company-logo{
    max-width: 150px;
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 35px;
}

.schedule .step-view{
    padding: .25rem !important;
    overflow: hidden;
}

.p-dropdown{
    border-color: rgba(231,234,243,.7) !important;
}

/* .form-control{
    font-size: 12.5px !important;
} */

.p-dropdown .p-dropdown-label{
    font-size: 13px;
    font-family:'Inter',sans-serif;
    color: #1e2022;
}

.attendance-close-profile{
    position: absolute;
    top: 0;
    right: 8px;
    margin: 1rem;
    z-index: 1;
}

.table-dropdown .p-dropdown .p-dropdown-label{
    padding-bottom: 3px;
}
.table-dropdown .p-dropdown{
    width: 126px !important;
    padding: .19rem;
}

.theme-dark .p-radiobutton .p-radiobutton-box{
    background:#202325;
    border: 2px solid #444;
}

.theme-dark .p-inputswitch .p-inputswitch-slider{
    background: #333;
}

.theme-dark .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{
    background: #377dff;
}

/* .fc-h-event .fc-event-title {
    font-size: 10px;
} */

.theme-dark .attendance-log-card{
    background: #333 !important;
    color: #fff;
}

.task-calendar-btn > button {
    background-color: transparent;
    color: #494057;
    border: unset;
}

.theme-dark .task-calendar-btn > button  {
    color: #fff;
}

.theme-dark .status-line{
    color: #fff;
}

.theme-dark .p-datatable .p-datatable-loading-overlay {
    background-color: #4444448c !important;
}

.p-overlaypanel-content .btn-export{
    background:unset;
    color: #495057;
    font-size: 16px;
}

.theme-dark .p-tabview .p-tabview-nav,
.theme-dark .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link,
.theme-dark .p-tabview .p-tabview-panels,
.theme-dark .p-tabview .p-tabview-nav li .p-tabview-nav-link{
    background-color: #25282A;
    color: #fff;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus{
    box-shadow:unset !important;
}

.theme-dark .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link{
    background: #333;
    color: #fff;
    border-color: #2196F3;
}

.p-button:enabled:hover{
    background: transparent !important;
    border-color:transparent !important;
    color: #1366ff !important;
    /* box-shadow: 0 3px 11px #333333; */
}

.p-dialog .p-confirm-dialog-accept.p-button.p-button-danger.btn-reset-pass{
    color: #fff !important;
}

.p-dialog .p-confirm-dialog-accept.p-button.p-button-danger.btn-reset-pass:hover{
    color: #1366ff !important;
}

.p-button{
    display: flex !important;
}

.p-dialog .p-confirm-dialog-accept.p-button.p-button-danger,
.p-confirm-dialog .p-dialog-footer .btn-default{
    color: #25282A;
}

.preview .table td{
    display: flex;
    justify-content: end;
}

.vr-wizard--btn{
    border-radius: 0.3125rem;
}

/* dialog stepper */

.step-icon{
    color: #132144;
    background-color: rgba(19, 33, 68, .1);
    width: 2rem;
    height: 2rem;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 100%;
    font-size: .875rem;
}

a.hs-nav-scroller-arrow-link.view{
    display: none;
}

.w-stepper__item.active span.step-icon{
    color: #fff;
    background-color: #377dff;
}

.w-stepper__item.active, .w-stepper__item.completed {
    color: unset !important;
}
/* end dialog stepper */

.vr-wizard--btn{
    text-transform: unset !important;
}

.p-dialog .p-dialog-header {
    border-bottom: transparent !important;
}

.p-datatable .p-datatable-thead > tr > th{
    font-weight: 400 !important;
    text-transform: uppercase;
    color: #677788 !important;
    font-size: 11.9px;
    height: 3rem;
}

.p-dialog .p-datatable .p-datatable-thead > tr > th{
    font-size: 12px !important;
}

button.vr-wizard--done-btn.vr-wizard--btn.custom-white{
    background-color: #fff !important;
    border: .0625rem solid rgba(231, 234, 243, .7) !important;
    color: #677788 !important;
}

button.vr-wizard--done-btn.vr-wizard--btn.custom-white:hover{
    color: #1366ff !important;
    border-color: rgba(231, 234, 243, .7);
    background-color: #fff;
    box-shadow: 0 3px 6px -2px rgba(140,152,164,.25);
}

.theme-dark .p-datatable .p-datatable-thead > tr > th{
    color: #c5c8cc  !important;
}

.p-datatable .p-sortable-column .p-sortable-column-icon{
    width: 0.79rem;
    color: #6c757d9e !important;
}

.p-dialog .w_stepper__title{
    font-weight: 600;
    margin-left: .5rem ;
}

.wz-footer{
    margin-left: -1.8rem;
    margin-right: -1.9rem;
    margin-top: .5rem;
    border-top: 0.0625rem solid rgba(231, 234, 243, 0.7);
}

.toggle-container > .card-body {
    height: 95px;
    overflow: hidden;
    transition: height .35s ease-in-out;
}

.toggle-container.expanded > .card-body {
    height: auto !important;
}

.toggle-container.no-filter-toggle > .card-body{
    height: 70px;
}

.toggle-container.payroll > .card-body{
    height: 88px;
}

.toggle-container.payroll.expanded > .card-body {
    height: 432px;
}

.toggle-container .icon {
    right: -5px;
    transform: translateY(-50%) rotate(0);
    transition: transform .35s ease-in-out;
}

.toggle-container.expanded .icon {
    transform: translateY(-50%) rotate(90deg);
}

.p-component{
    font-family: unset !important;
}

.employee-preview .p-dialog-footer{
    display: flex;
    justify-content: end;
}

i.nav-icon{
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-vertical-aside-mini-mode i.nav-icon {
    justify-content: unset;
}

.week div.btn-group >label.btn{
    border-radius: unset !important;
}

.week > .btn-group:nth-child(2) > label.btn {
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
}

.filter.week > .btn-group:nth-child(1) > label.btn {
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
}

.filter.week > .btn-group:nth-child(2) > label.btn {
    border-radius: unset !important;
}

.p-dialog .p-dialog-content h4,
.p-dialog .p-dialog-content h4 a{
    color: #677788;
}

.week > .btn-group:nth-last-child(1) > label.btn {
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}

.p-dialog.employee-schedule .p-dialog-footer{
    border-top: 0.0625rem solid rgba(231, 234, 243, 0.7);
}

.camera-action-btn-override{
    right: 7.6rem !important;
    bottom: -17px ;
}

div.upload-container.employee-create.p-invalid{
    border-radius: 50% !important;
}

video, canvas, .img-preview-cont{
    top: -3px;
    left: -3px;
}

.img-preview-cont .img-preview{
    height: 119px;
    width: 119px;
}

.profile-cover-img-wrapper {
    top: -20px !important;
    right: -9px !important;
    left: -9px !important;
}

.card.card-body .profile-cover-img-wrapper {
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
}

.profile-cover-img{
    border-radius : unset !important;
    border-top-left-radius:.75rem !important;
    border-top-right-radius:.75rem !important;
}

.profile-cover-img.no-border-radius {
    border-radius: 0 !important;
}

.p-button.p-component.btn.details-viewer,
.p-button.p-component.btn.details-viewer:hover{
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.leave-request-tab .p-tabview-nav{
    border: 1px solid #fff !important;
}

.leave-request-tab .p-tabview .p-tabview-nav li .p-tabview-nav-link{
    color: #6c757d !important;
}

.company-events > .fc-header-toolbar.fc-toolbar,
.leave-request > .fc-header-toolbar.fc-toolbar{
    display: none;
}

.fc .fc-popover{
    z-index:1 !important;
}

.b-date.profile-cover-uploader{
    top: 0;
    right: 104px;
    color: #71869d;
}

.attendance-summary-table-header{
    flex-direction: row;
    align-items: center;;
}

/* CSS Changes */
.p-button .p-badge {
    width: 1rem;
    line-height: 1!important;
}

.btn-danger, .btn.btn-danger:hover, .btn.btn-danger:focus {
    color: var(--bs-btn-color)!important;
    background-color: var(--bs-btn-bg)!important;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color)!important;
}

.btn.btn-outline-danger:hover, .btn.btn-outline-danger:focus {
    color: var(--bs-btn-hover-color)!important;
    background-color: var(--bs-btn-hover-bg)!important;
    border-color: var(--bs-btn-hover-border-color)!important;
}

.btn.btn-primary:hover, .btn.btn-primary:focus, .mx-btn.mx-datepicker-btn-confirm:hover, .mx-btn.mx-datepicker-btn-confirm:focus {
    color: var(--bs-btn-hover-color)!important;
    background-color: var(--bs-btn-hover-bg)!important;
    box-shadow: 0 4px 11px rgba(55,125,255,.35)!important;
}

.kebab-menu.p-overlaypanel .p-overlaypanel-content {
    padding: 0!important;
}

.kebab-menu .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.725rem;
}

.kebab-menu .btn .p-button-icon {
    font-size: 0.825rem;
}

.kebab-menu .dropdown-header {
    color: #94a3b8;
}

.kebab-menu .p-button-label {
    text-align: left;
}

.list-group.list-group-flush .card-subtitle {
    line-height: 1;
    margin-bottom: 0;
}

.list-group.list-group-flush .list-group-item .row > .col {
    width: 250px;
    flex: unset;
}

.p-dialog.p-confirm-dialog .p-dialog-header .p-dialog-title {
    font-size: 1.1484375rem;
}

.p-dialog .attendance-summary-table .p-datatable-table > .p-datatable-thead {
    display: none;
}

.attendance-summary.card-body-height{
    height: 27rem;
}

.card-footer > .attendance-summary-table td {
    padding: 5px;
}

.p-dialog .step-view [role="tablist"] {
    padding: .25rem .25rem!important;
    border-radius: .5rem;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
    padding: 1.25rem 1rem!important;
    border-bottom: .1875rem solid transparent!important;
    margin-bottom: -.125rem!important;
    font-weight: 400!important;
    font-size: var(--bs-body-font-size)!important;
    min-width: 100px;
    justify-content: center;
}

.p-tabview .p-tabview-nav li.p-highlight > .p-tabview-nav-link {
    color: var(--bs-nav-tabs-link-active-color)!important;
    background-color: var(--bs-nav-tabs-link-active-bg)!important;
    border-color: var(--bs-nav-tabs-link-active-border-color)!important;
    font-weight: 600!important;
}

*::-webkit-scrollbar {
    width: .6125rem;
    height: .6125rem;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(189, 197, 209, .6);
}

.badge {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.btn-default {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.kebab-menu .btn-default {
    border: 0 !important;
}

.theme-calendar.hide-clear [aria-label="Clear"] {
    display: none !important;
}

/* Date range picker */
.mx-datepicker-range {
    max-width: 100%;
}

.mx-datepicker-main {
    box-shadow: 0 0.6125rem 2.5rem 0.6125rem rgba(140,152,164,.175)!important;
    margin-top: 0!important;
    margin-bottom: 0!important;
    border-radius: .75rem!important;
    border: none!important;
    font-family: Inter, sans-serif!important;
    color: inherit!important;
    font-size: 15px!important;
    line-height: 1em!important;
}

.mx-calendar-content {
    height: auto!important;
}

.mx-calendar {
    width: auto!important;
    max-width: 18.75rem;
    padding: 1rem 1rem!important;
}

.mx-calendar-header, .mx-time-header {
    height: 38.5px!important;
    line-height: 24px!important;
}

.mx-calendar-header .mx-btn {
    font-size: .875rem;
    font-weight: 600;
    color: inherit;
}

.mx-table-date th, .mx-table-date td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.mx-table-date th {
    min-width: 32px;
    width: 32px;
    height: 28px!important;
    line-height: 24px;
    font-size: 12px!important;
}

.mx-table-date td {
    min-width: 2.40625rem!important;
    width: 2.40625rem!important;
    height: 2.40625rem!important;
    font-size: .875rem!important;
    line-height: 2.15625rem!important;
    border-radius: 50%;
}

.mx-table-date .today {
    font-weight: 600;
}

.mx-table-date .active, .mx-table-date .active:hover {
    color: #fff!important;
    background-color: #377dff!important;
}

.mx-calendar-range .mx-table-date .active:not(.not-current-month) {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
    border-top-left-radius: 50rem!important;
    border-bottom-left-radius: 50rem!important;
}

.mx-calendar-range .mx-table-date .in-range+.active:not(.not-current-month), .mx-calendar-range .mx-table-date .active+.active:not(.not-current-month) {
    border-top-right-radius: 50rem!important;
    border-bottom-right-radius: 50rem!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

.mx-calendar-content .cell.in-range:not(.not-current-month), .mx-calendar-content .cell.hover-in-range {
    color: #677788!important;
    background-color: rgba(231, 234, 243, .5)!important;
    border-radius: 0!important;
}

.mx-calendar-content .not-current-month.active {
    color: #ccc!important;
    background-color: transparent!important;
}

.mx-calendar-content .cell.disabled {
    background-color: transparent!important;
}

.mx-datepicker-footer {
    padding: 1rem!important;
}

.mx-btn.mx-datepicker-btn-confirm {
    --bs-btn-color: #fff;
    --bs-btn-bg: #377dff;
    --bs-btn-border-color: #377dff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f6ad9;
    --bs-btn-hover-border-color: #2c64cc;
    --bs-btn-focus-shadow-rgb: 85, 145, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2c64cc;
    --bs-btn-active-border-color: #295ebf;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #377dff;
    --bs-btn-disabled-border-color: #377dff;

    line-height: 1.5!important;
    font-size: .875rem!important;
    font-weight: 400!important;
    padding: .6125rem 1rem!important;

    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color)!important;
    color: var(--bs-btn-color)!important;
    background-color: var(--bs-btn-bg)!important;
}

.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-datatable-row-expansion:not(.p-highlight):hover{
    background: unset !important;
}

span.period-calendar {
    width: calc(50% - 6px);
}

/* .daterangepicker .calendar-table th:not(.month) {
    color: #97a4af;
    font-weight: 600;
    text-transform: uppercase;
} */

.comment-wrapper {
    display: flex;
    align-items: flex-start;
}

.comment-container {
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.comment-content {
    flex: 1;
    margin-right: 20px;
}

.comment-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-text {
    font-size: 14px;
    margin-bottom: 5px;
    word-break: break-word;
    white-space: pre-line;

    position: relative;
}

.comment-text iframe {
    display: block;
    width: 100%;
}

.comment-text .drive-link {
    position: absolute;
    top: 124px;
    left: 111px;
    width: 26%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0 0 0 / 50%);
    border-radius: 10px;
    color: #dbd1d1;
}

.comment-timestamp {
    font-size: 10px;
    font-weight: bold;
    text-align: right;
    align-self: flex-end;
}

hr.sumamry-separator{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 15px;
    border: 0;
    width: 82.44%;
    border-top:.0625rem solid rgba(231, 234, 243, .7);
}

.custom-col-chart{
    width: 73.666667% !important;
}

.custom-col-log{
    flex: 0 0 auto;
    width: 66% !important;
}

.dashboard-departments{
    overflow-y: auto;
    max-height: calc(7.3125rem + 714px);
    padding-bottom: 1rem;
    margin-left: 1rem;
}

.dashboard-dialog-content{
    max-height: calc(90vh - 4.5rem - 165px);
    max-height: calc(90svh - 4.5rem - 165px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0 !important;
}

.attendance-log-dashboard{
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.company-event-profile{
    height: 5rem !important;
}

.p-datatable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead > tr > th {
    border-left: 0!important;
    border-right: 0!important;
    border-top: .0625rem solid rgba(231, 234, 243, .7)!important;
    border-bottom: .0625rem solid rgba(231,234,243,.7)!important;
    background: #f8fafd!important;
    height: auto;
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
    font-size: .74375rem !important;
}

.p-datatable .p-sortable-column .p-sortable-column-icon {
    /* display: none; */
    position: absolute;
    z-index: 1;
    opacity: 0;
}

.p-datatable .p-sortable-column .p-column-title+span::after {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    width: .7rem;
    height: .7rem;
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23dde1ee'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23dde1ee'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: .7rem .7rem;
    content: "";
    margin-left: .5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.p-datatable .p-sortable-column[aria-sort="ascending"] .p-column-title+span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23377dff'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23dde1ee'/%3E%3C/svg%3E%0A");
    content: "";
}

.p-datatable .p-sortable-column[aria-sort="descending"] .p-column-title+span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23dde1ee'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23377dff'/%3E%3C/svg%3E%0A");
    content: "";
}

.p-datatable .p-sortable-column:focus {
    box-shadow: none!important;
}

.p-datatable .p-checkbox {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.p-datatable .p-checkbox, .p-datatable .p-checkbox .p-checkbox-box {
    width: 1rem!important;
    height: 1rem!important;
}

.p-dialog .p-checkbox .p-checkbox-box,
.p-datatable .p-checkbox .p-checkbox-box {
    background-color:#fff;
    border-radius: .25em;
    /* border: 1px solid rgba(231, 234, 243, .7)!important; */
    border:1px solid rgb(195, 190, 190) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.p-dialog .p-checkbox .p-checkbox-box,
.p-datatable .p-checkbox .p-checkbox-box.p-focus {
    box-shadow: none!important;
}

.p-datatable .p-checkbox .p-checkbox-box.p-highlight {
    border-color: #377dff!important;
    background: #377dff!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")!important;
}

.p-datatable .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
    display: none;
}

.status-filter.active, .status-filter:hover {
    box-shadow: 0 .375rem .75rem rgba(140, 152, 164, .075)!important;
    border-radius: 0.75rem!important;
    border: 0.0625rem solid rgba(231, 234, 243, 0.7);
}

.col-sm-divider>:not(:first-child)::before {
    top: 50%!important;
    transform: translateY(-50%);
}

.p-button.d-flex.align-items-center.justify-content-center .p-button-label {
    flex: unset;
    margin-left: 0.5rem;
}

.profile-card .profile-cover-img-wrapper {
    top: -0 !important;
    right: 0 !important;
    left: 0 !important;
}

.profile-card .upload-wrapper, .profile-card .upload-container, .profile-card .img-preview-cont .img-preview, .profile-card .loader-container {
    width: 100%!important;
    height: 100%!important;
    border-radius: 50%!important;
}

.profile-card video, .profile-card canvas, .profile-card .img-preview-cont {
    border-radius: 50%!important;
}

.profile-card .step-view.wz-content {
    padding: 0!important;
    max-height: unset!important;
}

.profile-card .upload-label > .action {
    display: block;
}

.theme-dark .p-datatable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead > tr > th {
    background: #2f3235!important;
    border-color: #2f3235 !important;
}

.p-datatable .p-datatable-tbody > tr:focus {
    outline: 0!important;
}

.p-tabview .p-tabview-panels {
    padding: 0!important;
}

.p-tabview .p-tabview-panels .p-tabview-panel:empty {
    display: none;
}

.summary-counts{
    justify-content: end;
}

.on-toggle, .mobile-summary{
    display: none;
}

.table-responsive{
    overflow-x: hidden !important;
}

.dashboard-chart-header{
    flex-direction: row;
}

.attendance-summary-table-cols{
    display: flex;
    flex-direction: column;
}

.event-type-color > input{
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.date-mobile{
    display: none;
}

.form-employee-dashboard .vr-wizard--footer .vr-wizard--footer-right {
    display: flex;
    justify-content: flex-end;
}

.form-employee-dashboard .vr-wizard--footer .vr-wizard--footer-right button:nth-child(1) {
    order: 2;
}

.form-employee-dashboard .vr-wizard--footer .vr-wizard--footer-right button:nth-child(2) {
    order: 1;
}

.status-line {
    display: flex;
    flex-direction: row;
}
.status-line:before, .status-line:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid;
    margin: auto;
}
.status-line:before {
    margin-right: 10px;
}
.status-line:after {
    margin-left: 10px;
}

.detail-border.border-info:before {
    background-color: var(--border-color) !important;
}

.p-toast.p-component.p-toast-bottom-center > div .p-toast-message.p-toast-message-success:last-child .toast-btn {
    display: flex !important;
}

.p-toast.p-component.p-toast-bottom-center > div .p-toast-message.p-toast-message-success .toast-btn {
    display: none !important;
}

.p-toast-icon-close.p-link{
    visibility: hidden;
}

.employee-dashboard-attendance{
    display: flex;
    flex-direction: row;
}

.toast-btn .btn-custom-color{
    background-color: #f4f4f4;
}

.p-toast.time-log-toast .p-toast-message.p-toast-message-success{
    background: #fff !important;
}

.p-datatable-scrollable-table > .p-datatable-thead{
    top: -2px !important;
}

.comment-img{
    max-width: 33.5rem;
    margin-top: 1rem;
}

.carousel__pagination-button::after{
    width: 2rem !important;
    height: 0.5rem !important;
    border-radius: 0 !important;
    background-color: #e9ecef;
}

.header-status{
    border: .5px solid powderblue;
    padding: .45rem .6rem;
    border-radius: 6px;
}

.p-fileupload svg{
    margin-right: .5rem !important;
}

.activity-content{
    overflow-y: auto; 
    max-height: calc(90vh - (14.025rem + 1.5em + (13.5px * 1.5)));
    max-height: calc(90svh - (14.025rem + 1.5em + (13.5px * 1.5)));
    overflow-x: hidden;
}

.activity-content.activity-upload-content {
    max-height: calc(90vh - (16.025rem + 1.5em + 150px + (13.5px * 1.5)));
    max-height: calc(90svh - (16.025rem + 1.5em + 150px + (13.5px * 1.5)));
}

.search-and-department:last-child .p-dropdown .p-dropdown-label{
    padding-top: .6rem;
    padding-bottom: 0.65rem;
}

.mobile-task-table{
    display:none;
}

.p-multiselect{
    border: .0625rem solid rgba(231, 234, 243, .7) !important;
}

.p-multiselect-header .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
.p-multiselect:not(.p-disabled).p-focus{
    box-shadow:unset !important;
}

.p-datatable.p-datatable-scrollable.employee-schedule-list {
    max-height: calc(90vh - 4.5rem - 330px);
    max-height: calc(90svh - 4.5rem - 330px);
}

.attendance-summary-details{
    overflow-y: auto;
    max-height: 370px;
}

.qualified-count-padding{
    padding: .45rem !important;
}

.qualified-div{
    width:49.5%;
}

.attendance-report-table th[class*="_column"] {
    width: 3rem;
}

.screen-saver.screen-saver-kiosk{
    display: none;
}

.screen-saver.screen-saver-desktop
{
    display: flex;
    flex-direction: row;
}

.employee-dashboard-toast .p-toast-icon-close.p-link {
    visibility:visible;
}

.p-button.employee-dashboard-toast-btn-clear {
    position: absolute;
    top: -43px;
    right: -.5%;
}

.navbar-icon-size {
    font-size: 22px !important;
}

.p-overlaypanel.p-component.notif-menu {
    width: 100%;
    max-width: 29rem;
}

.p-overlaypanel.p-component.notif-menu .p-overlaypanel-content .notif-content {
    max-height: calc(80vh - (((1.25625rem + .075vw) * 1.2) + (2rem * 1.5)));
    max-height: calc(80svh - (((1.25625rem + .075vw) * 1.2) + (2rem * 1.5)));
    overflow-y: auto;
    overflow-x: hidden; 
}

.notif-unread {
    background: #7bb6f140 !important;
}

.badge.notif-badge {
    margin-left: 0 !important;
    background-color: red !important;
    color: white !important;
    margin-top: -15px;
    top: -4px !important;
    left: -11px !important;
    font-size: 8px;
}

.employee-dashboard-toast .p-toast-message.p-toast-message-info {
    background:#fff !important;
    border-color: #1f52d3 !important;
}

.notif-tabs .nav-item .nav-link {
    border: 3px solid transparent;
    border-radius: 50px;
    min-width: 90px;
}

.notif-tabs .nav-item .nav-link.active {
    border: 3px solid;
}

.checkbox-disable-custom.p-checkbox .p-checkbox-box.p-disabled {
    border-color: #393939 !important;;
    background: #393939 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 5 L15 15 M5 15 L15 5'/%3e%3c/svg%3e")!important;

}

.uac-checkbox-btn{
    width: 6.8rem;
}

.verify-employee-img-wrapper{
    top:0 !important;
    right: 0 !important;
    left: 0 !important;
}

.verify-employee-body{
    margin-bottom: 0 !important;
}

.verify-employee-code{
    display: flex;
    flex-direction: row;
    top: 0;
    left: 5px;
}

.p-calendar.p-component.attendance-tracking-date .p-inputtext.p-component.form-control {
    min-width: 130px !important;
    border-color: #333;
}

.task-remarks-text-area,
.leave-text-area{
    max-height: 100px;
    overflow-y: auto !important;
}

.leave-request-image{
    width: 100%;
}

.p-autocomplete.p-invalid.p-component > .p-inputtext{
    border-color: transparent !important;
}

.p-avatar-group .announcement-avatar.p-avatar + .p-avatar{  /* for announcement module */
    margin-left: -.7rem !important;
}

form.holiday_dialog .vr-wizard--footer.wz-footer{
    display: none;
}

label.schedule-checkbox:hover{
    background-color: #377dffb8;
}

label.schedule-checkbox.active:hover {
    background-color: var(--bs-btn-active-bg);
}

.p-fileupload .upload-item {
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: 100%;
}

.p-fileupload .comment-upload-item {
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: 100%;
    border: 0 !important;
}

.comment-wrapper .comment-container .comment-text .mention-style {
    color: #007bff;
    font-weight: bold;
    background-color: #ebdddd6e;
    padding: 2px 4px;
    border-radius: 4px;
}

.p-fileupload .upload-item .img-container-inner,
.p-fileupload .upload-item .vid-container-inner,
.p-fileupload .comment-upload-item .img-container-inner,
.p-fileupload .comment-upload-item .vid-container-inner {
    width: 100%;
}

.p-fileupload .upload-item .img-container-inner .img-fluid,
.p-fileupload .upload-item .vid-container-inner .vid-fluid,
.p-fileupload .upload-item .img-container-inner span.img-fluid img,
.p-fileupload .comment-upload-item .img-container-inner .img-fluid,
.p-fileupload .comment-upload-item .vid-container-inner .vid-fluid,
.p-fileupload .comment-upload-item .img-container-inner span.img-fluid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-fileupload .upload-item span.img-fluid.p-image-preview-container > .p-image-preview-indicator,
.p-fileupload .comment-upload-item span.img-fluid.p-image-preview-container > .p-image-preview-indicator {
    border-radius: 0;
    border: 0;
}

.default-upload-container {
    border: .0625rem solid rgba(231,234,243,.7);
    border-radius: 8px;
}

.default-upload-container .p-fileupload-empty {
    width: 100%;
}

/* .default-upload-container:not(.multiple) .p-fileupload-buttonbar {
    display: none;
} */

.default-upload-container .p-fileupload-buttonbar {
    padding: 8px !important;
    background: transparent !important;
}

.default-upload-container .p-fileupload .p-fileupload-content, .default-upload-container .p-fileupload-buttonbar {
    border: 0 !important;
}

.default-upload-container .p-fileupload .p-fileupload-content .clickable-upload {
    padding: 8px;
}

.comment-field-wrapper {
    border: 1px solid rgba(231, 234, 243, .7);
    border-radius: 10px;
}

.comment-field-wrapper .comment-field-actions button {
    color: gray;
    border: none;
    background: transparent;
}

.comment-field-wrapper .comment-field-actions button:hover,
.comment-field-wrapper .comment-field-actions button:active,
.comment-field-wrapper .comment-field-actions button:focus {
    color: #2f6ad9 !important;
    border: none;
    background: transparent !important;
    box-shadow: none !important;
}

.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose {
    border: none;
    background: transparent;
    width: 2.357rem;
    padding: 0.5rem 0;
}

.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose::before {
    content: "\e934";
    font-family: 'primeicons';
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    color: gray;
    padding-bottom: 0px;
    bottom: 0px;
    top: 5.7px;
}

.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose:hover::before,
.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose:active::before,
.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose:focus,
.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose:focus-visible {
    color: #2f6ad9 !important;
    border: none;
    background: transparent !important;
    box-shadow: none !important;
}

.comment-field-wrapper .comment-field-actions .p-fileupload.p-fileupload-basic.p-component span.p-button.p-component.p-fileupload-choose svg {
    opacity: 0;
}

.default-upload-container.simple-upload-container.multiple.overflow-hidden {
    border: none;
}

.default-upload-container.simple-upload-container.multiple.overflow-hidden .p-fileupload.p-fileupload-advanced.p-component .p-fileupload-buttonbar {
    padding: 0 !important;
    justify-content: end;
}

.default-upload-container.simple-upload-container.multiple.overflow-hidden .p-fileupload.p-fileupload-advanced.p-component .p-fileupload-content {
    margin: 0;
    padding: 0;
}

.default-upload-container.simple-upload-container.multiple.overflow-hidden .p-fileupload.p-fileupload-advanced.p-component .p-fileupload-content .position-relative {
    display: none;
}

.comment-field-container .default-upload-container.comment-upload-preview {
    background: transparent;
}

.comment-field-container .default-upload-container.comment-upload-preview .p-fileupload .upload-item {
    height: 150px;
    width: 150px;
    flex: 0 0 150px;
    position: relative !important;
}

.comment-field-container .default-upload-container.comment-upload-preview .p-fileupload .upload-item button.custom-upload-preview-close {
    top: 10px;
    border: none;
    background: #ffffff;
    color: #2f3235;
    position: absolute;
    border-radius: 20px;
    right: 10px;
}

.comment-field-container .default-upload-container.comment-upload-preview .p-fileupload .upload-item button.custom-upload-preview-close:hover {
    background: #ffffff !important;
    color: #4068ff !important;
}

.comment-wrapper .comment-container .comment-uploads.default-upload-container.comment-upload-preview {
    border-radius: 0 !important;
    border: none !important;
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.125);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

.default-upload-container.multiple .p-fileupload .p-fileupload-content:hover .upload-overlay {
    opacity: 1;
    pointer-events: all;
}

.default-upload-container .p-fileupload .p-fileupload-content .btn-default, .default-upload-container .p-fileupload .p-fileupload-content .btn-default:hover {
    color: #495057;
    background-color: #ffffff !important;
    border-color: #e9ecef !important;
}

button.p-button.p-component.pinned span.p-button-icon {
    font-size: 25px !important;
    color: red !important;
}

button.p-button.p-component.pinned span.p-button-icon:hover {
    color: blue !important;
}

.employee-dashboard-toast-btn-clear .p-badge.p-component {
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-legends {
    flex-wrap: unset;
    column-gap: 20px;
    max-width: 100%;
    overflow-x: auto;
}

.calendar-legends div {
    flex-grow: unset !important;
    width: unset !important;
    padding-right: .1rem;
}

.calendar-legends div > span.legend-label {
    font-size: small;
    white-space: nowrap;
}

.fc-event-main .fc-event-main-frame .fc-event-time,
.fc-event.fc-event-start.fc-event-end.fc-event-today .fc-event-time{
    display: none;
}

.avatar {
    border-radius: 50% !important;
}

.filter-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
    
.filter-content-item {
    width: 49%;
}

.overlay-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.625rem;
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-color: #677788;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-inner-border-radius: 0.5rem;
    --bs-dropdown-divider-bg: rgba(231, 234, 243, 0.7);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: 0rem 0.6125rem 2.5rem 0.6125rem rgba(140, 152, 164, 0.175);
    --bs-dropdown-link-color: #1e2022;
    --bs-dropdown-link-hover-color: #1b1d1f;
    --bs-dropdown-link-hover-bg: rgba(189, 197, 209, 0.2);
    --bs-dropdown-link-active-color: #1e2022;
    --bs-dropdown-link-active-bg: rgba(189, 197, 209, 0.2);
    --bs-dropdown-link-disabled-color: #97a4af;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-header-color: #8c98a4;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}

.employee-dashboard-toast > div {
    max-height: 70vh !important;
}

.uac-main-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.uac-employee-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: .5rem;
    flex: 0 0 30%;
    max-width: 100%;
}

.uac-module-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: .5rem;
    flex: 0 0 70%;
    max-width: 100%;
    overflow-x: auto;
}

.uac-employee-content .search-and-department:first-child {
    margin-top: 3px;
}

.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-vertical-content {
    height: 95vh !important;
}

/* Chat With AI */
.messagebox-container {
    z-index: 1002;
}

.messagebox-container .card {
    min-width: 328px;
    max-width: 328px;
    box-shadow: 0 12px 28px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1);
    border-radius: 8px 8px 0 0;
}

.messagebox-container .card .card-header {
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 -1px rgba(0,0,0,.1) inset, 0 2px 1px -1px rgb(255 255 255 / 50%) inset;
}

.messagebox-chat-container {
    display: flex;
    overflow-y: auto;
    min-height: 363px;
    max-height: 363px;
}

.messagebox-chat-list {
    width: 100%;
    padding: 8px;
}

.messagebox-row {
    display: flex;
}

.messagebox-row.send {
    justify-content: flex-end;
}

.messagebox-bubble {
    padding: 12px;
    word-wrap: break-word;
    border-radius: 8px;
    max-width: 70%;
    background-color: #efefef;
    white-space: pre-wrap;
}

.messagebox-row.send .messagebox-bubble {
    background: #0d6efd;
    color: #fff
}

.messagebox-row .messagebox-bubble a {
    display: block;
}

.messagebox-container .card .card-footer {
    padding: 12px 8px;
    border-color: #d0d3d7;
}

.messagebox-container .card .card-footer .form-control {
    padding: 4px;
    border-color: transparent;
    background-color: #f0f2f5;
}

.messagebox-container .btn.btn-small.btn-transparent {
    width: 30px;
    height: 30px;
}

.btn-transparent:active {
    --tb-btn-active-bg: #f0f2f5;
}

.qr-code-container {
  width: 100%;
}

.qr-code {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  width: 100%; /* Adjust the width as needed */
}

.qr-description {
  font-size: 0.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.qr-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.download-qr-link {
  display: block;
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  font-size: 0.8rem;
  transition: color 0.3s ease;
}

.download-qr-link:hover {
  color: #0056b3;
}

.overlay-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.625rem;
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-color: #677788;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-inner-border-radius: 0.5rem;
    --bs-dropdown-divider-bg: rgba(231, 234, 243, 0.7);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: 0rem 0.6125rem 2.5rem 0.6125rem rgba(140, 152, 164, 0.175);
    --bs-dropdown-link-color: #1e2022;
    --bs-dropdown-link-hover-color: #1b1d1f;
    --bs-dropdown-link-hover-bg: rgba(189, 197, 209, 0.2);
    --bs-dropdown-link-active-color: #1e2022;
    --bs-dropdown-link-active-bg: rgba(189, 197, 209, 0.2);
    --bs-dropdown-link-disabled-color: #97a4af;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-header-color: #8c98a4;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}

.employee-dashboard-toast-btn-clear .p-badge.p-component{
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.white-space-br {
    white-space: pre-wrap;
}

.navbar-vertical-aside-mini-mode .minimized-nav-count {
    position: absolute;
    z-index: 1;
    right: -16px;
    margin: 0;
    transform: translateY(-5%);
    pointer-events: none;
}

.navbar-vertical-aside-mini-mode .p-tooltip.minimize-nav-tooltip{
    display: inline-block !important;
}

.p-tooltip.minimize-nav-tooltip{
    display: none !important;
}

.legend-indicator.bg-warning{
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important
}

.theme-dark .calendar-legends div > span.legend-label {
    color: #fff;
}

.theme-dark .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded {
    background: #444;
}

.theme-dark .fc.fc-theme-standard .fc-view-harness td {
    color: #fff;
}

.theme-dark .w-stepper__item.active {
    color: #a1a6e5;
}

span.happy-bday-pill{
    background: #fff;
    color: #1e2022;
    padding: 5px;
    border-radius: 10px;
    opacity: 1;
}

.leave-request-description-employee{
    overflow: auto;
    min-height: calc(38vh - (10rem + 24px + (3.171875rem* 1.2)));
    min-height: calc(38svh - (10rem + 24px + (3.171875rem* 1.2)));
}

.filter-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.filter-content-item {
    width: 49%;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.p-invalid.employee-schedule-table {
    border-radius: unset !important;
}

.notification-loader {
    background: rgb(255 255 255 / 70%);
}

.notif-empty {
    min-height: 112px;
}

.bottom-notif-message, .notif-menu-message {
    max-width: 100%;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

/* ATTENDANCE CARD RECENT */

.left-panel {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px;
  height: 100%;
}

.lp-card {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100% - 24px);
}

.lp-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.lp-badge-wrapper {
  margin-bottom: 10px;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e6ebf2;
  background: #f8fafc;
  color: #0f172a;
}

.lp-badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.lp-badge.in {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.lp-badge.in .dot {
  background: #10b981;
}

.lp-badge.out {
  background: #fef2f2;
  color: #7f1d1d;
  border-color: #fecaca;
}

.lp-badge.out .dot {
  background: #ef4444;
}

.lp-portrait {
  margin-bottom: 10px;
}

.lp-photo {
  width: 140px;
  height: 140px;
  border-radius: 28px;
  object-fit: cover;
  background: #f1f5f9;
  display: block;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
  outline: 6px solid #f7f9fc;
}

.lp-name h3 {
  margin: 0 0 8px 0;
  font-size: 1.3rem;
  line-height: 1.15;
  color: #0b1220;
  font-weight: 900;
  text-align: center;
}

.lp-name h3 span {
  font-weight: 800;
}

.lp-sub {
  margin: 0;
  color: #6b7280;
  font-size: 0.85rem;
  text-align: center;
}

.lp-info {
  margin-top: 10px;
  border-top: 1px dashed #e6ebf2;
  padding-top: 10px;
  display: grid;
  row-gap: 10px;
}

.lp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lp-row i {
  font-size: 1rem;
  color: #64748b;
  margin-top: 2px;
}

.lp-col {
  display: flex;
  flex-direction: column;
}

.lp-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.lp-value {
  font-size: 1rem;
  color: #1f2937;
  font-weight: 600;
}


/* BEGIN ED CSS */

.btn-ghost-dark:enabled:active, .btn-ghost-dark:enabled:focus, .btn-ghost-dark:enabled:hover {
    border-color: transparent !important;
    background-color: rgba(19, 33, 68, .1) !important;
}

.vr-wizard--footer button, .vr-wizard--footer .btn {
    min-width: 100px;
}

.profile-cover-avatar .upload-label {
    line-height: 1.2;
    font-size: 13px;
}

.profile-cover-avatar .img-placeholder-icon {
    max-width: 40px !important;
}

.min-w-100px {
    min-width: 100px;
}

.min-h-50 {
    min-height: 50%;
}

.leave-request-description-employee {
    min-height: 0;
    height: auto !important;
    max-height: unset !important;
    max-width: 100%;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

.default-list-group .list-group-item > .d-flex > .flex-1 {
    max-width: 50%;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

.default-list-group .list-group-item > .d-flex > .flex-1 .card-subtitle {
    line-height: inherit;
    margin-bottom: 0;
    margin-top: 0.25rem;
}

.max-h-300px {
    max-height: 300px;
}

.max-h-250px {
    max-height: 250px;
}

.max-h-200px {
    max-height: 200px;
}

.max-h-150px {
    max-height: 150px;
}

.dark-container {
    width: 100%;
    max-width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
}

.p-toast .p-toast-message {
    position: relative;
}

.p-toast .p-toast-message:last-child {
    margin-bottom: 0;
}

.p-toast .p-toast-message:not(:first-child) .employee-dashboard-toast-btn-clear {
    opacity: 0;
    transition: opacity .35s ease-in-out;
}

.p-toast .p-toast-message.p-toast-message-leave-active:first-child+.p-toast-message .employee-dashboard-toast-btn-clear {
    opacity: 1;
}

.uac-employee-content {
    min-width: 375px;
}

.js-nav-scroller {
    max-width: 100%;
}

.w-footer-ui.p-dialog .p-dialog-footer {
    padding: 1rem 2rem 1.5rem !important;
    border-top: 0.0625rem solid rgba(231, 234, 243, 0.7);
}

.custom-tooltip {
    position: absolute;
    background: #fff;
    max-width: 100%;
    bottom: -10px;
    transform: translateY(100%);
    border: 1px solid #eaecf3;
    border-radius: 8px;
    padding: 10px 14px;
    /* line-height: 1.14; */
    font-size: 0.825rem;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.custom-tooltip:after {
    content: "";
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    left: 0.725rem;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 0 10px rgb(0 0 0 / 10%));
}

.form-label.text-blue {
    color: #377dff;
}

.opacity-100 {
    opacity: 1 !important;
}

.btn-fade {
    opacity: 0 !important;
    transition: opacity .35s !important;
}

.cursor-default {
    cursor: default !important;
}

/* END ED CSS */

.p-datatable.p-datatable-scrollable.dashboard-facelog-list {
    max-height: calc(90vh - 4.5rem - 330px);
    max-height: calc(90svh - 4.5rem - 330px);
}

.p-datatable .p-datatable-tbody > tr.p-datatable-row-expansion > td {
    padding: 0 !important;
    border: 0;
}

.p-datatable .p-datatable-tbody > tr.p-datatable-row-expansion > td > .p-datatable-row-container {
    padding: 16px 18px 0 !important;
    border: 1px solid #e9ecef;
    border-width: 0 1px 1px 1px !important;
}

.swal2-container.swal2-center.swal2-backdrop-show .swal2-html-container {
    white-space: pre-wrap;
}

.messagebox-row .messagebox-persona-name {
    margin-top: -6px !important;
    padding: 3px;
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    opacity: 0.8;
    font-weight: 500;
}

input[type="time"] {
    position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biIgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSIvPjwvc3ZnPg==") no-repeat right 5px center;
    opacity: 0.45;
    cursor: pointer;
}

.table-responsive.border-x-1 {
    border-color: #eef0f7;
    border-bottom: 1px solid #eef0f7;
}

.invalid-container {
    --bg-opacity: 1;
    background-color: rgba(26, 32, 44, var(--bg-opacity));
}

.invalid-container .text-gray-500 {
    --text-opacity: 1;
    color: rgba(160,174,192,var(--text-opacity)) !important;
}

.invalid-container .px-4 {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
}

.invalid-container .border-gray-400 {
    --border-opacity: 1;
    border-color: rgba(203,213,224,var(--border-opacity)) !important;
}

.invalid-container .tracking-wider {
    letter-spacing: .05em;
}

.schedule-logs-container .p-tabview .p-tabview-nav,
.schedule-logs-container .p-tabview-panels,
.schedule-logs-container .p-tabview .p-tabview-nav li .p-tabview-nav-link {
    background-color: transparent !important;
    border-bottom-color: transparent;
}

.schedule-logs-container .p-tabview-panels {
    height: calc(100% - 3.975rem);
}

.schedule-logs-container .p-tabview-panels > .p-tabview-panel {
    height: 100%;
}

.attendance-log-content-container {
    max-height: calc(100% - ((13px * 1.5) + .5rem));
    overflow: auto;
}

.p-dialog.p-confirm-dialog {
    max-width: 560px;
}

.navbar-vertical-fixed {
    z-index: 101;
}

.placeholder-capitalize::placeholder {
    text-transform: capitalize !important;
}

.fc-daygrid-event-harness {
    text-transform: uppercase !important;
}

.licensed-text {
    padding: 0.5rem 1rem;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background: linear-gradient(135deg, #0052ff 0%, #0080ff 50%, #a78bfa 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* box-shadow: 0 12px 48px rgba(0, 82, 255, 0.6), 0 24px 96px rgba(0, 128, 255, 0.4), 0 32px 128px rgba(167, 139, 250, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.3); */
    box-shadow: 0 0 12px rgba(0, 82, 255, 0.3),0 0 24px rgba(0, 128, 255, 0.2),0 0 36px rgba(167, 139, 250, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.1),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.licensed-text::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, 
        #0052ff, #0080ff, #a78bfa, #c4b5fd, 
        #a00e4a, #a78bfa, #0080ff, #0052ff
    );
    border-radius: 15px;
    z-index: -1;
    filter: blur(15px);
    opacity: 0.8;
    transition: opacity 0.4s ease;
    animation: gradientShift 8s ease-in-out infinite;
}

.glow-ring {
    display: none;
}

.particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    animation: float 6s infinite linear;
    opacity: 0;
    z-index: 10;
}

.particle:nth-child(1) { animation-delay: 0s; left: 40px; top: 8px; }
.particle:nth-child(2) { animation-delay: 1s; left: -40px; top: -8px; }
.particle:nth-child(3) { animation-delay: 2s; left: 55px; top: -5px; }
.particle:nth-child(4) { animation-delay: 3s; left: -55px; top: 5px; }
.particle:nth-child(5) { animation-delay: 4s; left: 25px; top: -12px; }
.particle:nth-child(6) { animation-delay: 5s; left: -25px; top: 12px; }
.particle:nth-child(7) { animation-delay: 0.5s; left: 65px; top: 2px; }
.particle:nth-child(8) { animation-delay: 1.5s; left: -65px; top: -2px; }
.particle:nth-child(9) { animation-delay: 2.5s; left: 10px; top: 15px; }
.particle:nth-child(10) { animation-delay: 3.5s; left: -10px; top: -15px; }
.particle:nth-child(11) { animation-delay: 4.5s; left: 75px; top: -10px; }
.particle:nth-child(12) { animation-delay: 5.5s; left: -75px; top: 10px; }

.min-w-50px {
    min-width: 50px;
}

.min-w-75px {
    min-width: 75px;
}

.font-mono {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
}

.template-item {
    background: white;
    border: 2px solid #e5e7eb;
    transition: all 0.2s;
    font-size: 13px;
    position: relative;
}

.template-item:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.template-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.w-1-75rem {
    width: 1.75rem !important;
}

.min-w-140px {
    min-width: 140px !important;
}

.messagebox-container.upload-details {
    -webkit-transition: transform 0.15s cubic-bezier(0.4,0,1,1), opacity 0.15s cubic-bezier(0.4,0,1,1), visibility 0ms linear 0.15s;
            transition: transform 0.15s cubic-bezier(0.4,0,1,1), opacity 0.15s cubic-bezier(0.4,0,1,1), visibility 0ms linear 0.15s;
}

.messagebox-container.upload-details.hide {
    opacity: 0.01;
    visibility: hidden;
    -webkit-transform: translate3d(0, 24px, 0);
            transform: translate3d(0, 24px, 0);
}

.messagebox-container.upload-details .card {
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
    min-width: 360px;
    max-width: 360px;
    --bs-card-border-color: transparent;
}

.messagebox-container.upload-details .card .card-header {
    background-color: #f8fafd;
    box-shadow: none;
    border: 1px solid transparent;
}

.messagebox-container.upload-details .card .card-header:first-child,
.messagebox-container.upload-details .card {
    border-radius: 1rem 1rem 0 0;
}

.toolbar .btn-transparent {
    position: relative;
    border-radius: 50%;
}

.toolbar .btn-transparent:hover {
    background-color: rgba(255, 255, 255, .12);
}

.toolbar .btn-transparent:hover:before {
    content: '';
    background-color: #1f1f1f;
    border-radius: 50%;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    position: absolute;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out, transform 0.15s cubic-bezier(0.4,0,1,1);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out, transform 0.15s cubic-bezier(0.4,0,1,1);
}

.toolbar .btn-transparent.minimized {
    transform: rotate(180deg);
}

.upload-list-container {
    max-height: 240px;
    overflow: auto;
}

.upload-list-container::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
    box-shadow: none;
    height: thin;
    width: thin;
    background-clip: padding-box;
}

.upload-list-container::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #dadce0;
    border-radius: 100px;
    border: none;
    height: thin;
    padding: 100px 0 0;
    width: thin;

    min-height: 28px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
}

.upload-list-container::-webkit-scrollbar-corner {
    background: transparent;
}

.status-icon div {
    width: 24px;
    height: 24px;
}

.status-icon, .loader-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.status-icon svg {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
}

.status-icon svg.close-icon,
.status-icon svg.success-icon,
.status-icon svg.failed-icon {
    width: 24px;
    height: 24px;
    opacity: 0;
}

.status-icon svg.loader-icon {
    stroke-dasharray: 44;
    stroke-dashoffset: 42;
    transform: translate(-50%, -50%) rotate(-90deg);

    animation: upload-loading 1s linear 3 forwards;
}

.file-details {
    position: relative;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;

    color: #1f1f1f;
    padding-left: calc(16px + 1rem);
    flex: 0 1 auto;
    min-width: 25px;
}

.file-details .file-icon {
    opacity: 0.38;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.upload-status-header {
    background-color: #e9eef6;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
}

.upload-status-header > div {
    border-bottom: 1px solid transparent
}

.upload-status-header > div > a {
    color: #6c757d;
}

.upload-status-header .active {
    border-bottom-color: #377dff;
}

.upload-status-header .active a {
    color: #377dff;
}

.upload-status {
    overflow: hidden;
    /* padding-top: 15px; */
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -webkit-box-flex: 1;
    flex: 1 0 auto;
    margin-left: 18px;
    margin-right: 18px;
    max-width: 194px;
}

.upload-success .status-icon svg.loader-icon {
    animation: upload-loaded .5s linear forwards, upload-status-hide .2s .5s forwards;
}

.upload-success .file-details .file-icon {
    opacity: 1;
}

.upload-failed .status-icon svg.loader-icon {
    opacity: 0;
}

.upload-success .status-icon svg.success-icon {
    animation: upload-status-show .35s .6s forwards;
}

.upload-failed .status-icon svg.failed-icon {
    animation: upload-status-show .35s forwards;
}

.p-img.rounded-1 button.p-image-preview-indicator {
    border-radius: var(--bs-border-radius-sm) !important;
}

.object-fit-cover {
    object-fit: cover;
}

.upload-failed-table .p-datatable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead > tr > th:first-child {
    border-left: 1px solid #e9ecef !important;
}

.upload-failed-table .p-datatable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead > tr > th:last-child {
    border-right: 1px solid #e9ecef !important;
}

.min-w-175px {
    min-width: 175px;
}

.wrap-text {
    word-break: break-word;
    white-space: pre-line;
}

.p-dialog.bordered-top-footer .p-dialog-footer {
    border-top: 0.0625rem solid rgba(231, 234, 243, 0.7)!important;
    padding-top: 1rem !important;
}

.default-col-padding {
    padding: 2px 5px 4px 5px !important;
}

.timesheet-logs-container {
    /* min-height: calc(90svh - (18.3875rem + 5px + (0.8125rem * 1.5) + (0.65625rem * 1.5) + (0.875rem * 1.5) + (0.875rem * 1.5) + (0.8125rem * 1.5))); */
    max-height: calc(90svh - (25.371875rem + 5px + (0.8125rem * 1.5) + (0.8125rem * 1.5) + (0.8125rem * 1.5) + (0.65625rem * 1.5) + (0.875rem * 1.5) + (0.875rem * 1.5) + (0.8125rem * 1.5)));
    overflow: auto;
}

.timesheet-logs-item {
    border: 1px solid #ced4da;
}

.timesheet-logs-item:hover {
    border-color:  rgb(55 125 255 / 30%);
}

.timesheet-logs-item.selected {
    border-color:  #377dff;
    background-color: rgb(55 125 255 / 5%);
}

/* .task-form-modal .step-view {
    max-height: calc(90vh - (12.5rem + (0.875em * 1.5))) !important;
} */


.details-viewer-container .viewer-card {
    background: #FFF;
    color: #1E2022;
    border: rgba(231, 234, 243, 0.7);
}

.details-viewer-container .viewer-head {
    border-bottom: 1px solid rgba(231, 234, 243, 0.7);
    padding: 0.85rem 1rem;
}

.details-viewer-container .viewer-title { 
    font-weight: 600; 
}

.details-viewer-container .section {
    padding: 1rem;
}

.details-viewer-container .col-wrap {
    background: #ffffff;
    border-radius: 0.5rem;
    height: 100%;
}

.details-viewer-container .col-wrap-selected {
    background: #007bff14;
}

.details-viewer-container .label-dot {
    color: #9aa5b1;
    font-size: 0.85rem;
}

.details-viewer-container .amount-val {
    font-weight: 700;
    font-size: 2rem;
}

.details-viewer-container .pill-red {
    background: #ffe5e5;
    color: #a93226;
    border: 1px solid #e5cdcd; 
    border-radius: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
}

.details-viewer-container .pill-yellow {
    background: #fff8e1;
    color: #b8860b;
    border: 1px solid #b5974c66;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
}

.custom-confirm-dialog .pill-green,
.details-viewer-container .pill-green {
    background: #e6f9ef;
    color: #1e7e34;
    border: 1px solid #81c784;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
}

.details-viewer-container .pill-gray {
    background: #f2f2f2;
    color: #333333;
    border: 1px solid #bdbdbd;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
}

.details-viewer-container .label-muted {
    color: #9aa5b1;
    font-size: 0.78rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}

.details-viewer-container .label-muted small {
    color: #9aa5b1;
    font-weight: 400;
    text-transform: none;
}

.details-viewer-container .blue-title {
    color: #8db3ff;
}

.details-viewer-container .form-dark.form-control,
.details-viewer-container .form-dark.form-select {
    background: #161a1d;
    color: #e6e6e6;
    border: 1px solid #41474d;
}

.details-viewer-container .form-dark.form-control:focus,
.details-viewer-container .form-dark.form-select:focus {
    background: #161a1d;
    color: #fff;
    border-color: #3e63ff;
    box-shadow: 0 0 0 0.2rem rgba(62, 99, 255, 0.15);
}

.details-viewer-container .viewer-card .form-check .form-check-input {
    margin-left: 0px!important;
}
.details-viewer-container .apply-radio .form-check-input {
    transform: scale(2.0);
    border: 1px solid #d3d3d3;
}

.details-viewer-container .apply-radio .form-check-input:checked {
    background-color: #3e63ff;
    border-color: #3e63ff;
}

.details-viewer-container .col-divider {
    border-right: 1px solid rgba(231, 234, 243, 0.7);
}

.details-viewer-container .footer-note {
    color: #9aa5b1;
    font-size: 0.82rem;
}

.details-viewer-container .footer-right {
    color: #78e3a9;
    font-size: 0.9rem;
    font-weight: 600;
}

.details-viewer-container .footer-chip {
    background: #e9f1ff;
    color: #1a3560;
    border: 1px solid #b6c7e7;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.details-viewer-container .card.details-viewer {
    border-radius: 0 !important;
}

.details-viewer-container {
    height: 100%;
    width: 100%;
    max-height: 900px;
    overflow: auto !important
}

.details-viewer-container .circle-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  display: inline-block;
}

.details-viewer-container .circle-indicator.active {
  background: #3e63ff;
}

.details-viewer-container .recompute-note,
.sync-attendance.details-note,
.warning-note {
  font-size: 0.85rem;
  color:#7F6000 !important;
  font-style: italic;
}

.details-viewer-container .recompute-note .highlight,
.sync-attendance.details-note .highlight,
.warning-note .highlight {
    color:#73580D  !important;
    font-weight:600;
}

.card .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card .section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: #4A90E2;
    border-radius: 2px;
}

.card .badge-highlight {
    font-size: 11px;
    color: #4A90E2;
    font-weight: 400;
    background: rgba(74, 144, 226, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.switch-container {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3px;
    transition: all 0.2s ease;
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(231, 234, 243, 0.7);
    background: #ffffff;
}

.switch-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.switch-label {
    font-weight: 500;
    color: #495057;
    font-size: 14px;
}

.switch-description {
    font-size: 12px;
    color: #677788;
}

.switch-example {
    font-size: 12px;
    color: #4A90E2;
    margin-top: 4px;
    font-style: italic;
    line-height: 1.3;
}

.switch-example strong {
    color: #495057;
    font-weight: 600;
}

.card .sub-card {
    margin-top: 20px;
    padding: 16px;
    background: #25282a;
    border-radius: 6px;
    border: 1px solid rgba(231, 234, 243, 0.7);
    border-left: 4px solid #4A90E2;
    transition: all 0.3s ease;
    background: #ffffff;
}

.card .sub-card.disabled {
    opacity: 0.5;
    pointer-events: none;
    background: #2f2f2f00;
    border-left-color: #555;
}

.card.card-body.light-blue  {
    background: #eff6ff;
}

.nav-icon.fa.fa-warning.warning-icon {
    color: #fd8200;
}

.custom-confirm-dialog {
    max-height: 500px;
    overflow: auto;
}

.custom-confirm-dialog .custom-confirm-dialog-text {
    color: #495057;
}

.custom-confirm-dialog .custom-confirm-dialog-text.text-warning,
.custom-confirm-dialog .custom-confirm-dialog-text.text-light-blue {
    color: #6571ff !important;
}

.custom-confirm-dialog .list {
    list-style-type: disc;
    list-style-position: inside;
}

.custom-confirm-dialog .card-body > .expanded {
    border: 0 solid #ededed;
    border-top-width: 1px;
}

.custom-confirm-dialog .card-body > .expanded > .card.card-body {
    border: 0px;
    background-color: #f3f4f6bf;
}

.break-summary {
    background: linear-gradient(135deg, #e8e8e8c7 0%, #fcfcfc 100%);
    border: 1px solid #e7e8e8;
    border-radius: 8px;
    padding: 16px;
}

.break-summary .summary-title {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    margin-bottom: 8px;
}

.break-summary .summary-text {
    color: #677788;
    font-size: 13px;
    line-height: 1.5;
}

.p-inputnumber.p-component.no-border {
    border: none;
}

.custom-input {
    border: 1px solid rgba(231, 234, 243, 0.7);
    background: #ffffff;
}

.custom-input .p-inputtext:enabled:focus {
    box-shadow: none !important;
}

.custom-input:hover,
.custom-input:has(> .form-group > .p-inputnumber.p-component.no-border.p-inputwrapper-focus) {
    border:1px solid rgba(140, 152, 164, .25) !important;
}

.btn-lg > .p-button-icon {
    font-size: 1.5rem;
}

.timesheet-logs-reason {
    font-size: 10px;
    text-transform: none;
}

.device-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.device-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #ced4da;
}

.device-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.device-stat-label {
    color: #000000;
}

.device-stat-value {
    font-weight: 600;
	color: #000000;
}

.device-stat-value.online {
    color: #2fb66b;
}

.device-stat-value.offline {
    color: #d75252;
}

.devices-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
	max-height: 150px;
	overflow-y: auto;
}

.device-info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ced4da;
}

.device-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.device-name {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.device-serial {
    font-size: 12px;
    color: #000000;
}

.device-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(35, 165, 90, 0.1);
    border-radius: 4px;
    font-size: 12px;
    color: #23a55a;
    font-weight: 500;
}

.device-status-badge.offline {
    background: rgba(242, 63, 67, 0.1);
    color: #f23f43;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* BEGIN MEDIA */
@media( min-width:995px) and (orientation: landscape) {
    .fc .fc-toolbar.fc-header-toolbar{
        margin-bottom: .5em;
    }

    .calendar-events .fc .fc-toolbar-title, .future-events-container h2 {
        font-size: 1em !important;
    }

    .calendar-events .fc.fc-theme-standard .fc-toolbar .fc-button {
        font-size: .7em !important;
    }

    .slide-button-container{
        font-size: 2em !important;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .events-container .p-carousel .p-carousel-indicators {
        top:47% !important;
        right: -30px !important;
    }

    .screen-saver .screen-saver-title{
        font-size: 65px !important;
    }
}

@media( min-width:995px) and (orientation: portrait) {
    .dropdown-language{
        top: 620px !important;
    }

    .p-button.p-button-icon-only {
        width: 4.357rem !important;
        height: 4.357rem;
    }

    .p-button.p-button-icon-only .p-button-icon {
        font-size: 2rem;
    }

    .p-toast-bottom-center.time-log-toast {
        width: 35rem !important;
    }

    .time-log-toast .btn-custom-color {
        width: 45%;
    }

    .attendance-card.mini.first-index {
        flex: 0 0 98.666666%;
        max-width: calc((100% / 1) - 17px);
    } 

    .attendance-card.mini.first-index .employee-image img {
        display: block;
        width: 200px;
        max-width: 200px;
        min-width: 83px;
        border-width: 5px;
        margin: 0 auto 15px;
        box-shadow: 0 3px 3px rgb(204 204 204 / 50%);
        min-height: 83px;
        max-height: 200px;
    }

    .attendance-card.mini.first-index .employee-details > h4, 
    .profile-modal-details h5{
        font-size: 36px;
        overflow: unset;
        text-overflow: unset;
    }

    .attendance-card.mini.first-index .attendance-details {
        font-size: 24px;
    }

    .attendance-card.mini.first-index .attendance-details i.fa {
        font-size: 32px !important;
    }
    
    .attendance-card.mini.first-index .legend {
        width: 30px;
        height: 30px;
        right: 48px;
    }

    .screen-saver .screen-saver-title {
        margin-top: 5vh;
    }

    .screen-saver.screen-saver-desktop {
        display: none;
    }

    .screen-saver.screen-saver-kiosk
    {
        display: flex;
        flex-direction: column;
    }

    .events-container .events-date, .events-container .events-details {
        flex: 0 0 100%;
    }

    .events-container .events-date {
        width: 40%;
    }

    .events-container .events-details {
        width: 60%;
    }

    .events-container .events-date::before {
        clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 50%) !important;
    }

    .events-container .events-details::before {
        clip-path: polygon(15% 0%, 100% 0%, 100% 50%, 100% 100%, 15% 100%, 0% 50%) !important;
    }

    .events-container .events-date::before, .events-container .events-details::before {
        width: 112% !important;
        height: 100% !important;
    }

    .events-list-container h5 {
        font-size: 1.35em;
    }

}

@media(min-width: 992px) {
    .p-overlaypanel.notif-menu:after {
        margin-left: -16px;
    }
    
    .p-overlaypanel.notif-menu:before {
        margin-left: -18px;
    }

    .p-overlaypanel.notif-menu {
        margin-left: 10px;
    }

    .col-expanded-rows-5 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20% !important;
    }
}

@media only screen and (max-width: 1199px) {
    .navbar-brand-logo {
        max-width: 9rem !important;
    }
}

@media(max-width:995px) and (orientation: portrait) {
    .dropdown-language{
        top: 537px !important;
    }

    .p-button.p-button-icon-only {
        width: 4.357rem !important;
        height: 4.357rem;
    }

    .attendance-card.mini.first-index {
        flex: 0 0 98.666666% !important;
        max-width: calc((100% / 1) - 17px) !important;
    } 

    .screen-saver.screen-saver-desktop {
        display: none;
    }

    .screen-saver.screen-saver-kiosk
    {
        display: flex;
        flex-direction: column;
    }

    .screen-saver .screen-saver-title {
        margin-top: 5vh;
    }

    .events-container .events-date, .events-container .events-details {
        flex: 0 0 100%;
    }

    .events-container .events-date {
        width: 40%;
    }

    .events-container .events-details {
        width: 60%;
    }

    .events-container .events-date::before {
        clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 50%);
    }

    .events-container .events-details::before {
        clip-path: polygon(15% 0%, 100% 0%, 100% 50%, 100% 100%, 15% 100%, 0% 50%);
    }

    .events-container .events-date::before, .events-container .events-details::before {
        width: 112%;
        height: 100%;
    }

    .events-list-container h5 {
        font-size: 1.35em;
    }
}

@media only screen and (max-width: 768px) {
    .profile-card .profile-cover+.mb-8 {
        margin-bottom: 2rem !important;
    }

    .profile-card .upload-label > .action:not(:first-child) {
        font-size: 14px;
    }

    .profile-card .upload-label {
        font-size: 0;
    }

    .profile-card .upload-container {
        /* width: 7.875rem!important;
        height: 7.875rem!important; */
        padding: 3rem 1.225rem!important;
    }

    .profile-card .camera-action-btn .p-button {
        display: flex!important;
        justify-content: center!important;
        align-items: center!important;
    }

    .profile-card .camera-action-btn .p-button:first-child {
        display: none!important;
    }

    .profile-card .camera-action-btn .p-button:nth-child(2) {
        margin-left: 0;
    }

    .profile-card .camera-action-btn .p-button .p-button-icon-left {
        margin-right: 0;
    }

    .profile-card .camera-action-btn .p-button-label {
        display: none;
    }

    .profile-card .attendance-link-cont .col-sm-9 .form-control {
        word-break: break-word;
        flex-direction: column;
    }

    .profile-card .attendance-link-cont .col-sm-9 .form-control > * {
        width: 100%;
    }

    .profile-card .attendance-link-cont .d-flex {
        margin-top: 1rem;
    }

    .profile-card .attendance-link-cont .d-flex > a {
        margin-left: 0 !important;
    }

    .profile-card .switch-input {
        justify-content: space-between;
    }

    .profile-card .form-check {
        padding-left: 0;
    }

    .profile-card .upload-label {
        font-size: 12px;
        line-height: 1;
    }

    .login-logo a {
        margin-top: calc(11vh);
    }

    .page-header {
        padding-bottom: 0 !important;
        border-bottom: unset !important;
    }

    .page-header .breadcrumb {
        display:none;
    }

    .page-header .row > .col-sm.mb-2.mb-sm-0 {
        padding-left: 0;
    }

    .col-sm-divider>:first-child {
        padding-top: .5rem !important;
    }

    .col-sm-divider>:last-child {
        padding-bottom: .5rem !important;
    }

    .col-sm-divider>:not(:first-child)::before {
        background-color:unset !important;
    }

    .summary-counts {
        justify-content: start;
        margin-left: 0px !important;
        margin-right: -20px !important;
        column-gap: .5rem;
        row-gap: .2rem
    }

    .summary-item {
        flex: 0 0 45%;
        border: 1px solid rgba(231, 234, 243, .7);
        border-radius: 15px;
        padding: .5rem !important;
    }

    .dashboard-summary-item {
        flex: 0 0 47%;
        border: 1px solid rgba(231, 234, 243, .7);
        border-radius: 15px;
        padding: .5rem !important;
    }

    .dashboard-chart-header {
        flex-direction: column;
    }

    .dashboard-chart-header span.fs-2 {
        margin-bottom: 1rem;
    }

    .mobile-summary .summary-counts {
        row-gap: .6rem
    }

    .dashboard-summary-item span.fs-6 {
        font-size: 0.7125rem!important;
    }

    .custom-col-chart {
        width: 100% !important;
    }

    .dashboard-log-event {
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-log-event div:last-child {
        order: 1;
        width: 100%;
    }

    .dashboard-log-event div.custom-col-log:first-child {
        order: 2;
    }

    .dashboard-log-event .custom-col-log, .dashboard-departments {
        width: 100% !important;
    }

    .dashboard-departments {
        margin-left: 0 !important;
        margin-top: 1.5rem;
    }

    .dashboard-departments {
        max-height: unset !important;
    }

    .dashboard-departments .card-body .d-flex {
        justify-content: space-between;
    }

    .on-toggle, .mobile-summary {
        display: block;
    }

    .non-toggle, .desktop-summary {
        display: none !important;
    }

    .table-btn .p-button > .p-button-label {
        display: none;
    }

    .table-btn .p-button {
        width: 50px;
    }

    .table-btn .p-button .p-button-icon-left {
        margin-right:0 !important;
        padding-right: 0 !important;
    }

    .table-btn.p-fileupload-choose.p-button {
        width: 50px !important;
    }

    .table-btn .project-btn-create {
        width: 50px !important;
    }

    .table-btn .p-button:nth-child(3) {
        margin-left: auto;
    }

    .table-btn .p-button:last-child {
        width:70px;
    }

    .table-btn .search-filter-btn {
        height: 42px;
    }

    .filter-and-search {
        margin-right: 1.3rem;
    }

    .navbar-brand-logo {
        max-width: 9rem !important;
    }

    .footer > .row {
        text-align: center;
    }

    .p-dialog .wrapper {
        display: block !important;
    }

    .p-dialog .wrapper .w-stepper__item:not(.active) {
        display: flex !important;
    }

    .p-dialog .w_stepper__title {
        display: none;
    }

    .p-dialog .w-stepper__item:not(:first-child)::before {
        display: block;
    }

    .p-dialog .step-icon {
        width: 1.3rem;
        height: 1.3rem;
        font-size: 0;
    }

    .p-dialog .wz-content .col-4 ,
    .p-dialog .wz-content .col-auto,
    .p-dialog .wz-content .col-6,
    .p-dialog .wz-content .col-3 {
        width: 100%;
    }

    .p-dialog .wz-content .radio-group {
        width: 50%;
    }

    .status-filter.active, .status-filter:hover {
        box-shadow: unset !important;
        border-radius:unset !important;
        border:unset
    }

    .profile-cover-img-wrapper {
        top: -38px !important;
        right: -288px !important;
        left: -11px !important;
    }

    .profile-cover-avatar {
        margin: 0 auto 0.5rem auto !important;
    }

    .camera-action-btn {
        bottom: -20px !important;
        right: 7.5rem !important;
    }

    .camera-action-btn .p-button {
        padding: .6rem !important;
    }

    .camera-action-btn .p-button > .p-button-label {
        display: none;
    }
    .camera-action-btn .p-button > .p-button-icon {
        margin-right: 0 !important;
    }

    .company_settings_form .camera-action-btn {
        right: 0 !important;
        bottom: 0 !important;
    }

    .loader-container {
        border-radius: 50%;
    }

    .p-dialog .wz-content .employee_schedule {
        box-shadow: unset;
        border: unset;
    }

    .employee-schedule-modal .col-4 {
        width: 100%;
    }

    .employee-schedule-modal .p-dialog-content {
        overflow-y: auto;
        max-height: 500px;
    }

    .schedule-checkbox {
        padding: .5rem !important;
    }

    .calendar-legends {
        flex-wrap: wrap;
        column-gap: unset !important;
        justify-content: center;
        align-items: center;
    }

    .fc-h-event .fc-event-title,
    .fc-event-main img {
        display: none;
    }

    .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event {
        height: 10px;
        border-radius: 35px;
    }

    .fc-popover-body .fc-h-event .fc-event-title,
    .fc-popover-body .fc-event-main img {
        display: block;
    }

    .fc-popover.fc-more-popover .fc-popover-body > .fc-daygrid-event-harness > a.fc-event.fc-daygrid-block-event {
        height: 30px !important;
        border-radius: 35px !important;
    }

    .attendance-summary-table-header{
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .attendance-summary-table-header div:first-child{
        order: 2 !important;
    }

    .attendance-summary-table-header div:last-child{
        order: 1 !important;
        margin-top: .5rem;
    }

    .attendance-summary-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .attendance-summary-table tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .attendance-summary-table tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .attendance-summary-table td div {
        display: flex;
        flex-direction: column;
        text-align: left; /* Align header to the left */
        width: 100%; /* Half width for header */
    }


    .attendance-summary.card-body-height{
        height: auto;
    }

    .attendance-summary-table-cols{
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
    }

    .p-dropdown > input.p-dropdown-label,
    .form-control{
        font-size: 16px !important;
    }

    .date-desktop{
        display: none;
    }

    a.hs-nav-scroller-arrow-link.view{
        display: inline;
    }

    .date-mobile{
        display: inline-flex;
    }

    button.p-button.employee-btn-mobile .p-button-label{
        display: none !important;
    }

    button.p-button.employee-btn-mobile .p-button-icon-left{
        margin-right: 0;
    }

    .employee-dashboard-attendance{
        flex-direction: column !important;
    }

    .comment-img{
        max-width: 15.6rem;
    }

    .comment-text .drive-link{
        top: 121px;
        left: 85px;
        width: 29%;
    }

    .p-button.p-button-icon-only {
        width: 2.357rem !important;
        height: 2.357rem; 
    }

    .p-button.btn-export.p-button-icon-only{
        width: 9.357rem !important;
    }
    
    .desktop-task-table{
        display: none;
    }

    .mobile-task-table{
        display:revert;
    }

    .multiline-text {
        width: 220px;
        display: inline-block;
        word-wrap: break-word;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    .remarks-text {
        font-size: 8px;             
        white-space: normal;      
        overflow-wrap: break-word;
    }

    .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main {
        display: none;
    }

    .p-datatable.p-datatable-scrollable.employee-schedule-list {
        max-height: calc(90vh - 4.5rem - 430px);
        max-height: calc(90svh - 4.5rem - 430px);
    }

    .verify-employee-img-wrapper{
        top:0 !important;
        right: 0 !important;
        left: 0 !important;
    }

    .verify-employee-content .profile-cover-avatar{
        margin: -5.3rem auto .5rem auto !important;
    }

    .card-body.verify-employee-page{
        height: calc(90vh - (6rem + 30px)) !important;
        height: calc(90svh - (6rem + 30px)) !important;
        overflow-y: auto;
    } 

    .verify-employee-img{
        max-height: 116px !important;
    }

    .verify-employee-code{
        display: flex;
        flex-direction: column;
    }

    .form-control {
        padding: 0.3125rem 1rem !important;
    }
    
    .input-group.input-group-merge.input-group-flush .form-control {
        padding: 0.3125rem 1rem 0.3125rem 1.75rem !important;
    }

    .uac-main-content{
        flex-direction:column;
    }

    .task-form-modal .step-view {
        max-height: calc(90vh - (12rem + (0.875em * 1.5))) !important;
        max-height: calc(90svh - (12rem + (0.875em * 1.5))) !important;
    }
}

@media only screen and (max-width: 991px) {
    .profile-card .profile-cover+.mb-8 {
        margin-bottom: 2rem !important;
    }

    .profile-card .upload-label > .action:not(:first-child) {
        font-size: 14px;
    }

    .profile-card .upload-label {
        font-size: 0;
    }

    .profile-card .upload-container {
        /* width: 7.875rem!important;
        height: 7.875rem!important; */
        padding: 3rem 1.225rem!important;
    }

    .profile-card .camera-action-btn .p-button {
        display: flex!important;
        justify-content: center!important;
        align-items: center!important;
    }

    .profile-card .camera-action-btn .p-button:first-child {
        display: none!important;
    }

    .profile-card .camera-action-btn .p-button:nth-child(2) {
        margin-left: 0;
    }

    .profile-card .camera-action-btn .p-button .p-button-icon-left {
        margin-right: 0;
    }

    .profile-card .camera-action-btn .p-button-label {
        display: none;
    }

    .profile-card .attendance-link-cont .col-sm-9 .form-control {
        word-break: break-word;
        flex-direction: column;
    }

    .profile-card .attendance-link-cont .col-sm-9 .form-control > * {
        width: 100%;
    }

    .profile-card .attendance-link-cont .d-flex {
        margin-top: 1rem;
    }

    .profile-card .attendance-link-cont .d-flex > a {
        margin-left: 0 !important;
    }

    .profile-card .switch-input {
        justify-content: space-between;
    }

    .profile-card .form-check {
        padding-left: 0;
    }

    .profile-card .upload-label {
        font-size: 12px;
        line-height: 1;
    }

    .login-logo a{
        margin-top: calc(11vh);
    }

    .page-header{
        padding-bottom: 0 !important;
        border-bottom: unset !important;
    }

    .page-header .breadcrumb{
        display:none;
    }

    .page-header .row > .col-sm.mb-2.mb-sm-0{
        padding-left: 0;
    }

    .col-sm-divider>:first-child
    {
        padding-top: .5rem !important;
    }

    .col-sm-divider>:last-child{
        padding-bottom: .5rem !important;
    }

    .col-sm-divider>:not(:first-child)::before{
        background-color:unset !important;
    }

    .summary-counts{
        justify-content: start;
        margin-left: 0px !important;
        margin-right: -20px !important;
        column-gap: .5rem;
        row-gap: .2rem
    }

    .summary-item{
        flex: 0 0 45%;
        border: 1px solid rgba(231, 234, 243, .7);
        border-radius: 15px;
        padding: .5rem !important;
    }

    .dashboard-summary-item{
        flex: 0 0 47%;
        border: 1px solid rgba(231, 234, 243, .7);
        border-radius: 15px;
        padding: .5rem !important;
    }

    .dashboard-chart-header{
        flex-direction: column;
    }

    .dashboard-chart-header span.fs-2{
        margin-bottom: 1rem;
    }

    .mobile-summary .summary-counts{
        row-gap: .6rem
    }

    .dashboard-summary-item span.fs-6 {
        font-size: 0.7125rem!important;
    }

    .custom-col-chart{
        width: 100% !important;
    }

    .dashboard-log-event{
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-log-event div:last-child{
        order: 1;
        width: 100%;
    }

    .dashboard-log-event div.custom-col-log:first-child{
        order: 2;
    }

    .dashboard-log-event .custom-col-log, .dashboard-departments{
        width: 100% !important;
    }

    .dashboard-departments{
        margin-left: 0 !important;
        margin-top: 1.5rem;
    }

    .dashboard-departments{
        max-height: unset !important;
    }

    .dashboard-departments .card-body .d-flex{
        justify-content: space-between;
    }

    .on-toggle, .mobile-summary{
        display: block;
    }

    .non-toggle, .desktop-summary{
        display: none !important;
    }

    .table-btn .p-button > .p-button-label{
        display: none;
    }

    .table-btn .p-button {
        width: 50px;
    }

    .table-btn .p-button .p-button-icon-left{
        margin-right:0 !important;
        padding-right: 0 !important;
    }

    .table-btn.p-fileupload-choose.p-button{
        width: 50px !important;
    }

    .table-btn .project-btn-create{
        width: 50px !important;
    }

    .table-btn .p-button:nth-child(3){
        margin-left: auto;
    }

    .table-btn .p-button:last-child{
        width:70px;
    }

    .table-btn .search-filter-btn{
        height: 42px;
    }

    .filter-and-search{
        margin-right: 1.3rem;
    }

    .navbar-brand-logo{
        max-width: 9rem !important;
    }

    .footer > .row {
        text-align: center;
    }

    .p-dialog .wrapper{
        display: block !important;
    }

    .p-dialog .wrapper .w-stepper__item:not(.active){
        display: flex !important;
    }

    .p-dialog .w_stepper__title{
        display: none;
    }

    .p-dialog .w-stepper__item:not(:first-child)::before{
        display: block;
    }

    .p-dialog .step-icon{
        width: 1.3rem;
        height: 1.3rem;
        font-size: 0;
    }

    .p-dialog .wz-content .col-4 ,
    .p-dialog .wz-content .col-auto,
    .p-dialog .wz-content .col-6,
    .p-dialog .wz-content .col-3  {
        width: 100%;
    }

    .p-dialog .wz-content .radio-group{
        width: 50%;
    }

    .status-filter.active, .status-filter:hover{
        box-shadow: unset !important;
        border-radius:unset !important;
        border:unset
    }

    .profile-cover-img-wrapper {
        top: -38px !important;
        right: -288px !important;
        left: -11px !important;
    }

    .profile-cover-avatar {
        margin: 0 auto 0.5rem auto !important;
    }

    .camera-action-btn{
        bottom: -20px !important;
        right: 7.5rem !important;
    }

    .profile-page .camera-action-btn {
        bottom: -5px !important;
        right: unset !important;
    }

    .camera-action-btn .p-button {
        padding: .6rem !important;
    }

    .camera-action-btn .p-button > .p-button-label{
        display: none;
    }
    .camera-action-btn .p-button > .p-button-icon{
        margin-right: 0 !important;
    }

    .company_settings_form .camera-action-btn{
        right: 0 !important;
        bottom: 0 !important;
    }

    .loader-container{
        border-radius: 50%;
    }

    .p-dialog .wz-content .employee_schedule{
        box-shadow: unset;
        border: unset;
    }

    .employee-schedule-modal .col-4{
        width: 100%;
    }

    .employee-schedule-modal .p-dialog-content{
        overflow-y: auto;
        max-height: 500px;
    }

    .schedule-checkbox{
        padding: .5rem !important;
    }

    .calendar-legends {
        flex-wrap: wrap;
        column-gap: unset !important;
        justify-content: center;
        align-items: center;
    }

    .fc-h-event .fc-event-title,
    .fc-event-main img{
        display: none;
    }

    .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event{
        height: 10px;
        border-radius: 35px;
    }

    .fc-popover-body .fc-h-event .fc-event-title ,
    .fc-popover-body .fc-event-main img{
        display: block;
    }

    .fc-popover.fc-more-popover .fc-popover-body > .fc-daygrid-event-harness > a.fc-event.fc-daygrid-block-event {
        height: 30px !important;
        border-radius: 35px !important;
    }

    .attendance-summary-table-header{
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .attendance-summary-table-header div:first-child{
        order: 2 !important;
    }

    .attendance-summary-table-header div:last-child{
        order: 1 !important;
        margin-top: .5rem;
    }

    .attendance-summary-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .attendance-summary-table tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .attendance-summary-table tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .attendance-summary-table td div {
        display: flex;
        flex-direction: column;
        text-align: left; /* Align header to the left */
        width: 100%; /* Half width for header */
    }


    .attendance-summary.card-body-height{
        height: auto;
    }

    .attendance-summary-table-cols{
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
    }

    .p-dropdown > input.p-dropdown-label,
    .form-control{
        font-size: 16px !important;
    }

    .date-desktop{
        display: none;
    }

    a.hs-nav-scroller-arrow-link.view{
        display: inline;
    }

    .date-mobile{
        display: inline-flex;
    }

    button.p-button.employee-btn-mobile .p-button-label{
        display: none !important;
    }

    button.p-button.employee-btn-mobile .p-button-icon-left{
        margin-right: 0;
    }

    .employee-dashboard-attendance{
        flex-direction: column !important;
    }

    .comment-img{
        max-width: 15.6rem;
    }

    .comment-text .drive-link{
        top: 121px;
        left: 85px;
        width: 29%;
    }

    .p-button.p-button-icon-only {
        width: 2.357rem !important;
        height: 2.357rem; 
    }

    .p-button.btn-export.p-button-icon-only{
        width: 9.357rem !important;
    }
    
    .desktop-task-table{
        display: none;
    }

    .mobile-task-table{
        display:revert;
    }

    .multiline-text {
        width: 220px;
        display: inline-block;
        word-wrap: break-word;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .remarks-text {
        font-size: 8px;             
        white-space: normal;      
        overflow-wrap: break-word;
    }

    .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main{
        display: none;
    }

    .p-datatable.p-datatable-scrollable.employee-schedule-list{
        max-height: calc(90vh - 4.5rem - 430px);
        max-height: calc(90svh - 4.5rem - 430px);
    }

    .verify-employee-img-wrapper{
        top:0 !important;
        right: 0 !important;
        left: 0 !important;
    }

    .verify-employee-content .profile-cover-avatar{
        margin: -5.3rem auto .5rem auto !important;
    }

    .verify-employee-img{
        max-height: 116px !important;
    }

    .verify-employee-code{
        display: flex;
        flex-direction: column;

    }

    .form-control {
        padding: 0.3125rem 1rem !important;
    }
}

@media only screen and (max-width: 991px) and (orientation: landscape) {
    .employee-dashboard-toast {
      display:none;
    }

    .p-dialog .wz-content{
        margin-top: 0;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    .employee-dashboard-toast {
        display:none;
    }

    .p-dialog .wz-content{
        margin-top: 0;
    }
}

@media(max-width: 991px) and (min-width: 576px) {
    .summary-item.col-sm-2 {
        width: calc(19% - 0.5rem);
    }

    .summary-item.col-sm-2 .status-filter {
        padding: 0.5rem 0.225rem;
    }
}

@media(max-width: 767px) {
    .navbar.navbar-container {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .default-list-group .list-group-item > .d-flex, .d-flex.mobile-block {
        display: block !important;
    }

    .d-flex.mobile-block > .flex-1 {
        margin-bottom: 0.5rem;
    }

    .d-flex.mobile-block > .flex-1:last-child {
        margin-bottom: 0;
    }
    
    .default-list-group .list-group-item > .d-flex > .flex-1 {
        max-width: 100%;
    }
    
    span.p-inputnumber.p-component {
        padding: 0 !important;
    }

    .sm-flex-column {
        flex-direction: column !important;
    }

    .sm-flex-column-reverse {
        flex-direction: column-reverse !important;
    }

    .uac-employee-content {
        min-width: 0;
        max-width: 100%;
    }

    header .navbar-brand-logo {
        font-size: 18px;
        min-width: 0;
        max-width: unset !important;
        display: flex;
        flex-direction: column;
    }

    header.navbar-expand-lg .navbar-nav {
        padding: 0
    }

    header .p-button.p-button-icon-only {
        width: 2rem !important;
    }

    header .navbar-icon-size {
        font-size: 18px !important;
    }

    .table-btn .p-button:last-child {
        width: auto;
    }

    .p-tabview .p-tabview-nav li .p-tabview-nav-link {
        padding: 0.525rem 0.7525rem!important;
        min-width: 0;
        font-size: 0.7725rem !important;
    }

    aside .navbar-vertical-aside .nav.nav-pills {
        padding-top: 0;
    }

    .particles {
        transform: translate(-50%, -50%) scale(.7);
    }

    .licensed-text {
        padding: 0.35rem 0.55rem;
        font-size: 0.5125rem;
    }
}
/* END MEDIA */


/* BEGIN KEYFRAMES */
@keyframes heartbeat {
    from {
        transform: scale(1);
        background-color: lightcyan;
    }
    to {
        transform: scale(.8);
    }
}

@keyframes blinkBorder {
    0% {
        border-color: #f44336;
    }
    25% {
        border-color: #ffba00;
    }
    50% {
        border-color: #f44336;
    }
    75% {
        border-color: #ffba00;
    }
    100% {
        border-color: #f44336;
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-size: 200% 200%;
        background-position: 0% 50%;
    }
    50% {
        background-size: 200% 200%;
        background-position: 100% 50%;
    }
}

@keyframes premiumRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes float {
    0%, 100% { opacity: 0; transform: translateY(0px) scale(0); }
    10% { opacity: 1; transform: translateY(-10px) scale(1); }
    90% { opacity: 1; transform: translateY(-10px) scale(1); }
}

@keyframes upload-loading {
  from { transform: translate(-50%, -50%) rotate(-90deg); }
  to { transform: translate(-50%, -50%) rotate(270deg); stroke-dashoffset: 44; }
}

@keyframes upload-loaded {
  from { stroke-dashoffset: 44; }
  to { stroke-dashoffset: 0 }
}

@keyframes upload-status-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes upload-status-hide {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* END KEYFRAMES */