/*   Theme default css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* root file  */
:root {
    --font-Inter: "Inter";

    --stroke-default: 1px solid #e7e7e7;
    --border-color: #e7e7e7;
    --border-primary: rgba(0, 112, 224, 0.4);
    --stroke-primary: #cbe5ff;
    --stroke-secondary-2: #b9c2e2;
    --stroke-warning-2: #ffbb7c;
    --stroke-primary-default: #0070e0;
    --stroke-danger-default: #d92653;
    --stroke-danger-2: #ffa9bf;
    --stroke-success-default: #4e7c1d;
    --stroke-secondary-default: #333d60;
    --stroke-transparent: #00000000;
    --stroke-warning-1: #d3681b;
    --stroke-dark-blue: #0354a5;
    --stroke-project-blue: #0070E1;

    --Drop-Shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    --Drop-Shadow-Up: 0px -4px 4px 0px rgba(0, 0, 0, 0.05);
    --box-shadow-2: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;

    --text-main: #121A3C;
    --text-white: #ffffff;
    --text-muted: #72727e;
    --text-placeholder: #9999a1;
    --text-warning-1: #b36119;
    --text-warning-default: #d3681b;
    --text-danger: #d92653;
    --text-primary: #0070e0;
    --text-gray-1: #545461;
    --text-disabled: #bfbfc7;
    --text-success-default: #4e7c1d;

    --bg-default-1: #f9f9fa;
    --bg-primary-default: #0070e0;
    --bg-primary: #f0f8ff;
    --bg-secondary-2: #edf1ff;
    --bg-secondary-default: #333d60;
    --bg-warning-2: #fff7ed;
    --bg-default: #fff;
    --bg-danger-2: #fee9ee;
    --bg-success-default: #4e7c1d;
    --bg-primary-2: #F3F7FB;
    --bg-primary-3: #f4f7f9;
    --bg-primary-4: #F9F9FA;
    --bg-dark-grey: #F4F4F5;

    --red-300: #f37f9c;
    --orange-300: #ffa158;
    --orange-400: #ef8330;
    --orange-500: #d3681b;
    --blue-300: #7eb9f4;
    --green-300: #9cc96d;

    --border-radius-sm: 4px;

    --hover-bg: rgba(0, 94, 187, 0.05);
    --hover-bg-shadow: rgba(0, 0, 0, 0.03);
    --hover-primary: rgb(7, 89, 171);
    --hover-color: #0070DF;
}

[data-theme="dark"] {
    --stroke-default: 1px solid #1D1D1D;
    --border-color: #e7e7e7;
    --border-primary: rgba(0, 112, 224, 0.4);
    --stroke-primary: #cbe5ff;
    --stroke-secondary-2: #b9c2e2;
    --stroke-warning-2: #ffbb7c;
    --stroke-primary-default: #0070e0;
    --stroke-danger-default: #d92653;
    --stroke-danger-2: #ffa9bf;
    --stroke-success-default: #4e7c1d;
    --stroke-secondary-default: #333d60;
    --stroke-transparent: #00000000;
    --stroke-warning-1: #d3681b;
    --stroke-dark-blue: #0354a5;

    --Drop-Shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    --Drop-Shadow-Up: 0px -4px 4px 0px rgba(0, 0, 0, 0.05);

    --text-main: #ffffff;
    --text-white: #ffffff;
    --text-muted: #c9c9c9;
    --text-placeholder: #9999a1;
    --text-warning-1: #b36119;
    --text-warning-default: #d3681b;
    --text-danger: #d92653;
    --text-primary: #0070e0;
    --text-gray-1: #545461;
    --text-disabled: #bfbfc7;
    --text-success-default: #4e7c1d;

    --bg-default-1: #2B2B2B;
    --bg-primary-default: #0070e0;
    --bg-primary: #02111d;
    --bg-secondary-2: #0a1c5c;
    --bg-secondary-default: #333d60;
    --bg-warning-2: #fff7ed;
    --bg-default: #000000;
    --bg-danger-2: #fee9ee;
    --bg-success-default: #4e7c1d;
    --bg-primary-2: #F3F7FB;
    --bg-primary-3: #f4f7f9;
    --bg-primary-4: #202020;

    --red-300: #f37f9c;
    --orange-300: #ffa158;
    --orange-400: #ef8330;
    --orange-500: #d3681b;
    --blue-300: #7eb9f4;
    --green-300: #9cc96d;

    --border-radius-sm: 4px;

    --hover-bg: #323232;
    --hover-bg-shadow: #323232;
    --hover-primary: #323232;
}

/* custom css start  */

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    margin: 0 30px !important;
    padding: 0;
    padding-bottom: 135px !important;
    color: var(--text-main);
    background-color: var(--bg-primary-4) !important;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-primary-4) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

a:focus,
button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: medium none;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

b,
strong {
    /* font-weight: 400; */
}

label {
    cursor: pointer;
}

.container {
    max-width: 1816px;
    width: 100%;
    margin-inline: auto;
    /* display: grid; */
}

/****** resuable components css ******/

.primary_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 16px;
    font-family: var(--font-Inter);
    border: 1px solid transparent;
    font-weight: 400;
    font-style: normal;
    height: 40px;
    border-radius: 6px;
    background: var(--bg-default-1);
    transition: 0.2s;
}

.primary_btn.btn_default {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.primary_btn.btn_default:hover {
    background: #0354a5;
}

.primary_btn.primary_btn_small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 6px;
    height: 32px;
}

li .primary_btn:not(:last-child) {
    margin-bottom: 4px;
}

input {
    color: var(--text-main);
    font-family: var(--font-Inter);
    font-weight: 400;
    font-size: 16px;
    border-radius: 4px;
    border: var(--stroke-default);
    background: var(--text-white);
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    transition: 0.2s;
}

input:focus {
    border: 1px solid var(--bg-primary-default);
}

input[disabled],
input[readonly] {
    color: var(--text-disabled);
}

input[disabled]:hover,
input[readonly]:hover {
    border: 1px solid var(--border-color);
}

input.with_content:not(:placeholder-shown) {
    border-color: var(--bg-primary-default);
    background: var(--bg-primary-default);
    color: var(--text-white);
    text-align: center;
    font-weight: 700;
}

input[disabled]::selection,
input[readonly]::selection {
    background-color: transparent;
}

input::placeholder {
    color: var(--text-placeholder);
    font-family: var(--font-Inter);
    font-weight: 400;
    font-size: 14px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    color: var(--text-main);
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: var(--bg-default);
    min-height: 38px;
}

.select:hover {
    color: var(--text-primary);
}

select option {
    background-color: var(--bg-default);
    color: var(--text-main);
}

.default_wrapper,
.danger_wrapper,
.error_wrapper {
    display: flex;
    min-height: 32px;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    color: var(--bg-default);
}

.default_wrapper i {
    color: var(--text-muted);
}

.danger_wrapper i,
.error_wrapper i {
    font-size: 12px;
    font-weight: 900;
    color: var(--bg-default);
}

.default_wrapper {
    background: var(--bg-default-1);
}

.danger_wrapper {
    background: var(--text-warning-default);
}

.error_wrapper {
    background: var(--text-danger);
}

.select_area {
    border: 1px solid var(--border-color);
    display: inline-flex;
    gap: 8px;
    background: var(--text-white);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    align-items: center;
}

.toggle_area_blk {
    display: inline-block;
    padding-bottom: 16px;
}


.toggle_on_btn {
    display: none;
}

/****** resuable components css end******/

/* <<<<<<<<<<<<<>>>>>>>>>>>>>>> */
/* NAVBAR start  */
/* <<<<<<<<<<<<<>>>>>>>>>>>>>>> */

header {
    box-shadow: var(--Drop-Shadow);
    background: var(--bg-default);
    margin: 0 -30px;
    position: relative;
    z-index: 11;
}

footer {
    box-shadow: var(--Drop-Shadow-Up);
    background: var(--bg-default);
    display: none;
}

.navbar_left {
    display: flex;
    align-items: center;
}

.nav_thumb {
    padding-right: 10px;
}

.navbar_left ul {
    display: flex;
    align-items: center;
}

.navbar_left ul li {
    /* height: 48px; */
    /* margin-right: 10px;
    margin-left: 10px; */
    display: flex;
}

.navbar_left ul li:last-child {
    border-right: none;
}

.navbar_left ul li a {
    /* padding: 9px 24px; */
    font-weight: 400;
    font-size: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.navbar_right {
    display: flex;
    align-items: center;
}

.navbar_right .nav_notify {
    padding: 9px 24px;
}

.navbar_right .nav_user {
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav_user_active {
    position: relative;
}

.nav_user span {
    font-weight: 400;
    font-size: 14px;
}

.nav_user_greenCircle {
    position: absolute;
    bottom: -3px;
    right: -4px;
}

.navbar_right .menu_btn {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    gap: 12px !important;
    color: var(--text-main);
}

.navbar_right .menu_btn p {
    font-weight: 400;
    font-size: 14px;
}

/* mobile navbar  */
.mobile_nav {
    position: relative;
}

.mobile_nav ul {
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    min-width: 220px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    box-shadow: var(--Drop-Shadow);
    z-index: 10;
}

.mobile_nav ul li {
    transition: all 0.2s ease-in-out;
}

.mobile_nav ul li:hover {
    background: rgba(0, 0, 0, 0.04);
}

.mobile_nav ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 4px;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .navbar {
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .nav_thumb {
        border-right: unset;
    }

    .navbar_right .nav_notify {
        padding: 7px 9px;
    }

    .nav_user_active {
        scale: 0.6;
    }

    .navbar_right .nav_user {
        padding-left: 6px;
        padding-right: 10px;
    }

    .navbar_right>*:first-child {
        border-left: unset;
    }

    .n_count {
        font-size: 12px;
        font-weight: 700;
        position: relative;
        top: -2px;
    }
}

/* <<<<<<<<<<<<<>>>>>>>>>>>>>>> */
/* SURVEY ALL CONTENT start  */
/* <<<<<<<<<<<<<>>>>>>>>>>>>>>> */

.main_area {
    max-width: 1825px;
    width: 100%;
    margin-inline: auto;
    margin-top: 13px;
    margin-bottom: 64px;
}

.side_space {
    margin: 0 10px;
    border-radius: 6px;
    border: var(--stroke-default);
    background: #ffffff;
}

.survey_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 24px;
}

.survey_header_title {
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
}

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

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

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

.primary_btn.btn_addSurvey {
    background: var(--bg-default-1);
}

.primary_btn.btn_testSurvey {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.icon_blk {
    width: 48px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* cta addSurvey tooltip  */

.click_functionality {
    position: relative;
}

.cta_addSurvey_tooltip {
    width: 226px;
    border-radius: 4px;
    border: var(--stroke-default);
    background: var(--text-white);
    box-shadow: var(--Drop-Shadow);
    padding: 8px;
    position: absolute;
}

.cta_addSurvey_tooltip li {
    width: 100%;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.cta_addSurvey_tooltip li:active {
    border-color: var(--bg-primary-default);
}

.cta_addSurvey_tooltip li:hover {
    background: rgba(0, 94, 187, 0.05);
}

.cta_addSurvey_tooltip li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
}

.cta_addSurvey_tooltip li:last-child {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.cta_addSurvey_tooltip li:active:last-child {
    border-top: 1px solid var(--bg-primary-default);
}

.cta_addSurvey_tooltip li p {
    color: var(--text-main);
    font-family: var(--font-Inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .main_area {
        margin-bottom: 24px;
        margin-right: 10px;
    }

    .survey_header {
        flex-direction: column;
        justify-content: center;
        padding: 24px 0;
    }

    .survey_header_elements {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .survey_header_btns {
        width: 100%;
        flex-direction: column;
    }

    .click_functionality {
        width: 100%;
    }

    .primary_btn.btn_addSurvey,
    .primary_btn.btn_testSurvey {
        font-size: 14px;
        height: 40px;
        width: 100% !important;
    }

    .survey_offcanvas_btns {
        justify-content: space-between;
        width: 100%;
    }
}

/* <<<<<<<<<<<<<>>>>>>>>>>>>>>> */
/* survey_list_wrapper css start */
/* <<<<<<<<<<<<<>>>>>>>>>>>>>>> */
/* custom design */
.survey_tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 4px;
    flex-shrink: 0;
}

.survey_tooltip:hover {
    /* background: rgba(0, 0, 0, 0.04); */
    color: var(--text-primary);
}

.survey_question__blk .survey_tooltip:hover {
    background: none !important;
    color: var(--text-primary);
}

.survey_tooltip--grip {
    width: 38px;
    height: 32px;
}

.survey_tooltip--plus {
    width: 39px;
    height: 32px;
}

.survey_tooltip--split {
    width: 40px;
    height: 32px;
}

.survey_tooltip--Dots {
    width: 31px;
    height: 32px;
}

.survey_tooltip--edit {
    width: 40px;
    height: 32px;
}

.survey_tooltip--x {
    width: 32px;
    color: var(--text-placeholder);
}

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

/*-- content design start --*/

.survey_list_wrapper {
    /* padding: 0 24px; */
}

.survey_list_wrapper ul .survey_parent_li {
    padding: 16px 8px;
    border-top: var(--stroke-default);
    display: flex;
    /* align-items: center;
  justify-content: space-between; */
    flex-direction: column;
    gap: 10px;
}

.survey_list_wrapper ul .survey_parent_li:first-child {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.survey_list_wrapper ul .survey_parent_li:last-child {
    padding-left: 12px;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: var(--stroke-default);
}

/*-- question area css -- */
.survey_question__blk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.survey_question__blk>input {
    appearance: none;
    position: relative;
    max-width: 16px;
    width: 100%;
    padding: 0;
    height: 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.survey_question__blk>input:checked {
    border-color: var(--bg-primary-default);
}

.survey_question__blk>input:checked::after {
    opacity: 1;
}

.survey_question__blk>input::after {
    content: "";
    position: absolute;
    background: url("../img/thumb/check-solid.svg");
    background-repeat: no-repeat;
    background-size: 57%;
    background-position: center center;
    border-color: var(--bg-primary-default);
    width: 100%;
    height: 100%;
    opacity: 0;
}

.survey__question_area {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
}

.survey_question_text {
    font-size: 16px;
    color: var(--text-main);
    font-weight: 400;
    flex-shrink: 0;
}

.survey__answer_area {
    padding-left: 30px;
    display: none;
}

/* pill area  */
.survey_pill_area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.survey_pill {
    border-radius: 1000px;
    border: 1px solid var(--stroke-secondary-2);
    background: var(--bg-secondary-2);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    max-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pill_dropdown_wrapper {
    background: var(--bg-default);
    border-radius: 4px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    padding: 16px;
    width: 250px;
    position: absolute;
    top: 40px;
    z-index: 99;
}

.pdw_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

.line_shape {
    background: var(--border-color);
    width: 100%;
    height: 1px;
}

.pdw_header p {
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.pwd_body p {
    color: var(--text-muted);
    font-size: 12px;
    margin: 8px 0;
}

.pwd_body p:last-child {
    margin: 0;
}

.pwd_body p span {
    font-weight: 700;
    color: var(--text-main);
}

.pwd_body p input {
    font-size: 12px;
    padding: 8px 10px;
    font-weight: 700;
    color: var(--text-main);
    margin: 8px 0;
    width: 100%;
}

.pwd_body p input::placeholder {
    font-size: 12px;
    color: var(--text-main);
}

.pwd_body .select_area {
    width: 100%;
    height: 32px;
    padding: 0;
}

select.pwd_select {
    height: 32px;
    padding: 8px 10px;
    color: var(--text-main);
}

#time-range-select-in-list-view {
    padding: 8px 4px; 
    font-size: 14px;
    font-weight: 400;
}

.select_area span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    pointer-events: none;
}

.pwd_btn_blk {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}

.pwd_btn_blk .primary_btn {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.pwd_btn_blk .primary_btn_cancel {
    background: transparent;
    color: var(--text-main);
}

.pwd_btn_blk .primary_btn:hover {
    background: var(--hover-primary);
}

.pwd_btn_blk .primary_btn_cancel:hover {
    background: var(--hover-bg);
}

/* by default for pwd click function  */
.pill_select_open,
.pwd_btn_blk {
    display: none;
}

.fa-square-plus.active {
    display: none;
}

.fa-square-minus.active {
    display: none;
}

/*------ answer area css ------ */

.all_answer_blk {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.given_answer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    height: 40px;
    width: 100%;
}

.interlocked_quotas_root .given_answer {
    height: auto !important;
}

.given_answer.active {
    background: var(--bg-primary);
    border-color: var(--stroke-primary);
}

.answer_click_blk {
    cursor: pointer;
}

.ban_answer {
    color: var(--text-disabled);
}

.ban_answer,
.check_answer {
    font-size: 20px;
}

.check_answer {
    color: var(--bg-primary-default);
}

.answer_single_child {
    min-width: 0;
}

.optional_answer {
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 300px;
}

.optional_answer.active {
    color: var(--text-primary);
}

.modify_answer {
    display: flex;
    align-items: center;
}

.modify_answer .survey_tooltip--edit {
    width: 28px;
    height: 32px;
}

.modify_answer .survey_tooltip-trash {
    width: 28px;
    height: 32px;
}

.edited_version_answer {
    width: 175px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 4px;
    justify-content: space-between;
    border-radius: 6px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    line-height: 0;
}

.edited_version_answer input {
    font-size: 12px;
    max-width: 100px;
    padding: 4px 8px;
    font-weight: 700;
}

.edited_version_answer input::placeholder {
    font-size: 12px;
}

.edit_answer.active,
.delete_answer.active {
    color: var(--bg-primary-default);
}

.survey_tooltip--yes {
    width: 27px;
    height: 32px;
    cursor: pointer;
    color: var(--text-success-default);
}

.survey_tooltip--no {
    width: 27px;
    height: 32px;
    color: var(--text-placeholder);
}

.edited_click_blk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.permanently_delete_answer {
    width: 175px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    padding-left: 10px;
    gap: 4px;
    justify-content: space-between;
    border-radius: 6px;
    background: var(--bg-danger-2);
    border: 1px solid var(--stroke-danger-2);
}

.delete_click_blk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.yes_delete_answer {
    color: var(--text-danger);
}

.permanently_delete_answer .pdt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-danger);
}

/* outside bottom area -footer  */
.survey_footer_area {
    padding: 16px 0 24px 24px;
}

/*--- survey_tooltip--Dots click events ---*/

.survey_Dots_event {
    position: relative;
    display: inline-block;
}

.survey_Dots_event ul {
    position: absolute;
    padding: 8px;
    width: auto;
    right: 0;
    background: var(--text-white);
    border-radius: 4px;
    border: var(--stroke-default);
    background: var(--text-white);
    box-shadow: var(--box-shadow-2);
    z-index: 10;
}

.survey_Dots_event ul li {
    transition: all 0.3s ease-in-out;
}

.survey_Dots_event ul:not(.change_status_ul) li:hover {
    background: var(--bg-primary-default);
    color: var(--text-white) !important;
    border-radius: 4px;
}

.survey_Dots_event ul:not(.change_status_ul) li:hover span {
    color: var(--text-white) !important;
}

.survey_Dots_event ul:not(.change_status_ul) li:hover p {
    color: var(--text-white) !important;
}

.survey_Dots_event ul li a {
    /* display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px; */
    width: 100%;
    margin-right: 36px;
}

.survey_Dots_event ul li a .link_text {
    color: var(--text-main);
    font-family: var(--font-Inter);
    font-size: 14px;
    font-weight: 400;
}

.survey_Dots_event ul.submenu {
    right: 200px;
    top: 130px;
}

.survey_Dots_event ul.submenu.secondary {
    top: 211px;
    right: 200px;
    width: 150px;
}

/* ---- offcanvas area start-- */

.edit_question_offcanvas {
    position: fixed;
    background: #fff;
    height: 100%;
    top: 0;
    right: -100%;
    z-index: 1000;
    max-width: 960px;
    width: 100%;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    box-shadow: var(--Drop-Shadow);
}

.edit_question_offcanvas.active {
    right: 0;
    visibility: visible;
    opacity: 1;
}

.edit_question_offcanvas_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 99;
}

.edit_question_offcanvas_overlay.active {
    visibility: visible;
    opacity: 1;
}

/* ---- history offcanvas area start-- */

/* ---- offcanvas area start-- */

.offcanvas_area {
    position: fixed;
    background: #fff;
    height: 100%;
    top: 0;
    right: -100%;
    max-width: 912px;
    width: 100%;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    box-shadow: var(--Drop-Shadow);
}

.offcanvas_area.active {
    right: 0;
    visibility: visible;
    opacity: 1;
}

.offcanvas_area.in_front {
    z-index: 1040;
}

.offcanvas_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.offcanvas_overlay.active {
    visibility: visible;
    opacity: 1;
}

.offcanvas_overlay.in_front {
    z-index: 1035;
}

/*--- history offcanavs design --- */

.Common_header_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px;
}

.Common_header_wrapper a {
    font-size: 18px;
    font-weight: 700;
}

#select-audience-menu-div a,
.feasibility_audience_list a {
    font-size: initial;
    font-weight: initial;
}

.history_offcanvas {
    position: fixed;
    background: #fff;
    height: 100%;
    top: 0;
    right: -100%;
    z-index: 999;
    max-width: 912px;
    width: 100%;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    box-shadow: var(--Drop-Shadow);
    overflow-y: auto;
}

.history_offcanvas::-webkit-scrollbar {
    display: none;
}

.history_offcanvas.active {
    right: 0;
    visibility: visible;
    opacity: 1;
}

.Common_header_area {
    margin-top: 20px;
    margin-bottom: 24px;
}

.survey_history_list_area_header_text {
    font-weight: 700;
    margin-bottom: 12px;
}

.single_history_list_wrapper {
    padding: 8px 24px;
    background: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--Drop-Shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: 0.3s ease-in-out;
    border: 1px solid transparent;
    border-radius: 6px;
}

.single_history_list_wrapper:last-child {
    margin-bottom: 0;
}

.single_history_list_wrapper:hover {
    border: 1px solid var(--stroke-primary);
}

.single_history_list_wrapper:hover>div {
    color: var(--bg-primary-default);
}

.single_history_list_wrapper:hover .restore_survey {
    visibility: visible;
    opacity: 1;
}

.restore_survey {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 12px;
    background: var(--bg-primary-default);
    color: var(--text-white);
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.survey_history_blk {
    border-radius: 6px;
    background: var(--bg-default-1);
    padding: 16px;
    min-height: 700px;
}

.custom_cancel_btn {
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    transition: all 0.2s ease-in;
    font-weight: bold;
    border-radius: 4px;
}

/*--- restore survey popup -- */

.modal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 999;
}

.modal_overlay.active {
    visibility: visible;
    opacity: 1;
}

.restore_survey_popUp {
    width: 600px;
    height: 275px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    box-shadow: var(--Drop-Shadow);
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
    z-index: 1000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.restore_survey_popUp.active {
    visibility: visible;
    opacity: 1;
}

.restore_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.restore_header p {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-Inter);
    color: var(--text-main);
    line-height: 22px;
}

.restore_popUp_text {
    color: var(--text-muted);
    padding: 24px 0;
}

.restore_popUp_text span {
    font-weight: 700;
    color: var(--text-main);
}

.restore_survey_popUp_btn {
    background: var(--text-warning-default);
    padding: 9px 16px;
    font-weight: 700;
    font-size: 12px;
    border-radius: 6px;
    color: var(--text-white);
}

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

.survey_popUp_btn_blk .custom_cancel_btn {
    margin-top: 0;
}

.nav__line {
    flex-grow: 1;
    height: 1px;
    background: #e7e7e7;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .survey_question_text {
        font-size: 14px;
    }

    .survey_list_wrapper {
        padding: 0;
    }

    .survey__question_area {
        align-items: start;
    }

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

    .survey_question__blk {
        align-items: start;
    }

    .survey_tooltip--grip {
        width: 10px;
    }

    .survey_tooltip--Dots {
        width: 10px;
    }

    .survey_tooltip--plus {
        width: 24px;
    }

    /* survey offcanvas history responsive css  */

    .survey_history_date {
        font-size: 12px;
    }

    .history_offcanvas {
        padding: 0;
    }

    .Common_header_area {
        padding-right: 16px;
        padding-left: 10px;
    }

    .survey_history_list_area_header_text {
        padding: 0 16px;
    }

    .single_history_list_wrapper {
        padding: 8px 12px;
    }

    .restore_survey {
        flex-shrink: 0;
        display: none;
    }

    .single_history_list_wrapper:hover .restore_survey {
        display: inline-flex;
    }
}

/* <<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>> */
/* settings offcanvas design  */
/* <<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>> */

/* main area css  */

.fullWidth_select {
    display: block;
    width: 100%;
}

.fullWidth_select select {
    font-size: 16px;
    padding: 9px 12px;
}

.language_settings__area_2 {
    margin-top: 24px;
}

.language_settings__area h3 {
    font-weight: 700;
    font-size: 16px;
}

.language_settings__area .de_text {
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0;
    display: inline-block;
}

/* btn area  */

.settings_offcanvas_area_wrapper {
    position: relative;
    height: 100%;
}

.surveySetting_footer_area {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--bg-default);
    padding-bottom: 48px;
}

.surveySetting_footer__blk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 24px;
    border-top: var(--stroke-default);
    margin-top: 8px;
}

.open_library_btn {
    border: 1px solid var(--stroke-primary-default);
    background: #fff;
    color: var(--text-primary);
}

.open_library_btn:hover {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.export_q_btn {
    border: 1px solid var(--text-main);
    background: #fff;
}

.export_q_btn:hover {
    border-color: var(--bg-primary-default);
    background: rgba(0, 112, 224, 0.1);
}

/* chosen  */

.my_chosen_style {
    padding: 8px 16px;
}

/* chosen-container-multi */
.chosen-container {
    max-width: 100%;
    width: 100% !important;
}

.chosen-container-multi .chosen-choices {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 9px 10px;
    max-width: 100% !important;
    border: var(--stroke-default);
    background-color: #fff;
    cursor: text;
    background-image: unset !important;
    border-radius: 4px;
    height: 50px;
    display: flex;
    align-items: center;
}

.chosen-container-multi .chosen-choices li.search-choice {
    padding: 9px 30px 9px 14px;
    border-radius: 1000px;
    color: var(--text-gray-1);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-Inter);
    background: var(--bg-default-1);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(153, 153, 161, 0.4);
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 100%;
}

/* small screen :320px. */
@media (max-width: 767px) {

    .open_library_btn,
    .export_q_btn {
        font-size: 12px;
        padding: 8px 10px;
    }

    .Common_header_area {
        margin-top: 20px;
    }

    .settings_offcanvas_area_wrapper .Common_header_area {
        padding: 0;
    }

    .settings__offcanvas_area .settings_offcanvas_area_wrapper {
        padding: 24px 12px;
        padding-bottom: 0;
    }

    .Common_header_wrapper a {
        font-size: 20px;
    }

    .settings_offcanvas_area_wrapper .Common_header_area {
        margin-top: 0;
    }

    .surveySetting_footer_area {
        padding-bottom: 0;
    }

    .surveySetting_footer__blk {
        padding-bottom: 0;
    }
}

/*! ......................................*************************** create html part css start from here *****************************.................................  */

.create_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.header_left_blk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.header_right_blk {
    display: flex;
    align-items: center;
}

.survey_tooltip--eye {
    width: 42px;
    height: 32px;
}

.survey_tooltip--upRight {
    width: 40px;
    height: 32px;
}

.custom_pill__blk .pill_dropdown_wrapper {
    top: 60px;
}

.default_all_section_header {
    margin-bottom: 12px;
}

.default_body_header_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.choice_btn {
    background: none;
}

.prev__btn {
    background: none;
}

.next__btn {
    background: none;
}

.choice_btn:hover,
.prev__btn:hover,
.next__btn:hover {
    background: var(--hover-bg-shadow);
}

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

.header_dots_click_area {
    display: flex;
    align-items: center;
}

.createQuestion_header_text input.createQuestion_text {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--text-white);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.createQuestion_header_text input.createQuestion_text::placeholder {
    font-size: 20px;
}

.createQuestion_header_text input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-top: 16px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--text-white);
}

.createQuestion_header_text input::placeholder {
    font-family: var(--font-Inter);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-main);
}

/* createQuestion Nav  */

.survey_tooltip--image {
    width: 40px;
    height: 32px;
}

.createQuestion_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    border-bottom: 1px solid var(--border-color);
}

.createQuestion_nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.createQuestion_nav ul[data-tooltip-dropdown] {
    display: block;
}

.createQuestion_nav ul li {
    display: inline-block;
}

.createQuestion_nav ul[data-tooltip-dropdown] li {
    display: block;
}

.createQuestion_nav ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    padding-bottom: 4px;
    font-weight: 400;
    color: var(--text-muted);
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease-in-out;
}

.createQuestion_nav ul[data-tooltip-dropdown] li a {
    display: flex;
    justify-content: start;
}

.createQuestion_nav ul li a:hover {
    border-bottom: 4px solid var(--bg-primary-default);
    color: var(--text-primary);
}

.createQuestion_nav ul[data-tooltip-dropdown] li a:hover {
    border-bottom: 1px solid transparent;
}

.createQuestion_nav ul li a.active {
    border-bottom: 4px solid var(--bg-secondary-default);
    color: var(--bg-secondary-default);
    font-weight: 600;
}

/* toggle start */
.toggle_area {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    transition: 0.2s;
    cursor: pointer;
}

.toggle_area:hover {
    background: var(--hover-bg-shadow);
}

.toggle-control {
    display: inline-flex;
    position: relative;
    cursor: pointer;
    top: -6px;
}

.toggle-control input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.toggle-control input:checked~.control {
    background-color: #fff;
    border-color: var(--bg-primary-default);
}

.toggle-control input:checked~.control:after {
    left: 7px;
    background: var(--bg-primary-default);
}

.toggle-control .control {
    position: absolute;
    top: 0;
    left: 0;
    height: 11px;
    width: 17px;
    border-radius: 8px;
    background-color: #fff;
    transition: background-color 0.15s ease-in;
    border: 1px solid #000;
}

.toggle-control .control:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 20%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000;
    transition: left 0.15s ease-in;
}

.toggle_area p {
    padding-left: 21px;
    font-size: 12px;
    font-weight: 700;
}

/* answer module */

.answer_module {
    padding: 8px 16px;
    border-radius: 4px;
    border: var(--stroke-default);
    background: var(--text-white);
    margin-bottom: 4px;
}

.answer_module .survey_tooltip--grip {
    color: var(--text-placeholder);
}

.answer_module>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.answer_module:last-child {
    margin-bottom: 0;
}

.answer_module input.answer_number {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--text-white);
    padding: 9px 12px;
    width: 60px;
}

.answer_module input.default_input {
    flex-grow: 1;
}

.chars_left {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 70px;
    margin-top: 4px;
}

.chars_left span {
    color: var(--text-main);
    font-weight: 700;
}

.add_answer,
.import_answer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

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

.add_answer .toggle_area {
    margin-bottom: 0;
}

/* alert message  */
.alert_message {
    padding: 8px 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--stroke-warning-2);
    background: var(--bg-warning-2);
    color: var(--text-warning-1);
    margin: 16px 0;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    height: auto;
}

.success_message {
    padding: 8px 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--stroke-success-default);
    background: var(--green-300);
    color: var(--text-success-default);
    margin: 16px 0;
    height: 32px;
    display: flex;
    align-items: center;
}

.add_answer_create_btn_area {
    padding-top: 12px;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .header_right_blk {
        flex-direction: column-reverse;
        align-items: flex-end;
    }

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

    .primary_btn {
        padding: 8px 9px;
        font-size: 14px;
    }

    .default_all_section_header {
        padding: 16px 0;
    }

    .default_body_header_wrapper {
        padding: 0;
    }

    .survey_tooltip--x {
        width: 22px;
    }

    .survey_tooltip--upRight {
        width: 30px;
    }

    .custom_pill__blk .pill_dropdown_wrapper {
        top: 93px;
        left: 21px;
    }

    .createQuestion_nav ul li a {
        padding: 9px 10px;
        font-size: 14px;
    }

    .answer_module {
        padding: 8px;
    }

    .answer_module input.answer_number {
        max-width: 35px;
        width: 100%;
        padding: 8px 7px;
        flex-shrink: 0;
    }

    .answer_module input.default_input {
        min-width: 180px;
        width: 100%;
    }

    .add_answer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }

    .add_import_btn_area {
        width: 100%;
        justify-content: space-between;
    }
}

/*! ......................................*************************** setting html part css start from here *****************************.................................  */

.setting_html_file {
    margin-bottom: 24px;
}

.setting_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.survey_tooltip--asteric {
    width: 37px;
    height: 32px;
    color: var(--text-danger);
}

.survey_tooltip--penSquare {
    width: 40px;
    height: 32px;
    cursor: pointer;
}

.survey_question_header_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.survey_question_header_text>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.survey_header_select_text {
    color: var(--text-muted);
    font-size: 12px;
}

.survey_question_header_asterick {
    position: relative;
}

.showOnHover {
    padding: 9px 14px;
    background: var(--text-white);
    border: var(--stroke-default);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--Drop-Shadow);
    position: absolute;
    top: 32px;
    right: 0;
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    display: none;
    font-size: 12px;
}

.showOnHover span {
    color: var(--text-main);
    font-weight: 700;
}

/* main part  */

.settings_click_wrapper {
    padding: 8px 16px 16px 16px;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bg-default-1, #f9f9fa);
    border: 1px solid var(--stroke-default-default, #e7e7e7);
    margin-top: 4px;
    max-height: fit-content;
}

.settings_click_wrapper:last-child {
    margin-bottom: 0;
}

.settings_click {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 2px dotted #e7e7e7;
}

.settings_list_text {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.settings_list_text h3 {
    font-size: 16px;
    font-weight: 700;
}

.checkEvent_area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.checkEvent_area .survey_pill {
    border-radius: 1000px;
    border: 1px solid var(--stroke-primary);
    background: var(--bg-primary);
    color: var(--bg-primary-default);
    font-size: 12px;
    font-weight: 700;
    display: none;
}

.checkEvent_area input,
.checkBox.checkBoxBig {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.settings_click_wrapper p {
    font-size: 12px;
    color: var(--text-muted);
}

.settings_click_wrapper.checked {
    border: 1px solid #cbe5ff;
}

.settings_list_text.checked .setting_p {
    color: var(--bg-primary-default);
}

.settings_list_text.checked .asterick {
    color: var(--bg-primary-default);
}

.checkEvent_area.checked .survey_pill {
    display: block;
}

.open_data_tab {
    display: flex;
    margin-top: 16px;
}

.settings_click_wrapper {
    overflow: hidden;
}

.settings_click_wrapper.slideOpen {
    max-height: 100%;
}

/* ----- common css ---------- */

.select_area_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    margin: 8px 0;
}

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

/* <select> styles */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    color: var(--text-main);
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    font-size: 16px;
    padding-right: 36px;
}

select::-ms-expand {
    display: none;
}

select:focus {
    outline: none;
}

select option {
    color: #000;
}

.select_area {
    border: 1px solid var(--border-color);
    display: inline-flex;
    gap: 8px;
    background: var(--text-white);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    min-height: 40px;
}

.open_data_select {
    max-width: 200px;
    width: 100%;
}

.single_select_area_1 {
    flex: 1;
}

.select_area_1 {
    flex: 1;
}

.select_area_2 {
    width: 200px;
}

.select_area span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.select_label {
    font-size: 12px;
    color: var(--text-muted);
}

.open_data_tab .inner_open_data_tab {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

.open_data_tab .inner_open_data_tab .check_time_text {
    font-size: 14px;
    color: var(--text-placeholder);
}

/*! ......................................*************************** Target html part css start from here *****************************.................................  */

.target_html_file {
    margin-bottom: 24px;
}

.target_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.btn_correct,
.btn_wrong {
    margin-top: 10px;
}

.btn_correct {
    background: var(--bg-primary-default);
}

.btn_wrong:hover {
    background: rgba(0, 0, 0, 0.04);
}

.btn_correct {
    width: 46px;
    height: 40px;
}

.btn_wrong {
    width: 44px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.survey_tooltip--asteric {
    width: 37px;
    height: 32px;
    color: var(--text-danger);
}

.survey_tooltip--penSquare {
    width: 40px;
    height: 32px;
    cursor: pointer;
}

.survey_question_header_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.survey_question_header_text .sqht_text {
    color: var(--text-primary);
}

.survey_question_header_text>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.survey_question_header_text h2 {
    font-size: 18px;
    font-weight: 700;
}

.survey_header_select_text {
    color: var(--text-muted);
    font-size: 12px;
}

.btn_correct,
.btn_wrong {
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.btn_correct {
    background: var(--bg-primary-default);
}

.btn_wrong:hover {
    background: rgba(0, 0, 0, 0.04);
}

input.input_filter {
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--text-white);
    height: 40px;
    width: 277px;
}

input.input_filter:focus {
    border: 1px solid var(--bg-primary-default);
}

input.input_filter::placeholder {
    color: #9999a1;
    font-size: 12px;
}

.answer_module_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    border: var(--stroke-default);
    background: var(--text-white);
    margin-bottom: 6px;
}

.answer_module_list:last-child {
    margin-bottom: 0;
}

.answer_module_list__number {
    color: var(--text-muted);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .target_html_file .createQuestion_nav {
        flex-direction: column;
        gap: 20px;
    }
}

/*! ......................................***************************  MAPPING HTML part css start from here *****************************.................................  */

.mapping_html_file {
    margin-bottom: 24px;
}

.mapping_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.answer_module_parent_wrapper {
    padding: 16px;
    border-radius: 6px;
    background: #f9f9fa;
}

.mappingOn_toggle_area_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.mappingOn_toggle_area_footer .toggle_area {
    background: var(--bg-primary-default);
    color: #fff;
}

.Selection_mapping_blk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 16px;
}

.Selection_mapping_blk p {
    font-weight: 700;
    font-size: 12px;
}

.Selection_mapping_blk p span {
    text-transform: uppercase;
    color: var(--bg-primary-default);
}

.survey_tooltip--question {
    width: 40px;
    height: 32px;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .mapping_html_file .select_area_wrapper {
        flex-direction: column;
    }

    .mapping_html_file .createQuestion_nav {
        flex-direction: column;
        gap: 18px;
    }
}

/*! ......................................***************************  VALIDATION HTML part css start from here *****************************.................................  */

.createQuestion_header_text.show {
    display: block !important;
}

.validate_btn {
    color: var(--text-white);
    display: inline-flex;
    gap: 4px;
    height: 32px;
    align-items: center;
    background: var(--bg-primary-default);
}

input.alert_message {
    border-radius: 8px !important;
    border: 1px solid #ffa9bf !important;
    background: #fee9ee !important;
    height: 48px;
    margin-bottom: 0;
    margin-top: 0;
}

input.alert_message::placeholder {
    color: var(--text-danger);
}

input.success_message {
    border-radius: 8px !important;
    height: 48px;
    margin-bottom: 0;
    margin-top: 0;
}

input.success_message::placeholder {
    color: var(--text-success-default);
}

.designerOverview_header_progress_left .audience_not_feasible,
.audiences_survey_bottom_blk_left_area .audience_not_feasible,
.aqh_label .audience_not_feasible,
.audience_setting_title .audience_not_feasible,
.audience_setting_status .audience_not_feasible {
    color: var(--text-warning-default);
}

.designerOverview_header_progress_left .audience_not_feasible,
.audiences_survey_bottom_blk_left_area .audience_not_feasible {
    margin-right: 3px;
}

.designerOverview_header_progress_left .audience_not_feasible_wrapper,
.audiences_survey_bottom_blk_left_area .audience_not_feasible_wrapper {
    position: relative;
}

.designerOverview_header_progress_left .audience_not_feasible_wrapper .audience_hover_pill_area,
.audiences_survey_bottom_blk_left_area .audience_not_feasible_wrapper .audience_hover_pill_area {
    top: 23px;
    left: -3px;
}

.survey_tooltip--ban {
    width: 40px;
    height: 40px;
    color: var(--text-warning-default);
}

.warning_blk {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-danger);
    margin: 0 12px;
    margin-top: 6px;
}

.alert_warning_message {
    border-radius: 6px;
    border: 1px solid var(--stroke-warning-2);
    background: var(--bg-warning-2);
    padding: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-warning-default);
    margin-top: 16px;
}

.alert_show_message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.alert_hide_message {
    margin-top: 8px;
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: 0.2s;
}

.alert_hide_message.active {
    display: block;
    visibility: visible;
    opacity: 1;
}

.alert_warning_message p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.warning_module_list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.warning_module_list .btn_correct,
.warning_module_list .btn_wrong {
    margin-top: 0;
}

.warning_module_list .btn_correct {
    width: 46px;
    height: 40px;
}

.warning_module_list .btn_wrong {
    width: 44px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.warning_module_list .btn_wrong:hover {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    color: rgb(211, 104, 27);
}

input.answer_module_list__number {
    width: 60px;
}

input.answer_edit_text {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #ffa9bf;
    background: #fee9ee;
    flex-grow: 1;
}

/*! ......................................*************************** AGE html part css start from here *****************************.................................  */

/* custom css start */

.pill_hover_event {
    position: relative;
}

.survey_hover_pill {
    border-radius: 1000px;
    border: 1px solid var(--border-color);
    background: var(--bg-default);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    max-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pill_hover_area {
    background: var(--bg-default);
    border-radius: 4px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    padding: 16px;
    width: 250px;
    position: absolute;
    top: 32px;
    z-index: 99;
    display: none;
}

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

.pill_head h5 {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.pill_body_text {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.pill_body_text span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-top: 8px;
}

/* ban blk  */

.ban_wrapepr {
    position: relative;
}

.ban_blk {
    padding: 9px 12px;
    color: var(--text-warning-default);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
    border-radius: 6px;
    cursor: pointer;
}

.ban_blk:hover {
    border-color: var(--stroke-warning-2);
}

.ban_text {
    font-size: 14px;
    font-weight: 700;
    display: none;
}

.disqualify_text {
    font-size: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--Drop-Shadow);
    padding: 7px 12px;
    width: 232px;
    position: absolute;
    background: var(--bg-default);
    right: -237px;
    top: -12px;
    display: none;
}

.disqualify_text span {
    color: var(--text-warning-default);
    font-weight: 700;
}

/* qualify blk  */

.qualify_wrapper {
    position: relative;
    display: none;
}

.qualify_blk {
    padding: 9px 12px;
    color: var(--text-primary);
    background: var(--bg-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
    border-radius: 6px;
    cursor: pointer;
}

.qualify_blk:hover {
    border-color: var(--bg-primary-default);
}

.qualified_text {
    font-size: 14px;
    font-weight: 700;
    display: none;
}

.qualify_text {
    font-size: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--Drop-Shadow);
    padding: 7px 12px;
    width: 232px;
    position: absolute;
    background: var(--bg-default);
    right: -237px;
    top: -13px;
    display: none;
    border-radius: 6px;
}

.qualify_text span {
    color: var(--bg-primary-default);
    font-weight: 700;
}

.feasibility_wrapper {
    position: relative;
}

.feasibility_text {
    font-size: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--Drop-Shadow);
    padding: 15px;
    width: 280px;
    position: absolute;
    background: var(--bg-default);
    right: -60px;
    top: -100px;
    /* display: none; */
    border-radius: 4px;
    color: var(--text-muted);
}

.feasibility_text_feasible {
    top: -70px;
}

.feasibility_text strong {
    font-weight: 700;
}

.feasibility_text .is_feasible {
    color: var(--text-success-default);
}

.feasibility_text .is_not_feasible {
    color: var(--text-main);
}

.feasibility_text .is_not_feasible_missing {
    color: var(--text-danger);
}

.bbbb_fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
}

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

.bottom_part_of_the_body {
    padding: 16px 0 24px 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-default);
}

.cancel_btn {
    background: var(--bg-default);
}

.modal_cancel_btn {
    background: var(--bg-default);
}

.reset_btn {
    background: var(--bg-default);
}

.cancel_btn:hover {
    background: var(--hover-bg-shadow);
}

.reset_btn:hover {
    background: var(--hover-bg-shadow);
}

.live_html_file .module_list_wrapper .answer_module_list {
    transition: 0.2s;
}

.live_html_file .module_list_wrapper .answer_module_list:hover {
    border-color: var(--border-primary);
}

/*------ custom css end -----------*/

.age_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.age_html_file .header_left_blk {
    gap: 8px;
}

.age_html_file .header_pill_click_area {
    gap: 4px;
}

.age_html_file .toggle_area_blk {
    padding-bottom: 0;
}

.age_html_file .toggle_on_btn {
    display: inline-flex;
}

.age_html_file .toggle_off_btn {
    display: none;
}

.select_unselect_btns_blk .selectAll_button,
.select_unselect_btns_blk .unselectAll_button {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
    border-radius: 4px;
}

.select_unselect_btns_blk .selectAll_button {}

.select_unselect_btns_blk .selectAll_button:hover,
.select_unselect_btns_blk .unselectAll_button:hover {
    background: var(--hover-bg-shadow);
}

.toggle_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

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

.toggle_phase2_right p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 1000px;
    gap: 4px;
}

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

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

.list_inputs_blk input {
    max-width: 100px;
    width: 100%;
}

.list_inputs_blk span {
    color: var(--text-muted);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .toggle_phase2_left {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle_phase2_right p {
        padding: 6px 9px;
    }

    .toggle_wrapper {
        align-items: flex-start;
    }

    .select_unselect_btns_blk .selectAll_button,
    .select_unselect_btns_blk .unselectAll_button {
        padding: 7px 9px;
    }

    .age_html_file .answer_module_list {
        padding-left: 6px;
    }
}

/*! ......................................*************************** addSurvey html part css start from here *****************************.................................  */

/* reusable component start */

.topic_title {
    color: var(--text-main);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
}

.addSurvey_html_file .createQuestion_header_text input {
    cursor: pointer;
}

.addSurvey_html_file .createQuestion_header_text input:hover {
    border: 1px solid var(--bg-primary-default);
}

.addSurvey_html_file .createQuestion_header_text input.createQuestion_text:hover {
    border: 1px solid var(--bg-primary-default);
}

.header_input_area {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.header_input_area .createQuestion_header_text {
    flex-grow: 1;
}

.header_input_area .createQuestion_text {
    height: 48px;
}

.soo_text {
    margin-top: 8px !important;
}

.survey_tooltip--help {
    width: 48px;
    height: 40px;
    color: var(--bg-primary-default);
}

/* reusable component end */

.addSurvey_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

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

.ai_blk {
    padding: 11.5px 20px;
    border: 1px solid var(--bg-primary-default);
    background: var(--bg-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 48px;
    position: relative;
}

.ai_text {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
}

.hover_ai_text {
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    padding: 9px 12px;
    box-shadow: var(--Drop-Shadow);
    position: absolute;
    width: 177px;
    z-index: 1;
    right: 0;
    top: 46px;
    display: none;
}

.hover_ai_text h5 {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hover_ai_text span {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--text-placeholder);
}

.chosie_area_left_wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.choise_select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--stroke-primary-default);
    background: var(--bg-default);
    height: 40px;
    transition: 0.2s;
}

.choise_select:hover {
    background: var(--hover-bg);
}

.choise_select span {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.choise_select i {
    color: var(--bg-primary-default);
}

.chosie_area_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

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

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

.choise_input_area input {
    height: 40px;
    max-width: 225px;
    width: 100%;
}

.addSurvey_html_file .createQuestion_nav {
    margin-top: 0;
}

.answer_module_input_blk {
    width: 100%;
}

.answer_module_input_blk input {
    width: 100%;
    cursor: pointer;
}

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

.answer_module_custom_input_blk :first-child {
    flex-grow: 1;
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .chosie_area_wrapper .topic_title {
        font-size: 18px;
    }
}

/* small screen :320px. */
@media (max-width: 767px) {
    .chosie_area_wrapper {
        flex-direction: column;
        justify-content: space-between;
    }

    .chosie_area_left_wrapper {
        justify-content: space-between;
        width: 100%;
    }

    .choise_area_right_wrapper {
        justify-content: space-between;
        width: 100%;
    }

    .chosie_area_wrapper .topic_title {
        font-size: 16px;
        flex-shrink: 0;
    }

    .bottom_part_of_the_body {
        flex-direction: column;
        gap: 16px;
    }

    .bottom_left_part_of_the_body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

/*! ......................................*************************** customAnswer html part css start from here *****************************.................................  */

/* custom css start  */

/* custom css end  */

.customAnswer_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.customAnswer_html_file .add_answer {
    margin-bottom: 24px;
}

.primary_btn.btn_set_title {
    border: 1px solid var(--stroke-primary-default);
    background: var(--bg-default);
    color: var(--text-primary);
}

.primary_btn.btn_set_title:hover {
    background: var(--hover-bg);
}

.customAnswer_html_file .answer_module_list_blk {
    width: 100%;
    cursor: pointer;
}

/* .customAnswer_html_file .answer_module_list:hover {
    border: 1px solid var(--stroke-secondary-2);
} */

.customAnswer_html_file .answer_module_list__text {
    width: 100%;
    display: block;
}

.answer_module_input_area {
    width: 100%;
    display: none;
}

.answer_module_input_area input {
    width: 100%;
    border-radius: 6px;
}

.chars_left_text {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chars_left_number {
    font-weight: 700;
}

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

.input_ok {
    
}

.input_ok:hover {
    
}

.input_cancel {
    
}

/* small screen :320px. */
@media (max-width: 767px) {
    .customAnswer_html_file .createQuestion_nav {
        flex-direction: column;
        gap: 18px;
    }

    .customAnswer_html_file input.input_filter {
        max-width: 200px;
        width: 100%;
    }
}

/*! ......................................*************************** customAnswer html part css start from here *****************************.................................  */

.gender_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.gender_html_file .toggle_area_blk {
    padding-bottom: 0;
}

.gender_html_file .toggle_on_btn {
    display: inline-flex;
}

.gender_html_file .toggle_off_btn {
    display: none;
}

.list_inputs_blk .gender_list_text {
    color: var(--text-main);
}

.gender_html_file .module_list_wrapper {
    padding-bottom: 24px;
}

.gender_html_file .answer_module_list {
    border-width: 1px;
}

/* .gender_html_file .answer_module_list:hover {
    border-color: var(--stroke-primary);
    background: #F0F8FF;
} */

/* small screen :320px. */
@media (max-width: 767px) {
    .gender_html_file .answer_module_list {
        padding-left: 6px;
    }
}

/*! ......................................*************************** customAnswer html part css start from here *****************************.................................  */

.customQuotas_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

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

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

.quotas_input {
    max-width: 200px;
    width: 100%;
    height: 32px;
    font-size: 14px;
}

.quotas_input::placeholder {
    color: var(--text-placeholder);
    font-size: 12px;
}

.quotas_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    height: 32px;
    border-radius: 4px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.quotas_text {
    font-size: 12px;
    font-weight: 700;
}

.quotas_text span {
    color: var(--text-primary);
}

.quotas_btn .fa-caret-down {
    color: var(--text-primary);
    font-size: 12px;
}

.customQuotas_html_file .answer_module_list {
    height: 56px;
    transition: 0.2s;
}

.customQuotas_html_file .answer_module_list:hover {
    border-color: var(--border-primary);
}

.customQuotas_html_file .answer_module_list_blk {
    width: 100%;
}

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

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

.disabled-check-icon {
    color: #ccc;
}

.quotas_single_percentage_blk input {
    width: 85px;
    height: 40px;
    cursor: pointer;
    transition: 0.2s;
    min-width: 50px;
}

.quotas_single_percentage_blk input:not(:disabled, :read-only):hover {
    border-color: var(--bg-primary-default);
}

.customQuotas_totall_number {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30px;
}

.ctn_percenteage {
    width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
}

.ctn_number {
    width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
}

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

/* small screen :320px. */
@media (max-width: 767px) {
    .customQuotas_html_file .createQuestion_nav {
        flex-direction: column;
        gap: 18px;
    }

    .customQuotas_html_file .answer_module_list {
        padding-left: 6px;
    }

    .quotas_answer_label {
        font-size: 12px;
        flex-shrink: 0;
    }

    .quotas_btn {
        flex-shrink: 0;
    }

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

    .quotas_answer_blk {
        gap: 8px;
    }
}

/*! ......................................*************************** netRapQuotas_html_file  part css start from here *****************************.................................  */

.netRapQuotas_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.netRapQuotas_html_file .answer_module_list {
    height: 56px;
    transition: 0.2s;
}

.netRapQuotas_html_file .answer_module_list:hover {
    border-color: var(--border-primary);
}

.netRapQuotas_html_file .answer_module_list_blk {
    width: 100%;
}

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

.netRap_divider_line {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--text-disabled);
}

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

.netRap_single .fa-user {
    color: var(--text-success-default);
    font-size: 12px;
}

.fa-user-error,
.netRap_single .fa-user-error {
    color: var(--text-danger);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .netRapQuotas_html_file .createQuestion_nav {
        flex-direction: column;
        gap: 18px;
    }

    .netRapQuotas_html_file .answer_module_list {
        padding-left: 6px;
    }
}

/*! ......................................*************************** createAudience_html_file and editAudience html  part css start from here *****************************.................................  */

.createAudience_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.createAudience_html_file .bottom_part_of_the_body {
    margin-top: 40px;
}

.createAudience_select_wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;
}

.createAudience_select_wrapper_single {
    width: 100%;
}

.createAudience_html_file .topic_title {
    /* margin-bottom: 8px; */
}

.audience_section_title {
    margin-bottom: 12px;
}

.createAudience_html_file .chosen-container-single .chosen-single {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0 0 0 8px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-default);
    background-clip: padding-box;
    box-shadow: none;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
    line-height: 40px;
}

.createAudience_html_file .chosen-container-single .chosen-single div b {
    background: url("chosen-sprite.png") no-repeat 0px 10px;
}

.count_complete_survey {
    margin-bottom: 36px;
}

.ccs_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
}

.ccs_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 135px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-default);
    transition: 0.2s;
    cursor: pointer;
}

.ccs_input {
    max-width: 140px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-default);
    transition: 0.2s;
    cursor: pointer;
}

.ccs_input::placeholder {
    color: var(--text-placeholder);
}

.ccs_count:hover {
    border-color: var(--border-primary);
    background: var(--hover-bg);
}

.createAudience_template_wrapper {
    background: var(--bg-default-1);
    border-radius: 6px;
}

.catw_header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.catw_header .topic_title:first-child {
    color: var(--text-primary);
}

.item_divider {
    display: inline-block;
    width: 1px;
    height: 25px;
    background: var(--border-color);
}

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

.catw_single_select_1 {
    width: 200px;
    flex-shrink: 0;
}

.catw_single_select_2 {
    width: 100%;
}

.catw_select_label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

.createAudience_html_file .chosen-container-single .chosen-single span {
    font-size: 16px;
}

.catw_single_select .chosen-container-single .chosen-single span {
    color: var(--text-main);
    font-weight: 400;
}

.US_population_wrapper {
    padding-top: 16px;
    padding-bottom: 32px;
}

.usp_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.usp_header p {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.usp_header p span {
    color: var(--text-main);
}

.usp_text {
    font-size: 12px;
    line-height: 15px;
    color: var(--text-muted);
}

.createAudience_target_value {
    padding: 16px;
    border-radius: 6px;
}

.catv_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.catv_header h5 {
    font-weight: 500;
    font-size: 16px;
}

.single_catv_content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.single_catv_content:last-child {
    padding-bottom: 0;
}

.catv_pill {
    border-radius: 1000px;
    border: 1px solid var(--border-color);
    background: var(--bg-default);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    max-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.catv_list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.catv_item {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.catv_divider {
    width: 1px;
    height: 15px;
    background: var(--text-disabled);
    display: inline-block;
}

.catv_list .catv_divider:last-child {
    display: none;
}

.createAudience_available_values {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 40px;
}

.createAudience_available_values p .cav_label {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 400;
}

.createAudience_available_values p {
    font-size: 12px;
    color: var(--text-muted);
}

.createAudience_available_values p .cav_count {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
}

.createAudience_available_values p .cav_date {
    font-size: 16px;
    color: var(--text-main);
    font-weight: 400;
}

.audience_details img {
    width: 42px;
    height: 32px;
}

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

.audience_details p {
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
}

/* edit audience start */

.editAudience_html_file .audience_name_wrapper {
    padding-top: 20px;
    padding-bottom: 36px;
}

.additional_audience_setting {
    margin-bottom: 40px;
}

.single_audience_setting {
    padding: 0 16px;
    border-right: 1px solid var(--border-color);
    width: max-content;
    position: relative
}

.single_audience_setting:first-child {
    padding-left: 0;
}

.single_audience_setting:last-child {
    border-right: none;
}

.audience_setting_title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.audience_setting_title .danger_wrapper {
    max-height: 10px;
    color: var(--text-warning-default)
}

.audience_setting_wrapper {
    padding: 16px;
    border-radius: 6px;
    background: var(--bg-default-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 20px;
    justify-content: space-between;
}

.audience_input_blk {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.audience_input_blk .ai_1 {
    width: 60px;
    height: 40px;
}

.audience_input_blk .auib_text {
    font-size: 12px;
    font-weight: 700;
}

.audience_input_blk .ai_2 {
    width: 65px;
    height: 40px;
    text-align: center;
}

.audience_input_blk .ai_3 {
    width: 80px;
    height: 40px;
}

.editAudience_html_file .bottom_part_of_the_body {
    margin-top: 0;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .createAudience_html_file .topic_title {
        font-size: 14px;
    }

    .createAudience_template_wrapper {
        padding: 12px;
    }

    .catw_select {
        flex-direction: column;
    }

    .catw_single_select_1 {
        width: 100%;
    }

    .createAudience_target_value {
        padding: 16px 0px;
    }

    .createAudience_template_wrapper {
        padding: 12px 0;
    }
}

/*! ......................................*************************** audience question html part css start from here *****************************.................................  */

.live_html_file .container {
    max-width: 936px;
    width: 100%;
    margin-inline: auto;
}

.live_html_file .toggle_area_blk {
    padding-bottom: 0;
}

.live_html_file .toggle_on_btn {
    display: inline-flex;
}

.live_html_file .toggle_off_btn {
    display: none;
}

.live_html_file .toggle_phase2_right p {
    border-color: #333d60;
    background: #333d60;
    color: var(--text-white);
}

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

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

.audienceQuestion_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    padding-top: 4px;
    position: relative;
}

.aqh_single_item {
    padding: 8px;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    position: relative;
}

.aqh_single_item .audience_hover_pill_area {
    top: 58px;
    left: 5px;
}

.aqh_single_item_1 {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12.5px;
}

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

.aqh_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 1000px;
    border: 1px solid var(--stroke-primary-default);
    background: var(--bg-primary-default);
    color: #fff;
}

.aqh_text_1 {
    font-size: 12px;
    font-weight: 700 !important;
    color: var(--text-primary);
    line-height: 15px;
}

.aqh_label {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aqh_text {
    font-size: 12px;
    font-weight: 400;
}

.aqh_small_text {
    font-size: 12px;
    font-weight: 700;
}

.survey_tooltip--minus {
    width: 39px;
    height: 32px;
}

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

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

.audienceQuestion_nav_area .createQuestion_nav ul li a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #72727e;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 10px;
    line-height: 1;
}

.audienceQuestion_nav_area .createQuestion_nav ul li a.active span {
    background: var(--bg-secondary-default);
}

.select_pill {
    border-radius: 1000px;
    border: 1px solid var(--border-color);
    background: var(--bg-default);
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    gap: 4px;
}

.aqh_buttons_area {
    display: flex;
    align-items: center;
}

.aqh_buttons_area button {
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: 0.2s;
    font-size: 12px;
    font-weight: 400;
}

.aqh_buttons_area button:hover {
    background: var(--hover-bg-shadow);
}

.aqh_buttons_area button:last-child {
    border-right: none;
}

.audienceQuestion_suggestion_area {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 6px;
    background: var(--bg-default-1);
    padding: 8px 16px;
    margin: 24px 0;
}

.audienceQuestion_suggestion_blk {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.audienceQuestion_suggestion_label {
    font-size: 12px;
    font-weight: 700;
}

.audienceQuestion_suggestion_pill {
    border-radius: 1000px;
    border: 1px solid var(--stroke-secondary-2);
    background: var(--bg-secondary-2);
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* filter and list area start  */

.audienceQuestion_main_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* filter area  */

.audienceQuestion_filter_area {
    max-width: 290px;
    width: 100%;
    background: var(--bg-default);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 6px;
}

.audienceQuestion_search {
    position: relative;
    color: #aaa;
    font-size: 16px;
    width: 100%;
}

.audienceQuestion_search {
    display: inline-block;
}

.audienceQuestion_search input {
    width: 100%;
    padding: 9px 36px 9px 12px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.audienceQuestion_search input:focus {
    border-color: var(--bg-primary-default);
}

.audienceQuestion_search input::placeholder {
    color: var(--text-disabled);
}

.audienceQuestion_search .fa-search {
    position: absolute;
    top: 50%;
    left: auto;
    right: 10px;
    transform: translateY(-50%);
}

.audienceQuestion_single_filter_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    margin-top: 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    font-size: 12px;
    text-transform: capitalize;
}

.audienceQuestion_single_filter_list p {
    color: var(--text-main);
}

.audienceQuestion_single_filter_list span {
    color: var(--text-muted);
}

.audienceQuestion_single_filter_list:hover {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.audienceQuestion_single_filter_list:hover p,
.audienceQuestion_single_filter_list:hover span {
    color: var(--text-white);
}

.audienceQuestion_single_filter_list:focus {
    border: 1px solid var(--bg-primary-default);
    background: var(--bg-primary);
}

.audienceQuestion_single_filter_list:focus p {
    color: #004c98;
}

.audienceQuestion_single_filter_list:focus span {
    color: #004c98;
}

.audienceQuestion_single_filter_list:active {
    border-color: var(--bg-primary-default);
}

.audienceQuestion_filter_list_blk .line_shape {
    width: 100%;
    display: block;
    margin: 8px 0;
}

.audienceQuestion_filter_bottom_blk {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 24px;
    border-top: 1px solid var(--border-color);
}

.audienceQuestion_filter_bottom_blk p {
    color: var(--text-muted);
    font-size: 12px;
}

.audienceQuestion_filter_bottom_blk a {
    font-size: 12px;
    font-weight: 700;
    margin-top: 12px;
    display: inline-block;
}

/* list area  */
.audienceQuestion_list_area {
    width: 100%;
}

.audienceQuestion_list_area ul .survey_parent_li {
    padding: 16px 8px;
    border-top: var(--stroke-default);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audienceQuestion_list_area ul .survey_parent_li.active {
    background: var(--bg-default-1);
}

.audienceQuestion_list_area ul .survey_parent_li:last-child {
    border-bottom: var(--stroke-default);
}

.pill_audience_event {
    position: relative;
}

.audienceQuestion_list_area .custom_pill__blk {
    flex-shrink: 0;
}

.audience_hover_pill {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--mo-bg-9);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    max-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
}

.audience_hover_pill_area {
    background: var(--bg-default);
    border-radius: 4px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    padding: 16px;
    width: 250px;
    position: absolute;
    top: 30px;
    z-index: 99;
    display: none;
}

.audience_hover_pill_area_right {
    right: -17px;
    top: 24px;
}

/* responsive start  */

/* Normal screen :992px. */
@media (min-width: 992px) and (max-width: 1200px) {
    .audienceQuestion_header_left_wrapper {
        gap: 0;
    }

    .audienceQuestion_header_right_wrapper {
        gap: 4px;
    }
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .audienceQuestion_header {
        align-items: flex-start;
    }

    .audienceQuestion_header_left_wrapper {
        gap: 0;
        flex-wrap: wrap;
    }

    .aqh_single_item {
        flex-shrink: 0;
    }

    .audienceQuestion_nav_area {
        flex-direction: column;
        gap: 18px;
    }

    .audienceQuestion_filter_area {
        max-width: 230px;
    }
}

/* small screen :320px. */
@media (max-width: 767px) {
    .audienceQuestion_header {
        align-items: flex-start;
    }

    .audienceQuestion_header_left_wrapper {
        gap: 0;
        flex-wrap: wrap;
    }

    .aqh_single_item {
        flex-shrink: 0;
    }

    .audienceQuestion_nav_area {
        flex-direction: column;
        gap: 16px;
    }

    .audienceQuestion_suggestion_area {
        align-items: flex-start;
    }

    .audienceQuestion_suggestion_label {
        padding-top: 10px;
    }

    .audienceQuestion_header_right_wrapper {
        flex-wrap: wrap-reverse;
        justify-content: flex-end;
        padding-top: 10px;
    }

    .audienceQuestion_nav_area .createQuestion_nav ul li a {
        font-size: 12px;
        flex-direction: column-reverse;
        align-items: center;
    }

    .audienceQuestion_nav_area .createQuestion_nav ul li a span {
        margin-left: 0;
    }

    .audienceQuestion_html_file .Common_header_area {
        padding: 0;
    }

    .audienceQuestion_nav_right_blk {
        flex-direction: column;
    }

    .audienceQuestion_main_wrapper {
        flex-direction: column;
    }

    .audienceQuestion_filter_area {
        max-width: 100%;
    }

    .audienceQuestion_filter_bottom_blk {
        padding-top: 22px;
    }

    input.check_aqla {
        padding-top: 25px;
    }
}

/*! ......................................*************************** designerOverview html part css start from here *****************************.................................  */

.designerOverview_header_wrapper {
    align-items: end;
    justify-content: space-between;
    padding-bottom: 0;
}

.designerOverview_header_left_blk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 388px);
    float: left;
    padding-bottom: 4px;
}

.designerOverview_header_left_blk span {
    width: 1px;
    height: 40px;
    background: var(--border-color);
    display: inline-block;
}

.designerOverview_header_left_blk h5 {
    font-size: 24px;
    font-weight: 700;
}

.designerOverview_header_left_blk p {
    font-size: 20px;
    font-weight: 700;
}

.designerOverview_header_right_blk {
    display: inline-flex;
    align-items: end;
    gap: 8px;
}

.designerOverview_header_right_blk .survey_Dots_event a {
    border: 0 none;
}

.designerOverview_header_area .primary_btn {
    font-size: 16px;
    font-weight: 600;
}

/* progress bar  */
.designerOverview_header_progress_area {
    padding: 0px 0px 20px 0px;
}

.progress_bar {
    width: 100%;
    background-color: var(--bg-default);
    border-radius: 6px;
    flex-shrink: 1;
}

.progress-bar-fill {
    display: block;
    height: 8px;
    background-color: var(--bg-primary-default);
    border-radius: 6px;
}

.designerOverview_header_progress_left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.designerOverview_header_progress_left p, .designerOverview_header_progress_left .account_overview_filter{
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.dohp_count {
    color: var(--text-primary);
    font-weight: 700;
}

.dohp_number {
    color: var(--text-main);
    font-weight: 700;
}

.designerOverview_header_progress_wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
}

.designerOverview_hide_part {
    display: none;
}

.designerOverview_header_progress_right {
    display: flex;
    align-items: center;
    gap: 24px;
}

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

.designerOverview_progress_right_text p {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.designerOverview_progress_right_text p span {
    font-weight: 600;
}

.bamboo {
    display: inline-block;
    width: 1px;
    height: 15px;
    background: var(--text-placeholder);
}

.bamboo_v1 {
    display: inline-block;
    width: 1px;
    height: 25px;
    background: var(--border-color);
}

/* audiences overview area  */
.audiences_overview_wrapper {
    background: var(--bg-default);
    border-radius: 2px;
    border: var(--stroke-default);
}

.audiences_overview_header_dashboard
{
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-default);
    padding: 12px;
    border-radius: 4px;
    border-bottom: solid 1px var(--border-color);
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-right: 30px;
    padding-left: 30px;
}
.audiences_overview_header {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-bottom: 4px;
}

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

.goto_select_btn {
    background: var(--bg-default);
    color: var(--text-primary);
}

.goto_select_btn:hover {
    background: var(--bg-default) !important;
    color: var(--stroke-dark-blue);
}

.audiences_overview_external_btn {
    border-radius: 1000px;
    border: 1px solid var(--border-color);
    background: var(--bg-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
}

.goTo_wrapper {
    position: relative;
}

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

.goTo_btn {
    padding: 8px 16px;
    background: var(--bg-default);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    transition: 0.2s;
}

.goTo_btn:hover {
    color: var(--text-white);
    background: var(--bg-primary-default);
}

.goTo_btn:hover i {
    animation: fa-beat 1s infinite;
}

.select_area:hover i {
    animation: fa-beat 1s infinite;
}

.goTo_hover_event {
    width: 500px;
    padding: 16px;
    border: var(--stroke-default);
    box-shadow: var(--box-shadow-2);
    height: 372px;
    overflow: hidden;
    position: absolute;
    right: 0;
    background: var(--bg-default);
    display: none;
    z-index: 10;
}

/* .goTo_hover_event_header {
    font-size: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border-color);
} */

.goTo_search {
    position: relative;
    width: 100%;
    padding-top: 8px;
}

.goTo_search {
    display: inline-block;
}

.goTo_search input {
    width: 100%;
    padding: 9px 36px 9px 12px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.goTo_search input:focus {
    border-color: var(--bg-primary-default);
}

.goTo_search input::placeholder {
    color: var(--text-disabled);
}

.goTo_search .fa-search {
    position: absolute;
    top: 50%;
    left: auto;
    right: 10px;
    transform: translateY(-50%);
    color: var(--text-disabled);
}

.goTo_item {
    overflow: auto;
    height: calc(100% - 75px);
    font-size: 14px;
    scrollbar-color: var(--mo-stroke-9) transparent;
}

.goTo_item::-webkit-scrollbar {
    display: none;
}

.goTo_item li {
    margin-bottom: 4px;
}

.goTo_item li a {
    padding: 8px 16px;
    display: inline-block;
    width: 100%;
}

.goTo_item li a:hover {
    background: var(--bg-primary-default);
    color: var(--text-white) !important;
    border-radius: 4px;
}

/* audience list area start  */

.audiences_survey_list_wrapper {
    padding: 16px;
    border-radius: 4px;
    background: var(--bg-default-1);
    margin-top: 12px;
    margin-bottom: 12px;
}

.audiences_survey_single_list {
    padding: 24px;
    background: var(--bg-default);
    margin-bottom: 16px;
}

.audiences_survey_single_list:last-child {
    margin-bottom: 0;
}

.audiences_setUp_btn {
    background: var(--bg-default);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.audiences_survey_top_blk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.audiences_survey_top_blk_left_area {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.audiences_survey_top_blk_left_area .audiences_survey_flag {
    max-width: 100%;
    height: 38px;
    width: 50.66px;
}

.audiences_survey_top_blk_left_area .audiences_survey_flag img {
    width: 100%;
    height: 100%;
}

.audiences_survey_top_blk_left_area p {
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
}

.audiences_id_date_text {
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: -8px;
    padding-top: 10px;
}

.audiences_id_date_text span {
    font-weight: 700;
    color: var(--text-main);
}

.audiences_id_date_text_bottom {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
}

.audiences_id_date_text_bottom span {
    font-weight: 700;
    color: var(--text-danger);
}

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

/* bottom blk area  */

.audiences_survey_bottom_blk {
    display: flex;
    align-items: center;
    padding-top: 5px;
    justify-content: space-between;
}

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

.audiences_survey_bottom_blk_left_area p {
    font-size: 12px;
}

.audience_setting_status .audience_not_feasible_container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.audiences_survey_bottom_blk_left_area p span {
    font-weight: 600;
}

.audiences_survey_bottom_blk_left_area p span.pppp {
    color: var(--text-main);
}

.audiences_survey_bottom_blk_right_area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audiences_survey_bottom_blk_right_area p {
    font-size: 12px;
}

.audiences_survey_bottom_blk_right_area p span {
    font-weight: 600;
    margin-right: 4px;
}

.audiences_click_events .hide_bottom_audience_part {
    /* display: none; */
}

.audiences_survey_bottom_btn_area {
    padding-top: 16px;
    padding-left: 32px;
    padding-bottom: 16px;
}

.designerOverview_hide_part .aqh_label_primary {
    color: var(--text-primary);
}

/* responsive start */
/* Normal screen :992px. */
@media (min-width: 992px) and (max-width: 1200px) {
    .designerOverview_header_left_blk p {
        font-size: 16px;
    }

    .designerOverview_header_left_blk h5 {
        font-size: 16px;
    }

    .primary_btn {
        padding: 9px 12px;
    }
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .designerOverview_header_left_blk p {
        font-size: 16px;
    }

    .designerOverview_header_left_blk h5 {
        font-size: 16px;
    }

    .primary_btn {
        padding: 9px 12px;
    }

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

    .designerOverview_header_left_blk span {
        display: none;
    }

    .audiences_overview_header {
        flex-direction: column;
    }

    .audiences_survey_bottom_blk_left_area {
        flex-wrap: wrap;
    }
}

/* small screen :320px. */
@media (max-width: 767px) {
    .designerOverview_header_left_blk p {
        font-size: 16px;
        text-align: center;
        margin-bottom: 16px;
    }

    .designerOverview_header_left_blk h5 {
        font-size: 16px;
    }

    .designerOverview_header_wrapper {
        flex-direction: column;
    }

    .designerOverview_header_left_blk span {
        display: none;
    }

    .designerOverview_header_right_blk {
        flex-wrap: wrap;
    }

    .designerOverview_header_left_blk {
        flex-direction: column;
    }

    .designerOverview_header_progress_wrapper {
        flex-direction: column;
    }

    .designerOverview_header_progress_left {
        flex-direction: column;
    }

    .audiences_overview_header {
        flex-direction: column;
    }

    .bamboo {
        display: none;
    }

    .designerOverview_progress_right_text {
        flex-direction: column;
    }

    .designerOverview_header_progress_left {
        gap: 12px;
    }

    .audiences_overview_header_right {
        flex-wrap: wrap;
    }

    .audiences_overview_wrapper {
        padding: 6px;
    }

    .goTo_hover_event {
        width: 280px;
        left: 0;
    }

    .audiences_survey_bottom_blk_left_area {
        flex-wrap: wrap;
    }

    .audiences_survey_bottom_blk {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .audiences_survey_top_blk_left_area .audiences_survey_flag {
        flex-shrink: 0;
    }

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

    .audiences_survey_top_blk_left_area p {
        font-size: 14px;
    }

    .audiences_survey_top_blk {
        align-items: flex-start;
    }

    .audiences_survey_list_wrapper .audienceQuestion_header {
        flex-direction: column-reverse;
    }

    .audiences_survey_list_wrapper .audienceQuestion_header .audienceQuestion_header_right_wrapper {
        flex-wrap: wrap-reverse;
        justify-content: space-between;
    }

    .audiences_survey_list_wrapper .audienceQuestion_header .audienceQuestion_header_left_wrapper {
        justify-content: center;
    }
}

/*! ......................................*************************** questionType modal html part css start from here *****************************.................................  */

.questiontype_modal_area .bbbb_fixed {
    padding-bottom: 24px;
    background: var(--bg-default);
}

.questiontype_modal_area .Common_header_area {
    padding-top: 20px;
    padding-bottom: 24px;
    margin-top: 0;
    margin-bottom: 0;
}

.questiontype_modal_area .container {
    max-width: 1340px;
    width: 100%;
    margin-inline: auto;
}

.questionType_main_blk {
    height: calc(100vh - 145px);
    overflow: auto;
}

.questionType_main_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}

.questionType_right_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    width: 100%;
    height: 80vh;
    background-color: var(--bg-default-1);
}

.questionType_single_cards {
    max-width: 335px;
    width: 100%;
    background: var(--bg-default);
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: var(--Drop-Shadow);
    padding: 24px;
}

.qts_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 21px;
}

.qts_card_header h4 {
    font-size: 16px;
    font-weight: 700;
}

.qts_card_body {
    background: var(--bg-default-1);
    padding: 24px;
    border-radius: 4px;
}

.qts_sample {
    border-radius: 6px;
    background: var(--text-disabled);
    width: 100%;
    height: 16px;
    margin-bottom: 4px;
}

.qts_sample:last-child {
    margin-bottom: 0;
}

.qts_sample_2 {
    width: 40%;
    display: inline-block;
    padding-bottom: 16px;
}

.round {
    position: relative;
    top: 1px;
}

.round label {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
}

.round label:after {
    border: 1px solid var(--border-color);
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 4px;
    opacity: 0;
    position: absolute;
    top: 4px;
    transform: rotate(-45deg);
    width: 9px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
    background-color: var(--bg-primary-default);
    border-color: var(--bg-primary-default);
}

.round input[type="checkbox"]:checked+label:after {
    opacity: 1;
}

.qts_checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 135px;
    width: 100%;
    margin-bottom: 4px;
}

.qts_checkbox_bar {
    width: 100%;
    background: var(--text-disabled);
    height: 12px;
    border-radius: 6px;
    margin-left: 8px;
}

.qts_checkbox_bar.checked {
    background-color: var(--bg-primary-default);
}

.qts_checkbox_bar_2 {
    width: 40%;
}

.qts_checkbox_bar_3 {
    width: 60%;
}

.qts_btn {
    width: 100%;
    background: var(--bg-default);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-top: 16px;
    color: #72727e;
    box-shadow: var(--Drop-Shadow);
    transition: 0.2s;
}

.qts_btn:hover {
    background: var(--hover-bg);
}

.questionType_single_cards:hover {
    border-color: var(--bg-primary-default);
}

.questionType_single_cards:hover .qts_btn {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .questionType_right_wrapper {
        flex-wrap: wrap;
    }
}

/* small screen :320px. */
@media (max-width: 767px) {
    .questionType_main_wrapper {
        flex-direction: column;
    }

    .questionType_right_wrapper {
        flex-wrap: wrap;
    }
}

/*! ......................................*************************** designerDetails html part css start from here *****************************.................................  */

.expand_btn,
.collapse_btn,
.national-represent-list {
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    transition: 0.2s;
    font-size: 12px;
    font-weight: 500;
}

.national-represent-list span {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.expand_btn:hover,
.collapse_btn:hover,
.national-represent-list:hover {
    background: var(--hover-bg-shadow);
}

.collapse_btn {
    border-right: none;
}

.designerOverview_html_file .audiences_survey_list_wrapper {
    padding: 0;
    border-radius: unset;
    background: unset;
}

.designerOverview_html_file .audiences_survey_single_list {
    box-shadow: unset;
    padding: 8px;
    margin-bottom: 4px;
}

.designerDetails_inner_header {
    display: flex;
    align-self: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.designerDetails_inner_header_right button {
    background: none;
}

.designerDetails_inner_header_right button:hover {
    background: var(--hover-bg-shadow);
}

.designerDetails_list_wrapper .survey_list_wrapper {
    padding: 0;
    padding-left: 32px;
    padding-right: 8px;
}

.designerDetails_list_wrapper .survey_list_wrapper ul .survey_parent_li {
    flex-direction: column;
    align-items: start;
}

.survey_tooltip--gear {
    width: 43px;
    height: 32px;
}

.survey_tooltip--pie {
    width: 43px;
    height: 32px;
}

.pie_hover_blk {
    position: relative;
}

.pie_hover_text {
    position: absolute;
    padding: 16px;
    font-weight: 16px;
    font-size: 12px;
    background: var(--bg-default);
    box-shadow: var(--Drop-Shadow);
    border: var(--stroke-default);
    width: 245px;
    right: 0;
    z-index: 1;
    display: none;
}

.designerDetails_click_numbre {
    position: relative;
}

.ddcn_text {
    width: 36px;
    height: 32px;
    border-radius: 1000px;
    background: var(--bg-primary-default);
    color: var(--text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ddcn_hover_blk {
    background: var(--bg-default);
    padding: 16px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    position: absolute;
    width: 180px;
    z-index: 1;
    display: none;
}

.ddcn_hover_blk .bamboo:last-child {
    display: none;
}

.ddcn_main_text {
    font-size: 12px;
    margin-bottom: 8px;
}

.ddcn_main_text span {
    font-weight: 700;
}

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

.designerDetails_list_wrapper .answer_single_child .bamboo {
    margin: 0 4px;
}

.region_more_items {
    font-size: 16px;
    font-weight: bold;
}

.region_more_items span {
    color: var(--text-primary);
}

.external_survey_area {
    margin-top: 48px;
}

.external_survey_wrapper {
    background: var(--bg-default);
    border-radius: 6px;
    border: var(--stroke-default);
    
}

.external_survey_header_wrapper {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-bottom: 4px;
}

.external_survey_footer_wrapper {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.external_survey_test_and_launch_wrapper {
    gap: 8px;
}

.survey_tooltip--history {
    width: 48px;
    height: 40px;
}

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

.external_survey_link_wrapper {
    margin-top: 16px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 16px;
}

.external_input_area input {
    width: 100%;
}

.external_survey_input_field {
    width: 100%;
}

.external_survey_input_field input {
    width: 100%;
}

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

/* small screen :320px. */
@media (max-width: 767px) {
    .external_survey_header_wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .external_survey_wrapper {
        padding: 24px 8px;
    }

    .external_survey_link_wrapper {
        padding: 16px 8px;
    }

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

    .external_check_area {
        margin-top: 16px;
        flex-direction: column;
        align-items: flex-end;
    }
}

/*! ......................................*************************** addElimination html part css start from here *****************************.................................  */

.addElimination_html_file .container {
    max-width: 1024px;
    width: 100%;
    margin-inline: auto;
}

.addElimination_main_area_wrapper {
    background: var(--bg-default-1);
    padding: 16px;
}

.addElimination_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
}

.addElimination_header_left {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.addElimination_header_left .search_component input {
    height: 32px;
}

.addElimination_accordion_wrapper {
    height: auto;
    overflow: auto;
}

.addElimination_accordion_single_wrapper {
    padding: 8px;
    background: var(--bg-default-1);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}

.addElimination_accordion_single_wrapper:last-child {
    margin-bottom: 0;
}

.addElimiation_accordion_header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    cursor: pointer;
}

.addElimiation_accordion_header_title {
    font-size: 16px;
    font-weight: 700;
}

.addElimiation_accordion_body {
    padding-left: 40px;
    padding-right: 8px;
}

.addElimiation_accordion_body_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.addElimiation_accordion_body_header h3 {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 0;
}

.addElimination_accordion_check_blk {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.addElimination_accordion_check_blk p span {
    color: var(--text-muted);
    font-size: 14px;
}

.addElimiation_accordion_body ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.addElimiation_accordion_body ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.addElimination_accordion_count {
    width: 65px;
}

.addElimination_pagination_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
}

.addElimination_pagination_wrapper p {
    font-size: 12px;
}

.addElimination_pagination_wrapper p span {
    font-weight: 700;
}

.addElimination_items_per_page button {
    padding: 9px 14px;
    transition: 0.2s;
    border-radius: 6px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 700;
}

.addElimination_items_per_page button:hover {
    background: var(--bg-default);
}

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

.addElimination_pagination_btn_blk button {
    padding: 8px 14px;
    transition: 0.2s;
    border-radius: 4px;
}

.addElimination_pagination_btn_blk button i {
    font-size: 12px;
}

.addElimination_pagination_btn_blk button:hover {
    background: var(--bg-default-1);
}

.apbb_arrow_img {
    width: 12px;
}

.custom_footer_area {
    padding-top: 24px;
    padding-bottom: 40px;
}

/* responsive css  */
/* small screen :320px. */
@media (max-width: 767px) {
    .addElimination_header {
        flex-direction: column;
    }

    .addElimination_header_left {
        flex-direction: column;
    }

    .addElimination_accordion_check_blk p {
        font-size: 12px;
    }

    .addElimination_accordion_count {
        width: unset;
        font-size: 12px;
    }

    .addElimiation_accordion_header_title {
        font-size: 14px;
    }

    .addElimiation_accordion_body {
        padding-left: 0;
    }

    .addElimination_pagination_wrapper {
        flex-direction: column;
    }
}

/*! ......................................*************************** uploadUser html part css start from here *****************************.................................  */

.uploadUser_html_file .container {
    max-width: 1024px;
    width: 100%;
    margin-inline: auto;
}

.uploadUser_input_blk {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
}

.uploadUser_input_blk label {
    font-size: 16px;
    font-weight: 700;
}

.uploadUser_input_blk input {
    height: 40px;
}

.uploadUser_textarea_blk textarea {
    resize: none;
    width: 100%;
    min-height: 536px;
    padding: 9px 12px;
    outline: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: 0.2s;
}

.uploadUser_textarea_blk textarea:focus {
    border-color: var(--border-primary);
}

.uploadUser_warn_text {
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 16px;
    display: inline-block;
}

/*! ......................................*************************** answerPopulation (statistic) html part css start from here *****************************.................................  */

.answerPopulation_html_file .container {
    max-width: 1024px;
    width: 100%;
    margin-inline: auto;
}

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

.answerPopulation_search_area {
    padding: 24px 0;
}

.answerPopulation_search_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.answerPopulation_search_wrapper .search_component {
    max-width: 361px;
    width: 100%;
}

.answerPopulation_search_wrapper .search_component input {
    height: 40px;
}

.answerPopulation_search_wrapper .pill_components {
    flex-shrink: 0;
}

.answerPopulation_search_wrapper .pill_components span {
    color: var(--text-primary);
}

.answerPopulation_statistic_wrapper {
    /* background: var(--bg-default-1);
    padding: 16px;
    border-radius: 6px; */
}

#feasbility-questions-container .answerPopulation_statistic_wrapper {
    background: transparent !important;
    padding: 16px;
    /* border: 1px solid var(--border-color); */
    border-radius: 4px;
}

.answerPopulation_statistic_header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-right: 24px;
    margin-bottom: 4px;
}

.answerPopulation_statistic_header h4 {
    font-size: 12px;
    font-weight: 700;
}

.answerPopulation_statistic_header .apsh_1 {
    flex-grow: 1;
}

.answerPopulation_statistic_header .apsh_2,
.answerPopulation_statistic_header .apsh_3 {
    max-width: 75px;
    width: 100%;
}

.answerPopulation_statistic_wrapper ul {
    overflow: auto;
}

.answerPopulation_statistic_wrapper ul::-webkit-scrollbar {
    display: none;
}

.answerPopulation_statistic_wrapper ul li {
    background: #F4F4F5;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.answerPopulation_statistic_wrapper ul li:last-child {
    margin-bottom: 0;
}

.answerPopulation_statistic_wrapper ul li .apsh_title {
    flex-grow: 1;
}

.answerPopulation_statistic_wrapper ul li .apsh_summary {
    max-width: 75px;
    width: 100%;
}

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

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

.answerPopulation_statistic_wrapper .progress_bar {
    background-color: var(--bg-default-1);
}

.if_apsh_warning {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* responsive css  */
/* small screen :320px. */
@media (max-width: 767px) {
    .answerPopulation_search_wrapper {
        flex-direction: column;
    }

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

    .answerPopulation_html_file .Common_header_wrapper {
        align-items: flex-start;
    }

    .answerPopulation_html_file .Common_header_wrapper .nav__line {
        position: relative;
        top: 16px;
    }

    .answerPopulation_statistic_header {
        padding-right: 0;
        gap: 20px;
        justify-content: space-between;
    }

    .answerPopulation_statistic_wrapper ul li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .apsh_summary_number .bamboo {
        display: inline-block;
    }
}

/*! ......................................*************************** respondentInfo html part css start from here *****************************.................................  */

.respondentInfo_input_area {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 16px;
}

.respondentInfo_input_area input {
    max-width: 767px;
    width: 100%;
    height: 40px;
}

.respondentInfo_input_area input::placeholder {
    color: var(--text-placeholder);
}

.share_results_btn {
    background: var(--bg-secondary-default);
    color: var(--text-white);
    gap: 8px;
}

.share_results_btn:hover {
    background: var(--bg-secondary-default);
    color: var(--text-white);
}

.nav_flex_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 0;
}

.respondentInfo_table_area {
    padding-bottom: 64px;
}

.respondentInfo_table_area table tr th div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status_pill {
    border-radius: 1000px;
    border: 1px solid var(--stroke-success-default);
    background: var(--bg-success-default);
    color: var(--text-white);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    font-weight: 700;
}

.run_table_btn {
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid var(--stroke-secondary-default);
    width: 51px;
    height: 32px;
}

.respondentInfo_table_area_wrapper {
    background: var(--bg-default);
    border-radius: 4px;
    padding: 24px;
}

.respondentInfo_table_area .addElimination_pagination_wrapper {
    justify-content: flex-end;
    gap: 49px;
}

.hide_run_btn_blk {
    display: none;
}

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

.survey_tooltip--arrowRepeat {
    width: 38px;
    height: 32px;
}

.survey_tooltip--chart {
    width: 38px;
    height: 32px;
}

.table_btn_chart {
    position: relative;
}

.table_btn_chart_details {
    width: 141px;
    background: var(--bg-default);
    border: var(--stroke-default);
    padding: 16px;
    box-shadow: var(--Drop-Shadow);
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

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

.table_btn_chart_details li span {
    font-size: 12px;
}

/*! ......................................*************************** progress html part css start from here *****************************.................................  */

.progressHtml_main_area {}

/* left side  */

.in_setup {
    border: 1px solid var(--border-color);
}

.live_btn,
.change_to_activate_from_stopped {
    color: var(--text-success-default);
    gap: 8px;
}

.change_status_ul li:has(.live_btn):hover {
    background: rgba(107, 176, 33, 0.2);
}

.change_status_ul li:has(.cancelled_btn):hover {
    background: var(--hover-bg-shadow);
}

.change_status_ul li:has(.pending_launch_btn):hover {
    background: var(--hover-bg-shadow);
}

.change_status_ul li:has(.change_to_activate_from_stopped):hover {
    background: rgba(107, 176, 33, 0.2);
}

.change_status_ul li:has(.live_btn):hover+li {}

.change_status_ul li:has(.change_to_activate_from_stopped):hover+li {}

/* .live_btn:hover, .change_to_activate_from_stopped:hover {
    background: rgba(107, 176, 33, 0.2);
} */




.paused_btn {
    color: var(--text-warning-1);
    gap: 8px;
}

.change_status_ul li:has(.paused_btn):hover {
    background: rgba(255, 166, 0, 0.1);
}

.change_status_ul li:has(.paused_btn):hover+li {}

.stopped_btn {
    color: var(--bg-secondary-default);
    gap: 8px;
}

.change_status_ul li:hover:has(.stopped_btn) {
    background: var(--stroke-secondary-2);
}

.stopped_btn i {
    color: var(--bg-secondary-default);
}

.suspended_btn {
    color: var(--text-danger);
    gap: 8px;
}

.mo_status_btn.suspended_btn:hover {
    background: var(--bg-danger-2);
}

.suspended_btn i {
    color: var(--text-danger);
}


.finished_btn {
    border: 1px solid var(--bg-secondary-default);
    color: var(--bg-secondary-default);
    gap: 8px;
}


.change_status_ul li:hover:has(.finished_btn) {
    background: rgba(51, 61, 96, 0.2);
    border: 1px solid var(--bg-secondary-default);
}


.canceled_btn {
    border: 1px solid var(--stroke-danger-default);
    color: var(--stroke-danger-default);
    gap: 8px;
}

.canceled_btn:hover {
    background: rgba(217, 38, 83, 0.2);
    border: 1px solid var(--stroke-danger-default);
}

.launch_btn {
    border: 1px solid var(--bg-primary-default);
    color: var(--bg-primary-default);
    background: var(--bg-default);
    gap: 8px;
    font-weight: 500;
}

.launch_btn:hover {
    background: var(--hover-bg-shadow);
    border: 1px solid var(--bg-primary-default);
}

/* rigth side  */
.single_progressHtml_right_wrapper {
    padding: 16px 24px;
    border-radius: 4px;
    border: var(--stroke-default);
}

.sprw_1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
}

.sprw_1 p {
    font-size: 20px;
    font-weight: 700;
}

.sprw_1 p:last-child {
    color: var(--text-main);
}

.sprw_2 {
    color: var(--text-muted);
    line-height: 22px;
    padding-bottom: 24px;
}

.sprw_3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.sprw_3>div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sprw_3 .fa-circle-play {
    color: var(--text-disabled);
}

.sprw_3>div p {
    font-weight: 700;
}

.sprw_3 span {
    font-weight: 700;
}

.sprw_4 {
    display: block;
    width: 100%;
    border-radius: 4px;
    /* overflow: hidden; */

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

    padding: 24px 0;
}

.prhcb {
    width: 100%;
    height: 44px;
    display: inline-block;
}

.prhcb:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.prhcb:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.sprw_4 .prhcb {
    width: 16.667%;
}

.progressHtml_child_bg_1 {
    background-color: var(--text-danger);
}

.progressHtml_child_bg_2 {
    background-color: var(--orange-300);
}

.progressHtml_child_bg_3 {
    background-color: var(--orange-400);
}

.progressHtml_child_bg_4 {
    background-color: var(--orange-500);
}

.progressHtml_child_bg_5 {
    background-color: var(--blue-300);
}

.progressHtml_child_bg_6 {
    background-color: var(--green-300);
}

.progressHtml_child_bg_7 {
    background-color: var(--bg-primary-default);
}

.progressHtml_child_bg_8 {
    background-color: var(--bg-default-1);
}

.progressHtml_child_bg_9 {
    background-color: var(--stroke-secondary-2);
}

.progressHtml_child_bg_10 {
    background-color: #73BF9B;
}

.progressHtml_child_bg_11 {
    background-color: #DBEEE7;
}

.single_progressHtml_right_wrapper ul li, .survey_starts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border: var(--stroke-default);
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 4px;
    background: var(--bg-default);
}

.single_progressHtml_right_wrapper ul li:last-child {
    border-bottom: var(--stroke-default);
}

.single_progressHtml_right_wrapper ul li:first-child .sprw_li_right span {
    font-size: 12px;
    font-weight: 700;
}

.progressAudience_statistic_field_sample .single_progressHtml_right_wrapper ul li:first-child .sprw_li_right span:first-child {
    width: unset;
    margin-right: 8px;
    font-weight: 700;
}

.progressAudience_statistic_field_sample .single_progressHtml_right_wrapper ul li .sprw_li_right span:first-child {
    width: unset;
    margin-right: 8px;
    font-weight: 700;
}

.sprw_li_right span {
    display: inline-block;
    text-align: right;
    width: 60px;
    font-weight: 700;
}

.sprw_li_right {
    font-size: 16px !important;
}

.sprw_li_left {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.sprw_li_left p {
    font-weight: 700;
    font-size: 14px;
}

.sprw_li_left span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.sprw_li_left_1 span {
    background: var(--red-300);
}

.sprw_li_left_2 span {
    background: var(--orange-300);
}

.sprw_li_left_3 span {
    background: var(--orange-400);
}

.sprw_li_left_4 span {
    background: var(--orange-500);
}

.sprw_li_left_5 span {
    background: var(--blue-300);
}

.sprw_li_left_6 span {
    background: var(--green-300);
}

.single_progressHtml_left_wrapper .audiences_survey_top_blk_right_area {
    gap: 8px;
}

.single_progressHtml_left_wrapper .audienceQuestion_header_left_wrapper {
    flex-wrap: wrap;
    align-items: flex-start;
}

.single_progressHtml_left_wrapper .audienceQuestion_header {
    align-items: flex-start;
}

.single_progressHtml_left_wrapper .audienceQuestion_header_right_wrapper {
    align-items: flex-start;
}

.single_progressHtml_left_wrapper .survey_tooltip--minus {
    margin-top: 20px;
}

.progressHtml_main_area .audiences_overview_wrapper {
    /* border: var(--stroke-default); */
}

.audiences_survey_single_list .designerOverview_header_progress_wrapper {
    padding-top: 16px;
}

.audiences_survey_single_list .designerOverview_header_progress_wrapper .progress_bar {
    background: var(--bg-default-1);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .single_progressHtml_left_wrapper .audiences_survey_bottom_blk {
        align-items: flex-start;
    }

    .single_progressHtml_left_wrapper .audiences_survey_bottom_blk_right_area {
        width: 100%;
        justify-content: space-between;
    }

    .nav_flex_wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .custom_nav_wrapper li a {
        font-size: 12px;
        padding: 9px 7px !important;
        font-weight: 500;
    }

    .single_progressHtml_right_wrapper {
        padding: 16px 8px;
    }

    .sprw_1 p {
        font-size: 16px;
    }

    .single_progressHtml_right_wrapper .bamboo {
        display: inline-block !important;
    }

    .sprw_li_left {
        gap: 8px;
    }

    .sprw_li_left p {
        font-size: 14px;
    }
}

/*! ......................................*************************** progressAudience html part css start from here *****************************.................................  */

.progressAudience_main_wrapper {
    background: var(--bg-default);
    padding: 0px !important;
    /* border-radius: 4px;
    border: var(--stroke-default); */
}

.progressAudience_main_area .audiences_overview_wrapper {
    padding: 0;
}

.progressAudience_filter_area {
    display: flex;
    align-items: center;
    padding: 24px;
    gap: 12px;
    padding-bottom: 12px;
}

.progressAudience_filter_title {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.progressAudience_filter_input {
    position: relative;
}

.progressAudience_filter_input .fa-caret-down {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}

.progressAudience_filter_input input {
    padding-right: 25px;
    height: 40px;
}

.progressAudience_filter_title .select_area {
    width: 225px;
}

.progressAudience_main_area .audiences_survey_single_list {
    padding: 0;
}

.progressAudience_main_area .audiences_survey_single_list {
    box-shadow: unset;
}

.progressAudience_main_area .designerOverview_header_progress_left {
    margin-top: 8px;
}

.progressAudience_main_area .progress_bar {
    background: var(--bg-default-1);
}

.progressAudience_main_area .single_progressHtml_right_wrapper {
    /* border: unset; */
}

.progressAudience_statistic_wrapper {
    background: var(--bg-default-1);
    padding: 24px;
    border-radius: 4px;
}

.progressAudience_statistic_field_sample {
    border-radius: 4px;
}

.progressAudience_statistic_wrapper .sprw_1 p:last-child {
    color: var(--text-main);
}

.progressAudience_shedule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-default-1);
    border: var(--stroke-default);
    border-radius: 4px;
    margin-bottom: 16px;
}

.progressAudience_shedule_left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.progressAudience_shedule_right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.progressAudience_shedule_date_blk {
    display: flex;
    align-items: center;
    gap: 24px;
}

.progressAudience_shedule_calander_img {
    width: 45px;
}

.progressAudience_shedule_calander_img img {
    width: 100%;
    height: 100%;
}

.progressAudience_shedule_clock_img {
    width: 45px;
}

.progressAudience_shedule_clock_img img {
    width: 100%;
    height: 100%;
}

.progressAudience_shedule_date span {
    font-size: 12px;
    color: var(--text-muted);
}

.progressAudience_shedule_date p {
    font-size: 16px;
    font-weight: 700;
}

.progressAudience_shedule_date_blk .bamboo {
    height: 45px;
    background: var(--border-color);
}

.progressAudience_shedule_date.pasd_align_text {
    text-align: right;
}

.progressAudience_tab_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
}

.progressAudience_tab_header h5 {
    font-size: 20px;
    font-weight: 700;
}

.tabContainer {
    padding: 16px 12px;
}

.tab_buttons button {
    padding: 9px 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding-top: 0px;
    padding-bottom: 0px;
}

.tab_pannels {
    display: none;
}

.tab_buttons button.active {
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--bg-primary-default);
}

.tab_pannels_header_text {
    padding-bottom: 6px;
    color: var(--text-muted);
}

.progressAudience_tab_wrapper {
    border-radius: 4px;
    padding-left: 0px;
}

.progressAudience_tab_elements {
    background: var(--bg-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.progressAudience_tab_elements:last-child {
    margin-bottom: 0;
}

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

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

.pate_single_time_blk {
    text-align: center;
    padding: 8px 0;
    width: 80px;
}

.pate_single_time_blk p:first-child {
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pate_single_time_blk p:first-child span {
    display: inline-block;
    font-size: 12px;
}

.pate_single_time_blk p {
    font-size: 12px;
}

.progress_warning {
    color: var(--text-warning-default);
}

.progress_success {
    color: var(--text-success-default);
}

.progress_danger {
    color: var(--text-danger);
}

.pate_vs {
    font-size: 12px;
    color: var(--text-muted);
}

.pate_divider {
    display: inline-block;
    min-height: 60px;
    height: 100%;
    width: 1px;
    background: var(--border-color);
}

.progressAudience_tab_list_title {
    font-weight: 700;
    font-size: 14px;
}

.tab_pannels_chart_wrapper {
    background: var(--bg-default);
    padding: 24px;
    border-radius: 4px;
}

.tab_pannels_chart_contents {
    display: flex;
    height: 100%;
    gap: 24px;
}

.tab_pannels_chart_left_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: var(--stroke-default);
    border-radius: 4px;
    width: 200px;
    flex-shrink: 0;
    height: auto;
}

.tab_pannels_chart_left_contents h5 {
    font-size: 32px;
    font-weight: 700;
}

.tab_pannels_chart_img {
    max-width: 100%;
    padding-top: 24px;
}

.tab_pannels_chart_img img {
    width: 100%;
    height: 100%;
}

.tab_pannels_chart_text {
    color: var(--text-muted);
    padding-bottom: 16px;
}

.tab_pannels_chart_right_contents ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.tab_pannels_chart_right_contents ul li>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab_pannels_chart_right_contents ul li {
    border-top: var(--stroke-default);
}

.tab_pannels_chart_right_contents ul li:last-child {
    border-bottom: var(--stroke-default);
}

.tab_pannels_chart_right_contents ul li h4 {
    font-size: 16px;
    font-weight: 700;
}

.tab_pannels_chart_right_contents ul li h4 span {
    color: var(--text-primary);
}

.tab_pannels_chart_right_contents ul li>div p {
    font-weight: 700;
}

.tab_pannels_chart_right_contents ul li>div span {
    width: 60px;
    text-align: right;
}

.progressAudience_recommended_wrapper {
    padding-top: 16px;
}

.progressAudience_recommended_left {
    background: var(--bg-default);
    border: var(--stroke-default);
    padding: 24px;
    border-radius: 6px;
}

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

.progressAudience_recommended_left_text {
    font-size: 14px;
    color: var(--text-muted);
    padding: 16px 0;
}

.progressAudience_recommended_lists {
    background: var(--bg-default-1);
    border-radius: 4px;
}

.prc_single_blk {
    background: var(--bg-default);
    padding: 16px 24px;
    border-radius: 4px;
    border: var(--stroke-default);
    margin-bottom: 8px;
}

.prc_single_blk:last-child {
    margin-bottom: 0;
}

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

.prc_single_btns_blk>div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prc_single_btns_blk>div button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    padding: 8px 24px;
    color: var(--text-white);
    font-size: 12px;
    font-weight: 700;
}

.prc_single_blk:nth-child(1) .prc_single_btns_blk>div button {
    background: var(--text-danger);
}

.prc_single_blk:nth-child(2) .prc_single_btns_blk>div button {
    background: var(--bg-secondary-default);
}

.prc_single_blk:nth-child(3) .prc_single_btns_blk>div button {
    background: var(--bg-success-default);
}

.recom_main_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 8px 24px;
    color: var(--text-white);
    font-size: 12px;
    font-weight: 700;
    max-width: 150px;
    width: 100%;
}

.prc_single_blk:nth-child(1) .prc_single_btns_blk .recom_main_btn {
    border: 1px solid var(--text-danger);
    color: var(--text-danger);
}

.prc_single_blk:nth-child(2) .prc_single_btns_blk .recom_main_btn {
    border: 1px solid var(--stroke-secondary-default);
    color: var(--bg-secondary-default);
}

.prc_single_blk:nth-child(3) .prc_single_btns_blk .recom_main_btn {
    border: 1px solid var(--stroke-success-default);
    color: var(--text-success-default);
}

.prc_single_text {
    color: var(--text-muted);
    padding-top: 16px;
    font-size: 12px;
}

.progressAudience_recommended_right {
    background: var(--bg-default-1);
    border: var(--stroke-default);
    padding: 24px;
    border-radius: 6px;
}

.progressAudience_recommended_right_text {
    font-size: 12px;
    color: var(--text-muted);
    padding: 16px 0;
}

.progressAudience_recommended_right_time_blk .pate_time_blk {
    justify-content: space-between;
}

.progressAudience_recommended_right_time_blk .pate_single_time_blk {
    flex-shrink: 0;
}

.progressAudience_recommended_right_time_blk .pate_single_time_blk {
    max-width: 100%;
    width: max-content;
}

.pate_single_special_usd {
    padding: 8px 32px;
}

.pate_single_special_usd_green {
    color: var(--text-success-default);
}

/* Big screen :1200px. */
@media (min-width: 1440px) and (max-width: 1700px) {
    .pate_single_special_usd {
        padding: 8px 12px;
    }

    .progressAudience_recommended_right_time_blk .pate_time_blk {
        gap: 8px;
    }

    .progressAudience_recommended_right_time_blk .pate_time_wrapper {
        gap: 12px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .progressAudience_recommended_right_time_blk .pate_time_blk {
        flex-direction: column;
    }

    .tab_buttons button {
        padding: 9px 8px;
        padding-bottom: 5px;
    }

    .tabContainer {
        padding: 16px 16px;
    }

    .progressAudience_tab_header h5 {
        font-size: 18px;
    }

    .progressAudience_tab_elements .pate_time_wrapper {
        gap: 4px;
    }

    .progressAudience_tab_elements .pate_time_blk {
        gap: 8px;
    }

    .prc_single_blk {
        padding: 16px;
    }

    .prc_single_blk .topic_title {
        font-size: 16px;
    }
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .progressAudience_recommended_right_time_blk .pate_time_blk {
        flex-direction: column;
    }
}

/* small screen :320px. */
@media (max-width: 767px) {
    .progressAudience_shedule {
        flex-direction: column;
        gap: 12px;
    }

    .progressAudience_tab_header {
        flex-direction: column;
        gap: 8px;
    }

    .progressAudience_shedule_left {
        flex-direction: column;
        gap: 8px;
    }

    .progressAudience_shedule_right {
        flex-direction: column-reverse;
        gap: 8px;
        justify-content: center;
        margin-top: 12px;
    }

    .progressAudience_shedule_date {
        text-align: center;
    }

    .progressAudience_shedule_date.pasd_align_text {
        text-align: center;
    }

    .progressAudience_shedule_date_blk {
        flex-direction: column;
        gap: 8px;
    }

    .prc_single_btns_blk>div {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .prc_single_btns_blk {
        flex-direction: column;
    }

    .progressAudience_recommended_right_time_blk .pate_time_blk {
        flex-direction: column;
    }

    .progressAudience_recommended_right_time_blk .pate_time_wrapper {
        flex-direction: column;
        gap: 0;
    }

    .progressAudience_recommended_right_time_blk .pate_divider {
        min-height: 26px;
    }

    .progressAudience_tab_elements {
        flex-direction: column;
        padding: 10px;
        box-shadow: var(--Drop-Shadow);
    }

    .progressAudience_tab_elements .pate_time_blk {
        flex-direction: column;
        gap: 0;
    }

    .progressAudience_tab_elements .pate_divider {
        display: none;
    }

    .tab_pannels_chart_contents {
        flex-direction: column;
    }

    .tab_pannels_chart_left_contents {
        padding: 10px 0;
        margin-inline: auto;
    }

    .tab_pannels_chart_right_contents ul li {
        flex-direction: column;
        gap: 12px;
        box-shadow: var(--Drop-Shadow);
    }

    .tab_pannels_chart_wrapper {
        padding: 0;
    }

    .progressAudience_main_wrapper {
        padding: 0;
    }

    .progressAudience_statistic_wrapper {
        padding: 0;
    }

    .progressAudience_recommended_left {
        padding: 0;
    }

    .progressAudience_recommended_right {
        padding: 12px 8px;
    }

    .prc_single_blk {
        padding: 16px 8px;
        box-shadow: var(--Drop-Shadow);
    }

    .progressAudience_filter_title {
        flex-direction: column;
    }

    .progressAudience_filter_area {
        flex-direction: column;
    }

    .progressAudience_filter_area {
        gap: 6px;
    }
}

/*! ......................................*************************** recontacts html part css start from here *****************************.................................  */

.recontacts_html_file .container {
    max-width: 940px;
    width: 100%;
    margin-inline: auto;
}

.recontacts_main_area {
    padding-top: 24px;
}

.recontacts_main_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px dotted var(--border-color);
    padding-bottom: 8px;
}

.recontacts_header_wrapper {
    padding: 8px 16px;
    border-radius: var(--border-radius-sm, 4px);
    border: var(--stroke-default);
    background: var(--bg-dark-grey);
}

.recontacts_pill_area {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.recontacts_pill_area .pill_components {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--stroke-primary);
}

.recontacts_pill_area span i {
    font-size: 24px;
    cursor: pointer;
    color: var(--border-color);
    background: var(--bg-default);
}

.recontacts_pill_area span i.fa-square-check {
    color: var(--bg-primary-default);
}

.custom_check_enable_style {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.custom_check_enable_style .pill_components {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--stroke-primary);
}

.custom_check_enable_style span i {
    font-size: 24px;
    cursor: pointer;
    color: var(--border-color);
    background: var(--bg-default);
}

.custom_check_enable_style span i.fa-square-check {
    color: var(--bg-primary-default);
}

.recontacts_main_header .topic_title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.recontacts_header_text {
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 8px;
}

/* .recontacts_header_wrapper ul  */

.recontacts_header_wrapper ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    width: 100%;
}

.recontacts_header_wrapper ul li:last-child {
    margin-bottom: 0;
}

.recontacts_header_wrapper ul li input[type="radio"] {
    position: absolute;
    visibility: hidden;
}

.recontacts_header_wrapper ul li label {
    position: relative;
    z-index: 9;
    cursor: pointer;
    margin-left: 35px;
    margin-top: 2px;
}

.recontacts_header_wrapper ul li .check {
    position: absolute;
    border: 1px solid var(--border-color);
    border-radius: 100%;
    height: 25px;
    width: 25px;
    z-index: 5;
}

.recontacts_header_wrapper ul li .check::before {
    position: absolute;
    content: "";
    border-radius: 100%;
    height: 15px;
    width: 15px;
    inset: 0;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

.recontacts_header_wrapper input[type="radio"]:checked~.check {
    border: 1px solid var(--bg-primary-default);
}

.recontacts_header_wrapper input[type="radio"]:checked~.check::before {
    background: var(--bg-primary-default);
}

.recontacts_header_wrapper input[type="radio"]:checked~label {
    color: var(--text-main);
    font-weight: 700;
}

/* recontacts_tab start */
.recontacts_tab {
    background: var(--bg-default-1);
    border-radius: 4px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--border-color);
}

.recontacts_tab .tabContainer {
    padding: 0;
}

.recontacts_tab_btn {
    padding-top: 16px;
    border-top: var(--stroke-default);
    margin-top: 16px;
}

.recontacts_tab_1_contents {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.recontacts_tab_1_contents span {
    color: var(--text-disabled);
}

.recontacts_tab_2_contents ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-default);
    border-radius: 4px;
}

.recontacts_tab_2_contents ul li>p {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.survey_tooltip--trash {
    width: 40px;
    height: 32px;
}

.recontacts_tab_2_contents ul li>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.recontacts_tab_2_contents ul li>div p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.recontacts_html_file .bbbb_fixed {
    background: var(--bg-default);
    z-index: 99;
}

.recontacts_main_area {
    padding-bottom: 100px;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .recontacts_header_wrapper {
        padding: 0;
    }

    .recontacts_header_wrapper ul li label {
        font-size: 12px;
    }

    .recontacts_tab_2_contents ul li {
        flex-direction: column;
    }
}

/*! ......................................*************************** Dashboard html part css start from here *****************************.................................  */

#dashboard_nav_notify {
    border: 1px solid var(--stroke-danger-default);
    border-radius: 6px;
    color: var(--text-danger);
    font-weight: 700;
    position: relative;
    padding: 7px 17px;
    margin-right: 16px;
}

#dashboard_nav_notify::before {
    content: " ";
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--border-color);
    left: -16px;
    top: 0;
    bottom: 0;
    z-index: 99;
}

.survey_tooltip--address-book {
    width: 48px;
    height: 40px;
}

.survey_tooltip--user-slash {
    width: 52px;
    height: 40px;
}

.dashboard_flex_wrapper {
    padding-top: 24px;
    padding-bottom: 100px;
}

/* dashboard main part start */
.dashboard_project_item_header {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
    padding-bottom: 24px;
}

.dashboard_project_item_header p {
    font-size: 28px;
    font-weight: 500;
}

.dashboard_project_item_header p span {
    color: var(--text-primary);
}

.dashboard_item_header_blk {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding-bottom: 24px;
}

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

.dashboard_search_area .chosen_select_wrapper {
    width: 200px;
}

.dashboard_search_area .search_component {
    width: 435px;
}

.dashboard_search_area .search_component input {
    height: 40px;
}

.dashboard_project_items_blk {
    padding: 24px;
    background: var(--bg-default);
    border-radius: 6px;
    border: var(--stroke-default);
}

.dashboard_single_item {
    padding-top: 8px;
}

.dashboard_single_item3 .dashboard_single_item_content {
    margin-bottom: 12px;
}

.dashboard_single_item:first-child {
    padding-top: 0;
}

.dashboard_single_item_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}

.dashboard_single_item_header .dsi_count {
    padding: 7px 14px;
    border-radius: 1000px;
    border: 1px solid var(--border-color);
    background: var(--bg-default);
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
}

.dashboard_single_item_header h6 {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.dashboard_single_item_content {
    padding: 12px 16px 0px 16px;
    border-radius: 6px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
}

.dashboard_click_audience {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.designerOverview_progress_click_event.active {
    padding-left: 16px;
}

.dashboard_click_audience .bamboo {
    height: 32px;
    background: var(--border-color);
}

.open_dashboard_btn {
    padding: 8px 14px;
    box-shadow: var(--mo-box-shadow-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: var(--bg-default-1);
    transition: 0.2s;
}

.open_dashboard_btn i {
    color: var(--text-muted);
    font-size: 12px;
}

.open_dashboard_btn span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}

.open_dashboard_btn:hover {
    border-color: var(--border-primary);
}

.open_dashboard_btn:hover i {
    color: var(--text-gray-1);
}

.open_dashboard_btn:hover span {
    color: var(--text-gray-1);
}

.open_dashboard_btn:active {
    background: var(--bg-secondary-2);
}

.dashboard_single_item_content .designerOverview_progress_click_event {
    padding-bottom: 12px;
}

.open_dashboard_header {
    font-size: 16px;
    font-weight: 600;
}

.dashboard_items_wrapper .audiences_survey_bottom_blk {
    padding-top: 8px;
}

.dashboard_open_hide_blk {
    display: none;
    padding-bottom: 16px;
}

.dashboard_open_hide_blk .audiences_survey_list_wrapper {
    border-left: 6px solid var(--border-color);
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    background: var(--bg-default);
}

/* .dashboard_open_hide_blk .audiences_setUp_btn {
    border: 1px solid var(--border-color);
    gap: 8px;
}

.dashboard_open_hide_blk .audiences_setUp_btn:hover {
    border-color: var(--border-primary);
    color: var(--text-main);
}

.dashboard_open_hide_blk .audiences_setUp_btn:focus {
    border-color: var(--border-primary);
    color: var(--text-main);
} */

/* setup click event content */

.setUp_btn_blk {
    position: relative;
}

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

.setup_click_content {
    width: 220px;
    border: var(--stroke-default);
    border-radius: 4px;
    box-shadow: var(--Drop-Shadow);
    padding: 8px;
    background: var(--bg-default);
    position: absolute;
    top: 45px;
    right: 0;
    display: none;
    z-index: 1;
}

.setup_click_content>div {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup_click_content p {
    font-size: 12px;
    color: var(--text-gray-1);
}

.setup_click_content p a {
    color: var(--text-danger);
    font-weight: 700;
    text-transform: capitalize;
}

.setup_click_content button {
    display: inline-flex;
    width: 100%;
    font-weight: 700;
}

.paused_btn {
    border-color: var(--orange-500);
    color: var(--orange-500);
    text-transform: capitalize;
    border-width: 1px;
}

/* .paused_btn:hover {
    background: rgba(255, 166, 0, 0.1);
} */

/* dashboard aside part start */
.dashboard_aside_wrapper {
    max-width: 370px;
    width: 100%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard_aside_notify_blk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    border-radius: 6px;
    background: var(--bg-default);
    border: var(--stroke-default);
}

.dashboard_aside_notify_blk span i {
    color: var(--text-danger);
    font-size: 40px;
}

/* single blk aside */
.dashboard_aside_single_wrapper {
    border: var(--stroke-default);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-default);
}

.dashboard_aside_single__thumb img {
    max-width: 100%;
}

.dashboard_aside_single__content {
    padding: 24px;
}

.dashboard_aside_single__content h2 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 22px;
}

.dashboard_aside_single__content p {
    color: var(--text-muted);
}

.dasc_date {
    display: inline-block;
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 2px dotted var(--border-color);
    width: 100%;
    margin-bottom: 8px;
}

.dasc_top_date {
    display: inline-block;
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 8px;
}

.dashboard_faq_content {
    padding-bottom: 20px;
    border-bottom: var(--stroke-default);
    margin-bottom: 20px;
}

.dasc_news h2 {
    margin-bottom: 0;
    padding-top: 8px;
}

/*! ......................................*************************** DashboardEmpty html part css start from here *****************************.................................  */

.dashboard_flex_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.dashboard_project_item_wrapper {
    width: 100%;
    position: sticky;
    top: 0;
}

.emptyDashboard_wrapper {
    padding: 24px;
    border-radius: 6px;
    background: var(--bg-default);
    border: var(--stroke-default);
}

.emptyDashboard_content {
    padding: 96px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emptyDashboard_blk {
    text-align: center;
}

.dashboard_logo {
    width: 84px;
    margin-inline: auto;
}

.dashboard_logo img {
    width: 100%;
    height: 100%;
}

.emptyDashboard_blk p {
    color: var(--text-muted);
    padding: 40px 0;
}

.emptyDashboard_blk p span {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-placeholder);
    position: relative;
}

.emptyDashboard_blk p span::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 1px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--border-color);
}

.emptyDashboard_blk p span::after {
    content: "";
    position: absolute;
    width: 42px;
    height: 1px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--border-color);
}

.emptyDashboard_blk button {
    border-color: var(--border-color);
    color: var(--text-muted);
    border-width: 2px;
    transition: all 0.2s;
    background: var(--bg-default);
}

.emptyDashboard_blk button:hover {
    border-color: var(--stroke-primary-default);
    color: var(--text-gray-1);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .dashboard_flex_wrapper {
        flex-direction: column;
    }

    .dashboard_aside_wrapper {
        max-width: 100%;
    }
}

/*! ......................................***************************  whatsNewModal HTML file css start from here *****************************.................................  */
.whatsNewModal_main_area_header .container,
.whatsNewModal_main_area .container,
.whatsNewModal_footer_area .container {
    max-width: 945px;
    width: 100%;
    margin-inline: auto;
}

.whatsNewModal_content_area {
    margin-top: 10px;
}

.whatsNewModal_footer_area {
    padding-top: 24px;
    margin-bottom: 40px;
}

.whatsNewModal_footer_area button {
    background: var(--bg-default);
    border: 1px solid transparent;
}

.whatsNewModal_footer_area button:hover {
    background: var(--hover-bg-shadow);
}

.whatsNewModal_footer_area button:active {
    border: 1px solid var(--border-color);
}

.whatsNewModal_main_area .media_wrapper_blk {
    max-height: 645px;
}

.single_whatsNew_item {
    background: var(--bg-default);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}

.single_whatsNew_item_thumb {
    max-width: 128px;
}

.single_whatsNew_item_thumb img {
    width: 100%;
    height: 100%;
}

.single_whatsNew_item_content span {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 8px;
    display: block;
}

.single_whatsNew_item_content h4 {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 8px;
}

.single_whatsNew_item_content p {
    color: var(--text-muted);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .single_whatsNew_item {
        flex-direction: column;
    }

    .single_whatsNew_item_thumb {
        max-width: 100%;
    }
}

/*! ......................................***************************  createNewProject HTML file css start from here *****************************.................................  */

.createNewProject_search_blk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.createNewProject_search_blk .search_component {
    width: 785px;
}

.createNewProject_search_blk .search_component input {
    height: 40px;
}

.createNewProject_template_wrapper {
    padding: 24px;
    background: var(--bg-default);
    border-radius: 6px;
    border: var(--stroke-default);
    height: 1020px;
    overflow: hidden;
    display: flex;
    gap: 24px;
    width: 100%;
    opacity: 1;
}

.createNewProject_same_height {
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
}

.createNewProject_same_height>div {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}

.project_action_wrapper {
    max-width: 350px;
    width: 100%;
    height: 96%;
    max-height: 971px;
}

.project_action_blk {
    background: var(--bg-default-1);
    padding: 16px;
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--border-color);
}

.scroll_action {
    overflow-y: scroll;
}

/* .scroll_action::-webkit-scrollbar {
    display: none;
} */

.project_action_wrapper h5 {
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 16px;
}

.project_action_wrapper .project_action_title {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.project_action_wrapper .project_action_title i {
    font-size: 12px;
    cursor: pointer;
}

.project_action_wrapper .project_action_title span {
    color: var(--text-main);
}

.project_action_wrapper ul li button {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}

.project_action_wrapper ul li button:hover {
    border-color: var(--stroke-primary);
    background: var(--hover-bg);
}

.project_action_wrapper ul li button:focus,
.project_action_wrapper ul li button.active {
    border-color: var(--stroke-primary-default);
}

.project_action_wrapper ul li button:focus i,
.project_action_wrapper ul li button:focus span,
.project_action_wrapper ul li button:focus>div h4,
.project_action_wrapper ul li button.active i,
.project_action_wrapper ul li button.active span,
.project_action_wrapper ul li button.active>div h4 {
    color: var(--text-primary);
}

.project_action_wrapper ul li button.active span {
    font-weight: 700;
}

.project_action_wrapper ul li {
    margin-bottom: 8px;
}

.project_action_wrapper ul li:last-child {
    margin-bottom: 0;
}

.project_action_wrapper ul li button i {
    font-size: 48px;
    padding: 0 13.5px;
}

.project_action_wrapper ul li button span {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.project_action_wrapper ul li button>div h4 {
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    padding-bottom: 7px;
}

.project_action_wrapper ul li button>div p {
    font-size: 12px;
    color: var(--text-muted);
    text-align: left;
    line-height: 15px;
}

.project_action_wrapper ul li button i {
    width: 87px;
}

.project_action_footer p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding-bottom: 8px;
}

.project_action_footer button {
    border: 1px solid var(--border-color);
    width: 100%;
    background: var(--bg-default);
    color: var(--text-muted);
}

.project_action_footer button:hover {
    border-color: var(--border-primary);
    color: var(--text-gray-1);
}

.slice_line {
    width: 1px;
    height: 100%;
    background: var(--border-color);
    display: inline-block;
}

#project-templates-wrapper,
#project-template-ai-wrapper {
    max-width: 100%;
}

.project_action_single_template {
    padding: 16px;
    background: var(--bg-default);
    border: var(--stroke-default);
    min-height: 250px;
    height: 100%;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.project_action_single_template:hover {
    border-color: var(--stroke-primary);
    border-width: 1px;
    transform: scale(0.99);
    background: var(--hover-bg);
}

.project_action_single_template.active {
    border-color: var(--stroke-primary-default);
    border-width: 1px;
}

.project_action_single_template.active .past_header p,
.project_action_single_template.active .past_content h5 {
    color: var(--stroke-primary-default);
}

.past_header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
}

.past_header p {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.past_content h5 {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 8px;
}

.past_content p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 15px;
}

.project_action_wrapper_category,
.slice_line_category {
    display: none;
}

.project_action_wrapper_templates {
    display: none;
}

.project_action_wrapper_templates.active {
    display: block;
}

.create_ai_wrapper {
    display: none;
}

.create_ai_wrapper.active {
    display: block;
    width: 100%;
}

.project_action_wrapper_category.active,
.slice_line_category.active {
    display: block;
}

.ai_template_wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 64px 40px;
    border: var(--stroke-default);
    border-radius: 6px;
    box-shadow: var(--Drop-Shadow);
    background: var(--bg-default);
}

.ai_thumb {
    max-width: 133px;
    width: 100%;
}

.ai_thumb img {
    width: 100%;
    height: 100%;
}

.ai_content h3 {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 16px;
}

.ai_content p {
    color: var(--text-muted);
    padding-bottom: 24px;
}

/*! ......................................*************************** aiProjectSetting html  part css start from here *****************************.................................  */

.aiProjectSetting_modal .container {
    max-width: 824px;
    width: 100%;
    margin-inline: auto;
}

.aiProjectSetting_modal {
    padding: 40px;
}

.aiProjectSetting_modal .Common_header_area {
    margin: 0;
    margin-bottom: 24px;
}

.aiProjectSetting_modal .bottom_part_of_the_body {
    margin-top: 40px;
}

.aiProjectSetting_modal .ccs_count {
    max-width: 115px;
}

.aiProjectSetting_modal .topic_title {
    padding-bottom: 8px;
}

.aiProjectSetting_modal .chosen-container-single .chosen-single {
    color: var(--text-main);
}

/* small screen :320px. */
@media (max-width: 767px) {
    .aiProjectSetting_modal {
        padding: 40px 0;
    }

    .aiProjectSetting_modal .createAudience_select_wrapper {
        flex-direction: column;
    }
}

/*! ......................................*************************** createProjectModal html  part css start from here *****************************.................................  */

.createProject_modal .container {
    max-width: 824px;
    width: 100%;
    margin-inline: auto;
}

.createProject_modal {
    padding: 24px 0 0 0;
}

.createProject_modal .Common_header_area {
    margin: 0;
    margin-bottom: 24px;
}

.cpm_name .topic_title {
    padding-bottom: 8px;
}

.cpm_name p {
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
    border-radius: 6px;
}

.cpm_name,
.cpm_description {
    padding-bottom: 24px;
}

.cpm_textarea textarea {
    resize: none;
    width: 100%;
    min-height: 95px;
    padding: 9px 12px;
    outline: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: 0.2s;
    margin-top: 8px;
    color: var(--text-main);
}

.cpm_textarea textarea::placeholder {
    color: var(--text-placeholder);
}

.surveyPrompt_All_textarea textarea::placeholder {
    color: var(--text-main);
}

.cpm_textarea textarea:focus {
    border-color: var(--border-primary);
}

.cpm_select_area .select_area select {
    font-size: 16px;
    height: 40px;
}

.cpm_select_blk {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    gap: 8px;
}

.cpm_select_title {
    width: 200px;
    font-weight: 700;
    flex-shrink: 0;
}

.cpm_select_area .select_area span i {
    color: var(--text-placeholder);
}

.cpm_template_elements {
    padding: 15px 14px;
    border: var(--stroke-default);
    background: var(--bg-default);
    width: 100%;
    border-radius: 6px;
}

.cpm_template_header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.cpm_template_header h4 {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}

.cpm_template_contents h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cpm_template_contents p {
    font-size: 12px;
    color: var(--text-muted);
}

.createProject_modal .bottom_part_of_the_body {
    padding-top: 24px;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .createProject_modal {
        padding: 30px 0;
    }

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

/*! ......................................*************************** nextAudienceModal html  part css start from here *****************************.................................  */

.nextAudience_modal .container {
    width: 100%;
    margin-inline: auto;
}

.nextAudience_modal {
    padding: 24px 0 0 0;
}

.nextAudience_modal_header {
    margin-bottom: 24px;
}

.nextAudience_modal_header p {
    padding-top: 8px;
    color: var(--text-muted);
}

.nextAudience_modal_header p span {
    font-weight: 700;
    color: var(--text-main);
}

.nextAudience_modal_cards_title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.nextAudience_modal_cards_body {
    background: var(--bg-default-1);
    padding: 8px;
    display: flex;
    gap: 8px;
}

.nextAudience_modal_single_cards {
    padding: 16px;
    border-radius: 6px;
    background: var(--bg-default);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: var(--stroke-default);
}

.nextAudience_modal_single_cards span i {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-primary);
}

.nextAudience_modal_single_cards h3 {
    font-size: 16px;
    font-weight: 700;
}

.nextAudience_modal_single_cards p {
    font-size: 12px;
    color: var(--text-muted);
}

.nextAudience_modal_note_area {
    padding: 24px 0;
}

.nextAudience_modal_note_area .topic_title {
    font-size: 16px;
}

.nextAudience_modal_note_text {
    color: var(--text-muted);
}

.nextAudience_modal_note {
    padding-top: 24px;
    font-size: 12px;
    color: var(--text-muted);
}

.nextAudience_modal_note span {
    color: var(--text-main);
    font-weight: 700;
}

.modal .custom_check_components {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}

.modal .custom_check_components input {
    flex-shrink: 0;
}

.modal .custom_check_components p {
    flex-shrink: 0;
    font-size: 12px;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .nextAudience_modal {
        padding: 30px 0;
    }

    .nextAudience_modal_cards_body {
        flex-direction: column;
    }

    .nextAudience_modal .bottom_part_of_the_body {
        flex-direction: row;
        align-items: center;
        justify-content: initial;
        gap: 16px;
    }
}

/*! ......................................*************************** wizards tooltips html  part css start from here *****************************.................................  */

.tooltip_flex_container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: transparent;
}

.tooltips_blk {
    padding: 16px;
    border: var(--stroke-default);
    background: var(--bg-default);
    box-shadow: var(--Drop-Shadow);
    border-radius: 6px;
    max-width: 344px;
    width: 100%;
}

.tooltips_header h3 {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 8px;
}

.tooltips_header p {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 12px;
}

.tooltips_btn {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.tooltips_btn_left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tooltips_btn button {
    border: 1px solid var(--stroke-primary-default);
    border-radius: 4px;
    padding: 6.5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.tooltip__divider {
    font-size: 12px;
    color: var(--text-placeholder);
}

.tooltip__current-page,
.tooltip__total-pages {
    font-weight: 700;
    font-size: 12px;
}

.tooltips_btn.launch button {
    width: 60px;
    height: 32px;
    border: unset;
}

.tooltips_btn.launch {
    justify-content: space-between;
}

.tooltips_btn .custom_check_components {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tooltips_btn .custom_check_components input {
    flex-shrink: 0;
}

.tooltips_btn .custom_check_components {
    padding-right: 16px;
}

.tooltips_btn .custom_check_components p {
    flex-shrink: 0;
    font-size: 12px;
}

/*! ......................................*************************** surveyPrompt html  part css start from here *****************************.................................  */

.prompt_header_title {
    font-size: 24px;
    font-weight: 700;
}

.prompt_header_title span {
    color: var(--text-primary);
}

.surveyPrompt_main_area {
    padding-bottom: 64px;
}

.surveyPrompt_main_area .audienceQuestion_nav_area {
    margin-bottom: 16px;
}

/* left side  */

.surveyPrompt_left_blk {
    background: var(--bg-default);
    padding: 24px;
    border: var(--stroke-default);
    border-radius: 6px;
    max-width: 765px;
    width: 100%;
    height: 963px;
}

.surveyPrompt_main_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 24px;
}

.smh_left {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.smh_country>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smh_completes {
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.smh_completes span {
    font-size: 20px;
    color: var(--text-primary);
}

.smh_country {
    font-size: 12px;
    font-weight: 700;
}

.smh_country div img {
    width: 21px;
}

.smh_country div span {
    font-size: 12px;
    font-weight: 700;
}

.sp_purpose_text {
    padding-bottom: 24px;
}

.sp_text {
    color: var(--text-muted);
    padding: 8px 0;
}

.sp_link_text {
    font-size: 12px;
    color: var(--text-muted);
}

.sp_link_text a {
    color: var(--text-primary);
    text-decoration: underline;
}

.surveyPrompt_left_blk .cpm_textarea textarea {
    height: 160px;
}

.surveyPrompt_left_blk .cpm_textarea textarea::-webkit-scrollbar {
    display: none;
}

.sp_checkbox_wrapper {
    background: var(--bg-default-1);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

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

.sp_checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp_checkbox_blk .custom_check_components {
    border: var(--stroke-default);
    background: var(--bg-default);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    padding-right: 20px;
    border-radius: 4px;
}

.sp_checkbox_blk .custom_check_components:hover {
    border-color: var(--border-primary);
}

.custom_check_components.active {
    background: var(--bg-primary);
    border-color: var(--bg-primary-default);
}

.custom_check_components.active span {
    color: var(--text-primary);
}

.custom_check_components .checked_item {
    color: var(--bg-primary-default);
    display: none;
    font-size: 24px;
}

.custom_check_components .unChecked_item {
    color: var(--border-color);
    font-size: 24px;
}

.sp_checkbox_blk .custom_check_components span {
    font-size: 12px;
}

.sp_checkbox_title {
    font-weight: 700;
}

.surveyPrompt_btn_area {
    padding-top: 24px;
}

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

.prompt_btn {
    padding: 7px 14px;
    background: #333d60;
    color: var(--text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 6px;
    transition: 0.2s;
}

.prompt_btn:hover {
    background: var(--text-main);
}

.prompt_btn img {
    width: 16px;
}

.surveyPrompt_left_wrapper {
    flex-shrink: 0;
}

.surveyPrompt_left_wrapper .cancel_btn {
    margin-top: 24px;
    background: transparent;
}

.surveyPrompt_left_wrapper .cancel_btn:hover {
    background: var(--bg-default);
}

.surveyPrompt__wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.surveyPrompt_main_area .surveyPrompt__wrapper {
    flex-wrap: unset;
}

.surveyPrompt_right_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.surveyPrompt_right_wrapper img {
    max-width: 300px;
    width: 100%;
    opacity: 0.05;
}

/* small screen :320px. */
@media (max-width: 767px) {
    .sp_checkbox_blk {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .smh_left {
        align-items: start;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .smh_left .bamboo {
        display: none;
    }

    .surveyPrompt_main_header .nav__line {
        display: none;
    }

    .surveyPrompt_main_header {
        flex-direction: column;
        gap: 16px;
    }

    .surveyPrompt_left_blk {
        padding: 12px;
    }
}

/*! ......................................*************************** surveyPromptLoading html  part css start from here *****************************.................................  */

.surveyPromptLoading_wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    padding-top: 96px;
}

.loader {
    width: 100px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg-primary-default);
    --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 2s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn);
    }
}

.surveyPrompt_loader_content {
    padding: 20px 0;
    text-align: center;
}

.surveyPrompt_loader_content h4 {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 10px;
}

.surveyPrompt_loader_content p {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 10px;
}

.surveyPrompt_loader_content span {
    font-weight: 700;
}

.surveyPrompt_loader_alert {
    padding: 8px 16px;
    background: var(--bg-default);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.surveyPrompt_loader_alert p {
    color: var(--text-muted);
}

.surveyPrompt_loader_alert p a {
    color: var(--text-primary);
    text-decoration: underline;
}

.surveyPrompt_loader_alert span i {
    color: var(--text-danger);
}

/*! ......................................*************************** surveyPromptAll list html  part css start from here *****************************.................................  */

.surveyPrompt_All_List_wrapper {
    flex-grow: 1;
}

.surveyPrompt_List_blk {
    background: var(--bg-default);
    border: var(--stroke-default);
    border-radius: 4px;
    padding: 24px;
}

.surveyPrompt_List_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.surveyPrompt_List_header_left span {
    font-size: 12px;
}

.surveyPrompt_All_List_wrapper .survey_pill_area {
    flex-shrink: 0;
}

.surveyPrompt_All_List_wrapper .survey_question__blk input[type="checkbox"] {
    flex-shrink: 0;
}

.survey_question__blk .just_text {
    flex-shrink: 0;
    margin-left: 8px;
}

.surveyPrompt_list_tips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
}

.surveyPrompt_list_tips p {
    font-size: 12px;
    color: var(--text-muted);
}

.surveyPrompt_list_tips p span {
    color: var(--text-main);
    font-weight: 700;
}

.surveyPrompt_list_tips i {
    font-size: 12px;
}

.discard_btn:hover {
    background: var(--bg-default);
}

.surveyPrompt_list_btn_blk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
}

.test_btn:hover {
    background: var(--bg-default);
}

/* revision  */
.surveyPrompt_All_List_wrapper .audienceQuestion_list_area ul .survey_parent_li.active {
    background: unset;
}

.survey_tooltip--thumbs-up,
.survey_tooltip--thumbs-down {
    width: 48px;
    height: 40px;
    color: var(--text-muted);
}

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

.clear_btn {
    background: none;
}

.clear_btn:hover {
    background: var(--hover-bg-shadow);
}

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

.surveyPrompt_All_List_wrapper .audienceQuestion_list_area {
    height: 689px;
    overflow-y: auto;
}

/* .surveyPrompt_All_List_wrapper .audienceQuestion_list_area::-webkit-scrollbar {
    display: none;
} */

.audienceQuestion_list_area ul .page_4_li {
    padding: 16px 8px;
    border-top: var(--stroke-default);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page_4_li_list {
    display: none;
}

.page_4_li_list.active {
    background: var(--bg-default-1);
    padding-left: 40px;
    display: block;
}

.page_4_li {
    padding: 16px 8px;
    border-top: var(--stroke-default);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page_4_li.active {
    background: var(--bg-default-1);
}

/* Big screen :1200px. */
@media (min-width: 1201px) and (max-width: 1550px) {
    .survey_prompt_all_class .surveyPrompt_left_blk {
        max-width: 605px;
    }
}

/* Normal screen :992px. */
@media (min-width: 992px) and (max-width: 1200px) {
    .surveyPrompt_main_area .surveyPrompt__wrapper {
        flex-direction: column;
    }

    .survey_prompt_all_class .surveyPrompt_left_blk {
        max-width: 100%;
    }
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .surveyPrompt_main_area .surveyPrompt__wrapper {
        flex-direction: column;
    }

    .survey_prompt_all_class .surveyPrompt_left_blk {
        max-width: 100%;
    }
}

/* small screen :320px. */
@media (max-width: 767px) {
    .surveyPrompt_main_area .surveyPrompt__wrapper {
        flex-direction: column;
    }

    .survey_prompt_all_class .surveyPrompt_left_blk {
        max-width: 100%;
    }
}

/*! ......................................*************************** startingTemplate html part css start from here *****************************.................................  */

.startingTemplate_main_area {
    height: 1020px;
    opacity: 1;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

.startingTemplate_main_wrapper {
    display: flex;
    gap: 16px;
    background: var(--bg-default);
    border: var(--stroke-default);
    border-radius: 4px;
    padding: 24px;
}

.startingTemplate_main_left_area {
    flex-shrink: 0;
}

.startingTemplate_List_header p {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 12px;
}

.startingTemplate_List_header p span {
    color: var(--text-primary);
}

.startingTemplate_list_blk {
    background: var(--bg-default-1);
    padding: 16px;
    border-radius: 4px;
}

.startingTemplate_list_blk .audienceQuestion_nav_area {
    padding-bottom: 16px;
}

.external_survey_test_link {
    border: 1px solid var(--border-color);
    width: 100%;
    position: absolute;
    right: 0;
    bottom: calc(100% + 15px);
    margin-bottom: 0;
}

/*! ......................................*************************** manageAudience html part css start from here *****************************.................................*/

.manageAudience_main_area .dashboard_project_item_wrapper {
    /* max-width: 1035px; */
    width: 100%;
}

.manageAudience_main_area .audienceQuestion_header {
    flex-wrap: wrap;
}

.manageAudience_main_area .dashboard_single_item_content {
    padding: 0;
}

.manageAudience_main_area .audiences_survey_list_wrapper {
    padding: 0;
}

.manageAudience_main_area .dashboard_project_items_blk {
    padding: 0;
    border: none;
}

.manageAudience_main_area .audiences_survey_single_list {
    border: var(--stroke-default);
    box-shadow: unset;
}

.manageAudience_main_area .dashboard_single_item_header {
    background: var(--bg-default-1);
}

.manageAudience_main_area .dashboard_single_item {
    padding-top: 24px;
}

.manageAudience_main_area .dashboard_single_item:first-child {
    padding-top: 0;
}

.manageAudience_main_area .dashboard_items_wrapper {
    background: var(--bg-default-1);
}

.manageAudience_dashboard_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.system_btn {
    border-color: var(--orange-500);
    color: var(--orange-500);
    text-transform: capitalize;
    border-width: 1px;
    background: var(--bg-default);
}

.system_btn:hover {
    background: rgba(255, 166, 0, 0.1);
}

.dashboard_single_Paused_item .progress-bar-fill {
    background-color: var(--orange-500);
}

.dashboard_single_Paused_item .dohp_count {
    color: var(--text-warning-default);
}

.manageAudience_selecet .select_area {
    width: 200px;
    transition: all 0.2s;
}

.manageAudience_selecet .select_area select {
    color: var(--text-placeholder);
}

.manageAudience_selecet .select_area:hover {
    border-color: var(--border-primary);
}

.manageAudience_selecet .select_area .fa-caret-down {
    color: var(--text-placeholder);
}

.manageAudience_btn_blk .bamboo {
    background: var(--border-color);
    height: 40px;
}

.designerOverview_header_right_blk.manageAudience_btn_blk {
    gap: 10px;
}

.audienceBalance_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* cost  */
.audienceBalance__cost {}

.audienceBalance__cost div.audienceBalance_launch_cost h4 {
    font-size: 14px;
    font-weight: 700;
}

.audienceBalance__cost div.audienceBalance_launch_cost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audienceBalance__cost_title h3 {
    font-weight: 700;
    font-size: 16px;
}

.audienceBalance__cost_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
}

.audienceBalance__cost_title p {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.audienceBalance__cost_title span {
    font-size: 16px;
    color: var(--text-danger);
    font-weight: 700;
    position: relative;
    margin-top: -2px;
}

.audienceBalance_lists_wrapper {
    margin-bottom: 24px;
}

.audienceBalance_lists_wrapper:last-child {
    margin-bottom: 0;
}

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

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

.audienceBalance_lists_pill {
    padding: 7px 14px;
    border-radius: 1000px;
    border: 1px solid var(--border-color);
    background: var(--bg-default);
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.audienceBalance_lists_content {}

.countMoney {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 90px;
}

.launch_block {
    display: flex;
    align-items: center;
}

.countMoney span {
    font-weight: 700;
    color: var(--text-main);
    margin-right: 8px;
    display: inline-block;
}

.countMoney span.countMoney_launched {
    color: var(--text-muted);
}

.decrement_balance span {
    color: var(--text-danger);
}

.increment_balance span {
    color: var(--bg-success-default);
}

.audienceBalance_single_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px 10px 20px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-dark-grey);
}

.audienceBalance_single_list:has(input[type="checkbox"]:checked) {
    background: var(--bg-default) !important;
    border: 1px solid var(--stroke-primary);
    border-radius: 4px;
    font-weight: bold;
}

.audienceBalance_single_list div:not([class]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audienceBalance_single_list div img {
    width: 29.33px;
}

/* voucher  */
.audienceBalance__Voucher {
    background: var(--bg-default);
    border: var(--stroke-default);
    border-radius: 4px;
    padding: 24px;
}

.audienceBalance__Voucher_blk {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color);
}

.audienceBalance__Voucher_blk:last-child {
    margin-bottom: 0;
}

.audienceBalance__Voucher_blk h4 {
    font-size: 14px;
    font-weight: 400;
}

.audienceBalance__Voucher_blk .add_code_btn {
    background: none;
}

.audienceBalance__Voucher_blk .add_code_btn:hover {
    background: var(--hover-bg-shadow);
}

.audienceBalance__Voucher_blk p {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.audienceBalance__Voucher_blk p span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    display: inline-block;
    margin-right: 8px;
}

/* total  */
.audienceBalance__total {
    margin-top: 36px;
}

.audienceBalance__total div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audienceBalance__total div h4 {
    font-size: 16px;
    font-weight: 700;
}

.audienceBalanceTotal_money {
    display: flex;
    align-items: center;
    color: var(--text-main);
}

.audienceBalanceTotal_money span {
    font-size: 20px;
    color: var(--text-danger);
}

/* payment  */

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


/* payment modal start from here  */

.paymentModal_wrapper {
    padding: 40px;
    background: var(--bg-default);
    border-radius: 4px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    max-width: 600px;
    width: 100%;
    height: max-content;
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 1;

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

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

.paymentModal__header h4 {
    font-size: 24px;
    font-weight: 700;
}

.paymentModal__header div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.paymentModal__header div p {
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.paymentModal__header div p span {
    font-size: 24px;
}

.paymentModal__body {
    padding: 8px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-default-1);
}

.paymentModal__info {
    padding: 16px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-default);
    margin-bottom: 8px;
}

.paymentModal__info_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.edit_bill_btn {
    background: none;
    font-size: 12px;
}

.edit_bill_btn i {
    font-weight: 700;
}

.edit_bill_btn:hover {
    background: var(--hover-bg-shadow);
}

.paymentModal__info_text h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.paymentModal__info_text p {
    font-size: 12px;
    color: var(--text-muted);
}

/* mrthod  */
.paymentModal__method {
    padding: 16px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-default);
}

.paymentModal__method h5 {
    margin-bottom: 16px;
}

.paymentModal__method button {
    display: block;
    width: 100%;
    height: 56px;
    font-size: 24px;
    font-weight: bold;
}

.stripe_btn {
    margin-bottom: 8px;
}

/* <!-- edit bill modal popUp start  --> */

.editBillModal__wrapper {
    padding: 40px;
    background: var(--bg-default);
    border-radius: 4px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    max-width: 600px;
    width: 100%;
    height: max-content;
    position: relative;
    inset: 0;
    margin: auto;
    z-index: 1;

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

.modal_base_titie {
    font-size: 16px;
    font-weight: bold;
}

.editBillModal_company p {
    padding: 9px 12px;
    border: var(--stroke-default);
    border-radius: var(--border-radius-md);
}

.editBillModal_company span {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-top: 8px;
}

.editBillModal_input_blk {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.editBillModal_input_single label {
    display: block;
    margin-bottom: 8px;
}

.editBillModal_input_single input {
    height: 40px;
    cursor: pointer;
}

.editBillModal_input_single input:hover {
    border-color: var(--stroke-primary);
}

.editBillModal_input_single input:focus {
    border-color: var(--stroke-primary-default);
}

.save_default_btn,
.cancel_editBillModal_btn {
    background: none;
}

.save_default_btn:hover,
.cancel_editBillModal_btn:hover {
    background: var(--hover-bg-shadow);
}

/* <!-- confirm modal popUp START  --> */

.confirmModal__wrapper {
    padding: 40px;
    background: var(--bg-default);
    border-radius: 4px;
    border: var(--stroke-default);
    box-shadow: var(--Drop-Shadow);
    max-width: 800px;
    width: 100%;
    height: max-content;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;

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

.confirmModal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.confirmModal_header_contents {
    display: flex;
    align-items: center;
    gap: 16px;
}

.confirmModal_header_thumb {
    width: 150px;
}

.confirmModal_header_thumb img {
    width: 100%;
}

.confirmModal_header_text p {
    font-size: 24px;
    font-weight: bold;
}

.confirmModal_header_text p span {
    color: var(--text-success-default);
    font-size: 24px;
    font-weight: bold;
}

.confirmModal_header_text span {
    font-size: 16px;
    color: var(--text-muted);
}

.confirmModal_main {
    background: var(--bg-default-1);
    border-radius: var(--border-radius-sm);
    padding: 8px;
}

.confirmModal_main_content {
    display: flex;
    gap: 16px;
}

.confirmModal_main_uses {
    width: 50%;
    background: var(--bg-default);
    padding: 24px;
    border-radius: var(--border-radius-sm);
    border: var(--stroke-default);
}

.confirmModal_main_steps {
    background: var(--bg-default);
    padding: 24px;
    border-radius: var(--border-radius-sm);
    border: var(--stroke-default);
    margin-top: 8px;
}

.cms_title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.cms_items {
    display: flex;
    gap: 40px;
}

.cms_items .modal_base_titie {
    margin-bottom: 8px;
}

.cms_items_left {
    max-width: 308px;
    width: 100%;
}

.cms_items_left_text {
    color: var(--text-muted);
}

.cms_items_left_text a {
    text-decoration: underline;
    color: var(--text-primary);
}

.confirmModal_main_uses {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.modalUser_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
}

.modalUser_icon img {
    width: 100%;
    height: 100%;
}

.confirmModal_main_time {
    width: 50%;
    background: var(--bg-default);
    padding: 68px 24px;
    border-radius: var(--border-radius-sm);
    border: var(--stroke-default);
    text-align: center;
}

.cmt_time {
    display: flex;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cmt_time span {
    font-size: 48px;
    color: var(--text-primary);
}

.cmt_text span {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

/* modal events  */

.paymentModal_wrapper_popUp {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
}

.editBillModal__popUp {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
}

.confirmModal__popUp {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-y: scroll;
}

.confirmModal__popUp::-webkit-scrollbar {
    display: none;
}

/* Big screen :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {
    .audienceBalance_cost_area {
        width: 100%;
        flex-shrink: 0;
    }
}

/* Normal screen :992px. */
@media (min-width: 992px) and (max-width: 1200px) {
    .manageAudience_main_area .dashboard_flex_wrapper {
        flex-direction: column;
    }

    .manageAudience_main_area .dashboard_project_item_wrapper {
        max-width: 100%;
    }

    .audienceBalance_cost_area {
        max-width: 100%;
    }
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {}

/* small screen :320px. */
@media (max-width: 767px) {}

/*! ......................................*************************** comments And Update html part css start from here *****************************.................................*/

.commentsAndUpdate_modal {
    /* padding: 40px; */
    max-width: 1300px;
    width: 100%;
    margin-inline: auto;
    /* background: var(--bg-default); */
}

.commentsAndUpdate_modal .tabContainer {
    padding: 0;
}

.tab_nav_btns {
    display: flex;
    align-items: center;
    gap: 8px;
    /* margin-bottom: 24px; */
    padding: 16px 0;
}

.comments_count {
    background: var(--text-muted);
    color: var(--text-white);
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-weight: bold;
    line-height: 8px;
}

.tab_buttons button.active .comments_count {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.commentsAndUpdate_modal .tab_buttons button.active {
    border-bottom: 4px solid var(--bg-primary-default);
}

/* comments list  */
/* .comments_list_wrapper {
    padding: 24px;
    background: var(--bg-default-1);
    border-radius: var(--border-radius-sm);
} */

.comments_scroll_wrapper {
    max-height: 615px;
    height: 100%;
    overflow-y: scroll;
    margin-bottom: 8px;
}

.comments_scroll_wrapper::-webkit-scrollbar {
    display: none;
}

.comments_list_item {
    padding: 16px;
    padding-right: 8px;
    background: var(--bg-dark-grey);
    border-radius: var(--border-radius-sm);
    margin-bottom: 8px;
    border: var(--stroke-default);
}

.comments_list_item:last-child {
    margin-bottom: 0;
}

.comment_text {
    /* display: flex;
    align-items: center; */
    min-height: 38px;
    height: 100%;
    border-left: 4px solid #BFBFC8;
}

.comment_text p {
    margin-left: 12px;
}

.comments_person {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.comments_person span {
    color: var(--text-main);
    font-weight: 700;
}

/* leave comments  */
.leave_comments_wrapper {
    margin-top: 24px;
}

.lcw_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
}

.lcw_header p {
    font-size: 16px;
}

.uploadUser_textarea_blk {
    padding-bottom: 6px;
}

.commentsAndUpdate_modal .uploadUser_textarea_blk textarea {
    min-height: 80px;
}

.leave_comments_btn {}

.commentsClose_area {
    margin-top: 24px;
}

.commentsClose_btn {
    background: none;
}

.commentsClose_btn:hover {
    background: var(--hover-bg-shadow);
}

/* update table  */
.updateTable_blk {
    background: var(--bg-default-1);
    padding: 24px;
    min-height: 860px;
}

.long_th {
    min-width: 258px;
}

.medium_th {
    min-width: 90px;
}

.date_th {
    min-width: 115px;
}

.id_th {
    min-width: 60px;
}

.price_th {
    min-width: 75px;
}

.max_th {
    min-width: 104px;
}

.updateTable_wrapper table tr td,
.updateTable_wrapper table tr th {
    font-size: 12px;
}

.updateTable_wrapper table thead {
    background: none;
}

.updateTable_wrapper table tbody {
    background: var(--bg-default);
    padding: 8px;
    margin-top: 16px;
}

.updateTable_wrapper table>tbody>tr>td {
    vertical-align: top;
}

.updateTable_wrapper table tbody tr td p span {
    color: var(--text-muted);
}

.audience_name_label a:hover,
.audience_name_label:hover {
    color: var(--hover-color);
}

.audience_not_feasible i {
    font-size: 22px;
}

#testSurveyBtn {
    display: none !important;
}

.question_edit_header {
    font-size: 12px;
}

.project-header-sticky {
    position: sticky;
    top: 0;
    background: var(--bg-primary-4);
    z-index: 10;
}

/* .navbar ul li:hover, .navbar .survey_Dots_event:hover
{
 background: var(--bg-default-1);   
 border-radius: 4px;
} */

.res_btn:hover {
    background-color: var(--bg-default);
}

.nav_user_active img {
    border-radius: 6px;
}

.loadingMainText {
    color: var(--text-main) !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

#loadingSubText {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
}

.separator {
    width: 1px;
    height: 40px;
    background: var(--border-color);
    display: inline-block;
}

.project_menu:hover {
    color: var(--text-primary);
}

.no_access_wrapper {
    display: flex;
    width: 700px;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 6px;
    border: var(--stroke-default);
    background: var(--bg-default);
}

.invalid_access_warning {
    display: flex;
    padding: var(--Padding-SM, 16px);
    align-self: stretch;
    border-radius: 6px;
    background: var(--bg-warning-2);
    color: var(--text-warning-default);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    /* 125% */
}

.warning_icon_big {
    color: var(--text-warning-default);
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 56px;
    /* 116.667% */
}

.invalid_access_message {
    color: var(--Text-Muted, #72727E);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.invalid_access_contact_txt {
    color: var(--Text-Muted, #72727E);
    text-align: center;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    /* 125% */
}

.invalid_access_contact_txt a {
    color: var(--text-primary);
    text-decoration-line: underline;
}

.expand_btn span,
.national-represent-list span,
.collapse_btn span {
    font-weight: 300;
}

.audience_is_feasible {
    color: var(--text-success-default);
}

.audiences_survey_flag p {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: normal;
}

.audiences_survey_flag .audience_hover_pill_area {
    width: auto !important;
}

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

.feas_single_btns_blk>div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feas_single_btns_blk>div button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    padding: 8px 24px;
    color: var(--text-white);
    font-size: 12px;
    font-weight: 700;
    background: var(--text-danger);
}

.feas_main_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 8px 24px;
    color: var(--text-white);
    font-size: 12px;
    font-weight: 700;
    max-width: 150px;
    width: 100%;
    border: 1px solid var(--text-danger);
    color: var(--text-danger);
}

.feas_single_blk {
    padding: 16px 24px;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
    margin-top: 12px;
    border: var(--stroke-default);
}

.feas_title {
    color: var(--text-main);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.feas_single_text {
    color: var(--text-muted);
    padding-top: 16px;
    font-size: 14px;
}

.progressAudience_recommended_lists b {
    font-weight: bolder;
}

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

.text_warning_orange {
    color: var(--text-warning-1);
}

.audience-feas-title {
    color: var(--text-primary);
    font-weight: 600;
}

.category_icon {
    margin-left: 5px;
    width: 25px;
    text-align: center;
}

.text_link {
    cursor: pointer;
}

.text_link:hover {
    color: var(--text-primary);
}

.external_sampling_report #insightTab {
    display: none;
}

.modal-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.modal-body .modal-header .modal-footer {
    padding-left: 2rem;
    padding-right: 2rem;
}

.pill_body_text b {
    font-weight: bolder;
}

.audience_menu_no_action button {
    cursor: auto !important;
}

.survey-top-bar-sticky {
    top: 96px !important;
}

.createAudience_html_file .active-result.highlighted {
    background: var(--bg-primary) !important;
    color: var(--text-main) !important;
}

.createAudience_html_file .chosen-drop .active-result {
    font-size: 16px !important;
}

.sd_main_area {
    margin-bottom: 0px !important;
}

.feas_main_btn:hover {
    background: var(--text-danger);
    color: var(--text-white);
}

.audience_not_feasible.audience_error {
    color: var(--text-danger) !important;
}

.survey_question_padding {
    padding: 22px 0px;
}

.survey_answer_padding {
    margin-top: -15px;
    padding-bottom: 15px;
}

/* .survey_parent_li {
    border: var(--stroke-default);
    border-left: 4px solid var(--border-color);
    margin-bottom:6px;
    border-radius: 4px;
    background: var(--bg-primary-4);
    padding-left: 12px;
}

.survey_parent_li:hover
{
    border-top: 1px solid #0070e066 !important;
    border-bottom: 1px solid #0070e066 !important;
} */

.question_highlighted {
    border-top: 1px solid var(--blue-300) !important;
    border-bottom: 1px solid var(--blue-300) !important;
    background: var(--bg-primary);
}

.error_alert_wrapper {
    display: flex;
    min-height: 40px;
    padding: 9px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--Border-Radius-MD, 6px);
    background: var(--stroke-danger-default);
    color: var(--text-white);
}

.error_alert_wrapper span,
.warning_alert_wrapper span {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.warning_alert_wrapper {
    display: flex;
    min-height: 40px;
    padding: 9px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--Border-Radius-MD, 6px);
    background: var(--stroke-warning-1);
    color: var(--text-white);
}

.warning_alert_wrapper.blue {
    background: var(--stroke-primary-default) !important;
}

.error_notification_wrapper {
    display: flex;
    width: 100%;
    padding: var(--Padding-SM, 16px);
    align-items: flex-start;
    gap: var(--Padding-XXS, 4px);
    border-radius: var(--Border-Radius-MD, 6px);
    border: 1px solid var(--stroke-danger-2);
    background: var(--bg-danger-2);
}

.error_notification_wrapper span {
    color: var(--text-danger);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    /* 125% */
}

.error_notification_wrapper button {
    font-size: 12px;
}

.Common_header_wrapper a i:not(#select-audience-menu-div a i) {
    font-size: 24px;
    padding-right: 6px;
}

.audience_not_feasible_wrapper {
    position: relative;
}

.icon-text-warning {
    color: var(--text-warning-default);
}

#audiences-overview-wrapper {
    /* padding: 12px; */
    /* padding-right: 30px;
    padding-left: 30px; */
}

.text-muted {
    color: var(--text-muted)
}

.header_right_next_blk i {
    font-size: 16px;
}

.question_text_oneline {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.internal_link_validation:placeholder-shown {
    border: 1px solid var(--text-danger) !important;
}

#add-new-interlocked-quotas-modal .survey_pill_area {
    justify-content: start;
}

#add-new-question-modal .survey_question_text {
    padding-right: 42px;
    height: 18px;
    overflow: hidden;
}

#add-new-question-modal .survey_question__blk>input {
    min-width: 16px;
}

.btn_blue {
    background: var(--bg-primary-default) !important;
    color: var(--text-white) !important;
}

.btn_blue:hover {
    background: var(--stroke-dark-blue) !important;
}

.audience_status_change_btn button {
    /* width: 225px; */
    width: auto;
    padding-right: 0px;
    font-size: 14px;
}

#audience-statistics-wrapper {
    padding-left: 12px;
    padding-right: 24px;
}

.bg_white {
    background: var(--bg-default) !important;
}

.audiences_survey_list_wrapper:has(.has-lottie-player) {
    background: var(--bg-default) !important;
}

.answer-search-library {
    height: 40px;
}

.quota-seperator {
    color: var(--text-primary);
}

#respondentsResults {
    font-family: 'Inter';
}

.offcanvas_area:has(.commentsAndUpdate_modal) {
    max-width: 1300px;
}

.updateTable_wrapper tr:hover {
    background: var(--hover-bg) !important;
}

#project-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.pl-16 {
    padding-left: 16px;
}

.feasible_modal_no_quota {
    padding: 0px !important;
    border: none !important;
    margin-bottom: 0px !important;
}

.audience_menu_items i {
    width: 28px;
    font-weight: 400;
}

.respondent_status {
    background: var(--bg-primary);
}

.respondent_status.complete {
    background: var(--bg-success-default);
}

.respondent_status.dropped {
    background: var(--text-warning-1);
}

.respondent_status.termed {
    background: var(--text-danger);
}

.external_link_menu ul {
    width: 305px !important;
}

.external_link_menu {
    width: 42px;
}

.interlock_question_area,
.interlock_definition_area {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.interlock_question_area .seurvey_list_parent_blk {
    /* border-left: var(--stroke-default);
    border-right: var(--stroke-default); */
}

.interlock_question_area .survey_parent_li {
    padding: 16px 8px;
    border: var(--stroke-default);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #F4F4F5;
    margin-bottom: 4px;
    border-radius: 6px;
    padding-left: 18px;
}

.interlock_question_area .survey_question_text {
    margin-left: 0px !important;
}

.interlock_question_area .survey__answer_area {
    padding-left: 0px !important;
}

.interlock_question_area .survey_parent_li:hover {
    background: var(--hover-bg);
    border: 1px solid #CCE5FF !important;
}


.interlock_wrapper {
    /* padding-left: 13px; */
}

.settings__offcanvas_area:has(.interlock_wrapper) {
    max-width: 1300px !important;
    background: var(--bg-default-1);
}

.interlock_item_wrapper {
    /* padding: 16px 8px;
    border: var(--stroke-default);
    margin-bottom: 10px;
    background: var(--bg-default);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--Drop-Shadow); */
}

.interlock_item_wrapper.active {
    border: 1px solid #CCE5FF !important;
}

.interlock_item_wrapper:hover {
    border: 1px solid #cbe5ff;
}


.btn_delete {
    background: var(--stroke-danger-default) !important;
    color: var(--text-white) !important;
}

.interlock_btn_group {
    margin-left: auto;
    display: none;

}

.interlock_item_wrapper.active .interlock_btn_group {
    display: block !important;
}

.enable-translation-wrapper {
    margin-top: 8px;
    min-height: 48px;
    padding: var(--Padding-XS, 8px) var(--Padding-SM, 16px);
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--Border-Radius-MD, 6px);
    border: 1px solid var(--blue-300);
    background: var(--bg-primary);
    margin-bottom: 8px;
    display: flex;
}

.interlock_item_wrapper:not(.active) .canShowChangeNotSavedError {
    display: block !important;
}

.changeNotSaved p {
    color: var(--text-danger);
    float: right;
}

.translation-border {
    border-right: var(--stroke-default);
}

.btn_default:disabled {
    background: var(--bg-secondary-2) !important;
    cursor: auto !important;
}

.changeNotSaved {
    padding-top: 1rem !important;
}

.emptyAnswerWrapper {
    display: none;
}

.interlock_item_wrapper.active .emptyAnswerWrapper {
    display: block;
}

.overview_quotas .quota-seperator {
    color: var(--text-main) !important;
}

.translation_confirmation_footer {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.blockCpxProjectWrapper {
    padding: 8px 16px;
    margin-top: 12px;
    border-radius: var(--border-radius-sm, 4px);
    border: var(--stroke-default);
    background: var(--bg-dark-grey);
}

.project_menu li i {
    width: 20px;
}

.dashboard_single_item_content:hover>.audience_name_label {
    color: var(--bg-primary-3);
}

.dashboard_single_item_content:hover {
    border: 1px solid var(--stroke-project-blue) !important;
    border-radius: 6px;
}

.iq_items_wrapper {
    padding: 8px;
    border: var(--stroke-default);
    margin-bottom: 10px;
    background: var(--bg-default-1);
    border-radius: 6px;
}

.interlock_item_wrapper:has(.quota-disabled-style) {
    background: var(--bg-default-1);
}

.results-wrapper .audiences_survey_single_list {
    cursor: auto !important;
}

.results-wrapper .audiences_survey_single_list:hover {
    background: var(--bg-default) !important;
}

.results-wrapper .audiences_survey_single_list:hover {
    background: var(--bg-default) !important;
}

.results-wrapper .audiences_survey_single_list:hover .audience_name_label {
    color: var(--text-main) !important;
}

#suggest-age-distribution {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    height: 32px;
    border-radius: 4px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
}

.quota_enable_disable {
    padding: 9px 12px;
    color: var(--text-primary);
    background: var(--bg-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
    border-radius: 6px;
    cursor: auto !important;
}

.quota_enable_disable .progress_danger {
    color: var(--text-disabled) !important;
}

.quota_enable_disable .progress_success {
    color: var(--text-primary) !important;
}

#softLaunchStoppedAudienceNotification .audience_hover_pill_area {
    top: 55px !important;
}

#time-interval-settings .pate_divider {
    min-height: 73.19px !important;
}

.createQuestion_header_text input.createQuestion_text:hover {
    border: 1px solid var(--stroke-primary--1);
}

.pate_single_time_blk.d-flex {
    width: auto !important;
    gap: 8px;
}


.given_answer_progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    background-color: var(--text-primary);
}

.audience_setting_status {
    gap: 16px;
    display: flex;
    margin-right: 24px;
    align-items: center;
}

.audience_setting_status i {
    position: relative;
    font-size: 18px;
}

.pill_body_text {
    font-family: 'Inter' !important;
}

.audience_setting_status .audience_hover_pill_area {
    width: auto !important;
    text-wrap: nowrap !important;
}

.given_answer.quota_achieved {
    background: var(--bg-default) !important;
    border-color: var(--border-color) !important;
}

#billing-and-payment-modal .bottom_part_of_the_body {
    padding: 0 !important;
}

/* .designerDetails_wrapper .accordion_click_blk {
    width: 0;
    opacity: 0;
    overflow: hidden;
    display: inline-block;
    transition: width 0.3s ease, opacity 0.3s ease;
  } */

/* Initially set the pill area with smooth margin transition */
.designerDetails_wrapper .survey_pill_area {
    transition: margin-left 0.3s ease;
    /* Smooth transition for pill area movement */
}

/* On hovering the parent element */
/* .designerDetails_wrapper .survey_parent_li:hover .accordion_click_blk {
    width: 39px;
    opacity: 1; 
  } */

/* .designerDetails_wrapper .survey_question__blk{
    gap: 0px;
  }
   */

.designerDetails_wrapper .survey_Dots_event {
    display: none;
}

/* .designerDetails_wrapper .survey_parent_li:hover .survey_Dots_event
{
  display: flex;
}
*/

.delete_audience_li {
    border-top: 1px solid var(--border-color);
}

.designerDetails_wrapper .survey_Dots_event {
    opacity: 0;
    display: inline-block;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.designerDetails_wrapper .survey_parent_li:hover .survey_Dots_event {
    opacity: 1;
}

.designerDetails_wrapper .pie_hover_blk {
    transition: margin-right 0.3s ease;
}

.audience_hover_pill_area.nested_quota {
    right: 0;
}

.offcanvas_area .modal-content {
    border: none !important;
}

#recentProjectsList li:hover {
    background: var(--stroke-transparent);
}

.text-ellipsis {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.right-modal .modal-dialog {
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-out !important;
}

/* Move the modal into view when it's open */
.right-modal.show .modal-dialog {
    transform: translateX(0) !important;
}

.badge-danger {
    background: var(--stroke-danger-default);
}

#view-statistics-modal .modal-content {
    height: 100%;
}

#view-statistics-modal .modal-header {
    margin-bottom: auto;
}

#view-statistics-modal .modal-footer {
    margin-top: auto;
}

button:hover i,
a:hover i,
span:hover i,
.sd_survey_header_title:hover i,
.sd_select_area:hover i {
    animation: fa-beat 1s infinite;
}

.hasError {
    border: 1px solid var(--stroke-danger-2) !important;
    background: var(--bg-danger-2) !important;
}

.team_info_wrapper i {
    font-size: 36px;
    margin-left: 12px;
    margin-right: 12px;
}

.dashboard_single_item_content:hover .project_title_label {
    color: var(--hover-color);
}

.header_right_next_blk {
    display: flex;
}


.audience_header_item .survey_tooltip_blk {
    /* opacity: 0;  */
    display: inline-block;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.audience_header_item:hover .survey_tooltip_blk {
    opacity: 1;
}

.audience_header_item:hover .audiences_survey_top_blk .audiences_survey_top_blk_left_area .audience_name_label {
    color: var(--text-primary);
}

.chosen-container .chosen-results li {
    line-height: 1.6;
}

.aud_select_survey {
    height: 42px;
    max-width: 200px;
}

.settings_item {
    padding: 12px;
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bg-default-1);
    border: 1px solid var(--border-color);
    margin-top: 4px;
}

.settings_item.checked {
    background: var(--bg-default);
    border: 1px solid var(--stroke-primary);
}

.settings_title {
    color: var(--text-main);
    /* Font/Size6/Bold */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
}

.settings_title.checked {
    color: var(--stroke-primary-default);
}

.settings_pill {
    display: flex;
    min-height: var(--line-height-line-height-sm, 32px);
    padding: 7px 14px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid var(--stroke-primary);
    background: var(--bg-primary);
    color: var(--stroke-primary-default);
    text-align: center;
    /* Font/Size7/Bold */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    /* 125% */
}

.settings_top_area {
    height: auto;
    align-items: center;
}

.aud_custom_check {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 2px 3px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-radius-xl, 10px);
    border-radius: var(--border-radius-sm, 4px);
    border: 1px solid var(--border-color);
    background: var(--bg-default);
}

.aud_custom_check.active {
    border-radius: var(--border-radius-sm, 4px);
    border: 1px solid var(--stroke-primary-default);
    background: var(--stroke-primary-default);
}

.aud_custom_check i {
    font-size: 16px;
    font-weight: 900;
    color: #FFF;
}

body:has(.sd_audience_visible_check) #testAudienceListSelect {
    display: block;
}

#testAudienceListSelect {
    display: none;
}

.respond_report {
    min-width: 200px;
}

.user_data_download_filter_item {
    /* border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px; */
}

/* .content_section
{
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px; 
    background: var(--bg-default); 
    margin-top: 0px;
    margin-bottom: 2px;
}

.default_bg_1 {
    background: var(--bg-default-1);
}

.default_bg_default {
    background: var(--bg-default);
}


.offcanvas_area:has(.default_bg_1)
{
    background: var(--bg-default-1);
} */

#copyQustionId {
    border: 1px solid var(--border-color);
}

#project-progress .created_date_label {
    display: none;
}

.badge-light-success {
    color: #50cd89;
    background-color: #e8fff3
}

.interlock_main_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-right: 16px;
    height: auto;
}

.interlock_item_wrapper .given_answer {
    border: 1px solid #E5E5E5;
    background: #fff;
}

.interlock_item_wrapper.active .given_answer {
    background: var(--bg-primary);
    border-color: var(--stroke-primary);
    color: var(--text-primary);
}

.external_check_blk_area {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    border-radius: 6px;
    height: 40px;
    width: 370px;
    border: 1px solid var(--stroke-transparent);
}

.external_check_blk_area:has(input[type="checkbox"]:checked) {
    background: var(--bg-primary);
    border: 1px solid var(--stroke-primary);
}

.external_check_blk_area:has(input[type="checkbox"]:checked) label {
    color: var(--text-primary)
}

#internal-link {
    background: var(--stroke-transparent);
    border: 1px solid var(--stroke-transparent);
}

#internal-link-test {
    background: var(--stroke-transparent);
    border: 1px solid var(--stroke-transparent);
}

#internal-link.edit_mode_on {
    background: var(--text-white);
    border: 1px solid var(--stroke-transparent);
}

#internal-link-test.edit_mode_on {
    background: var(--text-white);
    border: 1px solid var(--stroke-transparent);
}


input:-webkit-autofill {
    -webkit-text-fill-color: none !important;
}

.create_project_managers.goTo_hover_event {
    /* width: 100%;
    display: block;
    border: none;
    overflow: hidden;
    height: 100%; */
    left: 0;
}

.create_project_managers ul {
    overflow: auto;
    height: calc(100% - 58px);
}

.select_area_create_project {
    display: inline-flex;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.select_area_create_project .goTo_wrapper {
    width: 100%;
}

.select_area_create_project .goTo_btn {
    width: 100%;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 400;
}

.select_area_create_project .goTo_btn i {
    color: var(--text-placeholder);
}

.create_project_managers .goTo_search {
    padding-bottom: 4px;
}

.managers_email_wrapper {
    height: 100%;
    overflow: hidden;
}

.fw_700 {
    font-weight: 700;
}

.feasibility_qualified .audience_hover_pill_area {
    right: 0;
}

.white_btn {
    display: inline-flex;
    width: 220px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 16px;
    font-family: var(--font-Inter);
    border: 1px solid var(--bg-default);
    font-weight: 600;
    font-style: normal;
    height: 40px;
    border-radius: 6px;
    background: var(--bg-default);
    transition: 0.2s;
}

.interlock_main_wrapper .survey_question__blk .survey_pill_area {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}

.audiences_survey_top_blk_right_area .audience_setting_status .audience_hover_pill_area {
    right: 0;
}


.settings__offcanvas_area:has(.interlock_question_area[style*="display:none"]) {
    max-width: 900px !important;
    /* Set your desired max-width */
}

.quota_no_content {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}

.audience_detail_main_wrapper {
    border: var(--stroke-default);
    border-radius: 6px;
    background-color: var(--bg-default);
}

.results-wrapper #audience-details-wrapper {
    padding-top: 16px;
    padding-bottom: 48px;
}

.results-wrapper .audience_header_item:hover {
    border: 1px solid var(--stroke-transparent) !important;
}

.bg_transperant {
    background-color: var(--stroke-transparent);
}

.external_survey_header_left {
    margin-left: 12px;
}

.audience_temp_stop_error_wrapper {
    padding: 6px 12px;
    margin-bottom: 12px;
}

.review_temp_stop_btn {
    border: var(--stroke-default);
}

.survey__question_area .accordion_click_blk {
    display: flex;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    margin-left: -55px;
}

.survey_parent_li:hover .survey__question_area .accordion_click_blk {
    opacity: 1;
    transform: translateY(0);
}

.alert_warning_message.info {
    border: 1px solid var(--stroke-primary-default);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.primary_btn.btn_testSurvey {
    background: var(--bg-primary-default);
    color: var(--text-white);
}

.scheduling_item_container {
    padding: 8px 16px;
    border-radius: var(--border-radius-sm, 4px);
    border: var(--stroke-default);
    background: var(--bg-dark-grey);
}

.sd_survey_overview_wrapper .sd_alert_warning_message {
    position: relative;
    z-index: 1;
}

#internal-link-test::placeholder,
#internal-link::placeholder {
    color: var(--text-disabled) !important;
}

#audienceDetailWrapperOnFieldStatus {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 30px;
    padding-right: 30px;
}

#audienceDetailWrapperOnFieldStatus .audiences_survey_single_list {
    padding: 0px !important;
}

#audienceMenuWrapper .audience_setting_status {
    display: none;
}

#audienceMenuWrapper .survey_Dots_event[data-audience-id] {
    display: none;
}

#audience-details-wrapper .audience_status_change_btn .survey_tooltip_blk {
    display: none;
}

.nav__line.audience_header_seperator {
    width: 1px;
    height: 40px;
    margin-left: 12px;
    margin-right: 12px;
    max-width: 1px;
}

.custom_screener_input {
    /* border: 1px solid var(--stroke-transparent); */
    background: #F4F4F5;
}

.recontacts_main_header .topic_title {
    font-size: 16px;
    color: var(--text-main);
}

.recontacts_main_header:has(.pill_components:not([style*="display: none"])) .topic_title {
    color: var(--text-primary);
}

.custom_screener_input:has(.quotas_percentage_blk:is([style*="display: none"])) {
    background: var(--bg-default);
}

.custom_screener_input:has(.quotas_percentage_blk:is([style*="display: none"])) input {
    border: solid 1px var(--stroke-transparent);
}

#view-release-notes-modal .modal-footer {
    display: none;
}

.scheduling_item_container:has(.fa-square:is([style*="display: none"])) {
    background: var(--bg-default);
}

.recontacts_header_wrapper:has(.fa-square:is([style*="display: none"])) {
    background: var(--bg-default);
}

.blockCpxProjectWrapper:has(.fa-square:is([style*="display: none"])) {
    background: var(--bg-default);
}

#recontactsItemsTab li {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0px;
    border-radius: 0px;
}

#recontactsItemsTab li:last-child {
    border-bottom: none;
}

#recontactsItemsTab {
    background: transparent;
}

.copyAudienceId:hover {
    color: var(--text-primary);
}

.modal_ok_btn {
    gap: 8px;
}

.modal_cancel_btn {
    border-radius: 6px;
    gaP: 8px;
    border: 1px solid var(--border-color);
}

.audience_list_wrapper .audience_header_item {
    border: 1px solid var(--border-color);
    box-shadow: none;
    background: var(--bg-default);
    border-left: 4px solid #BFBFC8;
    border-radius: 6px;
}

.form-item label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-muted);
    margin-bottom: 0px;
}

.select2-selection {
    box-shadow: none !important;
}

.btn_other_button1 {
    background: var(--bg-primary-default);
}

.nav_bar_middle_logo {
    position: absolute;
    /* Remove from document flow for centering */
    left: 50%;
    /* Shift to the horizontal center */
    transform: translateX(-50%);
    /* Align center of the element to the center of the container */
}

.primary_btn_small span {}

.pagination_container span {
    color: var(--text-muted);
    font-size: 14px;

}

.dashboard_open_hide_blk .audiences_survey_single_list {
    border: 1px solid var(--border-color);
}


.dashboard_open_hide_blk .audiences_survey_single_list:hover {
    border: 1px solid var(--stroke-project-blue) !important;
}

.dashboard_open_hide_blk .audiences_survey_single_list:hover .audience_name_label {
    color: var(--text-primary);
}

.font-statistics {
    font-size: 14px;
    font-weight: 400;
    color: #6d757e;
    text-align: center;
}

#sel-rows-per-page {
    font-size: 14px;
    color: var(--text-muted)
}

/* .dashboard_open_hide_blk .audiences_setUp_btn 
{
    width: 175px;
    font-size: 14px;
} */

.dashboard_open_hide_blk .audiences_survey_top_blk_left_area p {
    font-size: 14px;
}

#view-release-notes-modal .modal-title {
    font-size: 20px;
}

#view-release-notes-modal .modal-dialog {
    max-width: 950px !important;
}

#view-release-notes-modal .modal-content {
    /* height: 100%; */
}

.media_wrapper_blk {
    /* display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    padding-right: 36px;
    width: calc(100% - 40px); */
}

#view-release-notes-modal .modal-body {
    overflow-y: hidden;
}

#add-new-question-modal .modal-dialog {
    padding: 0px !important;
}

.countMoney .currency-code {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
    display: inline-flex;
}

.audienceBalance_single_list label {
    white-space: nowrap;
    /* overflow: hidden; commented for audience launch. before uncomment check both side. */ 
    text-overflow: ellipsis;
    max-width: 425px;
}

.massUpdateAudienceItemWrapper.massUpdateAudienceItemWrapper label {
    overflow: hidden; 
    max-width: 315px;
}

.audience_setting_status .audience_hover_pill_area {
    right: 0;
    display: block;
}

.coupon-input-group {
    background: var(--bg-default);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 4px;
}

.audience_hover_pill_area span {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 12px;
}

.status-change-menu-wrapper {
    /* width: 135px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.audience_list_wrapper .audiences_survey_single_list:hover {
    border: 1px solid var(--stroke-project-blue);
    border-left: 4px solid var(--stroke-project-blue);
}

/*
.audience_list_wrapper .audience_menu_wrapper
{
    display: none;
}
*/
.mo_side_nav_wrapper:has(.project_feasibility_wrapper) {
    max-width: 1300px;
}

#predictionChartdiv {
    width: 100%;
    height: 500px;
}

.prediction_progress_marker {
    width: 4px !important;
    margin-top: -107px;
    background: var(--bg-primary-default);
    border-radius: 0px !important;
    position: relative;
}

.progressAudience_recommended_lists .all_answer_blk,
#feasbility-questions-container .all_answer_blk {
    width: 100%;
}

#audienceListGoToMenu li {
    border-top: 1px solid var(--border-color);
    margin-bottom: 0px !important;
}

#audienceListGoToMenu li a {
    padding: 6px 16px;
    display: flex;
    gap: 4px;
    align-items: center;
}

#audienceListGoToMenu.goTo_item li a {
    border: 1px solid var(--stroke-transparent);
    border-radius: 4px;
}

#audienceListGoToMenu.goTo_item li:hover {
    border-radius: 4px;
    border-top: 1px solid transparent;
}

#audienceListGoToMenu.goTo_item li:hover+li {
    border-top: 1px solid transparent;
}

#audienceListGoToMenu.goTo_item li span:not(#select-audience-menu-div li span) {
    font-size: 14px;
}

.change_status_ul {
    min-width: 475px;
    padding: 16px !important;
}

.change_status_ul li div {
    cursor: pointer;
    padding: 12px;
    border-radius: 4px;
}

.change_status_ul li {
    border-top: 1px solid var(--border-color);
}

.mo_status_btn {
    white-space: nowrap;
}

.change_status_ul li:hover {
    border-radius: 4px;
}

.change_status_ul li:hover {
    border-radius: 4px;
    border-top: 1px solid var(--stroke-transparent);
}

.change_status_ul li:hover+li {
    border-top: 1px solid var(--stroke-transparent);
}

.chart_night_background {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 60px,
            /* First 50px transparent */
            #f1f1f1 60px,
            /* Start color after 50px */
            #f1f1f1 calc(60px + 66%),
            /* Gradient stops at 66% width */
            #5588aa00 calc(60px + 66%)
            /* Transparent beyond 66% */
        );
    background-size: 8em;
}

.audience_name_id_wrapper {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0px;
}

#audiences-wrapper .open_edit_question_offcanvas {
    pointer-events: none;
}

#uploaded-multiple-redirect-links th {
    font-size: 16px !important;
    font-weight: 400 !important;
}

#multi-links-options .mo_vertical_divider {
    height: 45px;
}

#feasbility-questions-rows .answerPopulation_statistic_wrapper {
    padding-left: 0px;
    padding-right: 0px;
}

#audience-statistics-wrapper .single_progressHtml_right_wrapper {
    padding-right: 0px;
}


.timeline_chart_wrapper {
    padding-left: 28px;
    padding-right: 28px;
    margin-top:32px;
}

.mo_status_btn.live_btn:hover,
.mo_status_btn.change_to_activate_from_stopped:hover {
    background: rgba(107, 176, 33, 0.2);
}

.mo_status_btn.paused_btn:hover {
    background: rgba(255, 166, 0, 0.1)
}

.mo_status_btn.stopped_btn:hover {
    background: var(--bg-danger-2);
}

.mo_status_btn.finished_btn:hover {
    background: rgba(51, 61, 96, 0.2);
}

.mo_status_btn.audiences_setUp_btn:hover {
    background: var(--hover-bg-shadow);
}

.tracker_feasibility {
    gap: 32px;
    border-top: 1px solid var(--border-color);
    width: 420px;
    margin-left: 12px;
}

#add-zip-code-collection {
    position: sticky;
    bottom: 0;
    padding-bottom: 2px;
    background: var(--bg-default-1);
    padding-top: 4px;
}

ul .settings_item:hover {
    border: 1px solid var(--bg-primary-default);
    background: var(--bg-primary-default);
}

ul .settings_item:hover span {
    color: var(--text-white);
}

.select_area:hover select {
    background: var(--bg-primary-default) !important;
    color: var(--text-white) !important;
    /* font-weight: 500 !important; */
}

.select_area:hover i {
    color: var(--text-white) !important;
}

.updates_header {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.updates_content {
    color: var(--text-main);
    font-size: 12px;
    color: var(--text-main);
    font-size: 12px;
    background: var(--bg-default);
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 6px;
}

/* .select_area select
{
    font-size: 14px;
} */

.chosen-search-input::placeholder {
    color: var(--text-placeholder) !important;
}

#multiple-country-select-container .search-field {
    width: 100% !important;
}

#multiple-country-select-container .chosen-search-input {
    width: 100% !important;
}

.select_templates,
.select_template_category,
.select_country {
    font-size: 16px;
}

.timeline_progress_chart_wrapper {
    /* margin-left: 18px;
    border-left: 1px solid var(--border-color);
    padding-left: 16px; */
    margin-top:64px;
}

#multiple-country-select-container .chosen-choices {
    padding-right: 40px;
}

.custom_check_container:has(input:disabled)+span label {
    color: var(--text-disabled) !important;
}

.duplicate_audience_table td,
.duplicate_audience_table th {
    font-size: 12px;
}

#copy-standard-screeners {
    font-size: 16px;
}

.select_backround {
    background: var(--bg-default-1);
}

.ai_help_btn {
    position: fixed;
    bottom: 12px;
    left: 12px;
}

.ai_prompt_wrapper {
    gap: 8px;
}

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

.inter_lock_quota_inputs input {
    width: 85px;
    height: 40px;
    cursor: pointer;
    transition: 0.2s;
    min-width: 50px;
}

translatable {
    display: none;
}

.MuiList-root translatable {
    display: initial !important;
}

.ai_query_text {
    padding-right: 12px;
}

.ai_query_result_wrapper {
    padding-left: 12px;
    margin-top: 12px;
}

.animate-bottom {
    position: relative;
    animation: animatebottom 0.4s;
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

#modal-chat-gpt-help-prompt .modal-content {
    position: absolute;
    bottom: 12px;
}

.submenu li a {
    gap: 8px;
}


.given_answer i {
    width: 20px;
}

.project_add_question .survey_parent_li {
    cursor: pointer;
}

.designerOverview_header_progress_area {
    border-top: 1px solid var(--border-color);
    /* margin-top: 16px; */
    padding-top: 6px;
}

.project_body {
    display: none;
}

#custom-screener-msg-container .mo_alert_wrapper {
    margin-bottom: 4px;
}

#feasibilityTotalWrapper .offcanvas_overlay.active,
#accountOverviewBody .offcanvas_overlay.active,
#audienceReactUiComponentsWrapper .offcanvas_overlay.active {
    z-index: 11;
}

.feasibility_wrapper .designerOverview_header_progress_left p,
.feasibility_wrapper .designerOverview_header_progress_right p {
    text-wrap: nowrap;
}

.feasibility_wrapper .sprw_li_right span {
    width: 70px;
    font-size: 12px;
}

.feasibility_wrapper .answerPopulation_statistic_wrapper ul li {
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.toast {
    opacity: 0.8 !important;
    border-radius: 4px !important;
}

.change_status_ul.disable_buttons li:not(.audiences_id_date_text) {
    background: var(--bg-default-1);
    pointer-events: none;
}

.target_disabled_icon:not([style*="display: none"]) + .qualify_blk {
    display: none;
}

.target_disabled_icon:not([style*="display: none"]) + .quota_enable_disable {
    display: none !important;
}


.quotas_answer_blk:has([name="target-disabled-icon"]:not([style*="display: none"])) {
    color: var(--mo-text-2);
}

.quotas_answer_blk:has([name="target-disabled-icon"]:not([style*="display: none"])) input{
color: var(--mo-text-2);
}

.age_answer_module_list_blk:has([name="target-disabled-icon"]:not([style*="display: none"])){
color: var(--mo-text-2);
}

.age_answer_module_list_blk:has([name="target-disabled-icon"]:not([style*="display: none"])) .gender_list_text{
color: var(--mo-text-2) !important;
}

.age_answer_module_list_blk:has([name="target-disabled-icon"]:not([style*="display: none"])) input{
color: var(--mo-text-2);
}

.custom_screener_input:has(.external_input:focus) {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 16px 0px;
} 

.designerOverview_header_right_blk .warning_alert_wrapper, .designerOverview_header_right_blk .error_alert_wrapper
{
    margin-top:-4px;
}

/* .table>:not(:last-child)>:last-child>*
{
    border-bottom-color: inherit !important
} */

#modal-close-confirmation .modal-content
{
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(249, 249, 250, 0.8) !important;
    backdrop-filter: blur(12px);
}

.massUpdateAudienceFieldWrapper
{
    display:none;
}

 
.massUpdateAudienceItemWrapper:has(.custom_check_input:checked) .massUpdateAudienceFieldWrapper {
    display: block;
}

.massUpdateAudienceFieldWrapper .audience_setting_title
{
    font-size: 12px !important;
    color: var(--mo-text-2) !important;
    font-weight: 400 !important;
}

.massUpdateAudienceFieldWrapper .auib_text
{
    color: var(--text-main) !important
}

.audienceBalance_lists_content .massUpdateAudienceItemWrapper:not(:first-child) .mo_settings_description {
    display: none;
}

.edit_mass_audience_item
{
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.mo_checkEvent_area .mo_settings_pill
{
    display: none;
}
.mo_checkEvent_area:has(.custom_check_input:checked) .mo_settings_pill
{
    display: flex !important;
}

.mo_settings_item:has(.custom_check_input:checked)
{
    background: var(--bg-default) !important;
    border: 1px solid var(--stroke-primary) !important;
}

.survey__question_area .survey_tooltip_blk .audience_hover_pill_area
{
    right: 0;
}

#mass-updates .audienceBalance_single_list
{
    background: var(--bg-default-1);
}

.mo_settings_item:has(.custom_check_input:checked) .mo_settings_title 
{
    color: var(--text-primary) !important;
}

.mo_sub_check:has(.custom_check_input:checked) .check_label
{
    color: var(--text-primary) !important;
}

.feasibility_audience_list li a
{
    border: 1px solid var(--stroke-transparent);
    border-radius: 4px;
    padding: 6px 16px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.feasibility_audience_list li
{
    border-top: 1px solid var(--border-color);
    margin-bottom: 0px !important;
}

#modal-custom-screen-confirmation-modal #modal-content-div
{
    padding: 6px;
    padding-top: 0px !important;
    margin-top: -10px;
}

#modal-custom-screen-confirmation-modal .modal-footer
{
    display: none;
}

#add-zip-code-collection-modal .modal-content
{
    height: 75%;
}

#add-zip-code-collection-modal #modal-content-div
{
    height: calc(100% - 100px);
}

#add-zip-code-collection-modal .audienceQuestion_main_area
{
    height: 100%;
}

#add-zip-code-collection-modal .audienceQuestion_main_wrapper
{
    height: 100%;
}

#add-zip-code-collection-modal .container
{
    height: 100%;
}

#respondentsResults td
{
    max-width: 200px;       /* Set your desired max width */
  white-space: nowrap;    /* Prevent text from wrapping */
  overflow: hidden;       /* Hide overflowed content */
  text-overflow: ellipsis;/* Show ellipsis */
}

.menu_icon_wrapper
{
    margin-right: 16px;
}

.launch_summary_details:has(.cpi-block:not([style*="display: none"])) {
  width: 205px;
}

.audience-name-truncate {
    flex-grow: 1;
    min-width: 0;
}
.audience-name-truncate label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
}

.status_project_title
{
    position: absolute;
    margin-top: 12px;
    left: 78px;
}

.fa-light.fa-square::before
{
    margin-top: -2px;
    margin-bottom: -2px;
    display: block;
}

#modal-add-audience-question-close-confirmation
{
    background: #0000005c;
}

.field_metrics_label
{
    font-size: 14px !important;
}

#audience-details-wrapper .audiences_survey_bottom_blk_left_area p span.pppp
{
    color: var(--text-primary);
}

.audiences_overview_header_left
{
    margin-left: 12px;
}

.audiences_overview_header_left h3, .external_survey_header_left h3
{
    padding-bottom: 4px;
}

#closingWrapper .offcanvas_overlay.active{
    z-index: 11;
}

.country_list_menu
{
    height: 700px;
}

.audienceDetailsWrapper:has(#audience-details-wrapper[style*="display: none"])
{
    display: none !important;
}

#audience-details-wrapper .advance_result_right_wrapper
{
    flex-direction: row !important;
}

#custom-screener-msg-container:has(.mo_alert_wrapper) {
    margin: 12px 8px 0px 8px;
}

.dashboard_main_area .advance_result_right_wrapper, .designer_view .advance_result_right_wrapper
{
    flex-direction: row !important;
}

body
{
    overflow: auto !important;
}

#recontactsItemsTabItems, #eliminationsItemsTab
{
    padding: 0px !important;
    background: var(--bg-default) !important;
    border: none !important;
}