body {
    background-color: #F7F7F8;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.loader-container {
    position: absolute;
    background-color: white;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    z-index: 9;
}

.loader {
    margin-top: 40vh;
    margin-left: 45vw;
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #8146D4;
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}


* {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

h1,
h2,
h3 {
    font-weight: 500;
}

p {
    font-weight: 400;
}

h4 span {
    font-size: unset;
}

.alert {
    margin-top: 1%;
    padding: 1% 1%;
    width: max-content;
}

.btn-primary {
    background-color: #8146D4 !important;
    border-color: #8146D4 !important;
    /* padding: 3px !important; */
}

.layout {
    display: flex;
    flex-direction: row;
}

.sidebar {
    width: 5%;
    height: 100vh;
    background-color: white;
    font-size: smaller;
    transition: 0.5s;
    position: sticky;
    top: 0px;
    overflow: scroll;
}

/* Hide scrollbar - Chrome/Safari */
.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar:hover {
    width: 15%;
    transition: 0.5s;
}

.sidebar .list-group {
    margin-top: 50%;
}

.sidebar:hover .list-group {
    margin-top: auto;
}

.sidebar span {
    display: none;
}

.sidebar:hover span {
    display: inline;
}

.sidebar .sublist {
    display: none;
}

.sidebar .deshboardsublist{
    display: none;
}

.sidebar:hover .sublist.hidden {
    display: none;
}

.sidebar:hover .sublist {
    padding-left: 0;
    display: block;
}
.sidebar:hover .deshboardsublist.hidden {
    display: none;
}

.sidebar:hover .deshboardsublist {
    padding-left: 0;
    display: block;
}

.sidebar:hover .down-icon,
.sidebar:hover .up-icon {
    margin-left: 5%;
}

.sidebar img {
    width: 100%;
    /* padding-bottom: 5px; */
    padding: 5PX 5px;
}

.sidebar:hover img {
    width: 85%;
    /* padding-bottom: 5px; */
    /* padding: 5px 5px; */
    margin-bottom: 0%;
    padding-bottom: 0%;
}


.sidebar .list-group-item {
    border: none !important;
    padding: 5% 0% 5% 5% !important;
}

.sidebar .sublist .list-group-item {
    border: none !important;
    padding: 2% 0% 2% 25% !important;
}
.sidebar .deshboardsublist .list-group-item {
    border: none !important;
    padding: 2% 0% 2% 25% !important;
}

.sidebar .list-group a {
    width: 100% !important;
    text-decoration: none !important;
}

.sidebar .list-group img {
    width: auto;
    padding-right: 10px;
    margin-left: 20%;
}

.sidebar:hover .list-group img {
    width: auto;
    padding-right: 10px;
    margin-left: auto;
}

.sidebar .list-group li {
    color: #98A2B3;
}


.list-group-item:hover .sidemenu-img-1,
.list-group-item.active .sidemenu-img-1 {
    content: url('../../images/img/calendar-lines-pink.ico');
}

.list-group-item:hover .sidemenu-img-2,
.list-group-item.active .sidemenu-img-2 {
    content: url('../../images/img/hr-group-pink.ico');
}

.list-group-item:hover .sidemenu-img-3,
.list-group-item.active .sidemenu-img-3 {
    content: url('../../images/img/department-pink.ico');
}

.list-group-item:hover .sidemenu-img-4,
.list-group-item.active .sidemenu-img-4 {
    content: url('../../images/img/time-fast-pink.ico');
}

.list-group-item:hover .sidemenu-img-5,
.list-group-item.active .sidemenu-img-5 {
    content: url('../../images/img/Vector-pink.ico');
}

.list-group-item:hover .sidemenu-img-6,
.list-group-item.active .sidemenu-img-6 {
    content: url('../../images/img/calendar-salary-pink.ico');
}

.list-group-item:hover .sidemenu-img-7,
.list-group-item.active .sidemenu-img-7 {
    content: url('../../images/img/career-pink.ico');
}

.list-group-item:hover .sidemenu-img-8,
.list-group-item.active .sidemenu-img-8 {
    content: url('../../images/img/interview-pink.ico');
}

.list-group-item:hover .sidemenu-img-9,
.list-group-item.active .sidemenu-img-9 {
    content: url('../../images/img/candi-pink.ico');
}

.list-group-item:hover .sidemenu-img-10,
.list-group-item.active .sidemenu-img-10 {
    content: url('../../images/img/corporate-pink.ico');
}

.list-group-item:hover .sidemenu-img-11,
.list-group-item.active .sidemenu-img-11 {
    content: url('../../images/img/setting-pink.png');
}


.sidebar .list-group-item.active,
.sidebar .list-group-item.active a,
.sidebar .list-group-item.active i {
    color: blueviolet !important;
    background-color: rgb(217, 198, 235);
}

.sidebar li:hover,
.sidebar li:hover a,
.sidebar li:hover i,
.sidebar li:hover svg {
    color: blueviolet;
    background-color: rgb(205, 183, 226);
}

.sidebar i:hover {
    color: blueviolet;
    background-color: rgb(205, 183, 226);
}

.sidebar i {
    color: #dfe2e7;
    padding-right: 10px;
}



.month-picker-previous,
.month-picker-title,
.month-picker-next {
    background-color: white !important;
}

.month-picker-year-table .month-picker-title .ui-button {
    font-size: 1em;
    padding: 0 !important;
    width: 100% !important;
    font-weight: 700;
}

.month-picker-title .ui-button span.ui-button-text {
    padding: 0% !important;
}

.month-picker-previous .ui-button-icon-only .ui-icon {
    margin-left: -3px !important;
}

.month-picker-next .ui-button-icon-only .ui-icon {
    margin-left: -13px !important;
}

.month-picker table {
    border-collapse: collapse !important;
    border-spacing: 2px 2px;
}

.ui-button-text-only.ui-state-active span.ui-button-text {
    color: white;
    background-color: blueviolet;
    border-radius: 5px;
}

.ui-button-text-only span.ui-button-text {
    color: black;
    background-color: white;
    border-radius: 5px;
}

.ui-button-text-only span.ui-button-text:hover {
    color: black;
    background-color: #EFE8F9;
    border-radius: 5px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border-radius: 7px;
}






.page-content {
    flex: 1;
    /* height: 100vh; */
    /* height: 100%; */
    background-color: #F7F7F8;
}

.navbar {
    background-color: white !important;
}

.nav-myprofile .dropdown-container {
    position: relative;
    font-size: smaller;
}

.nav-myprofile .dropdown-container span {
    padding-left: 0.75rem;
}

.nav-myprofile .dropdown-item {
    display: none;
    position: absolute;
    top: 105%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 1px 10px;
    min-width: max-content;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: start;
}

a.ui-button.ui-widget.ui-corner-all.ui-button-icon-only.ui-state-hover{
    background-color: none;
    background: none;
    border: none;
}

.nav-myprofile .dropdown-item:hover {
    background-color: #fff !important;
}

.nav-myprofile .dropdown-item ul {
    padding: 2% 5%;
}

.nav-myprofile .dropdown-item a {
    text-decoration: none;
    color: #000;
}

.nav-myprofile .dropdown-item a:hover {
    color: #8146d4;
}

.nav-myprofile .btn {
    cursor: pointer;
}

.circular--landscape {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
}

.circular--landscape img {
    width: auto;
    height: 100%;
    margin-left: -50px;
}

/* .action .form-control, .action .btn.btn-primary{
    font-size: smaller;
} */

.input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    color: #ccc;
    background-color: #F7F7F8;
}

.input-group-text {
    padding: 0 10px;
    background-color: #F7F7F8;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}

.input-group .form-control {
    border: none;
    outline: none;
    padding: 10px;
    flex: 1;
    background-color: #F7F7F8;
}

.main-search-box:focus {
    outline: none !important;
    box-shadow: none !important;
}

.nav-myprofile {
    /* display: -webkit-box;     */
    display: flex;
    width: 100%;
    justify-content: end;
    align-items: center;
    float: right;
}

.nav-myprofile i {
    padding-right: 15px;
    padding-left: 5px;
}

.nav-myprofile .dropdown button {
    border: none;
    background-color: transparent;
    color: black;
    margin-right: 0%;
}

.dropdown span {
    padding-left: 11px;
    font-size: small;
}

.dropdown .btn {
    padding-bottom: 0%;
    padding-top: 0%;
}

.nav-bar-icon {
    cursor: pointer;
}

.nav-bar-icon:hover {
    color: blueviolet !important;
}

.count-container .counts {
    width: 55%;
}

.count-container a {
    text-decoration: none !important;
    width: 32% !important;
}

.count-container .events {
    border-radius: 5px;
    background-color: white;
    width: 40%;
    /* font-size: smaller; */
}

.count-container .count-card-1 {
    background: linear-gradient(48deg, #32C7D4, #ACEDEF);
}

.count-container .count-card-2 {
    background: linear-gradient(48deg, #83B6F2, #BFDAFC);
}

.count-container .count-card-3 {
    background: linear-gradient(48deg, #C2ADEC, #E1D3FC);
}

.count-container .count-card-4 {
    background: linear-gradient(48deg, #F8C44A, #FEEABA);
}

.count-container .count-card-5 {
    background: linear-gradient(48deg, #FB8181, #FDBFBF);
}

.count-container .count-card-6 {
    background: linear-gradient(48deg, #67C86B, #D1F2D2);
}

.count-container .card-body {
    padding: 0;
}

.count-container .card-body .row {
    margin-top: 5px;
}

a {
    text-decoration: none;
    width: min-content !important;
    padding: 0 !important;
}

.dropdown-menu a {
    width: 100% !important;
    text-align: center;
}

.dropdown-menu a:hover {
    color: #8146D4;
    width: 100% !important;
    text-align: center;
}

.form-check-input:checked {
    background-color: #8146D4;
    border-color: #8146D4;
}

.count-container .count-card-title {
    font-size: 16px;
    font-weight: 500;
    width: 65%;
}

.count-container .count-card-icon {
    background-color: white;
    border-radius: 50%;
    width: 60px !important;
    height: 60px !important;
}

.count-container .card-body img {
    width: 100%;
    margin-top: 25%;
}

.count-container .count-card-cound {
    color: white;
    font-size: xx-large;
    font-weight: normal;
}

.events i,
.events a {
    color: blueviolet;
}

.events .event-data {
    border-bottom: 1px solid #cccccc;
    margin-top: 2%;
    padding-bottom: 2%;
}

.events .event-data b {
    font-weight: 600;
}

.event-data .event-date {
    text-align: end;
}

.event-data .event-date span {
    font-size: 12px;
}

.job-container {
    border-radius: 5px;
    background-color: white;
    height: 40vmax;
    /* font-size: smaller; */
}

.job-container i {
    color: blueviolet;
}

.att-job-container {
    border-radius: 5px;
    background-color: white;
    height: 21vmax;
}

.att-job-container i {
    color: blueviolet;
}

.birthday-container .table-container {
    max-height: 90%;
    overflow-y: auto;
}

.anniversary-container .table-container {
    max-height: 90%;
    overflow-y: auto;
}

.birthday-container table,
.anniversary-container table {
    width: 100%;
    border-collapse: collapse;
}

.birthday-container thead tr,
.anniversary-container thead tr {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1;
}


.job-container table,
.att-job-container table,
.birthday-container table,
.anniversary-container table,
.main-attendence-count-container-birthday-container table {
    width: 97%;
}

.job-container table tbody,
.att-job-container table tbody,
.birthday-container table tbody,
.anniversary-container table tbody,
.main-attendence-count-container-birthday-container table tbody {
    font-weight: 500;
    max-height: 200px;
    overflow-y: auto;
}

.job-container table thead,
.att-job-container table thead,
.birthday-container table thead,
.anniversary-container table thead,
.main-attendence-count-container-birthday-container table thead {
    font-weight: 300 !important;
}

.job-container .viewmore {
    text-align: center;
}

.att-job-container .viewmore {
    text-align: center;
}

.job-container .viewmore a {
    width: max-content !important;
    border: 1px solid #cccccc;
    padding: 0px 10px !important;
    border-radius: 20px;
    color: blueviolet;
    text-decoration: none !important;
}

.att-job-container .viewmore a {
    width: max-content !important;
    border: 1px solid #cccccc;
    padding: 0px 10px !important;
    border-radius: 20px;
    color: blueviolet;
}

.birthday-container {
    border-radius: 5px;
    width: 96% !important;
    background-color: white;
    height: 20vmax;
    /* font-size: smaller; */
}

.anniversary-container {
    border-radius: 5px;
    width: 96% !important;
    background-color: white;
    height: 20vmax;
    /* font-size: smaller; */
}

/* .att-job-container table,
.job-container table,
.birthday-container table,
.anniversary-container table {
    font-size: x-small;
} */

hr {
    margin: 0 !important;
}

.profile-container {
    width: 96%;
    background-color: white;
    border-radius: 5px;
    font-size: smaller;
}

.profile-container img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.profile-container .active {
    background-color: #0290081F;
    color: #029008;
    border-radius: 15px;
    padding: 3px 6px;
    width: max-content;
    margin-top: 5px;
    margin-left: 10px;
}

.profile-container .inactive {
    background-color: #f9434321;
    color: #F94343;
    border-radius: 15px;
    padding: 3px 6px;
    width: max-content;
    margin-top: 5px;
    margin-left: 10px;
}

.profile-container .rep {
    text-align: end;
}

.profile-container b {
    font-weight: 500;
    color: #8146D4;
}

.profile-container .nav-link {
    text-decoration: none !important;
    color: #443F3F;
}

.attendance-profile-container{
    max-width: 620px;
    padding: 5px;
    background: #F0E5FF;
    border-radius: 50px;
    margin: 6px;
}

.attendance-profile-container .nav-link{
    color: #8146D4 ;
    background-color: #F0E5FF;
}

.attendance-profile-container .nav-link.active{
    color: #FFF !important;
    background-color: #8146D4 !important;
    border-radius: 50px;
}

.profile-container .nav-link.active {
    text-decoration: none !important;
    color: #8146D4 !important;
    background-color: white !important;
    border-bottom: 2px solid #8146D4;
    border-radius: 0 !important;
    margin-top: 0px;
}

.profile-container .nav-link:hover {
    text-decoration: none !important;
    color: #8146D4 !important;
    background-color: white !important;
    border-bottom: 2px solid #8146D4;
    border-radius: 0 !important;
    margin-top: 0px;
}

.personalinfo {
    width: 40% !important;
    background-color: white;
    border-radius: 5px;
    font-size: smaller;
}

.contactinfo {
    width: 55% !important;
    background-color: white;
    border-radius: 5px;
    font-size: smaller;
}

.personalinfo th,
.contactinfo th,
.employeeinfo th,
.approvals b {
    font-weight: 500;
}

.employeeinfo {
    width: 48% !important;
    background-color: white;
    border-radius: 5px;
    font-size: smaller;
}

.approvals {
    width: 96%;
    height: 70vh;
    background-color: white;
    border-radius: 5px;
}

.attendence {
    width: 96%;
    height: 70vh;
    background-color: white;
    border-radius: 5px;
}

.attendence span {
    color: #8146D4;
    background-color: #F0E5FF;
    width: max-content;
    height: 100%;
    border-radius: 15px;
    /* margin: 15px 5px;  */
    padding: 5px 10px;
}

.attendence span b {
    font-weight: 500;
}

.attendence .action {
    position: relative;
    display: inline-flex;
}

.attendence .action i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform:
        translateY(-50%);
    color: #8146D4;
}

.attendence .col-lg-8 {
    text-align: end;
}

.attendence .form-control {
    width: max-content;
    height: max-content;
}

.attendence .btn-primary {
    width: max-content !important;
    height: fit-content !important;
}

.attendence table {
    font-weight: 400;
}

.attendence .file-download {
    text-decoration: none !important;
    color: #5408C2;
    background-color: #F9F5FF;
    border: 1px solid #5408C2;
    border-radius: 15px;
    padding: 2px 10px !important;
}

.files {
    font-size: smaller;
}

.files i {
    color: #925EDD;
}

.files .card {
    width: 30%;
}

.files .card b {
    font-weight: 500;
}

.attendence .time-log span {
    background-color: white;
    padding: 0;
    width: 100%;
}

.attendence .time-log col {
    text-align: center;
}

.time-log .log-days-1 {
    width: 4% !important;
    text-align: end;
}

.time-log .log-chart {
    width: 88% !important;
}

.time-log .log-days-2 {
    width: 8% !important;
}


.time-log .info-dots {
    width: 2%;
}

.time-log .lines {
    width: 96%;
}

.progress-stacked {
    position: relative;
    height: 25px !important;
    align-items: center !important;
    background-color: white !important;
}

.progress {
    position: relative;
    background-color: white !important;
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.dots-start {
    background-color: #AFD4AC;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: 56%;
}

.dots-auto {
    background-color: #D9D9D9;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: 56%;
}

.dots-end {
    background-color: #ED919B;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: 56%;
}

.progress-stacked .progress-bar {
    height: 2px;
    margin-top: 7px;
    background-color: #AFD4AC;
}

.progress-stacked .gap {
    height: 2px;
    margin-top: 7px;
    background-color: #D9D9D9;
}

.dot-start {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    left: 0;
    margin-left: 5px;
    background-color: #AFD4AC;
}

.dot-auto {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    right: 0;
    margin-right: -5px;
    background-color: #D9D9D9;
}

.dot-end {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    right: 0;
    margin-right: -5px;
    background-color: #ED919B;
}

.time-log span {
    color: #515151;
}

.time-log b {
    color: black;
}


.time-log tr:hover b {
    color: #8146D4;
}

.time-log tr:hover span {
    color: #925EDD;
    background-color: transparent;
}

.time-log tr:hover .progress-stacked,
.time-log tr:hover .progress {
    background-color: transparent !important;
}

.tooltip-inner {
    background-color: rgb(255, 255, 255) !important;
    color: black !important;
    border: 1px solid #98A2B3;
}


.dot-end-tooltip h5 {
    color: #FA8794 !important;
    margin-bottom: 1px;
}

.dots-end-tooltip h5 {
    color: #FA8794 !important;
    margin-bottom: 1px;
}

.dot-auto-tooltip h5 {
    color: #D9D9D9 !important;
    margin-bottom: 1px;
}

.dots-auto-tooltip h5 {
    color: #D9D9D9 !important;
    margin-bottom: 1px;
}

.dot-start-tooltip h5 {
    color: #AFD4AC !important;
    margin-bottom: 1px;
}

.dots-start-tooltip h5 {
    color: #AFD4AC !important;
    margin-bottom: 1px;
}

.employeeinfo .table-hover .green {
    color: #009906 !important;
}

.employeeinfo .table-hover .red {
    color: #FA3C3C !important;
}

.employeeinfo .table-hover .highlight th,
.employeeinfo .table-hover .highlight td {
    background-color: #F6F1FF !important;
}


.daterangepicker td.in-range {
    background-color: #f0e5ff !important;
    border-color: transparent;
    color: #000;
    border-radius: 0;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #8146d4 !important;
    border-color: transparent;
    color: #fff;
}

.daterangepicker .ranges li.active {
    background-color: #8146d4 !important;
    color: #fff;
}

.files .upload .file {
    border: 0.5px solid #8146D4;
    border-radius: 2px;
    width: 85%;
    padding-left: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    padding-right: 0%;
    display: flex;
    margin-bottom: 2px !important;
}

.files .upload .file .name {
    width: 80% !important;
    background-color: #C7BCD747;
    padding-left: 2%;
}

.files .upload .file a {
    width: 10% !important;
    text-align: center;
}

.files .upload .file .x {
    border-left: 0.5px solid #8146D4;
}

.career {
    width: 96%;
    font-size: smaller;
}

.career a {
    text-decoration: none !important;
}

.career .action {
    position: relative;
    display: inline-flex;
}

.career .action i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform:
        translateY(-50%);
    color: #8146D4;
}

.career .row .col a {
    background-color: #8146D4;
    color: white;
    padding: 5px 10px !important;
    border-radius: 2px;
    /* font-size: smaller; */
}

.career table {
    width: 99%;
}

.career table thead {
    font-weight: 300 !important;
}

.career table a {
    color: #8146D4;
    text-decoration: underline !important;
}


.applicant {
    width: 96%;
}

.applicant .action {
    position: relative;
    display: inline-flex;
}

.applicant .action i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform:
        translateY(-50%);
    color: #8146D4;
}

.applicant table p {
    color: #000000;
    text-decoration: underline !important;
}

.applicant table a {
    color: #8146D4;
    background-color: #925EDD47;
    border-radius: 19px;
    padding: 0% 10% !important;
    width: max-content !important;
}

.applicant table a:hover {
    color: #8146D4;
    background-color: #925EDD47;
    border-radius: 19px;
    padding: 0% 7%;
}

.applicant .col span {
    background-color: #F0E5FF;
    color: #8146D4;
    border-radius: 31px;
    padding: 0% 3%;
}

.applicant span strong {
    font-weight: 600;
}


.career .end-buttons {
    text-align: end;
}

.career .end-buttons span {
    color: #F94343;
}

.career .end-buttons .yta {
    background-color: white !important;
    color: #8146D4 !important;
    border: 1px solid #8146D4 !important;
    border-radius: 2px !important;
}

.career .cantabs {
    border: 1px solid #D9D9D9;
    border-radius: 30px;
    width: max-content;
    margin-left: 1%;
    display: flex;
    /* Use flexbox to distribute space */
    /* justify-content: ; */
    background-color: white;
}

.career .cantabs a {
    border: 1px solid #8146D4;
    border-radius: 46px;
    padding: 3px 12px !important;
    margin-left: inherit;
    margin-right: auto;
    width: max-content !important;
    color: #8146D4;
}

.career .cantabs a.active {
    border: 1px solid #8146D4;
    border-radius: 46px;
    padding: 3px 12px !important;
    margin-left: inherit;
    margin-right: auto;
    width: max-content !important;
    background-color: #8146D4;
    color: white;
}

.career .cantabs a.disabled {
    border: 1px solid #8146D4;
    border-radius: 46px;
    padding: 3px 12px !important;
    margin-left: inherit;
    margin-right: auto;
    width: max-content !important;
    background-color: #F0E5FF;
    color: #8146D4;
    pointer-events: none;
}

.career .cantabs a.active.disabled {
    border: 1px solid #8146D4;
    border-radius: 46px;
    padding: 3px 12px !important;
    margin-left: inherit;
    margin-right: auto;
    width: max-content !important;
    background-color: #8146D4;
    color: white;
    pointer-events: none;
}

.career .cantabs a:hover {
    border: 1px solid #8146D4;
    border-radius: 46px;
    padding: 3px 12px !important;
    margin-left: inherit;
    margin-right: auto;
    width: max-content !important;
    background-color: #8146D4;
    color: white;
}


/* DataTable */
.active>.page-link,
.page-link.active {
    z-index: 3 !important;
    color: white !important;
    background-color: #8146D4 !important;
    border-color: #8146D4 !important;
}

.page-link {
    color: #8146D4 !important;
}


/* shedule page */
.schedule .profile {
    background-color: white;
}

.schedule .profile a {
    text-decoration: none;
}

.schedule .profile a.disabled {
    text-decoration: none;
    pointer-events: none;
}

.schedule .profile a.disabled span.resume {
    color: white;
    background-color: #e8e8ea;
}

.schedule .profile h5 {
    color: #7F7F7F;
}

.schedule .profile span {
    background-color: #925EDD47;
    color: #8146D4;
    border-radius: 31px;
    padding: 1% 3%;
}

.schedule .profile span.resume {
    color: white;
    background-color: #8146D4;
}

.schedule .status {
    background-color: white;
}

.schedule .status .tabs {
    background-color: #E8E8EA;
    width: max-content;
    border-radius: 6px;
    padding: 0%;
}

.schedule .status .tabs .active {
    color: white;
    background-color: #98A2B3;
}

.schedule .status .sint i {
    color: #8146D4;
}

.schedule .status .nint i {
    color: #8146D4;
}

.schedule .status .submit {
    text-align: end;
    width: 97% !important;
}

.schedule .status .submit .smt {
    background-color: #8146D4;
    color: white;
    width: 20%;
    border-radius: 2px;
}

.schedule .status .sint .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: hidden;
    width: 25%;
    padding: 0;
}

.schedule .status .nint .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: hidden;
    width: 95%;
    padding: 0;
}

.schedule .status .sint .input-group input {
    box-shadow: none !important;
}

.schedule .status .nint textarea {
    width: 90%;
}

.form-check-input:checked {
    background-color: #8146D4 !important;
    border-color: #8146D4 !important;
}


/* Arrived page */
.arrived .profile {
    background-color: white;
}

.profile a {
    text-decoration: none !important;
}

.arrived .profile h5 {
    color: #7F7F7F;
}

.arrived .profile span {
    background-color: #925EDD47;
    color: #8146D4;
    border-radius: 31px;
    padding: 1% 3%;
}

.arrived .profile span.resume {
    color: white;
    background-color: #8146D4;
}

.arrived .profile a.disabled {
    pointer-events: none !important;
}

.arrived .profile a.disabled span.resume {
    color: white;
    background-color: #e8e8ea;
}

.arrived .actions {
    background-color: white;
}

.arrived .actions .act {
    width: 30%;
    margin-right: auto;
}

.arrived .actions .submit {
    text-align: end;
    width: 97% !important;
}

.arrived .actions .submit .smt {
    background-color: #8146D4;
    color: white;
    width: 20%;
    border-radius: 2px;
}

.arrived .actions .Reschedule .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: hidden;
    width: 95%;
    padding: 0;
}

.arrived .actions .Reschedule textarea {
    width: 90%;
}

.arrived .actions .Reschedule i {
    color: #8146D4;
}

.arrived .actions .nint .callback i {
    color: #8146D4;
}

.arrived .actions .nint textarea {
    width: 90%;
}

/* Interview Process page */
.details .profile {
    background-color: white;
}

.details .profile h5 {
    color: #7F7F7F;
}

.details .profile span {
    background-color: #925EDD47;
    color: #8146D4;
    border-radius: 31px;
    padding: 1% 3%;
}

.details .profile .resume {
    display: block;
}

.details .profile a.disabled {
    pointer-events: none;
}

.details .profile a.disabled span.resume {
    color: white;
    background-color: #e8e8ea;
}

.details .profile span.resume {
    color: white;
    background-color: #8146D4;
    width: max-content !important;
}

.details .info {
    background-color: white;
}

.details .info i {
    background-color: #8146D459;
    border-radius: 57px;
    color: #8146D4;
    padding: 6% 10%;
    cursor: pointer;
}

.details .info label {
    color: #696969;
    font-size: 14px;
}

.details .info p{
    color: #000;
    font-size: 16px;
}

.details .info .data {
    width: 33%;
}

.candidate_history .modal-title {
    margin-left: auto;
    color: #4B4B4B;
}

.candidate_history .modal-header {
    background-color: #925EDD14;
    text-align: center !important;
}

.candidate_history .modal-header .btn-close {
    color: #8146D4 !important;
    opacity: 1;
    border: 1px solid #8146D4;
    border-radius: 50%;
}

.candidate_history .modal-header .btn-close:hover {
    color: #8146D4 !important;
}

.candidate_history .modal-body {
    background-color: #F5F6F7;
}

.candidate_history .modal-body .card {
    background-color: white;
    border-radius: 2px;
    border: none;
}

.candidate_history .modal-body .card .card-body .line-end {
    background-color: #8146D4;
    width: 3px;
    height: 50px;
    margin-top: 15px;
    border: 1px solid #8146D4;
    position: relative;
}

.candidate_history .modal-body .card .card-body .line-end .ball {
    background-color: #8146D4;
    border: 1px solid #8146D4;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    margin-left: -7px;
    margin-top: -5px;
}

.candidate_history .modal-body .card .card-body .line-mid {
    background-color: #8146D4;
    width: 3px;
    height: 65px;
    border: 1px solid #8146D4;
    position: relative;
}

.candidate_history .modal-body .card .card-body .line-mid .ball {
    background-color: white;
    border: 2px solid #8146D4;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    margin-left: -7px;
    margin-top: 10px;
}

.candidate_history .modal-body .card .card-body .line-start {
    background-color: #8146D4;
    width: 3px;
    height: 25px;
    border: 1px solid #8146D4;
    position: relative;
}

.candidate_history .modal-body .card .card-body .line-start .ball {
    background-color: #8146D4;
    border: 2px solid #8146D4;
    transform: rotate(45deg);
    transform-origin: center;
    width: 13px;
    height: 13px;
    position: absolute;
    margin-left: -6px;
    margin-top: 12px;
}

.candidate_history .modal-body .card .card-body .date {
    color: #696969;
}

.candidate_history .modal-body .card .card-body .time {
    color: #696969;
    margin-left: 40%;
    font-size: smaller;
}

.candidate_history .modal-body .card .card-body .state {
    color: #8146D4;
}

.candidate_history .modal-body {
    max-height: 80dvh;
    overflow-y: auto;
}

.modal-body {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.details .rounds {
    background-color: white;
    border-radius: 4px;
}



.details .rounds button {
    color: #8146D4;
    border-radius: 0;
}

.details .rounds .round-btns{
    font-size: 18px;
    padding: 6px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #D9D9D9;
}

.details .rounds .round-btns.with_tick{
    padding: 6px 15px;
}

.details .rounds button.active {
    color: #8146D4;
    background-color: #925EDD47;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #8146D4;
}

.details .rounds i.fa-star {
    color: #D9D9D9;
}

.details .rounds i.com,
.details .rounds i.att,
.details .rounds i.dis,
.details .rounds i.dre,
.details .rounds i.kno {
    cursor: pointer;
}

.details .rounds i.com.active,
.details .rounds i.att.active,
.details .rounds i.dis.active,
.details .rounds i.dre.active,
.details .rounds i.kno.active {
    color: #8146D4;
}

.details .rounds i.com.hvr,
.details .rounds i.att.hvr,
.details .rounds i.dis.hvr,
.details .rounds i.dre.hvr,
.details .rounds i.kno.hvr {
    color: #8146D4;
}

.details .rounds i.com.active.hvr,
.details .rounds i.att.active.hvr,
.details .rounds i.dis.active.hvr,
.details .rounds i.dre.active.hvr,
.details .rounds i.kno.active.hvr {
    color: #6539a3;
}


/* Assignment Stars */
.details .rounds i.crea.active,
.details .rounds i.rele.active,
.details .rounds i.exec.active{
    color: #8146D4;
}

.details .rounds i.crea.hvr,
.details .rounds i.rele.hvr,
.details .rounds i.exec.hvr{
    color: #8146D4;
}

.details .rounds i.crea.active.hvr,
.details .rounds i.rele.active.hvr,
.details .rounds i.exec.active.hvr {
    color: #6539a3;
}



.details .rounds i.active {
    color: #8146D4;
}


.details .rounds .round .cal {
    background-color: #8146D4;
    color: white;
    border-radius: 2px;
    width: max-content;
    margin-left: 40%;
}

.details .rounds .round .sub {
    background-color: #98A2B3;
    color: white;
    border-radius: 2px;
    width: max-content;
    margin-left: 40%;
}

.details .rounds .round .action {
    text-align: center;
}

.details .rounds .round .action textarea {
    width: 100%;
    resize: none;
}


.details .rounds i.res.fa-star-half-stroke {
    color: #F8C44A;
}

.details .rounds i.res.active, .details .rounds i.sysres.active, .details .rounds i.asg-res.active {
    color: #F8C44A;
}

.details .rounds i.over.fa-star-half-stroke,  .details .rounds i.over.sysres.fa-star-half-stroke, .details .rounds i.over.asg-res.fa-star-half-stroke{
    color: #F8C44A;
}

.details .rounds i.over.active,  .details .rounds i.over.sysres.active, .details .rounds i.over.asg-res.active{
    color: #F8C44A;
}

.details .rounds .round .action .selected span {
    background-color: #98D645;
    color: white;
    border-radius: 40px;
    padding: 2px 3px;
    padding-right: 8px;
    font-size: 24px;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.details .rounds .round .action .selected i {
    /* color: #98D645; */
    /* background-color: white; */
    border-radius: 50%;
    padding: 0px 2px;
    font-size: 32px;
}

.details .rounds .round .action .rejected span {
    background-color: #EC5C5C;
    color: white;
    border-radius: 40px;
    padding: 4px 6px;
    padding-right: 8px;
    font-size: 24px;
    letter-spacing: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.details .rounds .round .action .rejected i {
    color: #FF270E;
    background-color: white;
    border-radius: 50%;
    padding: 4px 10px;
    font-size: 28px;
    border: 1px solid #FF270E;
}

.details .rounds .round .action .hold span {
    background-color: #F8C44A;
    color: white;
    border-radius: 40px;
    padding: 6px 29px;
    font-size: 24px;
    letter-spacing: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.details .rounds .round .action .hold i {
    color: #F8C44A;
    background-color: white;
    border-radius: 50%;
    padding: 8px 12px;
    font-size: 21px;
    border: 1px solid #FDAD00;
}

.details .rounds .round .files .upload .file {
    border: 0.5px solid #8146D4;
    border-radius: 2px;
    width: 85%;
    padding-left: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    padding-right: 0%;
    display: flex;
    margin-bottom: 2px !important;
}

.details .rounds .round .files .upload .file .name {
    width: 80% !important;
    background-color: #C7BCD747;
    padding-left: 2%;
}

.details .rounds .round .files .upload .file a {
    width: 10% !important;
    text-align: center;
}

.details .rounds .round .files .upload .file .x {
    border-left: 0.5px solid #8146D4;
}

.details .rounds .round .files .upload textarea {
    width: 93%;
}

.details .rounds .round .files .buttons {
    text-align: end;
}

.details .rounds .round .files .btn-reject {
    color: #F94343;
    background-color: #ED919B;
    border-radius: 2px;
    width: max-content !important;
    padding: 5px 10px !important;
}

.details .rounds .round .files .btn-reject i {
    color: #F94343;
}

.details .rounds .round .files .btn-approve {
    color: #029008;
    background-color: #AFD4AC;
    border-radius: 2px;
    width: max-content !important;
    padding: 5px 10px !important;
}

.details .rounds .round .files .btn-approve i {
    color: #029008;
}

.details .rounds .round .files .btn-approve.dissabled {
    color: #696969;
    background-color: #E8E8EA;
    border-radius: 2px;
    width: max-content !important;
    padding: 5px 10px !important;
    pointer-events: none;
}

.details .rounds .round .files .btn-approve.dissabled i {
    color: #696969;
}

.details .rounds .round .confirm {
    text-align: center;
    border: 1px dashed #C0C0C0;
    padding-left: 5px;
    padding-right: 5px;
    width: auto;
}

.details .rounds .round .confirm .options {
    width: max-content;
    border: 1px solid #AEB6BA;
    color: #455A64;
    border-radius: 4px;
    padding: 2px 7px;
}

.details .rounds .round .confirm .btn {
    width: 30%;
    border: 1px solid #AEB6BA;
    color: #455A64;
    border-radius: 4px;
    font-size: smaller;
}

.details .rounds .round .confirm .submit.dissabled {
    width: 62%;
    background-color: #98A2B3;
    color: white;
    border-radius: 2px;
    border: 1px solid #98A2B3;
    pointer-events: none;
    text-align: center;
}

.details .rounds .round .confirm .submit {
    width: 62%;
    background-color: #8146D4;
    color: white;
    border-radius: 2px;
    border: 1px solid #8146D4;
    text-align: center;
}

.details .rounds .round .confirm.dissabled {
    background-color: white;
    opacity: 0.2;
}

.details .rounds .round .confirm.dissabled input {
    pointer-events: none;
}

.details .rounds .round .confirm.dissabled button {
    pointer-events: none;
}

.details .rounds .round .confirm .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%238146d4' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z'/%3e%3cpath fill='%23ffffff' d='M369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3e%3c/svg%3e") !important;
}

.details .rounds .round .confirm .form-check-input:checked+.form-check-label {
    color: #8146D4;
}

.details .rounds .round .confirm .options:has(.form-check-input:checked) {
    background-color: #925EDD47;
    border-radius: 4px;
    border: 1px solid #8146D4;
}

.details .rounds .round .confirm-final {
    text-align: center;
    border: 1px solid #925EDD;
    border-radius: 2px;
    width: auto;
}

.details .rounds .round .confirm-final .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%238146d4' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z'/%3e%3cpath fill='%23ffffff' d='M369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3e%3c/svg%3e") !important;
}

.details .rounds .round .confirm-final .form-check-input:checked+.form-check-label {
    color: #8146D4;
}

.details .rounds .round .confirm-final .options:has(.form-check-input:checked) {
    background-color: #925EDD47;
    border-radius: 4px;
    border: 1px solid #8146D4;
}

.details .rounds .round .confirm-final .options {
    width: 65%;
    border: 1px solid #AEB6BA;
    color: #455A64;
    border-radius: 4px;
    padding: 2px 7px;
}

button.btn.model {
    color: white;
    background-color: #8146D4;
    width: max-content;
    border-radius: 2px;
    border: 1px solid #8146D4;
}

.interdate i {
    color: #8146D4;
}

.details .rounds .round .mail {
    text-align: end;
}

.details .rounds .round .mail .btn {
    width: max-content;
    background-color: #8146D4;
    color: white;
    border: 1px solid #8146D4;
    border-radius: 2px;
}

.details .rounds .round .docreject {
    text-align: center !important;
}

.details .rounds .round .docreject span {
    background-color: #EC5C5C;
    color: white;
    border-radius: 40px;
    padding: 4px 6px;
    border: 1px solid #EC5C5C;
}

.details .rounds .round .docreject .btn {
    border: 1px solid #8146D4;
    border-radius: 4px;
}

.details .rounds .round .docreject .btn.upload {
    background-color: #925EDD;
    color: white;
}

.details .rounds .round .submit {
    text-align: end;
}

.details .rounds .round .submit button {
    background-color: #925EDD;
    color: white;
    border-radius: 4px;
    border: 1px solid #925EDD;
}

.details .rounds .round .docresend .btn {
    border: 1px solid #8146D4;
    border-radius: 4px;
}


/* ATTENDANCE PAGE */
.main-attendence-count-container .counts {
    width: 38%;
}

.main-attendence-count-container .events .table-hover td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    max-width: 150px;
}

.main-attendence-count-container .events {
    border-radius: 5px;
    background-color: white;
    width: 57%;
}

.main-attendence-count-container .events i.edit {
    color: white;
    background-color: #925EDD;
    border: 1px solid #925EDD;
    border-radius: 50%;
    padding: 9px 4px;
}

.main-attendence-count-container .count-card-1 {
    background: linear-gradient(48deg, #32C7D4, #ACEDEF);
}

.main-attendence-count-container .count-card-2 {
    background: linear-gradient(48deg, #83B6F2, #BFDAFC);
}

.main-attendence-count-container .count-card-3 {
    background: linear-gradient(48deg, #F8C44A, #FEEABA);
}

.main-attendence-count-container .count-card-4 {
    background: linear-gradient(48deg, #FB8181, #FDBFBF);
}

.main-attendence-count-container .card-body {
    padding: 0;
}

.main-attendence-count-container .card-body .row {
    margin-top: 5px;
}

.main-attendence-count-container a {
    text-decoration: none !important;
    width: 49% !important;
    padding: 0;
}

.main-attendence-count-container .count-card-title {
    font-size: 16px;
    font-weight: 500;
    width: 65%;
}

.main-attendence-count-container .count-card-icon {
    background-color: white;
    border-radius: 50%;
    width: 60px !important;
    height: 60px !important;
}

.main-attendence-count-container .card-body img {
    width: 100%;
    margin-top: 25%;
    /* margin-left: -3px; */
}

.main-attendence-count-container .count-card-cound {
    color: white;
    font-size: xx-large;
    font-weight: normal;
}

.main-attendence-count-container-birthday-container {
    border-radius: 5px;
    background-color: white;
    height: 21vmax;
    border-radius: 5px;
    width: 96% !important;
    background-color: white;
}

/* HOLIDAY PAGE */
.holiday {
    width: 96%;
}

.holiday .action {
    position: relative;
    display: inline-flex;
}

.holiday .action i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #8146D4;
}

.holiday .row .col a {
    background-color: #8146D4;
    color: white;
    padding: 5px 10px !important;
    border-radius: 2px;
    text-decoration: none;
}

.holiday table {
    width: 99%;
}

.holiday table thead {
    font-weight: 300 !important;
}

.holiday table a {
    color: #8146D4;
    text-decoration: underline !important;
}

.holiday .buttons {
    text-align: end;
}

.holiday .buttons .cancel {
    background-color: white !important;
    color: #000000 !important;
    border: 1px solid #D9D9D9;
}

.holiday .add {
    text-align: end;
}

.holiday .add-holiday {
    background-color: white;
}

.holiday .weekoff span {
    border: 0.92px solid #D9D9D9;
    color: #6B6D81;
    border-radius: 22px;
    padding: 2px 12px;
    cursor: pointer;
}

.holiday .weekoff span.active {
    border: 0.92px solid #843AF0;
    color: #843AF0;
    border-radius: 22px;
    padding: 2px 12px;
    background-color: #925EDD47;
    cursor: pointer;
}

.holiday .add-holiday .btn {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 2px;
    color: #8146D4;
    width: max-content;
    padding: 2px 11px;
    margin-left: 40%;
}

.holiday .add-holiday .add .item .btn {
    background-color: #F943435E;
    border: 1px solid #ED919B;
    border-radius: 2px;
    color: #F94343;
    width: max-content;
    height: max-content;
    margin-left: 0%;
    padding: 6px 10px;
}

.holiday .add-holiday .add .form-check .form-check-input {
    float: left;
    margin-left: 1.5em;
}

.holiday .add-holiday .btn.add-button {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 2px;
    color: #8146D4;
    width: max-content;
    padding: 2px 10px;
    margin-left: 0%;
}

.holiday .add-holiday .btn.remove-button {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 2px;
    color: #8146D4;
    width: max-content;
    padding: 2px 10px;
    margin-left: 0%;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left !important;
}

.tox-statusbar {
    display: none !important;
}

.settings .btn.add-button {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 2px;
    color: #8146D4;
}

.settings .btn.remove-button {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 2px;
    color: #8146D4;
}

.settings .btn.perremove-button {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 2px;
    color: #8146D4;
}

.settings .btn.update {
    background-color: #925EDD47;
    border: 1px solid #8146D4;
    border-radius: 5px;
    color: #8146D4;
}

.settings .card-body {
    text-align: center;
}

.Hrbased .action {
    position: relative;
    display: inline-flex;
}

.Hrbased .action i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform:
        translateY(-50%);
    color: #8146D4;
}

/* EMPLOYEE Page.... */
.Employees {
    width: 96%;
}

.Employees table {
    width: 99%;
}

/* .modal-body .dt-container{
    font-size: smaller;
    height: auto;
} */

.dt-container {
    /* font-size: smaller;
    height: 85vh; */
    margin-bottom: 1rem !important;
}

/* .dt-paging-button .page-link {
    font-size: smaller;
}

select.Search.btn.btn-sm{
    font-size: smaller;
} */

.Employees .row .col a.active {
    background-color: #925EDD47;
    color: #8146D4;
    padding: 5px 10px !important;
    border-radius: 2px;
    text-decoration: none;
    width: max-content !important;
    /* font-size: smaller !important; */
}

.Employees .row .col a {
    background-color: #DEDEDE;
    color: black;
    padding: 5px 10px !important;
    border-radius: 2px;
    text-decoration: none;
    width: max-content !important;
    /* font-size: smaller !important; */
}

.Employees .buttons {
    text-align: end;
}

.Employees .buttons a {
    background-color: #8146D4 !important;
    color: white !important;
}

.Employees table thead {
    font-weight: 300 !important;
}

.Employees table a {
    color: #8146D4;
    text-decoration: underline;
}

.Employees .action {
    position: relative;
    display: inline-flex;
}

.Employees .action i.fa-calendar-days {
    position: absolute;
    top: 50%;
    left: 10px;
    transform:
        translateY(-50%);
    color: #8146D4;
}


/* .holiday .tab .upload .file{
    border: 0.5px solid #8146D4;
    border-radius: 2px;
    width: 85%;
    padding-left: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    padding-right: 0%;
    display: flex;
    margin-bottom: 2px !important;
}

.holiday .tab .upload .file .name{
    width: 80% !important;
    background-color: #C7BCD747;
    padding-left: 2%;
}

.holiday .tab .upload .file a{
    width: 10% !important;
    text-align: center;
}

.holiday .tab .upload .file .x{
    border-left: 0.5px solid #8146D4;
} */

.modal-footer .btn {
    width: max-content !important;
    background-color: #8146D4;
    color: white;
    border: 1px solid #8146D4;
    border-radius: 2px;
    padding: 3px 5px !important;
}

/* .modal-header {
    background-color: #925EDD14;
    text-align: center;
}

.modal-header button.close {
    border: 1px solid #8146D4;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    color: #8146D4;
} */

/* .modal-header button.btn-close {
    border: 1px solid #8146D4;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    color: #8146D4;
} */

.dt-paging-button.page-item.active {
    position: sticky !important;
}

.dt-paging-button.page-item {
    position: sticky !important;
}






/***************************** INTERVIEW PROCESS CSS ******************************/
.interview_firstsec{
    border-radius: 4px;
}

.interview_firstsec .candidate_name{
    font-size: 26px;
    letter-spacing: 0px;
    color: #443F3F;
}

.interview_firstsec .candidate_designation{
    font-size: 20px;
    color: #7F7F7F;
}

.interview_firstsec .can-deatilstitle{
    font-size: 14px;
    color: #696969;
}

.interview_firstsec .can-detailsanswer{
    font-size: 16px;
    color: #000000;
    letter-spacing: 0px;
}

.interview_firstsec a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: fit-content !important;

    background-color: #925EDD;
    color: #FFFFFF;
    font-size: 18px;
    padding: 2px 12px !important;
    border-radius: 50px;
}

.interview_firstsec .view_resume{
    background-color: #925EDD;
    color: #FFFFFF;
    font-size: 18px;
}

.interview_firstsec .ProfileEditBtn{
    padding: 1px 20px !important;
    gap: 8px;
}

.interview_firstsec .history{
    padding: 2px 17px !important;
    gap: 8px;
}

.interview_secondsec{
    border-radius: 4px;
}

.interview_secondsec .title{
    font-size: 18px;
}

.interview_secondsec .interview_showing{
    display: flex;
    justify-content: space-between;
    padding: 7px 10px;
}

.interview_showing i{
    background-color: #8146D459;
    border-radius: 50%;
    color: #8146D4;
    padding: 0px;
    height: 28px;
    cursor: pointer;
    width: 28px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sel-interviwer{
    background: #FCFCFC;
    border: 1px solid #D2D2D2;
    width: 100%;
    padding: 6px;
    border-radius: 2px;

    font-weight: 300;
    font-size: 14px;
    color: #A4A4A4;
}

.sel-interviwer:focus-visible {
  outline: none;
}

.sel-interviwer option{
    color: #000;
}

.sel-interviwer:valid {
  color: #000; /* when an option is selected */
}

.round .new-rating p{
    font-size: 18px;
    letter-spacing: 0px;
    color: #3D3D3D;
    font-weight: 400;
}

.round .new-rating i.fa-star, .round .new-rating i.fa-star-half-stroke{
    font-size: 22px;
}

.round .new-rating .new-rating-eachcontainer{
    display: flex;
    justify-content: space-between;
}

.round .new-rating{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.round .can_final_rating{
    font-size: 18px;
    color: #696969;
}

.round .can_final_rating span#OverAllRatingspan1, .round .can_final_rating span#OverAllRatingspan2, .round .can_final_rating span#OverAllRatingspan3, .round .can_final_rating span#OverAllRatingspan4, .round .can_final_rating span#OverAllRatingspan5, .round .can_final_rating span#OverAllRatingspan6{
    font-size: 18px;
    color: #000000;
}

.round #InterviewRemarks{
    resize: none;
    min-height: 78px;
    /* overflow: clip; */

    /* max-height: 154px !important; */
}

.round .nxt-intertype{
    border: none;
    border-bottom: 1px solid #8146D4;
    width: 100%;
    font-size: 22px;
    color: #8146D4;
}

.round .nxt-intertype option{
    color: #000;
}

.round .nxt-intertype:focus-visible{
    outline: none;
}

.round-complete #remarks{
    min-height: 154px;
    color: #000000;
}

.round .next_result_container{
    display: flex;
    justify-content: start;
    /* justify-content: space-between; */
    align-items: start;
    width: 100%;
    gap: 47px;
}

.round .next_result_container label{
    color: #667085;
    font-size: 14px;
}

.round .next_result_container .next_result-each{
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: max-content; */
    gap: 4px;
}

.round .next_result_container .next_result-each input{
    margin-top: 0px;
}

.next_interview_container p{
    font-size: 14px;
    color: #465266;
    letter-spacing: 0px;
}

.next_interview_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    margin-top: 10px;
}

.next_interview_container .next_round_container, .next_interview_container .next_date_container{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 40%;
}

.next_interview_container select{
    width: 100%;
    background-color: #FFFFFF;
    border: 0.6px solid #98A2B3;
    border-radius: 2px;
    padding: 4px 0px;
    color: #98A2B3;
}

.next_interview_container select:valid{
    color: #404040;
}

.next_interview_container select:focus-visible{
    outline: none;
}
.next_interview_container select option{
    color: #404040;
}

.next_interview_container .next_date_container input{
    background-color: #FFFFFF;
    border: 0.6px solid #98A2B3;
    border-radius: 2px;
    padding-left: 39px;
}

.next_date_input_container{
    position: relative;
    display: inline-block;
    width: 100%;
}

.next_date_input_container img{
    position: absolute;
    left: 9px;
    bottom: 6px;
}

.next_date_input_container .flatpickr-input{
    position: relative;
    display: inline-block;
    width: 100%;
}

.RoundForm button[type="submit"], .RoundFormSys button[type="submit"], .RoundFormAys button[type="submit"], .RoundFormSysComp button[type="submit"], .RoundFormAysComp button[type="submit"]{
    background-color: #98A2B3;
    color: #FFFFFF;
    letter-spacing: 0px;

    font-size: 18px;
    padding: 4px 66px;
    border-radius: 2px;
    cursor: not-allowed;
    border: none;
}

.RoundForm button[type="submit"].active, .RoundFormSys button[type="submit"].active, .RoundFormAys button[type="submit"].active, .RoundFormSysComp button[type="submit"].active, .RoundFormAysComp button[type="submit"].active{
    background-color: #925EDD !important;
    color: #FFFFFF !important;
    border: none !important;
    cursor: pointer;
}

.round-complete .interviewer{
    font-size: 18px;
    color: #8146D4;
    font-weight: 400;
}

.round-complete .interviewer-name{
    font-size: 18px;
    color: #000000;
    font-weight: 500;
}

.sys-rating-container{

}

.sys-rating-container p{
    font-size: 16px;
    color: #3D3D3D;
}


.sys-rating-container span{
    font-size: 20px;
    color: #8146D4;
    font-weight: 500;
}

.sys-rating-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 50px;
    background: #D9D9D9; /* fallback */
    outline: none;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

/* Track */
.sys-rating-container input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 50px;
}

/* Thumb */
.sys-rating-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFFFFF 0%, #E0CAFF 100%);
    border: 0.8px solid #8146D4;
    cursor: pointer;
    margin-top: -4px;
    box-shadow: 0px 1px 2px 0px #0000003D, 
                0px 1px 3px 0px #0000001F;
}

.sys-result-container .sys-result, .sys-result-container .sys-result-DONE{
    border: 0.6px solid #A1A1A1;
    border-radius: 4px;
    background-color: transparent;
    padding: 1px 15px;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #A1A1A1;
}

.sys-result-container .sys-result.disabled{
    border: 0.6px solid #A1A1A1 !important;
    background-color: transparent !important;
    color: #A1A1A1 !important;
    cursor: not-allowed !important;
}

.sys-result-container .sys-result.disabled:hover{
    border: 0.6px solid #A1A1A1 !important;
    background-color: transparent !important;
    color: #A1A1A1 !important;
}

.sys-result-container .sys-result p, .sys-result-container .sys-result-DONE p{
    margin-bottom: 0px;
    font-size: 14px;
    letter-spacing: 0px;
    /* color: #A1A1A1; */
}

.sys-result-container .sys-result.pass.active, .sys-result-container .sys-result.pass:hover,
.sys-result-container .sys-result-DONE.pass.active, .sys-result-container .sys-result-DONE.pass:hover{
    background-color: #C4FFC7;
    border: 0.6px solid #005303;
    color: #005303;
}

.sys-result-container .sys-result.fail.active, .sys-result-container .sys-result.fail:hover,
.sys-result-container .sys-result-DONE.fail.active, .sys-result-container .sys-result-DONE.fail:hover{
    background-color: #FFE8E8;
    border: 0.6px solid #B30000;
    color: #B30000;
}

.RoundFormAys .assignment-action-btn, .RoundFormAys .assignment-action-btn:hover, .round-complete .assignment-action-btn, .round-complete .assignment-action-btn:hover{
    background-color: #FFDFEA;
    border: 0.6px solid #971B47;
    border-radius: 4px !important;
    color: #971B47  !important;
    font-size: 14px;
    font-weight: 400;
    padding: 4px 11px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.RoundFormAys .pls-addAsys, .round-complete .pls-addAsys{
    color: #525252;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0px;
}

.RoundFormAys .assignment-action-btn i, .round-complete .assignment-action-btn i{
    font-size: 26px;
}


#addAssignmentModal .modal-header{
    background-color: #954FF7;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
    justify-content: center;
    color: #FFFFFF;
    padding: 6px 0px;
}

#addAssignmentModal .modal-header h5{
    font-size: 24px;
}

#addAssignmentModal #addAssignmentForm label, #manualAssessmentSubmitModal #manuel-assessment-submit label{
    color: #5D5D5D;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
}

#addAssignmentModal #addAssignmentForm .basic-input{
    width: 100%;
    border: none;
    border-bottom: 1px solid #8F8F8F;

    font-size: 18px;
    letter-spacing: 0px;
}

#addAssignmentModal #addAssignmentForm .attachment-files{

}

#addAssignmentModal .assignmentDueDate{
    padding-left: 39px;
    /* display: none; */
    width: fit-content;
    border: 0.6px solid #98A2B3;
    background-color: #FFFFFF;
    border-radius: 2px;
}

.assignmentfiles_upload-btn, #manualAssessmentFiles{
    cursor: pointer;
    background-color: #F2F2F0;
    border-radius: 50px;
    padding: 3px 26px;
}

#assignmentfiles{
    display: none;
}

#addAssignmentModal #addAssignmentForm input:focus-visible{
    outline: none;
}

#addAssignmentModal .modal-footer{
    justify-content: end;
}

#addAssignmentModal .modal-content{
    border-radius: 4px;
}

#addAssignmentModal .modal-footer button[type="button"]{
    border: 1px solid #8146D4;
    background-color: transparent;
    font-size: 20px;
    color: #925EDD;
    border-radius: 2px;
    padding: 4px 51px;
}
#addAssignmentModal .modal-footer button.assignment-submit{
    font-size: 20px;
    background-color: #98A2B3 !important;
    color: #FFFFFF;
    border-radius: 2px;
    padding: 4px 51px;
    border: none;
    border: 1px solid #98A2B3 !important;
}

#addAssignmentModal .modal-footer button.assignment-submit.active{
    background-color: #925EDD !important;
    border: 1px solid #925EDD !important;
}

#addAssignmentModal .assignment-file_each{
    background-color: #E6D4FF;
    width: max-content;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    padding: 5px 7px;

    max-width: 390px;
}

#addAssignmentModal .assignment-file_each a{
    color: rgb(109, 30, 221);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 390px;
}

#assignmentDueDate_invalid.is-invalid{
    display: block;
}

#addAssignmentModal .assignment-file_each button {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    border: none;
    background-color: #FFFFFF;
    color: #8146D4;

    display: flex;
    justify-content: center;
    align-items: center;
}

#addAssignmentModal .assignment-file_each span{
    overflow: hidden;
    text-overflow: ellipsis;
}

#addAssignmentModal .assignment-file_each button i {
    font-size: 10px;
}


#addAssignmentModal .fileList, #addAssignmentModal .fileList_show{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.assignment-action-btn.edit-btn{
    color: #FFFFFF !important;
    background-color: #8146D4 !important;
    border-color: #8146D4 !important;
    padding: 4px 16px;
}

.show-assignment-btn{
    color: #FFFFFF !important;
    background-color: #8146D4 !important;
    padding: 4px 16px;
    border: none;
    border-radius: 4px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.assignment-action-btn.edit-btn:hover{
    padding: 4px 16px;
}

.assignment-action-btn.edit-btn~p, .show-assignment-btn~p{
    font-size: 12px;
    color: #585858;
    margin-bottom: 0px;
}

.assignment-action-btn.edit-btn~p span, .show-assignment-btn~p span{
    font-size: 12px;
    font-weight: 500;
    color: #585858;
}

.assignment-action-btn.edit-btn:hover{
    color: #FFFFFF !important;
}

.RoundFormAys .assignment-action-btn.edit-btn i,.round-complete .assignment-action-btn.edit-btn i, .view-response-btn i, .show-assignment-btn i{
    font-size: 19px;
}

.RoundFormAys .response-pending, .round-complete .response-pending{
    cursor: not-allowed;
    background-color: #949494;
    padding: 5px 20px;
    border: none;
    border-radius: 4px !important;
    color: #FFF !important;
}

.RoundFormAys .response-pending~p, .view-response-btn~p, .round-complete .response-pending~p{
    color: #585858;
    font-weight: 300;
    font-size: 12px;
    margin-bottom: 0px;
}

.RoundFormAys .response-pending~p span, .round-complete .response-pending~p span{
    color: #6728C0;
    font-weight: 500;
    font-size: 12px;
}

.view-response-btn~p span{
    color: #005332;
    font-weight: 500;
    font-size: 12px;

}

.view-response-btn{
    background-color: #005332;
    border: none;
    border-radius: 4px !important;
    color: #FFF !important;
    font-size: 14px;
    padding: 4px 8px;

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

#viewResponseModal .modal-header #viewResponseModalLabel, #showAssignmentModal .modal-header #showAssignmentModalLabel, #manualAssessmentSubmitModal .modal-header #manualAssessmentSubmitModalLabel{
    color: #FFFFFF;
    font-size: 24px;
}

#viewResponseModal .modal-header, #showAssignmentModal .modal-header, #manualAssessmentSubmitModal .modal-header{
    justify-content: center;
    background-color: #954FF7;
    padding: 6px 0px;
}

#viewResponseModal .modal-content, #showAssignmentModal .modal-content, #manualAssessmentSubmitModal .modal-content{
    border-radius: 4px;
}

#viewResponseModal .modal-body, #showAssignmentModal .modal-body{
    background: #F3F3F3;
}
#viewResponseModal .modal-body p, #showAssignmentModal .modal-body p, #manualAssessmentSubmitModal .modal-body p{
    color: #5D5D5D;
    font-size: 16px;
    font-weight: 400;
}
#viewResponseModal .modal-body #responseContent p, #showAssignmentModal .modal-body #showAssignmentDetails, #showAssignmentModal .modal-body #showAssignmentTitle{
    color: #262626;
    font-size: 16px;
    line-height: 24px;
}

#viewResponseModal #assignedDate, #responseDate, #dueDate, #showAssignmentAssignon, #showAssignmentDueDate{
    font-size: 18px;
    margin-bottom: 8px;
}

#viewResponseModal #assignedDate, #showAssignmentAssignon, #showAssignmentDueDate{
    color: #443F3F !important;
    font-weight: 500 !important;
}

#viewResponseModal #responseDate, #viewResponseModal #dueDate{
    color: #005704;
    font-weight: 600;
}

#viewResponseModal .modal-footer button, #showAssignmentModal .modal-footer button, #manualAssessmentSubmitModal .modal-footer button{
    background-color: #EFE4FF;
    border: 1px solid #8146D4;
    color: #8146D4;
    font-size: 20px;
    padding: 5px 62px !important;
    border-radius: 6px;
}

#viewResponseModal .modal-footer, #showAssignmentModal .modal-footer, #manualAssessmentSubmitModal .modal-footer{
    justify-content: end;
}


.submitted_by_HR{
    background-color: #8146D4;
    width: fit-content;
    color: #FFF;
    font-size: 12px;
    padding: 0px 4px;
    position: absolute;
    right: 0px;
    top: -16px;
    border-top-left-radius: 8px;
}
/***************************** INTERVIEW PROCESS CSS ******************************/




/********* employee_setup style ********/
.employee_setup{
    font-family: 'Poppins';
    background-color: #FFFFFF;
    padding: 10px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.employee_setup-header{
    font-weight: 500;
    font-size: 24px;
    color: #191919;
    margin-bottom: 0px;
}

.employee_setup-desc, .employee_setup-desc span{
    font-weight: 300;
    font-size: 22px;
    color: #98A2B3;
    margin-bottom: 0px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #F1F2F6 !important;
    border-radius: 999px;
    overflow: hidden !important;
}

.progress-fill {
    height: 100%;
    background: #8146D4;
    border-radius: 999px;
    transition: all 0.3s ease; /* smooth fill, optional */
}

.checklist-container{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    /* gap: 8px; */
    border-radius: 6px;
    border: 1px solid #EDEDED;
    /* padding: 11px; */
}

.checklist-container-each{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    width: 100%;
}

.checklist-container-each.border_this{
    border-bottom: 0.8px solid #F2F2F2;
}

.checklist-container-each label{
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0px;
    color: #363636;
}

.checklist-container-each input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 1px solid #BCBCBC;
    cursor: pointer;
    /* Prevent layout shift */
    flex-shrink: 0;
}

.checklist-container-each input[type="checkbox"]:checked {
    background-image: url('../../images/emp_checklist.png');
    background-color: #D3FFCF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    border: 1px solid #65C55D;
}


.call-card-container{
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;

    background: linear-gradient(180deg, #e7d7ff 0%, #efe4ff 100%);
    border-top-left-radius: 10px;
    box-shadow: rgba(143, 213, 248, 0.2) 0px 5px 3px;
    border: 1px solid #F0FAFF !important;
    border-right: none !important;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    /* padding: 8px; */
    gap: 10px;

    max-width: 300px;
}

.call-card-container .call-card-date-filters{
    border: none;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: #F3F4F6;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
}

.call-card-container .call-card-date-filters.active{
    background: #925edd;
    color: #fff;
}

.call-card-container .call-card-counts-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.call-card-counts-each{
    width: 46%;
}
.call-card-counts-each p{
    margin-bottom: 0px;
    color: #310077;
    font-size: 12px;
    font-weight: 400;
}
.call-card-counts-each span{
    font-size: 14px;
    font-weight: 600;
    font-family: "Poppins";
    color: #022D43;
}

.call-card-container .pull-tab{
    position: absolute;
    top: -32px;
    right: 1px;
    background: #e9dbff;
    padding: 6px 11px;
    border-top-left-radius: 8px;
    border: none;
}

.call-card-container .call-card-disappear{
    display: none;
    padding: 8px;
}

.call-card-container .call-card-disappear.active{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}