/* Variable define */
:root
{
    /* Font Family Variables */
    /* --font-primary: 'Poppins', sans-serif; */
    /* --font-primary: 'Poppins', sans-serif; */
    --font-inter: 'Inter', sans-serif;
    --font-primary: var(--font-inter);

    --font-secondary: var(--font-primary);
    --font-heading: var(--font-primary);
    --font-primary: var(--font-inter);

    --font-secondary: var(--font-primary);
    --font-heading: var(--font-primary);

    /* Color Variables */
    --color-primary-hsl: 164, 100%, 23%; /* #007456 */
    --color-primary: hsl(var(--color-primary-hsl));    /* Primary color, e.g., blue */
    --color-secondary: #04231B;  /* Secondary color, e.g., gray */
    --color-body-text: #465866;     /* Body text color */
    --color-slate-blue: var(--color-body-text);    /* Slate blue color for accents and highlights */
    --color-sub-heading: #223543; /* Background color */
    --color-outline-button: #DEDEDE; /* Primary text color */
    --color-text-secondary: #6C757D; /* Secondary text color */
    --color-icon-outlined: #828282;
    --color-heading-text: #111E2C;
    --color-disable-text: #97A2A6;

    --color-line-divider: #F8F8F8;
    --color-tertiary-01: #E3DBFA;
    --color-tertiary-02: #FBE2F4;
    --color-tertiary-03: #FFE1CC;
    --color-tertiary-04: #D4F6ED;
    --color-dashboard-bg: #F7F7FA;

    --font-size-heading: 24px;
    --font-size-sub-heading: 16px;
    /* UI28: body default is 13px. This token is the single app default,
       consumed by `body` and the generic `p` rule. Set to 13 (from 15) when
       the app went back to its production proportions without the 80% zoom. */
    --font-size-body: 13px;
    --font-size-caption: 12px;

    --font-weight-bold: 700;
    --font-weight-semi-bold: 600;
    --font-weight-medium: 500;

    /* Bootstrap Variables */

    --bs-primary: #007456;
    --bs-primary-rgb: 0, 116, 86;

    /* Transition variables */
    --ease-in-out: all .3s ease-in-out;
    --down-carot: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    --down-white-carot: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
}

*:focus-visible,
*:focus,
*:active
{
    outline: none !important;
}

body{
    margin: 0;
    /* UI28: the single app default. Body is 13/400; an element with no
       typography of its own lands here instead of on an accident. */
    font-size: var(--font-size-body);
    font-weight: 400;
    zoom: 100% !important;
    font-family: var(--font-inter);
    background: #F7F7FA !important;
}

body > .content table .dropdown-toggle::after
{
    border: none !important;
}

body > .content
{
    margin-right: 0;
}

/* UI28/UI29 (#604): the app-wide 80% scale-down was removed here. The app now
   renders at its true size; sizes below are the sizes we mean. */

/* UI30/UI32 (#604): bold emphasis is the UI28 emphasis weight (600), not the
   heaviest weight on the page. No !important, so a screen can still override. */
b, strong
{
    font-weight: 600;
}

.disabled, [disabled]
{
    pointer-events: none !important;
}

.italic
{
    font-style: italic;
}

.border-bottom{
    border-bottom: 1px solid var(--color-outline-button) !important;
}

[role="link"],
[role="button"],
[data-url]
{
    cursor: pointer !important;
}

/* Font classes */
.inter{
    font-family: var(--font-inter);
}

.baloo-bhai2{
    font-family: var(--font-heading);
}

.proxima-nova{
    font-family: var(--font-secondary);
}

.font-primary
{
    font-family: var(--font-primary) !important;
}

/* HTML ELEMENT TAG */

h3{
    font-size: 29px;
    font-family: var(--font-heading);
    line-height: 1.2;
}

p{
    color: var(--color-body-text);
    font-size: var(--font-size-body);
}

.bg-primary
{
    background-color: var(--color-primary) !important;
}

.white-bg
{
    background-color: #fff;
}

.bg-line-divider
{
    background-color: var(--color-line-divider);
}

.bg-primary-badge
{
    color: #9772C7;
    background-color: #E3DBFA;
    border: 1px solid #9772C7;
}

.badge
{
    min-height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    line-height: unset;
}

.badge.badge-icon
{
    padding: 0;
    min-width: 19px;
}

.badge.badge-pill
{
    padding: 0 10px;
    min-height: 26px;
    min-width: 26px;
    text-align: center;
}

.badge.badge-light-purple
{
    color: #223543;
    background-color: #E3DBFA;
    border: 1px solid #9772C7;
}

.badge.badge-light-warning
{
    color: #223543;
    background-color: #FFF3CD;
    border: 1px solid #FFC107;
}

.badge.badge-light-purple-2
{
    color: #9772C7;
    background-color: #E3DBFA;
    border: 1px solid #9772C7;
}

.badge.badge-light-teal-green
{
    color: #0F9E79;
    background-color: #F6F7F9;
    border: 1px solid #4FA18C;
}

.badge.badge-light-danger
{
    color: #223543;
    background-color: #FFE6E8;
    border: 1px solid #FF4C8D;
}

.badge.badge-light-success
{
    color: #223543;
    background-color: #DAF3C8;
    border: 1px solid #208369;
}

.badge.badge-light-success-2
{
    color: #0F9E79;
    background-color: #E0FACD;
    border: 1px solid #0F9E79;
}

.badge.badge-light-blue
{
    color: #4A65ED;
    background-color: #D8E4FE;
    border: 1px solid #4A65ED;
}

.badge.badge-teal-blue
{
    color: #4A65ED;
    background-color: #2AEAFF;
    border: 1px solid #6982FF;
}

.badge.badge-light-orange
{
    color: #223543;
    background-color: #FFE1CC;
    border: 1px solid #FF9043;
}

.badge.badge-light-gray
{
    color: #223543;
    background-color: #efefef;
    border: 1px solid #b9b9b9;
}

.bg-orange
{
    background-color: #FF9043 !important;
}

.badge.badge-light
{
    color: #000;
    background: var(--color-dashboard-bg);
}

.btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* min-height: 44px; */
    font-weight: 500;
}

.btn.btn-white
{
    color: #465866 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn-check:checked+.btn-white
{
    border-color: var(--color-primary) !important;
}

.btn.btn-white
{
    color: #465866 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn.btn-light, .badge.badge-light
{
    color: #828282;
}

.btn.btn-gray-2
{
    color: #828282;
    background-color: #E7E7E7;
    border-color: #E7E7E7;
}

.btn.btn-gray-2:hover
{
    color: #828282;
    background-color: #E8E8E8;
}

.btn.btn-gray-3
{
    color: #223543;
    background-color: #97A2A6;
    border-color: #97A2A6;
}

.btn.btn-gray-3:hover
{
    background-color: #97A2A6;
}

.btn.btn-outline-gray-3
{
    color: #223543;
    background-color: transparent;
    border-color: #97A2A6;
}

.btn.btn-outline-gray-3:hover
{
    color: var(--bs-white);
    background-color: #97A2A6;
}

.btn.btn-gray-4
{
    color: #363538;
    background: #DCDCDC;
    border-color: #DCDCDC;
}

.btn.btn-gray-4:hover
{
    background: #DCDCDC;
}

.btn.btn-gray-5
{
    color: #828282;
    background: #F7F7FA;
    border-color: #F7F7FA;
}

.btn.btn-gray-5:hover
{
    background: #f3f3f6;
    border-color: #f3f3f6;
}

.btn.btn-gray-6
{
    color: #828282;
    background: #F8F8F8;
    border-color: #F8F8F8;
}

.btn.btn-gray-6:hover
{
    background: #f3f3f6;
    border-color: #f3f3f6;
}

.btn.btn-outline-gray-7
{
    color: #828282;
    border-color: #dedede;
    background-color: transparent;
}

.btn.btn-outline-gray-7:hover
{
    color: #828282;
    background-color: #dedede;
}

.btn.btn-gray-8
{
    color: #E0FACD;
    background: #828282 !important;
    border-color: #828282 !important;
}

.btn.btn-gray-8:hover
{
    background: #777777 !important;
    border-color: #777777 !important;
}

.btn.btn-gray-9
{
    color: #363538;
    background-color: #F0F0F0;
    border-color: #DEDEDE;
}

.btn.btn-gray-9:hover
{
    background-color: #DEDEDE;
}

.btn.btn-outline-gray-10
{
    color: #828282;
    border-color: #828282;
    background-color: transparent;
}

.btn.btn-outline-gray-10:hover
{
    color: #fff;
    background-color: #828282;
}

.btn.btn-slate-blue
{
    color: var(--color-slate-blue);
    background-color: var(--bs-white);
    border: 1px solid var(--color-slate-blue);
}

.btn.btn-slate-blue:hover
{
    color: var(--color-slate-blue);
    background-color: var(--bs-white);
}

.btn:focus, .btn:active, .btn:hover
{
    outline: none !important;
    box-shadow: none !important;
}

.btn.btn-flush
{
    border: none !important;
}

.btn.btn-flat.btn-success
{
    background: none !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

.btn.btn-flat.btn-success:hover,
.btn.btn-flat.btn-success:active,
.btn.btn-flat.btn-success:focus
{
    color: var(--bs-white) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Position */

.relative
{
    position: relative !important;
}

.transform-0{
    transform: translate(0px, 0px) !important;
}

.bg-transparent
{
    background-color: transparent;
}

/* COLOR CLASSES */

.color-primary{
    color: var(--color-primary);
}

.color-secondary{
    color: var(--color-secondary);
}

.color-outline-text{
    color: var(--color-icon-outlined) !important;
}

.color-sub-heading{
    color: var(--color-sub-heading);
}

.color-heading-text{
    color: var(--color-heading-text);
}

.color-disable-text{
    color: var(--color-disable-text);
}

.white{
    color: #fff;
}

.color-body-text{
    color: var(--color-body-text);
}

.color-arrow{
    color: #363538;
}

.purple-badge{
    background-color: var(--color-tertiary-01);
    color: #9772C7;
    border: 1px solid #9772C7;
    padding: 3px 6px;
    width: fit-content;
    border-radius: 40px;
}

.bg-wrapper
{
    border-radius: 13px !important;
    background: var(--bs-white) !important;
    box-shadow: 0px 2px 10px 0px rgba(140, 140, 140, 0.10) !important;
}

/* FONT WEIGHT CLASSES */

.bold{
    font-weight: 700;
}

.semi-bold{
    font-weight: 600 !important;
}

.medium{
    font-weight: 500;
}

.regular{
    font-weight: 400;
}

.light{
    font-weight: 300;
}

/* FONT  SIZES CLASSES */

.font-xs
{
    font-size: 11px;
}

/* UI28 (#604): these utilities no longer carry !important, so an element's own
   css wins over the utility (e.g. the funnel tab row asks for 15px and gets it,
   instead of being forced to 18px by .font-md). */
.font-sm
{
    font-size: 11px;
}

.font-base
{
    font-size: 13px;
}

.font-md
{
    font-size: 14px;
}

.font-lg
{
    font-size: 16px;
}

.font-xl{
    font-size: 19px;
}

.font-xxl{
    font-size: 22px;
}

/* BUTTON CLASSES HERE */

.primary-link{
    font-size: 11px;
    font-family: var(--font-secondary);
    font-weight: 700;
    text-decoration: none;
    transition: var(--ease-in-out);
}

.primary-link:hover, .primary-link:active, .primary-link:focus{
    color: var(--color-secondary);
}

.btn-info{
    background-color: #FFC700;
    color: #fff;
    border: 1px solid #FFC700;
}

.btn-info:hover, .btn-info:active, .btn-info:focus{
    background-color: #a88917;
    color: #fff;
    border: 1px solid #a88917;
}

.btn-primary{
    border-radius: 40px;
    padding: 11px 20px;
    width: 100%;
    font-size: 13px;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-family: var(--font-secondary);
    transition: var(--ease-in-out);
    border: 1px solid var(--color-primary);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus{
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-decline{
    border-radius: 40px;
    padding: 11px 32px;
    font-size: var(--font-size-sub-heading);
    font-weight: 500;
    color: #5c5c5c;
    border: 1px solid #797979;
    border-radius: 40px;
}

.btn-decline:hover, .btn-decline:focus, .btn-decline:active{
    color: #fff;
    background-color: #797979;
}

.white-btn{
    background-color:#fff;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

.white-btn:hover, .white-btn:active, .white-btn:focus{
    background-color: var(--color-secondary);
    color: #fff;
}

.white-btn span{
    transition: var(--ease-in-out);
}

.white-btn:hover span, .white-btn:active span, .white-btn:focus span{
    color: #00d19b;
}

.white-btn:hover span svg path, .white-btn:active span svg path, .white-btn:focus span svg path{
    fill: #fff;
}

.gray-icon-btn{
    transition: var(--ease-in-out);
}

.gray-icon-btn:hover{
    background-color: var(--color-outline-button);
}

.btn.btn-icon
{
    display: inline-flex !important;
}

.btn.btn-outline-danger,
.btn.btn-icon.btn-outline-danger
{
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.btn.btn-outline-danger:hover,
.btn.btn-icon.btn-outline-danger:hover
{
    color: var(--bs-white) !important;
    background: var(--bs-danger) !important;
}

/* Only hover classes */

.hover-bg-white:hover{
    background-color: #fff !important;
}

/* Other predefined classes */

.mw-75{
    max-width: 75%;
    width: 100%;
}

.text-left
{
    text-align: left;
}

.min-h-full
{
    min-height: 100%;
}

.min-w-full
{
    min-width: 100%;
}

.decoration-none{
    text-decoration: none;
}

.border-outline{
    border: 1px solid var(--color-outline-button);
    border-radius: 6px;
}

.p-12{
    padding: 10px;
}

/* Login_new Page Style starts here */

@media (min-width: 1500px)
{
    .container{
        max-width: 1152px;
        padding: 0px 18px;
    }
}

.message-wrapper{
    padding: 16px 10px;
    max-width: 536px;
    /* width: 100%; */
}

.login-message-container{
    border-radius: 19px;
    border: 1px solid #DEDEDE;
    background: #F4F4F6;
    padding: 63px 39px 33px 38px;
    height: 100%;
}

.login-message-container h1{
    font-family: var(--font-heading);
}

.login-message-container p{
    color: var(--color-body-text);
    font-size: 16px;
    margin-bottom: 0px;
    font-family: var(--font-secondary);
}

.image-block{
    filter: drop-shadow(10px 14px 24px rgba(0, 0, 0, 0.25));
    z-index: 2;
    text-align: right;
}

.image-block .contract-img{
    margin: -29px 33px 0px auto;
    box-shadow: -6px 20px 34px 0px rgba(0, 0, 0, 0.25);
    z-index: 5;
}

.img-responsive{
    display: inline-block;
    max-width: 100%;
    height: auto;
    width: auto;
}

.company-carousel{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.signin-container{
    max-width: 432px;
    width: 100%;
}

.logo-block{
    margin-bottom: 56px;
}

.signin-block h5{
    font-size: 27px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-sub-heading);
}

.signin-block p{
    font-family: var(--font-secondary);
    color: var(--color-body-text);
}

.form-label span{
    font-size: 11px;
    font-family: var(--font-secondary);
    color: var(--color-secondary);
    font-weight: 700;
}

.form-label{
    margin-bottom: 3px;
}

.form-control{
    border: 1px solid var(--color-outline-button);
    border-radius: 6px;
    height: 43px;
    color: var(--color-sub-heading);
}

.form-control:focus
{
    box-shadow: none;
    border-color: var(--color-body-text);
    outline: none;
}

.form-control:disabled,
.form-control[readonly]
{
    pointer-events: none;
}

.form-control, .form-select
{
    min-height: 43px;
    padding-left: 19px;
    padding-right: 19px;
}

.form-control.form-control-solid,
.form-select.form-select-solid
{
    border-color: transparent;
    background-color: #F6F7F9;
}

.form-control.form-control-solid:focus
{
    border-color: transparent;
    background-color: #f0f0f0;
}

.form-select.form-select-solid:focus,
.form-select.form-select-solid:active,
.form-select.form-select-solid:hover
{
    border-color: transparent;
    background-color: #f0f0f0;
}

.form-control::placeholder
{
    opacity: 0.5;
    font-style: italic;
    font-weight: normal;
    color: var(--color-body-text);
}

.form-check .form-check-input-lg
{
    width: 19px !important;
    height: 19px !important;
}

.forgot-password span{
    font-size: 11px;
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-secondary);
}

.section-block .text{
    font-size: 11px;
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-icon-outlined);
}

.section-block .dash{
    display: inline-block;
    max-width: 176px;
    width: 100%;
    height: 1px;
    background-color: var(--color-outline-button);
}

.social-media-block{
    margin-bottom: 32px;
}

.social-media-block div p{
    max-width: 75px;
    width: 100%;
    font-size: 11px;
    font-family: 'inter', sans-serif;
    font-weight: 600;
    color: var(--color-sub-heading);
    line-height: 1.1;
    margin: 0px 0px 0px 2px;
}

.visit{
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--color-secondary);
}

/* Login_new Page style ends here */

/* Base_new.html (Sidebar) style starts here */

/* Scrollbar designing */


body::-webkit-scrollbar
{
    width: 5px; /* Width of vertical scrollbar */
    height: 5px; /* Height of horizontal scrollbar */
}

/* Track (background of scrollbar) */
body::-webkit-scrollbar-track
{
    background: #f1f1f1; /* Light gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb (the draggable part of scrollbar) */
body::-webkit-scrollbar-thumb
{
    background: #888; /* Dark gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb on hover */
body::-webkit-scrollbar-thumb:hover
{
    background: #555; /* Darker gray */
}

.sidebar
{
    height: 100%;
    width: 240px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* Story #543: the sidebar itself no longer scrolls as one block -- only
       #sidebarNav (the middle zone) does, see below. The top zone (logo +
       collapse control) and the bottom zone (.bottom_nav_sidebar) stay put. */
    overflow: visible;
    transition: width .15s ease;
}

/* Story #543 -- collapsing sidebar (FB-NAV-01, Figma 435:2). Three zones:
   .sidebar-top and .bottom_nav_sidebar never scroll and never move between
   the two states; #sidebarNav is the only zone that scrolls. Collapsed is a
   plain class toggle (persisted in localStorage, see the inline scripts in
   base.html next to #appSidebar), so it works for every role -- the sidebar
   markup itself is role-gated server-side and unchanged by this ticket. */
.sidebar-top
{
    flex: none;
}

.sidebar-nav-scroll
{
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.bottom_nav_sidebar
{
    flex: none;
}

.sidebar-nav-scroll::-webkit-scrollbar {
    width: 0 !important; /* Width of vertical scrollbar */
    height: 6px; /* Height of horizontal scrollbar */
}

/* Track (background of scrollbar) */
.sidebar-nav-scroll::-webkit-scrollbar-track
{
    background: #f1f1f1; /* Light gray */
    border-radius: 5px; /* Optional rounded corners */
}

/* Thumb (the draggable part of scrollbar) */
.sidebar-nav-scroll::-webkit-scrollbar-thumb
{
    background: #888; /* Dark gray */
    border-radius: 5px; /* Optional rounded corners */
}

/* Thumb on hover */
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover
{
    background: #555; /* Darker gray */
}

.modal-body::-webkit-scrollbar
{
    width: 5px; /* Width of vertical scrollbar */
    height: 5px; /* Height of horizontal scrollbar */
}

/* Track (background of scrollbar) */
.modal-body::-webkit-scrollbar-track
{
    background: #f1f1f1; /* Light gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb (the draggable part of scrollbar) */
.modal-body::-webkit-scrollbar-thumb
{
    background: #888; /* Dark gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb on hover */
.modal-body::-webkit-scrollbar-thumb:hover
{
    background: #555; /* Darker gray */
}

.which_recruiter::-webkit-scrollbar
{
    width: 5px; /* Width of vertical scrollbar */
    height: 5px; /* Height of horizontal scrollbar */
}

/* Track (background of scrollbar) */
.which_recruiter::-webkit-scrollbar-track
{
    background: #f1f1f1; /* Light gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb (the draggable part of scrollbar) */
.which_recruiter::-webkit-scrollbar-thumb
{
    background: #888; /* Dark gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb on hover */
.which_recruiter::-webkit-scrollbar-thumb:hover
{
    background: #555; /* Darker gray */
}

.table-responsive::-webkit-scrollbar
{
    width: 5px; /* Width of vertical scrollbar */
    height: 5px; /* Height of horizontal scrollbar */
}

/* Track (background of scrollbar) */
.table-responsive::-webkit-scrollbar-track
{
    background: #f1f1f1; /* Light gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb (the draggable part of scrollbar) */
.table-responsive::-webkit-scrollbar-thumb
{
    background: #888; /* Dark gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb on hover */
.table-responsive::-webkit-scrollbar-thumb:hover
{
    background: #555; /* Darker gray */
}

.table-sticky-head thead th
{
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

.bottom_nav_sidebar
{
    display: flex;
    flex-direction: column;
}

/* One row model for every nav link, in the scroll zone and the pinned
   profile zone alike: a flex row, a fixed 20px icon slot, one 12px gap and a
   15/400 label. Before this the profile zone was not flex at all (its links
   are grandchildren of .sidebar, so `.sidebar>a` never matched and sat at
   16px), inline SVGs came in at 16, 20 or 24px and the font icons carried
   their own 15px margin, which is why no two labels started at the same x. */
.bottom_nav_sidebar>a,
.sidebar>a,
.sidebar-nav-scroll>a
{
    text-decoration: none;
    color: var(--color-icon-outlined);
    /* UI28/UI29: nav links sit at body size (13), never larger than the work
       area. Kept at 400 so navigation reads calm, not louder than the work. */
    font-size: 13px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* The icon slot. Every icon, inline SVG or Bootstrap Icons glyph, is boxed at
   20x20 so the label always starts at the same x. An SVG with a non-square
   viewBox is letterboxed inside the slot; the slot aligns, not the drawing.
   The CSS size wins over the width/height attributes the SVGs still carry. */
.menu-button > svg,
.menu-button > i
{
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
}

.menu-button > i
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A bi glyph fills its em; the custom SVGs leave about 1.5 units of air on
       an 18-unit grid. 18px puts both sets at the same optical size. */
    font-size: 18px;
    line-height: 1;
}

/* The group caret: the same Lucide chevron as the collapse control in the
   sidebar top (N1: one line-icon set, 16px, stroke 1.8), not Bootstrap's
   border triangle. Drawn as a mask so it takes the row's text colour, green
   included when the group is active. It sits on the row's right edge, on one
   x for every group, and turns over while the group is open. */
.menu-button.dropdown-toggle::after
{
    margin-left: auto;
    width: 16px;
    height: 16px;
    border: 0;
    vertical-align: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
}

.menu-button.dropdown-toggle[aria-expanded="true"]::after
{
    transform: rotate(180deg);
}

.sidebar>a .badge,
.sidebar-nav-scroll>a .badge
{
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    height: 20px;
    width: 20px;
    flex: 0 0 20px;
    border-radius: 99px;
    margin-left: 4px;
}

.sidebar>a .badge.badge-danger,
.sidebar-nav-scroll>a .badge.badge-danger
{
    background-color: #FF7171 !important;
}

.sidebar>a .badge-success,
.sidebar-nav-scroll>a .badge-success
{
    background-color: #29A983;
}

.sidebar .green
{
    color: var(--color-primary);
}

.sidebar .grey
{
    color: var(--color-body-text);
}

.bottom_nav_sidebar .green
{
    color: var(--color-primary);
}

.bottom_nav_sidebar .grey
{
    color: var(--color-body-text);
}

.content
{
    flex: 1;
    margin-left: 240px;
    padding: 32px 24px;
    margin-right: 24px;
    transition: margin-left .15s ease;
}

/* Story #543 -- collapsing sidebar (FB-NAV-01, Figma 435:2). */

.sidebar-collapse-toggle
{
    border: 1px solid var(--color-outline-button);
    border-radius: 7px;
    color: var(--color-icon-outlined);
    flex: none;
}

.sidebar-collapse-toggle:hover
{
    background-color: #F4F7F3;
}

.sidebar-collapse-toggle .icon-expand
{
    display: none;
}

.sidebar.collapsed
{
    width: 88px;
}

body.sidebar-collapsed .content
{
    margin-left: 88px;
}

/* The uploaded tenant logo has no separate small "mark" asset to fall back
   to (unlike the FB-NAV-01 mockup's two-part logo), so collapsed hides it
   rather than showing a cropped/squeezed image. The zone itself still never
   scrolls and still holds the collapse control, which is what the ticket
   asks for; only the wordmark disappears. */
.sidebar.collapsed #logo_img
{
    display: none;
}

.sidebar.collapsed .sidebar-top
{
    /* Bootstrap's .justify-content-between utility (in the template markup)
       is itself !important, so overriding it here needs !important too. */
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-collapse-toggle .icon-collapse
{
    display: none;
}

.sidebar.collapsed .sidebar-collapse-toggle .icon-expand
{
    display: flex;
}

/* Icon-only rows. Text collapses via font-size:0 on the link itself (icons
   keep their own explicit size, see ".sidebar i" / inline svg width+height
   below) rather than wrapping every label in a span: nothing here changes
   which items exist or how they are grouped, only how the existing markup
   is painted, so a screen reader still gets the full link text either way. */
.sidebar.collapsed .menu-button,
.sidebar.collapsed .menu-title
{
    font-size: 0;
}

.sidebar.collapsed .menu-button
{
    justify-content: center;
    padding: 10px 6px;
    gap: 0;
}

.sidebar.collapsed .menu-button i,
.sidebar.collapsed .menu-button svg
{
    margin-right: 0;
}

.sidebar.collapsed .dropdown-toggle::after
{
    display: none;
}

/* A group heading becomes a thin divider line rather than disappearing --
   the text is still there for assistive tech, just visually zero-size. */
.sidebar.collapsed .menu-title
{
    height: 0;
    width: 34px;
    margin: 16px auto;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--color-outline-button);
}

.menu-button:hover,
.menu-button:active,
.menu-button:focus,
.menu-button.active
{
    background-color: #F4F7F3;
    border-color: #DEDEDE;
}

.menu-button i
{
    color: inherit;
}

.menu-button.active
{
    color: var(--color-primary) !important;
    /* box-shadow: 0px 3px 12.9px 0px #8C8C8C1A; */
}

.footer
{
    background-color: var(--color-primary);
    color: #ffffff;
    text-align: center;
    padding: 8px;
    bottom: 0;
    width: 100%;
    margin-top: 16px;
}

hr
{
    border: 1px solid #cacaca;
    padding: 0px;
    margin: 8px;
}

.dropdown-menu
{
    width: 240px;
}

.dropdown-menu > a:active
{
    background-color:white;
    color: gray;
}

.dropdown-item
{
    color: gray;
    font-size: 12px;
    font-weight: 400;
}

#logo_img
{
    width: 200px;
}

.menu-button
{
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    border: 1px solid transparent;
    background-color: #ffffff;
    border-radius: 10px;
    font-size: 12px;
    font-family: var(--font-inter);
    cursor: pointer;
    transition: background-color 0.3s;
    color: var(--color-icon-outlined);
}

.dashboard-button{
    background-color: #F4F7F3;
    padding: 8px 18px;
    border: 1px solid var(--color-outline-button);
    border-radius: 8px;
    font-weight: 600 !important;
    color: var(--color-sub-heading) !important;
}

.menu-title{
    color: var(--color-body-text);
    font-family: var(--font-inter);
    /* UI29 (#604): navigation is secondary. A sidebar group title is a label
       (13/600), never larger or heavier than the work-area heading it points at. */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    margin: 20px 0px 8px 6px;
}

.dropdown-menu{
    border: none;
    width: 100%;
}

.dropdown-item{
    color: var(--color-icon-outlined);
    font-family: var(--font-inter);
    margin-left: 18px;
    padding: 10px 10px 10px 26px;
    width: auto;

    position: relative;
    z-index: 2;
}

.dropdown-item::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: -7px;
    left: 5px;
    width: 4px;
    height: 15px;
    background-color: #E7E7E7;
}

.dropdown-item::before{
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background-color: #E7E7E7;
}

/* Sidebar submenu rows. A flex row at the group row's size (13px text, 8px
   vertical padding, 16px right padding), so a trailing plus or count sits on
   the right edge under the group's caret, and every label starts on the same
   x as the plain items. The left geometry (22px margin, 33px padding) is what
   the dot-and-dash tree in ::before/::after is drawn against; unchanged. */
#appSidebar .dropdown-item
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 33px;
    font-size: 13px;
}

#appSidebar .dropdown-item > svg,
#appSidebar .dropdown-item > .badge
{
    margin-left: auto;
    flex: none;
}

#appSidebar .dropdown-item > svg
{
    width: 18px;
    height: 18px;
}

/* The count is a 16px pill (same size as the notification count in the
   profile zone), not Bootstrap's em-based badge. */
#appSidebar .dropdown-item > .badge
{
    height: 16px;
    /* .badge at app level says min-height 24px, which beats height. */
    min-height: 16px;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus
{
    color: var(--color-primary);
}

.dropdown-item:active svg path, .dropdown-item:hover svg path, .dropdown-item:focus svg path
{
    fill: var(--color-primary);
}

.dropdown-item:active::before, .dropdown-item:hover::before, .dropdown-item:focus::before
{
    background-color: var(--color-primary);
}

.dropdown-item.active
{
    color: var(--color-primary);
    background-color: transparent;
}

.dropdown-item.active svg path{
    fill: var(--color-primary);
}

.dropdown-item.active::before
{
    background-color: var(--color-primary);
}

/* Table View Style starts here */

h2{
    font-family: var(--font-inter);
    color: var(--color-heading-text);
}

.card-wrapper{
    background-color: transparent;
}

.card-wrapper:hover, .card-wrapper:active, .card-wrapper:focus{
    background-color: transparent !important;
}

.my-24{
    margin: 19px 0px;
}

.form-select
{
    cursor: pointer;
    font-family: var(--font-inter);
    /* padding: 10px; */
    color: var(--color-sub-heading);
    border: 1px solid var(--color-outline-button);
    border-radius: 6px !important;
    background-image: var(--down-carot);
}

.form-select:focus
{
    box-shadow: none;
    border-color: var(--color-body-text);
    outline: none;
}

.form-filter{
    height: 38px;
    color: var(--color-body-text);
}

.fyi-button{
    border-radius: 6px;
    padding: 10px 20px;
}

.work-hours{
    padding: 11px 6px;
    font-size: 14px;
    font-family: var(--font-inter);
    color: var(--color-body-text);
    border-radius: 24px;
    border: 1px solid var(--color-outline-button);
    line-height: 1;
    text-align: center;
}

.custom-link{
    color: var(--color-body-text);
    margin: 0px 3px;
}

.table{
    border-radius: 13px;
    filter: drop-shadow(3px 3px 20px rgba(211, 211, 211, 0.15));
    margin-top: 16px;
}

.table thead tr th
{
    position: relative;
}

.table thead tr th:after
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-outline-button);
}

/* Every cell centres vertically: a row with a wrapped title or a tall
   avatar keeps its badge, name and actions on the row's centre line
   instead of hanging from the top. Bootstrap's .table inherits top. */
td, th
{
    vertical-align: middle;
}

.table th{
    padding: 12px 7px;
    vertical-align: middle;
    text-transform: uppercase;
    color: var(--color-icon-outlined);
    background-color: #F9FAFC;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

.table tr{
    border-bottom: 1px solid #F8F8F8;
}

.table td{
    padding: 12px 13px 12px;
    vertical-align: middle;
    color: var(--color-body-text) !important;
    text-align: center;
    font-weight: 400;
}

.badge-warning{
    border: 1px solid #97A2A6;
    background: #F4F4F4;
    color: #97A2A6;
}

.badge-success{
    border: 1px solid #29A983;
    background: #E0FACD;
    color: #29A983;
    /* padding: 4px 15px; */
}

.bg-dark-badge{
    border: 1px solid #F86803;
    background: #FFE1CC;
    color: #F86803;
}

.icon-btn{
    max-width: 30px;
    width: 100%;
    height: 30px;
    padding: 0px;
    border: 1px solid var(--color-outline-button);
    border-radius: 3px;
}

.page-link{
    background-color: #fff !important;
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: bold;
    color: var(--color-body-text);
    border: 1px solid var(--color-outline-button);
}

.page-item.active .page-link{
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Table Stylesheet ends here */

/* Password reset Page Style starts here */

.password-reset-container{
    padding: 38px 0px;
    position: relative;
    z-index: 2;
}

.password-reset-block{
    padding: 0px 16px 0px 38px;
}

.password-reset-block .icon-block
{
    max-width: 24px;
    width: 100%;
    height: 24px;
    border: 1px solid var(--color-primary);
    border-radius: 40px;
    margin-right: 13px;
    position: relative;
    z-index: 2;
}

.password-reset-block .icon-block::after
{
    content: '';
    position: absolute;
    z-index: -1;
    width: 1px;
    height: 24px;
    background-color: var(--color-primary);
    bottom: -28px;
}

.password-reset-block .last-icon-block::after
{
    display: none;
}

.password-reset-block .text-block p{
    font-size: 12px;
    font-family: var(--font-secondary);
    color: var(--color-disable-text);
    line-height: 1.2;
    margin-bottom: 3px;
}

.password-reset-block .active .text-block p{
    color: var(--color-sub-heading);
}

.password-reset-block .active .text-block .heading{
    color: var(--color-heading-text);
}

.password-reset-block .activated .icon-block{
    background-color: var(--color-primary);
}

.password-reset-block .activated .icon-block svg path{
    fill: #fff;
}

.password-reset-container .media-block .straps-media{
    position: absolute;
    z-index: -1;
    right: 0px;
    bottom: 87px;
}

.password-reset-container .media-block .popup-block{
    position: absolute;
    z-index: 4;
    bottom: 51px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #363538;
    border-radius: 19px;
    box-shadow: 0px 2px 13px 0px #6F6F6F;
    padding: 13px 8px;
    max-width: 255px;
    width: 100%;
    text-align: center;
}

.password-reset-container .media-block .popup-block p{
    color: #E0E0E0;
    font-family: var(--font-secondary);
    font-size: 13px;
    line-height: 1.2;
}

.lock-icon{
    margin-bottom: 24px;
}

.lock-icon span{
    padding: 6px 10px;
    background-color: #E0FACD;
    border-radius: 6px;
}

.password-reset-title h3{
    font-weight: 700;
    color: var(--color-sub-heading);
    margin-bottom: 6px;
}

.password-reset-title p{
    color: var(--color-sub-heading);
    font-family: var(--font-secondary);
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 24px;
}

.form-label{
    color: var(--color-sub-heading);
    font-size: 11px;
    font-family: var(--font-secondary);
    font-weight: 700;
}

.input-block input{
    border: 1px solid var(--color-outline-button) !important;
    border-radius: 6px !important;
    height: 43px;
    color: var(--color-sub-heading) !important;

    padding: .375rem .75rem !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100% !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Password reset Page Style ends here */


/* Admin Dashboard Page Starts Here */

.custom-heading2{
    font-size: var(--font-size-heading);
    font-weight: 600;
    color: var(--color-heading-text);
}

.sub-text{
    margin-bottom: 26px;
}

.talent-block{
    padding: 15px 14px;
}

.card-background{
    border-radius: 13px;
    border: 2px solid rgba(255, 255, 255, 0.40);
    background-color: white;
    box-shadow: 3px 3px 8px 0px rgba(166, 171, 189, 0.25);
}

.talent-icon{
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 80px;
    margin-right: 6px;
}

.talent-title{
    color: var(--color-sub-heading);
    margin: 0px;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
}

.chart-container{
    padding: 12px 13px 22px !important;
    margin: 0px 8px;
    box-shadow: 3px 3px 8px 0px rgba(166, 171, 189, 0.25);
}

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

.title-block p{
    color: var(--color-secondary);
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 500;
}

.title-block .filter-group .form-control{
    height: auto;
    font-size: 11px;
    color: var(--color-body-text);
    background: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-position: 88%;
    background-repeat: no-repeat;
}

.schedule-container{
    margin: 0px 8px;
    box-shadow: 3px 3px 8px 0px rgba(166, 171, 189, 0.25);
    /* padding: 10px 15px; */
}

.schedule-container .title-block{
    padding: 7px 14px;
}

.schedule-filter{
    width: 160px;
    background-position: 94% !important;
    margin-right: 6px;
}

.circle-icon{
    border-radius: 40px;
    border: 1px solid #E3E3E3;
}

.tabs-block{
    background-color: var(--color-dashboard-bg);
    padding: 5px 2px;
    border-radius: 6px;
}

.tabs-block .nav-link{
    width: 100%;
    color: var(--color-icon-outlined);
    font-weight: 500;
    /* background: #FFF; */
    border-radius: 6px;
}

.tabs-block .nav-link.active
{
    background: #FFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
    color: var(--color-sub-heading);
}

.tabs-block .nav-item{
    padding: 0px 3px;
}

.tab-content{
    padding: 8px 12px;
}

.tab-pane-block{
    margin-bottom: 6px;
    border: 1px solid #DEDEDE;
    border-radius: 13px;
    padding: 8px 13px 13px 15px;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.tab-pane-block::before{
    content: '';
    width: 24px;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 13px;
    border-left: 2px solid var(--color-primary);
}

.schedule-text{
    margin-bottom: 5px;
    border-bottom: 1px solid #F0F0F0;
}

.schedule-text .icon-block img{
    width: 29px;
    height: 29px;
    border-radius: 50%;
    margin-left: -20px;
    box-shadow: 2px 0px 3px 0px rgba(142, 142, 142, 0.20);
    position: relative;
    z-index: 1;
}

.schedule-text .icon-block img:first-child{
    z-index: 99;
}

.schedule-text .icon-block img:last-child{
    z-index: 0;
}

.dot{
    padding-left: 6px;
    position: relative;
    z-index: 3;
}

.dot::before{
    content: '';
    width: 4px;
    height: 4px;
    background-color: #96FFE5;
    border-radius: 16px;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.link-block{
    margin-top: 10px;
}

.link-block span{
    font-family: var(--font-inter);
    font-weight: 600;
    color: var(--color-primary);
    margin-right: 3px;
}

.link-block a{
    text-decoration: none;
}

.view-more .btn-white{
    width: 100%;
    padding: 10px;
    border: 1px solid #DEDEDE;
    border-radius: 6px;
    color: var(--color-body-text);
    font-weight: 600;
}

.view-more .btn-white span{
    margin-left: 3px;
}

.view-more .btn-white:hover, .btn-white:active, .btn-white:focus{
    background-color: #DEDEDE;
}

.contract-container{
    margin: 0px 8px;
}

.contract-container .title-block{
    padding: 9px 13px 6px;
}

.contract-container .title-block .filter-group .search-filter{
    padding: 6px 10px 5px 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
    background-position: 2%;
    width: 240px;
}

.contract-container .title-block .filter-group .btn-filter::after{
    display: none;
}

.contract-container .title-block .filter-group .btn-filter{
    border: 1px solid #DEDEDE;
    border-radius: 6px;
    color: var(--color-body-text);
    padding: 3px 11px;
    margin-left: 6px;
    height: 100%;
}

.table-container{
    padding: 0px 0px 10px;
}

.table-container .view-more{
    margin: 0px 16px;
}

.talent-pool-container{
    padding: 19px 13px;
    height: 100%;
}

.talent-pool-container .title-block .filter-group .form-control{
    width: 80px;
}

.talent-pool-container .chart-labels
{
    margin-top: 24px;
}

.talent-pool-container .chart-labels .label-item
{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.talent-pool-container .chart-labels .label-item .item-color
{
    width: 14px;
    height: 14px;
    border-radius: 5px;
}

.talent-pool-container .chart-labels .label-item .item-text
{
    font-size: 13px;
    margin-right: auto;
}

.talent-pool-container .chart-labels .label-item .item-data
{
    font-size: 13px;
    font-weight: bold;
}

.talent-pool-container .chart-pie
{
    position: relative;
    z-index: 2;
}

.talent-pool-container .chart-pie canvas
{
    position: relative;
    z-index: 11;
}

.talent-pool-container .chart-pie .chart-total
{
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #fff;
    height: 104px;
    width: 104px;
    text-align: center;
    border-radius: 799px;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.25);

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

.talent-pool-container .chart-pie .chart-total span,
.talent-pool-container .chart-pie .chart-total small
{
    display: block;
}

.talent-pool-container .chart-pie .chart-total span
{
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.talent-pool-container .chart-pie .chart-total small
{
    font-size: 11px;
    font-weight: 400;
    color: var(--color-icon-outlined);
}

/* Admin Dashboard Page style Ends Here */


/* Sourcingg Create Campaign page style starts here */

.page-title{
    margin-bottom: 32px;
}

.drawflow-wrapper{
    height: 412px !important;
}

.drawflow-container{
    top: 0px !important;
    height: 100% !important;
}

.button-container{
    max-width: 640px;
    width: 100%;
}

.drag-drawflow{
    padding-left: 9px !important;
    border-bottom: none !important;
    line-height: normal !important;
    margin-right: 13px;
    padding: 9px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: var(--color-outline-button);
}

.drawflow-button .btn{
    padding: 8px 14px 8px;
    line-height: normal;
    margin: 0px;
    /* height: 48px; */
    font-weight: 500;
    border-radius: 6px !important;
}

.drawflow-button .import-btn{
    border: 1px solid var(--color-disable-text);
}

.drawflow-button .import-btn:hover{
    background-color: var(--color-disable-text);
    color: #363538;
}

.drawflow-button .clear-btn{
    border: 1px solid #DCDCDC;
    background-color: #DCDCDC;
}

.drawflow-button .clear-btn:hover{
    background-color: var(--color-sub-heading);
    color: #fff;
}

.drawflow-button .clear-btn:hover svg path{
    fill: #fff;
}

.drawflow-button .finalize-btn{
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}

.drawflow-button .finalize-btn:hover{
    background-color: #fff;
    color: var(--color-primary);
}

.drawflow-button .finalize-btn:hover svg path{
    stroke: var(--color-primary);
}

/* Sourcing Create Campaign stylesheet ends here */

/* Sourcing Create Campaign Import stylesheet starts here */

.import_template_modal_content{
    border-radius: 13px;
    box-shadow: 3px 10px 20px 0px rgba(49, 49, 49, 0.25) !important;
    padding: 16px 32px !important;
    max-width: 512px !important;
    width: 100% !important;
}

.template-list{
    width: 100%;
    margin-top: 16px;
    display: flex !important;
    align-items: center;
    flex-direction: column;
    grid-gap: 0px  !important;
}

.template-list .template-block
{
    margin-bottom: 16px;
    border: 1px solid var(--color-outline-button);
    background: #FFF;
    padding: 13px;
    border-radius: 13px;
    box-shadow: 3px 3px 20px 0px rgba(211, 211, 211, 0.15);
    display: flex;
    align-items: center;
    width: 100%;
}

.template-list .template-block.selected
{
    background-color: var(--color-outline-button);
}

.template-list .template-block .icon{
    max-width: 64px;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 80px;
    background-color: var(--color-body-text);
    margin-right: 10px;
}

.template-list .template-block .icon svg{
    width: 26px;
    height: 26px;
}

.template-list .template-block .status{
    margin-left: 6px;
    padding: 6px 6px 5px;
    background-color: #A9FF9B;
    border-radius: 6px;
    border: 1px solid #009951;
    color: var(--color-primary);
    line-height: 1;
    font-size: 11px;
}

.template-list .template-block .description
{
    margin: 0px;
    color: var(--color-icon-outlined);
}

.import_template_modal_btn{
    border-radius: 8px !important;
}

.drawflow-button .cancel-btn
{
    color: var(--color-icon-outlined);
    background-color: #E8F3E0;
}

.drawflow-button .cancel-btn:hover, .cancel-btn:active
{
    background-color: var(--color-icon-outlined);
    color: #fff;
}

.drawflow-button .view-btn
{
    border: 1px solid var(--color-disable-text);
}

.drawflow-button .view-btn:hover, .view-btn:active
{
    background-color: var(--color-icon-outlined);
    color: #fff;
}

.drawflow-button .gray-delete-btn
{
    padding: 10px 12px;
    background-color: #DCDCDC;
    border-radius: 6px;
}

.drawflow-button .gray-delete-btn:hover, .gray-delete-btn:active
{
    background-color: var(--color-icon-outlined);
    color: #fff;
}

/* Sourcing Create Campaign Import stylesheet Ends here */

/* Sourcing Create Campaign Finalize Campaign stylesheet starts here */

.finalize_campaign_modal-content{
    max-width: 461px !important;
    width: 100% !important;
    border-radius: 13px !important;
    background-color: #FFF !important;
    box-shadow: 3px 10px 20px 0px rgba(49, 49, 49, 0.25) !important;
}

/* Sourcing Create Campaign Finalize Campaign stylesheet ends here */

/* Sourcing View Campaign View Details stylesheet starts here */

.prospect{
    background-color: #fff !important;
    border: 1px solid var(--color-outline-button) !important;
    box-shadow: 3px 3px 20px 0px rgba(211, 211, 211, 0.15) !important;
    border-radius: 13px !important;
}

.prospect h3 .icon svg{
    width: 18px;
    height: 18px;
}

.prospect h3 .icon{
    width: 38px;
    height: 38px;
    background-color: var(--color-body-text);
    border-radius: 80px;
    margin-right: 6px;
}

.detail-icon{
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 80px;
    background-color: #DCDCDC;
    margin-right: 6px;
}

.detail-icon svg{
    width: 18px;
    height: 18px;
}

.executions{
    margin: 0px !important;
    padding: 0px !important;
    background-color: transparent !important;
    border: none !important;
}

.execution-header{
    background-color: var(--color-outline-button) !important;
    border: 1px solid var(--color-disable-text);
    border-radius: 6px !important;
    text-align: left !important;
    color: var(--color-sub-heading) !important;
    background: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    background-position: 98%;
    background-repeat: no-repeat;
}

.execution-table thead{
    background-color: #F9FAFC;
}

.execution-table thead tr th{
    background-color: transparent !important;
    color: var(--color-body-text);
    font-family: var(--font-inter);
    text-transform: uppercase;
    font-weight: bold;
    border: none;
}

.execution-table tbody tr td{
    background-color: #fff;
    color: var(--color-icon-outlined);
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    font-size: 11px;
    text-align: center;
}

.execution-table tbody tr td:last-child{
    text-align: left;
}

.execution-table tbody tr:nth-child(even) td{
    background-color: #FCFCFC;
}

/* Sourcing View Campaign View Details stylesheet ends here */

/* Sourcing Profile Listing Style starts here  */

.profile-filter-btn button,.profile-filter-btn a{
    height: 38px;
    align-content: center;
}

.search-filter{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 94% 50%;
    padding: 10px 32px 10px 10px;
}

.dropdown-filter{
    width: 104px;
    background: var(--down-carot);
    background-position: 94% 50%;
    background-repeat: no-repeat;
    padding: 10px 21px 10px 10px;
    background-color: #fff;
}

.profile-table th{
    color: var(--color-body-text);
    /* font-size: 12px; */
    font-weight: 700;
    padding: 12px 7px;
}

.profile-table td{
    background-color: #fff;
    --bs-table-bg-type: #fff !important;
    align-content: center;
    /* font-size: 12px; */
    /* font-weight: 500; */
    color: var(--color-sub-heading) !important;
}

.profile-table .cell-job-title
{
    width: 240px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-table td .btn
{
    /* font-size: 12px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 29px;
}

.profile-table tr{
    border-bottom: 1px solid #EFEFEF;
}

.profile-table .badge
{
    font-size: 11px;
    font-weight: normal;
}

.grey-btn{
    font-size: 11px;
    background-color: var(--color-dashboard-bg);
    padding: 5px 6px;
    color: var(--color-icon-outlined);
    line-height: 1;
    font-weight: 500;
}

.grey-btn:hover{
    background-color: var(--color-icon-outlined);
    color: #fff;
}

.grey-btn.active{
    background-color: var(--color-icon-outlined);
    color: #fff;
}

/* Sourcing Profile Listing Style ends here  */

/* Profile Details Page style starts here */

.profile-input{
    background-color: transparent;
    border: 1px solid var(--color-icon-outlined);
    color: var(--color-body-text);
}

.profile-input:focus, .profile-input:active{
    background-color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 3px 3px 12px 0px rgba(30, 30, 30, 0.50);
}

.card{
    box-shadow: 3px 3px 20px 0px rgba(211, 211, 211, 0.15);
}

.card:hover{
    cursor: inherit;
}

.card-body{
    padding: 19px;
}

.chat-container{
    width: 100%;
    height: 280px;
    overflow-y: auto;
}

.chat-message{
    width: 100%;
    padding: 16px;
    margin-bottom: 13px;
    background-color: #F4F7F3;
    border: 1px solid var(--color-outline-button);
    border-radius: 10px;
}

.chat-block{
    width: 100%;
}

.chat-container::-webkit-scrollbar
{
    width: 5px; /* Width of vertical scrollbar */
    height: 5px; /* Height of horizontal scrollbar */
}

/* Track (background of scrollbar) */
.chat-container::-webkit-scrollbar-track
{
    background: #f1f1f1; /* Light gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb (the draggable part of scrollbar) */
.chat-container::-webkit-scrollbar-thumb
{
    background: #888; /* Dark gray */
    border-radius: 4px; /* Optional rounded corners */
}

/* Thumb on hover */
.chat-container::-webkit-scrollbar-thumb:hover
{
    background: #555; /* Darker gray */
}

.profile-icon{
    height: 34px;
    width: 34px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 80px;
}

.icon-container{
    border-bottom: 1px solid var(--color-outline-button);
}

.icon-container .icon-block{
    margin-left: 20px;
}

.icon-container .icon-block img{
    width: 34px;
    height: 34px;
}

.gray-select{
    padding: 10px;
    background-color: #F6F6F6;
    border: 1px solid var(--color-disable-text);
}

/* Profile Details Page style ends here */

/* Extension Page Style starts here */

.extension-circle-text{
    display: inline;
    padding: 6px 13px;
    border-radius: 80px;
    border: 1px solid #DEDEDE;
}

.planner-grid{
    background-color: transparent;
    gap: 13px 0px;
}

.grid-header span{
    font-size: 13px;
    padding: 9px 19px;
    border-radius: 80px;
    background-color: #EDEDED;
    color: var(--color-sub-heading);
    max-width: 128px;
    width: 100%;
    text-align: center;
}

.grid-header:first-of-type span{
    background-color: #fff;
}

.grid-header.active span{
    background-color: var(--color-primary);
    color: #fff;
}

.grid-hour{
    padding: 9px 13px;
    color: var(--color-sub-heading);
    font-weight: 400;
    margin-right: 8px;
}

.grid-cell{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    position: relative;
    z-index: 2;
}

.grid-cell::before{
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    width: 100%;
    background-color: #D9D9D9;
}

.grid-cell.active .extension-tick{
    background-color: var(--color-primary);
}

.grid-cell.active .extension-tick svg path{
    fill: #fff;
}

.extension-tick{
    padding: 10px 10px;
    background-color: #EDEDED;
    border-radius: 80px;
}

.extension-tick svg{
    width: 18px;
    height: 18px;
}

/* Extension page style ends here */

/* Talent pool item list style starts here */

.list-profile-icon{
    background-color: var(--color-tertiary-04);
    padding: 2px 5px 2px 6px;
    border-radius: 40px;
    font-family: var(--font-heading);
    color: var(--color-body-text);
    line-height: 1;
    font-weight: 400;
}

.badge-primary{
    padding: 3px 8px;
    color: #fff;
    font-weight: 600;
    background-color: #034737;
}

/* Talent pool item list style ends here */

/* Talent Pool Modal styling starts here */

.modal-header{
    height: auto !important;
    padding: 32px 32px 13px;
    border-bottom: 0px;
}

.modal-title{
    font-size: 22px;
    color: var(--color-secondary);
    font-weight: 600;
}

.skills-badge{
    padding: 10px 17px;
    background-color: var(--color-dashboard-bg);
    border-radius: 6px;
    color: var(--color-sub-heading);
    font-weight: 400;
    font-size: 11px;
}

/* Talent Pool Modal styling ends here */

/*Outside Talent Submit Form Style starts here */

.outside-talent-icon{
    height: 38px;
    max-width: 38px;
    width: 100%;
    background-color: #E6E6E6;
    border-radius: 40px;
}

.grey-sidebar-block{
    padding: 13px 10px;
    border-radius: 13px;
}

.grey-sidebar-block.active{
    border-bottom: 1px solid #E6E6E6;
    background: #E6E6E6;
}

.grey-sidebar-block.active .outside-talent-icon{
    background-color: var(--color-secondary);
}

.grey-sidebar-block.active .outside-talent-icon svg path{
    fill: #fff;
}

.grey-sidebar-block.active .text-block p{
    color: var(--color-heading-text);
}

.grey-sidebar-block.active .text-block p:last-of-type{
    color: var(--color-sub-heading);
}

.header_label{
    color: var(--color-sub-heading);
    font-family: var(--font-inter);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 7px;
}

.bi-asterisk{
    font-size: 11px;
}

.outside-form-input{
    border: 1px solid var(--color-icon-outlined);
    min-height: 51px;
    min-height: 51px;
    color: var(--color-secondary);
    font-weight: 500;
    /* background-color: var(--color-dashboard-bg); */
    transition: 0.2s all ease-in-out;
}

.outside-form-input::placeholder{
    color: var(--color-disable-text);
    font-weight: 400;
}

.outside-form-input:active, .outside-form-input:focus
{
    border: 1px solid var(--color-primary);
    background-color: #fff;
    box-shadow: 3px 3px 12px 0px rgba(30, 30, 30, 0.50);
}

select.form-select.outside-form-input
{
    padding-right: 28px !important;
}

.form-control.form-control-sm.outside-form-input,
.form-select.form-select-sm.outside-form-input
{
    height: auto;
    min-height: 34px;
    padding-left: 10px;
    padding-right: 10px;
}

.form-group.group-has-icon
{
    position: relative;
    z-index: 2;
}

.form-group.group-has-icon .form-control,
.form-group.group-has-icon .form-select
{
    position: relative;
    z-index: 2;
    padding-right: 28px;
}

.form-group.group-has-icon .group-icon
{
    display: inline-flex;
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.form-group.group-has-icon.icon-leading .form-control,
.form-group.group-has-icon.icon-leading .form-select
{
    padding-left: 28px;
    padding-right: 10px;
}

.form-group.group-has-icon.icon-leading .group-icon
{
    left: 12px;
    right: auto;
}

.form-group.group-has-icon .btn.group-icon
{
    right: 0;
}

/* Custom File Upload name */

.file-upload
{
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-icon-outlined);
    border-radius: 6px;
    padding: 5px 6px 4px;
}

.custom-file-input
{
    display: none; /* Hide the native file input */
}

.custom-file-label
{
    background-color: var(--color-line-divider);
    padding: 9px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-inter);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-body-text);
    line-height: 1;
}

.custom-file-label:hover
{
    background-color: #eaeaea;
}

.file-name
{
    font-size: 13px;
    font-weight: 400;
    color: var(--color-body-text);
}

.form-group.group-image-uploader .group-image
{
    position: relative;
    z-index: 2;

    width: 96px;
    height: 96px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 799px;
    background-color: #E6E6E6;
}

.form-group.group-image-uploader .group-image img
{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 799px;
    object-fit: cover;
    object-position: center;
}

.form-group.group-image-uploader .group-image .txtFileInput
{
    position: absolute;
    z-index: 99;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Custom Date Picker Css */

.date-picker
{
    display: flex;
    align-items: center;
    border: 1px solid var(--color-icon-outlined);
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
}

/* Icon wrapper */
.icon-wrapper
{
    background-color: var(--color-primary); /* Green background for the icon */
    padding: 10px 18px 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-icon
{
    width: 19px;
    height: 19px;
}

/* Input field */
.date-input
{
    border: none;
    font-size: 11px;
    color: var(--color-body-text);
    font-family: var(--font-inter);
    width: 100%; /* Fill remaining space */
    height: 38px;
    padding: 11px 24px 11px 12px;
    border-radius: 0px;
}

/* Customize the date input for better style */
.date-input::-webkit-calendar-picker-indicator
{
    opacity: 0; /* Hides the default calendar icon */
}

/* Placeholder styling */
.date-input:focus, .date-input:active
{
    border: none;
    outline: none;
}

.sub-label{
    color: var(--color-primary);
    font-size: 11px;
    font-family: var(--font-inter);
    font-weight: 500;
}

/* Outside Talent Submit Form Style ends here */

/* Candidate Detail Page Style starts here */

.stage-map{
    background-color: var(--color-dashboard-bg);
    border-radius: 10px;
    padding: 8px 72px;
}

.stage-button{
    padding: 8px 13px;
    text-align: center;
    border-radius: 80px;
    background-color: #fff;
    box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.25);
    color: var(--color-sub-heading);
    font-size: 14px;
    font-weight: 600;
    border: 0px;
    pointer-events: none;
}

.stage-button.active{
    background-color: var(--color-primary);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.stage-map-block{
    position: relative;
    z-index: 2;
}

.stage-map-block::before{
    position: absolute;
    z-index: -1;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    right: 0px;
    height: 3px;
    background-color: #D9D9D9;
}

.status-block{
    padding: 16px;
    border: 1px solid var(--color-outline-button);
    border-radius: 6px;
    margin-top: 16px;
}

.or-dashed-line{
    position: relative;
    z-index: 2;
}

.or-dashed-line span{
    padding: 0px 14px;
    background-color: #fff;
}

.or-dashed-line::before{
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    right: 0px;
    background-color: #DEDEDE;
    height: 2px;
}

.fyi-tooltip
{
    --bs-tooltip-padding-x: 10px;
    --bs-tooltip-padding-y: 10px;
    --bs-tooltip-bg: var(--bs-white);
    --bs-tooltip-border-radius: 13px;
    --bs-tooltip-color: var(--color-body-text);

    font-size: 11px;
    box-shadow: 0px 2px 10px 0px rgba(140, 140, 140, 0.20);
}

/* Candidate Detail Page Style ends here */


/* Custom Textarea stylesheet style starts here */

.django-ckeditor-widget{
    width: 100%;
}

.cke_chrome
{
    border-radius: 6px !important;
}

.cke_top{
    margin: 10px 10px 0px !important;
    border-radius: 6px;
    background: #FFF;
}

.cke
{
    background: #F7F7FA !important;
}

.cke .cke_inner
{
    background: transparent;
}

.cke .cke_wysiwyg_frame,
.cke .cke_wysiwyg_div
{
    background: transparent;
}

.cke .cke_top
{
    border: 0;
    padding: 8px;
    min-height: 32px;
    border-radius: 8px;
    background-color: var(--bs-white);

    display: flex;
    align-items: center;
    gap: 5px;
}

.cke .cke_top .cke_button
{
    width: 26px;
    height: 26px;
    cursor: pointer;
    border-radius: 8px;
    background: #F7F7FA;
    border: 1px solid transparent;

    padding: 0 !important;
    float: none !important;

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

.cke .cke_top .cke_button.cke_button_on
{
    border-color: var(--bs-dark);
}

.cke .cke_top .cke_button::after,
.cke .cke_top .cke_toolbar_separator,
.cke .cke_top .cke_toolbar_start
{
    content: '' !important;
    display: none !important;
}

.cke .cke_top .cke_toolgroup
{
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

a.cke_button{
    border-radius: 14px;
}

.which_recruiter:active, .which_recruiter:focus, .which_recruiter:hover{
    background-color: #F8F8F8;
}

/* Custom Textarea stylesheet style ends here */

/* Action custom Popup */

.dropdown-popup.show{
    width: 224px;
    padding: 8px;
    border-radius: 13px;
    border: 1px solid var(--color-outline-button);
    background: #FFF;
    box-shadow: 11px 10px 27px 0px rgba(33, 33, 33, 0.25)}
.dropdown-popup.show li:hover{
    background-color: var(--color-line-divider);
    color: var(--color-sub-heading);
}

.mark_as_read_btn{
    background-color: transparent;
    color: var(--color-disable-text);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 0px;
    border: 0px;
    border-bottom: 1px solid var(--color-disable-text);
}

.mark_as_read_btn.active{
    color: var(--color-sub-heading);
    font-weight: 500;
    border-bottom: 1px solid var(--color-primary);
}

.popup-toggle::after{
    display: none;
}

.company-select{
    padding: 6px 13px 6px 29px;
    background-image: var(--down-carot), url("/static/suitcase.f7ac891a4201.png");
    background-position: calc(100% - 13px) 50%, 7px 48%;
    background-size: 10px, 16px;
}

.password-input{
    background-image: url("/static/eye.f1e8aa3e27d9.png");
    background-position: 93% 50%;
    background-size: 16px;
    background-repeat: no-repeat;
}

/* Career Page */

.white-btn.current{
    background-color: #034736 !important;
    color: #fff;
}

.white-btn.hover:hover{
    background-color: #034736 !important;
}

.currency-select{
    background-image: var(--down-white-carot);
}

/* Career Page End */

/* Home Talent Page */

.login-success-container{
    background-color: var(--color-primary);
    box-shadow: 3px 3px 20px 0px rgba(211, 211, 211, 0.15);
    border-radius: 13px;
    padding: 19px 24px;

    position: relative;
    z-index: 5;
}

.login-success-container::after{
    content: '';
    background: url("/static/Union.6a83929e411e.png");
    background-position: 93% 10%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: -3;
}

.login-success-container::before{
    content: '';
    background: url("/static/person-sitting.41c18c1cc0f5.png");
    background-position: 98% 10%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    right: 0px;
    top: 0px;
}

.login-success-inner{
    max-width: 696px;
    width: 100%;
}

.login-success-inner div{
    color: white;
}

.joining-date-block{
    padding: 3px 8px;
    border-radius: 80px;
    border: 1px solid #4FA18C;
    background-color: #E8F3E0;
    margin-top: 10px;
}

.joining-date-block p{
    line-height: 1;
    font-size: var(--font-size-caption);
}

.stage-block{
    padding: 3px 8px;
    border-radius: 80px;
    border: 1px solid #9772C7;
    background-color: #e1dcf7;
    margin-top: 10px;
}

.stage-block p{
    line-height: 1;
    font-size: var(--font-size-caption);
}

.skills-list li{
    color: var(--color-body-text);
    font-size: var(--font-size-caption);
    font-weight: 400;
}

.profile-img{
    margin-left: -13px;
    position: relative;
    z-index: calc(100 - var(--index));
    border: 1px solid var(--bs-white);
    border-radius: 80px;
}

.profile-img:first-child{
    margin-left: 0px;
}

.tab-listing p{
    color: var(--color-sub-heading);
    font-size: 13px;
    font-weight: 600;
}

/* ----------  Chosen Component  ---------- */

.chosen-container
{
    width: 100%;
    display: block;
}

.chosen-container.chosen-container-single.chosen-with-drop.chosen-container-active .chosen-single,
.chosen-container-single .chosen-single
{
    border: 0;
    height: auto;
    min-height: 40px;
    font-size: 14px;
    border-radius: 79px;
    padding: 10px 22px;
    background: var(--color-dashboard-bg);
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chosen-container.chosen-container-single .chosen-single > div
{
    display: none !important;
}

.chosen-container.chosen-container-single.chosen-with-drop.chosen-container-active .chosen-drop,
.chosen-container-single .chosen-drop
{
    border: 0;
    height: auto;
    padding: 0;
    margin-top: 6px;
    border-radius: 6px;
    background: var(--color-dashboard-bg);
    box-shadow: none !important;
}

.chosen-container-single .chosen-single > span
{
    margin: 0;
    order: 2;
}

.chosen-container-single .chosen-single > div
{
    display: block !important;
    order: 1;
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    width: 24px;
    height: 24px;

    background-image: url("/static/icons/icon-search.e1068e5a3827.svg") !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.chosen-container-single .chosen-single > div b
{
    display: none;
}

.chosen-container-single .chosen-drop .chosen-results li
{
    display: block;
    font-size: 13px;
    padding: 13px 14px;
}

.chosen-container-single .chosen-drop .chosen-results li.highlighted
{
    color: #000;
    background: #e9e9e9;
}

.chosen-container-single .chosen-drop .chosen-results li.disabled-result
{
    display: none !important;
}

.chosen-container-single .chosen-drop .chosen-search
{
    padding: 10px 14px;
}

.chosen-container-single .chosen-drop .chosen-search input
{
    border: 0;
    background: #e9e9e9;
    border-radius: 6px;
    font-size: 16px;
    padding: 10px 14px;
}

/* ----------  Chat Sidebar  ---------- */

.chat-sidebar-container
{
    padding: 20px 0;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ----------  Chat Search  ---------- */

.chat-sidebar-container .search-container
{
    padding: 0 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;
}

/* ----------  Chat List  ---------- */

.chat-list-container
{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
}

.chat-list-title
{
    padding: 0 16px;
}

.chat-list-title h3
{
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 0;
    font-family: var(--font-inter);
}

.chat-list
{
    display: flex;
    flex-direction: column;
}

.chat-list .list-item
{
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.chat-list .list-item:hover
{
    background-color: var(--color-dashboard-bg);
}

.chat-list .list-item .item-avatar
{
    width: 38px;
    height: 38px;
    border-radius: 80px;
}

.chat-list .list-item .item-avatar img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-list .list-item .item-contents
{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.chat-list .list-item .item-user-time
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-list .list-item .item-user-time h5
{
    margin: 0;
    color: #000;
    font-size: 13px;
    font-weight: 600;
}

.chat-list .list-item .item-user-time span
{
    font-size: 11px;
    color: #828282;
    font-weight: 400;
}

.chat-list .list-item .item-message-count
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-list .list-item .item-message-count p
{
    margin: 0;
    font-size: 11px;
    color: #828282;
    font-weight: 400;
}

.chat-list .list-item .item-message-count .badge
{
    font-size: 11px;
    color: #fff;
    font-weight: 400;
    border-radius: 80px;
    min-height: 16px;
    min-width: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF7171;
}

/* ----------  Chat Footer  ---------- */

.chat-footer-container
{
    padding: 0 16px;
}

.chat-footer-container .footer-inner
{
    padding-top: 20px;
    border-top: 1px solid #EEEEEE;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-footer-container .chat-footer-title h3
{
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 0;
    font-family: var(--font-inter);
}

.chat-footer-container .chat-footer-form
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-footer-container .chat-footer-form .form-control
{
    border: 0;
    flex: 1;
    padding: 0 18px;
    background-color: var(--color-dashboard-bg);
    border-radius: 79px;
    height: 40px;
}

.chat-footer-container .chat-footer-form .btn
{
    padding: 0;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------  Chat Area  ---------- */

.chat-area-container
{
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-window
{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 24px;
}

.chat-area-container .chat-header
{
    height: 67px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bs-white);
    border-radius: 13px;
    box-shadow: 0px 3px 32px 0px rgba(151, 151, 151, 0.10);
}

.chat-area-container .chat-header img
{
    width: 44px;
    height: 44px;
    border-radius: 80px;
}

.chat-area-container .chat-header .chat-user-contents
{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-area-container .chat-header .chat-user-contents h5
{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary);
}

.chat-area-container .chat-header .chat-user-contents p
{
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #828282;
}

.chat-area-container .chat-body
{
    flex: 1;
    overflow-y: auto;
}

.chat-area-container .chat-form
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-area-container .chat-form .form-input
{
    flex: 1;
    position: relative;
    z-index: 2;
}

.chat-area-container .chat-form .form-input .form-control
{
    border: 0;
    background: var(--bs-white);
    border-radius: 13px;
    height: 51px;
    padding: 0 18px;
    padding-right: 80px;
}

.chat-area-container .chat-form .form-input .input-actions
{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.chat-area-container .chat-form .form-input .input-actions span
{
    height: 51px;
    width: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-area-container .chat-form .btn-send
{
    padding: 0;
    width: 51px;
    height: 51px;
    flex: 0 0 51px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
}

.chat-area-container .chat-form .btn-send .bi
{
    margin-top: 3px;
}

.chat-area-container .chat-body
{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
}

.chat-area-container .chat-body .chat-message-row
{
    display: flex;
    gap: 18px;
}

.chat-area-container .chat-body .chat-message-row .message-user-avatar
{
    margin-top: 24px;
}

.chat-area-container .chat-body .chat-message-row .message-user-avatar img
{
    width: 48px;
    height: 48px;
    border-radius: 80px;
}

.chat-area-container .chat-body .chat-message-row .message-contents
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-header
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-header h4
{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-header span
{
    font-size: 11px;
    font-weight: 400;
    color: #828282;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list ul
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 0;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item
{
    position: relative;
    z-index: 2;

    color: var(--color-body-text);
    font-family: Inter;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding: 13px 22px;
    width: fit-content;

    background: #FFF;
    border-radius: 0px 19px 19px 19px;
    box-shadow: 0px 2px 10px 0px rgba(140, 140, 140, 0.10);
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item .item-message-status
{
    font-size: 19px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 2;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item.has-tags
{
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item.has-tags .message-tag
{
    color: var(--primary_color, var(--color-primary));
    font-family: Inter;
    font-weight: 600;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item.has-attachments
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item.has-attachments .item-attachments
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item.has-attachments .item-attachments .item-attachment
{
    border-radius: 11px;
    border: 1px solid var(--outline-button, #DEDEDE);
}

.chat-area-container .chat-body .chat-message-row .message-contents .message-list .list-item.has-attachments .item-text
{
    padding: 6px 13px;
    border-radius: 13px;
    background: var(--bg-colour-dashbord-panels, var(--color-dashboard-bg));
}

.chat-area-container .chat-body .chat-message-row.owner-message
{
    flex-direction: row-reverse;
}

.chat-area-container .chat-body .chat-message-row.owner-message .message-contents .message-header
{
    flex-direction: row-reverse;
}

.chat-area-container .chat-body .chat-message-row.owner-message .message-contents .message-list .list-item
{
    border-radius: 19px 0px 19px 19px;
}

/* ----------  Modals  ---------- */

.fyi-modal
{
    background-color: rgba(4, 35, 27, 0.65) !important
}

.fyi-modal.fyi-modal-bg-blur
{
    backdrop-filter: blur(4px);
}

.fyi-modal .modal-dialog
{
    min-width: 520px;
}

.fyi-modal.modal .modal-dialog.modal-sm
{
    --bs-modal-width: 384px;
    width: var(--bs-modal-width) !important;
    min-width: var(--bs-modal-width) !important;
}

.fyi-modal .modal-header,
.fyi-modal .modal-footer
{
    position: relative;
    border: 0;
    padding: 0;
}

.fyi-modal .btn-close
{
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
}

.fyi-modal .modal-header .btn-close
{
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.fyi-modal .modal-content
{
    padding: 29px 24px;
}

.fyi-modal .modal-header,
.fyi-modal .modal-body
{
    margin-bottom: 28px;
}

.fyi-modal .modal-header:last-child,
.fyi-modal .modal-body:last-child
{
    margin-bottom: 0;
}

.fyi-modal .modal-body .modal-body-meta ul
{
    display: flex;
    align-items: center;
    margin: 0;
}

.fyi-modal .modal-body .modal-body-meta ul li
{
    font-size: 13px;
    font-weight: 400;
    color: #828282;
}

.fyi-modal .modal-body .modal-body-meta ul li:after
{
    content: '|';
    color: #828282;
    margin: 0 8px;
}

.fyi-modal .modal-body .modal-body-meta ul li:last-child:after
{
    display: none;
}

.fyi-modal .modal-body .modal-body-meta ul li strong
{
    font-weight: bold;
    color: var(--color-secondary);
}

.fyi-modal.fyi-modal-with-content .modal-dialog .modal-body
{
    padding: 0;
}

.fyi-modal.fyi-modal-with-content .modal-header
{
    margin-bottom: 16px;
}

.fyi-modal.fyi-modal-with-content .modal-body .modal-body-meta
{
    margin-bottom: 16px;
}

.fyi-modal.fyi-modal-with-content .modal-body .modal-body-content
{
    padding: 16px;
    padding-right: 0;
    border-radius: 13px;
    border: 1px solid #E7E7E7;
}

.fyi-modal.fyi-modal-with-content .modal-body .modal-body-content .content-inner
{
    overflow-y: auto;
    max-height: 560px;
    padding-right: 16px;
}

.fyi-modal.fyi-prompt-modal .modal-body
{
    padding-top: 32px;
    padding-bottom: 20px;
}

.fyi-modal.fyi-prompt-modal .modal-body h2
{
    font-size: 24px;
    font-weight: bold;
}

/* ----------  File Upload  ---------- */

.btn.btn-file-upload-input
{
    min-height: 96px;
    width: 100%;
    border-radius: 13px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #F9F9F9;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-sub-heading);
    position: relative;
    z-index: 2;
}

.btn-file-upload-input input[type="file"]
{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ----------  Apply External  ---------- */

/* ----------  Apply External  ---------- */

.external-job-application-view
{
    background-color: var(--color-dashboard-bg);
}

.external-job-application-view .job-title
{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--color-heading-text);
}

.external-job-application-view header
{
    padding: 24px 0;
}

.external-job-application-view .job-header
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.external-job-application-view .job-header-logo
{
    width: 60px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    margin-right: 6px;
}

.external-job-application-view .job-header h1
{
    font-size: 27px;
    margin-bottom: 0;
}

.external-job-application-view .job-header h1 small
{
    font-size: 19px;
    font-weight: normal;
}

.external-job-application-view .job-title .job-id
{
    font-size: 13px;
    color: var(--color-sub-heading);
    font-weight: 400;
}

.external-job-application-view .job-title .verified-badge
{
    color: var(--bs-success);
}

.external-job-application-view .job-meta
{
    color: var(--color-sub-heading);
    font-size: 18px;
}

.external-job-application-view .job-meta strong
{
    font-weight: bold;
}

.external-job-application-view .job-location
{
    margin-top: 13px;
}

.external-job-application-view .job-location .badge
{
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    gap: 5px;
    border-radius: 79px;
}

.external-job-application-view .action-buttons
{
    display: flex;
    align-items: center;
}

.external-job-application-view .action-buttons .btn-link
{
    color: var(--color-sub-heading);
    font-size: 16px;
    padding: 6px 10px;
}

.external-job-application-view .action-buttons .btn-link:hover
{
    color: var(--bs-primary);
}

.external-job-application-view .application-card
{
    border: none;
    padding: 16px;
    background: none !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
}

.external-job-application-view .application-card .card-title
{
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 6px;
    color: var(--color-heading-text);
}

.external-job-application-view .application-card .card-subtitle
{
    font-size: 13px;
    text-align: center;
    color: var(--color-sub-heading);
    margin-bottom: 26px;
}

.external-job-application-view .form-label
{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-heading-text);
}

.external-job-application-view .form-control,
.external-job-application-view .form-select
{
    min-height: 51px;
}

.external-job-application-view .form-text
{
    color: var(--color-sub-heading);
    font-size: 11px;
    margin-top: 5px;
}

.external-job-application-view .file-upload-button
{
    width: 100%;
    background-color: var(--color-slate-blue);
    border: 1px solid var(--color-slate-blue);
    border-radius: 400px;
    padding: 11px 16px;
    font-weight: 500;
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.external-job-application-view .file-upload-button:hover
{
    background-color: var(--color-slate-blue);
    color: var(--bs-white);
}

.external-job-application-view .file-upload-button i
{
    font-size: 14px;
}

.external-job-application-view .expected-salary-container
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.external-job-application-view .expected-salary-container .salary-separator
{
    color: var(--color-sub-heading);
    font-size: 11px;
    margin: 0 5px;
}

.external-job-application-view .privacy-agreement
{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0;
}

.external-job-application-view .privacy-agreement .form-check-input
{
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #d0d0d0;
}

.external-job-application-view .privacy-agreement .form-check-label
{
    font-size: 12px;
    font-weight: bold;
    color: var(--color-body-text);
}

.external-job-application-view .privacy-agreement .form-check-label a
{
    color: var(--bs-success);
    text-decoration: none;
}

.external-job-application-view .privacy-agreement .form-check-label a:hover
{
    text-decoration: underline;
}

.external-job-application-view .submit-button
{
    background-color: var(--bs-success);
    border: none;
    border-radius: 400px;
    padding: 11px 26px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.external-job-application-view .submit-button:hover
{
    background-color: #0c964a;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.external-job-application-view .date-input-container
{
    position: relative;
}

.external-job-application-view .date-input-container .form-control
{
    padding-right: 32px;
}

.external-job-application-view .date-input-container .calendar-icon
{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-sub-heading);
    pointer-events: none;
}

.external-job-application-view .btn-submit
{
    padding: 12px 24px;
    border-radius: 79px;
}

/* ----------  Campaigns  ---------- */

.campaigns-container
{
    margin-bottom: 36px;
    display: flex;
    justify-content: space-between;
}

.campaigns-container .btn.btn-primary
{
    border-radius: 6px;
}

.campaigns-container .campaigns-list
{
    max-width: 640px;
    border-radius: 19px;
    background-color: var(--bs-white);
    padding: 13px 19px;
    box-shadow: 0px 2px 10px 0px rgba(140, 140, 140, 0.10);
}

.campaigns-container .list-group-item
{
    border: none;
    background: none !important;
    border-bottom: 1px solid #DEDEDE;
    padding-top: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.campaigns-container .list-group-item:last-child
{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.campaigns-container .list-group-item .item-subtitle
{
    font-size: 11px;
    color: #828282;
}

.campaigns-container .list-group-item .item-title
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.campaigns-container .list-group-item .item-title .item-title-group
{
    position: relative;
    z-index: 2;
}

.campaigns-container .list-group-item .item-title .title-text
{
    font-size: 19px;
    font-weight: 600;
    color: #223543;
}

.campaigns-container .list-group-item .item-title .title-text:focus
{
    box-shadow: none;
    outline: none;
}

.campaigns-container .list-group-item .item-meta ul
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.campaigns-container .list-group-item .item-meta ul li
{
    font-size: 11px;
    color: #828282;
    display: flex;
    align-items: center;
    gap: 3px;
}

.campaigns-container .list-group-item .item-meta ul li strong
{
    font-weight: 600;
    color: var(--color-body-text);
    font-size: 13px;
}

/* ----------  List  ---------- */

.list-inline
{
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ----------  Campaign List  ---------- */

.campaign-list
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campaign-list .campaign-item
{
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 19px 24px;
    border-radius: 13px;
    background: var(--bs-white);
    border: 1px solid var(--outline-button, #DEDEDE);
    box-shadow: 3px 3px 20px 0px rgba(211, 211, 211, 0.15);
}

.campaign-list .campaign-item .item-contents
{
    margin-right: auto;
    display: flex;
    align-items: center;
}

.campaign-list .campaign-item .item-icon
{
    display: flex;
    margin-right: 13px;
    width: 51px;
    height: 51px;
    justify-content: center;
    align-items: center;
    flex: 1 0 51px;
    border-radius: 80px;
    background: #EDEDED;
}

.campaign-list .campaign-item .item-contents h4,
.campaign-list .campaign-item .item-contents p,
.campaign-list .campaign-item .item-contents ul li,
.campaign-list .campaign-item .item-contents ul li span,
.campaign-list .campaign-item .item-contents a
{
    color: var(--icon-outlined-color, #828282);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 0;
}

.campaign-list .campaign-item h3
{
    color: var(--Sub-heading-text, #223543);
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

.campaign-list .campaign-item p
{
    font-weight: normal;
}

.campaign-list .campaign-item ul li span
{
    color: var(--color-body-text);
}

.campaign-list .campaign-item .item-contents a
{
    color: var(--color-primary);
}

.campaign-list .campaign-item ul li::after
{
    content: '|';
    font: inherit;
    color: inherit;
    margin: 0 8px;
}

.campaign-list .campaign-item ul li:last-child::after
{
    display: none;
}

.campaign-list .campaign-item .item-details
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campaign-list .campaign-item .item-title
{
    display: flex;
    align-items: center;
    gap: 3px;
}

.campaign-list .campaign-item .btn
{
    min-height: 35px;
    min-width: 35px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.campaign-list .campaign-item .item-actions
{
    display: flex;
    align-items: center;
    gap: 13px;
}

/* ----------  HTMX  ---------- */

.htmx-indicator
{
    pointer-events: none !important;
}

.htmx-request
{
    pointer-events: all !important;
}

/* ----------  Calendar  ---------- */

.daterangepicker td.active, .daterangepicker td.active:hover
{
    color: #fff !important;
}

/* ----------  UI Sortable  ---------- */

.vacancy-card.ui-sortable-placeholder
{
    min-height: 200px;
    border-radius: 13px;
    background: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    border: 1px dashed var(--color-icon-outlined);
}

/* ----------  Calendar Range Picker  ---------- */

.daterangepicker .in-range:not(.active):not(.start-date):not(.end-date)
{
    background-color: hsl(var(--color-primary-hsl), 0.1) !important;
}

.daterangepicker .active,
.daterangepicker .active:hover,
.daterangepicker .start-date,
.daterangepicker .end-date
{
    background-color: var(--color-primary) !important;
}

.daterangepicker .today:not(.active):not(.start-date):not(.end-date):not(.in-range)
{
    color: var(--color-primary) !important;
    background-color: hsl(var(--color-primary-hsl), 0.2) !important;
}

/* ----------  Talentpool Details  ---------- */

.view-talent-details
{
    padding: 26px 19px;
}

.view-talent-details .card
{
    margin: 0;
    margin-bottom: 24px;
}

.view-talent-details .card:last-child
{
    margin-bottom: 0;
}

.card.card-talent-details
{
    padding: 24px 19px;
}

.card.card-talent-details .card-header
{
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    margin-bottom: 16px;
}

.card.card-talent-details .card-header .card-title
{
    padding: 0;
    font-size: 18px;
    color: #04231B;
    font-weight: 700;
    margin-bottom: 0;
}

.card.card-talent-details .card-body
{
    padding: 24px;
    border-radius: 13px;
    border: 1px solid var(--outline-button, #DEDEDE);
}

.card.card-talent-details .card-section
{
    margin-bottom: 21px;
    padding-bottom: 21px;
    border-bottom: 1px solid #DEDEDE;
}

.card.card-talent-details .card-section:last-child
{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.card.card-talent-details .card-section h4
{
    color: #04231B;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}

.card.card-talent-details .card-section h5
{
    color: #111E2C;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 0;
}

.card.card-talent-details .card-section p
{
    color: var(--color-body-text);
    font-size: 11px;
    margin-bottom: 0;
}

.card.card-talent-details .card-section .section-head,
.card.card-talent-details .card-section .section-content
{
    margin-bottom: 19px;
}

.card.card-talent-details .card-section .section-content:last-child
{
    margin-bottom: 0;
}

.card.card-talent-details .card-section .section-head,
.card.card-talent-details .card-section .section-head .section-head-content,
.card.card-talent-details .card-section .section-content
{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card.card-talent-details .meta-list
{
    margin: 0;
    padding: 0;
    list-style-type: none;

    display: flex;
    flex-direction: row;
    gap: 24px;
}

.card.card-talent-details .meta-list li
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.card.card-talent-details .meta-list li .badge
{
    min-width: 35px;
    min-height: auto;
    padding: 5px 11px;
    border-radius: 79px;
    border: 1px solid transparent;
}

.card.card-talent-details .meta-list li .badge.badge-primary
{
    color: var(--color-primary);
    background-color: transparent;
    border-color: var(--color-primary);
}

.card.card-talent-details .meta-list li .badge.badge-white
{
    color: var(--bs-dark);
    border-color: var(--bs-white);
}

.card.card-talent-details .meta-list li .badge.badge-success
{
    color: var(--color-success);
    border-color: var(--color-success);
}

.card.card-talent-details .ai-matches-list
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    align-self: stretch;
}

.card.card-talent-details .ai-matches-list .list-item
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    min-height: 58px;
    padding: 14px;
    border-radius: 13px;
    background: #F8F8F8;

    color: var(--body-text, var(--color-body-text));
    font-size: 11px;
    font-weight: 400;
}

.card.card-talent-details .ai-matches-list .list-item span
{
    display: block;
}

.card.card-talent-details .ai-matches-list .list-item .item-main
{
    display: flex;
    align-items: center;
    max-width: 320px;
    flex: 0 0 320px;
}

.card.card-talent-details .ai-matches-list .list-item h5
{
    font-weight: 700;
}

.card.card-talent-details .ai-matches-list .list-item .item-actions .btn
{
    min-width: 102px;
}

.card.card-talent-details .ai-matches-list .list-item .item-icon
{
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-right: 10px;
    border-radius: 80px;
    background: var(--bs-white);

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

.card.card-talent-details .ai-matches-list .list-item .item-meta
{
    max-width: 480px;
    flex: 0 0 480px;
}

.card.card-talent-details .ai-matches-list .list-item .item-meta .item-ctc
{
    color: var(--Sub-heading-text, #223543);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
}

.card.card-talent-details .ai-matches-list .list-item .item-meta .item-ctc small
{
    font-size: 11px;
    font-weight: 400;
}

.card.card-talent-details .ai-matches-list .list-item .item-meta ul
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card.card-talent-details .ai-matches-list .list-item .item-meta ul li
{
    display: flex;
    align-items: center;
    gap: 3px;

    color: var(--body-text, var(--color-body-text));
    font-size: 11px;
    font-weight: 400;
}

.activity-logs-container
{
    margin-bottom: 24px;
}

.activity-log-list
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-log-list span
{
    display: inline-flex;
}

.activity-log-list .list-item
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    padding: 13px 16px;
    box-shadow: 0 0 0 1px #e5e7eb;
    align-items: stretch;
}

.activity-log-list .item-section
{
    position: relative;
    z-index: 2;

    min-width: 144px;
    padding: 0 32px;
}

.activity-log-list .item-section:first-child
{
    padding-left: 0;
    min-width: 208px;
}

.activity-log-list .item-section:last-child
{
    padding-right: 0;
}

.activity-log-list .item-section::after
{
    content: '';
    display: block;
    width: 1px;
    height: 100%;

    background-color: #e5e7eb;
    position: absolute;
    right: 0;
    top: 0;
}

.activity-log-list .item-section:last-child::after
{
    display: none;
}

.activity-log-list .section-title
{
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 3px;
}

.activity-log-list .section-value
{
    font-size: 11px;
    color: #111827;
}

.activity-log-list .section-value a
{
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary);
}

.activity-log-list .badge
{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 19px;
    font-size: 11px;
    min-height: 42px;
    border-radius: 11px;
    font-weight: 400;
}

.activity-log-list .item-avatar
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 79px;
    background-color: #a855f7;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.activity-log-list .item-section.section-message
{
    flex: 1 !important;
}

.activity-log-list .item-section.section-message .section-value
{
    display: block;
}

/* ----------  Pagination - Global  ---------- */

.pagination
{
    margin-bottom: 0;
    gap: 5px;
}

.pagination .page-item .page-link
{
    height: 34px;
    width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #DEDEDE;
    background-color: var(--bs-white);

    font-size: 13px;
    font-weight: 700;
    color: var(--color-body-text);
}

.pagination .page-item.active .page-link
{
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:active,
.pagination .page-item .page-link:focus
{
    box-shadow: none;
}

.pagination .page-item.page-arrow .page-link
{
    border: 0;
    background-color: transparent;
}

/* ----------  AI Submission Form  ---------- */

.ai-pdf-submission-form
{
    padding: 40px 0;
    padding-left: 64px;
}

.ai-pdf-submission-form .form-wrapper
{
    max-width: 880px;
    padding: 32px 29px;
    border-radius: 32px;
    background-color: var(--bs-white);
}

.form-section.layout-v2
{
    margin-bottom: 27px;
}

.form-section.layout-v2:last-child
{
    margin-bottom: 0;
}

.form-section.layout-v2 .section-title
{
    font-size: 26px;
    font-weight: 700;
    min-height: 75px;
    text-align: center;
    border-radius: 13px;
    color: var(--bs-white);
    background: var(--color-primary);

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

    margin-bottom: 19px;
}

.form-section.layout-v2 .section-title h3
{
    margin-bottom: 0;
}

.form-section.layout-v2 .section-title small
{
    font-weight: 500;
    font-size: 19px;
}

.form-section.layout-v2 .section-content
{
    padding: 27px;
    border-radius: 13px;
    background: #F7F7FA;
}

.form-group .input-group-toggleable
{
    position: relative;
    z-index: 2;
}

.form-group .input-group-toggleable .form-control
{
    position: relative;
    z-index: 2;
}

.form-group .input-group-toggleable .atn-toggle
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;

    height: 32px;
    width: 32px;
    padding: 0;

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

.form-section.layout-v2 .form-group-table
{
    padding: 13px;
    border-radius: 10px;
    background: var(--bs-white);

    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.form-section.layout-v2 .form-group-table table.table
{
    --bs-table-border-color: #dedede;

    margin: 0;
    margin-bottom: 13px;
    vertical-align: middle;
}

.form-section.layout-v2 .form-group-table table.table:last-child
{
    margin-bottom: 0;
}

.form-section.layout-v2 .form-group-table table.table tr
{
    border-color: #dedede;
}

.form-section.layout-v2 .form-group-table table.table thead th
{
    font-size: 11px;
    min-height: 34px;
    text-transform: none;
    font-weight: 600;
    background: #f8f8f8;
    white-space: nowrap;
}

.form-section.layout-v2 .form-group-table table.table thead th::after
{
    display: none;
}

.form-section.layout-v2 .form-group-table table.table th,
.form-section.layout-v2 .form-group-table table.table td
{
    padding: 10px;
    text-align: left;
}

.form-section.layout-v2 .form-group-table table.table td
{
    font-size: 13px;
    font-weight: 400;
    color: var(--color-body-text) !important;
    border-bottom-width: 1px;
}

/* ----------  Card Panel Layout  ---------- */

.card.card-panel-layout
{
    margin: 0;
    padding: 19px;
    padding-top: 16px;
    border-radius: 13px;
    background: #F6F7F9 !important;
}

.card.card-panel-layout .card-header
{
    border: 0;
    padding: 0;
    background: none;
    margin-bottom: 16px;
}

.card.card-panel-layout .card-header .card-title
{
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: #04231b;
}

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

.card.card-panel-layout .card-body
{
    padding: 13px;
    border-radius: 6px;
    background: var(--bs-white);
}

.card .card-criteria-list .list-item
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 14px;
    color: var(--color-body-text);
    min-height: 34px;
    font-weight: 400;
}

.card .card-criteria-list .list-item .item-actions
{
    display: flex;
    align-items: center;
    gap: 13px;
}

.card .card-criteria-list .list-item .item-actions .item-atn
{
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
    background: #F7F7FA;
    border: 1px solid #E7E7E7;

    position: relative;
    z-index: 2;

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

.card .card-criteria-list .list-item .item-actions .item-atn input[type="checkbox"]
{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.card .card-criteria-list .list-item .item-actions .item-atn .atn-checkbox-indicator
{
    display: none;
}

.card .card-criteria-list .list-item .item-actions .item-atn input[type="checkbox"]:checked + .atn-checkbox-indicator
{
    display: block;
}

/* ----------  Criteria Cards  ---------- */

.criteria-cards-container .criteria-panels
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ----------  Tags  ---------- */

.tags-list
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 13px;
}

.tags-list .tag-item
{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 43px;
    padding: 10px 16px;

    border-radius: 79px;
    border: 1px solid #dedede;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-body-text);
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}

.tags-list .tag-item::before
{
    content: '\F4FE';
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: 'bootstrap-icons';
}

.tags-list .tag-item.selected::before
{
    content: "\F272";
}

.tags-list .tag-item input
{
    position: absolute;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

.tags-list .tag-item:hover:not(.selected),
.tags-list .tag-item:active:not(.selected),
.tags-list .tag-item:focus:not(.selected)
{
    background-color: #dedede;
}

.tags-list .tag-item.selected
{
    background: var(--color-primary);
    border-color: transparent;
    color: #fff;
}

.tags-list .tag-item .item-remove i
{
    display: block;
    font-size: inherit;
    color: inherit;
}

.tags-list .tag-form
{
    position: relative;
    z-index: 2;
}

.tags-list .tag-form .form-input
{
    min-height: 43px;
    border-radius: 79px;
    border: 1px solid var(--color-primary);
    padding: 10px 13px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    width: 240px;
    padding-right: 40px;
}

.tags-list .tag-form .form-input::placeholder
{
    color: inherit;
}

.tags-list .tag-form .form-atn
{
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

/* ----------  Wizard  ---------- */

.step-wizard.step-inline-wizard.wizard-vertical
{
    display: flex;
    flex-direction: column;
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    padding-top: 6px;
    padding-bottom: 6px;
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step:first-child
{
    padding-top: 0;
}

.step-wizard.step-inline-wizard .wizard-step:first-child .step-indicator::after
{
    display: none;
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step:last-child
{
    padding-bottom: 0;
}

.step-wizard.step-inline-wizard .wizard-step:last-child .step-indicator::before
{
    display: none;
}

.step-wizard.step-inline-wizard .wizard-step .step-indicator
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 27px;
    width: 27px;
    border-radius: 79px;

    position: relative;
    z-index: 5;

    background: #dedede;
    color: #fff;
    font-size: 13px;
    pointer-events: none;
    border: 1px solid transparent;
}

.step-wizard.step-inline-wizard .wizard-step .step-indicator::before,
.step-wizard.step-inline-wizard .wizard-step .step-indicator::after
{
    content: '';
    display: block;
    background: inherit;

    position: absolute;
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step .step-indicator::before,
.step-wizard.step-inline-wizard.wizard-vertical .wizard-step .step-indicator::after
{
    width: 2px;
    height: 240px;

    left: 50%;
    transform: translateX(-50%);
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step .step-indicator::before
{
    top: 100%;
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step .step-indicator::after
{
    bottom: 100%;
}

.step-wizard.step-inline-wizard.wizard-vertical .wizard-step.active:not(.completed) .step-indicator::before,
.step-wizard.step-inline-wizard.wizard-vertical .wizard-step.active:not(.completed) .step-indicator::after
{
    background: #dedede;
}

.step-wizard.step-inline-wizard .wizard-step.completed + .wizard-step .step-indicator::after
{
    background: var(--color-primary) !important;
}

.step-wizard.step-inline-wizard .wizard-step .step-indicator i
{
    line-height: unset;
    font-size: inherit;
    position: relative;
    z-index: 5;
}

.step-wizard.step-inline-wizard .wizard-step.active:not(.completed) .step-indicator
{
    background: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.step-wizard.step-inline-wizard .wizard-step.completed .step-indicator
{
    background: var(--color-primary) !important;
}

/* ----------  Wizard - Horizontal  ---------- */

.step-wizard.step-inline-wizard.wizard-horizontal
{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f8f8f8;
    padding: 24px;
    border-radius: 19px;
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step
{
    flex: 1;
    overflow: hidden;

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

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .step-indicator
{
    width: 35px;
    height: 35px;
    margin-bottom: 26px;
    background: #97A2A6;
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .step-indicator i
{
    font-size: 19px;
    color: inherit;
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .step-indicator:before,
.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .step-indicator:after
{
    height: 2px;
    width: 800px;

    top: 50%;
    transform: translateY(-50%);
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .step-indicator:before
{
    left: calc(100% + 8px);
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .step-indicator:after
{
    right: calc(100% + 8px);
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step .block-title
{
    margin-bottom: 11px;
}

.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step.active:not(.completed) .step-indicator::before,
.step-wizard.step-inline-wizard.wizard-horizontal .wizard-step.active:not(.completed) .step-indicator::after
{
    background: #97A2A6;
}

/* ----------  Form Group - Inline  ---------- */

.form-group.group-inline
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 0 13px;
    border: 1px solid #dedede;
    border-radius: 6px;
}

.form-group.group-inline label
{
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-body-text);
}

.form-group.group-inline input
{
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-body-text);
    min-height: 51px;
}

/* ----------  Card - Vacancy Funnel Info  ---------- */

.card.card-vacancy-funnel-info
{
    padding: 24px 19px;
}

.card.card-vacancy-funnel-info .card-header .card-title .title-icon
{
    width: 56px;
    height: 56px;
    border-radius: 79px;
    background: #EDEDED;
}

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

.prose-content
{
    margin-bottom: 24px;
}

prose-content *
{
    color: var(--color-body-text) !important;
}

.prose-content h4
{
    margin-bottom: 12px;
}

.prose-content:last-child
{
    margin-bottom: 0;
}

.prose-content p,
.prose-content ul,
.prose-content ol,
.prose-content blockquote
{
    margin-bottom: 12px;
}

.prose-content p:last-child,
.prose-content ul:last-child,
.prose-content ol:last-child,
.prose-content blockquote:last-child
{
    margin-bottom: 0;
}

.prose-content p:empty,
.prose-content ul:empty,
.prose-content ol:empty,
.prose-content blockquote:empty
{
    display: none !important;
}

.progress-info-list
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.progress-info-list .progress-item
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;

    position: relative;
    z-index: 2;

    font-size: 13px;
    color: var(--color-sub-heading);
}

.progress-info-list .progress-item .item-title
{
    font-weight: bold;
}

.progress-info-list .progress-item .item-progress
{
    position: relative;
    z-index: 2;
}

.progress-info-list .progress-item .item-progress .progress-handle
{
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 3px;
    margin-left: -5px;
}

.card.card-profile-arc
{
    background-color: var(--bs-primary) !important;
}

.card.card-profile-arc .profile-progress-arc
{
    position: relative;
    z-index: 2;
    padding: 16px;
    height: 280px;
    width: 280px;
    border-radius: 799px;
    background-color: var(--bs-white);
    margin: 0 auto;
}

.card.card-profile-arc .profile-progress-arc .profile-arc-label
{
    font-size: 29px;
    font-weight: 700;
    color: var(--bs-black);
    bottom: -12px !important;
}

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

.bg-none
{
    background: none !important;
}

/* ----------  AI Report Modal  ---------- */

.fyi-ai-report-modal-content
{
    text-align: center;
}

.fyi-ai-report-modal-content ol,
.fyi-ai-report-modal-content ul
{
    text-align: left;
}

.fyi-ai-report-modal-content .modal-section + hr
{
    display: none;
}

.fyi-ai-report-modal-content .modal-section
{
    padding: 13px;
    border-radius: 6px;
    margin-bottom: 16px;
    text-align: center;
    border: 1px solid #F0F0F0;
}

.fyi-ai-report-modal-content .modal-section:last-child
{
    margin-bottom: 0;
}

.fyi-ai-report-modal-content .modal-section .section-title
{
    margin-bottom: 13px;
}

.fyi-ai-report-modal-content .modal-section .section-title span,
.fyi-ai-report-modal-content h3
{
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 5px;
    background: #465866;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.fyi-ai-report-modal-content .modal-section .section-content table.table
{
    --bs-table-border-color: #97A2A6;

    margin: 0;
    filter: none;
    background: #F7F7FA;
    border-color: var(--bs-table-border-color);
    vertical-align: middle;
}

.fyi-ai-report-modal-content .modal-section .section-content table.table td
{
    padding: 10px;
    border: 1px solid var(--bs-table-border-color);
}

/* ----------  Gantt Chart  ---------- */

.gantt .bar-wrapper
{
    --__bar-bg: #dedede;
    --__bar-color: #465866;
}

.gantt .bar-wrapper .bar,
.gantt .bar-wrapper .bar-progress
{
    border: 0;
    outline: 0;
    border-left: 3px solid var(--__bar-color);
    border-radius: 6px;
    fill: var(--__bar-bg) !important;
}

.gantt .bar-wrapper .bar-label
{
    fill: var(--__bar-color) !important;
}

.gantt .bar-wrapper.gantt-longlist
{
    --__bar-bg: #FFF4F0;
    --__bar-color: #F49C71;
}

.gantt .bar-wrapper.gantt-shortlist
{
    --__bar-bg: #E3E8FF;
    --__bar-color: #4973CD;
}

.gantt .bar-wrapper.gantt-hired
{
    --__bar-bg: #EDFAF7;
    --__bar-color: #0F9E79;
}

.gantt .bar-wrapper.gantt-rejected
{
    --__bar-bg: #FFF1EB;
    --__bar-color: #FF4D8D;
}

/* ----------  Card - Candidate Profile  ---------- */

.card.card-candidate-profile .card-personal-info .section-contents
{
    margin: 0 auto;
    max-width: 360px;
    border-radius: 10px;
    border: 1px solid #E8F3E0;
    padding: 20px 0;
}

.card.card-candidate-profile .card-personal-info ul
{
    width: 100%;
    margin-bottom: 20px;
}

.card.card-candidate-profile .card-personal-info ul:last-child
{
    margin-bottom: 0;
}

.card.card-candidate-profile .card-personal-info ul li
{
    position: relative;
    z-index: 2;
    padding: 0 20px;

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.card.card-candidate-profile .card-personal-info ul li:after
{
    content: '';
    width: 1px;
    height: 100%;
    background: #E8F3E0;

    position: absolute;
    right: 0;
    top: 0;
}

.card.card-candidate-profile .card-personal-info ul li:last-child:after
{
    display: none;
}

.card.card-candidate-profile .card-personal-info ul li small
{
    font-size: 11px;
}

.card.card-candidate-profile .card-personal-info ul li span
{
    font-size: 13px;
    font-weight: 700;
}

.page-loading-indicator
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 11111;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------  Recruiter Home  ---------- */

.vitem-badge, .vitem-empty-cell
{
    padding: 6px;
    min-height: 38px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vitem-badge
{
    text-decoration: none;
    border-radius: 10px;
    border-left: 3px solid var(--__vitem-primary-color);
    font-size: 11px;
    color: var(--__vitem-primary-color);
    background-color: var(--__vitem-secondary-color);
}

table.table.table-stages td
{
    padding: 4px;
}

table.table.table-stages td.stage-1
{
    --__vitem-primary-color: #F49C71;
    --__vitem-secondary-color: #FFF4F0;
}

table.table.table-stages td.stage-2
{
    --__vitem-primary-color: #0F9E79;
    --__vitem-secondary-color: #EDFAF7;
}

table.table.table-stages td.stage-3
{
    --__vitem-primary-color: #5B86E2;
    --__vitem-secondary-color: #E3E8FF;
}

table.table.table-stages td.stage-4
{
    --__vitem-primary-color: #9772C7;
    --__vitem-secondary-color: rgba(151, 114, 199, 0.2);
}

table.table.table-stages tr[data-empty="true"]
{
    pointer-events: none;
}

/* Select2 Styles for Filter Dropdowns */
.select2-container--default {
	display: block;
	height: 43px;
	flex: 1;
}

.select2-container--default .select2-selection--single {
	border: none;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	height: auto !important;
	right: 1rem !important;
	transform: translateY(-50%);
	line-height: 1;
	width: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::before {
	content: '\F282';
	font-family: 'bootstrap-icons';
	font-size: 0.875rem;
	color: var(--bs-gray-600);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none !important;
}

span.select2-container.select2-container--default.select2-container--open:not(.select2) {}

.select2-container--default .select2-selection--single {
	border: 1px solid transparent;
    background-color: #F6F7F9;
	border-radius: 6px !important;
	height: 43px;
	display: flex;
	align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 43px;
	padding: 0;
	padding-right: 1rem;
	font-size: 0.875rem;
	color: var(--bs-body-color);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
	right: 0.5rem;
}

.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--bs-primary);
}

/* Select2 Styles */

.select2-dropdown {
	border: 0;
	/* margin-top: 1rem; */
	box-shadow: 0 3px 10px rgba(var(--bs-black-rgb), 0.1);
	border-radius: 6px !important;
	margin-top: 0.5rem;
}

.select2-search.select2-search--dropdown {
	padding: 0.5rem 0.75rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border-color: transparent;
    background-color: #F6F7F9;
	border-radius: 8px !important;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--bs-body-color);
	cursor: pointer;
}

.select2-dropdown .select2-results {
	overflow: hidden;
	border-radius: 0 0 6px 6px !important;
}

.select2-dropdown .select2-results .select2-results__options {
    display: block;
}

.select2-dropdown .select2-results__option {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--bs-body-color);
	cursor: pointer;
}

.select2-container--default .select2-results__option--selected {
	color: var(--bs-white) !important;
	background-color: var(--bs-primary) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: rgba(0,116,86,.1);
	color: var(--bs-body-color);
}

[data-repeater] [contenteditable="true"] {
    border: 2px solid var(--bs-dark) !important;
    background: var(--color-dashboard-bg) !important;
    border-radius: 6px !important;
    padding: 10px !important;
    min-width: 160px !important;
}

.bg-hover-transparent:hover {
    background-color: transparent !important;
}