/* AutoSizeInput.css */
:root {
    /* 
    --accent-color-light: #00f0a04d; 
    --accent-color-main: #00f0a0;
    */
    /* --accent-color-light: #ffda304d;
    --accent-color-main: #ffda30;
    --range-accent: rgba(255, 218, 48, .4); */

    --accent-color-light: #384ad74d;
    --accent-color-muted: #00000011;
    --accent-color-main: #384ad7;
    --range-accent: rgba(56, 74, 215, .4);
    --tooltip-bg: #a53eef;
}

.autosize-input-wrapper {
    position: relative;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: var(--primary-black);
}

/* Mobile resume preview: scale-based zoom (iOS-safe, no extra blank/scroll) */
#resume-editor-canvas {
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: subpixel-antialiased;
    /* contain: layout style paint; */

    @media (min-width: 768px) {
        overflow-x: clip;
        /* margin: 0px; */
    }
}

@media (max-width: 767px) {
    #resume-editor-wrapper:has(.resume-editor-sidebar){
        height: auto !important;
    }
}


/* The hidden mirror element */
.autosize-input-mirror {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    /* preserve spaces */
    font: inherit;
    /* match input font */
    padding: 0;
    margin: 0;
    margin: 0;
    border: none;
}

/* The actual input */
.autosize-input-wrapper input {
    font: inherit;
    padding: 4px 6px;
    /* adjust as you like */
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    background: white;
    box-sizing: content-box;
    /* important for auto-width */
}

/* Optional focus style */
.autosize-input-wrapper input:focus {
    border-color: #007bff;
}

.react-modal-portal .ReactModal__Overlay:has(.resume-editor-modal) {
    padding: 0 !important;
    height: 100vh !important;
    overflow-y: hidden !important;
    /* inset: unset !important;
    top: 0 !important; 
    right: 0 !important; */

    @media (max-width: 767px) {
        inset: unset !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100svh !important;
    }

    .commonModal.resume-editor-modal {
        margin: 0 0 0 auto !important;
        width: 1291px;
        max-height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        border-radius: 16px 0 0 16px !important;

        @media screen and (max-width: 767px) {
            width: 100vw;
            min-width: 100vw;
            max-width: 100vw;
            margin: auto 0 0 0 !important;
            border-radius: 16px 16px 0 0 !important;
            max-height: 100svh;
            min-height: 100svh;
        }
    }

}

/* clockwise shrink */
@keyframes shrinkCircle {
    to {
        stroke-dashoffset: 100;
    }
}

.commonModal.resume-editor-modal .modal-dialog .modal-content:has(.apply-success-screen) {
    width: 1291px;
    max-width: calc(100vw - 48px);
    background: var(--white);

    @media screen and (max-width: 767px) {
        width: 100vw;
        max-width: 100vw;
    }

    .modalCloseBtn {
        width: 1.5rem;
        height: 1.5rem;
        top: 1.5rem;
        right: 1.5rem;
        border-radius: 50%;


        /* SVG ring */
        .closeProgress {
            position: absolute;
            top: -3px;
            left: -3px;
            transform: rotate(-90deg);
            /* start at top */
            width: 28px;
            height: 28px;
        }

        .progressCircle {
            fill: none;
            stroke: var(--text-gray);
            stroke-width: 3;
            stroke-dasharray: 100;
            stroke-dashoffset: 0;

            animation: shrinkCircle 5s linear forwards;
        }

    }

    .modal-body {
        padding: 0;

        @media screen and (max-width: 767px) {
            min-height: calc(100vh - 64px);
        }

        .head {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 2.25rem 2rem 1rem;
            border-radius: 8px 0 8px 8px;
            outline: 0.75px solid rgba(186, 186, 186, 0.20);
            gap: 0.75rem;

            h4 {
                font-size: 1.125rem;
                font-weight: 500;
            }

            @media screen and (max-width: 767px) {
                padding: 2.25rem 16px 1rem;
                border-radius: 8px;
            }
        }

        .apply-success-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 0.75rem;
            text-align: center;
            margin-top: 6.25rem;
            padding-inline: 2rem;
            margin-bottom: 3rem;

            svg {
                width: 8.875rem;
                height: 8.875rem;
            }

            text {
                font-size: 1.625rem;
                line-height: 1.618;
                font-weight: 700;
            }
        }

    }
}

.commonModal.resume-editor-modal .modal-dialog {
    width: 100%;
    min-height: 100vh;

    .modal-content {
        background: rgb(245, 245, 245);
        min-height: 100vh;
        border-radius: 16px 0 0 16px !important;

        .header {
            padding: 16px;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.618;
            margin-bottom: 0;
            border-bottom: 1px solid rgba(0, 0, 0, .03);
            box-sizing: border-box;
        }

        .modalCloseBtn {
            &:disabled {
                cursor: not-allowed;
                opacity: 0.5;
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .commonModal.resume-editor-modal .modal-dialog {
        min-height: calc(100vh - 64px) !important;
        min-height: calc(100svh - 64px) !important;
        height: calc(100vh - 64px) !important;
        height: calc(100svh - 64px) !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        align-items: flex-end;

        .modal-content {
            border-radius: 16px 16px 0 0 !important;
            min-height: unset !important;
            overflow: hidden;

            .tailored-resume-drawer-container {
                margin: 0;
                width: 100%;
                gap: 0;

                .tr-drawer-header {
                    min-height: 88px;
                    border-radius: 16px 16px 0 0 !important;
                    padding: 16px 16px 12px;

                    &:has(.tr-drawer-steps-container.last-step) {
                       min-height: unset !important;
                    }

                    .head-title {
                        h3 {
                            font-size: 13px;
                        }

                        span {
                            font-size: 8px;
                        }
                    }

                    .tr-drawer-steps-container {
                        align-items: flex-start;

                        .step {
                            gap: 4px;
                            align-items: flex-start;

                            .step-number {
                                font-size: 10px;
                                min-width: 16px;
                                height: 16px;
                            }

                            span {
                                font-size: 10px;
                                line-height: 16px;
                            }
                        }

                        .step-line {
                            width: 20px;
                            margin: 8px 12px 0 6px;
                        }

                        &.last-step {
                            display: none;
                        }

                        &.has-add-jd {

                            .step {
                                gap: 3px;
                                align-items: flex-start;

                                .step-number {
                                    font-size: 9px;
                                    min-width: 12px;
                                    height: 12px;
                                }

                                span {
                                    font-size: 9px;
                                    line-height: 1.214;
                                }
                            }

                            .step-line {
                                width: 12px;
                                margin: 6px 4px 0 2px;
                            }
                        }
                    }
                }

                .tr-drawer-content {

                    @media screen and (max-width:767px) {
                        &.de-banner-active {
                            height: calc(-312px + 100svh) !important;
                        }

                        height: calc(100vh - 211px) !important;
                        height: calc(100svh - 211px) !important;
                    }

                    height: calc(100vh - 211px) !important;
                    height: calc(100svh - 211px) !important;
                    padding: 8px 12px;

                    @media screen and (max-width: 542px) {
                        &.de-banner-active {
                            height: calc(-312px + 100svh) !important;
                        }

                        height: calc(100vh - 185px) !important;
                        height: calc(100svh - 185px) !important;
                    }

                    &:has(.resume-editor-canvas) {
                        height: calc(100vh - 185px) !important;
                        height: calc(100svh - 185px) !important;
                    }

                    .trd-drawer-step1 {
                        .trd-resume-match-result {
                            gap: 4px;

                            .mr-left {
                                h2 {
                                    font-size: 16px;
                                    line-height: 1.214;
                                    padding-right: 16px;
                                }

                                span {
                                    font-size: 8px;
                                    line-height: 10px;
                                    padding: 0;
                                    background: transparent;
                                    color: var(--text-gray);
                                    align-items: flex-start;

                                    svg {
                                        width: 10px;
                                        height: 10px;
                                        min-width: 10px;
                                    }
                                }
                            }

                            .mr-right {
                                .score-gauge-container {
                                    width: 80px;

                                    >svg {
                                        width: 80px !important;
                                        height: 40px !important;
                                    }

                                    .score-gauge-value {
                                        font-size: 14px;
                                        top: 20px;
                                    }

                                    .score-text {
                                        font-size: 8px;
                                        line-height: 10px;
                                        padding: 4px;
                                        border-radius: 2px;

                                        svg {
                                            width: 10px;
                                            height: 10px;
                                            min-width: 10px;
                                        }
                                    }
                                }
                            }
                        }

                        .trd-resume-overview-container {
                            gap: 12px;

                            .trd-row {
                                flex-direction: column;
                                gap: 0;
                                width: 100%;
                                padding: 8px;
                                border-radius: 8px;

                                .ro-title,
                                .ro-job-content {
                                    background: transparent !important;
                                    padding: 0;
                                    border-radius: 0;
                                }
                                .ro-job-content {
                                    padding: 12px;
                                    background: #FFF8E8 !important;
                                    margin-bottom: -6px;
                                    border-radius: 8px;
                                    width: 100%;
                                }

                                .ro-title {
                                    margin-bottom: 8px;
                                    flex-direction: row-reverse;
                                    justify-content: flex-end;
                                    gap: 8px;
                                }

                                .ro-resume-content {
                                    padding-top: 12px;
                                    margin-top: 12px;

                                    @media screen and (max-width:562px) {
                                        gap: 4px;

                                        .ro-resume-right .resume-dropdown {
                                            left: 0;
                                            height: calc(100vh - 420px);
                                        }
                                    }
                                }

                                &.normal {
                                    background: #F9F8F4;
                                }

                                &.success {
                                    background: #EEFFF4;
                                }

                                &.warning {
                                    background: #FFF8E8;
                                }

                                &.cancel {
                                    background: #FFE6E1;
                                }
                            }
                        }
                    }

                    .trd-drawer-step2 {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;

                        .trd-section {
                            padding: 12px;

                            &.trd-section-selection {
                                .section-wrapper {
                                    gap: 8px;

                                    .section-item {
                                        .section-header {
                                            .sh-left {
                                                &.checkbox .checkmark {
                                                    width: 20px;
                                                    height: 20px;

                                                    &:after {
                                                        left: 4px;
                                                        top: 6px;
                                                        width: 10px;
                                                        height: 5px;
                                                    }
                                                }
                                            }

                                            >div>svg {
                                                width: 20px !important;
                                                height: 20px !important;
                                            }

                                            .custom-tooltip {
                                                left: unset !important;
                                                transform: unset !important;
                                                right: -32px !important;

                                                .custom-tooltip-arrow {
                                                    left: unset !important;
                                                    transform: unset !important;
                                                    right: 36px !important;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .resume-editor {
                        display: none;
                    }

                    .resume-editor.mobile-resume-ui {
                        display: flex;
                        flex-direction: column;
                        gap: 0;

                        .toggle-editor-button{
                            position: fixed;
                            top: 50%;
                            right: 4px;
                            padding: 8px 12px;
                            font-size: 12px;
                            line-height: 15px;
                            font-weight: 700;
                            color: var(--primary-black);
                            background: #ffda30;
                            border-radius: 6px;
                            z-index: 1000;
                            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
                            transition: all 0.3s ease;

                            &.editor-on {
                                transform: translateY(-40px);
                            }
                        }

                        .mobile-note-for-edits {
                            margin: -16px -16px 16px;
                            background: #FEE9DC;
                            display: flex;
                            padding: 4px 6px;
                            justify-content: flex-start;
                            align-items: flex-start;
                            gap: 8px;

                            span {
                                font-size: 11px;
                                line-height: 1.214;
                                font-weight: 500;
                            }

                            strong {
                                font-weight: 700;
                            }
                        }
                        /* .resume-editor-sidebar{
                            position: relative;

                            .section-tabs{
                                position: sticky;
                                top: 0;
                                left: 0;
                                width: 100%;
                                z-index: 1000;
                            }
                        } */
                        .resume-tabs {
                            display: flex;
                            align-items: flex-end;
                            justify-content: flex-end;
                            width: 100%;
                            gap: 8px;
                            margin-bottom: 8px;
                            /* margin-bottom: 16px;
                            border-bottom: 2px solid rgba(186, 186, 186, 0.20); */

                            .tab-item {
                                /* width: 50%; */
                                font-size: 12px;
                                line-height: 15px;
                                font-weight: 600;
                                cursor: pointer;
                                transition: all .3s ease;
                                /* text-align: left; */
                                position: relative;
                                /* padding-bottom: 4px; */
                                background: transparent;
                                border: none;
                                color: var(--accent-color-main);
                                cursor: pointer;
                                text-decoration: underline;

                                /* &::after {
                                    content: '';
                                    position: absolute;
                                    bottom: -2px;
                                    left: 0;
                                    width: 0;
                                    height: 3px;
                                    border-radius: 2px;
                                    background: var(--primary-black);
                                    transition: all .1618s;
                                } */

                                /* &.active {
                                    color: var(--primary-black);
                                    font-weight: 600;

                                    &::after {
                                        width: 100%;
                                    }
                                } */
                            }
                        }

                        .tab-content {
                            width: 100%;
                            margin-bottom: 24px;

                            .re-styles-mobile {
                                display: flex;
                                flex-direction: column;
                                gap: 8px;

                                h6 {
                                    font-size: 12px;
                                    font-weight: 700;
                                    line-height: 15px;
                                }

                                .template-items {
                                    display: flex;
                                    gap: 12px;
                                    justify-content: space-between;
                                    width: 100%;
                                    overflow-x: auto;

                                    .template-item {
                                        flex: 1;
                                        padding: 8px;
                                        color: var(--text-gray);
                                        font-size: 10px;
                                        font-weight: 600;
                                        line-height: 12px;
                                        white-space: nowrap;
                                        border-radius: 4px;
                                        border: 1px solid var(--Tabs-grey, rgba(186, 186, 186, 0.20));
                                        background: #FFF;
                                        box-shadow: 1px 3px 4px 0 rgba(206, 204, 204, 0.40);
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 4px;
                                        cursor: pointer;
                                        transition: all .3s ease;
                                        position: relative;

                                        &:hover {
                                            background: #E9EBFF;
                                        }

                                        &.selected {
                                            color: #0D157A;

                                            border-radius: 4px;
                                            border: 1px solid #BEC2F1;
                                            background: #E9EBFF;

                                            /* Non-selected persona */
                                            box-shadow: 1px 3px 4px 0 rgba(206, 204, 204, 0.40);
                                        }

                                        .recommended-badge {
                                            display: flex;
                                            align-items: center;
                                            gap: 2px;
                                            font-size: 9px;
                                            line-height: normal;
                                            font-weight: 600;
                                            color: #2835D1;
                                            position: absolute;
                                            top: calc(100% + 4px);
                                            left: 0;
                                            width: calc(100% - 6px);

                                            svg {
                                                filter: invert(19%) sepia(96%) saturate(4200%) hue-rotate(228deg) brightness(92%) contrast(108%);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .resume-editor-canvas {
                            width: 100%;
                            padding-bottom: 0;
                            padding-right: 0;
                            max-height: unset;
                        }

                        /* All Templates Modal */
                        .re-all-templates-modal-overlay {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100vw;
                            height: 100vh;
                            background: rgba(0, 0, 0, 0.4);
                            backdrop-filter: blur(4px);
                            z-index: 9999999;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            animation: fadeIn 0.3s ease;

                            .re-all-templates-modal-content {
                                background: var(--white);
                                width: 720px;
                                max-width: 90%;
                                max-height: 80vh;
                                border-radius: 16px;
                                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
                                display: flex;
                                flex-direction: column;
                                overflow: hidden;
                                animation: slideUp 0.3s ease;

                                .re-all-templates-modal-header {
                                    padding: 20px 24px;
                                    border-bottom: 1px solid #f2f4f5;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;

                                    h3 {
                                        margin: 0;
                                        font-size: 18px;
                                        font-weight: 700;
                                    }

                                    .close-btn {
                                        background: transparent;
                                        border: none;
                                        cursor: pointer;
                                        color: #666;
                                        padding: 4px;
                                        border-radius: 50%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        transition: all 0.2s ease;

                                        &:hover {
                                            background: #f2f4f5;
                                            color: #000;
                                        }
                                    }
                                }

                                .re-all-templates-grid {
                                    padding: 24px 12px;
                                    display: grid;
                                    grid-template-columns: repeat(2, 1fr);
                                    gap: 20px 12px;
                                    overflow-y: auto;

                                    &::-webkit-scrollbar {
                                        width: 6px;
                                    }

                                    &::-webkit-scrollbar-track {
                                        background: #f1f1f1;
                                    }

                                    &::-webkit-scrollbar-thumb {
                                        background: #ccc;
                                        border-radius: 10px;
                                    }

                                    &::-webkit-scrollbar-thumb:hover {
                                        background: #aaa;
                                    }

                                    .re-template-card {
                                        display: flex;
                                        flex-direction: column;
                                        gap: 12px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;

                                        .template-img-wrapper {
                                            position: relative;
                                            border-radius: 10px;
                                            overflow: hidden;
                                            border: 2px solid #f2f4f5;
                                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

                                            img {
                                                width: 100%;
                                                height: auto;
                                                height: 211px;
                                                display: block;
                                                transition: transform 0.3s ease;
                                            }

                                            .selected-check {
                                                position: absolute;
                                                top: 10px;
                                                right: 10px;
                                                z-index: 2;
                                            }
                                        }

                                        .template-info {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;
                                            gap: 4px;

                                            span {
                                                font-size: 14px;
                                                font-weight: 600;
                                                color: var(--primary-black);
                                            }

                                            .recommended-badge {
                                                display: flex;
                                                align-items: center;
                                                gap: 4px;
                                                background: var(--accent-color-main);
                                                color: #fff;
                                                padding: 2px 8px;
                                                border-radius: 20px;
                                                font-size: 10px;
                                                font-weight: 600;

                                                svg {
                                                    width: 10px;
                                                    height: 10px;
                                                    filter: invert(1);
                                                }
                                            }
                                        }

                                        &:hover {
                                            transform: translateY(-4px);

                                            .template-img-wrapper {
                                                border-color: var(--accent-color-light);
                                                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

                                                img {
                                                    transform: scale(1.05);
                                                }
                                            }
                                        }

                                        &.selected {
                                            .template-img-wrapper {
                                                border-color: var(--accent-color-main);
                                                border-width: 2px;
                                            }

                                            .template-info span {
                                                color: var(--accent-color-main);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        @keyframes fadeIn {
                            from {
                                opacity: 0;
                            }

                            to {
                                opacity: 1;
                            }
                        }

                        @keyframes slideUp {
                            from {
                                transform: translateY(20px);
                                opacity: 0;
                            }

                            to {
                                transform: translateY(0);
                                opacity: 1;
                            }
                        }
                    }
                }

                .tr-drawer-actions {
                    padding: 16px;
                    gap: 16px;
                    width: 100vw;
                    min-height: 74px;
                    z-index: 999999;

                    .tr-drawer-back-btn {
                        min-width: 44px;
                    }

                    .tr-drawer-submit-btn {
                        padding: 12px 8px;
                        width: 100%;
                    }
                }
            }
        }
    }
}

.commonModal.tailor-jd-view-modal .modal-dialog {
    height: calc(100vh - 4rem);

    .modal-content {
        padding: 2rem;

        .tr-jd-view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.5rem;

            h2 {
                font-size: 1.5rem;
            }

            .tr-jd-content {
                flex: 1;
                overflow-y: scroll;
                max-height: 32rem;
                background: var(--white);
                border: 1.5px solid var(--text-field-outline);
                border-radius: 12px;
                padding: 1rem;
                scrollbar-width: thin;
            }
        }
    }
}

.new-transform-loader-container {
    position: relative;
}
.tailored-new-transform-loader {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .tt-loader-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;

        .tt-sparkle-loader {
            position: relative;
            width: 120px;
            height: 120px;
    
            .layer {
                position: absolute;
                top: 0;
                left: 0;
                width: 120px;
                height: 120px;
                pointer-events: none;
                user-select: none;
                transition: opacity 0.2s ease-in-out;

                &.bg-layer {
                    opacity: 0.6;
                }
            }
        }

        .tt-loader-text {
            font-size: 1rem;
            line-height: 100%;
            font-weight: 600;
            letter-spacing: -3.5%;
            color: #231F20;
        }

        .tt-progress-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            max-width: 400px;
            margin-top: 0.875rem;
            
            .tt-progress-text {
                font-size: 0.75rem;
                line-height: 100%;
                font-weight: 500;
                letter-spacing: -3.5%;
                color: var(--text-gray);
            }
            
            .tt-progress-bar {
                height: 2px;
                background-color: #e5e7eb; /* light gray */
                border-radius: 2px;
                overflow: hidden;
                position: relative;
                width: 100%;
            }
            
            .tt-progress-fill {
                display: block;
                width: 60%; /* change dynamically */
                height: 100%;
                background-color: black; /* dark line */
                border-radius: 2px;
                transition: width 0.3s ease;
            }
        }                          
    }

    .tt-similar-jobs-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;

        .tt-sj-title {
            font-size: 1rem;
            line-height: 100%;
            font-weight: 700;
            color: var(--text-gray);
            text-transform: capitalize;
        }

        .tt-sj-cards-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
            width: 100%;
            align-items: stretch;
            
            .jobCardContainer {
                padding-inline: 0.5rem;
                width: 100%;

                .tt-job-card {
                    border: 1px solid var(--text-field-outline);
                    background: var(--white);
                    border-radius: 16px;
                    padding: 1rem;
                    display: flex !important;
                    flex-direction: column;
                    gap: 0.5rem;
                    max-width: 100%;

                    .jobTitle {
                        display: flex;
                        align-items: flex-start;
                        gap: 0.75rem;
                        position: relative;

                        .logo {
                            width: 3rem;
                            height: 3rem;
                            min-width: 3rem;
                            border-radius: 8px;
                            background: var(--white);
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            padding: 2px;
                            position: relative;
                            outline: 1px solid #d9d9d9;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                                border-radius: 6px;
                            }
                        }

                        .main {
                            display: flex;
                            flex-direction: column;
                            gap: 0.375rem;
                            width: calc(100% - 60px);

                            h5 {
                                font-weight: 600;
                                font-size: 0.75rem;
                                line-height: 0.9375rem;
                                max-width: 100%;
                                padding-right: 2rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .companyName {
                                font-weight: 500;
                                font-size: 0.75rem;
                                line-height: 0.9375rem;
                                color: var(--text-gray);
                            }
                        }

                        .bookmarkIconBtn {
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 1.5rem;
                            height: 1.5rem;
                            min-width: 1.5rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: var(--white);
                            outline: 1px solid var(--text-field-outline);
                            border: none;
                            border-radius: 12px;
                            transition: background-color 0.3s ease;

                            svg {
                                width: 0.510625rem;
                                height: 0.65625rem;
                                transition: fill 0.3s ease, stroke 0.3s ease;
                            }
                        }
                    }

                    .attribs {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        width: 100%;
                        gap: 0.5rem 1rem;

                        .attrib {
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;
                            font-weight: 500;
                            font-size: 0.6875rem;
                            line-height: 0.8125rem;
                            color: var(--text-gray);

                            svg {
                                width: 0.875rem;
                                height: 0.875rem;
                            }
                        }
                    }

                    .tt-open-job-btn {
                        padding: 0.5rem 1.5rem;
                        margin-top: 0.25rem;
                        font-size: 0.75rem;
                        line-height: 100%;
                        background: var(--primary-black);
                        color: var(--white);
                    }
                }
            }
        }

        @media screen and (max-width: 620px) {
            .tt-sj-title {
                text-align: center;
            }
            .tt-sj-cards-list {
                grid-template-columns: repeat(1, 1fr) !important;
                max-width: 340px;
            }
        }

        @media screen and (max-width: 820px) {
            .tt-sj-cards-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    .tt-extension-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: fit-content;
        align-self: center;
        padding: 1.25rem 3.5rem;
        border: 1px solid;
        border-image-source: linear-gradient(118.92deg, #EFEEFF 26.18%, rgba(255, 234, 222, 0.94) 96.85%);
        background: linear-gradient(118.92deg, #EFEEFF 26.18%, rgba(255, 234, 222, 0.94) 96.85%);
        border-radius: 12px;

        .tt-et-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;

            .tt-et-title {
                font-size: 1.25rem;
                font-weight: 700;
                line-height: 100%;
                color: #231F20;
            }
            .tt-et-subtitle {
                font-size: 0.875rem;
                font-weight: 400;
                line-height: 100%;
                letter-spacing: -3.5%;
                color: #231F20;
            }
        }
        .tt-et-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;

            .et-top-points {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;

                .et-point {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: 0.75rem;
                    font-weight: 400;
                    line-height: 100%;
                    color: var(--text-gray);
                }
            }

            .et-bottom-points {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;

                .tt-et-download-btn {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.625rem 1.5rem;
                    background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                    color: var(--white);
                    font-size: 0.875rem;
                    line-height: 100%;
                }

                .tt-et-download-note {
                    font-size: 0.625rem;
                    font-weight: 400;
                    line-height: 100%;
                    color: var(--text-gray);
                    margin-bottom: 0;
                }
            }
        }
    }

    .tt-similar-jobs-footer {
        padding: 0.5rem;
        border: 0.5px solid #DBD8C3;
        border-radius: 24px;
        background: #FFF8D6;
        width: fit-content;
        align-self: center;

        .tt-sj-footer-note {
            font-size: 0.625rem;
            line-height: 100%;
            font-weight: 400;
            color: #5C5737;
            margin-bottom: 0;
        }
    }

}

.tailored-resume-drawer-container {
    width: 1291px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;

    .tr-drawer-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 40px 32px 12px;
        border-bottom: 0.75px solid #BABABA33;
        width: 100%;
        background: var(--white);

        .head-title {
            display: flex;
            align-items: center;
            gap: 8px;

            h3 {
                font-size: 16px;
                font-weight: 700;
                line-height: 1.214;
                letter-spacing: 0%;
                color: var(--primary-black);
            }

            h4 {
                font-size: 16px;
                font-weight: 500;
                line-height: 1.214;
            }

            span {
                padding: 4px 8px;
                border-radius: 24px;
                background: linear-gradient(91.02deg, #C9F962 0.87%, #CFFAFF 131.82%);
                font-size: 10px;
                line-height: 100%;
                font-weight: 600;

                &.expired-plan {
                    background: var(--errorRed);
                    color: var(--white);
                    font-size: 12px;
                }
            }
        }

        .progressBarDiv {
            margin-bottom: 6px;
        }

        .tr-drawer-steps-container {
            display: flex;
            align-items: center;

            .step {
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--text-gray);

                &.active {
                    color: var(--primary-black);
                }

                .step-number {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #E5E7EB;
                    border-radius: 100%;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                    letter-spacing: 0px;
                    height: 20px;
                    width: 20px;
                }

                &.active .step-number {
                    background: var(--accent-color-main) !important;
                    color: var(--white);
                }

                span {
                    font-size: 12px;
                    line-height: 20px;
                    letter-spacing: -0.15px;
                    font-weight: 500;
                }
            }

            .step-line {
                width: 48px;
                height: 1px;
                background: #D1D5DC;
                margin: 0 20px;
            }
        }

    }

    .download-extension-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 32px;
        background: #ECEEFF;

        .de-banner-content {
            display: flex;
            align-items: center;
            gap: 16px;

            .de-banner-title {
                font-size: 13px;
                line-height: 100%;
                font-weight: 400;
                letter-spacing: 0.31px;
            }

            .de-download-ext-btn {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                border-width: 1px;
                border-radius: 24px;
                background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                color: var(--white);
                font-size: 12px;
                font-weight: 700;
                line-height: 100%;
            }
        }

        .de-banner-close-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-gray);
            text-decoration: underline;
            font-size: 11px;
            font-weight: 600;
            line-height: 100%;
            border: none;
            background: transparent;
            text-transform: uppercase;
        }

        @media screen and (max-width:767px) {
            padding: 8px 16px !important;

            .de-banner-content {
                flex-direction: column;

                .de-banner-title {
                    text-align: center;
                    font-size: 11px;
                }

                .de-download-ext-btn {
                    width: 100%;
                    justify-content: center;
                }
            }

        }
    }

    &.resume-editor .tr-drawer-content {
        padding-bottom: 0;
    }

    .tr-drawer-content {
        padding: 20px 32px;
        width: 100%;
        height: calc(100vh - 178px);
        overflow-y: auto;

        &.de-banner-active {
            height: calc(100vh - 235px) !important;
        }

        .trd-drawer-external-jd {
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--white);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid var(--inactive-text-box, #BABABA33);
            height: 100%;
            position: relative;

            h2 {
                display: flex;
                gap: 12px;
                font-size: 18px;
                line-height: 100%;
            }

            .external-jd-input {
                display: flex;
                flex-direction: column;
                height: 100%;

                .quill.resizableEditor {
                    height: 100% !important;

                    .ql-container {
                        height: 100% !important;
                        border-radius: 8px !important;
                    }
                }

                textarea {
                    flex: 1;
                    scrollbar-width: thin;
                    resize: none;

                    &:focus {
                        outline: 2px solid #2684FF !important;
                    }
                }

                .form-group {
                    label {
                        font-size: 12px;
                        font-weight: 700;
                        line-height: 18px;
                        color: var(--text-gray);

                        span {
                            font-weight: 400;
                        }
                    }

                    .external-jd-select-sector {

                        .select-sector__single-value,
                        .select-sector__placeholder {
                            font-size: 14px;
                        }

                        .select-sector__control.select-sector__control--is-focused {
                            box-shadow: 0 0 0 1px #2684FF !important;
                        }

                        input:focus {
                            box-shadow: none !important;
                        }
                    }
                }
            }

            @media screen and (max-width:767px) {
                padding: 0;
                background: transparent;
                border: none;
                gap: 8px;

                h2 {
                    font-size: 14px;
                }

                .external-jd-input {
                    background: white;
                    border-radius: 8px;

                    * {
                        font-size: 12px !important;
                    }
                }
            }
        }

        .trd-drawer-step1 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 100%;
            position: relative;

            .trd-resume-match-result {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;

                .mr-left {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    h2 {
                        font-size: 16px;
                        font-weight: 600;
                        line-height: 100%;
                        letter-spacing: 0%;
                        text-transform: capitalize;
                        color: var(--primary-black);
                    }

                    span {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        padding: 4px 8px;
                        border-radius: 6px;
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 16px;
                        letter-spacing: 0%;
                        color: var(--primary-black);
                        background: #F7E1BD;
                    }

                }

                .mr-right {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;


                    .score-gauge-container {
                        width: 100px;
                        height: auto;
                        text-align: center;
                        user-select: none;
                        position: relative;

                        .score-gauge-value {
                            font-size: 18px;
                            line-height: 100%;
                            letter-spacing: 0%;
                            font-weight: 800;
                            color: var(--primary-black);
                            position: absolute;
                            top: 28px;
                            left: 50%;
                            transform: translateX(-50%);

                            &.average {
                                font-size: 13px;
                            }
                        }
                    }

                    .score-text {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 4px 8px;
                        border-radius: 6px;
                        background: #BABABA33;
                        font-size: 10px;
                        line-height: 100%;
                        letter-spacing: 0%;
                        font-weight: 600;
                    }
                }

            }

            .trd-resume-overview-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;

                .trd-row {
                    display: flex;
                    align-items: stretch;
                    gap: 8px;
                    width: 100%;

                    &.normal {

                        .ro-title,
                        .ro-job-content,
                        .ro-resume-content {
                            background: #F9F8F4;
                        }
                    }

                    &.success {

                        .ro-title,
                        .ro-job-content,
                        .ro-resume-content {
                            background: #EEFFF4;
                        }
                    }

                    &.warning {

                        .ro-title,
                        .ro-job-content,
                        .ro-resume-content {
                            background: #FFF8E8;
                        }
                    }

                    &.cancel {

                        .ro-title,
                        .ro-job-content,
                        .ro-resume-content {
                            background: #FFE6E1;
                        }
                    }

                    .ro-title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 12px;
                        min-width: 192px;
                        height: auto;
                        border-radius: 8px;

                        span {
                            font-size: 12px;
                            font-weight: 600;
                            line-height: 100%;
                            letter-spacing: 0%;
                            color: var(--primary-black);
                        }
                    }

                    .ro-job-content {
                        padding: 12px;
                        border-radius: 8px;
                        width: 340px;
                        min-width: 340px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        span {
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 100%;
                            letter-spacing: 0%;
                            color: var(--primary-black);
                            text-transform: capitalize;
                        }
                    }

                    .ro-resume-content {
                        padding: 12px;
                        border-radius: 8px;
                        /* width: 100%; */
                        flex: 1;

                        span {
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 100%;
                            text-transform: capitalize;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: var(--primary-black);

                            &.not-matched-text {
                                font-style: italic;
                                font-weight: 400;
                                color: var(--text-gray);
                            }
                        }
                    }

                    &.job-overview-row {
                        .ro-job-content {
                            display: flex;
                            gap: 8px;

                            .logo {
                                height: 47px;
                                width: 47px;
                                min-width: 47px;
                                border-radius: 8px;
                                background: var(--white);
                                align-items: center;
                                justify-content: center;
                                display: flex;
                                position: relative;

                                .company_intialBg {
                                    background: linear-gradient(90deg, #FC3BB2 0%, #F7906E 100%);
                                    width: 100%;
                                    height: 100%;
                                    position: relative;
                                    border-radius: 8px;
                                }
                            }

                            .job-info {
                                display: flex;
                                flex-direction: column;
                                gap: 4px;
                                max-width: calc(100% - 44px);

                                .job-title {
                                    font-size: 12px;
                                    font-weight: 600;
                                    line-height: 100%;
                                    letter-spacing: 0%;
                                    color: var(--primary-black);
                                    text-transform: capitalize;
                                    text-wrap: auto;
                                }

                                .company {
                                    font-size: 11px;
                                    font-weight: 500;
                                    line-height: 100%;
                                    letter-spacing: 0%;
                                    color: var(--text-gray);
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }

                        .ro-resume-content {
                            display: flex;
                            padding: 12px;
                            border-radius: 8px;
                            gap: 20px;
                            justify-content: space-between;
                            align-items: center;
                            background: #fff;
                            outline: 2px solid rgb(209, 213, 219);
                            cursor: pointer;

                            .ro-resume-left {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 8px;

                                .resume-info-label {
                                    font-size: 0.75rem;
                                }

                                @media screen and (max-width:480px) {
                                    max-width: 100%;
                                }

                                .resume-icon {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    height: 40px;
                                    width: 40px;
                                    min-width: 40px;
                                    border-radius: 4px;
                                    background: var(--white);
                                }

                                .resume-info {
                                    display: flex;
                                    gap: 16px;
                                    position: relative;
                                    min-width: 200px;

                                    span {
                                        font-size: 11px;
                                        font-weight: 500;
                                        line-height: 100%;
                                        letter-spacing: 0%;
                                        color: var(--text-gray);
                                        padding: 0;
                                    }

                                    h4 {
                                        font-size: 14px;
                                        font-weight: 600;
                                        line-height: 1.618;
                                        letter-spacing: 0%;
                                        color: var(--primary-black);
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        max-width: 324px;

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

                                        @media screen and (max-width:767px) {
                                            font-size: 12px;
                                            white-space: normal;
                                        }
                                    }

                                    .r-source {
                                        position: absolute;
                                        top: calc(100% + 2px);
                                        font-size: 10px;
                                        line-height: 12px;
                                        font-weight: 400;
                                        color: var(--text-gray);
                                        margin-bottom: 0;
                                    }
                                }
                            }

                            >svg {
                                width: 20px;
                                height: 20px;
                                min-width: 20px;
                            }

                            .resume-dropdown-centered {
                                position: fixed;
                                width: 607px;
                                height: auto;
                                background: rgb(249, 250, 251);
                                border-radius: 8px;
                                box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.1618);
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                z-index: 1000;
                                max-width: calc(100vw - 32px);

                                .resume-dropdown-header {
                                    font-size: 0.875rem;
                                    font-weight: 600;
                                    line-height: 1.214;
                                    color: var(--primary-black);
                                    padding: 12px 16px;
                                }

                                .select-container {
                                    height: auto;
                                    max-height: 384px;
                                    overflow-y: auto;
                                    scrollbar-width: thin;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 8px;
                                    border-radius: 8px;

                                    .resume-type {
                                        display: flex;
                                        flex-direction: column;

                                        label {
                                            font-size: 0.75rem;
                                            font-weight: 600;
                                            line-height: 1.618;
                                            color: var(--text-gray);
                                            padding: 12px 16px;
                                            text-transform: uppercase;
                                            display: flex;
                                            align-items: center;

                                            .bullet-dot {
                                                width: 0.5rem;
                                                height: 0.5rem;
                                                border-radius: 50%;
                                                margin-right: 0.5rem;
                                                margin-bottom: 2px;

                                                &.green {
                                                    background: rgb(34, 197, 94);
                                                }

                                                &.blue {
                                                    background: rgb(59, 130, 246);
                                                }

                                                &.gray {
                                                    background: rgb(156, 163, 175);
                                                }
                                            }
                                        }

                                        .resume-item {
                                            display: flex;
                                            flex-direction: column;
                                            gap: 4px;
                                            padding: 12px 16px;
                                            cursor: pointer;
                                            color: var(--primary-black);
                                            background: var(--white);
                                            transition: background 0.3s ease;

                                            &:hover {
                                                background: rgb(0, 0, 0, 0.05);
                                            }

                                            &.selected {
                                                background: rgb(239, 255, 246, 1);
                                            }

                                            span {
                                                font-size: 0.875rem;
                                                font-weight: 500;
                                                line-height: 1.618;

                                                &.meta-info {
                                                    font-size: 0.75rem;
                                                    font-weight: 500;
                                                    line-height: 1.618;
                                                    color: var(--text-gray);
                                                    text-transform: none;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            .ro-resume-right {
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                gap: 8px;
                                position: relative;

                                .select-resume-btn {
                                    display: flex;
                                    align-items: center;
                                    gap: 4px;
                                    padding: 4px 8px;
                                    background: var(--primary-black);
                                    color: var(--white);
                                    border-radius: 8px;
                                    border: 1px solid var(--inactive-text-box, #BABABA33);
                                    height: fit-content;
                                    align-self: flex-end;
                                    margin-bottom: 6px;

                                    span {
                                        font-size: 11px;
                                        font-weight: 500;
                                        line-height: 100%;
                                        letter-spacing: 0%;
                                        color: var(--white);
                                        padding: 0;
                                    }
                                }

                                .resume-dropdown {
                                    display: flex;
                                    flex-direction: column;
                                    position: absolute;
                                    background: var(--white);
                                    padding: 4px;
                                    border-radius: 4px;
                                    top: 100%;
                                    width: 280px;
                                    box-shadow: 0 8px 8px 1px rgba(0, 0, 0, 0.1618);
                                    height: calc(100vh - 340px);
                                    max-height: fit-content;
                                    overflow-y: auto;
                                    scrollbar-width: thin;

                                    button {
                                        font-size: 13px;
                                        font-weight: 500;
                                        line-height: 100%;
                                        letter-spacing: 0%;
                                        color: var(--primary-black);
                                        padding: 8px;
                                        cursor: pointer;
                                        border-radius: 4px;
                                        border: none;
                                        background: transparent;
                                        text-align: start;
                                        width: 100%;

                                        &:hover {
                                            background: var(--accent-color-light);
                                        }

                                        &.selected {
                                            background: var(--accent-color-light);
                                        }
                                    }

                                }
                            }
                        }
                    }

                    &.job-keywords-row {
                        .ro-title {
                            background: #FFF8E8;
                        }

                        .ro-skills {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 8px;
                            padding: 12px;
                            border-radius: 8px;
                            background: #FFF8E8;
                            width: 100%;

                            .skill-item {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 6px 10px;
                                border-radius: 4px;
                                font-size: 11px;
                                font-weight: 500;
                                line-height: 13px;
                                letter-spacing: 0px;
                                color: #4A5565;
                                background: #F3F4F6;
                                border: 1px solid #E5E7EB;

                                &.checked {
                                    background: #D0FAE5;
                                    border: 1px solid #A4F4CF;
                                    line-height: 100%;
                                }
                            }
                        }
                    }

                    &.summary-row {

                        &.warning .ro-title,
                        &.warning .ro-summary {
                            background: #FFF8E8;
                        }

                        &.cancel .ro-title,
                        &.cancel .ro-summary {
                            background: #FFE6E1;
                        }

                        .ro-summary {
                            padding: 12px;
                            border-radius: 8px;
                            width: 100%;

                            span {
                                font-size: 12px;
                                font-weight: 400;
                                line-height: 18px;
                                letter-spacing: 0%;
                                color: var(--primary-black);
                            }
                        }
                    }

                }
            }
        }

        .match-loader-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            height: 100%;
            min-height: 32.5rem;
    
            .match-loader {
                position: absolute;
                top: 2rem;
                left: 50%;
                transform: translateX(-50%);
                width: 564px;
                box-shadow: 0px 32px 32px 4px rgba(0, 0, 0, 0.3236);
                background: white;
                padding: 2rem 1.5rem;
                border-radius: 20px;
                z-index: 100;
                max-width: 100%;
    
                .transformLoader {
    
                    h5,
                    .detesText {
                        display: none;
                    }
    
                    .content {
                        margin-top: 0;
                    }
                }
            }
            @media screen and (max-width: 576px) {
                min-height: unset !important;
    
                .transformLoader{
                    zoom: 0.6;
    
                    .transformLoader {
                        margin: 0;
                        width: 100%;
                    }
                }
            }
        }

        &.transform-loader-active {
            height: calc(100vh - 104px) !important;
            background: #FFFFFF;

            .trd-drawer-step2 {
                grid-template-columns: 1fr !important;
            }
        }

        @media screen and (max-width:767px) {
            &.transform-loader-active .tt-extension-content {
                padding: 1rem 1.5rem !important;
            }
        }

        .trd-drawer-step2 {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            max-width: 100%;
            min-height: 100%;

            .trd-section {
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding: 16px;
                background: var(--white);
                border-radius: 12px;
                border: 1px solid #BABABA33;

                h2 {
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 100%;
                    letter-spacing: 0%;
                    color: var(--primary-black);
                }

                &.trd-section-selection {
                    .section-wrapper {
                        display: flex;
                        flex-direction: column;
                        gap: 12px;

                        .section-item {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 8px;
                            gap: 8px;
                            width: 100%;
                            background: #F9F8F4;
                            border: 1px solid var(--inactive-text-box, #BABABA33);
                            border-radius: 8px;

                            .section-header {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;
                                padding-left: 8px;

                                .sh-left {
                                    display: flex;
                                    align-items: center;
                                    gap: 14px;
                                    font-size: 12px;
                                    font-weight: 500;
                                    line-height: 100%;
                                    letter-spacing: 0%;
                                    color: var(--primary-black);

                                    &.checkbox .checkmark {
                                        top: -5px !important;
                                        left: -8px !important;
                                        height: 24px;
                                        width: 24px;

                                        &:after {
                                            left: 5px;
                                            top: 7px;
                                            width: 12px;
                                            height: 6px;
                                            border-left: 2px solid var(--primary-black) !important;
                                            border-bottom: 2px solid var(--primary-black) !important;
                                        }
                                    }

                                    &.checkbox input:checked~.checkmark {
                                        border-color: var(--accent-color-main) !important;
                                        background: var(--accent-color-main) !important;

                                        &:after {
                                            border-left: 2px solid var(--white) !important;
                                            border-bottom: 2px solid var(--white) !important;
                                        }
                                    }

                                    &.checkbox input:disabled~.checkmark {
                                        border-color: var(--accent-color-light) !important;
                                        background: var(--accent-color-light) !important;
                                    }
                                }
                            }

                            .section-content {
                                display: flex;
                                flex-direction: column;
                                gap: 12px;
                                width: 100%;
                                padding: 2px 4px;

                                span {
                                    font-size: 10px;
                                    font-weight: 400;
                                    line-height: 100%;
                                    letter-spacing: 0%;
                                    color: var(--primary-black);

                                    &.checkmarkIcon {
                                        border: 1px solid #BABABA66;
                                    }
                                }

                                .customRadio input:checked~.checkmarkIcon::before {
                                    width: 0.5rem;
                                    height: 0.5rem;
                                    background: #044E37;
                                }
                            }
                        }
                    }
                }

                &.trd-skills-selection {
                    .skills-wrapper {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8px;

                        .skill-checkbox-group {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            gap: 8px;
                            padding: 2px;
                            border-radius: 10px;
                            border: 1px solid var(--inactive-text-box, #BABABA33);
                            background: rgb(249, 248, 244);
                            box-sizing: border-box;
                            max-width: 100%;
                            min-width: 0;
                        }

                        .skill-checkbox-group .or-separator {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            padding: 3px 8px;
                            border-radius: 999px;
                            border: 1px solid #E5E7EB;
                            background: #F3F4F6;
                            font-size: 12px;
                            font-weight: 700;
                            line-height: 100%;
                            letter-spacing: 0%;
                            color: #6B6B6B;
                            white-space: nowrap;
                            user-select: none;
                        }

                        .skill-item {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            padding: 14px 14px 14px 38px;
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 100%;
                            color: var(--primary-black);

                            &.checkbox .checkmark {
                                top: 10px !important;
                                left: 10px !important;
                                height: 20px;
                                width: 20px;

                                &:after {
                                    left: 3px;
                                    top: 5px;
                                    width: 12px;
                                    height: 6px;
                                    border-left: 2px solid var(--primary-black) !important;
                                    border-bottom: 2px solid var(--primary-black) !important;
                                }
                            }

                            &.checkbox input:checked~.checkmark {
                                border-color: var(--accent-color-main) !important;
                                background: var(--accent-color-main) !important;

                                &:after {
                                    border-left: 2px solid var(--white) !important;
                                    border-bottom: 2px solid var(--white) !important;
                                }
                            }


                            .remove-skill-btn {
                                width: 16px;
                                height: 16px;
                                border: none;
                                padding: 0;
                                background: transparent;
                                cursor: pointer;
                            }

                            &.new-skill {
                                position: relative;
                                padding: 4px 12px;
                                border-radius: 10px;
                                border: 1px solid var(--inactive-text-box, #BABABA33);
                                background: rgb(249, 248, 244);

                                .remove-skill-btn {
                                    width: 10px;
                                    height: 10px;
                                    position: absolute;
                                    right: 12px;
                                    top: 16px;
                                    border: none;
                                    padding: 0;
                                    background: transparent;
                                    cursor: pointer;

                                    &:before,
                                    &:after {
                                        content: '';
                                        background: #6B6B6B;
                                        display: inline-block;
                                        vertical-align: middle;
                                        position: absolute;
                                        left: 0;
                                        right: 0;
                                        top: 0;
                                        bottom: 0;
                                        margin: auto;
                                        transform: rotate(45deg);
                                    }

                                    &:before {
                                        width: 10px;
                                        height: 2px;
                                    }

                                    &:after {
                                        height: 10px;
                                        width: 2px;
                                    }
                                }

                                .new-skill-input {
                                    padding: 8px 0px;
                                    outline: none;
                                    border: none;
                                    font-size: 12px;
                                    font-weight: 500;
                                    line-height: 100%;
                                    letter-spacing: 0%;
                                    color: var(--primary-black);
                                    box-shadow: none;
                                    width: 112px;
                                    box-sizing: border-box;
                                    position: unset;
                                    opacity: unset;
                                    cursor: text;
                                }
                            }

                        }

                        .add-skill-btn {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            border-radius: 8px;
                            background: #E3E6FE;
                            padding: 10px;
                            cursor: pointer;

                            .add-skill-btn-icon {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: var(--primary-dark);
                                border-radius: 4px;
                                height: 20px;
                                width: 20px;
                            }

                            span {
                                font-size: 12px;
                                font-weight: 500;
                            }
                        }
                    }
                }
            }

        }
    }

    .tailor-loader-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        height: 100%;
        min-height: 32.5rem;

        .tailor-loader {
            position: absolute;
            top: 2rem;
            left: 50%;
            transform: translateX(-50%);
            width: 564px;
            box-shadow: 0px 32px 32px 4px rgba(0, 0, 0, 0.3236);
            background: white;
            padding: 2rem 1.5rem;
            border-radius: 20px;
            z-index: 100;
            max-width: 100%;

            .transformLoader {

                h5,
                .detesText {
                    display: none;
                }

                .content {
                    margin-top: 0;
                }
            }
        }

        @media screen and (max-width: 576px) {
            min-height: unset !important;

            .transformLoader {
                zoom: 0.6;

                .transformLoader {
                    margin: 0;
                    width: 100%;
                }
            }
        }
    }

    .tr-drawer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 32px;
        border-top: 0.75px solid #BABABA33;
        width: 100%;
        box-sizing: border-box;
        gap: 24px;
        background: var(--white);

        .drawer-actions-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .drawer-actions-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .underlinedBtn {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            font-size: 0.875rem;
            line-height: 1.214;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }

            &:disabled {
                text-decoration: none;
                cursor: not-allowed;
                background: none;
            }

            @media screen and (max-width: 767px) {
                text-decoration: underline;

                svg {
                    width: 12px;
                    height: 12px;
                }
            }
        }

        .outlinedBtn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            line-height: 1;
        }

        button {
            min-height: 36px;
        }

        .outlinedBtn.external-jd-btn {
            background:
                linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%) border-box;
            border: 1px solid transparent;
            line-height: 17px;
            position: relative;

            svg {
                width: 16px;
                height: 16px;
            }

            .hover-state {
                position: absolute;
                bottom: calc(100% + 10px);
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: auto;
                background: #231F20;
                border-radius: 8px;
                color: #fff;
                font-size: 0.6875rem;
                font-weight: 500;
                line-height: 1.214;
                padding: 0.75rem;
                border-radius: 4px;
                z-index: 1;
                display: none;
                text-transform: none;

                &:before {
                    width: 10px;
                    height: 10px;
                    background: #231F20;
                    content: '';
                    position: absolute;
                    bottom: -6px;
                    left: 50%;
                    transform: translateX(-50%);
                    rotate: 45deg;
                }
            }


            &:hover {
                .hover-state {
                    display: block;
                    z-index: 99;
                }
            }
        }

        @media screen and (max-width: 991px) {
            .outlinedBtn.external-jd-btn {
                font-size: 0.75rem;
            }
        }

        @media screen and (max-width: 767px) {
            border-top: 0.5px solid #DEE1E7;

            .outlinedBtn.external-jd-btn {
                display: none;
            }
        }

        .tr-drawer-back-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            width: 44px;
            background: #F4F4F4;
            border-radius: 50%;
            border: none;

            &:hover {
                background: #8d8d8d42;
            }
        }

        button:disabled {
            background: #BABABA;
            cursor: not-allowed;

            svg {
                filter: invert(1);
            }

            &:hover {
                background: #BABABA;
            }
        }

        .tr-drawer-submit-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 27px;
            background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
            border: none;
            cursor: pointer;

            &:disabled {
                background: #BABABA;
                cursor: not-allowed;
            }

            span {
                font-size: 14px;
                font-weight: 700;
                line-height: 100%;
                text-transform: uppercase;
                color: var(--white);
            }
        }

        .apply-now-btn {
            background: var(--primary-black);
            color: var(--white);
            font-size: 0.875rem;

            display: flex;
            align-items: center;
            gap: 8px;

            &:disabled {
                svg {
                    filter: none !important;
                }
            }
        }

        .apply-directly-text {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.214;
            color: var(--text-gray);
            margin-left: -12px;
        }
    }
}

@media screen and (max-width: 1340px) {
    .tailored-resume-drawer-container {
        width: calc(100vw - 48px);
    }
}

@media screen and (max-width: 1224px) {
    .tailored-resume-drawer-container {
        width: calc(100vw - 48px);

        .tr-drawer-header .tr-drawer-steps-container {
            .step-line {
                margin: 0 12px 0 6px;
            }
        }

        .tr-drawer-content .trd-drawer-step1 {
            .trd-resume-overview-container .trd-row .ro-job-content {
                min-width: unset;
                flex: 1;
            }
        }

        @media screen and (max-width: 991px) {
            .tr-drawer-content {
                padding: 20px 16px;
            }
        }
    }

    .resume-editor {
        .resume-editor-canvas {
            width: calc(100% - 396px);

            @media screen and (max-width: 1194px) {
                width: auto;
            }
        }
    }
}

.resume-editor.mobile-resume-ui {
    display: none;

    .re-report {
        display: flex;
        flex-direction: column;

        .re-report-summary {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            border: 0.5px solid #F1F1F1;

            .summary-overview {
                display: flex;
                align-items: center;
                padding: 16px 16px 24px;
                border-radius: 12px 12px 0 0;
                justify-content: space-between;
                background: var(--white);
                gap: 12px;

                .rs-left {}

                .rs-right {
                    .score-gauge-container {
                        width: 100px;
                        height: auto;
                        text-align: center;
                        user-select: none;
                        position: relative;

                        .score-gauge-value {
                            font-size: 18px;
                            line-height: 100%;
                            letter-spacing: 0%;
                            font-weight: 800;
                            color: var(--primary-black);
                            position: absolute;
                            top: 28px;
                            left: 50%;
                            transform: translateX(-50%);

                            &.average {
                                font-size: 13px;
                            }
                        }
                    }

                    .score-text {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 4px;
                        padding: 4px 8px;
                        border-radius: 6px;
                        background: #BABABA33;

                        span {
                            font-size: 10px;
                            line-height: 100%;
                            letter-spacing: 0%;
                            font-weight: 600;
                            flex: 1;
                            text-align: center;
                        }
                    }
                }
            }

            .rs-points {
                .rs-points-head {
                    padding: 12px;
                    padding-bottom: 16px;
                    background: var(--white);
                    border-radius: 12px 12px 0 0;

                    h6 {
                        font-size: 16px;
                        font-weight: 600;
                        line-height: 24px;
                        color: var(--primary-black);
                    }
                }

                .rs-points-body {
                    display: flex;
                    flex-direction: column;

                    .rs-point-item {
                        background: #fff;
                        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.0809);
                        padding: 0 12px;


                        .rs-point-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: 12px;
                            padding: 16px 0;
                            cursor: pointer;

                            .head-name {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                font-size: 13px;
                                font-weight: 600;
                                line-height: 16px;
                                color: var(--primary-black);

                                span {
                                    background: var(--accent-color-main);
                                    color: var(--white);
                                    padding: 2px 4px;
                                    border-radius: 12px;
                                    font-size: 11px;
                                    font-weight: 700;
                                    line-height: 12px;
                                    width: 16px;
                                    height: 16px;
                                    text-align: center;
                                }
                            }

                            svg {
                                width: 16px;
                                height: 16px;
                            }

                            &.active {
                                svg {
                                    transform: rotate(180deg);
                                }
                            }
                        }

                        .rs-point-content {
                            padding: 0 0 24px;
                            margin-top: -6px;
                            -webkit-animation: slide-in-bottom .2s cubic-bezier(.25, .46, .45, .94) both;
                            animation: slide-in-bottom .2s cubic-bezier(.25, .46, .45, .94) both;

                            p {
                                margin: 0;
                                font-size: 13px;
                                font-weight: 400;
                                line-height: 1.618;
                                color: var(--primary-black);
                            }

                            .rs-skills-wrapper {
                                display: flex;
                                flex-wrap: wrap;
                                gap: 8px;
                                margin-bottom: 8px;

                                .skill-item {
                                    padding: 0 8px;
                                    border-radius: 4px;
                                    font-size: 11px;
                                    font-weight: 500;
                                    line-height: 22px;
                                    color: var(--primary-black);
                                    background: #fafafa;
                                }
                            }
                        }

                        &:last-child {
                            border-radius: 0 0 12px 12px;

                        }
                    }
                }
            }
        }
    }
}


.mobile-external-jedi {
    margin: 16px 0 10px;
    padding-top: 16px;
    border-top: 1px solid #DEE1E7;
    display: none;
    flex-direction: column;
    gap: 8px;

    @media screen and (max-width: 767px) {
        display: flex;
    }

    text {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.214;
    }

    .underlinedBtn {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 700;
        line-height: 17px;
        background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Here's what comes next (Report tab) */
.re-report .re-whats-next {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;


    background: white;
    padding: 12px;
    border-radius: 12px;
}
.re-report .re-whats-next-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--primary-black);
    margin: 0;
}
.re-report .re-whats-next-progress-card,
.re-report .re-whats-next-formula-card {
    background: linear-gradient(to bottom right, #eef2ff ,#faf5ff , #fdf2f8);
    border-radius: 12px;
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); */
    outline: 1px solid #F1F1F1;
    padding: 16px;
}
.re-report .re-whats-next-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.re-report .re-whats-next-progress-label,
.re-report .re-whats-next-progress-count {
    font-size: 14px;
    font-weight: 600;
    color: #231F20;
}

.re-report .re-whats-next-progress-count{
    color: #384ad7;
}
.re-report .re-whats-next-progress-bar-wrap {
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.re-report .re-whats-next-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #4f46e5 , #9333ea);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.re-report .re-whats-next-progress-hint {
    font-size: 11px;
    line-height: 1.214;
    color: var(--text-gray);
    font-weight: 500;
    margin: 0;
}
.re-report .re-whats-next-formula-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.re-report .re-whats-next-formula-icon-target {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #384ad7;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.re-report .re-whats-next-formula-title {
    font-size: 16px;
    line-height: 1.618;
    font-weight: 700;
    color: #231F20;
    margin: 0;
}
.re-report .re-whats-next-formula-subtitle {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.214;
    color: var(--text-gray);
    margin: 0;
}
.re-report .re-whats-next-formula-inner {
    background: var(--white);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.re-report .re-whats-next-formula-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.re-report .re-whats-next-formula-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
}
.re-report .re-whats-next-formula-icon-minimum {
    background: linear-gradient(to bottom right, #22c55e , #059669);
}
.re-report .re-whats-next-formula-icon-timeline {
    background: linear-gradient(to bottom right, #3b82f6 , #0891b2);
}
.re-report .re-whats-next-formula-icon-timeline svg {
    width: 20px;
    height: 20px;
}
.re-report .re-whats-next-formula-item-label {
    font-size: 14px;
    line-height: 1.618;
    font-weight: 700;
    color: #231F20;
    margin: 0;
}
.re-report .re-whats-next-formula-item-label strong {
    font-weight: 700;
}
.re-report .re-whats-next-formula-item-desc {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.214;
    color: var(--text-gray);
    margin: 0;
}
.re-report .re-whats-next-footer {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-gray);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Tailored resume feedback (Report tab) */
.re-report .tailor-feedback-section {
    margin-top: 16px;
}

.re-report .tailor-feedback-body {
    background: var(--white);
    padding: 12px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.0809);
    gap: 12px;
}

.re-report .tailor-feedback-options {
    display: flex;
    gap: 10px;
}

.re-report .tailor-feedback-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(35, 31, 32, 0.22);
    background: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-black);
}

.re-report .tailor-feedback-option svg {
    flex: 0 0 auto;
}

.re-report .tailor-feedback-option.active {
    border-color: var(--accent-color-main);
    background: var(--accent-color-muted);
}

.re-report .tailor-feedback-option:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.re-report .tailor-feedback-textarea {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.re-report .tailor-feedback-textarea textarea {
    width: 100%;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(35, 31, 32, 0.22);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.618;
    color: var(--primary-black);
    outline: none;
}

.re-report .tailor-feedback-textarea textarea:focus {
    border-color: var(--accent-color-main);
}

.re-report .tailor-feedback-counter {
    font-size: 11px;
    color: rgba(35, 31, 32, 0.6);
    text-align: right;
}

.re-report .tailor-feedback-actions {
    display: flex;
    justify-content: flex-end;
}

.re-report .tailor-feedback-actions .primaryBtn {
    background: var(--primary-black);
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 18px;
}

.re-report .tailor-feedback-thanks {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: #BABABA33;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-black);
}

.resume-editor {
    /* width: 1291px; */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* gap: 24px; */
    /* padding: 24px 24px 0; */
    /* justify-content: center; */
    margin: 0 auto;

    .resume-editor-canvas {
        width: 701px;
        width: calc(100% - 396px);
        height: 100%;
        max-height: calc(100vh - 198px);
        overflow-y: auto;
        padding-right: 8px;
        padding-bottom: 20px;
    }

    .resume-editor-sidebar {
        width: 372px;
        min-width: 372px;
        height: 100%;


        .section-tabs {
            display: flex;
            gap: 4px;
            background: var(--accent-color-muted);
            padding: 4px;
            border-radius: 12px;
            flex: 1;
            max-width: 100%;
            height: 40px;
            margin-bottom: 8px;

            .section-tab-item {
                flex: 1;
                display: flex;
                white-space: nowrap;
                justify-content: center;
                align-items: center;
                gap: 8px;
                padding: 12px;
                border-radius: 8px;
                font-size: 13px;
                font-weight: 600;
                line-height: 17px;
                color: var(--primary-black);
                transition: background .3s ease;
                cursor: pointer;

                svg path {
                    stroke: var(--text-gray);
                }

                &.active {
                    background: var(--white);
                    color: var(--primary-black);

                    svg path {
                        stroke: var(--primary-black);
                    }
                }
            }
        }

        input {
            background: #F8F8F9;
            border: none;
            outline: none;
            padding: 8px;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
            font-size: 13px;
            font-weight: 400;
            line-height: 16px;
            color: var(--primary-black);

            &::placeholder {
                font-weight: 400;
                color: #6B6B6B;
            }

            &:focus,
            &:active,
            &:focus-within,
            &:focus-visible {
                outline: none;
                border: none;
                box-shadow: none;
            }

            &.required {
                background: #FFF5F7;
            }
        }

        input.base-input {
            padding: 0;
            background: transparent;
            border: none;
            outline: none;
            color: var(--primary-black);
        }


        textarea {
            background: #F8F8F9;
            padding: 8px;
            border: none;
            outline: none;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
            font-size: 13px;
            font-weight: 400;
            line-height: 16px;
            color: var(--primary-black);

            resize: none;
            overflow: hidden;
            box-sizing: border-box;
            min-height: 18px;

            &::placeholder {
                font-weight: 400;
                color: #6B6B6B;
            }

            &:focus,
            &:active,
            &:focus-within,
            &:focus-visible {
                outline: none;
                border: none;
                box-shadow: none;
            }
        }

        .checkboxInput {
            min-height: 16px;
            padding-left: 22px;

            .checkmark {
                width: 16px;
                height: 16px;
            }

            .name {
                font-size: 13px;
                line-height: 16px;
            }
        }

        .drag-handle:has(+ div .skill-group-content) {
            pointer-events: none;
            opacity: 0.5;
        }

        .re-sections {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: calc(100vh - 248px);
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 48px;

            .re-section {
                background: #fff;
                border-radius: 12px;
                border: 0.5px solid #F1F1F1;
                padding: 12px 12px 12px 24px;
                display: flex;
                flex-direction: column;
                gap: 12px;

                &.basic-details {
                    padding: 12px;
                }

                .re-section-head {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 12px;
                    height: 40px;
                    margin-block: -12px;
                    cursor: pointer;

                    h6 {
                        font-size: 13px;
                        font-weight: 500;
                        line-height: 16px;
                        text-transform: uppercase;
                    }

                    input.base-input {
                        font-size: 13px;
                        font-weight: 500;
                        line-height: 16px;
                        text-transform: uppercase;
                    }

                    .err-text {
                        font-size: 13px;
                        font-weight: 400;
                        line-height: 16px;
                        color: var(--failureRed);
                    }

                    .re-section-head-actions {
                        display: flex;
                        gap: 12px;

                        .icon-btn {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: transparent;
                            width: 16px;
                            height: 16px;

                            svg {
                                width: 100%;
                                height: 100%;
                            }

                            &.circular {
                                border-radius: 8px;
                                background: #F5F5F5;
                                padding: 2px;

                                svg {
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }

                        .expand-icon {
                            background: #F3F4F5;
                            width: 16px;
                            height: 16px;
                            border-radius: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: transform .3s ease;

                            svg {
                                width: 100%;
                                height: 100%;
                            }

                            &.expanded {
                                transform: rotate(180deg);
                            }
                        }
                    }
                }

                .re-section-content {
                    /* border-top: 1px solid #f5f5f5;
                padding-top: 12px; */
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    textarea.summary {
                        background: transparent;
                        padding: 0;
                    }

                    .flex-row {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        width: 100%;

                        >svg {
                            min-width: 16px;
                            min-height: 16px;
                        }

                        &.align-start {
                            align-items: flex-start;

                            svg {
                                margin-top: 8px;
                            }
                        }
                    }

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

                        hr {
                            margin: 0 8px !important;
                        }

                        &.gap-1 {
                            gap: 4px;
                        }
                    }

                    .re-input-with-icon {
                        position: relative;

                        .icon {
                            position: absolute;
                            top: 50%;
                            left: 8px;
                            transform: translateY(-50%);
                            width: 16px;
                            height: 16px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &.flex-row {
                                gap: 4px;
                                width: 40px;

                                .phone-code {
                                    font-size: 13px;
                                    font-weight: 400;
                                    line-height: 16px;
                                    /* color: var(--text-gray); */
                                }
                            }

                            svg {
                                width: 16px;
                                height: 16px;
                            }
                        }

                        input {
                            padding-left: 32px;
                        }

                        &:has(.phone-code) {
                            input {
                                padding-left: 52px;
                            }
                        }
                    }


                    .add-skill-group {
                        margin-top: 8px;
                        width: 100%;
                        padding: 8px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        outline: none;
                        border: none;
                        border: 1px solid #F5F5F5;
                        gap: 4px;
                        border-radius: 4px;
                        background: #fff;
                        font-weight: 500;
                        font-size: 13px;
                        line-height: 16px;
                        color: var(--primary-black);

                        &:hover {
                            background: #F5F5F5;
                        }
                    }

                    .skills-groups {
                        display: flex;
                        flex-direction: column;
                        gap: 12px;

                        .skill-group {
                            position: relative;
                            border-top: 1px solid #f5f5f5;
                            padding-top: 12px;
                            display: flex;
                            flex-direction: column;
                            gap: 12px;

                            /* &:first-child {
                            border-top: none;
                            padding-top: 0;
                        } */

                            .skill-group-header {
                                padding-left: 16px;
                                display: flex;
                                justify-content: space-between;
                                gap: 12px;

                                font-size: 13px;
                                font-weight: 700;
                                line-height: 16px;

                                &.list-items {
                                    cursor: pointer;
                                }

                                .err-text {
                                    font-size: 13px;
                                    font-weight: 400;
                                    line-height: 16px;
                                    color: var(--failureRed);
                                }

                                h6 {
                                    font-size: 13px;
                                    font-weight: 700;
                                    line-height: 16px;

                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }

                                input.base-input {
                                    font-size: 13px;
                                    font-weight: 700;
                                    line-height: 16px;
                                }

                                .skill-group-actions {
                                    display: flex;
                                    gap: 12px;

                                    .icon-btn {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: transparent;
                                        width: 16px;
                                        height: 16px;

                                        &.circular {
                                            border-radius: 8px;
                                            background: #F5F5F5;
                                            padding: 2px;

                                            svg {
                                                width: 12px;
                                                height: 12px;
                                            }
                                        }

                                        &.expand-icon {
                                            background: #F3F4F5;
                                            width: 16px;
                                            height: 16px;
                                            border-radius: 8px;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            transition: transform .3s ease;

                                            svg {
                                                width: 100%;
                                                height: 100%;
                                            }

                                            &.expanded {
                                                transform: rotate(180deg);
                                            }
                                        }
                                    }
                                }

                                .exp-header {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 4px;

                                    width: 100%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;

                                    h6 {
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                                    span {
                                        font-weight: 400;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                                }
                            }

                            .skill-group-content {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 4px;

                                .skill-group-items {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 4px;

                                    .skill-group-item {
                                        position: relative;
                                        display: flex;
                                        align-items: center;
                                        gap: 4px;
                                        padding: 8px;
                                        background: #F8F8F9;
                                        border-radius: 4px;

                                        input {
                                            border-radius: 0;
                                            padding: 0;
                                            max-width: 232px;
                                        }

                                        .icon-btn {
                                            width: 16px;
                                            height: 16px;
                                            background: white;
                                            border-radius: 8px;
                                            padding: 2px;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            cursor: pointer;

                                            svg {
                                                width: 12px;
                                                height: 12px;
                                            }



                                        }
                                    }

                                }

                                .add-skill-item {
                                    position: relative;

                                    input {
                                        padding-right: 40px;
                                    }

                                    .info-note-icon {
                                        position: absolute;
                                        top: 0;
                                        right: 0;
                                        width: 32px;
                                        height: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;

                                        svg {
                                            width: 16px;
                                            height: 16px;
                                        }

                                        .info-note-text {
                                            font-size: 12px;
                                            font-weight: 600;
                                            line-height: 15px;
                                            color: #fff;
                                            background: #231f20;
                                            padding: 6px 12px;
                                            border-radius: 6px;
                                            position: absolute;
                                            bottom: calc(100% + 4px);
                                            right: -56px;
                                            display: none;
                                            white-space: nowrap;

                                            &::before {
                                                content: '';
                                                position: absolute;
                                                right: 68px;
                                                bottom: -4px;
                                                width: 8px;
                                                height: 8px;
                                                transform: rotate(45deg);
                                                background: #231f20;
                                            }
                                        }

                                        &:hover {
                                            .info-note-text {
                                                display: block;
                                            }
                                        }
                                    }
                                }

                                .exp-tech-used {
                                    margin: 1px 0;

                                    label {
                                        font-size: 13px;
                                        line-height: 16px;
                                        font-weight: 600;
                                    }
                                }

                                .bullets {
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 4px;

                                    .add-skill-group {
                                        margin-top: 0;
                                    }

                                    &.re-experience .bullet-point,
                                    &.re-projects .bullet-point {
                                        &::before {
                                            content: unset;
                                            position: unset;
                                            top: unset;
                                            font-size: unset;
                                            font-weight: unset;
                                            color: unset;
                                            z-index: unset;
                                        }
                                    }

                                    .bullet-point {
                                        position: relative;

                                        &::before {
                                            content: '•';
                                            position: absolute;
                                            left: 8px;
                                            top: 3px;
                                            font-size: 24px;
                                            font-weight: 400;
                                            color: var(--primary-black);
                                            z-index: 1;
                                        }

                                        input {
                                            padding-left: 20px;

                                        }

                                        &:has(.icon-btn) {
                                            input {
                                                padding-right: 40px;
                                            }

                                            .jodit-react-container .jodit-wysiwyg {
                                                padding-right: 20px !important;
                                            }
                                        }

                                        .icon-btn {
                                            position: absolute;
                                            top: 8px;
                                            right: 8px;
                                            width: 16px;
                                            height: 16px;
                                            background: #fff;
                                            border-radius: 8px;
                                            padding: 2px;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            cursor: pointer;

                                            svg {
                                                width: 12px;
                                                height: 12px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .bullets.generic-section {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;

                        .bullet-point {
                            position: relative;

                            textarea {
                                padding-left: 24px !important;
                                padding-right: 28px !important;
                            }

                            .icon-btn {
                                position: absolute;
                                top: 8px;
                                right: 8px;
                                width: 16px;
                                height: 16px;
                                background: #fff;
                                border-radius: 8px;
                                cursor: pointer;

                                svg {
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }
                    }
                }
            }

        }

        .re-sections-wrapper {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .re-sections {
                max-height: calc(100vh - 300px);
                overflow-y: auto;
                padding-bottom: 0;
            }



            .re-sections-new {
                position: relative;
                margin-top: 8px;

                .add-section-btn {
                    width: 100%;
                    display: flex;
                    height: 40px;
                    padding: 12px 0;
                    justify-content: center;
                    align-items: center;
                    border: .5px solid rgba(0, 0, 0, .1);
                    gap: 4px;
                    border-radius: 12px;
                    background: var(--accent-color-main);
                    outline: none;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 16px;
                    color: white;

                    svg {
                        filter: invert(1);
                    }

                    &:disabled {
                        opacity: 0.7;
                        cursor: not-allowed;

                    }
                }

                ul.new-section-list {
                    position: absolute;
                    bottom: calc(100% + 4px);
                    left: 0;
                    width: 100%;
                    background: #fff;
                    border-radius: 8px;
                    border: 0.5px solid rgba(0, 0, 0, .2);
                    padding: 4px;
                    z-index: 1000;
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    max-height: 320px;
                    /* scroll when too tall */
                    overflow-y: auto;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

                    &.open-down {
                        bottom: unset;
                        top: calc(100% + 4px);
                    }

                    &.open-up {
                        bottom: calc(100% + 4px);
                        top: unset;
                    }

                    li {
                        padding: 12px;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 13px;
                        font-weight: 500;
                        line-height: 16px;
                        color: var(--primary-black);
                        transition: all 0.3s ease;
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        &:hover {
                            background: var(--accent-color-light);
                        }
                    }
                }
            }
        }

        .re-report {
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 246px);
            overflow-y: auto;

            .re-report-summary {
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                border: 0.5px solid #F1F1F1;
                margin-bottom: 32px;

                .summary-overview {
                    display: flex;
                    align-items: center;
                    padding: 16px 16px 24px;
                    border-radius: 12px 12px 0 0;
                    justify-content: space-between;
                    background: var(--white);
                    gap: 12px;

                    .rs-left {}

                    .rs-right {
                        .score-gauge-container {
                            width: 100px;
                            height: auto;
                            text-align: center;
                            user-select: none;
                            position: relative;

                            .score-gauge-value {
                                font-size: 18px;
                                line-height: 100%;
                                letter-spacing: 0%;
                                font-weight: 800;
                                color: var(--primary-black);
                                position: absolute;
                                top: 28px;
                                left: 50%;
                                transform: translateX(-50%);

                                &.average {
                                    font-size: 13px;
                                }
                            }
                        }

                        .score-text {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 4px;
                            padding: 4px 8px;
                            border-radius: 6px;
                            background: #BABABA33;

                            span {
                                font-size: 10px;
                                line-height: 100%;
                                letter-spacing: 0%;
                                font-weight: 600;
                                flex: 1;
                                text-align: center;
                            }
                        }
                    }
                }

                .rs-points {
                    .rs-points-head {
                        padding: 12px;
                        padding-bottom: 16px;
                        background: var(--white);
                        border-radius: 12px 12px 0 0;

                        &.collapsible {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 8px;
                            cursor: pointer;
                        }

                        h6 {
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 24px;
                            color: var(--primary-black);
                        }
                    }

                    .rs-points-body {
                        display: flex;
                        flex-direction: column;

                        .rs-point-item {
                            background: #fff;
                            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.0809);
                            padding: 0 12px;


                            .rs-point-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                gap: 12px;
                                padding: 16px 0;
                                cursor: pointer;

                                .head-name {
                                    display: flex;
                                    align-items: center;
                                    gap: 8px;
                                    font-size: 13px;
                                    font-weight: 600;
                                    line-height: 16px;
                                    color: var(--primary-black);

                                    span {
                                        background: var(--accent-color-main);
                                        color: var(--white);
                                        padding: 2px 4px;
                                        border-radius: 12px;
                                        font-size: 11px;
                                        font-weight: 700;
                                        line-height: 12px;
                                        width: 16px;
                                        height: 16px;
                                        text-align: center;
                                    }
                                }

                                svg {
                                    width: 16px;
                                    height: 16px;
                                }

                                &.active {
                                    svg {
                                        transform: rotate(180deg);
                                    }
                                }
                            }

                            .rs-point-content {
                                padding: 0 0 24px;
                                margin-top: -6px;
                                -webkit-animation: slide-in-bottom .2s cubic-bezier(.25, .46, .45, .94) both;
                                animation: slide-in-bottom .2s cubic-bezier(.25, .46, .45, .94) both;

                                p {
                                    margin: 0;
                                    font-size: 13px;
                                    font-weight: 400;
                                    line-height: 1.618;
                                    color: var(--primary-black);
                                }

                                .rs-skills-wrapper {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 8px;
                                    margin-bottom: 8px;

                                    .skill-item {
                                        padding: 0 8px;
                                        border-radius: 4px;
                                        font-size: 11px;
                                        font-weight: 500;
                                        line-height: 22px;
                                        color: var(--primary-black);
                                        background: #fafafa;
                                    }
                                }
                            }

                            &:last-child {
                                border-radius: 0 0 12px 12px;

                            }
                        }
                    }
                }
            }
        }

        .re-styles {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .re-styles-item {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 12px;
                background: var(--white);
                border-radius: 12px;
                border: 0.5px solid #F1F1F1;

                h2 {
                    font-size: 14px;
                    line-height: 16px;
                }

                .hr-line {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    border-block-start: 1px solid #f2f4f5;
                }

                &.re-style-spacing-margin-editor .ed-items-wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    .ed-item {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        width: 100%;

                        label {
                            font-size: 14px;
                            line-height: 16px;
                            font-weight: 500;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: 4px;

                            .info-note-icon {
                                position: relative;
                                width: 16px;
                                height: 16px;

                                svg {
                                    width: 16px;
                                    height: 16px;
                                }

                                .info-note-text {
                                    font-size: 12px;
                                    font-weight: 500;
                                    line-height: 16px;
                                    color: #fff;
                                    background: #231f20;
                                    padding: 6px 12px;
                                    border-radius: 6px;
                                    position: absolute;
                                    bottom: calc(100% + 8px);
                                    right: -12px;
                                    display: none;
                                    white-space: normal;
                                    width: 236px;

                                    &::before {
                                        content: '';
                                        position: absolute;
                                        right: 16px;
                                        bottom: -4px;
                                        width: 8px;
                                        height: 8px;
                                        transform: rotate(45deg);
                                        background: #231f20;
                                    }
                                }

                                &:hover {
                                    .info-note-text {
                                        display: block;
                                    }
                                }
                            }
                        }
                    }
                }

                &.reset-btn {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    gap: 4px;
                    font-size: 14px;
                    line-height: 16px;
                    font-weight: 500;
                    padding: 12px;
                    cursor: pointer;
                    height: 40px;
                }
            }

            .re-styles-template-selector {
                margin-top: 4px;
                display: flex;
                gap: 8px;

                .tem-item {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    cursor: pointer;
                    align-items: center;
                    position: relative;
                    flex: 1;

                    img {
                        border: 4px solid #f2f4f5;
                        border-radius: 8px;
                    }

                    span {
                        font-size: 13px;
                        line-height: 18px;
                        font-weight: 600;
                        align-self: center;
                    }

                    .recommended-badge {
                        display: flex;
                        align-items: center;
                        gap: 2px;
                        font-size: 9px;
                        line-height: normal;
                        font-weight: 600;
                        background: var(--accent-color-main);
                        color: white;
                        padding: 6px;
                        border-radius: 4px;
                        position: absolute;
                        bottom: 25px;
                        width: calc(100% - 6px);
                        justify-content: center;

                        svg {
                            filter: invert(1);
                        }
                    }
                    &.selected .resume-img{
                        height: 100%;
                    }
                    &.selected .resume-img img {
                        border: 4px solid var(--accent-color-light) !important;
                        height: 100%;
                    }
                }

            }

            /* NEW: Templates Modal and Header Styles */
            .re-template-selector-header {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h2 {
                    margin: 0 !important;
                }

                .re-view-all-templates-btn {
                    padding: 0;
                    background: transparent;
                    border: none;
                    color: var(--accent-color-main);
                    font-size: 13px;
                    font-weight: 600;
                    cursor: pointer;
                    text-decoration: underline;
                    transition: all 0.2s ease;

                    &:hover {
                        opacity: 0.8;
                    }
                }
            }

            /* All Templates Modal */
            .re-all-templates-modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.4);
                backdrop-filter: blur(4px);
                z-index: 2000;
                display: flex;
                align-items: center;
                justify-content: center;
                animation: fadeIn 0.3s ease;

                .re-all-templates-modal-content {
                    background: var(--white);
                    width: 720px;
                    max-width: 90%;
                    max-height: 80vh;
                    border-radius: 16px;
                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    animation: slideUp 0.3s ease;

                    .re-all-templates-modal-header {
                        padding: 20px 24px;
                        border-bottom: 1px solid #f2f4f5;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        h3 {
                            margin: 0;
                            font-size: 18px;
                            font-weight: 700;
                        }

                        .close-btn {
                            background: transparent;
                            border: none;
                            cursor: pointer;
                            color: #666;
                            padding: 4px;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: all 0.2s ease;

                            &:hover {
                                background: #f2f4f5;
                                color: #000;
                            }
                        }
                    }

                    .re-all-templates-grid {
                        padding: 24px;
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: 20px;
                        overflow-y: auto;

                        @media screen and (max-width: 767px) {
                            grid-template-columns: repeat(2, 1fr);
                        }

                        &::-webkit-scrollbar {
                            width: 6px;
                        }

                        &::-webkit-scrollbar-track {
                            background: #f1f1f1;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: #ccc;
                            border-radius: 10px;
                        }

                        &::-webkit-scrollbar-thumb:hover {
                            background: #aaa;
                        }

                        .re-template-card {
                            display: flex;
                            flex-direction: column;
                            gap: 12px;
                            cursor: pointer;
                            transition: all 0.3s ease;

                            .template-img-wrapper {
                                position: relative;
                                border-radius: 10px;
                                overflow: hidden;
                                border: 2px solid #f2f4f5;
                                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

                                img {
                                    width: 100%;
                                    height: auto;
                                    height: 211px;
                                    display: block;
                                    transition: transform 0.3s ease;
                                }

                                .selected-check {
                                    position: absolute;
                                    top: 10px;
                                    right: 10px;
                                    z-index: 2;
                                }
                            }

                            .template-info {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 4px;

                                span {
                                    font-size: 14px;
                                    font-weight: 600;
                                    color: var(--primary-black);
                                }

                                .recommended-badge {
                                    display: flex;
                                    align-items: center;
                                    gap: 4px;
                                    background: var(--accent-color-main);
                                    color: #fff;
                                    padding: 2px 8px;
                                    border-radius: 20px;
                                    font-size: 10px;
                                    font-weight: 600;

                                    svg {
                                        width: 10px;
                                        height: 10px;
                                        filter: invert(1);
                                    }
                                }
                            }

                            &:hover {
                                transform: translateY(-4px);

                                .template-img-wrapper {
                                    border-color: var(--accent-color-light);
                                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

                                    img {
                                        transform: scale(1.05);
                                    }
                                }
                            }

                            &.selected {
                                .template-img-wrapper {
                                    border-color: var(--accent-color-main);
                                    border-width: 2px;
                                }

                                .template-info span {
                                    color: var(--accent-color-main);
                                }
                            }
                        }
                    }
                }
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }

            @keyframes slideUp {
                from {
                    transform: translateY(20px);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .re-style-font-editor {

                .ed-items-wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    .ed-item-group {
                        display: flex;
                        gap: 12px;
                        width: 100%;

                        .ed-item {
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            gap: 4px;

                            label {
                                font-size: 13px;
                                line-height: 16px;
                                font-weight: 600;
                            }

                        }

                        .re-theme-color-picker {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;


                            .re-theme-color-input {
                                width: 2.5rem;
                                height: 1.75rem;
                                padding: 0;
                                border: 1px solid #e0e0e0;
                                border-radius: 0.25rem;
                                cursor: pointer;
                                background: transparent;
                            }

                            .re-theme-color-input::-webkit-color-swatch-wrapper {
                                padding: 2px;
                            }

                            .re-theme-color-input::-webkit-color-swatch {
                                border-radius: 0.25rem;
                                border: none;
                            }

                            .re-theme-color-value {
                                font-size: 0.8125rem;
                                font-weight: 500;
                                color: var(--primary-black, #231f20);
                            }
                        }
                    }
                }
            }
        }

        .re-select__control {
            background: #F8F8F9;
            border: none;
            outline: none;
            padding: 0 8px;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
            font-size: 13px;
            font-weight: 500;
            line-height: 16px;
            color: var(--primary-black);
            min-height: 32px;

            .re-select__value-container {
                padding: 0;

                .re-select__input-container {
                    margin: 0;
                    padding: 0;
                }
            }

            .re-select__indicator-separator {
                display: none;
            }

            .re-select__indicator {
                padding: 0;
            }

            .re-select__placeholder {
                font-size: 13px;
                font-weight: 400;
                line-height: 16px;
                color: var(--text-gray);
            }

            &:focus,
            &:active,
            &:focus-within,
            &:focus-visible {
                outline: none;
                border: none;
                box-shadow: none;
            }

            &.re-select__control--menu-is-open {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }
        }

        .re-select__menu-list {
            padding: 4px;
            border-radius: 8px;


            .re-select__option {
                padding: 8px;
                border-radius: 4px;
                font-size: 13px;
                line-height: 16px;
                font-weight: 400;
                color: var(--primary-black);
                cursor: pointer;

                &.re-select__option--is-focused {
                    background: var(--accent-color-light);
                }

                &.re-select__option--is-selected {
                    background: var(--accent-color-light);
                    font-weight: 600;
                }
            }
        }



        @media screen and (max-width: 767px) {
            width: 100%;
            min-width: 100%;
            height: auto;

            .re-sections-wrapper .re-sections {
                max-height: unset;
            }
            .re-sections{
                max-height: unset;
            }
        }
    }

    .jodit-react-container {
        p {
            font-size: inherit;
            line-height: inherit;
        }

        .jodit-workplace {

            .jodit-wysiwyg {
                min-height: 20px !important;
                font-size: 13px !important;
                line-height: 16px !important;
            }
        }
    }

    .bullets.generic-section .jodit-react-container .jodit-workplace .jodit-wysiwyg {
        padding-left: 24px !important;
        padding-right: 28px !important;
    }
}

.upload-tailored-resume-modal {

    .modal-dialog {
        width: 38rem !important;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        padding: 3.25rem 2.5rem;

        h1 {
            font-size: 1.5rem;
        }

        span {
            font-size: 0.75rem;
            color: var(--text-gray);
        }

        .upload-resume-btn {
            background: var(--primary-black);
            color: var(--white);
            margin-top: -1.125rem;
            min-width: 12rem;
            font-weight: 600;
            text-transform: unset;
        }

        .spinner-loader {
            display: inline-block;
            width: 42px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(farthest-side, #e0e0e0 94%, #0000) top/4px 4px no-repeat,
                conic-gradient(#0000 30%, #e0e0e0);
            -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
            mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
            animation: spinner-rotate 1s infinite linear;
            transform-origin: center;
        }
    }
}

@keyframes swipeRight {
    100% {
        transform: translateX(200%) skew(-45deg);
    }
}

@keyframes swipeLeft {
    100% {
        transform: translateX(-200%) skew(-45deg);
    }
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}


.resume-preview-container.report-tab-active .highlight,
.resume-preview-container.report-tab-active .highlight-word {
    display: inline;
    background: rgb(27, 252, 6, 0.6);
}

@media screen and (max-width: 767px) {

    .resume-preview-container .highlight,
    .resume-preview-container .highlight-word {
        display: inline;
        background: rgb(27, 252, 6, 0.6);
    }
}

.tailor-loader-skeleton {

    /* Generic shapes */
    .block {
        height: 14px;
        width: 120px;
        border-radius: 6px;
    }

    .ro-title {
        .block {
            height: 48px;
            margin: -12px;
            width: 100%;
        }
    }

    .small-block {
        width: 120px;
        height: 12px;
    }

    .mr-left {

        .title-large {
            width: 500px;
        }

        .small-block {
            width: 480px;
        }
    }

    .medium-block {
        width: 180px;
        height: 14px;
    }

    .trd-resume-overview-container {
        .medium-block {
            width: 100%;
            height: 48px;
        }

        .small-block {
            width: 100%;
            height: 48px;
        }
    }

    .title-block {
        width: 240px;
        height: 22px;
    }

    .title-large {
        width: 500px;
        height: 26px;
    }

    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

    .square {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .ro-skills {
        background-color: #F8F8F9;
        padding: 12px;
        border-radius: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        height: 48px;
        margin-inline: 12px;

        /* Tags */
        .tag {
            width: 90px;
            height: 24px;
            border-radius: 4px;
        }
    }

    .ro-summary {
        width: 100%;
        height: 48px;

        /* Summary */
        .summary {
            width: 100%;
            height: 40px;
            border-radius: 8px;
        }

        margin-inline: 12px;
    }

    /* Button */
    .button {
        width: 260px;
        height: 36px;
        border-radius: 27px;
        margin: auto;
    }
}

.tailor-loader-skeleton .shimmer {
    position: relative;
    overflow: hidden;
    background: #e2e2e2;
}

.tailor-loader-skeleton .shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    animation: match-shimmer 1.5s infinite;
}

@keyframes match-shimmer {
    100% {
        left: 150%;
    }
}


@media screen and (max-width: 767px) {
    .tailor-loader-skeleton .tailored-resume-drawer-container {
        .tr-drawer-header {
            .title-block {
                width: 173px;
                height: 16px;
            }

            .tr-drawer-steps-container .step .step-text {
                height: 24px;
                width: 100px;

                @media screen and (max-width: 542px) {
                    height: 32px;
                    width: 56px;
                }
            }
        }

        .tr-drawer-content .trd-drawer-step1 {
            .trd-resume-overview-container .trd-row .ro-title {
                display: none !important;
            }

            .trd-resume-overview-container .trd-row .ro-job-content {
                width: 100%;
            }

            .mr-left .title-large {
                width: 259px;
            }

            .mr-left .small-block {
                width: 259px;
            }

            .ro-skills {
                margin-inline: 0;
                height: auto;
                margin-bottom: -16px;
            }

            .ro-summary {
                margin-inline: 0;
            }
        }
    }
}

.re-focus-item {
    -webkit-animation: soft-pulse 1.1s ease-in-out both;
    animation: soft-pulse 1.1s ease-in-out both;
    transition: background-color 0.2s ease;
    background: #fff;

    input,
    textarea,
    .jodit-wysiwyg {
        background: rgb(248, 248, 249, 0.6472) !important;
    }
}

.bullet-point.re-focus-item {
    background-color: rgba(248, 248, 249);

    input,
    textarea,
    .jodit-wysiwyg {
        background: transparent !important;
    }
}

@-webkit-keyframes soft-pulse {
    0% {
        background-color: inherit;
    }

    30% {
        background-color: rgb(56, 74, 215, 0.2427);
    }

    50% {
        background-color: inherit;
    }

    70% {
        background-color: rgb(56, 74, 215, 0.2427);
    }
}

@keyframes soft-pulse {
    0% {
        background-color: inherit;
    }

    30% {
        background-color: rgb(56, 74, 215, 0.2427);
    }

    50% {
        background-color: inherit;
    }

    75% {
        background-color: rgb(56, 74, 215, 0.2427);
    }
}

.tailor-resume-payment-screen {
    width: 1291px;
    max-width: calc(100vw - 48px);
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px;
    background: #F7F7F7;
    position: relative;

    .tailor-resume-payment-logo-bg {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
    }

    .tr-payment-top {
        display: flex;
        flex-direction: column;
        gap: 16px;
        z-index: 1;

        .trp-payment-msg {
            font-size: 15px;
            font-weight: 500;
            line-height: 100%;
            color: #FF3333;
            margin-bottom: 0;
        }

        .trp-header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 12px;

            .trp-header-top {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .trp-flash-icon {
                height: 32px;
                width: 32px;
                background: white;
                border: 1px solid #ECECEC;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                flex-shrink: 0;
            }

            h2 {
                font-size: 20px;
                font-weight: 700;
                line-height: 1.214;
                margin: 0;
            }

            p {
                font-size: 15px;
                font-weight: 500;
                line-height: 1.618;
                color: var(--text-gray);
                margin-bottom: 0;
            }
        }

        .trp-what-includes {
            display: flex;
            flex-direction: column;
            gap: 8px;

            h3 {
                font-size: 14px;
                font-weight: 600;
                line-height: 100%;
                text-transform: capitalize;
                color: #3a6c46;
                margin-bottom: 3px;
            }

            ul {
                display: flex;
                flex-direction: column;
                gap: 16px;

                li {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1.618;
                    color: #000;
                    display: flex;
                    align-items: flex-start;
                    gap: 8px;

                    svg {
                        min-width: 14px;
                    }

                    .icon{
                        width: 32px;
                        height: 32px;
                        padding: 4px;
                        border-radius: 8px;
                        margin-top: -4px;

                        svg{
                            min-width: 24px;
                            width: 24px;
                            height: 24px;
                        }

                        &.blue-doc{
                            background: #dbeafe;
                            svg *{
                                stroke: #2a66ec;
                            }
                        }
                        &.green-search{
                            background: #d1fae6;
                            svg *{
                                stroke: #069668;
                            }
                        }
                        &.yellow-chrome{
                            background: #FFF5C7;
                            svg *{
                                stroke: #D97707;
                            }
                        }
                    }
                }
            }

            span.concern {
                font-size: 11px;
                font-weight: 500;
                line-height: 1.618;
                color: var(--text-gray);
                margin-top: 12px;
                display: block;
                text-align: left;
                background: #f1f5f9;
                padding: 12px;
                border-radius: 8px;
                border-left: 2px solid #85a5f3;
                width: 100%;
                box-sizing: border-box;
            }
        }
    }

    .mobile-note-for-edits {
        display: none;
    }

    .tr-payment-bottom {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .tr-pb-title {
            h2 {
                font-size: 20px;
                font-weight: 500;
                line-height: 100%;
                margin-bottom: 10px;
            }

            .plan-expiry-info {
                font-size: 11px;
                line-height: 100%;
                letter-spacing: -0.2px;
                font-weight: 600;
                color: #867FB9;
                margin-top: 2px;
            }
        }

        .trp-plans {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            position: relative;
            width: 100%;

            .trp-plan {
                width: 100%;
                border: 1px solid #DEE1E7;
                border-radius: 16px;
                background: #FBFBFB;
                transition: all 0.3s ease;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    border-color: #C5CBD3;
                }

                .trp-plan-content {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 16px;
                    padding: 12px 20px;
                }

                .trp-plan-left {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 20px;
                    min-width: 245px;
                }
                .trp-plan-right {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    flex: 1;
                    gap: 20px;
                }
                .plan-price-description.bestFor {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1.214;
                    color: var(--text-gray);
                }
                .recommended-badge{
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 1.214;
                    color: #384ad7;
                }

                .plan-name {
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1.3;
                    color: #404040;
                    min-width: 106px;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    gap: 6px;

                    .recommended-badge {
                        font-size: 10px;
                        font-weight: 600;
                        line-height: 100%;
                        color: #2835D1;
                        background: rgba(40, 53, 209, 0.15);
                        padding: 2px 6px;
                        border-radius: 4px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }
                }

                .plan-price {
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 1.4;
                    color: var(--text-gray);
                    position: relative;
                    flex: 1;
                    min-width: 0;

                    b {
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 1.2;
                        color: #404040;
                        margin-right: 4px;
                    }

                    &:has(.plan-price-description) {
                        margin-bottom: 15px;
                    }

                    .plan-price-description {
                        position: absolute;
                        top: calc(100% + 4px);
                        left: 0;
                        font-size: 0.75rem;
                        line-height: 1.214;
                        font-weight: 500;
                        color: var(--secondary-blue);
                        white-space: nowrap;
                    }
                }

                .trp-plan-btn {
                    font-size: 13px;
                    font-weight: 700;
                    line-height: 1.214;
                    text-transform: uppercase;
                    color: var(--white);
                    background: #404040;
                    border: 1px solid #404040;
                    padding: 10px 24px;
                    min-width: 216px;
                    border-radius: 8px;
                    transition: all 0.2s ease;
                    flex-shrink: 0;
                    cursor: pointer;

                    &:hover {
                        background: #2d2d2d;
                        border-color: #2d2d2d;
                        transform: scale(1.02);
                    }

                    &:active {
                        transform: scale(0.98);
                    }
                }

                &.pro {
                    background: var(--white);
                    padding: 0;
                    box-sizing: border-box;
                    position: relative;
                    border-radius: 16px;
                    border: 2px solid transparent;
                    background-image: linear-gradient(white, white), linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                    background-origin: border-box;
                    background-clip: padding-box, border-box;
                    width: 100%;
                    margin-block: 0;
                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

                    &::before{
                        content: 'BEST VALUE';
                        font-size: 10px;
                        font-weight: 600;
                        line-height: 1;
                        color: #FFF;
                        background: #384ad7;
                        padding: 4px 8px;
                        border-radius: 24px;
                        text-transform: uppercase;
                        position: absolute;
                        top: -12px;
                        right: 24px;
                    }

                    &:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
                    }

                    .trp-plan-content {
                        padding: 22px 20px;
                    }

                    .plan-name {
                        min-width: 106px;

                        .recommended-badge {
                            font-size: 10px;
                            font-weight: 600;
                            line-height: 100%;
                            color: #2835D1;
                            background: rgba(40, 53, 209, 0.15);
                            padding: 3px 8px;
                            border-radius: 4px;
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                        }
                    }

                    .trp-plan-btn {
                        background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                        border: none;
                        padding: 10px 32px;
                        min-width: 216px;
                        box-shadow: 0 2px 8px rgba(152, 16, 250, 0.3);

                        &:hover {
                            background: linear-gradient(135deg, #8A0EE8 0%, #0F52E8 50%, #4528E0 100%);
                            box-shadow: 0 4px 12px rgba(152, 16, 250, 0.4);
                            transform: scale(1.02);
                        }
                    }
                }
            }
        }

        .underlinedBtn.skip-tailor-btn {
            display: none;
            gap: 0.5rem;
            align-items: center;
            font-size: 14px;
            line-height: 1.214;
            text-decoration: underline;
            margin-top: 20px;
            align-self: center;

            @media screen and (max-width: 767px) {
                display: flex;
            }
        }
    }

    @media screen and (max-width:767px) {
        width: 100vw !important;
        max-width: 100vw;
        overflow-y: auto !important;
        max-height: calc(100vh - 64px);
        padding: 44px 16px;
        border-radius: 8px 8px 0 0;
        height: inherit;
        min-height: inherit;

        .tr-payment-top {
            .trp-header {
                .trp-header-top {
                    .trp-flash-icon {
                        display: none;
                    }
                }

                p {
                    font-size: 12px;
                    margin-top: -8px;
                }
            }

            .trp-what-includes {
                h3 {
                    font-size: 12px;
                }
            }
        }

        .mobile-note-for-edits {
            margin: -24px 0 -8px;
            border-radius: 8px;
            background: #FEE9DC;
            display: flex;
            padding: 4px 6px;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 8px;

            span {
                font-size: 11px;
                line-height: 1.214;
                font-weight: 500;
            }

            strong {
                font-weight: 700;
            }

            @media screen and (max-height: 670px) {
                margin: -24px 0 -16px;
            }
        }

        .tr-payment-bottom {
            gap: 16px;

            @media screen and (max-height: 670px) {
                gap: 8px;
            }

            h2 {
                font-size: 16px !important;
                margin-bottom: 0 !important;
            }

            .trp-plans {
                gap: 10px;
                margin-top: -12px;

                .trp-plan {
                    width: calc(100% - 12px);

                    .trp-plan-content {
                        flex-direction: column;
                        align-items: stretch;
                        gap: 12px;
                        padding: 14px 16px;
                    }

                    .trp-plan-left {
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        gap: 8px;
                        width: 100%;
                    }
                    .trp-plan-right{
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-start;
                        gap: 8px;
                        width: 100%;
                    }

                    .plan-name {
                        min-width: unset;
                        font-size: 14px;
                    }

                    .plan-price {
                        min-width: unset;
                        font-size: 12px;
                        flex: unset;

                        b {
                            font-size: 15px;
                            line-height: 1.3;
                        }
                    }

                    .trp-plan-btn {
                        width: 100%;
                        padding: 10px 16px;
                        font-size: 12px;
                        min-width: unset;
                    }

                    &.pro {
                        .trp-plan-content {
                            padding: 16px;
                        }

                        .plan-name {
                            min-width: unset;
                        }

                        .trp-plan-btn {
                            padding: 10px 20px;
                            font-size: 12px;
                            width: 100%;
                        }
                    }

                    @media screen and (max-width: 480px) {
                        .trp-plan-content {
                            padding: 12px;
                        }

                        .plan-name {
                            font-size: 13px;
                        }

                        .plan-price {
                            font-size: 11px;

                            b {
                                font-size: 14px;
                            }
                        }

                        .trp-plan-btn {
                            padding: 9px 14px;
                            font-size: 11px;
                        }

                        &.pro {
                            .trp-plan-content {
                                padding: 14px 12px;
                            }

                            .trp-plan-btn {
                                padding: 9px 18px;
                                font-size: 11px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.payment-screen-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px 32px;
    border-top: 1px solid rgba(186, 186, 186, 0.20);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border-radius: 16px 16px 0 0;

    @media screen and (max-width: 767px) {
        display: none;
    }
}

.modal-content:has(.payment-screen-footer) .tailor-resume-payment-screen {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
}

#resume-previewer.hidden {
    visibility: hidden;
    position: fixed;
    z-index: -100;
    bottom: calc(100% + 120px);
    left: calc(100% + 120px);
}

.confirmRegenerateResumeModal .modalAction {
    flex-wrap: wrap;
    gap: 16px 24px;

    .btn {
        font-size: 0.875rem;
        line-height: 1.214;
        font-weight: 700;

        &.modalBackBtn {
            margin: 0;
        }
    }

    .btn.gradientBtn {
        background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
        color: var(--white);
        padding: 12px 24px;
    }
}

.jodit-popup-container {
    .jodit-popup {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.12),
            0 2px 6px rgba(0, 0, 0, 0.08) !important;
        border: none !important;

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

    .jodit-toolbar-editor-collection {
        flex-direction: row;
        border-radius: 8px !important;
    }

    .jodit-toolbar-button {
        display: none;

        &.jodit-toolbar-button_bold {
            display: block;
        }

        &.jodit-toolbar-button_italic {
            display: block;
        }

        &.jodit-toolbar-button_underline {
            display: block;
        }

        &.jodit-toolbar-button_link {
            display: block;
        }
    }

    .jodit-ui-input__wrapper {
        border-radius: 0.5rem;

        .jodit-ui-input__input {
            border-radius: inherit;
        }
    }

    .jodit-ui-checkbox__input {
        all: revert;
    }

    .jodit-ui-block__className {
        display: none;
    }
}

.commonModal.resume-editor-modal .modal-dialog .modal-content:has(.tp-loader-screen) {
    width: 1291px;
    max-width: calc(100vw - 48px);
    background: var(--white);

    @media screen and (max-width: 767px) {
        width: 100vw;
        max-width: 100vw;
    }

    .modalCloseBtn {
        width: 1.5rem;
        height: 1.5rem;
        top: 1.5rem;
        right: 1.5rem;
        border-radius: 50%;
    }

    .modal-body {
        padding: 0;

        @media screen and (max-width: 767px) {
            min-height: calc(100vh - 64px);
        }

        .head {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 2.25rem 2rem 1rem;
            border-radius: 8px 0 8px 8px;
            outline: 0.75px solid rgba(186, 186, 186, 0.20);
            gap: 0.75rem;

            h4 {
                font-size: 1.125rem;
                font-weight: 500;
            }

            .head-company-name {
                font-size: 12px;
                line-height: 100%;
                font-weight: 600;
                letter-spacing: -3.5%;
                color: #6B6B6B;
            }

            .head-plan-validity {
                padding: 4px 8px;
                border-radius: 24px;
                background: linear-gradient(91.02deg, #C9F962 0.87%, #CFFAFF 131.82%);
                font-size: 10px;
                line-height: 100%;
                font-weight: 600;
            }

            @media screen and (max-width: 767px) {
                padding: 2.25rem 16px 1rem;
                border-radius: 8px;
            }
        }
    }
}

.tailor-payment-loader-modal {
    .head h4 {
        font-size: 1.125rem;
        line-height: 100%;
    }

    .tp-loader-screen {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        gap: 2rem;
        height: 100vh;

        .tpl-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;

            .tpl-arc-loader {
                width: 6.25rem;
                height: 6.25rem;
                border-radius: 50%;

                background: conic-gradient(rgba(207, 212, 220, 0) 0deg,
                        rgba(207, 212, 220, 0.3) 10deg,
                        rgba(207, 212, 220, 0.7) 25deg,
                        rgba(207, 212, 220, 0.7) 50deg,
                        rgba(207, 212, 220, 0.3) 65deg,
                        rgba(207, 212, 220, 0) 75deg,

                        transparent 75deg 180deg,

                        rgba(207, 212, 220, 0) 180deg,
                        rgba(207, 212, 220, 0.25) 190deg,
                        rgba(207, 212, 220, 0.5) 205deg,
                        rgba(207, 212, 220, 0.5) 230deg,
                        rgba(207, 212, 220, 0.25) 245deg,
                        rgba(207, 212, 220, 0) 255deg,

                        transparent 255deg 360deg);

                /* Make it thin like stroke */
                -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black 0);
                mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black 0);

                animation: rotate 1.4s linear infinite;
            }

            .tpl-loader-text {
                font-size: 1rem;
                font-weight: 500;
                line-height: 100%;
                letter-spacing: -3.5%;
                color: #617F74;
            }
        }

        .tp-download-extension-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
            padding: 1rem 3.5rem;
            width: 100%;
            border: 1px solid;
            border-image-source: linear-gradient(118.92deg, #EFEEFF 26.18%, rgba(255, 234, 222, 0.94) 96.85%);
            background: linear-gradient(118.92deg, #EFEEFF 26.18%, rgba(255, 234, 222, 0.94) 96.85%);
            border-radius: 12px;

            .tpde-tc-icon {
                height: 2.25rem;
                width: 2rem;
                object-fit: contain;
            }

            .tpde-top-text {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                .tpde-tt-title {
                    font-size: 1.25rem;
                    font-weight: 700;
                    line-height: 100%;
                    margin-bottom: 0;
                }

                .tpde-tt-subtitle {
                    font-size: 0.875rem;
                    font-weight: 400;
                    line-height: 100%;
                    letter-spacing: -3.5%;
                    color: #231F20;
                }
            }

            .tpde-points {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.25rem;

                .tpde-point {
                    display: flex;
                    align-items: flex-start;
                    gap: 0.25rem;
                    font-size: 0.75rem;
                    line-height: 100%;
                    color: #6B6B6B;
                }
            }

            .tpde-download-action {
                .tpde-download-btn {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.625rem 1.5rem;
                    background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                    color: var(--white);
                    font-size: 0.875rem;
                    line-height: 100%;
                }

                .tpde-download-note {
                    font-size: 0.625rem;
                    font-weight: 400;
                    line-height: 100%;
                    color: #6B6B6B;
                    margin-bottom: 0;
                    margin-top: 0.25rem;
                }
            }
        }
    }

    @media screen and (max-width: 580px) {
        .head h4 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
            text-align: left;
        }

        .tp-loader-screen .tp-download-extension-content {
            padding: 8px 16px;
        }
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* Selected Resume education tooltip with CTA */
.ro-resume-content {
    position: relative;
}

.selected-resume-education-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: var(--tooltip-bg);
    line-height: 1;
}

.selected-resume-education-trigger:hover {
    color: var(--tooltip-bg);
    opacity: 0.85;
}

.selected-resume-education-tooltip {
    position: absolute;
    right: 20px;
    bottom: calc(100% - 32px);
    z-index: 1001;
    width: 380px;
    padding: 10px 14px;
    background: var(--tooltip-bg);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 2px rgba(165, 62, 239, 0.35);

    @media screen and (max-width: 1220px) {
        width: 280px;
    }
    @media screen and (max-width: 767px) {
        right: 4px;
        bottom: calc(100% - 4px);
        width: 280px;
    }
}

.selected-resume-education-tooltip-text {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;


    @media screen and (max-width: 1220px) {
        font-size: 11px;
    }

    @media screen and (max-width: 767px) {
        font-size: 10px;
    }
}

.selected-resume-education-tooltip-cta {
    display: block;
    margin-left: auto;
    padding: 6px 36px;
    background: #fff;
    color: #231F20;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
}

/* .selected-resume-education-tooltip-cta:hover {
    background: rgba(255, 255, 255, 0.7);
} */

.selected-resume-education-tooltip-arrow {
    position: absolute;
    /* bottom: 24px;
    right: -12px; */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--tooltip-bg);
    /* transform: rotate(270deg); */
    bottom: -7px;
    right: calc(100% - 32px);

    @media screen and (max-width: 767px) {
        bottom: -7px;
        right: calc(100% - 32px);
        transform: unset;
    }
}