@import './component.css';
@import './Typography.css';



* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul {
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    cursor: pointer;
    text-decoration: none !important;
}

a:hover {
    cursor: pointer;
    text-decoration: none !important;
    background-color: transparent !important;
}

a:focus {
    text-decoration: none;
    background-color: transparent !important;
}

.dropdown-toggle::after {
    margin-left: var(--Number8);
}


button:focus,
button:hover,
input:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}

.hide-scrollbar::-webkit-scrollbar {
    width: 0 !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.custom-scroll-new::-webkit-scrollbar {
    width: 8px;
}

.custom-scroll-new::-webkit-scrollbar-track {
    background-color: rgba(39, 174, 96, 0.1);
    -webkit-border-radius: 19px;
    border-radius: 19px;
}

[data-theme="dark"] .custom-scroll-new::-webkit-scrollbar-track {
    background-color: #313131;
}

.custom-scroll-new::-webkit-scrollbar-thumb {
    -webkit-border-radius: 19px;
    border-radius: 19px;
    background: #6d6d6d;
    background: linear-gradient(90deg, #20dcb0 0%, #1acca2 100.02%);
}


.custom-scroll-sm::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}

.custom-scroll-sm::-webkit-scrollbar-track {
    background-color: rgba(39, 174, 96, 0.1);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.custom-scroll-sm::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #6d6d6d;
    background: linear-gradient(90deg, #20dcb0 0%, #1acca2 100.02%);
}


button:hover,
.cursor-pointer:hover {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

.dropdown-menu {
    box-shadow: var(--box-black-1);
}

.h1 {
    height: var(--Number1);
}

.w-50 {
    width: 50%;
}

.min-w-14px {
    min-width: var(--Number14)
}

.min-w-20px {
    min-width: var(--Number20)
}

.min-w-20px {
    min-width: var(--Number20)
}

.min-w-28px {
    min-width: var(--Number28)
}

.min-w-49px {
    min-width: var(--Number49)
}

.min-w-54px {
    min-width: var(--Number54)
}

.min-w-60px {
    min-width: var(--Number60)
}

.min-w-68px {
    min-width: var(--Number68)
}

.min-w-70px {
    min-width: var(--Number70)
}

.min-w-76px {
    min-width: var(--Number76)
}

.min-w-80px {
    min-width: var(--Number80)
}

.min-w-84px {
    min-width: var(--Number84);
}

.min-w-93px {
    min-width: var(--Number93);
}

.min-w-102px {
    min-width: var(--Number102)
}

.min-w-104px {
    min-width: var(--Number104)
}

.min-w-120px {
    min-width: var(--Number120)
}

.min-w-150px {
    min-width: var(--Number150)
}

.min-w-158px {
    min-width: var(--Number158)
}

.min-w-182px {
    min-width: var(--Number182)
}

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

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

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

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

.max-w-50px {
    max-width: var(--Number50)
}

.min-w-84px {
    max-width: var(--Number84)
}

.max-w-84px {
    max-width: var(--Number84)
}

.max-w-60px {
    max-width: var(--Number60);
}

.max-w-70px {
    max-width: var(--Number70);
}

.max-w-104px {
    max-width: var(--Number104)
}

.max-w-120px {
    max-width: var(--Number120)
}

.max-w-140px {
    max-width: var(--Number140)
}

.max-w-150px {
    max-width: var(--Number150)
}

.max-w-180px {
    max-width: 180px !important;
}

.max-w-201px {
    max-width: 201px !important;
}

.max-w-212px {
    max-width: 212px !important;
}

.max-w-259px {
    max-width: 259px;
}

.max-w-274px {
    max-width: 274px !important;
}

.max-w-239px {
    max-width: 239px;
}

.max-w-259px {
    max-width: 259px;
}

.max-w-268px {
    max-width: 268px;
}


.max-w-322px {
    max-width: 322px;
}

.max-w-356px {
    max-width: 356px;
}

.max-w-388px {
    max-width: 388px;
}

.max-w-446px {
    max-width: 446px;
}

.max-w-469px {
    max-width: 469px;
}

.max-w-474px {
    max-width: 474px;
}

.max-w-506px {
    max-width: 506px;
}

.max-w-576px {
    max-width: 576px;
}

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

.max-w-607px {
    max-width: 607px;
}

.max-w-632px {
    max-width: 632px;
}

.max-w-688px {
    max-width: 688px;
}

.max-w-708px {
    max-width: 708px;
}

.max-w-734px {
    max-width: 734px;
}

.max-w-768px {
    max-width: 768px;
}

.max-w-906px {
    max-width: 906px;
}

.max-w-962px {
    max-width: 962px;
}

.h-383 {
    height: 383px !important;
}

.h-545 {
    height: 545px !important;
}


.h-54px {
    height: var(--Number54);
}

.w-54px {
    width: var(--Number54);
}

.w-63px {
    width: var(--Number63);
}


.dropdown-toggle-arrow::after {
    display: none;
}

/* header */

header {
    background: var(--black-gradient);
    z-index: 1000;
}

.header-content {
    padding-bottom: var(--Number3);
    padding-top: var(--Number3);
}

[data-theme="dark"] header {
    background-color: var(--color-black-1);
}

/* logo section */
.logo-section {
    margin-right: var(--Number48);
}

.logo-section a img {
    max-width: var(--Number98);
}

/* Nav bar */
.navbarV2 li {
    font-family: Poppins-Regular;
    font-weight: 400;
    line-height: var(--Number19);
    font-size: var(--Number16);
    padding-bottom: var(--Number8);
    padding-top: var(--Number8);
}

.navbarV2 li a {
    color: var(--dark-mid-white) !important;
    padding: 0;
    margin-right: var(--Number24);
}

.navbarV2 li .active {
    color: var(--dark-primary) !important;
}

.navbarV2 li a:hover {
    color: var(--dark-primary) !important;
}

/* Profile nav */
.profile-nav li {
    cursor: pointer;
}

.h-40 {
    height: var(--Number40) !important;
}

/* Notification */

.wh-4 {
    width: var(--Number4);
    height: var(--Number4);
}

.wh-6 {
    width: var(--Number6);
    height: var(--Number6);
}

.wh-10 {
    width: var(--Number10);
    height: var(--Number10);
}

.wh-16 {
    width: var(--Number16);
    height: var(--Number16);
}

.wh-24 {
    width: var(--Number24);
    height: var(--Number24);
}

.wh-26 {
    width: var(--Number26);
    height: var(--Number26);
}

.wh-28 {
    width: var(--Number28);
    height: var(--Number28);
}

.wh-30 {
    width: var(--Number30);
    height: var(--Number30);
}

.wh-32 {
    width: var(--Number32);
    height: var(--Number32);
}

.wh-40 {
    width: var(--Number40);
    height: var(--Number40);
}

.wh-60 {
    width: var(--Number60);
    height: var(--Number60);
}

.wh-68 {
    width: var(--Number68);
    height: var(--Number68);
}

.wh-70 {
    width: var(--Number70);
    height: var(--Number70);
}

.wh-76 {
    width: var(--Number76);
    height: var(--Number76);
}

.w-76 {
    width: var(--Number76);
}

.wh-80 {
    width: var(--Number80);
    height: var(--Number80);
}

.wh-102 {
    width: var(--Number102);
    height: var(--Number102);
}

.wh-120 {
    width: var(--Number120);
    height: var(--Number120);
}

.min-wh-40 {
    min-width: var(--Number40);
    min-height: var(--Number40);
}

.max-vh-42 {
    max-height: 42vh;
}

/* Sub header */

.sub-header {
    background-color: var(--color-white);
}

[data-theme="dark"] .sub-header {
    background-color: var(--dark-cu-4);
}

.circle-progress-value {
    stroke-width: 6px;
    stroke: hsl(39, 100%, 50%);
}

.circle-progress-circle {
    stroke-width: 6px;
    stroke: hsl(39, 100%, 85%);
}

.circle-progress-text {
    fill: hsl(39, 100%, 50%);
}

.text-separator, .text-max {
    display: none;
}

.bg-color-grey {
    background-color: var(--light-background);
}

[data-theme="dark"] .bg-color-grey {
    background-color: var(--primary-dark);
}

/* Z-index */

.z-index-10 {
    z-index: 10;
}

.z-index-1111 {
    z-index: 1111;
}

.margin-top-25vh {
    margin-top: 25vh;
}

@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }

    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.job-card-progress[role="progressbar"] {
    --size: 2rem;
    --fg: #13846A;
    --bg: rgba(0, 0, 0, .10);
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
    min-width: var(--size)
}

[data-theme="dark"] .job-card-progress[role="progressbar"] {
    --size: 2rem;
    --fg: #43F1C9;
    --bg: #D9D9D9;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, #2c2d2f 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
    min-width: var(--size)
}

.job-card-progress[role="progressbar"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
    font-size: 8px;
    font-family: Poppins-Regular;
    opacity: .5;
    color: #000;
}

[data-theme="dark"] .job-card-progress[role="progressbar"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
    font-size: 8px;
    font-family: Poppins-Regular;
    opacity: .5;
    color: #fff;
}

.overall-question-list-attend[role="progressbar"] {
    --size: var(--Number49);
    --fg: #F2801B;
    --bg: #ddd;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #4E5768;
    min-width: var(--size)
}

[data-theme="dark"] .overall-question-list-attend[role="progressbar"] {
    --size: var(--Number49);
    --fg: #43F1C9;
    --bg: #ddd;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side, #2c2d2f 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: var(--fg);
    min-width: var(--size)
}

.orange-progress[role="progressbar"] {
    --fg: #F2801B;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
}

[data-theme="dark"] .orange-progress[role="progressbar"] {
    --fg: #F2801B;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
}

.pink-progress[role="progressbar"] {
    --fg: #EC1BF2;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
}

[data-theme="dark"] .pink-progress[role="progressbar"] {
    --fg: #F2801B;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
}

.sky-blue-progress[role="progressbar"] {
    --fg: #1EB7EA;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
}

[data-theme="dark"] .sky-blue-progress[role="progressbar"] {
    --fg: #1EB7EA;
    background:
        radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
}

.overall-question-list-attend[role="progressbar"]::before {
    display: none;
}

[data-theme="dark"] .overall-question-list-attend[role="progressbar"]::before {
    display: none;
}




/* Side Panel */
li.job-details-progress-line {
    font-size: var(--Number13);
    line-height: var(--Number22);
}

li.job-details-progress-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

li.job-details-progress-line::after {
    width: var(--Number1);
    height: var(--Number51);
    background-color: var(--light-grey-cs-2);
    opacity: .5;
    margin-top: var(--Number8);
    margin-bottom: var(--Number8);
    content: '';
    display: inline-flex;
    margin-left: var(--Number16);
}

li.job-details-progress-line:last-child::after {
    display: none;
}

li.horizontal-job-details-progress-line::after {
    width: 270px;
    height: var(--Number1);
    background-color: var(--light-grey-cs-2);
    opacity: .5;
    margin-top: var(--Number8);
    margin-bottom: var(--Number8);
    content: '';
    display: inline-flex;
    margin-left: var(--Number16);
    align-items: center;
    justify-content: space-between;
    margin-right: var(--Number20);
}

.drag-drop-section {
    border-radius: var(--Number8);
    border: var(--Number1) dashed var(--light-stroke);
    background: var(--light-background);
    padding-bottom: var(--Number12);
    padding-top: var(--Number12);
    text-align: center;
    font-weight: var(--Number14);
    line-height: var(--Number20);
}

[data-theme="dark"] .drag-drop-section {
    border: var(--Number1) var(--dark-grey-1);
    background: var(--white-05);
}

.input-file-upload {
    visibility: hidden;
    width: 0 !important;
}

.upload-video-v2 {
    overflow: hidden;
}

.upload-video-v2 img {
    min-width: var(--Number81);
    max-width: var(--Number81);
    height: var(--Number48);
    object-fit: cover;
}

.upload-video-v2 video {
    min-width: var(--Number81);
    max-width: var(--Number81);
    height: var(--Number48);
    object-fit: cover;
}

[data-theme="dark"] .text-black-60 {
    opacity: 60;
}

.calendar-report {
    position: relative;
}

.calendar-report input {
    padding-right: 56px;
    background: #fff;
    border: 1px solid var(--light-stroke, rgba(129, 138, 155, 0.50));
    box-sizing: border-box;
    border-radius: 8px;
    height: 45px;
    font-family: Poppins-Regular;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    color: var(--light-mid-black);
    width: 200px;
    padding-left: var(--Number4);
}

[data-theme="dark"] .calendar-report input {
    padding-right: 56px;
    background: transparent;
    border: 1px solid var(--light-stroke, rgba(129, 138, 155, 0.50));
    box-sizing: border-box;
    border-radius: 8px;
    height: 45px;
    font-family: Poppins-Regular;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    color: var(--dark-low-white);
    width: 200px;
    padding-left: var(--Number4);
}

[data-theme="dark"] .calendar-report input::placeholder {
    color: var(--dark-low-white);
}

.calendar-report svg {
    position: absolute;
    right: 16px;
    top: 13px;
}

.calendar-sm input {
    width: 138px !important;
    height: var(--Number28) !important;
    border-radius: var(--Number4) !important;
    background: var(--light-bg-1);
    border: none !important;
    font-size: var(--Number14) !important;
    padding-right: var(--Number32) !important;
}

[data-theme="dark"] .calendar-sm input {
    background: var(--white-10);
}

.calendar-sm svg {
    top: var(--Number5) !important;
    right: var(--Number8) !important;
}

#video-container {
    border-radius: var(--Number10);
    margin-top: var(--Number24);
    width: 450px;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.small-container-video {
    height: 155px;
    width: 100%;
}

#video-container #my-video {
    width: 100%;
}

#play-button, #pause-button {}

.circle-video {
    width: var(--Number26);
    height: var(--Number26);
    background-color: rgba(244, 244, 244, 0.40);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-video svg {
    width: var(--Number24);
    height: var(--Number24);
}

#play-button, #pause-button {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#play-button {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
}

/* CK editor */

.ck-editor {
    display: flex;
    flex-direction: column-reverse;
    font-family: Poppins-Regular;
}

.ck-editor ul li {
    list-style-type: disc;
}

.ck-editor ol li {
    list-style-type: decimal;
}


.ck.ck-editor__main>.ck-editor__editable {
    border: var(--Number1) solid var(--light-stroke) !important;
    border-top-right-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-bottom: none !important;
}

[data-theme="dark"] .ck.ck-editor__main>.ck-editor__editable {
    background-color: var(--white-500);
}

.ck-editor__editable[role="textbox"] {
    /* editing area */
    min-height: 200px;
    max-height: 200px;
    overflow-y: auto;
}

.ck-editor-121 .ck-editor__editable[role="textbox"] {
    min-height: 121px;
    max-height: 121px;
    overflow-y: auto;
}

.ck-content::-webkit-scrollbar {
    width: 0 !important;
}

.ck.ck-powered-by-balloon.ck-balloon-panel_visible {
    display: none !important;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
    border: var(--Number1) solid var(--light-stroke) !important;
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

[data-theme="dark"] .ck.ck-balloon-panel[class*=arrow_n]:before {
    border-color: transparent transparent var(--light-stroke) transparent;
    margin-top: calc(var(--ck-balloon-border-width)*-1);
}

[data-theme="dark"] .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
    background-color: var(--white-500);
}

[data-theme="dark"] .ck.ck-button.ck-disabled .ck-button__icon, .ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__label svg {
    fill: white !important;
}

[data-theme="dark"] .ck.ck-button.ck-disabled .ck-button__icon, .ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__label svg path {
    fill: white !important;
}

[data-theme="dark"] .ck.ck-button.ck-button-save {
    color: green !important;
}

[data-theme="dark"] .ck-table-bogus-paragraph {
    color: var(--color-white);
}

.ck .ck-button .ck-on .ck-button__icon {
    color: #2977ff !important;
}

[data-theme="dark"] .ck.ck-button.ck-on.ck.ck-list__item {
    color: #fff !important;
}

[data-theme="dark"] .ck.ck-button.ck-on.ck-button_with-text:hover {
    color: #000 !important;
}

[data-theme="dark"] .ck.ck-button.ck-on.ck-button_with-text {
    background-color: rgba(0, 0, 0, 0.30) !important;
    border: none !important;
}

[data-theme="dark"] .ck.ck-button.ck-on, a.ck.ck-button.ck-on {
    color: #2977ff !important;
}

[data-theme="dark"] .ck.ck-button.ck-off, a.ck.ck-button.ck-off {
    color: #fff !important;
}

[data-theme="dark"] .ck-editor__nested-editable_focused {
    background-color: var(--white-500) !important;
}

[data-theme="dark"] .ck-dropdown__panel-visible, [data-theme="dark"] .ck-balloon-rotator__content, [data-theme="dark"] .ck.ck-list {
    background-color: var(--white-500) !important;
}

[data-theme="dark"] .ck-dropdown__button {
    background-color: var(--light-grey-cs-2);
}

[data-theme="dark"] .ck .ck-insert-table-dropdown__label {
    color: var(--color-white) !important;
}

[data-theme="dark"] .ck .ck-input {
    background-color: var(--white-500) !important;
    color: var(--color-white) !important;
}

[data-theme="dark"] .ck.ck-balloon-panel[class*=arrow_n]:after {
    border-color: transparent transparent var(--white-500) transparent;
}

[data-theme="dark"] .ck.ck-list__item:hover {
    background-color: rgba(0, 0, 0, 0.30) !important;
}

.ck.ck-link-form {
    border-radius: 4px;
}

[data-theme="dark"] .ck.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label {
    background-color: var(--white-500) !important;
    color: var(--color-white) !important;
}

[data-theme="dark"] .ck-toolbar-container, [data-theme="dark"] .ck.ck-balloon-rotator {
    background: var(--white-500) !important;
    color: var(--color-white) !important;
}

[data-theme="dark"] .ck .ck-balloon-rotator__navigation {
    background: var(--white-500) !important;
    color: var(--color-white) !important;
}

[data-theme="dark"] .ck.ck-balloon-panel, [data-theme="dark"] .ck-reset_all:not(.ck-reset_all-exclude *), [data-theme="dark"] .ck.ck-reset, [data-theme="dark"] .ck.ck-reset_all {
    background: var(--white-500) !important;
    color: var(--color-white) !important;
}

[data-theme="dark"] .ck-reset_all :not(.ck-reset_all-excluded *), [data-theme="dark"] .ck.ck-reset, [data-theme="dark"] .ck.ck-reset_all {
    background: var(--white-500) !important;
    color: var(--color-white) !important;
}

.search-border-sm {
    width: 307px;
}

.search-border-sm form {}

.search-border-sm input {
    display: block;
    width: 100%;
    margin-left: var(--Number8);
    font-family: Poppins-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: var(--Number14);
    line-height: var(--Number19);
    color: var(--color-black);
    background-color: transparent;
    border: none;
}

.search-border-sm {
    flex-direction: row;
    width: var(--Number16);
    transition: 1s ease all;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.search-border-sm input {
    display: none;
}

.search-border-sm:hover {
    width: 307px;
}

.search-border-sm:hover input {
    display: block;
    width: 100%;
    margin-left: var(--Number8);
    font-family: Poppins-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: var(--Number14);
    line-height: var(--Number19);
    color: var(--color-black);
}

.search-border-sm.query-present {
    width: 307px;
}

.search-border-sm.query-present input {
    display: block;
    width: 100%;
    margin-left: var(--Number8);
    font-family: Poppins-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: var(--Number14);
    line-height: var(--Number19);
    color: var(--color-black);
}

[data-theme="dark"] .search-border-sm:hover input, [data-theme="dark"] .search-border-sm input {
    color: var(--color-white);
}

.search-border-sm:hover input::placeholder {
    font-family: Poppins-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: var(--Number14);
    line-height: var(--Number19);
    color: #616D82;
}

[data-theme="dark"] .search-border-sm:hover input::placeholder {
    color: var(--color-white);
}

.dotter {
    width: var(--Number3);
    height: var(--Number3);
    background-color: var(--light-high-black);
    border-radius: 50%;
}

.vertical-line-through-8 .noti-profile-section {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.notification-dropdown {
    min-height: 100px;
    width: 396px;
    background: #fff;
    box-shadow: 4px -1px 16px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    border: none;
    padding: 0;
}

.notification-section {
    padding-right: 24px;
    border-right: 1px solid #d6ece7;
    height: 39px;
    line-height: 39px;
    position: relative;
}

.notification-list-content .list-items-img {
    width: var(--Number40);
    height: var(--Number40);
    min-width: var(--Number40);
}

.notification-header h5 {
    line-height: var(--Number22);
}

.leading-21 {
    line-height: var(--Number21);
}

.leading-24 {
    line-height: var(--Number24);
}

.notification-section img:hover {
    cursor: pointer;
}

.count-new-label {
    color: var(--light-primary);
}

[data-theme="dark"] .count-new-label {
    color: var(--color-white);
}

.delete-hover-show {
    display: none;
}

.notification-list-item:hover .delete-hover-show {
    display: block;
    margin-bottom: 4px;
}

.list-patch {
    padding: 0;
    padding-right: 12px;
    max-height: 75vh;
    -webkit-mask-image: linear-gradient(181deg, rgb(0, 0, 0) 60%, transparent);
}

.list-patch li {
    padding-left: 16px;
    padding-bottom: 16px;
}

.list-patch li::before {
    width: var(--Number6);
    height: var(--Number6);
    background: var(--light-button);
    margin-right: var(--Number16);
    display: inline-block;
    content: '';
    border-radius: 50%;
    position: absolute;
    left: 0;
}

/* table-separated-cell */
.table-separated-cell {
    border-collapse: separate;
    border-spacing: 0 var(--Number4);
}

.table-separated-cell thead tr th {
    color: var(--light-high-black);
    font-family: Poppins-Semibold;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.078px;
    padding: 10px 8px;
    height: 45px;
}

[data-theme="dark"] .table-separated-cell thead tr th {
    color: var(--color-white);
}

.table-separated-cell tbody:before {
    content: "@";
    display: block;
    line-height: 12px;
    text-indent: -99999px;
}

.table-separated-cell tbody tr td {
    color: var(--light-high-black);
    font-family: Poppins-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 12px 8px;
    background-color: var(--color-white);
}

[data-theme="dark"] .table-separated-cell tbody tr td {
    background-color: var(--white-02);
    color: var(--color-white);
}

.table-separated-cell tbody .selected-row td {
    background-color: var(--light-hover-selected);
}

.table-separated-cell tbody tr:hover td {
    background-color: var(--light-hover-selected);
}

[data-theme="dark"] .table-separated-cell tbody tr:hover td {
    background-color: var(--dark-hover-selected);
}

[data-theme="dark"] .table-separated-cell tbody .selected-row td {
    background-color: var(--dark-hover-selected);
}



.table-separated-cell tbody tr td:last-child, .table-separated-cell thead tr th:last-child {
    border-top-right-radius: var(--Number8);
    border-bottom-right-radius: var(--Number8);
    padding-right: var(--Number16);
}

.table-separated-cell tbody tr td:first-child, .table-separated-cell thead tr th:first-child {
    border-top-left-radius: var(--Number8);
    border-bottom-left-radius: var(--Number8);
    padding-left: var(--Number16);
}

.custom-pagination-v2 .pagination .page-item {
    margin-right: var(--Number4);
}

.custom-pagination-v2 .pagination .active {
    background-color: var(--light-hover-selected);
    border-radius: var(--Number7);
}

.custom-pagination-v2 .pagination .page-item .page-link {
    background-color: transparent;
    border: none;
    padding: var(--Number8);
    border-radius: var(--Number7);
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--light-high-black);
}

.filter-dropdown {
    border-radius: 16px;
    border: 1px solid rgba(214, 236, 231, 0.10);
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .custom-pills-filter button, [data-theme="dark"] .custom-pills-filter button:hover {
    text-align: left;
    color: var(--color-white);
    font-family: Poppins-Regular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding: 5px 8px;
    margin-bottom: 8px;
    min-width: max-content;
}

.custom-pills-filter button, .custom-pills-filter button:hover {
    text-align: left;
    color: var(--light-mid-black);
    font-family: Poppins-Regular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding: 5px 8px;
    margin-bottom: 8px;
    min-width: max-content;
}

.custom-pills-filter .active {
    border-radius: 4px;
    background: var(--light-hover-selected) !important;
    color: var(--light-high-black) !important;
    font-family: Poppins-Semibold;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    padding: 5px 8px;
}

[data-theme="dark"] .custom-pills-filter .active {
    background: var(--light-hover-selected) !important;
    color: var(--color-white) !important;
}

.custom-pills-filter {
    border-right: 1px solid var(--light-cu-1);
}

.calendar-im-position {
    left: 10px;
    top: -4px;
}

.notes-list-section {
    border: var(--Number1) solid var(--dark-cu-6);
    border-radius: var(--Number5);
    padding-bottom: var(--Number12);
    overflow: hidden;
}

[data-theme="dark"] .notes-list-section {
    background-color: var(--white-03);
}

.notes-list-section:hover .date-notes {
    color: var(--light-mid-black);
}

[data-theme="dark"] .notes-list-section:hover .date-notes {
    color: var(--color-white);
}

.edit-delete-section {
    display: none;
}

.notes-list-section:hover .edit-delete-section {
    display: flex;
}

.notes-list-section:hover .notes-header-section {
    background-color: var(--bg-light);
    margin-bottom: var(--Number12);
}

[data-theme="dark"] .notes-list-section:hover .notes-header-section {
    background-color: var(--white-10);
}

.note-value-edit {
    resize: none;
    border: none;
    width: 100%;
    text-align: left;
    min-height: 50px;
    overflow-y: hidden;
    background-color: transparent;
}


.line-left-element {
    margin-left: 16px;
    border-left: 1px solid #ccc;
    padding-left: 24px;
    padding-top: 0;
    padding-bottom: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.line-left-element a {
    position: relative;
    top: -7px;
    margin-top: -12px;

}

.line-left-element p {
    margin-top: -7px;
    margin-bottom: 0;
}

.dynamic-para-line-set::after {
    display: none !important;
}

.drag-video-section {
    display: none;
}

.prescreening_question_text {
    word-break: break-all;
}

.video-template-col .upload-video-v2 img {
    min-width: var(--Number69) !important;
    max-width: var(--Number69) !important;
}

.video-template-col .upload-video-v2 video {
    min-width: var(--Number69) !important;
    max-width: var(--Number69) !important;
}

.video-template-col .default-video-container {
    background: var(--light-background);
    padding: var(--Number8) !important;
}

[data-theme="dark"] .video-template-col .default-video-container {
    background: var(--white-05);
}

.accordion-custom-bs5 .accordion-item {
    border: none;
    background-color: transparent;
}

.accordion-custom-bs5 .accordion-item .accordion-button {
    background-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.accordion-custom-bs5 .accordion-collapse .accordion-body {
    padding: 0;
}

.accordion-custom-bs5 .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../../imgV2/svgs/arrow-up.svg");
}

.accordion-custom-bs5 .accordion-item .accordion-button::after {
    background-image: url("../../../imgV2/svgs/arrow-up.svg");
}

[data-theme="dark"] .accordion-custom-bs5 .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../../imgV2/svgs/arrow-down-white.svg");
}

[data-theme="dark"] .accordion-custom-bs5 .accordion-item .accordion-button::after {
    background-image: url("../../../imgV2/svgs/arrow-down-white.svg");
}

/* Custom select */

.select-wrapper {
    user-select: none;
}

.select__trigger {
    padding: 11px 12px;
    color: #3b3b3b;
    background: #ffffff;
    cursor: pointer;
    border: var(--Number1) solid var(--light-stroke);
}

[data-theme="dark"] .select__trigger {
    color: #fff;
    border: 1px solid #3E4044;
    background: var(--White-500, #313131);
}

.select__trigger label {
    left: 12px;
    top: -8px;
    background-color: #fff;
}

[data-theme="dark"] .select__trigger label {
    background: var(--White-500, #313131);
    color: #FFF;
}

.test-list-section .select-list-checkbox {
    right: -4px;
    top: -2px;
    /* display: none; */
}

.test-list-section .select-list-checkbox-template {
    right: 0;
    top: 2px;
    /* display: none; */
}

/* .test-list-section:hover .select-list-checkbox {
    display: block;
} */


input:-internal-autofill-selected {
    background-color: #f4f4f4;
    /* Set background color */
    color: #333;
    /* Set text color */
    border: 1px solid #ccc;
    /* Add border */
}

.custom-options {
    top: 100%;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .custom-options {
    border: 1px solid rgba(214, 236, 231, 0.10);
    background: #313131;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.24);
}

.select-bs-5.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.custom-option {
    position: relative;
    display: block;
    padding: 10px 12px;
    color: #3b3b3b;
    cursor: pointer;
    transition: all 0.5s;
}

[data-theme="dark"] .custom-option {
    color: #fff;
}

.custom-option:hover {
    cursor: pointer;
    background-color: var(--black-05);
}

[data-theme="dark"] .custom-option:hover {
    color: #fff;
    background-color: var(--white-05);
}

.custom-option.selected {
    color: #272C34;
    background-color: var(--black-10);
}

[data-theme="dark"] .custom-option.selected {
    color: #fff;
    background-color: var(--white-10);
}

.arrow {
    position: relative;
    height: 8px;
    width: 8px;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.15rem;
    height: 100%;
    transition: all 0.5s;
}

.arrow::before {
    left: 0;
    transform: rotate(45deg);
    background-color: #394a6d;
}

.arrow::after {
    left: 5px;
    transform: rotate(-45deg);
    background-color: #394a6d;
}

[data-theme="dark"] .arrow::before,
[data-theme="dark"] .arrow::after {
    background-color: #fff;
}

.open .arrow::before {
    left: 0;
    transform: rotate(-45deg);
}

.open .arrow::after {
    left: 5px;
    transform: rotate(45deg);
}

.suggestion-test-section {
    max-width: 966px;
    width: 100%;
    overflow-x: auto;
}

.jobListSelect li {
    font-size: var(--Number12);
    color: var(--light-high-black);
    font-family: Poppins-Medium;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.jobListSelect li.active {
    color: var(--light-primary);
}

[data-theme="dark"] .jobListSelect li {
    color: var(--color-white);
}

.vertical-line-through-8 {
    width: var(--Number1);
    height: var(--Number8);
    background-color: var(--light-mid-black);
}

.vertical-line-through-8-2 {
    width: var(--Number2);
    height: var(--Number8);
    background-color: var(--light-low-black);
}

[data-theme="dark"] .vertical-line-through-8-2 {
    background-color: var(--dark-mid-white);
}

.vertical-full-custom {
    width: var(--Number1);
    height: 100%;
}


.after-vertical-line-32 {
    width: var(--Number1);
    height: var(--Number32);
    margin: auto var(--Number20) auto auto;
}

/* Side panel admin profile */

.side-panel-common-style .active {
    border-right: var(--Number3) solid var(--light-button);
    background-color: var(--light-hover-selected) !important;
    font-weight: 600 !important;
    color: var(--light-high-black) !important;
}

[data-theme="dark"] .side-panel-common-style .active {
    border-right: var(--Number3) solid var(--dark-button);
    background-color: var(--dark-hover-selected) !important;
    font-weight: 600 !important;
    color: var(--color-white) !important;
}

.side-panel-common-style button:hover {
    color: var(--light-mid-black) !important;
    background-color: var(--light-hover-selected) !important;
    color: #272C34 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .side-panel-common-style button:hover {
    stroke: var(--color-white) !important;
    background-color: var(--dark-hover-selected) !important;
    font-weight: 600 !important;
    color: var(--color-white) !important;
}

.side-panel-common-style button svg path {
    stroke: var(--light-low-black);
}

[data-theme="dark"] .side-panel-common-style button svg path {
    stroke: var(--color-white);
}

.side-panel-common-style .active svg path {
    stroke: var(--light-button);
}

[data-theme="dark"] .side-panel-common-style .active svg path {
    stroke: var(--light-button);
}

a.sorting_table {
    color: inherit;
}

a.selection_row {
    line-height: 1.5rem;
    padding-right: 2px;
}

.question-list-section-result-page-table {}

.question-list-section-result-page-table thead tr {}

.question-list-section-result-page-table thead tr td {}

.question-list-section-result-page-table tbody tr {}

.question-list-section-result-page-table tbody tr td {}

.duration-attend-section {
    background-color: var(--color-white);
}

[data-theme="dark"] .duration-attend-section {
    background-color: var(--dark-hexa-1);
}

.duration-attend-section svg path {
    stroke: var(--light-green) !important;
}

.duration-attend-section .highlight-text {
    color: var(--light-red);
}

.oneway_interview_questions {
    /* min-height: 350px;
    max-height: 500px;
    overflow-y: scroll; */
}

.custom-tooltip-v2 .tooltip-inner {
    background-color: var(--color-white);
    color: #fff;
    border-radius: var(--Number12);
    padding: var(--Number24) !important;
    min-height: 200px;
    min-width: 342px;
}

[data-theme="dark"] .custom-tooltip-v2 .tooltip-inner {
    background-color: #000;
}

.custom-tooltip-v2 .tooltip-inner ul {
    padding-left: 16px;
}

.custom-tooltip-v2 .tooltip-inner ul li {
    list-style-type: disc;
}

.custom-tooltip-v2 .tooltip-arrow::before {
    border-bottom-color: #fff;
}

[data-theme="dark"] .custom-tooltip-v2 .tooltip-arrow::before {
    border-bottom-color: #000;
}

.border-black-05 {
    border-bottom: var(--Number1) solid var(--black-05);
}

.circle-status::before {
    width: var(--Number12);
    height: var(--Number12);
    border-radius: 50%;
    display: inline-block;
    content: '';
    margin-right: var(--Number8);
}

.red-bg::before {
    background-color: var(--light-red);
}

[data-theme="dark"] .red-bg::before {
    background-color: var(--red-dark-1);
}

.purple-bg::before {
    background-color: var(--light-purple);
}

[data-theme="dark"] .purple-bg::before {
    background-color: var(--dark-purple-1);
}

.blue-bg::before {
    background-color: var(--light-blue);
}

[data-theme="dark"] .blue-bg::before {
    background-color: var(--dark-blue);
}

.green-bg::before {
    background-color: var(--light-green);
}

[data-theme="dark"] .green-bg::before {
    background-color: var(--dark-green);
}

.orange-bg::before {
    background-color: var(--light-orange-4);
}

[data-theme="dark"] .orange-bg::before {
    background-color: var(--light-orange-4);
}

.normal-bg::before {
    background-color: var(--light-high-black);
}

[data-theme="dark"] .normal-bg::before {
    background-color: var(--color-white);
}

.dark-grey-bg::before {
    background-color: #6c757d;
}

[data-theme="dark"] .dark-grey-bg::before {
    background-color: #6c757d;
}

.olive-green-bg::before {
    background-color: #8f9908;
}

[data-theme="dark"] .olive-green-bg::before {
    background-color: #444903;
}

.screening-dropdown {
    width: 109px;
    height: var(--Number25);
}

.ats-btn {
    width: 73px;
    height: var(--Number25);
}

.add-custom-field-day input {
    border: none;
    background-color: var(--dark-cu-3);
}

[data-theme="dark"] .add-custom-field-day input, [data-theme="dark"] .edit-keyword-input, [data-theme="dark"] .edit-keyword-input:focus {
    color: var(--color-white);
    background-color: var(--white-10);
    border: none;
}

.floating-label-textarea {
    top: -10px !important;
}

.blurred-text {
    text-shadow: 0 0 10px #000;
    color: transparent !important;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

.assign-jobs-list {
    max-height: 400px;
    overflow: scroll;
}

.textarea-floating-normal {
    transition: .1s ease-in-out;
}

.textarea-floating-normal:focus+.textarea-label-vs-normal,
.textarea-floating-normal:not(:placeholder-shown)+.textarea-label-vs-normal {
    top: -10px;
    font-size: 10px;
    color: var(--color-black-1);
}

[data-theme="dark"] .textarea-floating-normal:focus+.textarea-label-vs-normal,
[data-theme="dark"] .textarea-floating-normal:not(:placeholder-shown)+.textarea-label-vs-normal {
    top: -10px;
    font-size: 10px;
    color: var(--color-white);
}

.loading-overlay {
    position: fixed;
    z-index: 1500;
    /* top: 40%; */
    left: 0px;
    /* opacity: 0.5;
    filter: alpha(opacity=50); */
    background: rgba(0, 0, 0, 0.5);
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
}

.toast-message {
    position: fixed;
    top: 75px;
    width: 100vw;
    left: 50%;
    translate: -50%;
    z-index: 1501;
}

.custom-select-style .select2-container {
    width: 100% !important;
    display: block;
    margin: 0 !important;
}

.custom-select-style .select2-container .selection {
    min-height: 45px !important;
    display: block;
}

.custom-select-style .select2-container .selection span ul {
    min-height: 45px !important;
    padding: 6px 5px !important;
}

.custom-select-style .select2-container .selection span ul li {
    height: 30px !important;
}

.custom-select-style .select2-container .selection span ul li input {
    height: 45px !important;
}

.z-index-11111 {
    z-index: 11111;
}

.custom-select-style .select2-container--open .select2-dropdown--below {
    padding: 4px !important;
    margin-top: 5px !important;
}

.custom-select-style .select2-selection__choice {
    position: relative;
    top: 7px;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #313131;
}

[data-theme="dark"] .select2-dropdown {
    background-color: transparent;
    border: var(--Number1) solid var(--white-500);
    color: var(--color-white);
}

[data-theme="dark"] .custom-select-style .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--white-40);
    border: var(--Number1) solid var(--white-500);
    color: var(--color-white);
}

[data-theme="dark"] #select2-email_id_send_user-results {
    background-color: #313131;
    border: 1px solid var(--white-10);
    border-top: none;
}

.logout-btn-bottom {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 30px;
}

.logout-btn-bottom button {
    background-color: transparent;
    border: none;
}

.logout-btn-bottom button a {
    color: var(--color-black);
}

[data-theme="dark"] .logout-btn-bottom button a {
    color: var(--color-white);
}

.h-47 {
    height: var(--Number47);
}

.listed-hover-keyword li {
    font-size: var(--Number12);
    line-height: var(--Number18);
    margin-bottom: var(--Number8);
}

.text-white-c>path {
    fill: var(--color-white);
}

.text-orange-c>path {
    fill: var(--light-orange-4);
}

.text-green-c>path {
    fill: var(--light-green);
}

.text-red-c>path {
    fill: var(--light-red);
}

.text-green-c>path {
    fill: var(--light-green);
}

.text-blue-c>path {
    fill: var(--light-blue);
}

.question-item-select.disabled {
    opacity: 0.5;
    /* Adjust the opacity value as needed */
    pointer-events: none;
    /* Optionally disable pointer events for disabled items */
}

.invite-section {
    position: relative;
    /* Necessary for absolute positioning of pseudo-elements */
    margin: 0 90px;
}

.reinvite-section {
    position: relative;
    /* Necessary for absolute positioning of pseudo-elements */
    margin: 0 40px 0 90px;
}

.invite-section:after, .invite-section:before, .reinvite-section:before {
    content: '';
    /* Pseudo-elements need content */
    position: absolute;
    /* Position them absolutely */
    width: var(--Number1);
    height: var(--Number32);
    background-color: var(--white-400);
}

.invite-section:before, .reinvite-section:before {
    left: -50px;
    /* Position it to the left of .invite-section */
}

.invite-section:after {
    right: -50px;
    /* Position it to the right of .invite-section */
}

[data-theme="dark"] .invite-section:after, [data-theme="dark"] .invite-section:before, [data-theme="dark"] .reinvite-section:before {
    background-color: var(--white-400);
}

.disable-events {
    pointer-events: none;
}

.force-events {
    pointer-events: all !important;
}

.logo-footer {
    height: 28px;
}

.pb-85px {
    padding-bottom: 85px !important;
}

/* .autocomplete-suggestions {
    border: 1px solid rgba(214, 236, 231, 0.1);
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    background-color: transparent;
    z-index: 1000;
    right: 0;
    top: 67px;
    left: 0;
}
.autocomplete-suggestion {
    padding: 8px;
    cursor: pointer;
}

.list-select li:hover {
    background-color: var(--black-05)
}
[data-theme="dark"] .list-select li:hover {
    background-color: var(--white-05);
} */

.ui-widget.ui-widget-content {
    z-index: 1090;
    background-color: var(--color-white);
    border: 0.5px solid var(--white-05);
    color: #000;
    border-radius: 4px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background-color: var(--black-10) !important;
    border: 1px solid var(--black-10) !important;
    color: #000 !important;
}

[data-theme="dark"] .ui-widget.ui-widget-content {
    z-index: 1090;
    background-color: var(--light-dark);
    border: 0.5px solid var(--light-border);
    color: var(--color-white);
    border-radius: 4px;
}

[data-theme="dark"] .ui-state-active,
[data-theme="dark"] .ui-widget-content .ui-state-active,
[data-theme="dark"] .ui-widget-header .ui-state-active,
[data-theme="dark"] a.ui-button:active,
[data-theme="dark"] .ui-button:active,
[data-theme="dark"] .ui-button.ui-state-active:hover {
    background-color: var(--white-05) !important;
    border: 1px solid var(--white-05) !important;
    color: #fff !important;
}

.ui-menu .ui-menu-item-wrapper {
    line-height: 34px !important;
}

.toggle-small {
    height: var(--Number18);
    width: var(--Number20);
}

.toggle-small .slider.round {
    background-color: var(--color-white) !important;
    border: var(--Number2) solid black;
}

.toggle-small input:checked+.slider:before {
    background-color: var(--light-primary);
    -webkit-transform: translateX(var(--Number5));
    transform: translateX(var(--Number6));
}

.toggle-small .slider:before {
    width: var(--Number6);
    height: var(--Number6);
    background-color: var(--light-red);
    top: 3.8px;
    left: var(--Number2);
}

table.question-list-section-result-page-table tr td img {
    max-width: 500px;
}

.selected-list-skills>div:first-child {
    left: 16px;
}

.selected-list-skills>div:last-child {
    padding-left: 42px;
}

.selected-skills-test-dropdown {
    max-height: 200px;
}

.thank-you-banner-img-section {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 300px;
    background-image: url("../../../imgV2/thank-you-bg-img.png");
}

.question-section-thank-you {
    padding-top: 5vh;
}

.question-section-thank-you img {
    width: 168px;
}

.question-section-thank-you h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
}

.question-section-thank-you h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 72px;
    text-align: left;
}

.question-section-thank-you p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;

}

.step-2-container {
    max-width: 783px;
    margin: 0 auto;
}

.intro-content-skill-common h3 {
    font-size: 32px;
    line-height: 48px;
    font-style: normal;
    font-weight: bold;
}

.mic-text {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(26, 176, 141, 0.3) 100%);
}

.camera-text {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(26, 176, 141, 0.5) 100%);
}

.room-text {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(26, 176, 141, 0.7) 100%);
}

.connection-text {
    background: linear-gradient(90deg, #FFFFFF 0%, #1AB08D 100%);
}

.connection-testing {
    display: flex;
    align-items: center;
    gap: var(--Number16);
}

.connection-testing img {
    width: var(--Number80);
}

.connection-testing span {
    max-width: var(--Number198);
    width: 100%;
    font-style: italic;
    height: var(--Number50);
    display: flex;
    align-items: center;
}

.microphone-section-skill, .microphone-section-skill .image-center {
    height: 355px !important;
}

.microphone-section-skill {
    overflow: hidden;
    border-radius: var(--Number5);
}

.btn-skill-assessment {
    margin-top: var(--Number100);
}

.skill-welcome-test {
    background: -webkit-linear-gradient(90deg, rgba(30, 30, 30, 0) 0%, #a7a7a7 100%);
    background: -moz-linear-gradient(90deg, rgba(30, 30, 30, 0) 0%, #a7a7a7 100%);
    background: linear-gradient(90deg, rgba(30, 30, 30, 0) 0%, #a7a7a7 100%);
    padding: 15.5px;
    max-width: 860px;
    background: linear-gradient(to right, #f0f0f0, #d4d4d4);
    /* Smooth gradient */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

.instruction-btn {
    border-radius: var(--Number100) !important;
    border: var(--Number1) solid rgba(31, 220, 175, 1) !important;
    background-color: var(--color-white) !important;
    max-width: var(--Number266);
    height: var(--Number45);
    margin: 0 auto;
    font-size: var(--Number20);
    color: var(--color-black) !important;
}

.accordion-button::after {
    flex-shrink: 0;
    width: var(--Number20);
    height: var(--Number20);
    margin-left: auto;
    content: "";
}

.instruction-btn:not(.collapsed)::after {
    background-image: url("../../../imgV2/svgs/lg-icon-arrow-down.png")
}

.instruction-btn::after {
    background-image: url("../../../imgV2/svgs/lg-icon-arrow-down.png");
}

.accordion-skill-item {
    padding: 0 var(--Number40) var(--Number10);
    margin: var(--Number16) var(--Number40) 0;
    background-color: transparent;
    border-radius: none;
    border: none;
}

.accordion .active {
    padding: var(--Number10) var(--Number40);
    margin: var(--Number8) var(--Number40) var(--Number20);
    background-color: rgba(208, 208, 208, 0.4) !important;
    border-radius: var(--Number20) !important;
    border: var(--Number1) solid rgba(208, 208, 208, 0.8) !important;
}

.w-250 {
    min-width: var(--Number250);
}

.start-test-btn-section {
    right: var(--Number4);
    top: var(--Number7);
}


.submit-bnt-section {
    max-width: 582px;
    margin: 0 auto;
    width: 100% !important;
    height: var(--Number56);
}

.prepare-test-section {
    padding: 0;
    margin-top: var(--Number16);
    padding-left: var(--Number16);
}

.prepare-test-section ul {
    padding-left: var(--Number17);

}

.prepare-test-section li {
    list-style-type: disc;
    line-height: var(--Number20);
}

.submit-parent {
    bottom: 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1;
    background: #fff;
}

@media screen and (max-height: 600px) {
    .question-list-thank-u {
        min-height: 400px;
        max-height: 450px;
    }
}

@media screen and (max-height: 768px) {
    .question-list-thank-u {
        min-height: 450px;
        max-height: 500px;
    }
}

.question-list-thank-u {
    min-height: 700px;
    max-height: 750px;
}

.view-type-container {
    display: flex;
    gap: 20px;
    align-items: center;
}

.view-type {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.radio-input-skill {
    display: none;
    /* Hide the default radio button */
}

/* Styling for the icon container */
.icon-skill {
    width: 18px;
    height: 18px;
    border: 2px solid #36c1a1;
    /* Border for inactive state */
    border-radius: 50%;
    /* Circular design */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    background-color: #BDBDBD;
    /* Smooth transition */
}

/* Styling for active state */
.radio-input-skill:checked+.icon-skill {
    background-color: #fff;
    border: 5px solid #36c1a1;
}

.bg-color-grey-1 {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-theme="dark"] .bg-color-grey-1 {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
}

.question-list-skill-footer-copy .reserved-row-skill {
    border-top: var(--Number1) solid rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: var(--Number29);
}

.question-list-skill-footer-copy .reserved-row-skill p {
    color: #616D82;
}

.question-list-skill-footer-copy {
    padding-bottom: 0 !important;
    border-top-left-radius: var(--Number20);
    border-top-right-radius: var(--Number20);
}

.thank-you-text {
    background: linear-gradient(90deg, #1AB08D 0%, #0B4A3B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.question-status-skill {
    right: var(--Number8);
    top: var(--Number4);
    max-width: var(--Number68);
}

.box-shadow-1-completed {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

@media screen and (min-height: 850px) {
    .reserved-row-skill-completed {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
    }
}

.reserved-row-skill-completed {
    background: rgba(255, 255, 255, 1);
    color: #4E5768;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 0;
}

.reserved-row-skill-completed p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0;
}

.text-question-skill {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.timerQuestionSection {
    padding: 11.5px var(--Number8) !important
}

.bg-color-linear {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
    height: calc(100vh - 53px);
}

.inside-container-question-video {
    height: calc(95vh);
}

.user_warning_page {
    background: linear-gradient(180deg, #FA4465 0%, #FFFFFF 100%);
    position: fixed;
    inset: 0;
    z-index: 99999999;
    display: flex;
}

.user_warning_page .wrapper_section {
    max-width: 1215px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.user_warning_page .close_warning_popup {
    background-color: var(--color-black);
    border: none;
    max-width: var(--Number355);
    height: var(--Number58);
    color: var(--color-white);
    border-radius: var(--Number8);
    width: 100%;
}

.user_warning_page .wrapper_section .text_warning_section {
    padding: var(--Number40) var(--Number60) var(--Number60) var(--Number60);
    box-shadow: 0px var(--Number4) var(--Number4) 0px #00000040 inset;
    background-color: var(--color-white);
    border-radius: var(--Number20);
}

.user_warning_page .wrapper_section .text_warning {
    color: var(--color-black);
}

.user_warning_page .wrapper_section .text_warning span {
    color: var(--warning-1);
    display: block;
}

.user_warning_page .wrapper_section .warning_logo {
    width: 250px;
}

.up_quo {
    right: var(--Number16);
    top: var(--Number16);
}

.down_quo {
    left: var(--Number16);
    top: var(--Number16);
}

.question-numberV2 tr td {
    padding: var(--Number24) 0;
}

.user-answer-section-list {
    padding-bottom: var(--Number24);
    height: calc(100vh - 232px);
    overflow: auto;
}

.answer-list {
    padding: var(--Number16) 0;
}

.domePageV2 {
    flex-direction: column;
    height: 100vh;
    gap: 40px;
}

.domePageV2 .instruction_user {
    border: 2px solid #D0D0D0 !important;
    box-shadow: 0px 2px 4px 0px #0000001A !important;
    border-radius: 15px !important;
    background-color: #fff !important;
    padding: 40px !important;
    margin: 0 !important;
}

.filter-personality-test {}

.filter-personality-test button.show {
    background-image: unset;
}

.filter-personality-test button {
    min-width: 202px;
    border-radius: var(--Number10);
    background-color: transparent;
    padding: 0 16px;
    font-size: 20px;
    transition: all 0.3s ease;
    border: none;
    color: var(--color-black) !important;
    height: var(--Number39);
    position: relative;
    background-image: url("../../../imgV2/filter-bg.png");
    background-repeat: round;
    background-size: contain;
}

.filter-personality-test button svg {
    position: absolute;
    top: var(--Number18);
    right: var(--Number16);
}

.filter-personality-test button .count_label {
    left: var(--Number12);
    top: var(--Number8);
    border: 1px solid #46cf7f;
    height: var(--Number24) !important;
}

.filter-personality-test button svg>path {
    fill: black;
}

[data-theme="dark"] .filter-personality-test button svg>path {
    fill: white;
}

[data-theme="dark"] .filter-personality-test button {
    color: var(--color-white) !important;
}

.filter-personality-test button.show {
    background-color: transparent;
    border: var(--Number1) solid var(--primary-200);
    color: var(--light-high-black) !important;
}

.filter-personality-test button>svg>path.show {
    fill: var(--light-high-black) !important;
}

[data-theme="dark"] .filter-personality-test button.show {
    background-color: transparent;
    border: var(--Number1) solid var(--primary-200);
    color: var(--color-white) !important;
}

.filter-personality-test button:hover, .filter-personality-test button:focus {
    background-color: var(--primary-200);
}

.filter-personality-test button:focus {
    background-color: transparent;
}

.filter-personality-test button.show {
    min-width: 202px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.filter-personality-test .dropdown-menu.show {
    transform: translate(0px, 37px) !important;
    border: var(--Number1) solid var(--primary-200);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
    background-color: var(--color-white);
    padding: 0 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .filter-personality-test .dropdown-menu.show {
    transform: translate(0px, 37px) !important;
    border: var(--Number1) solid var(--primary-200);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
    background-color: var(--dark-hexa-2);
}

.filter-personality-test .dropdown-menu.show li {
    padding: 0 !important;
}

.filter-personality-test .dropdown-menu.show li:hover {
    background-color: var(--lightGreen2) !important;
}

.filter-personality-test .dropdown-menu.show li a {
    border-top: var(--Number1) solid var(--light-high-black) !important;
    max-width: 130px;
    margin: 0 auto;
    padding-top: var(--Number8) !important;
    padding-bottom: var(--Number8) !important;
}

[data-theme="dark"] .filter-personality-test .dropdown-menu.show li a {
    border-top: var(--Number1) solid var(--color-white) !important;
    max-width: 130px;
    margin: 0 auto;
    padding-top: var(--Number8) !important;
    padding-bottom: var(--Number8) !important;
}

.filter-personality-test .dropdown-menu.show li a span {
    text-decoration: underline;
}

.personality-test .accordion-item {
    background-color: transparent;
    border: none;
}

.personality-test .accordion-item:last-of-type {
    border-radius: 0;
}

.personality-test .accordion-item:first-child .accordion-button {
    border-top: var(--Number1) solid var(--white-200);
}

[data-theme="dark"] .personality-test .accordion-item:first-child .accordion-button {
    border-top: var(--Number1) solid var(--dark-grey-7);
}

.personality-test .accordion-item .accordion-button {
    color: var(--light-mid-black) !important;
    border-bottom: var(--Number1) solid var(--white-200);
}

[data-theme="dark"] .personality-test .accordion-item .accordion-button {
    color: var(--light-mid-black) !important;
    border-bottom: var(--Number1) solid var(--white-200);
}

[data-theme="dark"] .personality-test .accordion-item .accordion-button {
    color: var(--color-white) !important;
    border-bottom: var(--Number1) solid var(--dark-grey-7);
}

.personality-test .accordion-item .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(67, 241, 201, 0.05) 0%, rgba(39, 139, 116, 0.05) 100%);
    border-top: var(--Number1) solid #36C1A1;
    border-bottom: var(--Number1) solid #36C1A1;
}

.personality-test .accordion-item .status-green:not(.collapsed) {
    background: linear-gradient(90deg, rgba(67, 241, 201, 0.05) 0%, rgba(39, 139, 116, 0.05) 100%);
    border-top: var(--Number1) solid #36C1A1 !important;
    border-bottom: var(--Number1) solid #36C1A1;
}

[data-theme="dark"] .personality-test .accordion-item .status-green:not(.collapsed) {
    background: linear-gradient(90deg, rgba(67, 241, 201, 0.05) 0%, rgba(39, 139, 116, 0.05) 100%);
}

.personality-test .accordion-item .status-orange:not(.collapsed) {
    background: linear-gradient(90deg, rgba(242, 128, 27, 0.1) 0%, rgba(140, 74, 15, 0.1) 100%);
    border-top: var(--Number1) solid var(--light-orange-4);
    border-bottom: var(--Number1) solid var(--light-orange-4);
}

[data-theme="dark"] .personality-test .accordion-item .status-orange:not(.collapsed) {
    background: linear-gradient(90deg, rgba(242, 128, 27, 0.1) 0%, rgba(140, 74, 15, 0.1) 100%);
}

.personality-test .accordion-item .status-red:not(.collapsed) {
    background: linear-gradient(90deg, rgba(235, 63, 63, 0.1) 0%, rgba(133, 36, 36, 0.1) 100%);
    border-top: var(--Number1) solid var(--light-red);
    border-bottom: var(--Number1) solid var(--light-red);
}

[data-theme="dark"] .personality-test .accordion-item .status-red:not(.collapsed) {
    background: linear-gradient(90deg, rgba(235, 63, 63, 0.1) 0%, rgba(133, 36, 36, 0.1) 100%);
}

.personality-test .accordion-item .accordion-button:not(.collapsed) {
    color: var(--light-mid-black) !important;
}

[data-theme="dark"] .personality-test .accordion-item .accordion-button:not(.collapsed) {
    color: var(--color-white) !important;
}

.personality-test .accordion-item:first-child .accordion-header {
    border-top: var(--Number1) solid var(--white-200);
    /* border: none; */
}

.personality-test .accordion-item .accordion-header {
    border-bottom: var(--Number1) solid var(--white-200);
}

.personality-test .accordion-item .accordion-button
/* [data-theme="dark"] .personality-test .accordion-item .accordion-header {
    border-top: var(--Number1) solid var(--dark-grey-7);
    border-bottom: var(--Number1) solid var(--dark-grey-7);
} */

.personality-test .accordion-item .accordion-button::after {
    position: absolute;
    right: var(--Number72);
    top: var(--Number30);
    transform: none !important;
}

.personality-test .accordion-item .accordion-header {
    border: none;
}

.personality-test .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../../imgV2/light-up-icon-1.png");
}

.personality-test .accordion-item .accordion-button::after {
    background-image: url("../../../imgV2/light-down-icon-1.png");
}

[data-theme="dark"] .personality-test .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../../imgV2/dark-up-icon-1.png");
}

[data-theme="dark"] .personality-test .accordion-item .accordion-button::after {
    background-image: url("../../../imgV2/dark-down-icon-1.png");
}

.personality-test .accordion-body {
    padding-right: 110px !important;
}

.status-default-color {
    width: var(--Number59);
    height: var(--Number19);
    border: var(--Number1) solid var(--white-200);
    min-width: var(--Number59);
}

[data-theme="dark"] .status-default-color {
    border: var(--Number1) solid var(--dark-grey-7);
}

.status-section-personality {
    position: absolute;
    right: var(--Number110);
    top: var(--Number24);
}

.p16TestQuestionHeader {
    box-shadow: 0px var(--Number2) var(--Number4) 0px #0000001A;
    border-bottom: var(--Number1) solid var(--white-200)
}

.p16TestQuestionHeader div:nth-child(2) {
    margin-right: var(--Number100);
}

.p16TestQuestionHeader button:disabled {
    opacity: 0.3;
    background-color: var(--primary-200) !important;
}

.question_list_16p_section {
    padding-top: var(--Number32);
}

.question_list_16p {}

.answer_select_list_p16_section {
    box-shadow: 4px 2px 4px 0px var(--black-10) inset;
    height: calc(100vh - 126px);
    padding-top: var(--Number32);
    padding-bottom: var(--Number32);
    overflow: auto;
}

.answer_select_list_p16 {
    border: var(--Number1) solid rgba(204, 204, 204, 1);
    box-shadow: var(--Number2) var(--Number2) var(--Number4) 0px var(--black-10);
    overflow: hidden;
}

.answer_select_list_p16:hover, .answer_select_list_p16:focus, .answer_select_list_p16:active {
    background: rgba(145, 229, 209, 1);
}

.answer_select_list_p16 .checkbox_section {
    min-height: var(--Number85);
    width: var(--Number70);
}

.answer_select_list_p16:hover .checkbox_section, .answer_select_list_p16:active .checkbox_section, .answer_select_list_p16:focus .checkbox_section {
    background: var(--green-dark-3);
}

.answer_select_list_p16 label {
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.answer_select_list_p16.selected .checkbox_section {
    background: var(--green-dark-3)
}

.answer_select_list_p16.selected {
    background: rgba(145, 229, 209, 1);
}

.question_16f_section {
    padding-bottom: var(--Number163);
}

.selected-answer-personality {}

.selected-answer-personality button {
    background-color: var(--lightGreen2);
    background-image: unset;
    height: var(--Number50);
    padding: 0 !important;
    max-width: 280px;
}

.selected-answer-personality button:hover {
    background-image: url("../../../imgV2/filter-bg.png");
    background-color: transparent;
}

.selected-answer-personality button.show, .selected-answer-personality button, .selected-answer-personality .dropdown-menu {
    min-width: 280px;
    max-width: 280px;
}

.selected-answer-personality .dropdown-menu.show {
    transform: translate(26px, 48px) !important;
    max-width: 280px;
}

.selected-answer-personality button svg {
    top: var(--Number21);
    right: var(--Number16);
}

.selected-answer-personality .dropdown-menu.show li a:hover {
    color: var(--primary-200);
}

.left-arrow-svg {
    position: absolute;
    left: 36px;
    top: -11.5px;
    transform: rotate(-90deg);
}

.right-arrow-svg {
    position: absolute;
    right: 0;
    top: -11.5px;
    transform: rotate(90deg);
}

.left-arrow-svg>g>path, .right-arrow-svg>g>path {
    fill: #D0D0D0;
}

.bg-linear-16summary {
    background: linear-gradient(180deg, #FFFFFF 0%, #ebebeb 100%);
    /* height: calc(100vh - 80px); */
}

.skill_assessment_question header {
    /* height: var(--Number82);
    border-bottom: 1px solid rgba(208, 208, 208, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); */
    background: var(--color-white) !important;
}

.skill_assessment_question .question_skill_container {
    background: var(--light-green-3);
    height: calc(100vh - var(--Number88));
}

.question_section_skill {
    background-color: var(--color-white);
    padding: var(--Number40) var(--Number24);
}

.skill_assessment_question .footer-btm {
    bottom: var(--Number24);
}

.expand_icon_question {
    bottom: var(--Number2);
    right: var(--Number2);
}

.expand_modal_section img, video {
    height: var(--Number355);
}

#expandVideoImageModal .modal-content {
    backdrop-filter: blur(4px);
    background: #3CD0AF33;
    padding: 40px;
    border-radius: 30px;
}

#expandVideoImageModal .modal-body {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
}

.test_selected_1 {
    /* position: absolute; */
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
}

.techQ-label-active .label-select {
    background-color: var(--green-dark-3) !important;
}

.question-select.techQ-Active {
    background-color: var(--light-green-4) !important;
    box-shadow: 2px 2px 4px 0px #0000001A;
}

.new-footer {
    color: #616D82 !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    font-family: Poppins-Regular !important;
    font-weight: 400 !important;
}
.disc-accordion-test .accordion-item {
    background-color: transparent;
    border: none;
}
.disc-accordion-test .accordion-item:last-of-type {
    border-radius: 0;
}
.disc-accordion-test .accordion-item:first-child .accordion-button {
    border-top: var(--Number1) solid var(--white-200);
}
[data-theme="dark"] .disc-accordion-test .accordion-item:first-child .accordion-button {
    border-top: var(--Number1) solid var(--dark-grey-7);
}
.disc-accordion-test .accordion-item .accordion-button {
    color: var(--light-mid-black) !important;
    border-bottom: var(--Number1) solid var(--white-200);
}
[data-theme="dark"] .disc-accordion-test .accordion-item .accordion-button {
    color: var(--light-mid-black) !important;
    border-bottom: var(--Number1) solid var(--white-200);
}
[data-theme="dark"] .disc-accordion-test .accordion-item .accordion-button {
    color: var(--color-white) !important;
    border-bottom: var(--Number1) solid var(--dark-grey-7);
}
/* .disc-accordion-test .accordion-item.green-accordion-item .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(66, 203, 58, 0.1) 0%, rgba(144, 173, 142, 0.1) 100%);
    border: var(--Number2) solid rgba(66, 203, 58, 1) !important;
}
.disc-accordion-test .accordion-item.red-accordion-item .accordion-button:not(.collapsed) {
    /* background: linear-gradient(90deg, rgba(235, 63, 63, 0.1) 0%, rgba(204, 153, 153, 0.1) 100%) !important;
    border: var(--Number2) solid rgba(235, 63, 63, 1) !important;
}
.disc-accordion-test .accordion-item.sandal-accordion-item .accordion-button:not(.collapsed) {
    /* background: linear-gradient(90deg, rgba(247, 207, 32, 0.1) 0%, rgba(195, 184, 130, 0.1) 100%) !important;
    border: var(--Number2) solid rgba(247, 207, 32, 1) !important;
}
.disc-accordion-test .accordion-item.blue-accordion-item .accordion-button:not(.collapsed) {
    /* background: linear-gradient(90deg, rgba(38, 196, 249, 0.1) 0%, rgba(171, 203, 214, 0.1) 100%) !important;
    border: var(--Number2) solid rgba(38, 196, 249, 1) !important;
} 
    */
.disc-accordion-test .accordion-item .status-green .accordion-collapse.show {
    background: linear-gradient(90deg, rgba(66, 203, 58, 0.2) 0%, rgba(33, 101, 29, 0.2) 100%);
}

.disc-accordion-test .accordion-item .status-orange:not(.collapsed) {
    background: linear-gradient(90deg, rgba(242, 128, 27, 0.1) 0%, rgba(140, 74, 15, 0.1) 100%);
    border-top: var(--Number1) solid var(--light-orange-4);
    border-bottom: var(--Number1) solid var(--light-orange-4);
}

[data-theme="dark"] .disc-accordion-test .accordion-item .status-orange:not(.collapsed) {
    background: linear-gradient(90deg, rgba(242, 128, 27, 0.1) 0%, rgba(140, 74, 15, 0.1) 100%);
}

[data-theme="dark"] .disc-accordion-test .accordion-item .accordion-button:not(.collapsed) {
    color: var(--color-white) !important;
}
.disc-accordion-test .accordion-item:first-child .accordion-button {
    border-top: var(--Number1) solid var(--white-200);
    /* border: none; */
}

.disc-accordion-test .accordion-item .accordion-button {
    border-bottom: var(--Number1) solid var(--white-200);
}

.disc-accordion-test .accordion-item .accordion-button::after {
    position: absolute;
    right: var(--Number72);
    top: var(--Number30);
    transform: none !important;
}

.disc-accordion-test .accordion-item .accordion-button {
    border: none;
}

.disc-accordion-test .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../../imgV2/arrow-up-black.png");
}

.disc-accordion-test .accordion-item .accordion-button::after {
    background-image: url("../../../imgV2/arrow-down-black.png");
}

[data-theme="dark"] .disc-accordion-test .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../../imgV2/dark-up-icon-1.png");
}

[data-theme="dark"] .disc-accordion-test .accordion-item .accordion-button::after {
    background-image: url("../../../imgV2/dark-down-icon-1.png");
}

.status-green .accordion-button.collapsed {
    background: #fff !important;
    border: none !important;
}

[data-theme="dark"] .status-green .accordion-button.collapsed {
    background: var(--dark-hexa-2) !important;
    border: none !important;
}

.status-red .accordion-button.collapsed {
    background: #fff !important;
    border: none !important;
}

[data-theme="dark"] .status-red .accordion-button.collapsed {
    background: var(--dark-hexa-2) !important;
    border: none !important;
}

.status-blue .accordion-button.collapsed {
    background: #fff !important;
    border: none !important;
}

[data-theme="dark"] .status-blue .accordion-button.collapsed {
    background: var(--dark-hexa-2) !important;
    border: none !important;
}

.status-sandal .accordion-button.collapsed {
    background: #fff !important;
    border: none !important;
}

[data-theme="dark"] .status-sandal .accordion-button.collapsed {
    background: var(--dark-hexa-2) !important;
    border: none !important;
}

.status-green .accordion-button {
    background: linear-gradient(90deg, rgba(66, 203, 58, 0.1) 0%, rgba(144, 173, 142, 0.1) 100%);
    border: var(--Number2) solid rgba(66, 203, 58, 1) !important;
}

.status-red .accordion-button{
    background: linear-gradient(90deg, rgba(235, 63, 63, 0.1) 0%, rgba(204, 153, 153, 0.1) 100%) !important;
    border: var(--Number2) solid rgba(235, 63, 63, 1) !important;
}

.status-blue .accordion-button {
    background: linear-gradient(90deg, rgba(38, 196, 249, 0.1) 0%, rgba(171, 203, 214, 0.1) 100%) !important;
    border: var(--Number2) solid rgba(38, 196, 249, 1) !important;
}

.status-sandal .accordion-button {
    background: linear-gradient(90deg, rgba(247, 207, 32, 0.1) 0%, rgba(195, 184, 130, 0.1) 100%) !important;
    border: var(--Number2) solid rgba(247, 207, 32, 1) !important;
}

.disc-accordion-test .accordion-item.green-accordion-item .collapse.show {
    background: linear-gradient(90deg, rgba(66, 203, 58, 0.2) 0%, rgba(33, 101, 29, 0.2) 100%) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1) inset;
}

.disc-accordion-test .accordion-item.red-accordion-item .collapse.show {
    background: linear-gradient(90deg, rgba(235, 63, 63, 0.2) 0%, rgba(235, 63, 63, 0.16) 100%) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1) inset;
}

.disc-accordion-test .accordion-item.blue-accordion-item .collapse.show {
    background: linear-gradient(90deg, rgba(37, 163, 206, 0.2) 0%, rgba(116, 188, 213, 0.2) 100%) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1) inset;
}

.disc-accordion-test .accordion-item.sandal-accordion-item .collapse.show {
    background: linear-gradient(90deg, rgba(247, 207, 32, 0.2) 0%, rgba(195, 184, 130, 0.2) 100%) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1) inset;
}

.circle-status-result {
    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; */
    width: 49px;
    height: 49px;
    margin-right: var(--Number24);
}

.inside-circle-status {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    width: 32px;
    height: 32px;
}

.d-outer-green {
    border: 5px solid rgba(66, 203, 58, 0.8);
}

.d-inner-green {
    border: 1px solid rgba(66, 203, 58, 0.8);
    background: rgba(66, 203, 58, 0.8);
}

.d-outer-red {
    border: 5px solid rgba(235, 63, 63, 0.8);
}

.d-inner-red {
    border: 1px solid rgba(235, 63, 63, 0.8);
    background: rgba(235, 63, 63, 0.8);
}

.d-outer-blue {
    border: 5px solid rgba(38, 196, 249, 0.8);
}

.d-inner-blue {
    border: 1px solid rgba(38, 196, 249, 0.8);
    background: rgba(38, 196, 249, 0.8);
}

.d-outer-sandal {
    border: 5px solid rgba(247, 207, 32, 0.8);
}

.d-inner-sandal {
    border: 1px solid rgba(247, 207, 32, 0.8);
    background: rgba(247, 207, 32, 0.8);
}

.multi_question_section {
    gap: var(--Number30);
}

.multi_question_test {
    padding: var(--Number20) var(--Number20);
    box-shadow: 0px var(--Number4) var(--Number4) 0px #0000001A;
    border: var(--Number1) solid #D0D0D0;
    /* max-width: 550px; */
    width: 100%;
}

.current-question_select {
    border: var(--Number2) solid var(--green-dark-3);
    background-color: var(--light-hover-selected) !important;
}

.option-choose {
    border: var(--Number1) solid #CCCCCC;
    padding: var(--Number20) var(--Number20) var(--Number20) var(--Number80);
    box-shadow: var(--Number2) var(--Number2) var(--Number4) 0px #0000001A;
}

.box-grey-style {
    width: var(--Number60);
    background: var(--dark-grey-6);
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
}

.answer_select_list_multi {
    min-height: 32vh;
}


@media screen and (max-width: 768px) {
    .header-left img {
        width: var(--Number24);
    }
    .header-center svg {
        width: var(--Number18);
    }
    .multi_question_test {  
        padding: var(--Number12) var(--Number4);
    }
    .multi_question_section {
        gap: var(--Number16);
    }
    .question_list_multi, .answer_list_multi,  .answer_list_show {
        font-size: 10px !important;
        line-height: 12px !important;
    }
    .count-update {
        font-size: 8px;
        line-height: 10px;
        padding: var(--Number5) !important;
    }
    .count-update svg {
        width: var(--Number12);
        margin-right: var(--Number4) !important;
    }
    .p16TestQuestionHeader div:nth-child(2) {
        margin-right: 0;
    }
    .circle_icon_multi {
        width: var(--Number16);
    }
    .x_icon_multi {
        width: var(--Number6);
        right: var(--Number5);
    }
    #nextQuestionBtn {
        font-size: 10px;
        line-height: 12px;
        border-radius: var(--Number5) !important;
        min-width: var(--Number93) !important;
        height: var(--Number23) !important;
    }
    .option-choose {
        padding: var(--Number12) var(--Number4) var(--Number12) var(--Number40);
    }
    .box-grey-style {
        width: var(--Number40);
    }
    .answer_select_list_multi {
        margin-top: var(--Number4) !important;
        gap: var(--Number16);
    }
}

.job_description ul li {
    list-style-type: disc;
}

.job_description ol li {
    list-style-type: decimal;
}