@import url(root.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--DMSans-Regular);
}

a {
    text-decoration: none;
}

body {
    background: url("../../assets/images/background.png");
    background-color: var(--light-blue);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

button:disabled {
    cursor: not-allowed !important;
    background: #ddd !important;
    color: #666 !important;
    border-color: #ccc !important;
}

/******************************************/
/********* Select module style ************/
/******************************************/

.center-logo {
    text-align: center;
    margin-top: 60px;
}

.center-logo img {
    width: 200px;
}

.center-message {
    text-align: center;
    margin-top: 30px;
}

.center-message p:first-child {
    font-size: 45px;
    color: var(--dark-blue);
}

.center-message p:first-child span {
    color: var(--orange);
    font-family: var(--DMSans-Medium);
}

.center-message p:last-child {
    font-size: 16px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue);
    width: 35%;
    margin: 0 auto;
    margin-top: 5px;
}

.link-button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--orange);
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
}

.link-button:hover,
.link-button:focus {
    color: var(--orange);
    text-decoration: none;
}

.selectable-modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 280px));
    gap: 25px;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 80px;
}

.selectable-module {
    background-color: var(--white);
    border: 0.3px solid #f7620330;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-shadow:
        0px 123px 49px rgba(224, 224, 224, 0.01),
        0px 69px 42px rgba(224, 224, 224, 0.05),
        0px 31px 31px rgba(224, 224, 224, 0.09),
        0px 8px 17px rgba(224, 224, 224, 0.1);
}

.selectable-module svg:first-child {
    color: #f76203;
}

.selectable-module .title {
    font-size: 16px;
    color: var(--dark-blue);
    margin-top: 8px;
}

.subtitle {
    font-size: 12px;
    color: var(--dark-blue50);
    margin-top: 5px;
}

.selectable-module svg:last-child {
    color: #f76203;
    margin-top: 10px;
    margin-left: auto;
}

.selectable-module:hover {
    background-color: var(--orange);
    cursor: pointer;
}

.selectable-module:hover svg,
.selectable-module:hover .title {
    color: var(--white);
}

.selectable-module:hover .subtitle {
    color: #ffffff80;
}

.selectable-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--dark-blue);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selectable-footer p {
    color: var(--white) !important;
}

.selectable-footer .footer-logout {
    display: flex;
    align-items: center;
    gap: 6px;
}

.selectable-footer .footer-logout p {
    font-family: var(--DMSans-Light);
    color: #ffffff70 !important;
    font-size: 14px;
}

/******************************************/
/******* End of Select module style *******/
/******************************************/

.main-div {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.right-div {
    width: 50%;
    height: 100hv;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 50px;
    padding: 0 200px;
}

.reg-backarrow {
    display: flex;
    align-items: center;
    gap: 5px;
}

.reg-backarrow p {
    color: var(--orange);
    font-size: 12px;
}

.reg-text {
    color: var(--dark-blue);
    margin-bottom: 20px;
}

.reg-text h1 {
    font-size: 30px;
}

.reg-text p {
    font-size: 16px;
    font-family: var(--DMSans-ExtraLight);
    margin-top: 5px;
}

.left-div {
    width: 50%;
    height: 100hv;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 2.5px;
    position: relative;
}

.reg-hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
        url("../../assets/images/reg-image.png");
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(100% - 5px);
    border-radius: 8px;
}

.reg-hero img {
    margin: 30px 0 0 10px;
    width: 200px;
}

.reg-tagline {
    position: absolute;
    top: 40%;
    left: 15%;
    text-align: center;
}

.reg-tagline p:first-child {
    font-size: 40px;
    color: var(--white);
    font-family: var(--DMSans-Bold);
}

.reg-tagline p:first-child span {
    color: var(--orange);
    font-family: var(--DMSans-Bold);
}

.reg-tagline p:last-child {
    font-size: 14px;
    color: var(--white);
    font-family: var(--DMSans-Italic);
    margin-top: 10px;
}

/******************************************/
/*********** Input field style ************/
/******************************************/

.reg-form {
    width: 100%;
}

.reg-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-element {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.counter {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

.input-element label {
    font-size: 12px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Medium);
    line-height: 19px;
}

.input-element label span {
    color: var(--red);
}

.input-element label .optional-lable {
    color: var(--dark-blue50);
}

.input-element .input-field {
    width: 100%;
    height: 38px;
    border-radius: 6px;
    background-color: var(--white);
    border: 0.5px solid var(--dark-blue50);
}

.input-element .textarea-field {
    height: 68px;
}

.input-element .textarea-field textarea {
    width: 100%;
    height: 100%;
    resize: none;
    background-color: transparent;
    border: none;
}

.input-element .textarea-field textarea:focus {
    outline: none;
}

.input-element .input-field input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    padding: 0 10px;
    border-radius: inherit;
}

.input-element .input-field input:disabled {
    background-color: #f2f2f7;
}

.input-element .textarea-field {
    height: 68px;
}

.input-element .textarea-field textarea {
    width: 100%;
    height: 100%;
    resize: none;
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    border-radius: inherit;
}

.input-element .textarea-field textarea:focus {
    outline: none;
}

.otp-input {
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

.otp-field input {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background-color: var(--white);
    border: 0.5px solid var(--dark-blue);
    text-align: center;
    color: var(--dark-blue);
    font-family: var(--DMSans-Bold);
}

.input-element .otp-field input:focus {
    border: 1px solid var(--orange);
}

.input-field {
    display: flex;
    align-items: center;
}

.input-field svg {
    margin-right: 10px;
}

.input-field svg:hover {
    cursor: pointer;
}

.input-checkboxes {
    display: flex;
    align-items: center;
    gap: 18px;
}

.input-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-checkbox input {
    width: 15px;
    height: 15px;
}

.input-checkbox span {
    font-size: 14px;
    color: var(--dark-blue);
}

.input-checkboxes__modal input {
    accent-color: var(--orange);
}

.input-checkboxes__modal span {
    color: var(--orange);
}

input:focus {
    outline: none;
}

.copy-btn {
    border: 1px solid var(--orange);
    display: flex;
    align-items: center;
    height: 38px;
    align-self: flex-end;
    padding: 6px 38px;
    border-radius: 6px;
    gap: 5px;
    background-color: #fffafa;
}

.copy-btn svg {
    color: var(--orange);
}

.copy-btn p {
    font-size: 12px;
    color: var(--orange);
    font-family: var(--DMSans-SemiBold);
}

.copy-btn:hover {
    cursor: pointer;
    background-color: var(--orange);
}

.copy-btn:hover p,
.copy-btn:hover svg {
    color: var(--white);
}

/* Hide the native Microsoft Edge password reveal button */
input[type="password"]::-ms-reveal {
    display: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--placeholder-gray);
}

.reg-btn {
    height: 40px;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: none;
    background-color: var(--orange);
    color: var(--white);
    margin-top: 20px;
    font-family: var(--DMSans-Medium);
    font-size: 13px;
}

.reg-btn:hover {
    opacity: 0.85;
    cursor: pointer;
}

.reg-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.reg-footer p {
    font-size: 12px;
    color: var(--placeholder-gray);
}

.reg-footer p a {
    color: var(--orange);
}

.select2-selection__rendered {
    line-height: 38px !important;
    border-color: var(--dark-blue50) !important;
    margin-right: 0 !important;
}

.select2-container .select2-selection--single,
.select2-container .js-example-basic-multiple {
    height: 100% !important;
    border-radius: 6px !important;
    border-color: var(--dark-blue50) !important;
}

.select2-selection__arrow {
    height: 100% !important;
}

.select2-container .select2-selection--single:focus {
    outline: none !important;
}

/* Changes font size of the main selection box (the closed state) */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    font-size: 14px;
}

/* Changes font size of the options inside the open dropdown menu */
.select2-container .select2-results__options {
    font-size: 14px;
}

/******************************************/
/****** End of Input field style **********/
/******************************************/

main {
    display: flex;
    padding: 5px 0px 5px 5px;
    gap: 10px;
}

/******************************************/
/************ Sidebar style ***************/
/******************************************/

.sidebar {
    height: calc(100vh - 10px);
    width: 15%;
    background-color: var(--dark-blue);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar-logo img {
    width: 150px;
    margin: 0 auto;
}

.sidebar-divider {
    width: 80%;
    height: 1px;
    background-color: var(--white);
    opacity: 0.3;
    margin: 0 auto;
}

.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    margin: 8px 3px;
    padding: 15px 10px;
    gap: 20px;
    flex-grow: 1;
    overflow-y: scroll;
}

.sidebar-wrapper::-webkit-scrollbar {
    width: 4px;
    display: none;
}

.sidebar-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-wrapper::-webkit-scrollbar-thumb {
    background: var(--gray50);
    border-radius: 10px;
}

.sidebar-section-wrapper p:first-child {
    font-size: 12px;
    font-family: var(--DMSans-Light);
    color: var(--white);
    margin-bottom: 5px;
}

.sidebar-section {
    border: 1px solid #ffffff80;
    border-radius: 12px;
    background-color: #00000010;
    padding: 10px 0;
}

.sidebar-section ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sidebar-link {
    display: flex;
}

.sidebar-item-indicator {
    width: 3px;
    border-radius: 0 10px 10px 0;
}

.sidebar-item {
    padding: 7px 9px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    flex-grow: 1;
}

.sidebar-item p {
    font-size: 14px;
    color: var(--white);
    font-family: var(--DMSans-Light);
}

.active-sidebar-link .sidebar-item-indicator {
    background-color: var(--orange);
}

.active-sidebar-link .sidebar-item {
    background-color: var(--orange);
}

.active-sidebar-link .sidebar-item p {
    font-family: var(--DMSans-Medium);
}

.sidebar-section ul li:hover .sidebar-item {
    cursor: pointer;
    background-color: var(--orange);
}

/******************************************/
/********* End of sidebar style ***********/
/******************************************/

.main-wrapper {
    height: fit-content;
    width: 85%;
    padding-right: 5px;
    height: calc(100vh - 10px);
    overflow-y: auto;
}

/******************************************/
/************* Header style ***************/
/******************************************/

.header {
    background-color: var(--white);
    border-radius: 15px;
    border: 1px solid var(--gray50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.header-title p:first-child {
    font-size: 25px;
    color: var(--dark-blue);
}

.header-title p:last-child {
    font-size: 12px;
    color: var(--dark-blue50);
}

.searchbar {
    display: flex;
    align-items: center;
    width: 40%;
    border: 1px solid var(--primary-gray);
    padding: 0px 12px;
    border-radius: 8px;
    gap: 8px;
}

.searchbar input {
    flex-grow: 1;
    height: 40px;
    background-color: transparent;
    border: none;
}

.lang-icon {
    display: flex;
    align-items: center;
    padding: 3px 5px;
    border-radius: 3px;
    border: 1px solid var(--white900);
    gap: 2px;
}

.lang-icon p {
    font-size: 10px;
    font-family: var(--DMSans-Light);
}

.notification-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification {
    position: relative;
}

.notification-counter {
    position: absolute;
    background-color: var(--orange);
    border-radius: 40%;
    padding: 3px 5px;
    top: 0;
    margin-top: -8px;
    margin-left: 4px;
}

.notification-counter p {
    color: var(--white);
    font-size: 10px;
    font-family: var(--DMSans-Bold);
}

.header-profile {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-profile-photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--orange);
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-profile-photo p {
    color: var(--white);
    font-family: var(--DMSans-Bold);
    font-size: 12px;
}

.header-profile-photo img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.header-profile-info p:first-child {
    font-size: 14px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Light);
}

.header-profile-info p:last-child {
    font-size: 10px;
    color: var(--gray);
}

.header-dropdown-menu {
    padding: 9px 8px;
    background-color: #35353513;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-dropdown-menu:hover,
.notification:hover {
    cursor: pointer;
}

.hp-dropdown {
    position: relative;
}

.profile-dropdown {
    position: absolute;
    width: 100%;
    max-width: 150px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    right: 0;
    background: #ffffff;
    box-shadow:
        0px 100px 40px rgba(0, 0, 0, 0.01),
        0px 56px 34px rgba(0, 0, 0, 0.05),
        0px 25px 25px rgba(0, 0, 0, 0.09),
        0px 6px 14px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.25s ease;
    z-index: 1;
}

.profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pd-header {
    padding: 20px 15px 5px 15px;
}

.pd-header p {
    font-size: 12px;
    color: var(--dark-blue50);
    font-family: var(--DMSans-Light);
}

.profile-dropdown ul li {
    list-style-type: none;
}

.profile-dropdown ul li div {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 10px;
    border-top: 0.5px solid #0c408830;
    border-bottom: 0.5px solid #0c408830;
}

.profile-dropdown ul li div p {
    font-size: 12px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Light);
}

.profile-dropdown ul li div .logout {
    color: var(--red);
}

.profile-dropdown ul li div:last-child {
    border-bottom: none;
}

/******************************************/
/********** End of header style ***********/
/******************************************/

/******************************************/
/******** Breadcrumb trail style **********/
/******************************************/

.breadcrumb-trail,
.home-trail {
    display: flex;
    align-items: center;
}

.breadcrumb-trail {
    margin: 13px 0;
    gap: 4px;
}

.home-trail {
    gap: 3px;
}

.home-trail p {
    font-size: 12px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Light);
}

.breadcrumb-trail .crum-arrow {
    rotate: -90deg;
}

.next-trail p {
    font-size: 12px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Light);
}

.active-trail p {
    color: var(--orange);
    font-family: var(--DMSans-Medium);
}

/******************************************/
/***** End of Breadcrumb trail style ******/
/******************************************/

.content-wrapper {
    background-color: #ffffff40;
    border: 1px solid var(--gray50);
    border-radius: 20px;
    padding: 10px;
}

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

.content-title {
    font-family: var(--DMSans-ExtraLight);
    color: var(--dark-blue);
    font-size: 22px;
}

.content-title span {
    font-family: var(--DMSans-Medium);
}

.header-arrow {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-arrow svg:hover {
    cursor: pointer;
}

.header-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-btn {
    display: flex;
    align-items: center;
    background-color: var(--orange);
    border: 1px solid var(--orange);
    padding: 6px 19px;
    border-radius: 6px;
    gap: 4px;
    width: fit-content;
}

.header-btn svg {
    color: var(--white);
}

.header-btn p {
    color: var(--white);
    font-size: 14px;
}

.header-btn:hover {
    background-color: transparent;
    cursor: pointer;
}

.header-btn:hover svg,
.header-btn:hover p {
    color: var(--orange);
}

.header-btn__blue {
    align-self: self-end;
}

/******************************************/
/************** Table style ***************/
/******************************************/

.page-wrapper {
    background-color: var(--white);
    border: 1px solid var(--gray50);
    border-radius: 20px;
    padding: 10px 0;
    margin-top: 20px;
}

.recruitment-ready {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #E9F2FF;
    border: 0.6px solid #0C408860;
    padding: 12px 10px;
    border-radius: 10px;
    margin: 14px 0 18px 0;
}

.recuitment-ready__info {
    font-size: 12px;
    color: var(--dark-blue);
}

.recuitment-ready__info span {
    font-family: var(--DMSans-Bold);
}

.table-content {
    background-color: var(--light_2);
    border: 1px solid var(--gray50);
    border-radius: 12px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.import-table {
    padding: 15px;
    margin-top: 20px;
}

.import-table .form-btns {
    justify-content: flex-end;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-search {
    height: 30px;
    width: 35%;
    border-radius: 10px;
    background-color: var(--white);
    border: 1px solid #0c408850;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    gap: 8px;
}

.table-search input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.table-action {
    display: flex;
    align-items: center;
    padding: 0px 6px;
    border-radius: 5px;
    gap: 5px;
    background-color: #00000005;
    border: 1px solid var(--dark-brown);
    width: fit-content;
}

.table-action select {
    width: 100%;
    height: 30px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.table-action select:focus {
    outline: none;
}

.table-action p {
    color: var(--dark-brown);
    font-size: 12px;
}

.table-action p span {
    font-family: var(--DMSans-Bold);
}

table {
    border-collapse: collapse;
    width: 100% !important;
    text-align: left;
    color: var(--dark-blue);
    table-layout: auto;
}

table thead tr th {
    background-color: var(--table-head-color);
    padding: 12px;
    font-size: 11px;
}

table tbody tr td {
    padding: 12px;
    text-wrap: nowrap;
    font-size: 12px;
    border-bottom: 1px solid #eaecf0;
    max-width: 300px;
    overflow-wrap: break-word;
    white-space: normal;
}

.log-table thead tr th,
.log-table tbody tr td {
    font-size: 10px;
    padding: 8px 12px;
}

.error-row td {
    background-color: var(--light-red);
}

table tbody tr:last-child td {
    border-bottom: none;
}

.row-code {
    background-color: #eeeeee;
    border-radius: 6px;
    padding: 2px 6px;
    width: fit-content;
}

.row-code p {
    font-family: var(--DMSans-Medium);
}

.row-branch-type {
    border-radius: 4px;
    padding: 2px 6px;
    width: fit-content;
}

.row-branch-type p {
    font-family: var(--DMSans-Medium);
}

.head-office {
    background-color: #eff6ff;
}

.head-office p {
    color: #0088ff;
}

.regional-office {
    background-color: #fdf2ea;
}

.regional-office p {
    color: var(--orange);
}

.branch-office {
    background-color: #fdf2ff;
}

.branch-office p {
    color: #cb30e0;
}

.shortlisted {
    background-color: #ecf8e5;
}

.shortlisted p {
    color: var(--green);
}

.row-status {
    border-radius: 16px;
    padding: 4px 6px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 6px;
}

.row-status div:first-child {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.row-status p {
    font-family: var(--DMSans-Bold);
    font-size: 12px;
}

.active-status {
    background-color: var(--active50);
}

.active-status div:first-child {
    background-color: var(--active500);
}

.active-status p {
    color: var(--active700);
}

.inactive-status {
    background-color: var(--inactive100);
    border-color: var(--inactive500);
}

.inactive-status div:first-child {
    background-color: var(--inactive500);
}

.inactive-status p {
    color: var(--inactive500);
}

.filled-status {
    background-color: var(--sky-blue15) !important;
    border-color: var(--sky-blue) !important;
}

.filled-status div:first-child {
    background-color: var(--sky-blue) !important;
}

.filled-status p {
    color: var(--sky-blue) !important;
}

.closed-status {
    background-color: #f1504615 !important;
    border-color: #f15046 !important;
}

.closed-status div:first-child {
    background-color: #f15046 !important;
}

.closed-status p {
    color: #f15046 !important;
}

.pending-status {
    background-color: #ffd00015 !important;
    border-color: #e39f33 !important;
}

.pending-status div:first-child {
    background-color: #e39f33 !important;
}

.pending-status p {
    color: #e39f33 !important;
}

.row-btns {
    display: flex;
    align-items: center;
    gap: 5px;
}

.row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-blue);
    border-radius: 14px;
    width: fit-content;
    padding: 5px 9px;
}

.row-btn:hover {
    cursor: pointer;
}

.edit-btn {
    background-color: var(--orange);
}

.unedit-btn {
    background-color: var(--white300);
}

.download-btn {
    background-color: var(--sky-blue);
}

.reject-btn {
    background-color: var(--red);
}

.confirm-btn {
    background-color: var(--green);
}

.unedit-btn:hover {
    cursor: not-allowed;
}

.interview-btn {
    background-color: transparent;
    border: 1px solid #f7620350;
    gap: 4px;
}

.interview-btn p {
    font-family: var(--DMSans-Medium);
    font-size: 10px;
    color: var(--orange);
}

.valid-btn {
    background-color: #eaf3de !important;
    cursor: not-allowed !important;
}

.verfication-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 150px));
    gap: 20px;
}

.verification-card {
    background-color: var(--white);
    border: 1px solid var(--dark-blue50);
    border-radius: 10px;
    padding: 12px;
}

.verification-card p:first-child {
    font-size: 12px;
    color: var(--dark-blue50);
}

.verification-card p:last-child {
    color: var(--dark-blue);
    font-size: 25px;
    margin-top: 4px;
}

.verification-validcard {
    background-color: #eaf3de;
}

.verification-errorcard {
    background-color: var(--light-red);
}

.import-errormeg {
    background-color: var(--white);
    border: 0.2px solid #ff383c40;
    border-radius: 10px;
    padding: 5px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 20px 0;
}

.import-errortext p {
    font-size: 10px;
    color: var(--red);
}

.exist-error {
    font-size: 12px;
    color: var(--red);
    font-family: var(--DMSans-Italic);
}

.error-textbtn p {
    font-size: 12px;
    color: var(--red);
    font-family: var(--DMSans-Medium);
}

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 12px;
    padding: 10px 12px;
}

.table-counter p {
    font-size: 12px;
    color: var(--dark-blue);
}

.table-counter p span {
    font-family: var(--DMSans-Bold);
}

.table-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-pagination div {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white300);
}

.table-pagination div p {
    font-size: 9px;
    color: var(--dark-brown);
}

.table-pagination .active {
    background-color: var(--orange);
    border-color: var(--orange);
}

.table-pagination .active p {
    color: var(--white);
}

.table-pagination div:hover {
    cursor: pointer;
    background-color: var(--orange);
    border-color: var(--orange);
}

.tabcontent {
    display: none;
}

.row-employee {
    display: flex;
    align-items: center;
    gap: 10px;
}

.row-employee .row-pic {
    width: 36px;
    height: 36px;
    border-radius: 50px;
    background-color: var(--table-head-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-employee .row-pic p {
    font-size: 14px;
    font-family: var(--DMSans-Bold);
}

.row-employee .row-pic img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.row-info p:first-child {
    font-family: var(--DMSans-SemiBold);
}

.row-info p:last-child {
    font-family: var(--DMSans-Light);
    font-size: 10px;
}

.profit-text {
    color: var(--green);
    font-family: var(--DMSans-Medium);
}

.cost-text {
    color: var(--red);
    font-family: var(--DMSans-Medium);
}

/******************************************/
/********** End of Table style ************/
/******************************************/

/******************************************/
/************** Form style ****************/
/******************************************/

.form-wrapper {
    padding: 20px 16px;
}

.form-des {
    font-size: 12px;
    color: var(--dark-blue50);
}

.form-section {
    padding: 25px 0;
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.input-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.input-row .input-element {
    flex-grow: 1;
}

.form-btns {
    display: flex;
    justify-self: flex-end;
    gap: 18px;
    padding: 20px 0;
    margin-top: 15px;
}

.form-btns button {
    padding: 8px 15px;
    font-family: var(--DMSans-SemiBold);
    font-size: 12px;
}

.form-btns button:first-child {
    border-radius: 6px;
    border: 1px solid var(--gray);
    background-color: #e5e5ea;
    color: var(--gray);
}

.form-btns button:first-child:hover {
    cursor: pointer;
    background-color: transparent;
}

.form-btns button:last-child,
.form-review__btn {
    border-radius: 6px;
    border: 1px solid var(--orange);
    background-color: var(--orange);
    color: var(--white);
}

.form-btns button:last-child:hover,
.form-review__btn:hover {
    cursor: pointer;
    background-color: transparent;
    color: var(--orange);
}

.form-btns .form-btn__preview {
    border-radius: 6px !important;
    border: 1px solid var(--orange) !important;
    background-color: #f7620310 !important;
    color: var(--orange) !important;
}

.form-btns .form-btn__preview:hover {
    cursor: pointer !important;
    background-color: transparent !important;
}

.dep-select {
    width: 100%;
    padding: 10px 10px;
    border-radius: 6px;
    background-color: var(--white);
    border: 0.5px solid var(--dark-blue50);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.echelons-select {
    padding: 4px 4px;
}

.hidden-checkbox {
    display: none;
}

.custom-button {
    padding: 5px 10px;
    color: var(--dark-blue);
    background-color: var(--light);
    border: 1px solid var(--gray50);
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.echelons-select .custom-button {
    font-size: 12px;
}

.hidden-checkbox:checked + .custom-button {
    color: var(--white);
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.hidden-checkbox:focus-visible + .custom-button {
    outline: none;
}

.department-hidden-check {
    display: none;
}

.department-check {
    display: flex;
    cursor: pointer;
    .add-department-icon {
        display: block;
    }
    .remove-department-icon {
        display: none;
    }
}

.department-hidden-check:checked + .department-check {
    .add-department-icon {
        display: none;
    }
    .remove-department-icon {
        display: block;
    }
}

.derived-section {
    width: 100%;
    border-radius: 6px;
    background-color: var(--white);
    border: 0.5px solid var(--dark-blue50);
}

.derived-header {
    background-color: #0c408810;
    padding: 9px 12px;
}

.derived-section .derived-header:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.derived-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.derived-header p:first-child {
    font-size: 11px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue);
}

.derived-header .unit-number {
    background-color: var(--white);
    border-radius: 100px;
    padding: 2px 10px;
    border: 1px solid #0c408820;
}

.derived-header .unit-number p {
    font-size: 10px;
    color: var(--dark-blue50);
}

.derived-body {
    padding: 15px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.derived-element {
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding: 3px 5px;
    border: 0.5px solid var(--dark-blue50);
    border-radius: 100px;
    width: fit-content;
    gap: 4px;
    /* opacity: 0.5; */
}

.derived-element:has(.department-hidden-check:checked) {
    /* opacity: 1; */
    border: 1px solid var(--green);
}

.derived-element:has(.department-hidden-check:checked) p {
    color: var(--green);
    font-family: var(--DMSans-Medium);
}

.derived-element p {
    font-size: 10px;
    color: var(--dark-blue);
}

.cancel-btn {
    background-color: #0c408810;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.removed-element {
    border: 0.5px solid var(--table-head-color);
}

.removed-element p {
    color: var(--white900);
    opacity: 0.5;
}

.removed-element .cancel-btn {
    background-color: #34c75930;
}

/******************************************/
/********** End of Form style *************/
/******************************************/

/******************************************/
/************* Detail style ***************/
/******************************************/

.details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.detail {
    padding: 16px;
    background-color: var(--white);
    border-radius: 10px;
    border: 0.5px solid var(--dark-blue50);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-profile {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-icon {
    padding: 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-icon {
    background-color: #e1eeff;
}

.location-icon svg {
    color: var(--dark-blue);
}

.branch-icon {
    background-color: #fff0e6;
}

.branch-icon svg {
    color: var(--orange);
}

.division-icon {
    background-color: #e1ffe4;
}

.division-icon svg {
    color: var(--green);
}

.department-icon {
    background-color: #f9effd;
}

.department-icon svg {
    color: var(--purple);
}

.unit-icon {
    background-color: #f0fafa;
}

.unit-icon svg {
    color: #0e7490;
}

.designation-icon {
    background-color: #fff0e6;
}

.designation-icon svg {
    color: #ac7f5e;
}

.grade-icon {
    background-color: #d6fffb;
}

.grade-icon svg {
    color: #00c8b3;
}

.role-icon {
    background-color: #efe5f8;
}

.role-icon svg {
    color: #cb30e0;
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-title {
    font-size: 12px;
    font-family: var(--DMSans-SemiBold);
    color: var(--dark-blue);
}

.detail-subtitles {
    display: flex;
    align-items: center;
    gap: 4px;
}

.detail-subtitle {
    padding: 2px 5px;
    border-radius: 5px;
    background-color: var(--inactive100);
    width: fit-content;
}

.detail-subtitle p {
    font-size: 9px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue);
}

.detail-subtitles .colored-subtitle {
    background-color: #eff6ff;
}

.detail-subtitles .colored-subtitle p {
    color: var(--blue);
}

.detail-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.detail-action {
    display: flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid grey;
    border-radius: 8px;
    gap: 5px;
    width: fit-content;
    cursor: pointer;
}

.detail-action p {
    font-size: 12px;
    color: var(--gray);
}

.detail-edit {
    border-color: var(--dark-blue);
}

.detail-edit svg,
.detail-edit p {
    color: var(--dark-blue);
}

.detail-filled {
    background-color: var(--orange);
    border-color: var(--orange);
}

.detail-filled svg, .detail-filled p {
    color: var(--white);
}

.detail-deactivate {
    border-color: var(--red);
}

.detail-deactivate p,
.detail-deactivate svg {
    color: var(--red);
}

.detail-preview {
    border-color: var(--orange);
}

.detail-preview p,
.detail-preview svg {
    color: var(--orange);
}

.detail-activate {
    border-color: var(--green);
}

.detail-activate p,
.detail-activate svg {
    color: var(--green);
}

.detail-description {
    background-color: var(--light-blue);
    border-radius: 8px;
    border-left: 4px solid var(--orange);
    padding: 6px 10px;
}

.detail-description p {
    font-size: 13px;
    color: var(--dark-blue);
    opacity: 0.7;
    font-family: var(--DMSans-Medium);
}

.multiple-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.statistics-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.main-details {
    background-color: #f7f7f7;
    border: 1px solid #0c408820;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.spacer-details {
    margin: 12px 8px;
    background-color: var(--white);
}

.main-detail {
    flex-basis: 35%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-detail__long,
.statistics-details .main-details .main-detail {
    flex-basis: auto;
}

.spacer-details .main-detail,
.portal-details .main-detail {
    flex-basis: 50%;
}

.statistics-details .main-details .main-detail .detail-details p:last-child {
    font-size: 25px;
}

.detail-indicator {
    min-width: 10px;
    min-height: 10px;
    max-width: 10px;
    max-height: 10px;
    border-radius: 50%;
    background-color: #ffa871;
}

.detail-details p:first-child {
    font-size: 10px;
    color: var(--dark-blue50);
}

.detail-details p:last-child {
    font-family: var(--DMSans-Medium);
    font-size: 13px;
    color: var(--dark-blue);
}

.detail-details .detail-status {
    color: var(--green) !important;
}

.detail-details .detail-inactive-status {
    color: var(--red) !important;
}

.detail table thead tr th {
    background-color: #f7f7f7;
}

.detail table thead tr {
    color: #0c408880;
}

.dashboard-joiners table thead tr th {
    background-color: var(--table-head-color);
}

.dashboard-joiners table thead tr {
    color: var(--dark-blue);
}

.detail table thead tr th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.detail table thead tr th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.detail table tbody tr:last-child td {
    border-bottom: 1px solid #eaecf0;
}

.main-detail__group {
    background-color: #f7f7f7;
    border-radius: 20px;
}

.details-group__head {
    background-color: #949faf12;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    padding: 9px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.applied-vacancy__title {
    font-size: 10px;
    color: var(--dark-blue);
    font-family: var(--DMSans-SemiBold);
}

.timeline-status {
    display: flex;
    align-items: center;
    gap: 13px;
}

.timeline-status p {
    font-size: 10px;
    color: var(--dark-blue);
    font-family: var(--DMSans-SemiBold);
}

.timeline-status p:hover {
    cursor: pointer;
    color: var(--orange);
}

.active-time__link {
    color: var(--orange) !important;
    text-decoration: underline;
}

.timeline-status .permission-select {
    flex-grow: 1;
    height: 26px;
    border-radius: 7px;
}

.reporting-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chain {
    background-color: #d1d1d110;
    border: 1px solid #aeaeb2;
    border-radius: 10px;
    padding: 12px 19px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.chain-profile {
    background-color: var(--table-head-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.chain-profile img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.chain-profile p {
    font-size: 14px;
    font-family: var(--DMSans-Bold);
    color: var(--dark-blue);
}

.chain-info p:first-child {
    font-size: 13px;
    font-family: var(--DMSans-Bold);
    color: var(--dark-blue);
}

.chain-info p:first-child span {
    color: var(--dark-blue50);
    font-family: var(--DMSans-Regular);
}

.chain-info p:last-child {
    font-size: 11px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue);
}

.this-employee {
    background-color: #faebe1;
    border-color: var(--orange);
}

.this-employee .chain-profile {
    border: 1px solid var(--orange);
}

.chain-line p {
    font-size: 10px;
    color: var(--dark-blue50);
    writing-mode: sideways-lr;
}

.chain-line {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}

.permission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.permission-selection {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.permission-selection p {
    font-size: 14px;
    color: var(--dark-blue);
}

.permission-select {
    width: 40%;
    border: 1px solid var(--dark-blue);
    height: 35px;
    border-radius: 10px;
    padding: 0 5px;
}

.permission-select select {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: none;
    background-color: transparent;
    font-size: 12px;
    color: var(--dark-blue);
}

.permission-select select:focus {
    outline: none;
}

.permission-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
    gap: 12px;
}

.permission-action {
    padding: 8px 15px;
    border: 1px solid var(--orange);
    background-color: var(--lighter-orange);
    border-radius: 10px;
}

.permission-action p {
    font-size: 14px;
    color: var(--orange);
}

.permission-action:hover {
    background-color: var(--orange);
    cursor: pointer;
}

.permission-action:hover p {
    color: var(--white);
}

.save-action {
    background-color: var(--orange);
}

.save-action p {
    color: var(--white);
}

.save-action:hover {
    opacity: 0.8;
}

.permission-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    row-gap: 12px;
    column-gap: 15px;
    margin-top: 15px;
}

.permission-module {
    border-radius: 5px;
    background-color: #f8f7f5;
    border: 1px solid #f8f7f5;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.permission-module input {
    accent-color: var(--orange);
}

.permission-module label {
    color: var(--brown);
    font-size: 12px;
}

.permission-module:has(input[type="checkbox"]:checked) {
    border: 1px solid var(--orange);
    background-color: var(--lighter-orange);
}

.accessible-modules {
    margin-top: 20px;
}

.asigned-modules {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.asigned-module {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: 100px;
    border: 1px solid var(--orange);
    background-color: var(--lighter-orange);
    gap: 6px;
    width: fit-content;
}

.asigned-module p {
    color: var(--brown);
    font-size: 12px;
}

.upload-documents {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    gap: 10px;
    background-color: #f7f7f7;
    border: 1px solid #0c408820;
    border-radius: 10px;
}

.upload-document__info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-infos p:first-child {
    font-size: 12px;
    color: var(--dark-blue);
}

.document-properties {
    font-size: 9px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue50);
    margin-top: 1px;
}

.upload-document__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-document__actions .detail-action {
    border-radius: 4px;
    padding: 5px 10px;
}

.upload-document__actions .detail-action p {
    font-size: 12px;
}

.page-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--white);
    border-radius: 10px;
    border: 0.5px solid var(--dark-blue50);
    padding: 5px 15px;
    overflow-x: auto;
}

.page-tab {
    padding: 5px;
}

.page-tab p {
    font-size: 16px;
    color: var(--dark-blue50);
    text-wrap: nowrap;
}

.page-tab:hover p {
    cursor: pointer;
    color: var(--orange);
}

.page-tabs .active-tab {
    border-bottom: 4px solid var(--orange);
}

.page-tabs .active-tab p {
    color: var(--orange);
    font-family: var(--DMSans-Medium);
}

.history-group {
    display: flex;
    gap: 15px;
}

.history-pointers {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.history-pointer {
    width: 15px;
    height: 15px;
    border: 1px solid var(--orange);
    border-radius: 50%;
}

.filled-pointer {
    background-color: var(--orange);
}

.history-infos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.history-info p:first-child {
    font-size: 13px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Medium);
}

.history-info p:last-child {
    font-size: 10px;
    color: var(--dark-blue50);
    font-family: var(--DMSans-Light);
}

.lineto-pointer {
    width: 1px;
    height: 60px;
    background-color: var(--orange);
}

.detail-link {
    display: flex;
    align-items: center;
    gap: 15px;
}

.detail-link svg {
    color: var(--orange);
    cursor: pointer;
}

.deactivate-link__btn {
    background-color: #8e8e9310;
    border: 1px solid #8e8e9350;
    border-radius: 4px;
    padding: 4px 12px;
    margin-left: 10px;
}

.deactivate-link__btn p {
    font-size: 10px;
    color: var(--gray);
}

.deactivate-link__btn:hover {
    cursor: pointer;
}

.candidate-overview {
    display: flex;
    gap: 20px;
    position: relative;
}

.progress-dashboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* .detail-timeline {
    width: 30%;
} */

.employee-pic__wrapper {
    width: 205px;
    height: 200px;
    border: 1px solid var(--dark-blue);
    border-radius: 10px;
}

.employee-pic {
    width: 100%;
    height: 80%;
    background-color: #CEE2FE;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.employee-pic img {
    width: 100%;
    height: 100%;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.employee-pic__action {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 20%;
    padding: 0 10px;
    background-color: var(--light);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.pic-action {
    width: 24px;
    height: 24px;
    background-color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pic-action__outline {
    background-color: transparent;
}

.pic-action:hover {
    cursor: pointer;
}

/******************************************/
/********** End of Detail style ***********/
/******************************************/

/******************************************/
/*********** Dashboard style **************/
/******************************************/

.core-dashboard {
    margin: 15px 18px;
}

.dashboard-title p:first-child {
    font-size: 40px;
    font-family: var(--DMSans-ExtraLight);
    color: var(--dark-blue);
}

.dashboard-title p:last-child {
    font-size: 16px;
    color: var(--orange);
}

.dashboard-title p:last-child span {
    font-family: var(--DMSans-Bold);
}

.dashboard-separator {
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.dashboard-separator div:first-child {
    height: 2px;
    width: 100%;
    background-color: var(--dark-blue);
    opacity: 0.2;
}

.dashboard-separator div:last-child {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dark-blue);
    opacity: 0.2;
}

.cards-section {
    margin-top: 25px;
}

.cards-section .section-title {
    font-size: 16px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue);
    opacity: 0.7;
}

.nav-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 232px));
    row-gap: 12px;
    column-gap: 17px;
    margin-top: 17px;
}

.nav-card {
    background-color: var(--white);
    padding: 18px;
    border-radius: 15px;
    border: 0.5px solid var(--dark-blue50);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.nav-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-counter {
    padding: 3px 13px;
    border-radius: 100px;
    background-color: #fffafa;
    border: 0.5px solid #fcb78b;
}

.content-counter p {
    font-size: 14px;
    font-family: var(--DMSans-Medium);
    color: #fcb78b;
}

.card-information {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 23px;
}

.card-information p:first-child {
    color: var(--dark-blue);
    font-size: 18px;
}

.card-information p:last-child {
    color: #0c408870;
    font-size: 14px;
    font-family: var(--DMSans-Light);
}

.dashboard-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 40px;
}

.dashboard-section {
    background-color: #FFFFFF40;
    border: 1px solid var(--gray50);
    border-radius: 20px;
    padding: 16px 18px;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.dashboard-section .detail {
   overflow-y: auto;
   padding: 16px 8px;
   flex-grow: 1;
}

.dashboard-alerts {
    padding: 0 8px;
}

.dashboard-alert {
    border-bottom: 1px solid #0C408820;
    padding: 10px 0;
}

.dashboard-section__title {
    font-size: 21px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue);
    margin-bottom: 15px;
}

.alert-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-indicator {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    background-color: var(--orange);
    border-radius: 50%;
}

.alert-title {
    font-size: 20px;
    color: var(--orange);
    font-size: var(--DMSans-Medium);
}

.alert-description {
    font-size: 16px;
    color: var(--dark-blue50);
    margin-top: 5px;
}

/******************************************/
/******** End of Dashboard style **********/
/******************************************/

/******************************************/
/************** Profile style *************/
/******************************************/

.account-wrapper {
    display: flex;
    gap: 20px;
}

.account-right {
    width: 25%;
    height: fit-content;
}

.account-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.account-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-blue);
}

.account-pic p {
    font-size: 25px;
    color: var(--white);
    font-family: var(--DMSans-Bold);
}

.account-pic img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.account-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.account-info p:first-child {
    font-size: 22px;
    color: var(--dark-blue);
}

.account-role {
    font-size: 10px;
    color: var(--dark-blue50);
    margin: 2px 0 12px 0;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.account-action {
    display: flex;
    align-items: center;
    gap: 15px;
}

.account-action div {
    height: 32px;
    width: 3px;
}

.account-action p {
    font-size: 12px;
    color: var(--dark-blue);
}

.account-actions .active-tab {
    background-color: #faf1e0;
}

.account-actions .active-tab div {
    background-color: var(--orange);
}

.account-actions .active-tab p {
    font-family: var(--DMSans-Bold);
    color: var(--orange);
}

.account-action:hover {
    cursor: pointer;
    background-color: #faf1e0;
}

.account-left {
    width: 75%;
    border-radius: 15px;
    min-height: calc(100vh - 125px);
}

.account-title {
    font-size: 22px;
    color: var(--dark-blue);
}

.account-inputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.log-activitis {
    gap: 0;
    margin-top: 20px;
}

.log-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 0.5px solid var(--dark-blue50);
    padding: 10px 8px;
}

.log-activity div {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dark-blue50);
}

.log-activity .create-log {
    background-color: var(--green);
}

.log-activity .update-log {
    background-color: var(--dark-blue);
}

.log-activity .delete-log {
    background-color: var(--red);
}

.log-activity p {
    font-size: 12px;
    color: var(--dark-blue);
}

.log-activity p span {
    font-size: 11px;
    color: var(--dark-blue50);
}

/******************************************/
/********** End of Profile style **********/
/******************************************/

/******************************************/
/********** Form builder style ************/
/******************************************/

.builder-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    gap: 20px;
}

.form-builder__header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.builder-section {
    background-color: var(--light-blue);
    border: 1px solid var(--dark-blue50);
    border-radius: 10px;
    padding: 12px 10px;
    flex-grow: 1;
}

.builder-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.builder-section__title {
    font-size: 14px;
    color: var(--dark-blue);
    font-family: var(--DMSans-SemiBold);
}

.builder-section__header-status {
    background-color: #fffafa;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--orange50);
}

.builder-header__extended {
    justify-content: space-between;
}

.builder-header__extended .header-btn,
.header-btn__blue {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    padding: 6px 10px;
}

.builder-header__extended .header-btn:hover,
.header-btn__blue:hover {
    background-color: transparent;
}

.builder-header__extended .header-btn:hover p,
.builder-header__extended .header-btn:hover svg,
.header-btn__blue:hover p,
.header-btn__blue:hover svg {
    color: var(--dark-blue);
}

.builder-section__header-status p {
    font-size: 12px;
    color: var(--orange);
    font-family: var(--DMSans-Medium);
}

.builder-section__info {
    font-size: 12px;
    color: #0c408899;
    margin-top: 10px;
}

.vacancy-questions,
.builder-documents {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.vacancy-question {
    background-color: var(--white);
    border-radius: 10px;
    border: 1px solid #0c408830;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vacancy-question__left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.question_counter {
    width: 22px;
    height: 22px;
    background-color: #f2f2f7;
    border-radius: 50%;
    border: 1px solid #0c408810;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question_counter p {
    font-size: 12px;
    font-family: var(--DMSans-Medium);
    color: #aeaeb2;
}

.question-mover {
    cursor: grab;
}

.question-text {
    font-size: 12px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue);
}

.vacancy-question__right {
    display: flex;
    gap: 30px;
}

.question-structures {
    display: flex;
    align-items: center;
    gap: 7px;
}

.question-struture {
    padding: 5px 11px;
    background-color: #d1d1d130;
    border: 0.5px solid var(--gray);
    border-radius: 100px;
}

.question-struture p {
    font-size: 12px;
    color: var(--gray);
}

.question-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.qestion-action {
    border: 1px solid #999999;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox-status {
    background-color: #f9effd;
    border-color: var(--purple);
}

.checkbox-status p {
    color: var(--purple);
}

.dropdown-status {
    background-color: #e7f5fd;
    border-color: #0d4464;
}

.dropdown-status p {
    color: #0d4464;
}

.builder-document {
    background-color: var(--white);
    border-color: #0c408830;
}

.form-version {
    margin-top: 15px;
}

.form-version table thead tr th {
    background-color: var(--white);
}

.form-version table thead tr {
    color: #0c408880;
}

.form-version table thead tr th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.form-version table thead tr th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.form-version table tbody tr:last-child td {
    border-bottom: 1px solid #eaecf0;
}

.vacancy-question.dragging {
    opacity: 0.6;
    background: var(--orange50);
}

/******************************************/
/******** End of Form builder style *******/
/******************************************/

/******************************************/
/******** Publish Validation style ********/
/******************************************/

.publish-validations {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.publish-validation {
    background-color: var(--white);
    border: 1px solid var(--dark-blue50);
    border-radius: 10px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.publish-validation p {
    font-size: 12px;
    color: var(--dark-blue);
}

.publish-validated {
    border-color: #34c75950;
}

.publish-validated p,
.publish-validated svg {
    color: var(--green);
}

.publish-unvalidated {
    border-color: #ff383c50;
}

.publish-unvalidated p,
.publish-unvalidated svg {
    color: var(--red);
}

.validation-btns {
    justify-content: flex-end;
}

/******************************************/
/**** End of publish Validation style *****/
/******************************************/

/******************************************/
/************* Preview style **************/
/******************************************/

.paper {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 60px;
}

/******************************************/
/********** End of Preview style **********/
/******************************************/

/******************************************/
/*************** Modal style **************/
/******************************************/

.modal-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.import-modal,
.interviewer-modal,
.question-modal,
.document-modal,
.probation-modal,
.renewal-modal {
  display: none;
  width: 32em;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  padding: 1.25em;
  border-radius: 0.25rem;
  animation: bounceIn 0.5s;
  z-index: 2;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }

  70% {
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title p {
    font-size: 20px;
    color: var(--dark-blue);
    font-family: var(--DMSans-Medium);
}

.modal-closeicon {
    background-color: #0c408810;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.import-modalbody {
    background-color: var(--white);
    border-radius: 15px;
    border: 1px dashed #8e8e93;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
    cursor: pointer;
}

.import-modalbody .click-zone__prompt {
    text-align: center;
}

.fi-text {
    font-size: 15px;
    color: #8e8e93;
    font-family: var(--DMSans-Medium);
    margin-top: 15px;
}

.si-text {
    font-size: 10px;
    color: #8e8e9380;
    margin-top: 5px;
}

.import-template {
    font-size: 12px;
    color: var(--dark-blue);
    margin-top: 15px;
}

.import-template a {
    color: var(--orange);
    font-family: var(--DMSans-Medium);
}

.modal-btns {
    gap: 10px;
    width: 100%;
}

.modal-btns button {
    border-radius: 10px !important;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.modal-btns button span {
    font-family: var(--DMSans-Medium);
}

/* The loader container */
.modal-loader {
  width: 15px;
  height: 15px;
  border: 3px solid #f3f3f3; 
  border-radius: 50%;
  border-top: 3px solid #3498db;
  animation: spin 0.8s linear infinite;
}

/* The animation rules that handle the rotation */
@keyframes spin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

.modal_form__wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

/******************************************/
/*********** End of Modal style ***********/
/******************************************/

/******************************************/
/************* Portal style ***************/
/******************************************/

.portal-header {
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 100px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.portal-logo img {
    width: 140px;
}

.port-exit {
    display: flex;
    align-items: center;
    border: 1px solid var(--light-blue);
    padding: 10px 12px;
    border-radius: 10px;
    gap: 10px;
}

.port-exit p {
    color: var(--light-blue);
    font-size: 12px;
}

.port-exit:hover {
    cursor: pointer;
}

.portal-wrapper {
    width: 100%;
    height: calc(100vh - 8.6vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-wrapper_form {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 auto;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 40px 0;
}

.portal-content {
    background-color: var(--white);
    border-radius: 20px;
    padding: 20px;
    width: 50%;
}

.main-vacancy__details {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.vacancy-open {
    background-color: #f7620314;
    border-radius: 16px;
    padding: 4px 6px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 3px;
}

.vacancy-open p {
    font-size: 12px;
    font-family: var(--DMSans-Bold);
    color: var(--orange);
}

.vacancy-position {
    font-size: 30px;
    color: var(--dark-blue);
    margin: 10px 0;
}

.vacancy-information {
    font-size: 14px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue50);
}

.vacancy-info {
    background-color: #faf9f1;
    border: 1px solid #f7620310;
    padding: 34px 26px;
    border-radius: 15px;
}

.protal-text {
    font-size: 14px;
    color: var(--dark-blue);
}

.confirm-text {
    text-align: center;
}

.confirm-text p:first-child {
    font-size: 30px;
    color: var(--dark-blue);
}

.confirm-text p:last-child {
    font-size: 14px;
    color: var(--dark-blue50);
    font-family: var(--DMSans-Medium);
    margin-top: 20px;
}

.portal-form {
    display: flex;
    flex-direction: column;
    padding: 20px 0 10px 0;
    gap: 15px;
}

.protal-status {
    display: flex;
    align-items: center;
    gap: 13px;
}

.application-closes {
    font-size: 14px;
    color: var(--dark-blue);
}

.application-closes span {
    color: var(--orange);
    font-family: var(--DMSans-SemiBold);
}

.app-form__title {
    text-align: center;
    margin: 16px 0 50px 0;
}

.app-form__title p:first-child {
    font-size: 40px;
    color: var(--dark-blue);
}

.app-form__title p:last-child {
    font-size: 16px;
    color: var(--dark-blue);
    opacity: 0.9;
    margin-top: 5px;
}

.progress-counter {
    margin-bottom: 40px;
}

.step-indicators {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.step-indicator {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.separator {
    width: 80px;
    height: 1px;
    background-color: #0c408830;
}

.indicator-separator {
    display: flex;
    align-items: center;
}

.step-texts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.step-text {
    font-size: 10px;
    color: var(--dark-blue);
    width: 70px;
    text-align: center;
}

.active-step__indicator {
    border-color: var(--orange);
}

.previous-step__indicator {
    background-color: var(--orange);
    border-color: var(--orange);
}

.active-step__text {
    font-family: var(--DMSans-Bold);
}

.form-number {
    margin-bottom: 10px;
    display: none;
}

.form-section__title p:first-child {
    font-size: 20px;
    color: var(--dark-blue);
}

.form-section__title p:last-child {
    font-size: 12px;
    color: var(--dark-blue50);
    margin-top: 2px;
}

.form-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--white);
    border-radius: 10px;
    border: 1px dashed var(--dark-blue);
    padding: 8px 20px;
    width: fit-content;
    margin-top: 20px;
}

.form-add-btn p {
    font-size: 12px;
    font-family: var(--DMSans-SemiBold);
    color: var(--dark-blue);
}

.form-add-btn:hover {
    cursor: pointer;
}

.declaration-text {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.declaration-text li {
    font-size: 12px;
    color: var(--dark-blue);
}

.declaration-checkbox {
    background-color: #fffafa;
    border: 1px solid var(--orange50);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.declaration-checkbox span {
    font-size: 12px;
}

.review-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-description .detail-action {
    padding: 4px 10px;
    border-radius: 5px;
}

.review-responses {
    display: flex;
    flex-direction: column;
    gap: 33px;
    margin-top: 25px;
}

.responses-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-responses {
    background-color: #f1f4f8;
    border-radius: 10px;
    padding: 20px 12px;
}

.form-response__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 10px;
    border-bottom: 1px solid var(--dark-blue50);
}

.form-responses .form-response__row:last-child {
    border-bottom: none;
}

.response-label {
    font-size: 13px;
    color: #0c408860;
}

.response-value {
    font-size: 13px;
    color: var(--dark-blue);
}

.supporting-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.response-document {
    background-color: #e7f5fd;
    padding: 5px 11px;
    border-radius: 100px;
    width: fit-content;
    border: 1px solid #0d446450;
}

.response-document p {
    font-size: 12px;
    color: #0d4464;
}

.submitted-content {
    text-align: center;
}

.sumbitted-text {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 60%;
    justify-self: center;
    margin-top: 30px;
}

.sumbitted-text p:first-child {
    font-size: 30px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue);
}

.sumbitted-text p:last-child {
    font-size: 16px;
    color: var(--dark-blue);
}

.sumbitted-text p:last-child span {
    font-family: var(--DMSans-Bold);
}

@media (max-width: 1110px) {
    .portal-content {
        width: 70%;
    }
}

@media (max-width: 900px) {
    .separator {
        width: 45px;
    }
}

@media (max-width: 590px) {
    .portal-content {
        width: 80%;
    }

    .portal-header {
        padding: 5px 50px;
    }

    .sumbitted-text {
        width: 80%;
    }

    .sumbitted-text p:first-child {
        font-size: 25px;
    }

    .progress-counter {
        display: none;
    }

    .form-number {
        display: block;
    }

    .upload-document {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 390px) {
    .portal-content {
        width: 95%;
    }

    .portal-header {
        padding: 5px 10px;
    }

    .vacancy-info {
        padding: 20px 10px;
        border-radius: 15px;
    }

    .sumbitted-text {
        width: 100%;
    }
}

/******************************************/
/********** End of Portal style ***********/
/******************************************/

/******************************************/
/************ Calendar style **************/
/******************************************/

.calendar-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.main-calendar {
    width: 75%;
}

.upcoming-wrapper {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.today-event {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-of-today {
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.event-of-today .event-indicator {
    width: 14px;
    height: 14px;
}

.today-event__title {
    font-size: 18px;
    color: var(--dark-blue);
    text-align: center;
}

.today-event__info {
    font-size: 12px;
    color: var(--dark-blue50);
    text-align: center;
}

.upcoming-event {
    width: 100%;
    height: 370px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.event-title p {
    font-size: 18px;
    font-family: var(--DMSans-Light);
}

.today-event .event-title svg,
.today-event .event-title p {
    color: var(--orange);
}

.upcoming-event .event-title svg,
.upcoming-event .event-title p {
    color: var(--dark-blue);
}

.event-content {
    height: 100%;
}

.coming-events {
    overflow-y: scroll;
    scrollbar-width: thin;
}

.coming-events::-webkit-scrollbar {
    width: 4px;
}

.event-indicator {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    background-color: var(--gray50);
    border-radius: 50%;
}

.coming-event {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0.3px solid #0c408820;
    padding: 10px 0;
}

.interview-indicator {
    background-color: var(--orange);
}

.vacancy-indicator {
    background-color: #0e7490;
}

.event-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-info p:first-child {
    font-size: 13px;
    color: var(--dark-blue);
}

.event-info p:last-child {
    font-size: 10px;
    color: var(--dark-blue50);
}

/******************************************/
/******** End of Calendar style ***********/
/******************************************/
/************** Stats style ***************/
/******************************************/

.stats-section {
    background-color: var(--white);
    border: 1px solid var(--gray50);
    border-radius: 100px;
    padding: 17px 19px;
    display: flex;
    gap: 30px;
}

.stats {
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid var(--dark-blue50);
    flex-grow: 1;
}

.stats:last-child {
    border: none;
}

.stats div:first-child {
    padding: 8px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orange-stats-icon {
    background-color: #FFF4ED;
    color: var(--orange);
}

.green-stats-icon {
    background-color: #ECFDF5;;
    color: var(--green);
}

.yellow-stats-icon {
    background-color: #FFFBEB;
    color: var(--yellow);
}

.blue-stats-icon {
    background-color: #EFF6FF;
    color: #0088FF;
}

.red-stats-icon {
    background-color: #FEF2F2;
    color: var(--red);
}

.stats-info {
    flex-direction: column;
}

.stats .stats-info p:first-child{
    font-size: 14px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue);
}

.stats .stats-info p:last-child{
    font-size: 25px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue);
}


/******************************************/
/********** End of Stats style ************/
/******************************************/

















































































































/******************************************/
/************** Cards style ***************/
/******************************************/

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 17px;
    margin-bottom: 17px;
}

.card {
    background-color: var(--white);
    border: 1px solid var(--gray50);
    border-radius: 15px;
    padding: 17px 19px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title p {
    font-size: 14px;
    color: var(--dark-blue);
}

.card-title .card-icon {
    background-color: #fff4ed;
    padding: 8px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-counter {
    font-size: 40px;
    color: var(--dark-blue);
}

.card-statistics {
    display: flex;
    align-items: center;
    gap: 1px;
}

.card-statistics p {
    font-size: 10px;
    font-family: var(--DMSans-Medium);
}

.positive-statistics svg,
.positive-statistics p {
    color: var(--green);
}

.negative-statistics svg,
.negative-statistics p {
    color: var(--red);
}

/******************************************/
/********** End of Cards style ************/
/******************************************/


.stats-section {
    background-color: var(--white);
    border: 1px solid var(--gray50);
    border-radius: 100px;
    padding: 17px 19px;
    display: flex;
    gap: 30px;
}

.stats {
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid var(--dark-blue50);
    flex-grow: 1;
}

.stats:last-child {
    border: none;
}

.stats div:first-child {
    padding: 8px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orange-stats-icon {
    background-color: #fff4ed;
    color: var(--orange);
}

.green-stats-icon {
    background-color: #ecfdf5;
    color: var(--green);
}

.yellow-stats-icon {
    background-color: #fffbeb;
    color: var(--yellow);
}

.blue-stats-icon {
    background-color: #eff6ff;
    color: #0088ff;
}

.red-stats-icon {
    background-color: #fef2f2;
    color: var(--red);
}

.stats div:last-child p:first-child {
    font-size: 14px;
    font-family: var(--DMSans-Light);
    color: var(--dark-blue);
}

.stats div:last-child p:last-child {
    font-size: 25px;
    font-family: var(--DMSans-Medium);
    color: var(--dark-blue);
}

/******************************************/
/********** End of Stats style ************/
/******************************************/

/******************************************/
/***************** 404 style **************/
/******************************************/

.content-404 {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cloud-wrapper {
    width: 70%;
    height: 400px;
    margin-top: -180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.info-cloud {
    width: inherit;
    height: inherit;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    filter: blur(50px);
}

.info-404 {
    position: absolute;
    top: 40%;
    text-align: center;
}

.info-404 p {
    font-size: 25px;
    color: var(--dark-blue);
}

.info-404 button {
    background-color: var(--orange);
    color: var(--white);
    border: none;
    padding: 15px 19px;
    border-radius: 6px;
    margin-top: 50px;
    cursor: pointer;
}

/******************************************/
/*********** End of 404 style *************/
/******************************************/

/******************************************/
/********** Media Query styles ************/
/******************************************/

@media (max-width: 1045px) {
    .sidebar {
        padding: 20px 15px;
    }
}