/* 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);
}

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

/* 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; */

    .commonModal.resume-editor-modal {
        margin: 0 0 0 auto !important;
        width: 1175px;
        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;
            min-height: unset;
            margin: auto 0 0 0 !important;
            border-radius: 16px 16px 0 0 !important;
        }
    }

}

.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) {
        min-height: calc(100vh - 64px) !important;
        max-height: calc(100vh - 64px) !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;

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

            .tailored-resume-drawer-container {
                padding-bottom: 74px;
                margin: 0;
                width: 100%;
                gap: 0;

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

                    .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;
                        }
                    }
                }

                .tr-drawer-content {
                    height: calc(100vh - 202px) !important;
                    padding: 16px;
                    border: 2px solid red;

                    @media screen and (max-width: 542px) {
                        height: calc(100vh - 218px) !important;
                    }

                    &:has(.resume-editor-canvas) {
                        height: calc(100vh - 184px) !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,
                                .ro-resume-content {
                                    background: transparent !important;
                                    padding: 0;
                                    border-radius: 0;
                                }

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

                                .ro-resume-content {
                                    padding-top: 12px;
                                    margin-top: 12px;
                                    border-top: 0.5px solid #B1B1B1;

                                    @media screen and (max-width:562px) {
                                        flex-direction: column-reverse;
                                        align-items: flex-start;
                                        gap: 4px;

                                        .ro-resume-right .resume-dropdown {
                                            left: 0;
                                        }
                                    }
                                }

                                &.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;

                        .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-tabs {
                            display: flex;
                            align-items: flex-end;
                            width: 100%;
                            gap: 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: 400;
                                color: var(--text-gray);
                                cursor: pointer;
                                transition: all .3s ease;
                                text-align: left;
                                position: relative;
                                padding-bottom: 4px;

                                &::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;

                                    .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;
                        }
                    }
                }

                .tr-drawer-actions {
                    padding: 16px;
                    gap: 16px;
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    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;
            }
        }
    }
}

.tailored-resume-drawer-container {
    width: 1175px;
    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: 100%;
                letter-spacing: 0%;
                color: var(--primary-black);
            }

            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;
                }
            }
        }

        .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;
            }
        }

    }

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

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

        .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%;

            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;
                    }
                }

                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;
                        }
                    }
                }
            }
        }

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

            .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;

                            .ro-resume-left {
                                display: flex;
                                align-items: center;
                                gap: 8px;

                                @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;
                                    flex-direction: column;
                                    gap: 4px;
                                    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: 100%;
                                        letter-spacing: 0%;
                                        color: var(--primary-black);
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        max-width: 324px;

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

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

                            .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);

                                    span {
                                        font-size: 13px;
                                        font-weight: 500;
                                        line-height: 100%;
                                        letter-spacing: 0%;
                                        color: var(--primary-black);
                                        padding: 8px;
                                        cursor: pointer;
                                        border-radius: 4px;

                                        &: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);
                            }
                        }
                    }

                }
            }
        }

        .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-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);
                            background: #F9F8F4;
                            border-radius: 8px;

                            &.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;

                                .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%;

        .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;

            .transformLoader {

                h5,
                .detesText {
                    display: none;
                }

                .content {
                    margin-top: 0;
                }
            }

            @media screen and (max-width: 576px) {
                zoom: 0.6;

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

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

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

        .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: 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;

                        }
                    }
                }
            }
        }
    }
}

.resume-editor {
    /* width: 1175px; */
    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;
                                    }

                                    .bullet-point {
                                        position: relative;

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

                                        input {
                                            padding-left: 20px;

                                        }

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

                                        .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;

                        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;

                    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 img {
                        border: 4px solid var(--accent-color-light) !important;
                    }
                }

            }

            .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-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;
                }
            }
        }
    }

    .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 {
    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: shimmer 1.5s infinite;
}

@keyframes 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;
            }
        }
    }
}