/********** Template CSS **********/
:root {
    --primary: #4F46E5;
    --primary-dark: #3730A3;
    --secondary: #6366F1;
    --accent: #7C3AED;
    --surface: #FFFFFF;
    --sidebar-bg: #0F172A;
    --sidebar-text: #94A3B8;
    --sidebar-hover: #1E293B;
    --sidebar-active: #4F46E5;
    --navbar-bg: rgba(255,255,255,0.85);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --card-hover-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --body-bg: #F1F5F9;
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --border-color: #E2E8F0;
    --mysurveys-icon-button-icon-size: 1.385rem;
    --icon-button-touch-target-display: block;
    --mysurveys-icon-button-icon-color: inherit;
    --bs-body-line-height: 1.5;
    font-size: 12px;
}

@media (min-width: 768px) {
    :root {
        font-size: 12px; /* سایز پایه برای تبلت */
    }
}

@media (min-width: 1200px) {
    :root {
        font-size: 13px; /* سایز پایه برای دسکتاپ */
    }
}

.back-to-top {
    position: fixed;
    display: none;
    right: 5.462rem; /* 45px */
    bottom: 3.462rem; /* 45px */
    z-index: 999999;
}

/*** Body ***/
body {
    direction: rtl !important;
    font-family: IranSanseL, sans-serif;
    font-size: 1rem;
    line-height: var(--bs-body-line-height);
    background-color: var(--body-bg);
    color: var(--text-primary);
    overflow: hidden;
}

.main-container {
    background-color: var(--body-bg);
    min-height: 100vh;
}

.survey-dropdown {
    font-size: 1rem; /* 13px */
}

.survey-dropdown li {
    padding-right: 0;
    padding-left: 0;
}

.survey-dropdown li i {
    font-size: 1.25em;
    line-height: .05em;
    vertical-align: -.075em;
}

a {
    color : var(--primary);
}
.t-a-l-r {
    text-align-last: right !important;
}

.notif-badge{
    font-size: 0.769rem; /* 10px */
    line-height: 1.231rem; /* 16px */
    padding: 2px 0.462rem; /* 6px */
    position: absolute;
    left: -0.385rem; /* -5px */
    top: -0.769rem; /* -10px */
    background: #ff5722;
    border-radius: 100%;
    color: #fff;
    font-weight: 600;
    width: 1.462rem; /* 19px */
    height: 1.462rem; /* 19px */
}

.copyright {
    background: var(--sidebar-bg) !important;
    background-size: cover;
    direction: ltr;
    bottom: 0;
    position: fixed;
    z-index: 100;
}

.copyright p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    direction: ltr;
    font-size: 0.75rem;
    opacity: 0.8;
}

.input-block {
    display: flex;
    flex-direction: column;
    padding: 0.769rem 0.769rem 0.615rem; /* 10px 10px 8px */
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1.538rem; /* 20px */
    transition: 0.3s;
    height: fit-content;
}

.input-label {
    font-size: 1rem; /* 13px */
    text-transform: uppercase;
    font-family: "IranSanse", sans-serif;
    font-weight: 600;
    letter-spacing: 0.054rem; /* 0.7px */
    color: #8c7569;
    transition: 0.3s;
    text-align-last: right;
}

.input-block input {
    outline: 0;
    border: 0;
    padding: 4px 0.769rem; /* 10px */
    font-size: 1rem; /* 13px */
    border-top: 1px solid #ddd;
    height: 3.077rem; /* 40px */
}

/*** checkbox wrapper***/
.checkbox-wrapper input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper .toggle {
    position: relative;
    display: block;
    width: 3.077rem; /* 40px */
    height: 1.538rem; /* 20px */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .toggle:before {
    content: "";
    position: relative;
    top: 3px;
    right: 3px;
    width: 2.615rem; /* 34px */
    height: 1.077rem; /* 14px */
    display: block;
    background: #9A9999;
    border-radius: 0.615rem; /* 8px */
    transition: background 0.2s ease;
}
.checkbox-wrapper .toggle span {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.538rem; /* 20px */
    height: 1.538rem; /* 20px */
    display: block;
    background: white;
    border-radius: 0.769rem; /* 10px */
    box-shadow: 0 3px 0.615rem rgba(154, 153, 153, 0.5); /* 8px */
    transition: all 0.2s ease;
}
.checkbox-wrapper .toggle span:before {
    content: "";
    position: absolute;
    display: block;
    margin: -1.385rem; /* -18px */
    width: 4.308rem; /* 56px */
    height: 4.308rem; /* 56px */
    background: rgba(79, 46, 220, 0.5);
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
}

.checkbox-wrapper input[type="checkbox"]:checked + .toggle:before {
    background: #947ADA;
}

.checkbox-wrapper input[type="checkbox"]:checked + .toggle span {
    background: #4F2EDC;
    transform: translateX(-1.538rem); /* -20px */
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    box-shadow: 0 3px 0.615rem rgba(79, 46, 220, 0.2); /* 8px */
}

.checkbox-wrapper input[type="checkbox"]:checked + .toggle span:before {
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
}

.checkbox-wrapper .checkboxLabel {
    font-size: 0.85rem !important;
}

.checkbox-wrapper input[type="checkbox"]:checked + .toggle + .checkboxLabel {
    color: #4F2EDC;
}

.contentForm {
    height: 100vh;
}

.survey-navbar {
    position: fixed;
    width: 97%;
    background-color: white;
}

.survey-progress{
    position: fixed;
    width: 97%;
    top: 9.692rem; /* 126px */
    background-color: white;
}

.survey-navigation{
    position: fixed;
    width: 97%;
    top: 15.077rem; /* 196px */
    background-color: white;
}
  
/*** Button ***/
.btn {
    transition: all 0.2s ease;
    border-radius: 0.6rem;
}

.btn.btn-primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
}

.btn.btn-primary:hover {
    box-shadow: 0 4px 14px rgba(79,70,229,0.35);
    transform: translateY(-1px);
}

.btn-outline-primary {
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, #10B981, #059669);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    border: none;
    color: #fff;
}

.btn-info {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
    border: none;
    color: #fff;
}

.btn-square {
    width: 2.923rem; /* 38px */
    height: 2.923rem; /* 38px */
}

.btn-sm-square {
    width: 2.462rem; /* 32px */
    height: 2.462rem; /* 32px */
}

.btn-lg-square {
    width: 3.692rem; /* 48px */
    height: 3.692rem; /* 48px */
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 3.846rem; /* 50px */
}


/*** Layout - Sidebar ***/
.sidebar {
    position: fixed;
    width: 4.615rem;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sidebar-bg);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sidebar::-webkit-scrollbar {
    width: 3px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
}

.sidebar.left {
    height: fit-content;
    left: -1.231rem;
    top: 15.385rem;
    border-radius: 0.75rem;
    font-size: small;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    width: 4.615rem;
    padding: 0.3rem !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sidebar.left:hover {
    width: 15.385rem;
}

.sidebar.left .navbar-nav .nav-link {
    white-space: nowrap;
}

.sidebar.left .nav-text {
    display: none;
}

.sidebar.left:hover .nav-text {
    display: inline;
}

/* .sidebar.right {
    right: 0;
    top: 0;
    height: 100vh;
    bottom: 0;
    background: #fff;
    border-left: 1px solid var(--border-color);
    box-shadow: 4px 0 20px rgba(0,0,0,0.06);
} */

.sidebar:hover,
.sidebar.open {
    width: 15.385rem;
}

.sidebar:hover .sidebar-nav-text,
.sidebar.open .sidebar-nav-text {
    opacity: 1;
    visibility: visible;
}

.content {
    /* margin-right: 2.615rem; */
    min-height: calc(100vh + -5rem);
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.content.open {
    margin-right: 15.385rem;
}

/* Top bar sections */
.dashboard-top div.rounded,
.mysurveys-top div.rounded,
.newsurvey-top div.rounded,
.formsurvey-top div.rounded {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    align-items: center;
}

/* ثابت کردن نوار تب‌ها */
.formsurvey-top {
    position: sticky !important;
    top: 70px; /* مقدار top باید برابر با ارتفاع Navbar شما باشد */
    z-index: 1; /* کمتر از navbar باشد تا همیشه زیر navbar قرار بگیرد */
    background-color: var(--body-bg) !important; /* پس‌زمینه یکپارچه */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
    background-color: rgba(241, 245, 249, 0.9) !important; /* کمی شفاف */
}

.mysurveys-body,
.dashboard-body,
.workspace-body,
.title-body,
.formsurvey-body {
    /* background-color: #e3ddef; */
    width: 97%;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    box-shadow: 0px 0px 0.62rem 0.284rem rgba(0, 0, 0, 0.08) !important;
    overflow-y: auto;
    overflow-x: hidden;
    flex-wrap: wrap;
    border-radius: 0.75rem;
}

.mysurveys-body,
.formsurvey-body {
    height: calc(100vh + -16.6rem);
}

.title-body {
    height: calc(100vh + -17.6rem);
}

.dashboard-body {
    height: calc(100vh + -18rem);
}

.workspace-body {
    height: calc(100vh + -18.5rem);
}

.workspace-body .row > div {
    height: fit-content;
}

@media (max-width: 991px) {

    .content {
        margin-right: 0;
    }

    .main-container .navbar-light {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* .sidebar.right {
        width: 0 !important;
        overflow: hidden;
        transition: width 0.3s;
    }

    .sidebar.right.open,
    .sidebar.right.active {
        width: 15.385rem !important;
    } */

    .mysurveys-body > div,
    .dashboard-body > div {
        width: 100%;
    }

}
.newsurvey-body {
    min-height: auto !important;
}

.formsurvey-body {
    min-height: calc(100vh + -16.154rem);
    background-color: #dedeea;
    background-image: url(/static/img/bg-7.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 3rem;
}

.newsurvey-body .divContentEditable {
    height: 35vh;
}

.newsurvey-body .navbar {
    width: 100%;
}

.newsurvey-body .navbar .nav-item:not(i) {
    font-family: IranSanseL;
    font-size: 1rem;
}

@media (max-width: 991.98px) {
}


/*** Navbar ***/
.main-container .navbar:not(.main-container .sidebar .navbar) {
    background: var(--navbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    height: 4.5rem;
    padding: 0 1.5rem;
    /* margin-left: 16rem; */
    margin-right: 4.6rem;
    z-index: 998 !important;
}

.main-container .navbar .title {
    font-family: Tanha;
    font-weight: bolder;
    margin-right: 4.615rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.porsian-nav-top-btn {
    width: 12.692rem !important;
    height: 2.8rem !important;
    justify-content: center;
    text-align: center;
    border-radius: 0.6rem !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    transition: all 0.2s ease !important;
}

.porsian-nav-top-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.sidebar .navbar {
    background-color: transparent !important;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    width: inherit;
    height: 100%;
}

.sidebar .navbar .navbar-nav {
    flex: 1;
    padding: 0 0.5rem;
}

.sidebar.right .navbar .navbar-nav .nav-link {
    padding: 0.65rem 0.8rem;
    color: var(--sidebar-text);
    font-weight: 500;
    border-radius: 0.6rem;
    outline: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2px;
    transition: all 0.2s ease;
    font-family: IranSanseL;
    font-size: 0.85rem;
}

.sidebar.right .navbar .navbar-nav .nav-link:hover {
    color: #fff;
    background: var(--sidebar-hover);
}

.sidebar.right .navbar .navbar-nav .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}

.sidebar.right .navbar .navbar-nav .nav-link i {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 0.6rem;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sidebar.right .navbar .navbar-nav .nav-link:hover i {
    background: rgba(255,255,255,0.1);
}

.sidebar.right .navbar .navbar-nav .nav-link.active i {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.sidebar-nav-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    font-size: 1rem;
}

.sidebar .navbar .navbar-nav .nav-item .dropdown-menu {
    background: var(--sidebar-hover);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.6rem;
    padding: 0.3rem;
    margin-right: 2.5rem;
}

.sidebar .navbar .navbar-nav .nav-item .dropdown-menu a {
    font-size: 0.8rem;
    color: var(--sidebar-text);
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    transition: all 0.2s ease;
}

.sidebar .navbar .navbar-nav .nav-item .dropdown-menu a:hover,
.sidebar .navbar .navbar-nav .nav-item .dropdown-menu a:active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar .navbar .navbar-nav .nav-item .dropdown-menu i {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    background: transparent;
}

.sidebar .navbar .dropdown-toggle::after {
    position: absolute;
    top: 1.2rem;
    left: 0.8rem;
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    transition: transform 0.3s ease;
    color: var(--sidebar-text);
}

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

.sidebar .navbar .dropdown-item {
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    width: 100%;
    color: var(--sidebar-text);
}

.sidebar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link {
    padding: 0.923rem 0;
    color: var(--text-primary);
    outline: none;
}

.sidebar.left .sidebar-toggler,
.content .navbar .navbar-nav .nav-link {
    margin-right: 1.077rem !important;
}

.sidebar.left .navbar {
    display: inline-flex;
    width: auto;
}

.sidebar.left .navbar .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

.sidebar.left .navbar .navbar-nav .nav-link {
    margin-right: 0 !important;
    cursor: move;
    padding: 0.5rem 0;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: transparent;
    border: 1px solid transparent;
}

.sidebar.left .navbar .navbar-nav .nav-link:hover {
    background: rgba(79,70,229,0.08);
    color: var(--primary);
    border-color: rgba(79,70,229,0.15);
}

.sidebar.left .navbar .navbar-nav .nav-link.over {
    border: 2px dashed var(--primary);
    background: rgba(79,70,229,0.05);
}

.sidebar.left .navbar .navbar-nav .nav-link i {
    font-size: 1.2rem;
    width: 2rem;
    text-align: center;
    color: var(--primary);
    flex-shrink: 0;
}

.sidebar .sidebar-toggler {
    margin-right: 1.923rem;
}

.content.open .navbar .sidebar-toggler i {
    transform: rotate(-180deg);
}

.content .navbar .sidebar-toggler i {
    transition: transform 0.3s ease;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.content .navbar .navbar-nav .nav-link i {
    width: 2.308rem; /* 30px */
    height: 2.308rem; /* 30px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 3.077rem; /* 40px */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.sidebar.left .sidebar-toggler i {
    border-radius: 5px;
}

.content .navbar .dropdown-toggle::after {
    margin-right: 0.462rem; /* 6px */
    vertical-align: middle;
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    transition: .5s;
}

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

@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link {
        margin-left: 1.154rem; /* 15px */
    }
}

/*** alarm window ***/
.navbar .nav-item .popup-alarm-container {
    position: absolute;
    left: -11.538rem;
    top: calc(100% - -1.154rem);
    width: 26.154rem;
    height: 50vh;
    min-height: 700%;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    z-index: 999;
    border: 1px solid var(--border-color);
    overflow: hidden;
    cursor: default;
    padding: 0;
}

.navbar .nav-item .popup-alarm-container .popup-alarm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    padding: 1rem 1.2rem;
    position: relative;
}

.navbar .nav-item .popup-alarm-container .popup-alarm-header .popup-alarm-header-text{
    font-size: 1rem;
    color: #fff;
    display: block;
    margin-bottom: 0;
    font-weight: 600;
}

.navbar .nav-item .popup-alarm-container .popup-alarm-header .popup-alarm-header-actions a {
    background: rgba(255,255,255,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.navbar .nav-item .popup-alarm-container .popup-alarm-header .popup-alarm-header-actions a:hover {
    background: rgba(255,255,255,0.25);
}

.navbar .nav-item .popup-alarm-container .popup-alarm-header .popup-alarm-header-actions i {
    color: white;
    font-size: 1rem;
}

.navbar .nav-item .popup-alarm-container .popup-alarm-content{
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #e4e3e3;
    height: calc(100% - 4.385rem);
    width: 100%;
}

.popup-alarm-container .all-alarms{
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: hidden;
}

.navbar .nav-item .popup-alarm-container a.see-all-link{
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    overflow: hidden;
}

.navbar .nav-item .popup-alarm-container a.see-all-link .popup-alarm-footer{
    background: transparent;
    color: #fff;
    padding: 0.75rem 0;
    height: auto;
}

.popup-alarm-container .all-alarms .content-item-container {
    margin: 0;
    background-color: #ffffff;
}

.popup-alarm-container .all-alarms .content-item-container .context-link {
    color: inherit;
    text-decoration: none;
}

.popup-alarm-container .all-alarms .content-item-container .content-item-body {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.popup-alarm-container .all-alarms .content-item-container .content-item-body:hover {
    background: #F8FAFC;
}

.popup-alarm-container .all-alarms .content-item-container .content-item-body .notification-message {
    line-height: 1.6rem !important;
    font-size: 90%;
    font-weight: 400;
}

.popup-alarm-container .all-alarms .content-item-container.unread .content-item-body .notification-message{
    font-weight: 600;
}

.popup-alarm-container .all-alarms .content-item-container .content-item-body .notification-time-message,
.popup-alarm-container .all-alarms .content-item-container.unread .content-item-body .notification-time-message{
    line-height: 1rem !important;
    font-size: 65%;
    text-align: left;
    color: var(--text-secondary);
}

/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 0.769rem; /* 10px */
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
    width: 0px;
    transition: 2s;
}

.testimonial-carousel .owl-dots {
    margin-top: 1.846rem; /* 24px */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 0.385rem; /* 5px */
    width: 1.154rem; /* 15px */
    height: 1.154rem; /* 15px */
    border: 5px solid var(--primary);
    border-radius: 1.154rem; /* 15px */
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--dark);
    border-color: var(--primary);
}

/*** Tab Progress ***/
.tab-progress {
    /* width: 30%; */
    display: flex;
    font-size: small;
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.5rem;
    box-shadow: var(--card-shadow);
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tab-progress .tab-item {
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    position: relative;
    background: transparent;
    border-radius: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    flex: 1;
    margin: 0 1px;
}

.tab-progress .tab-item::after {
    display: none;
}

.tab-progress .tab-item::before {
    display: none;
}

.tab-progress .tab-item.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}

.tab-progress .tab-item.highlight {
    background: rgba(79,70,229,0.08);
    color: var(--primary);
}

.tab-progress .tab-item:first-child {
    margin-right: 0;
}

.tab-progress .tab-item:last-child {
    margin-left: 0;
}

/*** Text Editor ***/
.tox :not(svg):not(rect) {
    box-sizing: inherit;
    color: inherit;
    cursor: inherit;
    direction: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    -webkit-tap-highlight-color: inherit;
    text-align: inherit;
    text-decoration: inherit;
    text-shadow: inherit;
    text-transform: inherit;
    vertical-align: inherit;
    white-space: inherit;
}

.tox :not(svg):not(rect) {
    background: 0 0;
    border: 0;
    box-shadow: none;
    float: none;
    height: auto;
    margin: 0;
    max-width: none;
    outline: 0;
    padding: 0;
    position: static;
    width: auto;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: #fff;
    border-bottom: none;
    box-shadow: 0 2px 2px -2px rgba(34,47,62,.1),0 0.615rem 0.615rem -4px rgba(34,47,62,.07); /* 8px */
    padding: 4px 0;
    transition: box-shadow .5s;
}

.tox .tox-editor-header {
    display: grid;
    grid-template-columns: 1fr min-content;
    z-index: 1;
}

.tox .tox-anchorbar, .tox .tox-toolbar-overlord {
    grid-column: 1/-1;
}

.tox .tox-toolbar-overlord {
    background-color: #fff;
}

.tox .tox-toolbar-overlord .tox-toolbar:not(.tox-toolbar--scrolling):first-child, .tox .tox-toolbar-overlord .tox-toolbar__primary {
    background-position: center top 3rem; /* 39px */
}

.tox .tox-toolbar-overlord>.tox-toolbar, .tox .tox-toolbar-overlord>.tox-toolbar__overflow, .tox .tox-toolbar-overlord>.tox-toolbar__primary {
    background-position: center top 0;
    background-size: calc(100% - 0.846rem * 2) calc(100% - 0px); /* 11px */
}

.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {
    background-color: #fff;
    background-image: repeating-linear-gradient(#e3e3e3 0 1px,transparent 1px 3rem); /* 39px */
    background-position: center top 3.077rem; /* 40px */
    background-repeat: no-repeat;
    background-size: calc(100% - 0.846rem * 2) calc(100% - 3.154rem); /* 11px, 41px */
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 0 0;
    transform: perspective(1px);
}

.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
    border-left: 1px solid transparent;
}

.tox .tox-toolbar__group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0;
    padding: 0 0.846rem 0 0.923rem; /* 11px 12px */
}

.tox .tox-tbtn {
    align-items: center;
    background: 0 0;
    border: 0;
    border-radius: 3px;
    box-shadow: none;
    color: #222f3e;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.077rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    height: 2.154rem; /* 28px */
    justify-content: center;
    margin: 0.462rem 1px 0.385rem 0; /* 6px 5px */
    outline: 0;
    overflow: hidden;
    padding: 0;
    text-transform: none;
    width: 2.615rem; /* 34px */
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.expand-i {
    border: 2px solid;
    border-radius: 1.154rem; /* 15px */
    width: 2.308rem; /* 30px */
    height: 2.308rem; /* 30px */
    text-align-last: center;
    margin-left: 0.769rem; /* 10px */
    align-content: center;
    cursor: pointer;
    transform: rotate(0deg);
    transition: 1s;
}

.htmlDetail .ck.ck-content.ck-editor__editable {
    min-height: 11.538rem !important; /* 150px */
    max-height: 11.538rem !important; /* 150px */
    overflow-x: scroll;
    overflow-x: hidden;
}

.ck-word-count {
    font-size: smaller;
    margin-top: 3px !important;
    justify-self: left;
}

.htmlDetail .word-count {
    display: none !important;
}

.htmlDetail > p {
    display: none !important;
}

#ckDetail label {
    display: none !important;
}

.ck.ck-balloon-panel {
    display: none !important;
}

#ckDetail .ck-editor__editable_inline {
    height: 24.615rem; /* 320px */
    min-height: 15.385rem; /* 200px */
    max-height: 24.615rem; /* 320px */
    overflow-y: auto !important; 
}

html:not([data-bs-theme=dark]) .card-list {
    background: #fff;
}

.pointer {
    cursor: pointer;
}

.card-list {
    margin: 0.75rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.25s ease;
    box-shadow: var(--card-shadow);
}

.card-list:hover {
    box-shadow: var(--card-hover-shadow);
    border-color: transparent;
}

html:not([data-bs-theme=dark]) .card-list .title {
    background: #FAFBFC;
}

.card-list .title {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* Modern cards for dashboard */
.stat-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: all 0.25s ease;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    border-radius: 0 0 4px 4px;
}

.stat-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-2px);
}

.stat-card .stat-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.3rem;
}

.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Content card */
.content-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.content-card .card-header-custom {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

body[dir=rtl] .mysurveys-icon-button.mysurveys-button-base {
    --mysurveys-icon-button-state-layer-size: 3.385rem; /* 44px */
    width: var(--mysurveys-icon-button-state-layer-size);
    height: var(--mysurveys-icon-button-state-layer-size);
    padding: 0.769rem; /* 10px */
}

.mysurveys-icon-button.mysurveys-button-base {
    padding: 0;
    --mysurveys-icon-button-state-layer-size: 3.077rem !important; /* 40px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mysurveys-icon-button.mysurveys-button-base {
    --mysurveys-icon-button-state-layer-size: 3.692rem; /* 48px */
    width: var(--mysurveys-icon-button-state-layer-size);
    height: var(--mysurveys-icon-button-state-layer-size);
    padding: 0.923rem; /* 12px */
}

.mysurveys-icon-button {
    -webkit-user-select: none;
    user-select: none;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    border: none;
    outline: none;
    background-color: rgba(0,0,0,0);
    fill: currentColor;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    z-index: 0;
    overflow: visible;
    border-radius: 50%;
    flex-shrink: 0;
    text-align: center;
    width: var(--mysurveys-icon-button-state-layer-size, 3.692rem); /* 48px */
    height: var(--mysurveys-icon-button-state-layer-size, 3.692rem); /* 48px */
    padding: calc(calc(var(--mysurveys-icon-button-state-layer-size, 3.692rem) - var(--mysurveys-icon-button-icon-size, 1.846rem)) / 2); /* 24px */
    font-size: var(--mysurveys-icon-button-icon-size);
    color: var(--mysurveys-icon-button-icon-color, var(--app-on-surface-variant));
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.mysurveys-icon-button .mysurveys-button-persistent-ripple {
    border-radius: 50%;
}

.mysurveys-icon-button .mysurveys-button-ripple, .mysurveys-icon-button .mysurveys-button-persistent-ripple, .mysurveys-icon-button .mysurveys-button-persistent-ripple::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}

span, ol, ul, pre, div {
    scrollbar-width: thin !important;
    scrollbar-color: var(--primary) #f5f5f5 !important;
}

.mysurveys-icon-button .mysurveys-focus-indicator {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.mysurveys-icon-button .mysurveys-button-touch-target {
    position: absolute;
    top: 50%;
    height: 3.692rem; /* 48px */
    left: 50%;
    width: 3.692rem; /* 48px */
    transform: translate(-50%, -50%);
    display: var(--icon-button-touch-target-display);
}

.mysurveys-icon-button .mysurveys-button-ripple {
    overflow: hidden;
}

.datetime[_su785412] {
    color: #0062a7;
    margin-bottom: 0.615rem; /* 8px */
    display: flex;
    align-items: center;
}

.progress[_su785412] {
    height: 0.538rem; /* 7px */
    background: #ddd;
}

.bt {
    border-top: 1px #ecedf6 solid;
}

.mysurveys-form-field {
    --mat-mdc-form-field-floating-label-scale: 0.75;
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

[dir=rtl] .mysurveys-text-field-wrapper {
    padding-left: 1.231rem; /* 16px */
    padding-right: 1.231rem; /* 16px */
}

.mysurveys-text-field-wrapper {
    width: 100%;
    z-index: 0;
    height: auto;
    flex: auto;
    will-change: auto;
}

[dir=rtl] .mdc-text-field--outlined {
    padding-right: max(1.231rem,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)) + 4px);
    padding-left: max(1.231rem,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)));
}

.mdc-text-field--outlined {
    height: 4.308rem; /* 56px */
    overflow: visible;
    padding-right: max(1.231rem,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)));
    padding-left: max(1.231rem,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)) + 4px);
}

.mysurveys-form-field-flex {
    display: inline-flex;
    align-items: baseline;
    box-sizing: border-box;
    width: 100%;
}

.mdc-text-field--outlined .mdc-notched-outline {
    z-index: 1;
}

[dir=rtl] .mdc-notched-outline {
    text-align: right;
}

.mdc-notched-outline {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    text-align: left;
    pointer-events: none;
}

.mysurveys-form-field-textarea-control {
    vertical-align: middle;
    resize: vertical;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    overflow: auto;
}

.mysurveys-form-field-input-control {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    border: none;
}

.mysurveys-text-field__input {
    width: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 2.154rem; /* 28px */
}

.mysurveys-checkbox {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.mat-internal-form-field {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.mdc-checkbox {
    display: inline-block;
    position: relative;
    flex: 0 0 1.385rem; /* 18px */
    box-sizing: content-box;
    width: 1.385rem; /* 18px */
    height: 1.385rem; /* 18px */
    line-height: 0;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: bottom;
    padding: calc((var(--mdc-checkbox-state-layer-size, 3.077rem) - 1.385rem)/2); /* 40px */
    margin: calc((var(--mdc-checkbox-state-layer-size, 3.077rem) - var(--mdc-checkbox-state-layer-size, 3.077rem))/2);
}

.mat-mdc-checkbox-touch-target {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 3.692rem; /* 48px */
    width: 3.692rem; /* 48px */
    transform: translate(-50%, -50%);
    display: var(--mat-checkbox-touch-target-display);
}

.mdc-checkbox .mdc-checkbox__native-control {
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
}

.mat-mdc-checkbox .mdc-checkbox__ripple {
    opacity: 0;
}

.mat-mdc-checkbox-ripple, .mdc-checkbox__ripple {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.mdc-checkbox__background {
    display: inline-flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.385rem; /* 18px */
    height: 1.385rem; /* 18px */
    border: 2px solid currentColor;
    border-radius: 2px;
    background-color: rgba(0,0,0,0);
    pointer-events: none;
    will-change: background-color,border-color;
    transition: background-color 90ms cubic-bezier(0.4, 0, 0.6, 1),border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    border-color: var(--mdc-checkbox-unselected-icon-color, var(--mat-app-on-surface-variant));
    top: calc((var(--mdc-checkbox-state-layer-size, 3.077rem) - 1.385rem)/2); /* 40px */
    left: calc((var(--mdc-checkbox-state-layer-size, 3.077rem) - 1.385rem)/2);
}

.mat-mdc-focus-indicator {
    position: relative;
}

.mat-ripple {
    overflow: hidden;
    position: relative;
}

[dir=rtl] .mat-internal-form-field>label {
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
    padding-right: 4px;
    width: max-content;
}

.mat-mdc-checkbox label {
    cursor: pointer;
}

.mat-internal-form-field>label {
    margin-left: 0;
    margin-right: auto;
    padding-left: 4px;
    padding-right: 0;
    order: 0;
}

.edit-box .tools {
    display: flex;
    align-items: center;
}

[dir=rtl] .mat-mdc-form-field {
    text-align: right;
}

.mat-mdc-form-field {
    --mat-mdc-form-field-floating-label-scale: 0.75;
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper {
    cursor: pointer;
}

[dir=rtl] .mat-mdc-text-field-wrapper {
    padding-left: 1.231rem; /* 16px */
    padding-right: 1.231rem; /* 16px */
}

.mat-mdc-text-field-wrapper {
    width: 100%;
    z-index: 0;
    height: auto;
    flex: auto;
    will-change: auto;
}

.mdc-text-field--outlined {
    height: 4.308rem; /* 56px */
    overflow: visible;
    padding-right: 0.615rem; /* 8px */
    padding-left:  0.615rem; /* 8px */
}

.mdc-text-field {
    display: inline-flex;
    align-items: baseline;
    padding: 0 1.231rem; /* 16px */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    will-change: opacity,transform,color;
    border: 1px black solid;
    border-radius: 0.385rem; /* 5px */
}

.mat-mdc-form-field-flex {
    display: inline-flex;
    align-items: baseline;
    box-sizing: border-box;
    width: 100%;
    align-self: center;
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
    width: max(0.923rem,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))); /* 12px */
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece {
    border-color: var(--mdc-outlined-text-field-outline-color, var(--mat-app-outline));
    border-width: var(--mdc-outlined-text-field-outline-width);
}

[dir=rtl] .mdc-notched-outline__leading {
    border-left: none;
    border-right: 1px solid;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
    border-bottom-right-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
}

.mdc-notched-outline__leading {
    border-left: 1px solid;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
    border-bottom-left-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
}

.mat-mdc-notch-piece {
    box-sizing: border-box;
    height: 100%;
    pointer-events: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

[dir=rtl] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
    border-left: none;
    border-right: 1px solid rgba(0,0,0,0);
}

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
    border-left: 1px solid rgba(0,0,0,0);
}

.mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch {
    padding-top: 0;
}

.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch {
    max-width: calc(100% - 4.615rem); /* 60px */
}

[dir=rtl] .mat-mdc-form-field .mdc-notched-outline__notch {
    margin-left: 0;
    margin-right: -1px;
    -webkit-clip-path: inset(-9em 1px -9em -999em);
    clip-path: inset(-9em 1px -9em -999em);
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
    max-width: min(var(--mat-form-field-notch-max-width, 100%),100% - max(0.923rem,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)))*2); /* 12px */
}

.mat-mdc-form-field .mdc-notched-outline__notch {
    margin-left: -1px;
    -webkit-clip-path: inset(-9em -999em -9em 1px);
    clip-path: inset(-9em -999em -9em 1px);
}

.mdc-notched-outline__notch {
    flex: 0 0 auto;
    width: auto;
}

.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
    cursor: inherit;
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-floating-label {
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
    top: calc(var(--mat-form-field-container-height)/2);
}

.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    pointer-events: all;
    will-change: auto;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-outlined-text-field-label-text-color, var(--mat-app-on-surface-variant));
}

[dir=rtl] .mdc-text-field--outlined .mdc-floating-label {
    left: auto;
    right: 4px;
}

.mdc-notched-outline .mdc-floating-label {
    max-width: calc(100% + 1px);
    display: inline-block;
    position: relative;
}

.mdc-text-field--outlined .mdc-floating-label {
    font-family: var(--mdc-outlined-text-field-label-text-font, var(--mat-app-body-large-font));
    font-size: var(--mdc-outlined-text-field-label-text-size, var(--mat-app-body-large-size));
    font-weight: var(--mdc-outlined-text-field-label-text-weight, var(--mat-app-body-large-weight));
    letter-spacing: var(--mdc-outlined-text-field-label-text-tracking, var(--mat-app-body-large-tracking));
    left: 4px;
    right: auto;
}

.mdc-text-field .mdc-floating-label {
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

[dir=rtl] .mdc-floating-label {
    right: 0;
    left: auto;
    transform-origin: right top;
    text-align: right;
}

.mdc-floating-label {
    position: absolute;
    left: 0;
    transform-origin: left top;
    line-height: 1.15rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    overflow: hidden;
    will-change: transform;
}

[dir=rtl] .mdc-notched-outline__trailing {
    border-left: 1px solid;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
    border-bottom-left-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
}

.mdc-notched-outline__trailing {
    flex-grow: 1;
    border-left: none;
    border-right: 1px solid;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
    border-bottom-right-radius: var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));
}

.mdc-text-field--outlined .mat-mdc-form-field-infix, .mdc-text-field--no-label .mat-mdc-form-field-infix {
    padding-top: var(--mat-form-field-container-vertical-padding);
    padding-bottom: var(--mat-form-field-container-vertical-padding);
}

.mat-mdc-form-field-infix {
    flex: auto;
    min-width: 0;
    width: 13.846rem; /* 180px */
    position: relative;
    box-sizing: border-box;
    min-height: var(--mat-form-field-container-height);
    padding-top: var(--mat-form-field-filled-with-label-container-padding-top);
    padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom);
}

.mat-mdc-select {
    display: inline-block;
    width: 100%;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    border: 0;
    height: 2.308rem; /* 30px */
    background: #eaf3ff;
}

.mat-mdc-select-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.mat-mdc-select-value {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mat-form-field-hide-placeholder .mat-mdc-select-placeholder {
    color: rgba(0,0,0,0);
    -webkit-text-fill-color: rgba(0,0,0,0);
    transition: none;
    display: block;
}

.mat-mdc-select-placeholder {
    transition: color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--mat-select-placeholder-text-color, var(--mat-app-on-surface-variant));
}

.mat-mdc-select-min-line:empty::before {
    content: " ";
    white-space: pre;
    width: 1px;
    display: inline-block;
    visibility: hidden;
}

.mat-mdc-select-arrow-wrapper {
    height: 1.846rem; /* 24px */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.mat-mdc-select-arrow {
    width: 0.769rem; /* 10px */
    height: 0.385rem; /* 5px */
    position: relative;
    color: var(--mat-select-enabled-arrow-color, var(--mat-app-on-surface-variant));
}

.mat-mdc-select-arrow svg {
    fill: currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mat-mdc-form-field-subscript-wrapper, .mat-mdc-form-field-bottom-align::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--mat-form-field-subscript-text-font, var(--mat-app-body-small-font));
    line-height: var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height));
    font-size: var(--mat-form-field-subscript-text-size, var(--mat-app-body-small-size));
    letter-spacing: var(--mat-form-field-subscript-text-tracking, var(--mat-app-body-small-tracking));
    font-weight: var(--mat-form-field-subscript-text-weight, var(--mat-app-body-small-weight));
}

.mat-mdc-form-field-subscript-wrapper {
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.mat-mdc-form-field-bottom-align::before {
    content: "";
    display: inline-block;
    height: 1.231rem; /* 16px */
}

.mat-mdc-form-field-hint-wrapper {
    display: flex;
}

.mat-mdc-form-field-hint-wrapper, .mat-mdc-form-field-error-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 1.231rem; /* 16px */
}

.mat-mdc-form-field-hint-spacer {
    flex: 1 0 1em;
}

.w-150px {
    width: 11.538rem !important; /* 150px */
}

.mat-mdc-form-field-infix input {
    background: #eaf3ff;
    border: none;
    width: 100%;
}

.default-input{
    height: 4.308rem; /* 56px */
    width: -webkit-fill-available;
    border: 1px b9b8b8 solid;
    border-radius: 0.769rem; /* 10px */
    outline: none;
}

.mat-button-toggle-group {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateZ(0);
    border-radius: var(--mat-legacy-button-toggle-shape);
    overflow: hidden !important;
}

.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
    color: #000000de;
    background-color: #e0e0e0;
}

.mat-button-toggle-appearance-standard {
    color: #000000de;
    background-color: #ffffff;
    font-size: 0.923rem; /* 12px */
    line-height: 1.538rem; /* 20px */
    font-weight: 400;
    letter-spacing: normal;
}

.mat-button-toggle-checked {
    color: #0000008a;
    background-color: #e0e0e0;
}

.mat-button-toggle {
    white-space: nowrap;
    position: relative;
    color: #00000061;
    font-size: 0.923rem; /* 12px */
    line-height: 1.538rem; /* 20px */
    font-weight: 400;
    letter-spacing: normal;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #0000008a;
    flex: 1;
    padding: 0.8rem 0;
}

.mat-button-toggle-tooltip {
  position: absolute;
  bottom: 5rem;
  left: 1rem;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 0.462rem 0.769rem; /* 6px 10px */
  border-radius: 0.308rem; /* 4px */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.mat-button-toggle:hover .mat-button-toggle-tooltip-radio {
  opacity: 1;
}

.mat-button-toggle:hover .mat-button-toggle-tooltip-checkbox {
  opacity: 1; 
}

.mat-button-toggle-tooltip-add {
  position: absolute;
  bottom: 95%;
  left: 10%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 0.462rem 0.769rem; /* 6px 10px */
  border-radius: 0.308rem; /* 4px */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.mat-button-toggle-add:hover .mat-button-toggle-tooltip-add {
  opacity: 1; 
}

.mat-button-toggle-button {
    border: 0;
    background: none;
    color: inherit;
    padding: 0;
    margin: 0;
    font: inherit;
    outline: none;
    width: 100%;
    cursor: pointer;
}

.form-builder-new .tools .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 2.615rem; /* 34px */
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    padding: 0 0.769rem; /* 10px */
    line-height: var(--mat-standard-button-toggle-height);
}

.mat-button-toggle-label-content {
    -webkit-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 0 1.231rem; /* 16px */
    line-height: var(--mat-legacy-button-toggle-height);
    position: relative;
}

.mat-button-toggle-label-content>* {
    vertical-align: middle;
}

.edit-box .line-not:after {
    content: " ";
    border-bottom: 0.5px #fff solid;
    background: #a1a1a1;
    transform: rotate(40deg);
    position: absolute;
    width: 2.154rem; /* 28px */
    height: 3px;
    top: 0.615rem; /* 8px */
    left: 0.385rem; /* 5px */
}

i.fa {
    font-weight: 400!important;
    color: unset!important;
    font-size: 1.2rem!important;
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*=mat-elevation-z]), .mat-button-toggle-group-appearance-standard:not([class*=mat-elevation-z]) {
    box-shadow: none;
}

.mat-button-toggle-standalone:not([class*=mat-elevation-z]), .mat-button-toggle-group:not([class*=mat-elevation-z]) {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard {
    border-radius: 0.308rem; /* 4px */
    border: solid 1px #e0e0e0;
}

.edit-box .tools .tool {
    margin: 0.538rem; /* 7px */
    text-align: center;
    min-width: 7.692rem; /* 100px */
}

.buildChoice_choice_row{
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.buildChoice_input_wrapper {
    display: flex;
    outline: none;
    height: 2rem;
    padding: .25rem;
    border-radius: .25rem;
    border: .063rem solid #bbbdc0;
    background-color: #fff;
    color: #3e434d;
    box-sizing: border-box;
    width: -webkit-fill-available;
}
.buildChoice_input_wrapper .buildChoice_index_wrapper {
    cursor: move;
}
.buildChoice_input_wrapper .buildChoice_index_wrapper, .buildChoice_input_wrapper .buildChoice_special_index_wrapper {
    background-color: #f0f2f5;
    color: #6b7079;
    display: flex;
    align-items: center;
    padding: .25rem 0 .25rem .25rem;
    border-radius: .125rem;
    min-width: 2.25rem;
    box-sizing: border-box;
}

.buildChoice_input_wrapper .buildChoice_index_wrapper .buildChoice_index {
    margin-right: .5rem;
}
.buildChoice_input_wrapper .buildChoice_input {
    all: unset;
    border: none;
    padding: 0 .5rem;
    width: 100%;
}

.buildChoice_score_wrapper label {
    background-color: #b5fff8;
    padding: 0 0.385rem; /* 5px */
}

.buildChoice_score_wrapper {
    display: flex;
    outline: none;
    height: 2rem;
    padding: .25rem;
    border-radius: .25rem;
    border: .063rem solid #bbbdc0;
    background-color: #fff;
    color: #3e434d;
    box-sizing: border-box;
    margin-right: 0.5rem;
    text-align: left;
}

.buildChoice_score_wrapper .buildChoice_score_input {
    all: unset;
    border: none;
    width: 100%;
}

input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
    overflow-clip-margin: 0px !important;
    overflow: clip !important;
}
.buildChoice_actions_wrapper {
    display: flex;
    margin-right: .5rem;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c4d8f7;
    border-radius: .25rem;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions .buildChoice_action_right {
    height: 2rem;
    flex-grow: 1;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions .buildChoice_action_right:hover {
    background-color: #86a9e3;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions .buildChoice_action_middle {
    height: 2rem;
    flex-grow: 1;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions .buildChoice_action_middle:hover {
    background-color: #86a9e3;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions .buildChoice_action_left {
    height: 2rem;
    flex-grow: 1;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.buildChoice_actions_wrapper .buildChoice_choice_actions .buildChoice_action_left:hover {
    background-color: #86a9e3;
}

.sharedBuild_toggle_input_row {
    overflow: auto;
    max-height: 23.077rem; /* 300px */
}

.sharedBuild_toggle_input_row_wrapper {
    padding: 0.769rem 0; /* 10px */
    box-shadow: inset 0 -.0625rem 0 0 #f0f2f5;
    margin: 1.5rem 3rem;
    border: 1px solid;
    border-radius: 0.769rem; /* 10px */
    position: relative;
    min-width: 50%;
}

.wrap-input100 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  height: 3.846rem; /* 50px */
  position: relative;
  border: 1px solid #b9b8b8;
  border-radius: 0.769rem; /* 10px */
  margin: 1.154rem 0; /* 15px */
  background-color: white;
}

.label-input100 {
  font-size: 1rem; /* 13px */
  color: #999999;
  line-height: 1.2;
  display: block;
  position: absolute;
  pointer-events: none;
  width: 100%;
  padding-left: 1.846rem; /* 24px */
  right: 0.769rem; /* 10px */
  top: 1.154rem; /* 15px */
  transition: all 0.4s;
}

.input100 {
  display: block;
  width: 100%;
  line-height: 1.2;
  margin: 0 0.769rem; /* 10px */
  outline: none;
}

input.input100 {
  height: 100%;
  transition: all 0.4s;
  border: none;
}

.focus-input100 {
  position: absolute;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  pointer-events: none;
  border: 1px solid #6675df;
  border-radius: 0.769rem; /* 10px */
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s;
  transform: scaleX(1.1) scaleY(1.3);
}

.input100:focus + .focus-input100 {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.eff-focus-selection {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.input100:focus {
  height: 2.538rem; /* 33px */
}

.input100:focus + .focus-input100 + .label-input100 {
  top: 4px;
  font-size: 0.769rem; /* 10px */
}

.has-val {
  height: 2.538rem !important; /* 33px */
}

.has-val + .focus-input100 + .label-input100 {
  top: 4px;
  font-size: 0.769rem; /* 10px */
}

.over {
    outline: 2px dashed red;
}

.sortable-ghost {
  opacity: 1 !important;
}

.sortable-chosen {
  opacity: 0.5 !important;
}

.drag-handle {
    cursor: move; 
}

.no-drag {
    cursor: default;
}

.dragging {
    opacity: 0.5;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    pointer-events: none;
}

.choice-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.sharedBuild_toggle_input_row.zone {
    padding: 0.769rem; /* 10px */
    height: 87% !important;
    min-height: 3.846rem; /* 50px */
    padding-bottom: 1.538rem; /* 20px */
}

.detail-tools-side-wrapper {
    gap: 0.769rem; /* 10px */
    background: #f8f9fa;
    padding: 0.769rem; /* 10px */
    border-radius: 0.615rem; /* 8px */
}

.d-flex.flex-column {
    gap: 0.615rem; /* 8px */
    min-width: 9.231rem; /* 120px */
}

@media (max-width: 768px) {
    .d-flex.align-items-start {
        flex-direction: column;
    }
    .sharedBuild_toggle_input_row.zone {
        max-width: 100% !important;
    }
}

.detail-tools1-wrapper {
    gap: 0.769rem; /* 10px */
    padding: 0.769rem; /* 10px */
    min-width: 11.538rem; /* 150px */
    max-width: 20%;
}

.detail-tools1-wrapper > div, 
.detail-tools1-wrapper > button {
    width: 40%;
}

.random {
    justify-content: center;
}

.matrix-builder-wrapper {
    background-color: #ffffff;
    border: 1px solid #cccee1;
    border-top: 4px solid var(--secondary, #324260);
    border-radius: 0.769rem; /* 10px */
    box-shadow: 0 4px 1.154rem rgba(0,0,0,0.05); /* 15px */
}

.matrix-table thead th.matrix-bg-custom {
    background-color: #eaf3ff !important;
    color: var(--primary, #162139) !important;
    font-weight: 600;
    border-bottom: 2px solid #b5c7e1;
}

.matrix-input-seamless {
    border: 1px solid transparent !important;
    background: #f8f9fa !important;
    border-radius: 0.462rem !important; /* 6px */
    text-align: right !important;
    direction: rtl !important;
    color: #333 !important;
    transition: 0.3s;
    font-size: 1rem; /* 13px */
    width: 100%;
}

.input-opt-score {
    text-align: center !important;
    direction: ltr !important;
}

.input-opt-title {
    text-align: center !important;
}

.matrix-input-seamless:focus, .matrix-input-seamless:hover {
    background: #ffffff !important;
    border: 1px solid #798fb6 !important;
    box-shadow: 0 0 0 3px rgba(121, 143, 182, 0.15) !important;
}

.matrix-question-col {
    background-color: #fcfcfc !important;
    width: 25%;
    text-align: right !important;
}

.matrix-trash-btn {
    cursor: pointer;
    color: #dc3545;
    background: #ffe6e6;
    border: none;
    border-radius: 0.462rem; /* 6px */
    padding: 3px 0.615rem; /* 8px */
    transition: 0.3s;
    font-size: 1.077rem; /* 14px */
}
.matrix-trash-btn:hover {
    background: #dc3545;
    color: #ffffff;
}

.btn-matrix-action {
    font-weight: 500;
    font-size: 0.923rem; /* 12px */
    padding: 0.462rem 0.923rem; /* 6px 12px */
    border-radius: 0.462rem; /* 6px */
    transition: all 0.3s;
}

.btn-add-icon {
    background-color: transparent;
    color: #798fb6;
    border: 2px dashed #798fb6;
    border-radius: 0.615rem; /* 8px */
    width: 2.769rem; /* 36px */
    height: 2.769rem; /* 36px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-add-icon:hover {
    background-color: #798fb6;
    color: #fff;
    border-style: solid;
    transform: scale(1.1);
}

.btn-add-row-text {
    background-color: transparent;
    color: #798fb6;
    border: 2px dashed #798fb6;
    border-radius: 0.615rem; /* 8px */
    padding: 0.769rem 1.154rem; /* 10px 15px */
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    font-size: 1rem; /* 13px */
}
.btn-add-row-text:hover {
    background-color: #eaf3ff;
    color: #162139;
    border-color: #798fb6;
    border-style: solid;
}

.ui-panel { border-radius: 0.923rem !important; /* 12px */ }
.ui-panel-body::-webkit-scrollbar { width: 4px; }
.ui-panel-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.ui-section-btn { font-size: 1rem !important; /* 13px */ border-radius: 0 !important; }
.ui-section-btn:hover { background: #f8f9fa !important; }
.ui-chevron { transition: transform 0.3s; }
.ui-section-btn[aria-expanded="true"] .ui-chevron { transform: rotate(-180deg); }

.ui-label {
    font-size: 0.846rem; /* 11px */
    color: #6b7280;
    display: block;
    margin-bottom: 3px;
}
.ui-color-input {
    width: 2.769rem; /* 36px */
    height: 2.154rem; /* 28px */
    border: none;
    padding: 2px;
    cursor: pointer;
    border-radius: 4px;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ui-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}
.ui-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
.ui-clr-hex { font-size: 0.846rem; /* 11px */ font-family: monospace; }

.preview-device-desktop { max-width: 67.692rem; /* 880px */ }
.preview-device-tablet  { max-width: 36.923rem !important; /* 480px */ }
.preview-device-mobile  { max-width: 27.692rem !important; /* 360px */ }

#preview-card-body,
#page-canvas {
    --su-primary:       #2a15d9;
    --su-warning-clr:   #ff0000;
    --su-stitle-clr:    #162139;
    --su-stitle-size:   1.692rem; /* 22px */
    --su-stitle-weight: bold;
    --su-stitle-style:  normal;
    --su-stitle-align:  right;
    --su-stitle-font:   'IranSanse';
    --su-qtitle-clr:    #162139;
    --su-qtitle-size:   1.077rem; /* 14px */
    --su-qtitle-weight: bold;
    --su-qtitle-style:  normal;
    --su-qtitle-font:   'IranSanse';
    --su-atitle-clr:    #526486;
    --su-atitle-size:   0.923rem; /* 12px */
    --su-atitle-weight: normal;
    --su-atitle-style:  normal;
    --su-atitle-font:   'IranSanse';
    --su-mat-bg:        #00122b;
    --su-mat-text:      #FFFFFF;
}

#fixed-bottom-bar {
    --su-next-clr:      #162139;
    --su-next-bg:       #e8eaf0;
    --su-prev-clr:      #162139;
    --su-prev-bg:       #e8eaf0;
}

.position-grid-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 4.615rem; /* 60px */
    height: 4.615rem; /* 60px */
    background: #f0f2f5;
    padding: 4px;
    border: 1px solid #d1d5db;
    border-radius: 0.462rem; /* 6px */
}
.position-grid-selector .pg-dot {
    background-color: #9ca3af;
    border-radius: 2px;
    cursor: pointer;
    transition: 0.2s;
}
.position-grid-selector .pg-dot:hover {
    background-color: #6b7280;
}
.position-grid-selector .pg-dot.active {
    background-color: #2a15d9;
    transform: scale(1.15);
}

.text-toolbar .format-btn {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid transparent;
    padding: 3px 0.615rem; /* 8px */
}
.text-toolbar .format-btn:hover {
    background: #e5e7eb;
}
.text-toolbar .format-btn.active {
    background: #e0e7ff;
    color: #2a15d9;
    border-color: #2a15d9;
}

.su-radio-mock {
    accent-color: var(--su-primary, #2a15d9);
}
.su-survey-title {
    color: var(--su-stitle-clr, #000000);
    font-size: var(--su-stitle-size, 1.692rem); /* 22px */
    font-family: var(--su-stitle-font, 'IranSanse');
    font-weight: var(--su-stitle-weight, bold);
    font-style: var(--su-stitle-style, normal);
    text-align: var(--su-stitle-align, right);
}
.su-q-title {
    color: var(--su-qtitle-clr, #000000);
    font-size: var(--su-qtitle-size, 1.077rem); /* 14px */
    font-family: var(--su-qtitle-font, 'IranSanse');
    font-weight: var(--su-qtitle-weight, bold);
    font-style: var(--su-qtitle-style, normal);
    padding-bottom: 1rem !important;
}
.su-a-title {
    color: var(--su-atitle-clr, #526486);
    font-size: var(--su-atitle-size, 0.923rem); /* 12px */
    font-family: var(--su-atitle-font, 'IranSanse');
    font-weight: var(--su-atitle-weight, normal);
    font-style: var(--su-atitle-style, normal);
}
.su-warning {
    color: var(--su-warning-clr, #ff0000);
}
.su-mat-header {
    background-color: var(--su-mat-bg, #eaf3ff) !important;
    color: var(--su-mat-text, #162139) !important;
    align-content: center;
}

.publish-label {
    font-size: 0.923rem; /* 12px */
    font-weight: 600;
    color: #6b7280;
    display: block;
    margin-bottom: 0.462rem; /* 6px */
    text-transform: none;
    letter-spacing: 0;
}

.publish-field-wrapper {
    display: flex;
    flex-direction: column;
}

.publish-toggle-row {
    padding-right: 4px;
}

.publish-toggle-row .toggle {
    flex-shrink: 0;
}

.publish-date-input,
.publish-time-input {
    font-family: 'IranSanse', sans-serif;
    letter-spacing: 1px;
}

.silent-tab {
    text-decoration: none !important;
    color: inherit !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0;
}

.silent-tab:hover,
.silent-tab:focus,
.silent-tab:active,
.silent-tab:visited,
.silent-tab.active {
    text-decoration: none !important;
    color: inherit !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

@keyframes pulse-warning {
    0% {
        outline: 2px solid rgba(255, 7, 7, 0.8);
        outline-offset: 0;
    }
    100% {
        outline: 2px solid rgba(255, 7, 7, 0.205);
        outline-offset: 8px;
    }
}

@keyframes blink-text {
    0%, 100% {
        color: #eeff00;
    }
    50% {
        color: rgba(255, 231, 153, 0.25);
    }
}

.btn-unsaved-changes {
    animation: pulse-warning 1.5s infinite;
    background-color: #00771e !important;
    border-color: #198754 !important;
    font-weight: bold;
}

body {
    background-color: #f4f6f9;
    transition: all 0.3s ease;
}

.page-canvas {
    /* min-height: 100vh; */
    /* height: 80vh; */
    display: flex;
    flex-direction: column; 
    /* padding: 2rem 1rem; */
}

.survey-wrapper {
    max-width: 100rem; /* 1300px */
    width: 100%;
    margin: auto;
    height: auto;
    background: #ffffff;
    border-radius: 1.231rem; /* 16px */
    box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.01),
            0 0.769rem 1.923rem -5px rgba(22, 33, 57, 0.04), /* 10px 25px */
            0 1.923rem 3.846rem -12px rgba(22, 33, 57, 0.08), /* 25px 50px */
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(22, 33, 57, 0.05);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
            box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.survey-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 1.538rem 2.692rem -5px rgba(22, 33, 57, 0.06), /* 20px 35px */
        0 3.077rem 5.769rem -12px rgba(22, 33, 57, 0.14), /* 40px 75px */
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.survey-header {
    /* padding: 2.5rem 2rem; */
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background-size: cover;
    background-position: center center;
    position: relative;
}

.survey-body {
    padding: 13px;
    max-height: 65vh;
    min-height: 65vh;
    overflow-y: auto;
    background-color: var(--su-card-clr);
}

.custom-input {
    border-radius: 0.615rem; /* 8px */
    padding: 0.923rem 1.231rem; /* 12px 16px */
    border: 1.5px solid #e0e0e0;
    transition: all 0.2s;
    font-size: 1rem;
}
.custom-input:focus {
    border-color: var(--su-primary-clr, #2a15d9);
    box-shadow: 0 0 0 4px rgba(42, 21, 217, 0.1);
    outline: none;
}

.matrix-table th {
    font-weight: 600;
    color: #555;
}
.matrix-table td {
    padding: 1rem 0.5rem;
}

.fixed-bottom-bar {
    position: fixed;
    /* bottom: 0; */
    /* left: 0; */
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -4px 1.538rem rgba(0,0,0,0.06); /* 20px */
    padding: 1.154rem 0 1.538rem 0; /* 15px 0 20px 0 */
    /* z-index: 999999; */
}

#sv-btn-prev {
    background:var(--su-prev-bg,#e8eaf0);
    color:var(--su-prev-clr,#162139);
    border-radius: 0.615rem; /* 8px */
    padding: 0.769rem 1.538rem; /* 10px 20px */
    font-weight:600;
    white-space: nowrap;
}

#sv-btn-next {
    background:var(--su-next-bg,#e8eaf0);
    color:var(--su-next-clr,#162139);
    border-radius: 0.615rem; /* 8px */
    padding: 0.769rem 1.538rem; /* 10px 20px */
    font-weight:600;
    white-space: nowrap;    
}

@media (max-width: 768px) {
    .page-canvas { padding: 0; }
    /* .survey-wrapper {min-height: 88vh; } */
    .survey-body { padding: 1.5rem 1rem; max-height: 68vh;}
}

/* @media (max-width: 768px) {
    body:has(input[type="text"]:focus, textarea:focus, input[type="number"]:focus) {
        display: none !important;
    }
} */

.page-break-badge {
    font-size: 1.692rem; /* 22px */
    position: absolute;
    /* right: 6.538rem;  */
    width: 90%;
    margin-top: 0.769rem;
    margin-right: -1.7rem;
}

body.landing-page {
    font-family: 'Vazir', Tahoma, sans-serif;
    background-color: #f8f9fa;
}
html {
    scroll-behavior: smooth;
}
/* Custom Gradients & Effects */
.bg-gradient-primary {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
}
.text-gradient {
    background: linear-gradient(to right, #4F46E5, #7C3AED);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
.pricing-card-hover:hover {
    transform: scale(1.05);
    z-index: 10;
}
.accordion-button:not(.collapsed) {
    background-color: #e0e7ff;
    color: #4F46E5;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
.responsive-navbar {
    width: 100%;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* برای صفحات بزرگتر از 992 پیکسل (دسکتاپ) */
@media (min-width: 992px) { 
    .responsive-navbar {
        width: 90% !important;
        border-radius: 1rem; /* گرد کردن گوشه‌های منو در حالت دسکتاپ */
        border: 1px solid rgba(0,0,0,0.05) !important; /* یک حاشیه خیلی محو */
    }
}


/* css های مربوط به فایل take_survey */

.preview-sticky-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff3cd; /* رنگ زرد ملایم هشدار */
    color: #664d03; /* رنگ متن تیره متناسب */
    border-bottom: 2px solid #ffe69c;
    text-align: center;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 700;
    z-index: 2500; /* بالاتر از تمام المان‌ها، حتی نوار پایین صفحه */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 🌟 هل دادن کل محتوای صفحه به پایین 🌟 */
/* این کار باعث می‌شود هدر پرسشنامه زیر نوار هشدار مخفی نشود */
body.take-survey {
    /* padding-top: 45px !important; */
    height: 88vh;
    align-content: center;
}

/* اصلاح موقعیت اسکرول خودکار به بالا تا نوار هشدار فضا را خراب نکند */
.page-canvas {
    min-height: calc(100vh - 165px) !important;
}
/* 🌟 استایل‌های مدرن و پیش‌فرض برای جذابیت بیشتر پرسشنامه 🌟 */

/* 1. کادرهای انتخاب (رادیو و چک‌باکس) */
.choice-card {
display: flex;
    align-items: center;
    padding: 14px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-bottom: 10px;
}

/* 2. جلوگیری از کش آمدن زشت در حالت عمودی */
.d-flex.flex-column .choice-card {
    max-width: 600px; /* محدود کردن عرض تا نهایتا 600 پیکسل */
}

/* 3. افکت هاور (رفتن موس روی گزینه) */
.choice-card:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    transform: translateY(-2px); /* کمی بالا آمدن المان */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}

/* 4. افکت انتخاب شدن (تیک خوردن) همراه با انیمیشن */
/* از سلکتور مدرن has استفاده می‌کنیم تا استایل والد تغییر کند */
.choice-card:has(input:checked) {
    border-color: var(--su-primary-clr, #4f46e5); /* استفاده از رنگ اصلی کاربر */
    background-color: rgba(79, 70, 229, 0.04); /* هاله ملایم */
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
    animation: popSelect 0.4s ease forwards;
}

/* 5. بزرگ‌تر و واضح‌تر کردن خود دکمه رادیو/چک‌باکس */
.choice-card input[type="radio"], 
.choice-card input[type="checkbox"] {
    transform: scale(1.4);
    margin-left: 15px !important;
    cursor: pointer;
    accent-color: var(--su-primary-clr, #4f46e5); /* تغییر رنگ پیش‌فرض مرورگر به رنگ تم شما */
}

/* 6. انیمیشن کلیک (Pop) */
@keyframes popSelect {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* 7. استایل ورودی‌های متنی و عددی برای خروج از حالت مرده */
.custom-input {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.custom-input:focus {
    background-color: #ffffff;
    border-color: var(--su-primary-clr, #4f46e5);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
    outline: none;
}

/* 8. بهتر کردن ظاهر جدول ماتریسی */
.matrix-table {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.matrix-table td {
    vertical-align: middle;
}
.matrix-table input[type="radio"] {
    transform: scale(1.4);
    accent-color: var(--su-primary-clr, #4f46e5);
    cursor: pointer;
}

/* ── حل قطعی ریسپانسیو و اسکرول ماتریس ── */

/* 1. مجبور کردن کانتینر به اسکرول افقی */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    /* یک سایه ملایم سمت چپ می‌اندازد تا کاربر متوجه شود ادامه دارد */
    box-shadow: inset -15px 0 15px -15px rgba(0,0,0,0.15) !important;
}

/* 2. کلید اصلی حل مشکل: جدا کردن حاشیه‌ها برای فعال شدن Sticky */
.matrix-table {
    border-collapse: separate !important; /* خنثی کردن باگ بوت‌استرپ */
    border-spacing: 0 !important;
    width: 100% !important;
    min-width: 600px; /* حداقل عرض برای وادار کردن جدول به اسکرول */
}

/* 3. جلوگیری از شکستن خطوط هدرها تا ستون‌ها عرض استاندارد داشته باشند */
.matrix-table th.su-mat-header {
    background-color: var(--su-mat-bg, #eaf3ff) !important;
    color: var(--su-mat-text, #162139) !important;
    white-space: nowrap !important; /* متن‌ها حتماً تو یک خط باشن */
    min-width: 120px !important; /* عرض کافی برای نوشته‌های طولانی */
    padding: 15px 10px !important;
    vertical-align: middle !important;
}

/* 4. ثابت نگه داشتن ستون اول (متن سوالات) در سمت راست */
.matrix-table tbody td:first-child,
.matrix-table thead th:first-child {
    position: -webkit-sticky !important; /* پشتیبانی از آیفون و سافاری */
    position: sticky !important;
    right: 0 !important; /* چسبیدن به راست به دلیل RTL بودن سایت */
    /* z-index: 2 !important; */
    background-color: #ffffff !important; /* پس‌زمینه حتماً باید سفید/رنگی باشد تا گزینه‌ها از زیر آن رد شوند */
    border-left: 2px solid #e2e8f0 !important; /* یک خط ظریف برای مرز ستون ثابت */
}

/* 5. سلول گوشه بالا-راست (تلاقی هدر و ستون ثابت) باید بالاترین لایه باشد */
.matrix-table thead th:first-child {
    background-color: var(--su-mat-bg, #eaf3ff) !important;
    z-index: 4 !important; 
}

/* 6. هماهنگ کردن رنگ ستون ثابت در زمان Hover شدن ردیف */
.matrix-table tbody tr:hover td:first-child {
    background-color: #f8fafc !important;
}

/****************************************************************/
/*                                                              */
/*                    تنظیمات سصفحه signup                     */
/*                                                              */
/****************************************************************/

body.signup {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px 0;
    position: relative;
    overflow-x: hidden;
    z-index: 1;
}

/* هاله‌های رنگی پس‌زمینه برای روح دادن به صفحه */
body::before {
    content: "";
    position: fixed;
    top: -15%; right: -10%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(78, 54, 245, 0.15) 0%, rgba(78, 54, 245, 0) 70%);
    border-radius: 50%; z-index: -1;
}
body::after {
    content: "";
    position: fixed;
    bottom: -15%; left: -10%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.1) 0%, rgba(233, 30, 99, 0) 70%);
    border-radius: 50%; z-index: -1;
}

.signup-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.card-signup {
    border: none;
    border-radius: 20px; /* گوشه‌های گردتر و مدرن‌تر */
    box-shadow: 0 20px 40px rgba(42, 21, 217, 0.08), 0 5px 15px rgba(0,0,0,0.03);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.signup-header {
    background: linear-gradient(135deg, #2a15d9 0%, #664eff 100%);
    color: #ffffff;
    padding: 2rem; 
    text-align: center;
    position: relative;
}

/* یک پترن محو روی هدر برای جذابیت بیشتر */
.signup-header::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.4;
}

.signup-header h2, .signup-header p {
    position: relative;
    z-index: 2;
}

.signup-body {
    padding: 2.5rem 3rem;
}

.form-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #2b3543;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* استایل جذاب برای آیکون‌های فرم */
.form-section-title i {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 0.4rem;
    display: block;
}

/* زیباسازی فیلدهای ورودی */
.form-control, .form-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #374151;
    background-color: #f9fafb;
    transition: all 0.3s ease;
}


/* افکت هنگام کلیک روی فیلدها */
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
    outline: none;
}

/* دکمه ثبت‌نام */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border: none;
    border-radius: 0.75rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(79,70,229,0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(79,70,229,0.35);
}

.animate-fade {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.avatar-smart {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.15rem;
    color: #ffffff;
    user-select: none;
    border: 2px solid rgba(255,255,255,0.2);
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.15);
}

/* Modern table styles */
.table {
    --bs-table-border-color: var(--border-color);
    margin-bottom: 0;
}

.table thead th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 0.75rem 0.5rem;
    background: transparent;
}

.table tbody td {
    padding: 0.7rem 0.5rem;
    vertical-align: middle;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table tbody tr {
    transition: all 0.15s ease;
}

.table tbody tr:hover {
    background: rgba(79,70,229,0.03);
}

.table-hover tbody tr:hover {
    background: rgba(79,70,229,0.04);
}

/* Modal modern styles */
.modal-content {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.modal-header .btn-close {
    font-size: 0.8rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Badge modern */
/* .badge {
    font-weight: 500;
    padding: 0.3em 0.7em;
    border-radius: 0.5rem;
} */

/* Link styling */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--primary);
    transition: color 0.15s ease;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--accent);
}

/* ─── Dark Mode ─────────────────────────── */
[data-bs-theme="dark"] {
    --primary: #818CF8;
    --primary-dark: #6366F1;
    --secondary: #A5B4FC;
    --accent: #A78BFA;
    --surface: #1E293B;
    --sidebar-bg: #0F172A;
    --sidebar-text: #94A3B8;
    --sidebar-hover: #1E293B;
    --sidebar-active: #818CF8;
    --navbar-bg: rgba(15,23,42,0.9);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --card-hover-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
    --body-bg: #0F172A;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --border-color: #334155;
    color-scheme: dark;
}

[data-bs-theme="dark"] body {
    background-color: var(--body-bg);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .main-container {
    background-color: var(--body-bg);
}

[data-bs-theme="dark"] .sidebar.right {
    background: #1E293B;
    border-left-color: var(--border-color);
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .sidebar.left {
    background: #1E293B;
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .sidebar.left .navbar .navbar-nav .nav-link {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .sidebar.left .navbar .navbar-nav .nav-link:hover {
    background: rgba(129,140,248,0.1);
    color: var(--primary);
}

[data-bs-theme="dark"] .sidebar.left .navbar .navbar-nav .nav-link i {
    color: var(--primary);
}

[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .content-card,
[data-bs-theme="dark"] .card-list {
    background: #1E293B;
    border-color: var(--border-color);
}

[data-bs-theme="dark"] html:not([data-bs-theme=dark]) .card-list { background: #1E293B; }
[data-bs-theme="dark"] html:not([data-bs-theme=dark]) .card-list .title { background: #1E293B; }

[data-bs-theme="dark"] .card-list .title {
    background: #1E293B;
    border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .dashboard-body {
    background: transparent;
}

[data-bs-theme="dark"] .content .navbar .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .content .navbar .navbar-nav .nav-link.active {
    background: rgba(129,140,248,0.1);
}

[data-bs-theme="dark"] .content .navbar .dropdown-menu {
    background: #1E293B;
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .content .navbar .dropdown-menu .dropdown-item {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .content .navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(129,140,248,0.1);
    color: var(--primary);
}

[data-bs-theme="dark"] .modal-content {
    background: #1E293B;
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .table {
    --bs-table-border-color: var(--border-color);
    --bs-table-color: var(--text-primary);
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background: rgba(129,140,248,0.04);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background: rgba(129,140,248,0.06);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0F172A;
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1E293B;
    border-color: var(--primary);
}

[data-bs-theme="dark"] .bg-white {
    background-color: #1E293B !important;
}

[data-bs-theme="dark"] .popup-alarm-container {
    background: #1E293B;
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .popup-alarm-container .all-alarms .content-item-container {
    background: #1E293B;
}

[data-bs-theme="dark"] .popup-alarm-container .all-alarms .content-item-container .content-item-body {
    border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .popup-alarm-container .all-alarms .content-item-container .content-item-body:hover {
    background: rgba(255,255,255,0.03);
}

[data-bs-theme="dark"] .copyright {
    background: #0F172A !important;
}

[data-bs-theme="dark"] .tab-progress {
    background: #1E293B;
}

[data-bs-theme="dark"] .tab-progress .tab-item.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-bs-theme="dark"] .tab-progress .tab-item.highlight {
    background: rgba(129,140,248,0.12);
    color: var(--primary);
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

/* Sidebar backdrop overlay (mobile) */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0,0,0,0.4);
}
@media (max-width: 991px) {
    .sidebar.right:hover {
        width: 0 !important;
    }
    .sidebar.right.open {
        width: 75vw !important;
        max-width: 15.385rem !important;
    }
    .sidebar.right.open ~ .sidebar-backdrop,
    .sidebar-backdrop.show {
        display: block;
    }
}

/* ۱. وادار کردن نوار داخلی و دکمه‌ها به پر کردن کل عرض سایدبار در زمان باز شدن */
.sidebar.left:hover .navbar,
.sidebar.left:hover .navbar-nav,
.sidebar.left:hover .nav-link {
    width: 100% !important;
}

/* ۲. تراز کردن متن و آیکون‌ها از سمت راست تا دکمه‌های تمام‌عرض، ظاهر منظمی داشته باشند */
.sidebar.left:hover .navbar .navbar-nav .nav-link {
    justify-content: flex-start !important;
    padding-right: 1rem !important; /* یک فاصله ثابت از لبه راست برای نظم آیکون‌ها */
    padding-left: 1rem !important; /* یک فاصله ثابت از لبه راست برای نظم آیکون‌ها */
}

/* Workspace selector: aligned with the top navigation buttons */
.workspace-select {
    display: flex;
    align-items: center;
    width: 12.692rem;
    height: 2.8rem;
    padding: 0 0.85rem;
    color: #475569;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.workspace-select:hover,
.workspace-select:focus-within {
    border-color: var(--primary, #4f46e5);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.16);
    transform: translateY(-1px);
}

.workspace-select > i:first-child {
    margin-left: 0.55rem;
    color: var(--primary, #4f46e5);
    font-size: 0.9rem;
}

.workspace-select select {
    flex: 1;
    min-width: 0;
    padding: 0;
    color: var(--text-primary, #162139);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
}

.workspace-select select:invalid {
    color: #64748b;
    font-weight: 500;
}

.workspace-select-arrow {
    margin-right: 0.4rem;
    color: #94a3b8;
    font-size: 0.65rem;
    pointer-events: none;
}

[data-bs-theme="dark"] .workspace-select {
    background: #1e293b;
    border-color: #334155;
}

.workspace-dropdown .workspace-select {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 20rem;
    height: 2.8rem;
    padding: 0 0.9rem;
    color: var(--text-primary, #162139);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
}

.workspace-dropdown .workspace-select::after {
    margin-right: auto;
    color: #94a3b8;
}

.workspace-dropdown .workspace-select > i {
    color: var(--primary, #4f46e5);
}

.workspace-dropdown-menu {
    width: 20rem;
    padding: 0.45rem;
    margin-top: 0.45rem !important;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}

.workspace-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--text-primary, #162139);
    font-size: 0.82rem;
    font-weight: 600;
}

.workspace-dropdown-menu .dropdown-item:hover {
    color: var(--primary, #4f46e5);
    background: rgba(79, 70, 229, 0.08);
}

.workspace-dropdown-menu .dropdown-item i {
    color: var(--primary, #4f46e5);
}

[data-bs-theme="dark"] .workspace-dropdown-menu {
    background: #1e293b;
    border-color: #334155;
}


/* باکس ردوبدل یادداشت */
    .notes-widget {
        position: fixed;
        bottom: 20px;
        left: 20px; /* یا right: 20px بر اساس چیدمان */
        width: 340px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: hidden;
        direction: rtl;
        font-family: inherit;
    }

    /* حالت مینیمایز شده */
    .notes-widget.collapsed {
        height: 48px !important;
    }

    .notes-widget.collapsed .notes-body {
        display: none;
    }

    .notes-header {
        height: 48px;
        padding: 0 14px;
        background: #1e293b;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
    }

    .status-dot {
        width: 8px;
        height: 8px;
        background-color: #10b981;
        border-radius: 50%;
        display: inline-block;
    }

    .btn-toggle-widget {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer;
        padding: 0;
    }

    .notes-body {
        display: flex;
        flex-direction: column;
        height: 380px;
        background: #f8fafc;
    }

    .notes-list-container {
        flex: 1;
        padding: 12px;
        overflow-y: auto;
    }

    .note-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .note-author {
        font-size: 0.82rem;
        font-weight: bold;
        color: #334155;
    }

    .note-date {
        font-size: 0.7rem;
        color: #94a3b8;
    }

    .note-text {
        font-size: 0.88rem;
        color: #475569;
        margin-top: 4px;
        margin-bottom: 8px;
        white-space: pre-wrap;
    }

    .notes-footer {
        padding: 10px;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
    }

    #note-input {
        resize: none;
        border-radius: 6px;
        font-size: 0.85rem;
    }

.accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

/********************************************************/
/*           مربوط به صفحه پرسشنامه های من            */
/********************************************************/
    .custom-card-hover {
        transition: all 0.3s ease;
        border: 1px solid #f1f5f9;
    }
    .custom-card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
        border-color: #e2e8f0;
    }
    .icon-btn-action {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #64748b;
        background: #f8fafc;
        transition: all 0.2s;
    }
    .icon-btn-action:hover {
        background: #e2e8f0;
        color: #0f172a;
    }
    .progress-slim {
        height: 6px;
        border-radius: 10px;
        background-color: #e2e8f0;
    }


/* استایل زیرمنو برای دراپ‌داون‌های RTL */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    right: 100%; /* باز شدن به سمت چپ در محیط راست‌چین */
    left: auto;
    margin-top: -6px;
    display: none;
    min-width: 12rem;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a::after {
    display: inline-block;
    margin-right: auto;
    margin-left: 0.5em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-left: 0;
    float: left;
    margin-top: 6px;
}

/* استایل اختصاصی منوی بازشونده برای ایجاد تفکیک بصری و عمق */
.survey-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* مرز مشخص با کارت */
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important; /* سایه شناور مدرن */
    border-radius: 12px !important;
    padding: 0.5rem 0 !important;
}

/* راست‌چین کردن منو و گزینه‌ها */
.dropdown-item-custom {
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    color: #334155;
    text-align: right !important;
    transition: all 0.15s ease-in-out;
}

/* تغییر رنگ هوور برای تشخیص بهتر گزینه انتخابی */
.dropdown-item-custom:hover {
    background-color: #f1f5f9 !important; /* پس‌زمینه طوسی ملایم */
    color: #0f172a !important;
}

/* آیکون‌های داخل منو */
.dropdown-item-custom i {
    width: 20px;
    text-align: center;
}


/********************************************************/
/*             مربوط به سایدبار  سمت راست             */
/********************************************************/

.custom-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #94a3b8;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
    scrollbar-width: none;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-sidebar::-webkit-scrollbar {
    display: none;
}

/* تنظیمات دسکتاپ (از سایز md به بالا) */
@media (min-width: 768px) {
    .custom-sidebar {
        width: 70px; /* عرض در حالت جمع‌شده */
    }

    /* حالت هوور: باز شدن کامل سایدبار */
    .custom-sidebar:hover {
        width: 260px; /* عرض در حالت باز */
        box-shadow: -8px 0 25px rgba(0, 0, 0, 0.3);
    }

    /* مخفی کردن متن‌ها و عناوین در حالت بسته و نمایش نرم هنگام هوور */
    .custom-sidebar .sidebar-text,
    .custom-sidebar .sidebar-heading,
    .custom-sidebar .sidebar-brand-text,
    .custom-sidebar .sidebar-footer-info {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .custom-sidebar:hover .sidebar-text,
    .custom-sidebar:hover .sidebar-heading,
    .custom-sidebar:hover .sidebar-brand-text,
    .custom-sidebar:hover .sidebar-footer-info {
        opacity: 1;
        visibility: visible;
    }
}

/* برند و لوگو */
.sidebar-brand {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.4rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 1.35rem;
    text-decoration: none;
}
.sidebar-brand i {
    font-size: 1.8rem;
    min-width: 36px;
    text-align: center;
    margin-left: 0.5rem;
    transition: font-size 0.25s ease, color 0.2s ease;

}

/* آیتم‌های منو */
.sidebar-nav-item {
    margin-bottom: 0.35rem;
    padding: 0 0.6rem;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: 0.8rem 0.75rem;
    color: #94a3b8 !important;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 10px;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-nav-link i {
    min-width: 36px; /* کمی بازتر شدن کادر آیکون */
    font-size: 1.55rem; /* افزایش سایز آیکون در حالت بسته */
    text-align: center;
    margin-left: 0.5rem;
    transition: font-size 0.25s ease, color 0.2s ease;
}

/* تعدیلِ ظریف سایز آیکون هنگام باز شدن منو برای هماهنگی با متن */
@media (min-width: 768px) {
    .custom-sidebar:hover .sidebar-nav-link i {
        font-size: 1.2rem; /* هماهنگ شدن با فونت متن در حالت باز */
    }
}

.sidebar-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav-link.active {
    color: #ffffff;
    background: #3b82f6; 
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    font-weight: 600;
}

/* عناوین دسته‌بندی */
.sidebar-heading {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    padding: 1rem 1.25rem 0.4rem 1.25rem;
    margin-bottom: 0;
}

.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0.8rem 0;
}

.nav-link-danger {
    color: #f87171 !important;
}
.nav-link-danger:hover {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #fca5a5 !important;
}

/* تنظیم فاصله محتوای اصلی در دسکتاپ تا زیر منو نرود */
@media (min-width: 768px) {
    body {
        padding-right: 70px; /* هم‌اندازه با عرض منوی جمع‌شده */
    }
}

select {
    background-position: left !important;
}

.pv-fixed-bottom-bar {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -4px 1.538rem rgba(0,0,0,0.06); /* 20px */
    padding: 1rem 0 1rem 0;
    border-radius: 15px;
}

.pv-btn {
    background:#162139;
    color:#fff;
    border:none;
    border-radius:0.5rem;
    padding:0.5rem 1.5rem;
    cursor:pointer;
    transition:0.2s;
}

/* ─── استایل ردیف برندینگ در فوتر (fixed-bottom-bar) ─── */
.fixed-bottom-bar {
    padding: 0.85rem 0 0 0 !important; /* فشرده‌تر کردن پدینگ بالا و پایین برای جا دادن ردیف برندینگ */
}

.porsian-footer-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    /* margin-top: 0.35rem; */
    padding-top: 0.35rem;
    /* font-size: 0.76rem; */
    transition: all 0.2s ease;
    justify-content: center !important;
}

.porsian-footer-brand {
    color: #64748b;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.porsian-footer-brand:hover {
    background-color: #f1f5f9;
    color: var(--su-primary-clr, #2a15d9);
}

.p-sub-text {
    opacity: 0.8;
}

.p-main-text {
    color: var(--su-primary-clr, #2a15d9);
}

/* ─── بهینه‌سازی اختصاصی فوتر برای موبایل (کمترین اشغال ارتفاع) ─── */
@media (max-width: 576px) {
    .fixed-bottom-bar {
        padding: 0.65rem 0 0.45rem 0 !important;
    }
    
    /* عرض دکمه‌ها در موبایل کمی جمع‌وجورتر شود تا به هم نچسبند */
    .nav-btn-wrapper {
        width: 9rem !important;
    }

    /* در موبایل، نشان پرسیان وسط‌چین و مینیمال شود */
    .porsian-footer-row {
        /* margin-top: 0.25rem; */
        padding-top: 0.25rem;
        /* font-size: 0.7rem; */
    }

    .porsian-footer-brand {
        padding: 1px 6px;
    }
}

/* =========================================
   جدول ماتریس در نمای پاسخ‌دهنده
   ========================================= */
.matrix-table {
    width: 100% !important;
    table-layout: fixed !important; /* این دستور کلیدی برای جلوگیری از بیرون زدن جدول است */
    border-collapse: collapse;
}

.matrix-table th,
.matrix-table td {
    padding: 1rem 0.5rem;
    white-space: normal !important; /* اجازه شکستن خطوط متن */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    vertical-align: middle;
}

/* اختصاص عرض بیشتر به ستون اول (متن سوالات) تا گزینه‌ها فشرده نشوند */
.matrix-table th:first-child,
.matrix-table td:first-child {
    width: 35%; 
    text-align: right;
}

.matrix-table th {
    font-weight: 600;
    color: #555;
    text-align: center;
}

/* 🟢 ۲. رنگ پس‌زمینه خود جدول (Table) */
.datepicker-plot-area table {
    background-color: #e8e6ff !important; /* رنگ دلخواه شما برای داخل جدول */
    border-radius: 6px !important;
}

/* 🟢 ۳. شیشه‌ای کردن تمام لایه‌های مزاحمِ روی جدول (مهم‌ترین بخش) */
.datepicker-plot-area table tbody,
.datepicker-plot-area table tr,
.datepicker-plot-area table td,
.datepicker-plot-area .table-days td span,
.datepicker-plot-area .month-grid-box span,
.datepicker-plot-area .year-grid-box span {
    background-color: transparent !important; 
    border: none !important;
}

/* ۴. رنگ متن هدر جدول (روزهای هفته) */
.datepicker-plot-area .table-days th {
    background-color: transparent !important;
    color: #495057 !important;
}

/* ۵. رنگ متن روزهای عادی در جدول */
.datepicker-plot-area .table-days td span {
    color: #212529 !important;
}

/* ۶. رنگ موقع هاور شدن روی روزها */
.datepicker-plot-area .table-days td span:hover {
    background-color: #0d6efd !important; /* آبی بوت‌استرپ */
    color: #ffffff !important;
}

/* ۷. حفظ رنگ روز انتخاب شده (Selected) */
.datepicker-plot-area .table-days td.selected span {
    background-color: #198754 !important; /* سبز */
    color: #ffffff !important;
}

.datepicker-plot-area .datepicker-time-view {
    background-color: #e8e6ff;
    display: flex !important;
    justify-content: center !important; /* وسط‌چین کردن افقی */
    align-items: center !important;     /* وسط‌چین کردن عمودی */
    width: 100% !important;
}

/* عرض فیلدهای تاریخ و ساعت */
.datetime-group { width: 155px; }
.datetime-group.time-group { width: 145px; }

/* datepicker در راستای RTL */
.datepicker-plot-area {
    font-family: 'IranSanse',sans-serif !important; 
    font-size: 12px !important; 
    border-radius: 10px !important; 
    width: max-content !important; 
    box-shadow: 0 5px 10px 10px rgba(0,0,0,0.2) !important; 
    background-color: #ccc7ff !important; 
}

.datepicker-container .datepicker-time-view .divider {
    width: auto !important;
}

.datepicker-plot-area.datepicker-state-no-meridian.datepicker-state-no-second .datepicker-time-view>.time-segment {
    width: 10% !important;
}

@media (max-width: 576px){
    .datepicker-plot-area {
        width: 250px !important; 
        height: fit-content !important; 
        justify-self: center !important; 
        align-self: center !important; 
        box-shadow: 0 5px 10px 10px rgba(0,0,0,0.2) !important;
    }

    .datepicker-container.pwt-mobile-view .datepicker-plot-area .table-days td, .datepicker-container.pwt-mobile-view .datepicker-plot-area .table-days td span {
        height: 26px !important;
        line-height: 26px !important;
        font-size: 14px !important;
    }

    .datepicker-container.pwt-mobile-view .datepicker-time-view input {
        height: 15px !important;
        line-height: 34px !important;
        font-size: 14px !important;
    }
}

/* =========================================
   Porsian Rating System - Pure CSS
========================================= */
.rating-inputs {
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    gap: 8px;
    direction: ltr; /* تضمین چینش چپ‌به‌راست مقیاس */
}

.rating-inputs input[type="radio"] { 
    display: none; 
}

.rating-inputs label { 
    cursor: pointer; 
    transition: transform 0.1s ease; 
    margin: 0; 
    display: inline-flex; 
}

.rating-inputs label:active { 
    transform: scale(0.85); 
}

/* ظاهر پایه ستاره، قلب و ایموجی (خاکستری روشن) */
.rating-icon-star, 
.rating-icon-heart { 
    font-size: 2.2rem; 
    color: #dde3f0; 
    transition: color 0.2s ease; 
}

.rating-icon-emoji { 
    font-size: 2.5rem; 
    color: #dde3f0; 
    transition: all 0.2s ease; 
}

/* رنگ شدن آیکون‌ها با متغیر رنگی داینامیک دیتابیس */
.rating-inputs input[type="radio"]:checked ~ label i,
.rating-inputs input[type="radio"]:checked + label i,
.rating-inputs label:hover i,
.rating-inputs label:hover ~ label i {
    color: var(--active-rating-color, #f59e0b) !important;
}

/* افکت بزرگ‌شدن ایموجی هنگام انتخاب */
.rating-inputs input[type="radio"]:checked + label .rating-icon-emoji {
    transform: scale(1.15);
}

/* استایل‌دهی به مدل عددی */
.rating-icon-number {
    width: 40px; height: 40px; border-radius: 8px; border: 2px solid #dde3f0;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; color: #526486; background: #fff; transition: all 0.2s ease;
    font-size: 1.1rem;
}

.rating-inputs input[type="radio"]:checked + label .rating-icon-number,
.rating-inputs input[type="radio"]:checked ~ label .rating-icon-number {
    background: var(--active-rating-color, #2a15d9);
    color: #fff; 
    border-color: var(--active-rating-color, #2a15d9);
}

/* ریسپانسیو برای موبایل */
@media (max-width: 576px) {
    .rating-icon-star, .rating-icon-heart { font-size: 1.8rem; }
    .rating-icon-emoji { font-size: 2rem; }
    .rating-icon-number { width: 35px; height: 35px; font-size: 1rem; }
    .rating-inputs { gap: 4px; }
}