/* Scoped styles for the new login design to prevent conflicts */
:root {
  --primary-cyan: #06b6d4;
  --primary-cyan-dark: #0891b2;
  --primary-fuchsia: #d946ef;
  --bg-light: #f9fafb;
  --bg-dark: #111827;
  --sidebar-light: #ffffff;
  --sidebar-dark: #1f2937;
  --text-light: #374151;
  --text-dark: #d1d5db;
  --border-light: #e5e7eb;
  --border-dark: #374151;
  --area-dark: #21293b;
  --area-light: #8dceff;
  --element-background-dark: #121725;
  --element-background-light: #f0f4ff;

  /* Page Builder V2 Variables */
  --pb-bg-light: #F8FAFC;
  --pb-bg-dark: #0D1B2A;
  --pb-panel-dark: #1a2035;
  --pb-accent-blue: #42B6F4;
  --pb-text-muted-light: #64748b;
  --pb-text-muted-dark: #94a3b8;
  --button-active-light: #e4eef5;
  --error-text-color-dark : #FF6B6B;
}
body.new-design-active {
    font-family: 'Poppins', sans-serif;
    background-color: #f5f8fa;
    font-size: 13px;
    color: #404040;
    overflow-x: hidden;
    /* -webkit-font-smoothing: antialiased; */
    font-weight: 400;
    letter-spacing: 1px;
    color: #F1F5F9;
}
.new-design-active .manager-box-subtitle {
    color: var(--text-light);
}
.dark-mode .new-design-active .manager-box-subtitle {
    color: var(--text-dark);
}
.beautiful-ui {
  min-height: 100vh;
  color: rgba(255,255,255,.92);

  /* Layer 1: scalable gradient */
  background:
    radial-gradient(1200px 700px at 25% 20%, rgba(80,120,190,.35), rgba(10,16,28,.0) 60%),
    radial-gradient(900px 600px at 60% 55%, rgba(70,110,170,.25), rgba(10,16,28,.0) 65%),
    linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
}
.thin-font{
	font-weight: 200;
}
.new-design-active .medium-font{
	font-size :14px;
	line-height : 16px;
	font-weight: 400;
    color: var(--text-light);
}
.dark-mode .new-design-active .medium-font{
	font-size :14px;
	line-height : 16px;
	font-weight: 400;
    color: var(--text-dark);
}
.large-font{
	font-size :18px;
	line-height : 20px;
	font-weight: 400;
}
.header-dashboard-item{
	font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    padding: 0px 0px 16px 0px;
    border-bottom: 1px solid #ffffff1f;
}
/* Layer 2: repeated noise overlay (small image!) */
.beautiful-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .14;                 /* tune 0.08–0.18 */
  background-image: url("../images/noise-512.png");
  background-repeat: repeat;
  background-size: 512px 512px; /* important: no scaling to cover */
  mix-blend-mode: overlay;      /* optional */
}

.newdesign-page .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(../images/newdesign-login-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}
.dark-mode .newdesign-page .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(../images/newdesign-login-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.newdesign-page .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px 5%;
    box-sizing: border-box;
}

.newdesign-page .left-area {
	max-width: 800px;
    width: 100%;
    color: #ffffff;
    border-radius: 20px 0px 0px 20px;
    padding: 50px 88px;
    animation: newdesign-fadeInLeft 0.5s ease-in-out;
    background-color: #0f1a35;
    background-image: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(30, 90, 200, 0.7) 0%, rgba(20, 60, 150, 0.3) 45%, transparent 70%), radial-gradient(ellipse 60% 40% at 30% 90%, rgba(40, 80, 180, 0.4) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 75% 85%, rgba(25, 70, 160, 0.35) 0%, transparent 55%);
}

.newdesign-page .welcome-text {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 24px;
}

.newdesign-page .welcome-subtitle {
    font-size: 1.8em;
}

.newdesign-page .copyright {
    margin-top: 12px;
    font-size: 0.9em;
    opacity: 0.8;
}

.newdesign-page .login-box {
    color: #ecf0f1;
    padding: 40px 190px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    min-width: 500px;
    height: 100%;
    animation: newdesign-fadeInRight 0.5s ease-in-out;
    flex-shrink: 0;
    background-color: #0d0d14;
    background-image: radial-gradient(ellipse 40% 30% at 15% 10%, rgba(60, 80, 140, 0.7) 0%, transparent 70%), radial-gradient(ellipse 41% 40% at 89% 89%, rgba(80, 50, 120, 0.7) 0%, transparent 70%);
    border-radius: 0px 20px 20px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.newdesign-page .login-box .form-control:-webkit-autofill,
.newdesign-page .login-box .form-control:-webkit-autofill:hover,
.newdesign-page .login-box .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #282e38 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}
.newdesign-page .control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator {
    background: #00000033 !important;
}
.new-design-active .ng-table th.sortable.sort-asc, .ng-table th.sortable.sort-desc {
    background-color: rgb(6 182 212 / 0%);
    text-shadow: 0 1px 1px hsl(0deg 0% 100% / 75%);
    border-radius: 5px;
}
body.new-design-active .control__indicator {
    position: absolute;
    top: 0px;
    left: 0;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #5e626a;
    border-radius: 9px;
}
body.dark-mode.new-design-active .control__indicator {
    position: absolute;
    top: 0px;
    left: 0;
    width: 24px;
    height: 24px;
    background: #1e232aa8 ;
    border: 1px solid #5e626a;
    border-radius: 9px;
}
body.dark-mode.new-design-active .control:hover .control__indicator {
	background: #ffffff24;
}
.new-design-active .control--checkbox:has(i + .control__indicator) {
    position: relative;
    top: 0px;
    left: 0;
    border-radius: 9px;
}
body.new-design-active .control:hover .control__indicator {
	background: #b1b1b124;
}

.new-design-active .drop-box-menu {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    height: 120px;
    text-align: center;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.new-design-active .icon-100-percent-menu {
    /* width: auto; */
    height: 50%;
}
.new-design-active .sweet-alert {
	border-radius: 9px;
}

.new-design-active .icon-100-percent-banner,.icon-100-percent-footer {
    width: auto;
    height: 73%;
    margin-top: 0px;
}
.new-design-active .new-nav-label{
	width: 100%;
}
.new-design-active .control input:checked ~ .control__indicator {
    background: #282e38!important;
    opacity: 1;
    border: solid 1px #5e626a;
    border-radius: 9px;
    color: #fff;
}
.newdesign-page .login-box h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #ecf0f1; /* Light color for the title */
    font-weight: 600;
}
.new-design-active .control--checkbox .control__indicator:after {
    top: 2px;
    left: 8px;
    width: 7px;
    height: 14px;
    transform: rotate(45deg);
    border: solid #f9f9f9bd;
    border-width: 0 2px 2px 0;
}
.new-design-active .load-more-button {
    background: #1e64b2de;
    font-size: 25px;
    color: #ffffff;
    border-radius: 7px;
    position: fixed;
    right: 15px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 8px;
    background: linear-gradient(147deg, rgba(0, 180, 210, 0.5), #183462, rgba(0, 160, 200, 0.4));
}
.new-design-active .icon-on-crop-area {
    border: none;
    color: aqua;
    font-size: 17px;
    border-radius: 50%;
    /* padding: 1px 10px; */
    height: 30px;
}
.new-design-active .load-more-button .icon-on-crop-area {
    border: none;
    color: aqua;
    font-size: 17px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
.new-design-active .control {
    position: relative;
    display: inline-block !important;
    margin-bottom: 20px;
    padding-left: 36px;
    padding-right: 21px;
    padding-top: 2px;
    cursor: pointer;
    top: 0px;
}
.new-design-active .control--radio .control__indicator:after {
    top: 7px;
    left: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fdfdfdc9;
}
.new-design-active h4 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
}
.new-design-active h5 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
}
.new-design-active h6 {
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
}
/* Scoping bootstrap/generic classes */
.newdesign-page .login-box .form-control {
    background-color: #34495e; /* Slightly lighter dark color for inputs */
    color: #ecf0f1; /* Light text color */
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #34495e; /* Border to match background */
    margin-bottom: 20px;
}

.newdesign-page .login-box .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #95a5a6;
  opacity: 1; /* Firefox */
}

.newdesign-page .login-box .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #95a5a6;
}

.newdesign-page .login-box .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: #95a5a6;
}

.newdesign-page .login-box .btn-primary {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    background-color: #3498db;
    border-color: #3498db;
}

.newdesign-page .login-box .btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

.newdesign-page .login-box .forgot-password {
    text-align: center;
    margin-top: 20px;
}

.newdesign-page .login-box .forgot-password a {
    color: #3498db;
    text-decoration: none;
}

.newdesign-page .login-box .forgot-password a:hover {
    text-decoration: underline;
}

.newdesign-page .login-box .keep-login-container {
    margin-bottom: 20px;
}

.newdesign-page .login-box .control--checkbox {
    margin-top: 15px;
    text-align: left;
    display: block;
}

.newdesign-page .login-box .icon-login {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.newdesign-page .login-box .input-icons {
    position: relative;
}

.dark-mode .new-design-active .error-container {
	color: var(--error-text-color-dark);
    font-weight: 500;
    letter-spacing: 0.5px;
}
body.dark-mode.new-design-active .error-text {
    color: var(--error-text-color-dark);
    font-weight: 500;
    letter-spacing: 0.5px;
}
body.dark-mode.new-design-active .icon-checkpass-false {
    color: var(--error-text-color-dark);
}
body.dark-mode.new-design-active .errorColor {
    color: var(--error-text-color-dark);
}
body.dark-mode.new-design-active .highlight {
    color: var(--error-text-color-dark);
}
body.dark-mode.new-design-active .save-in-dialog-button {
    background: none!important;
}
@keyframes newdesign-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.logo-img-rocket{
    height: 300px;
}
.newdesign-page .newdesign-logo-header {
    display: flex;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 40px;
    width: 100%;
}

.newdesign-page .logo-img {
    height: 80px;
}

.newdesign-page .vertical-line {
    height: 40px;
    width: 2px;
    background-color: #ffffff;
    margin-right: 20px;
}

.newdesign-page .logo-text {
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 2px;
    color: #ffffff;
}

@keyframes newdesign-fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Theme switcher styles */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0!important;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #87CEEB; /* Sky blue for day */
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "\f185"; /* sun icon */
  font-family: FontAwesome;
  font-size: 14px;
  color: white;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 4px;
  background-color: #fdd835; /* Sunny yellow */
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: #2c3e50; /* Dark blue-grey for night */
}

input:focus + .slider {
  box-shadow: 0 0 1px #2c3e50;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  content: "\f186"; /* moon icon */
  background-color: #f5f5f5; /* Silvery moon */
  color: #2c3e50;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

body.light-mode {
    background-color: var(--bg-light);
    color: var(--text-light);
}

body.dark-mode {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

/* Sidebar */
.dark-mode .nav-header {
    background-color: var(--sidebar-dark) !important;
    border-bottom: 1px solid var(--border-dark);
}
.dark-mode .navbar-default {
    background-color: var(--sidebar-dark) !important;
    background-image: none !important;
    border-right: 1px solid var(--border-dark);
}
.dark-mode .sidebar-collapse > .nav > li {
    border-bottom: 1px solid var(--border-dark);
}
.dark-mode #side-menu li a {
    color: var(--text-dark);
}
.dark-mode #side-menu li.active > a {
    background-color: var(--primary-cyan-dark);
    color: white;
}
.dark-mode #side-menu li a:hover, .dark-mode #side-menu li a:focus {
    background-color: var(--bg-dark);
}

/* Footer */
body.dark-mode .footer {
    background: var(--sidebar-dark);
    border-top: 1px solid var(--border-dark);
    color: var(--text-dark);
}

/* Dark mode styles for navigation SVG icons */
body.dark-mode .kt-svg-icon path[fill="#000000"],
body.dark-mode .kt-svg-icon rect[fill="#000000"] {
    fill: var(--text-dark) !important;
}

/* New Navigation Styles */
.new-design-active .new-nav {
    width: 270px;
    position: fixed;
    top: 8px;
    left: 8px;
    height: calc(100vh - 16px);

    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    color: var(--text-light);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    transition: all 0.3s ease;
}

.dark-mode .new-design-active .new-nav {
    /* background: rgba(13, 20, 36, 0.85) !important;  */
    background: #000000c2;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.3), inset 0 0 8px rgba(0, 200, 255, 0.05);
}

.new-nav__header {
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.3s ease;
    gap: 6px;
}

.new-nav__logo {
    max-height: 40px;
    width: auto;
    max-width: 100%;
}

.new-nav__toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 16px;
    cursor: pointer;
}
.dark-mode .new-nav__toggle-btn {
    color: var(--text-dark);
}

.new-nav__menu {
    padding: 0;
    margin: 0;
    list-style: none;
    flex-grow: 1;
    overflow-y: auto;
}

.new-nav__item.active {
    border-left: 4px solid #629BF8;
    background: var(--bg-light);
}


.new-design-active .new-nav__item.active {
    margin: 0px 8px;
    border-radius: 9px;
    overflow: auto;
    background: linear-gradient(90deg, rgba(66, 182, 244, 0.15) 0%, rgba(66, 182, 244, 0.05) 100%);
    border: 1px solid rgba(66, 182, 244, 0.4);
    box-shadow: inset 0 0 10px rgba(66, 182, 244, 0.15);
}

.new-design-active .new-nav__item.active > .new-nav__link.sub_nav {
    background: #ffffff;
    border-radius: 0px;
}


.dark-mode.new-design-active .new-nav__item.active {
    margin: 0px 8px;
    border-radius: 9px;
    overflow: auto;
    background: linear-gradient(90deg, rgba(0, 120, 160, 0.35) 0%, rgba(0, 80, 120, 0.2) 100%);
    border: 1px solid rgba(0, 210, 240, 0.5);
    box-shadow: inset 0 0 14px rgba(0, 160, 200, 0.35);
}

.dark-mode.new-design-active .new-nav__item.active > .new-nav__link.sub_nav {
    background: #0A0C0E;
    border-radius: 0px;
}

.new-nav__item.active > a {
    padding-left: 21px;
}


.new-nav__link {
    display: flex;
    align-items: center;
    padding: 14px 25px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
    gap:5px;
}
.new-nav__link:hover, .new-nav__link:focus {
    background-color: var(--bg-light);
    color: var(--text-light);
    text-decoration: none;
}
.dark-mode .new-nav__link {
    color: #8390A2;
}
.new-nav__link.app-area {
    color: #b8d4ff;
    backdrop-filter: blur(4px);
    /* background: linear-gradient(90deg, #282E38, #183462, #1E232A); */
    margin: 15px 8px;
    border-radius: 9px;
    overflow: auto;
    background: linear-gradient(147deg, rgba(0, 190, 225, 0.85), #42B6F4, rgba(0, 170, 210, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(66, 182, 244, 0.3);
}
.dark-mode .new-nav__link.app-area {
    color: #b8d4ff;
    backdrop-filter: blur(4px);
    /* background: linear-gradient(90deg, #282E38, #183462, #1E232A); */
    margin: 15px 8px;
    border-radius: 9px;
    overflow: auto;
    background: linear-gradient(147deg, rgba(0, 180, 210, 0.5), #183462, rgba(0, 160, 200, 0.4));
}
.dark-mode .new-nav__link:hover {
    color: #E2E8F0;
}
.dark-mode .new-nav__link:hover, .dark-mode .new-nav__link:focus {
    background: linear-gradient(90deg, #14171C, #183462, #14171C);
    color: #B1CDFB!important;
    background: linear-gradient(145deg, rgba(0, 120, 160, 0.4) 0%, #183462, rgba(0, 80, 120, 0.4) 100%);
}
.dark-mode .active .new-nav__link:hover, .dark-mode .active .new-nav__link:focus {
    background: linear-gradient(90deg, #14171C, #183462, #14171C);
    color: #B1CDFB!important;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(0, 120, 160, 0.4) 0%, #183462, rgba(0, 80, 120, 0.4) 100%);
}


.new-nav__icon {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    font-size: 1.2em;
}
.dark-mode .new-design-active .active .new-nav__icon {
    color: var(--pb-accent-blue);
    margin-right: 10px;
    width: 20px;
    text-align: center;
    font-size: 1.2em;
}

.new-nav__link-content {
    display: flex;
    align-items: center;
    line-height: 1.2;
    font-size: 0.8em;
    opacity: 0.7;
    margin: 0;
}
.new-design-active .new-nav__item ul .active>a {
    color: var(--primary-cyan)!important;
    position: relative;
}
.dark-mode.new-design-active h1,
.dark-mode.new-design-active h2,
.dark-mode.new-design-active h3,
.dark-mode.new-design-active h4,
.dark-mode.new-design-active h5,
.dark-mode.new-design-active h6 {
    color: var(--text-dark) !important;
}

.new-design-active h1,
.new-design-active h2,
.new-design-active h3,
.new-design-active h4,
.new-design-active h5,
.new-design-active h6 {
    color: var(--text-light) !important;
}
.new-nav .new-nav-second-level {
    padding-left: 0;
    background-color: var(--bg-light);
}
.new-nav ul .active>a {
    color: var(--text-light)!important;
    position: relative;
}
.dark-mode .new-nav .new-nav-second-level {
    background-color: var(--bg-dark);
}
.new-nav-second-level > li {
    background-color: var(--bg-light);
}
.dark-mode .new-nav-second-level > li {
    background-color: #0A0C0E;
}
.dark-mode .info-permision {
    border-bottom: 1px dashed #c0c0c03d;
    left: -20px;
    margin-bottom: 36px;
}
.new-nav__sub-link {
    padding: 10px 25px 10px 54px;
    display: block;
    color: var(--text-light);
}
.dark-mode .new-nav__sub-link {
    color: var(--text-dark);
}
.new-nav__sub-link:hover {
    background-color: #f0f0f0;
}
.dark-mode .new-nav__sub-link:hover {
    /* background-color: #2c3e50; */
    color : #b1CDFB;
}
.new-nav__sub-link:hover {
    /* background-color: #2c3e50; */
    color : var(--primary-cyan);
}
.new-nav__sub-link.active, .dark-mode .new-nav__sub-link.active {
    color: var(--primary-cyan);
}


.new-nav__footer {
    border-top: 1px solid var(--border-light);
    transition: border-color 0.3s ease;
}
.dark-mode .new-nav__footer {
    border-top-color: var(--border-dark);
}

.new-nav .footer {
    background-color: var(--sidebar-light);
    color: var(--text-light);
    border-top: none;
    padding: 15px 25px;
}

.dark-mode .new-nav__footer .footer {
    background: #14171C;
    border-top: none;
}

/* Minimized Navigation Styles */
.mini-navbar .new-nav {
    width: 70px;
}

.mini-navbar .new-nav .new-nav__logo,
.mini-navbar .new-nav .new-nav-label,
.mini-navbar .new-nav .new-nav__app-info,
.mini-navbar .new-nav .fa-arrow,
.mini-navbar .new-nav .new-nav__footer span {
    display: none;
}

.mini-navbar .new-nav .new-nav__header,
.mini-navbar .new-nav .new-nav__link {
    justify-content: center;
    overflow: hidden;
}

.mini-navbar .new-nav .new-nav__footer .theme-switch-wrapper {
    justify-content: center;
    width: 100%;
}
nav ul .active .new-nav-label {
    color: var(--pb-accent-blue, #2F68C5) !important;
    font-weight: 700;
    transition: color 0.3s ease;
}
nav ul .active .new-nav-label:hover {
    color: #183462 !important;
    font-weight: 700;
}

.dark-mode .new-design-active ul .active .new-nav-label:hover {
    color: var(--text-dark) !important;
    font-weight: 700;
}

.dark-mode a {
    color: #d1d5db;;
}
.dark-mode .new-design-active .ng-table th.sortable.sort-asc,
.dark-mode .new-design-active .ng-table th.sortable.sort-desc {
    /* background-color: var(--bg-dark); */
    background-color : rgb(6 182 212 / 0%);
}
.new-design-active #scrollable-area thead {
    /* background-color: var(--sidebar-light); */
    background-color: transparent !important;
}

.dark-mode .new-design-active .table > thead > tr > th {
    color: var(--text-dark);
    /* border: 2px solid var(--sidebar-dark); */
}
.nav.new-nav-second-level > li.active {
	background: linear-gradient(90deg, rgba(0, 120, 160, 0.35) 0%, rgba(0, 80, 120, 0.2) 100%);
    /* border: 1px solid rgba(0, 210, 240, 0.5); */
    box-shadow: inset 0 0 14px rgba(0, 160, 200, 0.35);
}
.nav.new-nav-second-level > li.active:hover {
    background: linear-gradient(135deg, #14171C, #183462, #14171C);
}
.nav.new-nav-second-level > li:hover {
    background: linear-gradient(135deg, #14171C, #183462, #14171C);
    background: linear-gradient(145deg, rgba(0, 120, 160, 0.4) 0%, #183462, rgba(0, 80, 120, 0.4) 100%);
}
.dark-mode .row-even{
    background: rgb(40 46 56 / 50%);
}
.dark-mode .row-odd{
    background: rgb(40 46 56 / 70%);
}
/* Manager Header Theme Switcher */
.header-right-menu .theme-switch-wrapper {
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}

.new-design-active .new-table-content {
    background: var(--bg-light);
}
.dark-mode .new-design-active .new-table-content {
    background: var(--bg-dark);
}

.new-design-active .new-manager-welcome-text {
    margin: 0;
    color: var(--text-light);
    padding: 20px 0 10px 15px;
}
/* --- NEW HORIZONTAL HEADER NAVIGATION STYLES --- */

.manager-new-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    /* background-color: var(--sidebar-light); */
    border-bottom: 1px solid var(--border-light);
}
.dark-mode .manager-new-header {
    /* background-color: var(--sidebar-dark); */
    border-bottom-color: var(--border-dark);
}

.manager-new-header .header-left-area {
    display: flex;
    align-items: center;
    gap: 32px; /* Space between logo and menu */
}

.manager-new-header .header-logo {
    height: 32px;
    flex-shrink: 0;
}

.header-new-nav {
    flex-grow: 1;
}

.header-new-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px; /* Space between menu items */
}

.header-new-menu li a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.dark-mode .header-new-menu li a {
    color: var(--text-dark);
}

.header-new-menu li a:hover {
    background-color: var(--bg-light);
}

.dark-mode .header-new-menu li a:hover {
    background-color: var(--bg-dark);
}

.header-new-menu li.active a {
    color: var(--primary-cyan)!important;
    font-weight: 600;
    background-color: var(--button-active-light);
}

.dark-mode .header-new-menu li.active a {
    background-color: var(--bg-dark);
    color: var(--primary-cyan);
}

.header-new-menu li a i {
    margin-right: 8px;
    font-size: 16px;
}

.manager-new-header .header-controls-area {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.manager-new-header .logout-button-new {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: pointer;
}
.dark-mode .manager-new-header .logout-button-new {
    color: var(--text-dark);
}

.manager-new-header .language-selector-new .dropdown-toggle {
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-light);
    padding: 8px 16px;
    border-radius: 8px;
}
.dark-mode .manager-new-header .language-selector-new .dropdown-toggle {
    border-color: var(--border-dark);
    color: var(--text-dark);
}

ul.header-new-menu li.active {
    background: none!important;
    color: red!important;
}

/* --- NEW DESIGN OVERRIDE STYLES --- */

/* Radial gradient for the entire new-design-active area */

/* .new-design-active {
    background: radial-gradient(circle at center, #e0f2f7, #bbdefb);
} */
.new-design-active .app-name-area{
	max-width: auto;
}
.new-design-active .left-menu-icon{
	width: 100px;
    height: 100px;
    border-radius: 7px;
    object-fit: contain;
}
/* ==========================================
   MAIN BACKGROUND - LIGHT & DARK MODE
   ========================================== */

/* --- LIGHT MODE --- */
body.new-design-active {
    background: radial-gradient(circle at center, #e0f2f7, #bbdefb) !important;
    /* background-attachment: fixed !important;  */
    color: var(--text-light);
}

/* --- DARK MODE --- */
body.dark-mode.new-design-active {
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%),
                radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%),
                linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%) !important;
    background-attachment: fixed !important;
    /* background-repeat: no-repeat !important;
    min-height: 100vh !important; */
    color: var(--text-dark);
}
body.dark-mode.new-design-active::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url(../images/noise-512.png);
  background-repeat: repeat;
  background-size: auto;
}
body.new-design-active::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background-image: url(../images/noise_light.jpg);
  background-repeat: repeat;
  background-size: auto;
}
/* Card Styles */
.new-design-active .smart-form{
	padding-top: 10px;
	padding-bottom: 10px;
}


/* Table Styles */
body.dark-mode.new-design-active .item-in-table:hover {
    background-color: var(--area-dark);
    transition: background-color 0.3s ease-in-out;
}
body.new-design-active .item-in-table:hover {
    background-color: var(--area-light);
    transition: background-color 0.3s ease-in-out;
}
body.dark-mode.new-design-active .item-in-table {
    border-bottom: 1px solid var(--border-dark);
}
body.new-design-active .item-in-table {
    border-bottom: 1px solid var(--border-light);
}

.dark-mode .new-design-active .footable > tbody > tr:hover > td,
.new-design-active .footable > tbody > tr:hover > td {
    background-color: transparent;
}
.new-design-active .preview-control-area{
	display: none;
}
.new-design-active .footable a.underline {
    text-decoration: none;
}
.new-design-active .top-background-page{
	background: none;
}
.dark-mode .new-design-active table tr th,
.dark-mode .new-design-active table tr td {
    border-top: 1px solid rgb(52 66 86 / 60%);
    padding: 15px 24px;
}
.new-design-active table tr th,
.new-design-active table tr td {
    border-top: 1px solid rgb(52 66 86 / 100%)!important;
    padding: 15px 24px!important;
}
/* Button Overrides */
.new-design-active .header-group-table{
	padding : 13px 24px;
}
body.dark-mode.new-design-active .btn:disabled,
body.dark-mode.new-design-active .btn[disabled],
body.dark-mode.new-design-active .btn.disabled {
    background: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

body.dark-mode.new-design-active .btn:disabled:hover,
body.dark-mode.new-design-active .btn[disabled]:hover,
body.dark-mode.new-design-active .btn.disabled:hover {
    background: #334155 !important;
    box-shadow: none !important;
    transform: none !important;
}

.new-design-active .btn {
    padding: 17px 16px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Active state button ('Yes') */
.new-design-active .btn.active-state {
    background-color: #10b981; /* green-500 */
    color: white;
    border: 1px solid #bae6fd;
}
.new-design-active .btn.active-state:hover {
    background-color: #059669; /* green-600 */
    border-color: #059669;
}
.new-design-active .btn {
    border-radius: 9px;
    margin: 0px 0px 0px 8px;
}
.new-design-active #pickChoiceImage{
    padding: 10px 16px!important;
}
/* Deactive state button ('No') */
.new-design-active .btn.deactive-state {
    background-color: var(--border-light);
    color: var(--text-light);
    border-color: var(--border-light);
}
.dark-mode .new-design-active .btn.deactive-state {
     background-color: var(--border-dark);
    color: var(--text-dark);
    border-color: var(--border-dark);
}
.dark-mode .new-design-active .btn.active-state {
    background: #1e8242 !important;
    color: var(--text-dark);
    border-radius: 15px;
    border: none;
}
.new-design-active .btn.active-state {
    background: #1e8242 !important;
    color: var(--text-dark);
    border-radius: 15px;
    border: none;
}
.new-design-active .btn.deactive-state:hover {
    background-color: #d1d5db;
}
.dark-mode .new-design-active .btn.deactive-state:hover {
    background-color: #4b5563;
}
.new-design-active .input-group-btn>.btn {
    padding: 12px 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.new-design-active .btn-dropdown{
	background: linear-gradient(to right, #2F68C5, #234E94);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #2f76e3;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
    padding: 9px 16px;
    border-radius : 3px;
}
body.new-design-active .btn{
	background: linear-gradient(to right, #e0f2fe, #5c9dc9);
    color: var(--text-light);
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #99b1d2;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
body.dark-mode.new-design-active .btn{
    background: linear-gradient(to right, #505D6F, #334155);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #64748B;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
.new-design-active .btn:hover {
	background: linear-gradient(to right, #334155, #282E38);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #282E38;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
body.dark-mode.new-design-active .dropdown-btn {
    color: #F1F5F9;

}
.new-design-active .dropdown-btn {
    /* background: #14171c; */
    color: var(--text-light);
    /* box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%); */
    border-bottom: 1px solid hsl(0deg 0% 16% / 70%);
    line-height: 16px;
    font-weight: 300;
    font-size: 14px;
    padding: 12px 20px;
    width: auto;
    max-width: 100%;
    width: 100%;
    min-width: 330px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.dark-mode.new-design-active .btn-primary {
	background: linear-gradient(to right, #2F68C5, #234E94)!important;
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #2f76e3;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
.new-design-active .btn-primary:hover {
	background: linear-gradient(to right, #234E94, #183462);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #2f76e3;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
body.dark-mode.new-design-active .btn-success {
	background: linear-gradient(to right, #1A335B, #152B4F);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #234E94;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
.new-design-active .btn-success:hover {
	background: linear-gradient(to right, #152F58, #0C1A31);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #183462;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}

.new-design-active .btn-page {
	background: linear-gradient(to right, #475569, #334155);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #334155;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
    padding: 12px 16px;
    cursor: pointer;
    float: left !important;
    border-radius: 9px;
}
.new-design-active .btn-page:hover {
	background: linear-gradient(to right, #334155, #282E38);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #282E38;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
.new-design-active .btn-icon-up-down {
	background: linear-gradient(to right, #282E38, #334155);
	color: #F1F5F9;
}
.new-design-active .btn-primary.btn-icon-up-down,
.new-design-active .btn-primary.btn-icon-up-down:hover,
.new-design-active .btn-primary.btn-icon-up-down:focus {
    background-color: transparent !important;
    color: var(--text-light);
    border: 1px solid var(--border-light);
    line-height: 1;
}
.dark-mode .new-design-active .dropdown-menu {
	background-color: #020306;
}
.dark-mode .new-design-active .add-container-area {
    background: #00000075;
    z-index: 4;
    position: relative;
    margin: 0px 0px 0px 0px;
    height: 800px;
    border-radius: 4px;
    overflow: auto;
}
.dark-mode .new-design-active .container-content-area {
    margin: 25px;
    background: #f5f8fa00;
    border-radius: 10px;
    padding: 15px 0px;
}
.dark-mode .new-design-active .bootstrap-datetimepicker-widget table tr th, .dark-mode .new-design-active .bootstrap-datetimepicker-widget table tr td {
    border-top: 1px solid rgb(52 66 86 / 60%);
    padding: 5px;
}
.dark-mode .new-design-active .bootstrap-datetimepicker-widget td.day:hover, .dark-mode .new-design-active .bootstrap-datetimepicker-widget td.hour:hover, .dark-mode .new-design-active .bootstrap-datetimepicker-widget td.minute:hover, .dark-mode .new-design-active .bootstrap-datetimepicker-widget td.second:hover {
    background: #313a47;
    cursor: pointer;
}
.dark-mode .new-design-active .bootstrap-datetimepicker-widget thead tr:first-child th:hover {
    background: #313a47;
}
.dark-mode .new-design-active .bootstrap-datetimepicker-widget td span:hover {
    background: #313a47;
}
*
.dark-mode.new-design-active .btn-primary.btn-icon-up-down {
	color: var(--text-dark);
    border-color: #5e626a;
}
.dark-mode.new-design-active .btn-icon-up-down {
	padding: 5px 10px;
}

.dark-mode .new-design-active .btn-icon {
	background: linear-gradient(to right, #282E38, #334155);
	color: #F1F5F9;
}
.new-design-active .bootstrap-datetimepicker-widget td span {
    display: inline-block;
    width: 30px;
    height: 18px;
    line-height: 18px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 9px;
    font-size: small;
}
.btn-group, .btn-group-vertical {
    gap: 10px;
    display: grid;
    grid-auto-flow: column;
    float: left;

}
/* Icon buttons (copy, cog) */
.new-design-active .btn-primary.btn-icon,
.new-design-active .btn-primary.btn-icon:hover,
.new-design-active .btn-primary.btn-icon:focus {
    /* background-color: transparent !important; */
    color: var(--text-light);
    border: 1px solid var(--border-light);
    line-height: 1;
}
.dark-mode.new-design-active .btn-danger.btn-icon {
	color: var(--text-dark);
    border-color: #5e626a;
}
.dark-mode.new-design-active mwl-calendar .cal-row-fluid:hover, .dark-mode.new-design-active mwl-calendar .cal-year-box .row:hover {
    background-color: #0405096b;
}
.dark-mode.new-design-active mwl-calendar .cal-cell.drop-active, .dark-mode.new-design-active mwl-calendar .cal-day-hour-part.drop-active, .dark-mode.new-design-active mwl-calendar .cal-week-box .cal-cell1.drop-active, .dark-mode.new-design-active mwl-calendar .cell-focus, .dark-mode.new-design-active mwl-calendar [class*=cal-cell] .drop-active, .dark-mode.new-design-active mwl-calendar [class*=cal-cell]:hover {
    background-color: #0304086e;
}
.dark-mode.new-design-active .btn-primary.btn-icon {
	color: var(--text-dark);
    border-color: #5e626a;
}
.dark-mode.new-design-active .btn-icon {
	padding: 6px 6px;
}
.new-design-active .btn-icon {
	padding: 6px 6px;
}
.dark-mode.new-design-active mwl-calendar .cal-day-today {
    background-color: #1e824252;
}
.dark-mode.new-design-active mwl-calendar .cal-day-today span[data-cal-date] {
    color: #ffffff;
}
.new-design-active .btn-primary.btn-icon:hover {
    background-color: var(--bg-light) !important;
    border-color: #d1d5db;
}

.dark-mode .new-design-active .btn-primary.btn-icon:hover {
    background-color: #1E232A !important;
    background: #1E232A !important;
    border-color: #4b5563;
}

/* Danger button (times icon) */
body.dark-mode.new-design-active .btn-danger.btn-icon {
    background-color: transparent;
    color: #ef4444;
	padding: 6px 6px;
    line-height: 1;
}
body.new-design-active .btn-danger.btn-icon {
    color: #ef4444;
	padding: 6px 6px;
    line-height: 1;
    border: 1px solid #bae6fd;
}
.dark-mode.new-design-active .btn-danger.btn-icon {
    color: #f87171; /* A lighter red for dark mode */
}

.new-design-active .btn-danger.btn-icon:hover {
    background: #1E232A;
	background-color: #1E232A !important;
    border-color: #4b5563!important;
}

.new-design-active .new-pager .pager-controls {
    display: flex;
    justify-content: flex-end; /* Change from space-between */
    align-items: center;
    padding: 10px 0;
    gap: 24px; /* Added spacing between elements */
}
.new-design-active .slider{
	height: 26px;
}
.new-design-active .new-pager .pager-label {
    margin-right: 8px;
    font-size: 14px;
    color: var(--text-light);
}
.dark-mode .new-design-active .new-pager .pager-label {
    color: var(--text-dark);
}

.new-design-active .new-pager .pager-counts,
.new-design-active .new-pager .pager-jump {
    display: flex;
    align-items: center;
}

.new-design-active .new-pager .page-input {
    width: 60px;
    text-align: center;
    height: 34px;
    margin-left: 8px;
}

/* Styling the bootstrap pagination */
.new-design-active .pagination {
    margin: 0;
}

.new-design-active .pagination > li > a,
.new-design-active .pagination > li > span {
    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
    color: var(--text-light);
    margin: 0 2px;
    border-radius: 6px;
}
.dark-mode .new-design-active .pagination > li > a,
.dark-mode .new-design-active .pagination > li > span {
    background-color: var(--sidebar-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}

.new-design-active .pagination > li.active > a,
.new-design-active .pagination > li.active > a:hover {
    background-color: var(--primary-cyan);
    border-color: var(--primary-cyan);
    color: white;
}
.dark-mode .new-design-active .pagination > li.active > a,
.dark-mode .new-design-active .pagination > li.active > a:hover {
    background-color: var(--primary-cyan-dark);
    border-color: var(--primary-cyan-dark);
}

.new-design-active .pagination > li > a:hover {
    background-color: var(--bg-light);
}
.dark-mode .new-design-active .pagination > li > a:hover {
    background-color: var(--bg-dark);
}

.new-design-active .pagination > li.disabled > a,
.new-design-active .pagination > li.disabled > a:hover {
    background-color: transparent;
    border-color: transparent;
    color: #9ca3af;
}
.dark-mode .new-design-active .pagination > li.disabled > a,
.dark-mode .new-design-active .pagination > li.disabled > a:hover {
    color: #4b5563;
}


/* Styling the counts dropdown */
.new-design-active .pager-counts .btn-default {
    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
    color: var(--text-light);
    border-radius: 6px;
}
.dark-mode .new-design-active .pager-counts .btn-default {
    background-color: var(--sidebar-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}



.new-design-active .center-box {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    border-radius: 20px;
    /* background: #ffffff; */
    /* border: 1px solid var(--border-light); */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.new-design-active .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px;
    gap: 15px;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.new-design-active .box > .col-sm-6 {
    float: none !important;
    width: auto;
    flex: 1;
}
.new-design-active .box > .col-sm-6:last-child {
    display: flex;
    justify-content: flex-end;
}

.new-design-active #scrollable-area.box {
    display: block !important;
    width: 100%;
    overflow-x: auto;
    max-height: calc(100vh - 260px);
    padding: 10px!important;
}

.new-design-active .box-content {
    /* display: flex; */
    align-items: center;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}



.dark-mode.new-design-active .center-box {
    /* background: rgba(20, 28, 44, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15); */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.dark-mode.new-design-active .box {
    background: rgba(20, 28, 44, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.dark-mode.new-design-active #scrollable-area.box {
    padding: 0;
}

.dark-mode.new-design-active .box-content {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 0 20px rgba(80, 150, 255, 0.08),
        inset 0 -8px 16px rgba(100, 180, 255, 0.12);
}

.dark-mode.new-design-active .box-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(185, 110, 255, 0.33) 0%, rgba(161, 123, 180, 0.58) 50%, rgba(120, 200, 255, 0.75) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.dark-mode.new-design-active .box-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 20px;
    background: radial-gradient(
        ellipse 50% 100% at 50% 100%,
        rgba(120, 200, 255, 0.85) 0%,
        rgba(100, 170, 255, 0.35) 40%,
        rgba(80, 140, 255, 0.08) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
.dark-mode select option {
    color: #dadada;
    background-color: #0d121e !important;
    background: linear-gradient(to right, #2F68C5, #234E94);
    padding: 12px 16px;
    border: 1px solid #2f76e3;
    margin: 4px 0px;
    border-radius: 3px;
}
.dark-mode select option:focus {
    color: #dadada;
    background-color: #0d121e !important;
    background: linear-gradient(to right, #2F68C5, #234E94);
    padding: 12px 16px;
    border: 1px solid #2f76e3;
    margin: 4px 0px;
    border-radius: 3px;
}

.dark-mode .drop-box{
	background: #1520348c;
    border: 2px dashed rgb(66 182 244 / 20%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark-mode .drop-box-menu{
   	background: #1520348c;
    border: 2px dashed #2b3d60;
}
.dark-mode .area-image-preview{
   	background: #1520348c;
}
.dark-mode .form-control, .single-line {
    display: block;
    width: 100%;
    height: 51px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.1;
    color: #dadada;
    background-color: #00000033 !important;
    background-clip: padding-box;
    border: 1px solid #e2e5ec14;
    border-radius: 9px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.new-design-active .new-pager .pager-page-selection {
    display: flex;
    align-items: center;
    gap: 0px; /* Space between pagination, dropdown, and input */
}
.new-design-active textarea.form-control {
    height: auto;
}

/* Page number dropdown styles */
.new-design-active .new-pager .pager-select-wrapper {
    display: flex;
    align-items: center;
}
.new-design-active .folder-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px;
}
.new-design-active .new-pager .pager-select {
    width: auto;
    height: 34px;
    padding: 6px 12px;
}
.new-design-active .folder-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 150px;
}
.new-design-active .new-pager .page-selector {
    min-width: 70px;
}
.new-design-active .icon-croper-on-image {
    float: right;
    top: 0;
    color: #36a936;
    font-size: 16px;
    margin-top: -24px;
    margin-left: -12px;
    margin-right: -8px;
    cursor: pointer;
    background-color: #e6e6e669;
    padding: 6px 6px;
    border-radius: 4px;
    background: linear-gradient(to right, rgb(40, 46, 56), rgb(51, 65, 85));
    border-radius: 50%;
    border-color: #5e626a70;
    border: 1px solid #5e626a;
    background: linear-gradient(to right, #282E38, #334155);
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
}
.new-design-active .remove-image-selected9 {
    z-index: 99999;
    float: right;
    top: 0;
    color: #e02828;
    font-size: 16px;
    margin-top: -24px;
    margin-left: 11px;
    margin-right: 0px;
    cursor: pointer;
    background-color: #e6e6e669;
    padding: 6px 7px;
    border-radius: 50%;
    /* font-size: 16px; */
    border-color: #5e626a70;
    border: 1px solid #5e626a;
    background: linear-gradient(to right, #282E38, #334155);
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
}
.dark-mode .new-design-active .manager-welcome-text {
    color: var(--text-dark);
}

.dark-mode #scrollable-area{
    max-height: calc(100vh - 260px);
    display: inherit;
}
.dark-mode .remove-icon-bar{
	position: absolute;
    z-index: 99999;
    float: right;
    background-color: #faebd700;
    color: #e02828;
    font-size: 21px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 50%;
}
.dark-mode table.ng-table tbody tr:nth-child(odd) {
    background-color: #1a2035;
}

.dark-mode table.ng-table tbody tr:nth-child(even) {
    background-color: #1e2a45;
}
body.dark-mode.new-design-active table.ng-table tbody tr:hover {
    background-color: var(--area-dark);
    transition: background-color 0.3s ease-in-out;
}
body.new-design-active table.ng-table tbody tr:hover {
    background-color: var(--area-light);
    transition: background-color 0.3s ease-in-out;
}
.new-design-active .manager-welcome-text {
    color: var(--text-light);
}

.dark-mode.new-design-active #stickyTable thead tr {
    background: transparent;
}
.new-design-active #stickyTable thead tr {
    background: transparent;
}
.new-design-active #stickyTable thead th {
    text-align: left;
}
.arround-area{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.base-area{
	padding: 5px 20px;
    display: inline-block;
}
.header-dashboard{
	margin: 0;
    padding: 24px 0px;
}
.big-box{
	align-items: center;
    border-radius: 5px;
    padding: 5px 24px;
    background: rgb(61 74 98 / 13%);
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 36%);

}
.dashboard-main-area .application-item{
    color : var(--text-light)!important;
}
.dark-mode .dashboard-main-area .application-item{
    color : var(--text-dark)!important;
}
.dashboard-main-area{
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    color : var(--text-light)!important;
}
.dark-mode .dashboard-main-area{
    display: grid;
    grid-auto-flow: row;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    color : var(--text-dark)!important;
}
.phone-preview-area{
}
.new-design-active .welcom-area{
	padding: 50px 30px 50px;
	background-image: url(../images/banner_lightmode.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px 0px;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 10px;
    box-shadow: 0 7px 7px rgb(0 0 0 / 14%);
}
.dark-mode .new-design-active .welcom-area{
	padding: 50px 30px 50px;
	background-image: url(../images/banner.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px 0px;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 10px;
    box-shadow: 0 7px 7px rgb(0 0 0 / 14%);
}

.app-info{
	display: grid;
	gap : 25px;
	grid-template-columns: 1fr 1fr;
}
.below-area{
	border-top: 1px solid #ffffff1f;
    padding: 20px 0px 0px 0px;
    margin-top: 24px;
}
.more-action-area{
	padding: 20px 0px 0px 0px;
}
.action-btn{
	background: linear-gradient(to right, #1d273b, #12203d);
}
.space-between{
	display: flex;
    justify-content: space-between;
}
.setting-area{
	display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}
.new-nav__app-icon {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 10px;
}

.new-design-active .jstree-default .jstree-clicked {
    background: #beebff00;
    border-radius: 2px;
    box-shadow: none;
}
.new-design-active .box-content p {
    margin: 0;
    font-weight: 300;
    padding: 12px;
    font-size: 14px;
    line-height: 16px;
    border-bottom: 1px solid #ffffff1f;
}
.new-design-active h2 {
    letter-spacing: 0px;
    font-size: 22px;
    margin: 0px 0;
    padding: 13px 0;
    line-height: normal;
}
.new-design-active h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}


.new-design-active .new-blue-gradient-btn {
    background: linear-gradient(to right, #007bff, #0056b3);
    color: white;
    border: none;
}

.new-design-active .new-blue-gradient-btn:hover {
    background: linear-gradient(to right, #0056b3, #004085);
}


.new-design-active .custom-filter-wrapper {
    display: flex;
    align-items: center; /* Vertically align items */
}

.new-design-active .custom-search-input-wrapper {
    position: relative;
    flex-grow: 1; /* Input takes up remaining space */
    margin-right: 5px; /* Space between input and select */
}

.new-design-active .custom-search-input-wrapper .form-control {
    padding-right: 30px; /* Space for the icon */
    border-top-right-radius: 4px; /* Ensure default Bootstrap radius */
    border-bottom-right-radius: 4px;
}

.new-design-active .custom-search-input-wrapper .custom-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.new-design-active .ng-table th.sortable .sort-indicator:after, .new-design-active .ng-table th.sortable .sort-indicator:before {
    content: "";
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #ffffff transparent;
    visibility: visible;
    right: 5px;
    top: 50%;
    position: absolute;
    opacity: .9;
    margin-top: -4px;
}
.new-design-active .ng-table th.sortable.sort-desc .sort-indicator:after {
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ffffff;
    box-shadow: none;
}
.new-design-active .ng-table th.sortable .sort-indicator:before {
    margin-top: 2px;
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ffffff;
}
.new-design-active .custom-filter-select {
    width: auto; /* Adjust to content */
    min-width: 120px; /* Minimum width for the dropdown */
}
.new-design-active input {
    background-color: transparent !important;
    color: var(--text-light);
}
.new-design-active select {
    background-color: transparent !important;
    /* color: var(--text-light); */
}
.new-design-active .gallery-item{

}
.new-design-active .gallery_img_area {
    width: 100%;
    height :auto !important;
    object-fit: cover!important;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
}
.new-design-active .control--checkbox .control__indicator:after {
	top: 1px;
    left: 8px;
    width: 8px;
    height: 17px;
    transform: rotate(45deg);
    border: solid #ffffff;
    border-width: 0 1px 1px 0;
}
.new-design-active .action-icons {
	position: absolute;
    top: 0px;
    display: flex;
    justify-content: space-between;
    padding: 5px 12px;
    /* pointer-events: none; */
    background: #000000ba;
    border-radius: 9px;
    align-items: center;
}
.new-design-active .image-wrapper{
   position: relative;
}
.new-design-active .app-preview-area{
	display: flex;
    gap: 5px;
}
.new-design-active .app-preview-area .left-menu-icon{
	width: 100px;
    height: auto;
    border-radius: 0px;
    object-fit: contain;
    margin-left: -18px;
}
.new-design-active .app-name-area button {
    margin: 10px 0px;
}
.new-design-active .app-preview-area .header-dashboard-item {
	width: 100%;
    display: inline-block;
    border: none;
    padding: 35px 15px 15px 0px;
}
.new-design-active .app-preview-area .box-menu-item {
	cursor: pointer;
    color: #3b82f6!important;
}
.dark-mode .new-design-active input {
    color: var(--text-dark);
    border-radius: 9px;
}
.dark-mode .new-design-active input:focus {
    border: 1px solid rgba(0, 200, 255, 0.4)!important;
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.3), inset 0 0 8px rgba(0, 200, 255, 0.05);
    border-radius: 9px;
}
.dark-mode .input-group-addon {
    background: linear-gradient(to right, #282E38, #334155);
    border: 1px solid #5e626a;
    border-radius: 1px;
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
}
.dark-mode .medication-item {
    border-bottom: 1px dashed #fcfcfc38;
    padding: 10px !important;
}
.dark-mode textarea{
	color: #dadada;
    background-color: #00000033 !important;
    border: 1px solid #e2e5ec14;
    border-radius: 4px;
}


.new-design-active .info-permision-page{
	border-bottom : 1px dashed #c0c0c03d;
}
body.dark-mode.new-design-active .element {
    background: var(--element-background-dark);
}
body.new-design-active .element {
    background: var(--element-background-light);
}
.new-design-active .control-label{
	display: flex;
    align-items: center;
}
.new-design-active .page-homepage {
    float: left;
    right: auto;
    font-weight: 700;
    /* display: inline-block; */
    /* max-width: 100%; */
    margin-bottom: 0px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: auto;
}
.new-design-active .normal-icon{
	font-size: 18px;
}
.new-design-active footer{
	padding: 0px 30px;
}
.new-design-active .flex-start{
	display: flex;
	align-items: flex-start;
	gap: 5px;
}
.new-design-active .table > thead > tr > th {
    border-bottom: none;
    vertical-align: bottom;
    text-transform: uppercase;
    color: #818197;
    font-weight: 500;
}
.new-design-active .gallery-item-name{
	display: none
}
.new-design-active .folder-area{
	margin: 0px 0px 16px 0px;
}
.new-design-active .galley-view-type {
    float: left;
    display: inline-flex;
    background: #45455000;
    margin-top: 5px;
    padding: 0 35px 0px 35px;
}
/* base css */
.box-menu-item {
	display: flex!important;
	cursor: pointer;
	align-items: center;
}
.box-menu-item .item-icon{
	font-size: 4px;
    padding: 0px 12px;
}

.general-upload-area{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap : 20px;
}
.general-menu-type{
	padding: 15px 0px;
}
.handle-app-area{
	display: grid;
    padding: 30px;
    border: 1px solid #ffffff1a;
    background: #121725;
}
.general-app-content{
	max-height: calc(100vh - 500px);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #ffffff0f;
}

.action-in-table {
    width: 280px;
    text-align: right;
}
.header-area{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.action-header{
	display: flex;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}
.action-header .left-menu-icon{
	width: 50px;
    height: 50px;
    border-radius: 50%;
}
.profile-header{
	/* background: #0e141f; */
    padding: 0px 15px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
}
.dark-mode .profile-header{
	background: #0e141f;
    padding: 0px 15px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
}
.btn-normal{
	background: linear-gradient(to right, #475569, #334155);
    color: #F1F5F9;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #334155;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
.btn-normal:hover{
	background: linear-gradient(to right, #334155, #282E38);
    color: #F1F5F9!important;
    box-shadow: 0 10px 30px hsl(218deg 17% 9% / 20%);
    border: 1px solid #282E38;
    line-height: 16px;
    font-weight: 400;
    font-size: 14px;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: 1px dashed #e7eaec4a;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: middle;
}
.action-header .dropdown-btn{
	min-width: auto;
}
.margin-15{
	margin: 15px!important;
}
.no-margin-top{
	margin-top: 0px!important;
}
/* ---  Dropdown menu --- */
.new-design-active .open > .dropdown-menu {
    background-color: var(--sidebar-light);
    color: var(--text-light);
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    border-radius: 9px;
}

.new-design-active .open > .dropdown-menu > li > a {
    color: var(--text-light);
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-design-active .open > .dropdown-menu > li > a:hover {
    background-color: var(--bg-light);
    color: var(--primary-cyan);
}


.dark-mode .new-design-active .open > .dropdown-menu {
    /* width: 210px; */
    white-space: nowrap;
    background-color: var(--pb-panel-dark);
    color: var(--text-dark);
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.detail-image-gallery{
    float: right;
    position: absolute;
    color: #e02828;
    font-size: 23px;
    margin-top: -6px;
    margin-left: 30px;
    cursor: pointer;
    background-color: #eaeaea5e;
    padding: 2px 5px;
    border-radius: 50%;
}
.dark-mode .new-design-active .open > .dropdown-menu > li > a {
    color: var(--text-dark);
}

.dark-mode .new-design-active .open > .dropdown-menu > li > a:hover,
.dark-mode .new-design-active .open > .dropdown-menu > li > a:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--pb-accent-blue) !important;
}
@media ( min-width : 768px  ) {
    .new-design-active #page-wrapper {
        position: inherit;
        margin: 0 0 0 270px;
        min-height: 1200px;
    }
}
@media ( max-width : 1300px  ) {
    .center-box {
        display: grid;
        align-items: center;
        grid-auto-flow: row;
    }
	.newdesign-page .container {
	    display: flex;
	    /* justify-content: space-around; */
	    align-items: center;
	    min-height: 100vh;
	    width: 100%;
	    padding: 20px 5%;
	    box-sizing: border-box;

	}
	.newdesign-page .left-area {
    	width: auto;
    	border-radius: 20px 20px 0px 0px;
    	padding: 20px 15px;
    }
    .newdesign-page .login-box {
    	width: auto;
   	    min-width: auto;
	    padding: 20px 15px;
	    border-radius: 0px 0px 20px 20px;

    }
    .newdesign-page .newdesign-logo-header {
	    display: flex;
	    align-items: center;
	    margin-top: 20px;
	    margin-bottom: 26px;
	    width: 100%;
	}
	.newdesign-page .welcome-text {
	    font-size: 16px;
	    font-weight: bold;
	    margin-bottom: 12px;
	}
	.newdesign-page .welcome-subtitle {
	    font-size: 12px;
	}
    .newdesign-page .copyright {
	    margin-top: 6px;
	    font-size: 8px;
	    opacity: 0.8;
	}
	.logo-img-rocket {
	    height: 105px;
	}
	.newdesign-page .logo-img {
	    height: 35px;
	}
}
@media ( min-width : 1301px  ) {
	.setting-area {
	    display: grid;
	    gap: 20px;
	    grid-template-columns: 1fr;
	}
	.newdesign-page .left-area {
		padding: 22px 22px;
		width: 500px;
	}
	.newdesign-page .login-box {
		width: 500px;
	    color: #ecf0f1;
	    padding: 40px 40px;
	}
	.newdesign-page .newdesign-logo-header {
	    display: flex;
	    align-items: center;
	    margin-top: 100px;
	    margin-bottom: 60px;
	    width: 100%;
	}
	.newdesign-page .welcome-text {
	    font-size: 2em;
	    font-weight: bold;
	    margin-bottom: 24px;
	}
	.newdesign-page .logo-img {
	    height: 60px;
	}
    .newdesign-page .welcome-text {
       font-size: 28px;
       font-weight: bold;
       margin-bottom: 24px;
   }
   .newdesign-page .welcome-subtitle {
	    font-size: 18px;
	}
	.newdesign-page .copyright {
	    margin-top: 12px;
	    font-size: 10px;
	    opacity: 0.8;
	}
	.logo-img-rocket {
	    height: 230px;
	}
	.main-actions { grid-template-columns: 1fr!important; }
}


@media ( min-width : 1367px ) {
	.setting-area {
	    display: grid;
	    gap: 20px;
	    grid-template-columns: 1fr 1fr;
	}
	.newdesign-page .left-area {
		padding: 30px 58px;
		width: 600px;
	}
	.newdesign-page .login-box {
		width: 600px;
	    color: #ecf0f1;
	    padding: 40px 140px;
	}
	.newdesign-page .newdesign-logo-header {
	    display: flex;
	    align-items: center;
	    margin-top: 100px;
	    margin-bottom: 60px;
	    width: 100%;
	}
	.newdesign-page .welcome-text {
	    font-size: 2em;
	    font-weight: bold;
	    margin-bottom: 24px;
	}
	.newdesign-page .logo-img {
	    height: 65px;
	}
    .newdesign-page .welcome-text {
       font-size: 30px;
       font-weight: bold;
       margin-bottom: 24px;
   }
   .newdesign-page .welcome-subtitle {
	    font-size: 18px;
	}
	.newdesign-page .copyright {
	    margin-top: 12px;
	    font-size: 10px;
	    opacity: 0.8;
	}
	.logo-img-rocket {
	    height: 240px;
	}
	.main-actions { grid-template-columns: repeat(2, 1fr)!important; }
}

@media ( min-width : 1921px) {
	.setting-area {
	    display: grid;
	    gap: 25px;
	    grid-template-columns: 1fr 1fr 1fr;
	}
	.newdesign-page .left-area {
		padding: 50px 88px;
		width: 800px;
	}
	.newdesign-page .login-box {
		width: 800px;
	    color: #ecf0f1;
	    padding: 40px 190px;
	}
	.newdesign-page .newdesign-logo-header {
	    display: flex;
	    align-items: center;
	    margin-top: 130px;
	    margin-bottom: 80px;
	    width: 100%;
	}
	.newdesign-page .welcome-text {
	    font-size: 3em;
	    font-weight: bold;
	    margin-bottom: 24px;
	}
	.newdesign-page .logo-img {
	    height: 80px;
	}
    .newdesign-page .welcome-text {
       font-size: 3em;
       font-weight: bold;
       margin-bottom: 24px;
   }
   .newdesign-page .welcome-subtitle {
	    font-size: 1.8em;
	}
	.newdesign-page .copyright {
	    margin-top: 12px;
	    font-size: 0.9em;
	    opacity: 0.8;
	}
	.logo-img-rocket {
	    height: 300px;
	}
	.main-actions{
		grid-template-columns: repeat(4, 1fr)!important;
	}
}
/* phoenix */
    .dark-mode .phoenix-container {
        /* background-color: #1f2937; */
        color: #f3f4f6;
    }
    .dark-mode .phoenix-page-header p {
        color: #9ca3af;
    }
    .dark-mode .select-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background-color: #1f2937;
        border-radius: 6px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        max-height: 250px;
        overflow-y: auto;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s;
        border: 1px solid #374151;
    }
    .dark-mode .select-option:hover {
        background-color: #374151;
    }


.new-design-active .container {
    /* background-color: var(--pb-bg-light); */
    height: calc(100vh - 70px);
}

.new-design-active .center-panel {
    background-color: var(--pb-bg-light);
    padding: 40px;
}
.dark-mode .new-design-active .center-panel {
    background-color: var(--pb-bg-dark);
}

.dark-mode .new-design-active #center-content-area {
    /* background-color: transparent; */
    box-shadow: none;
    background-color: var(--pb-bg-dark);
}
.new-design-active #center-content-area {
    background-color: var(--pb-bg-light);
    box-shadow: none;
    /* background-color: var(--pb-bg-dark); */
}

.new-design-active .right-panel {
    background-color: var(--sidebar-light);
    border-left: 1px solid var(--border-light);
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
}

.new-design-active .right-panel .panel-title {
    color: var(--text-light);
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.new-design-active .panel-header-top {
    background-color: var(--sidebar-light);
    border-bottom: 1px solid var(--border-light);
    height: 75px;
    padding: 0 40px;
}

.new-design-active .panel-header-top h3 {
    color: var(--text-light);
    font-size: 18px;
    font-weight: 700;
}

.new-design-active .child-template,
.new-design-active .child-template-layout {
    background: var(--pb-bg-light);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px 10px;
    color: var(--pb-text-muted-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin: 8px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.new-design-active .child-template:hover,
.new-design-active .child-template-layout:hover {
    background: var(--sidebar-light);
    border-color: var(--pb-accent-blue);
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(66, 182, 244, 0.1);
    color: var(--text-light);
}

.new-design-active .child-template .material-symbols-outlined,
.new-design-active .child-template .fa {
    font-size: 32px;
    margin-bottom: 12px;
    color: var(--pb-accent-blue);
    transition: all 0.3s ease;
}

.new-design-active .child-template:hover .fa,
.new-design-active .child-template:hover .material-symbols-outlined {
    transform: scale(1.15);
}

.new-design-active .element-label,
.new-design-active .element-label-layout {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

.new-design-active .default-child-grid-empty {
    border: 2px dashed rgba(66, 182, 244, 0.3);
    background-color: var(--sidebar-light);
    border-radius: 16px;
    color: var(--pb-text-muted-light);
    font-size: 12px;
    padding: 50px 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.new-design-active .default-child-grid-empty:hover {
    border-color: var(--pb-accent-blue);
    background-color: rgba(66, 182, 244, 0.05);
    color: var(--text-light);
}

.new-design-active .parent-container {
    border: 2px solid var(--pb-accent-blue);
    border-radius: 16px;
    background-color: rgba(66, 182, 244, 0.02);
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.new-design-active .right-buttons .btn-add:not(.dropdown-toggle) {
    background: var(--sidebar-light);
    border: 1px solid var(--border-light);
    color: var(--text-light);
    border-radius: 10px;
    padding: 10px 20px;
    margin-right: 12px;
}

.new-design-active .right-buttons .btn-add:not(.dropdown-toggle):hover {
    background: var(--pb-bg-light);
    border-color: #cbd5e1;
}

.new-design-active .btn-preview-dropdown .btn-add.dropdown-toggle {
    display: flex;
    background: linear-gradient(135deg, var(--pb-accent-blue) 0%, #2F68C5 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(47, 104, 197, 0.3);
}
.new-design-active .btn-preview-dropdown .btn-add.dropdown-toggle .material-symbols-outlined,
.new-design-active .btn-preview-dropdown .btn-add.dropdown-toggle .element-label {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.new-design-active .btn-preview-dropdown .btn-add.dropdown-toggle:hover .material-symbols-outlined,
.new-design-active .btn-preview-dropdown .btn-add.dropdown-toggle:hover .element-label {
    transform: scale(1.15);
}

.new-design-active .new-container-type {
    background: var(--sidebar-light);
    border: 1px solid var(--border-light);
    color: var(--pb-text-muted-light);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.new-design-active .new-container-type:hover {
    background: var(--pb-accent-blue);
    color: #fff;
    border-color: var(--pb-accent-blue);
}
.dark-mode .new-design-active .new-container-type:hover {
    background: var(--pb-accent-blue);
    color: #fff;
    border-color: var(--pb-accent-blue);
}
.new-design-active .control-container-area {
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(15px);
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -40px;
    padding-right: 15px;
}

.new-design-active div[data-container-id]:hover .control-container-area {
    opacity: 1;
    transform: translateY(45px);
}

.new-design-active .selected-element {
    outline: 3px solid var(--pb-accent-blue) !important;
    outline-offset: 2px;
    box-shadow: 0 0 25px rgba(66, 182, 244, 0.4);
    border-radius: inherit;
}


/* --- 2. DARK MODE OVERRIDES CHO PAGE BUILDER --- */
/* .dark-mode .new-design-active .container,
.dark-mode .new-design-active .center-panel {
    background-color: var(--pb-bg-dark);
} */

.dark-mode .new-design-active .right-panel,
.dark-mode .new-design-active .panel-header-top {
    background-color: var(--pb-panel-dark);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .new-design-active .right-panel {
    box-shadow: -15px 0 40px rgba(0,0,0,0.3);
}

.dark-mode .new-design-active .right-panel .panel-title,
.dark-mode .new-design-active .panel-header-top h3 {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .new-design-active .child-template,
.dark-mode .new-design-active .child-template-layout {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--pb-text-muted-dark);
}

.dark-mode .new-design-active .child-template:hover,
.dark-mode .new-design-active .child-template-layout:hover {
    background: rgba(66, 182, 244, 0.08);
    border-color: rgba(66, 182, 244, 0.6);
    color: #fff;
}

.dark-mode .new-design-active .default-child-grid-empty {
    border-color: rgba(66, 182, 244, 0.15);
    background-color: rgba(255, 255, 255, 0.01);
    color: rgba(255, 255, 255, 1);
}

.dark-mode .new-design-active .parent-container {
    border-color: rgba(66, 182, 244, 0.6);
    background-color: rgba(66, 182, 244, 0.04);
}

.dark-mode .new-design-active .right-buttons .btn-add:not(.dropdown-toggle) {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}
.dark-mode .new-design-active .right-buttons .btn-add:not(.dropdown-toggle):hover {
    background: rgba(66, 182, 244, 0.1);
    border-color: rgba(66, 182, 244, 0.6);
    color: #fff;
}
.dark-mode .new-design-active .right-buttons .btn-add:not(.dropdown-toggle) .material-symbols-outlined {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}
.dark-mode .new-design-active .right-buttons .btn-add:not(.dropdown-toggle):hover .material-symbols-outlined {
    transform: scale(1.15);
    color: #fff;
}
.new-design-active .right-buttons .btn-add:not(.dropdown-toggle) .material-symbols-outlined {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}
.new-design-active .right-buttons .btn-add:not(.dropdown-toggle):hover .material-symbols-outlined {
    transform: scale(1.15);
    color: var(--pb-accent-blue) !important;
}
.new-design-active .right-buttons .btn-add:not(.dropdown-toggle) .element-label {
    transition: color 0.3s ease;
}
.new-design-active .right-buttons .btn-add:not(.dropdown-toggle):hover .element-label {
    color: var(--pb-accent-blue) !important;
}
.dark-mode .new-design-active .right-buttons .btn-add:not(.dropdown-toggle) .element-label {
    transition: color 0.3s ease;
}
.dark-mode .new-design-active .right-buttons .btn-add:not(.dropdown-toggle):hover .element-label {
    color: #fff !important;
}
.dark-mode .new-design-active .new-container-type {
    background: var(--sidebar-dark);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--pb-accent-blue);
}

/* ==========================================
   TOP NAVIGATION PAGE BUILDER FIXES
   ========================================== */

.new-design-active .preview-modes-center {
    display: flex;
    align-items: center;
    gap: 15px;
}

.new-design-active .preview-mode-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--pb-text-muted-light);
    transition: all 0.3s ease;
}

.new-design-active .preview-mode-area .material-symbols-outlined {
    font-size: 24px;
    margin-bottom: 4px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}


.new-design-active .preview-mode-area:hover {
    color: var(--pb-accent-blue) !important;
    background: rgba(66, 182, 244, 0.05);
}

.new-design-active .preview-mode-area:hover .material-symbols-outlined {
    transform: scale(1.15);
}


.dark-mode .new-design-active .preview-mode-area {
    color: var(--pb-text-muted-dark);
}


.dark-mode .new-design-active .preview-mode-area:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05);
}

.dark-mode .new-design-active .preview-mode-area:hover .material-symbols-outlined {
    transform: scale(1.2);
    color: var(--pb-accent-blue) !important;
    text-shadow: 0 0 12px rgba(66, 182, 244, 0.6);
}

.new-design-active .right-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-design-active .right-buttons .btn-add {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-width: 90px;
    padding: 8px 16px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.new-design-active .top-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.new-design-active .top-menu-item .material-symbols-outlined {
    font-size: 22px;
    margin-bottom: 4px;
}

.new-design-active .top-menu-item .element-label {
    font-size: 11px !important;
    font-weight: 600;
    white-space: nowrap;
    margin-top: 0 !important;
}

.new-design-active .preview-button-content {
    position: relative;
    padding-right: 14px;
}

.new-design-active .preview-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

/* ==========================================
   new loading css
   ========================================== */

.new-design-active .rocket-loader-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);

    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);

    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.dark-mode .new-design-active .rocket-loader-overlay {
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.4) 0%, rgba(13, 27, 42, 0.1) 100%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.new-design-active .rocket-loader-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.new-design-active .loading-text {
    margin-top: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-light);
    animation: text-pulse 1.5s infinite;
}

.dark-mode .new-design-active .loading-text {
    color: #fff;
}


@keyframes rocket-shake {
    from { transform: rotate(-43deg) translate(0, 0); }
    to { transform: rotate(-47deg) translate(2px, 2px); }
}

@keyframes rocket-fire {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

@keyframes text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==========================================
   LANGUAGE SELECTOR - PAGE BUILDER ONLY
   ========================================== */

.new-design-active .language-page-builder {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-width: auto;
}


.new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--pb-text-muted-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle img.flag {
    margin: 0 0 4px 0 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.new-design-active .language-page-builder .header-dropdown-language-page span {
    font-size: 11px;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
}
.new-design-active .language-page-builder .language-arrow {
    position: absolute;
    right: -14px;
}

.new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle:hover {
    color: var(--pb-accent-blue) !important;
    background: rgba(66, 182, 244, 0.05);
}
.new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle:hover img.flag {
    transform: scale(1.15);
}

.dark-mode .new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle {
    color: var(--pb-text-muted-dark);
}
.dark-mode .new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05);
}
.dark-mode .new-design-active .language-page-builder .header-dropdown-language-page > li > a.dropdown-toggle:hover img.flag {
    transform: scale(1.2);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}



.new-design-active .language-page-builder .dropdown-menu {
    min-width: 140px;
    margin-top: 8px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
}

.new-design-active .language-page-builder .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.new-design-active .language-page-builder .dropdown-menu > li > a img.flag {
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
}

.new-design-active .language-page-builder .dropdown-menu > li > a:hover {
    background-color: var(--bg-light);
    color: var(--primary-cyan);
}

.dark-mode .new-design-active .language-page-builder .dropdown-menu {
    background-color: var(--pb-panel-dark);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.dark-mode .new-design-active .language-page-builder .dropdown-menu > li > a {
    color: var(--text-dark);
    background: transparent;
}

.dark-mode .new-design-active .language-page-builder .dropdown-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--pb-accent-blue);
}

/* ==========================================
   LANGUAGE SELECTOR - TOP NAV BAR ONLY
   ========================================== */

.new-design-active .top-nav-bar-language a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.new-design-active .top-nav-bar-language a.dropdown-toggle img.flag {
    margin: 0 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.new-design-active .top-nav-bar-language a.dropdown-toggle i.color-white {
    color: inherit !important;
}

.new-design-active .top-nav-bar-language a.dropdown-toggle:hover {
    background-color: var(--bg-light);
    color: var(--primary-cyan);
}
.new-design-active .top-nav-bar-language a.dropdown-toggle:hover img.flag {
    transform: scale(1.15);
}

.dark-mode .new-design-active .top-nav-bar-language a.dropdown-toggle {
    color: var(--text-dark);
}
.dark-mode .new-design-active .top-nav-bar-language a.dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.dark-mode .new-design-active .top-nav-bar-language a.dropdown-toggle:hover img.flag {
    transform: scale(1.2);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}


.new-design-active .top-nav-bar-language .dropdown-menu {
    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 6px;
}

.new-design-active .top-nav-bar-language .dropdown-menu div.padding-5 > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.new-design-active .top-nav-bar-language .dropdown-menu div.padding-5 > a img.flag {
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
}

.new-design-active .top-nav-bar-language .dropdown-menu div.padding-5 > a:hover {
    background-color: var(--bg-light);
    color: var(--primary-cyan);
}

.dark-mode .new-design-active .top-nav-bar-language .dropdown-menu {
    background-color: var(--pb-panel-dark);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.dark-mode .new-design-active .top-nav-bar-language .dropdown-menu div.padding-5 > a {
    color: var(--text-dark);
}

.dark-mode .new-design-active .top-nav-bar-language .dropdown-menu div.padding-5 > a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--pb-accent-blue);
}

/* ==========================================
   LANGUAGE SELECTOR - MANAGER HEADER ONLY
   ========================================== */

.new-design-active .manager-header-language .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-light);
    transition: all 0.3s ease;
    cursor: pointer;
}

.new-design-active .manager-header-language .dropdown-toggle img.flag {
    margin: 0 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.new-design-active .manager-header-language .dropdown-toggle:hover {
    background-color: var(--bg-light);
    color: var(--primary-cyan);
}
.new-design-active .manager-header-language .dropdown-toggle:hover img.flag {
    transform: scale(1.15);
}

.dark-mode .new-design-active .manager-header-language .dropdown-toggle {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-dark);
}
.dark-mode .new-design-active .manager-header-language .dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.dark-mode .new-design-active .manager-header-language .dropdown-toggle:hover img.flag {
    transform: scale(1.2);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}


.new-design-active .manager-header-language .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 160px;
    margin-top: 10px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
}

.new-design-active .manager-header-language .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.new-design-active .manager-header-language .dropdown-menu > li > a img.flag {
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
}

.new-design-active .manager-header-language .dropdown-menu > li > a:hover {
    background-color: var(--bg-light);
    color: var(--primary-cyan);
}

.dark-mode .new-design-active .manager-header-language .dropdown-menu {
    background-color: var(--pb-panel-dark);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.dark-mode .new-design-active .manager-header-language .dropdown-menu > li > a {
    color: var(--text-dark);
    background: transparent;
}

.dark-mode .new-design-active .manager-header-language .dropdown-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--pb-accent-blue);
}

/* ==========================================
   TABLET FRAME PREVIEW
   ========================================== */

/* --- 1. LIGHT MODE (Base) --- */
.new-design-active .tablet-frame {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border: 3px solid #dee2e6;
    border-radius: 25px;
    padding: 30px 25px;
    box-shadow:
        0 0 0 2px #adb5bd,
        0 12px 40px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.8);
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.new-design-active .tablet-frame::before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.1),
        0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.new-design-active .tablet-frame .speaker {
    position: absolute;
    background: #6c757d;
    border-radius: 2px;
    left: auto;
    display: none;
    transition: background 0.3s ease;
}

.new-design-active .tablet-frame .speaker-left {
    width: 80px;
    height: 4px;
    top: 25px;
    left: 25px;
}
.new-design-active .tablet-frame .speaker-right {
    width: 80px;
    height: 4px;
    top: 25px;
    right: 25px;
}

.new-design-active .tablet-frame #center-content-area {
    aspect-ratio: 3 / 2;
}


/* --- 2. DARK MODE OVERRIDES (Space Gray Tablet) --- */
.dark-mode .new-design-active .tablet-frame {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-color: #334155;
    box-shadow:
        0 0 0 2px #020617,
        0 12px 40px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.dark-mode .new-design-active .tablet-frame::before {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-color: #334155;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.3);
}


.dark-mode .new-design-active .tablet-frame .speaker {
    background: #334155;
}

.new-design-active .container-item {
    border: 1px dotted;
    cursor: move;
    padding: 5px;
    margin-bottom: -1px;
    display: flex;
    border-color: var(--pb-accent-blue);
    align-items: center;
    margin: 3px;
}


/* ==========================================
   SORT CONTAINER DIALOG
   ========================================== */

/* --- 1. (Header Actions) --- */
.new-design-active .sort-container-dialog .sort-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(66, 182, 244, 0.05); /* Nền xanh nhạt */
    border: 1px dashed var(--pb-accent-blue);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    gap: 15px;
}

.new-design-active .sort-container-dialog .sort-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pb-accent-blue);
}

.new-design-active .sort-container-dialog .sort-hint h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-light);
}

.new-design-active .sort-container-dialog .sortable-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.new-design-active .sort-container-dialog .sortable-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--sidebar-light);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.new-design-active .sort-container-dialog .sortable-item:hover {
    border-color: var(--pb-accent-blue);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.new-design-active .sort-container-dialog .item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-design-active .sort-container-dialog .drag-handle {
    color: #9ca3af;
    cursor: grab;
    font-size: 20px;
    transition: color 0.2s;
}

.new-design-active .sort-container-dialog .sortable-item:hover .drag-handle {
    color: var(--pb-accent-blue);
}

.new-design-active .sort-container-dialog .sortable-item:active .drag-handle {
    cursor: grabbing;
}

.new-design-active .sort-container-dialog .item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.new-design-active .sort-container-dialog .item-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-design-active .sort-container-dialog .btn-delete-item {
    padding: 6px 10px !important;
}



.dark-mode.new-design-active .sort-container-dialog .sort-header-actions {
    background: rgba(66, 182, 244, 0.02) !important;
    border-color: rgba(66, 182, 244, 0.3) !important;
}

.dark-mode.new-design-active .sort-container-dialog .sort-hint h4 {
    color: var(--text-dark) !important;
}

.dark-mode.new-design-active .sort-container-dialog .sortable-item {
    background-color: var(--pb-panel-dark) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode.new-design-active .sort-container-dialog .sortable-item:hover {
    border-color: rgba(66, 182, 244, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode.new-design-active .sort-container-dialog .item-name {
    color: #ffffff !important;
}

.dark-mode.new-design-active .sort-container-dialog .drag-handle {
    color: #4b5563 !important;
}
.new-design-active .panel-content-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0px;
}
.new-design-active .tab-btn{
	background-color: rgb(106 106 106 / 20%);
    border-radius: 0px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    padding: 7px 15px;
    margin-bottom: -1px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
.new-design-active .tab-btn.active {
	background-color: rgb(66 182 244 / 25%);
    color: var(--pb-accent-blue);
    border-bottom: 1px solid var(--pb-accent-blue) !important;
    border-radius: 0px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    padding: 7px 15px;
    margin-bottom: -1px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.new-design-active .panel-content {
    border-bottom: 3px solid var(--border-light);
    padding-top: 12px;
    margin-bottom: 10px;
}


.dark-mode .new-design-active .tab-btn.active {
    background-color: rgba(66, 182, 244, 0.15);
    color: #ffffff; /* Chữ trắng rực sáng */
    border-bottom: 2px solid var(--pb-accent-blue);
    text-shadow: 0 0 8px rgba(66, 182, 244, 0.4);
}

.dark-mode .new-design-active .panel-content {
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}

.dark-mode.new-design-active .file-box {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    height: 120px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-bottom: 15px;
}

.dark-mode.new-design-active .file-box:hover {
    border-color: rgba(66, 182, 244, 0.5);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}


.dark-mode.new-design-active .inside-file-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: transparent !important;

    cursor: grab;

    font-weight: 500;
    font-size: 13px;
    color: var(--pb-text-muted-dark, #9ca3af);
    transition: color 0.3s ease;
}

.dark-mode.new-design-active .inside-file-box:active {
    cursor: grabbing;
}

.dark-mode.new-design-active .file-box:hover .inside-file-box {
    color: #ffffff;
}

.new-design-active .panel-content-menu {
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 20px;
    gap: 15px;
}

.new-design-active .gallery-detail-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.new-design-active .gallery-folder {
    flex: 0 0 240px;
    background: rgba(66, 182, 244, 0.02);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px;
    height: 400px;
    overflow-y: auto;
}

.new-design-active .gallery-folder .folder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.new-design-active .gallery-folder .folder-item:hover {
    background: rgba(66, 182, 244, 0.1);
}

.new-design-active .gallery-folder .folder-icon {
    font-size: 18px;
}

.new-design-active .gallery-folder .folder-name {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
    font-weight: 500;
}

.new-design-active .gallery-main {
    flex: 1;
}

.new-design-active .custom-search-bar-gallery {
    display: flex;
    gap: 10px;
    padding-bottom: 20px !important;
}

.new-design-active .input-insearch-gallery {
    flex: 1;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: none;
    padding: 8px 15px;
}

.new-design-active .gallery-20-percent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
}

.new-design-active .gallery-20-percent > div {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.new-design-active .gallery-20-percent > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--pb-accent-blue);
}

.new-design-active .gallery_img_in_dialog {
    width: 100%;
    height: 110px;
	padding: 4px;
    object-fit: cover;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-light);
}

.new-design-active .gallery-img-name {
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--text-light);
}

.new-design-active .upload-gallery-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.new-design-active .gallery-upload-area {
    flex: 2;
}

.new-design-active .upoload-folder-area {
    flex: 1;
    background: rgba(66, 182, 244, 0.02);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
}

/* Hộp Kéo thả (Dropzone) */
.new-design-active .gallery-drop-box {
    border: 2px dashed var(--pb-accent-blue);
    border-radius: 12px;
    background: rgba(66, 182, 244, 0.03);
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    transition: all 0.3s;
}

.new-design-active .gallery-drop-box:hover,
.new-design-active .gallery-drop-box.dragover {
    background: rgba(66, 182, 244, 0.1);
    transform: scale(1.02);
}

.new-design-active .gallery-drop-box .btn {
    background: var(--pb-accent-blue);
    color: #fff;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 600;
}



.dark-mode.new-design-active .panel-content-menu {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode.new-design-active .gallery-folder,
.dark-mode.new-design-active .upoload-folder-area {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode.new-design-active .gallery-folder .folder-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode.new-design-active .gallery-folder .folder-name {
    color: var(--text-dark) !important;
}

.dark-mode.new-design-active .input-insearch-gallery {
    background: var(--pb-panel-dark) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.dark-mode.new-design-active .gallery-20-percent > div {
    background: var(--pb-panel-dark) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode.new-design-active .gallery-20-percent > div:hover {
    border-color: rgba(66, 182, 244, 0.6) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}

.dark-mode.new-design-active .gallery_img_in_dialog {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode.new-design-active .gallery-img-name {
    color: var(--text-dark) !important;
}

.dark-mode.new-design-active .gallery-drop-box {
    background: rgba(255, 255, 255, 0.02) !important;
}

.dark-mode.new-design-active .gallery-drop-box:hover,
.dark-mode.new-design-active .gallery-drop-box.dragover {
    background: rgba(66, 182, 244, 0.1) !important;
}

.dark-mode.new-design-active .gallery-drop-box span {
    color: var(--text-dark) !important;
}

.new-design-active .undo-area,
.new-design-active .undo-container-area {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 15px;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
}

.new-design-active .undo-button,
.new-design-active .redo-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.new-design-active .undo-button .material-symbols-outlined,
.new-design-active .redo-button .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-light);
    transition: color 0.2s ease;
}

.new-design-active .undo-button .element-label,
.new-design-active .redo-button .element-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    margin-top: 2px;
    transition: color 0.2s ease;
}


.new-design-active .undo-button:hover,
.new-design-active .redo-button:hover {
    background-color: rgba(66, 182, 244, 0.08);
    transform: translateY(-2px);
}

.new-design-active .undo-button:hover .material-symbols-outlined,
.new-design-active .redo-button:hover .material-symbols-outlined,
.new-design-active .undo-button:hover .element-label,
.new-design-active .redo-button:hover .element-label {
    color: var(--pb-accent-blue);
}



.dark-mode.new-design-active .undo-area,
.dark-mode.new-design-active .undo-container-area {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode.new-design-active .undo-button .material-symbols-outlined,
.dark-mode.new-design-active .redo-button .material-symbols-outlined,
.dark-mode.new-design-active .undo-button .element-label,
.dark-mode.new-design-active .redo-button .element-label {
    color: var(--pb-text-muted-dark, #9ca3af) !important;
}

.dark-mode.new-design-active .undo-button:hover,
.dark-mode.new-design-active .redo-button:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode.new-design-active .undo-button:hover .material-symbols-outlined,
.dark-mode.new-design-active .redo-button:hover .material-symbols-outlined,
.dark-mode.new-design-active .undo-button:hover .element-label,
.dark-mode.new-design-active .redo-button:hover .element-label {
    color: #ffffff !important;
}


.dark-mode.new-design-active .ngdialog .ngdialog-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%), radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%), linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
    max-width: 1400px !important;
    border-radius: 9px;
}

.dark-mode.new-design-active .ngdialog .ngdialog-content::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image: url(../images/noise-512.png);
    background-repeat: repeat;
    background-size: auto;
}
.new-design-active .ngdialog .ngdialog-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    background:
        radial-gradient(1200px 700px at 25% 20%, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.4) 60%),
        radial-gradient(900px 600px at 60% 55%, rgba(210, 235, 255, 0.3), rgba(255, 255, 255, 0) 65%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #e2e8f0 100%);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    max-width: 1400px !important;
    border-radius: 9px;
}

.new-design-active .ngdialog .ngdialog-content::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
    background-image: url(../images/noise_light.jpg);
    background-repeat: repeat;
    background-size: auto;
}

/* ng-dialog deleted */
/* Dark theme for ngDialog */
.ngdialog.ngdialog-theme-dark .ngdialog-content {
    background: #2c3e50;
    color: #ecf0f1;
    border-radius: 10px;
}

.ngdialog.ngdialog-theme-dark .ngdialog-close:before {
    color: #ecf0f1;
}

.ngdialog.ngdialog-theme-dark .ngdialog-close:hover:before,
.ngdialog.ngdialog-theme-dark .ngdialog-close:active:before {
    color: #bdc3c7;
}

.ngdialog.ngdialog-theme-dark .ngdialog-input textarea,
.ngdialog.ngdialog-theme-dark .ngdialog-input input[type="text"],
.ngdialog.ngdialog-theme-dark .ngdialog-input input[type="password"],
.ngdialog.ngdialog-theme-dark .ngdialog-input input[type="email"],
.ngdialog.ngdialog-theme-dark .ngdialog-input input[type="url"] {
    background: #34495e;
    border: 1px solid #34495e;
    color: #ecf0f1;
}

.ngdialog.ngdialog-theme-dark .ngdialog-button {
    border: 0;
    border-radius: 5px;
    font-weight: bold;
}

.ngdialog.ngdialog-theme-dark .ngdialog-button.ngdialog-button-primary {
    background: #3498db;
    color: #fff;
}

.ngdialog.ngdialog-theme-dark .ngdialog-button.ngdialog-button-secondary {
    background: #95a5a6;
    color: #fff;
}

/* Custom styles for elements inside the dark-themed ngDialog (forgotpassword.html) */
.ngdialog.ngdialog-theme-custom.customDialog2{
	z-index : 10050;
}
.ngdialog.ngdialog-theme-dark.customDialog .ibox-title {
    background-color: #2c3e50; /* Match dialog background */
    color: #ecf0f1; /* Light text color */
    border-bottom: 1px solid #34495e; /* Subtle border */
}

.ngdialog.ngdialog-theme-dark.customDialog .ibox-content {
    background-color: #2c3e50; /* Match dialog background */
    color: #ecf0f1; /* Light text color */
}

.ngdialog.ngdialog-theme-dark.customDialog .form-control {
    background-color: #34495e; /* Slightly lighter dark color for inputs */
    color: #ecf0f1; /* Light text color */
    border: 1px solid #34495e; /* Border to match background */
}

.ngdialog.ngdialog-theme-dark.customDialog .btn {
    border: 0;
    border-radius: 5px;
    font-weight: bold;
}

.ngdialog.ngdialog-theme-dark.customDialog .btn-primary {
    background: #3498db;
    color: #fff;
}

.ngdialog.ngdialog-theme-dark.customDialog .btn:not(.btn-primary) { /* For 'Abbrechen' button */
    background: #95a5a6;
    color: #fff;
}

/* Also ensure label colors are correct */
.ngdialog.ngdialog-theme-dark.customDialog .control-label {
    color: #ecf0f1; /* Light text color for labels */
}

/* For the select element specifically */
.ngdialog.ngdialog-theme-dark.customDialog select.form-control {
    background-color: #34495e; /* Slightly lighter dark color for inputs */
    color: #ecf0f1; /* Light text color */
    border: 1px solid #34495e; /* Border to match background */
}

/* Placeholder styles for inputs */
.ngdialog.ngdialog-theme-dark.customDialog .form-control::placeholder {
    color: #95a5a6;
    opacity: 1;
}
.ngdialog.ngdialog-theme-dark.customDialog .form-control:-ms-input-placeholder {
    color: #95a5a6;
}
.ngdialog.ngdialog-theme-dark.customDialog .form-control::-ms-input-placeholder {
    color: #95a5a6;
}

.dark-mode .ngdialog.ngdialog-theme-default .ngdialog-content {
	border-radius: 9px;
	max-width: 1400px!important;
    background: #f0f0f0;
    color: #444;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    position: relative;
    width: 450px;
    color: rgba(255, 255, 255, .92);
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%), radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%), linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
}
.dark-mode .ngdialog.ngdialog-theme-default.opacity-dialog .ngdialog-content {
	display: flex !important;
    justify-content: center;
    background: #f0f8ff00 !important;
	max-width: fit-content !important;
    -webkit-animation: ngdialog-flyin .5s;
    animation: ngdialog-flyin .5s;
    background: #f0f0f0;
    border-radius: 9px;
    color: #444;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    position: relative;
    width: 450px;
    display: flex;
    color: rgba(255, 255, 255, .92);
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%), radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%), linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
}
.dark-mode .ngdialog.ngdialog-theme-default.opacity-dialog .ngdialog-close{
	display: none;
}
.dark-mode .ngdialog.ngdialog-theme-default.app-setting .ngdialog-content {
	max-width: 1400px!important;
    -webkit-animation: ngdialog-flyin .5s;
    animation: ngdialog-flyin .5s;
    background: #f0f0f0;
    border-radius: 9px;
    color: #444;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    position: relative;
    width: 450px;
    display: flex;
    color: rgba(255, 255, 255, .92);
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%), radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%), linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
}
.dark-mode .ngdialog.ngdialog-theme-mobile .ngdialog-content {
    animation: ngdialog-flyin .5s;
    background: #f0f0f0;
    border-radius: 5px;
    color: #444;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    position: relative;
    width: auto !important;
    display: flex;
    color: rgba(255, 255, 255, .92);
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%), radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%), linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
}
.dark-mode .ngdialog.ngdialog-theme-new-design .ngdialog-content {
    animation: ngdialog-flyin .5s;
    background: #f0f0f0;
    border-radius: 5px;
    color: #444;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    position: relative;
    width: auto !important;
    color: rgba(255, 255, 255, .92);
    max-width: 1400px;
    background: radial-gradient(1200px 700px at 25% 20%, rgba(80, 120, 190, .35), rgba(10, 16, 28, .0) 60%), radial-gradient(900px 600px at 60% 55%, rgba(70, 110, 170, .25), rgba(10, 16, 28, .0) 65%), linear-gradient(135deg, #0b1220 0%, #070b14 55%, #05070f 100%);
}
.dark-mode .ngdialog.ngdialog-theme-default .ngdialog-close:before {
    background: transparent;
    color: #ec4758;
    content: '\00D7';
    font-size: 26px;
    font-weight: 700;
    height: 30px;
    line-height: 29px;
    position: absolute;
    right: 11px;
    text-align: center;
    top: 11px;
    width: 30px;
    border-radius: 50%;
    /* background: #ec4758; */
    border: 1px solid #363d4d;
}
.ngdialog-content .big-box {
    align-items: center;
    border-radius: 5px;
    /* padding: 5px 24px; */
    background: rgb(61 74 98 / 13%);
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 36%);
}
.ngdialog-content .content-box {
    padding: 24px;
    border: 1px solid #ffffff24;
    margin: 24px;
    border-radius: 10px;
    margin :24px;
    background: #0f14228a;
}
.ngdialog-content .general-app{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    max-height: calc(100vh - 380px);
    overflow: hidden;
}
.ngdialog-content .general-app-content {
    max-height: calc(100vh - 380px);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #ffffff0f;
}
.dark-mode .ngdialog.ngdialog-theme-default .ngdialog-content::before {
	content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image: url(../images/noise-512.png);
    background-repeat: repeat;
    background-size: auto;
}
.dark-mode.new-design-active .phoenix-table th {
    background-color: #1a2035!important;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.dark-mode.new-design-active .phoenix-table-container {
    background-color: #1a2035!important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}
.dark-mode.new-design-active .phoenix-table th, .phoenix-table td {
   padding: 12px 15px;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 210, 240, 0.5);
    white-space: nowrap;
}


.new-design-active .ibox-title {
    background-color: transparent !important;
    /* border: 1px solid var(--border-light) !important; */
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 20px 24px 15px 24px !important;
    margin: 20px 0 0 0 !important;
    color: var(--text-light) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02) !important;
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

.new-design-active .ibox-content {
    background-color: transparent !important;
    border: 1px solid var(--border-light) !important;
    /* border-top: none !important;  */
    border-radius: 12px !important;
    padding: 24px !important;
    color: var(--text-light) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    margin: 10px!important;
}

.new-design-active .ibox-content table tr th,
.new-design-active .ibox-content table tr td {
    border-color: var(--border-light) !important;
}



.dark-mode.new-design-active .ibox-title {
    background-color: transparent !important;
    /* border: 1px solid rgba(255, 255, 255, 0.08) !important; */
    border-bottom: none !important;
    color: var(--text-dark) !important;
    box-shadow: none !important;
}

.dark-mode.new-design-active .ibox-content {
    /* background-color: rgba(20, 28, 44, 0.55) !important; */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* border-top: none !important; */
    color: var(--text-dark) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    margin: 10px!important;
}

.dark-mode.new-design-active .ibox-content table tr th,
.dark-mode.new-design-active .ibox-content table tr td {
    border-color: rgba(255, 255, 255, 0.05) !important;
}


body.dark-mode.new-design-active .sweet-overlay {
    background-color: rgba(10, 16, 28, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
body.dark-mode.new-design-active .sweet-alert {
    background: linear-gradient(145deg, #1a2235, #0f1522) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
    border-radius: 16px !important;
}

body.dark-mode.new-design-active .sweet-alert h2 {
    color: #ffffff !important;
}

body.dark-mode.new-design-active .sweet-alert p {
    color: #94a3b8 !important;
}

body.dark-mode.new-design-active .sweet-alert button {
    background: linear-gradient(135deg, #2F68C5 0%, #183462 100%) !important;
    border-radius: 8px !important;
    padding: 10px 32px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(47, 104, 197, 0.3) !important;
    transition: all 0.3s ease !important;
}

body.dark-mode.new-design-active .sweet-alert button:hover {
    background: linear-gradient(135deg, #42B6F4 0%, #2F68C5 100%) !important;
    transform: translateY(-2px) !important;
}


body.new-design-active .sweet-overlay {
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

body.new-design-active .sweet-alert {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
}

body.new-design-active .sweet-alert h2 {
    color: var(--text-light) !important;
}

body.new-design-active .sweet-alert p {
    color: var(--pb-text-muted-light) !important;
}

body.new-design-active .sweet-alert button {
    background: linear-gradient(135deg, #42B6F4 0%, #2F68C5 100%) !important;
    border-radius: 8px !important;
    padding: 10px 32px !important;
    box-shadow: 0 4px 12px rgba(66, 182, 244, 0.2) !important;
}

body.new-design-active #toast-container .toast {
    opacity: 1 !important;
    border-radius: 12px !important;
    padding: 16px 20px 16px 54px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    background-position: 15px center !important;
    background-size: 24px !important;
    font-weight: 500 !important;
    overflow: hidden !important;
}

body.new-design-active #toast-container .toast-progress {
    background-color: rgba(255, 255, 255, 0.4) !important;
    bottom: 0 !important;
    height: 4px !important;
}

body.new-design-active #toast-container .toast-close-button {
    top: -4px !important;
    right: -4px !important;
    opacity: 0.6 !important;
    color: #ffffff !important;
}


body.new-design-active #toast-container .toast-success { background-color: #10b981 !important; color: #ffffff !important; }
body.new-design-active #toast-container .toast-error { background-color: #ff6b6b !important; color: #ffffff !important; }
body.new-design-active #toast-container .toast-info { background-color: #42B6F4 !important; color: #ffffff !important; }
body.new-design-active #toast-container .toast-warning { background-color: #FFA726 !important; color: #ffffff !important; }


body.dark-mode.new-design-active #toast-container .toast {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode.new-design-active #toast-container .toast-success {
    background-color: rgba(16, 185, 129, 0.25) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
}

body.dark-mode.new-design-active #toast-container .toast-error {
    background-color: rgba(255, 107, 107, 0.25) !important;
    border: 1px solid rgba(255, 107, 107, 0.5) !important;
}

body.dark-mode.new-design-active #toast-container .toast-info {
    background-color: rgba(66, 182, 244, 0.25) !important;
    border: 1px solid rgba(66, 182, 244, 0.5) !important;
}

body.dark-mode.new-design-active #toast-container .toast-warning {
    background-color: rgba(255, 167, 38, 0.25) !important;
    border: 1px solid rgba(255, 167, 38, 0.5) !important;
}
/* form builder dark mode */
body.dark-mode.new-design-active .form-part-list {
    border-radius: 10px !important;
}

body.dark-mode.new-design-active .title-form {
    background-color: var(--bg-dark) !important;
    border-radius: 5px 5px 0 0 !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
}
body.new-design-active .title-form {
    background: var(--bg-light);
    padding: 12px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
}

.new-design-active .switch {
    position: relative !important;
    display: inline-block !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.new-design-active .switch small {
    position: absolute !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    content: "" !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.new-design-active .switch input[type="checkbox"] {
    display: none !important;
}

.new-design-active .switch {
    width: 52px !important;
    height: 30px !important;
}
.new-design-active .switch small {
    width: 24px !important;
    height: 24px !important;
    top: 2px !important;
    left: 2px !important;
}
.new-design-active .switch.checked small {
    transform: translateX(22px) !important;
}

.new-design-active .switch.small-swich {
    width: 40px !important;
    height: 22px !important;
}
.new-design-active .switch.small-swich small {
    width: 16px !important;
    height: 16px !important;
    top: 2px !important;
    left: 2px !important;
}
.new-design-active .switch.small-swich.checked small {
    transform: translateX(18px) !important;
}


body.new-design-active .switch {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
}
body.new-design-active .switch small {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
body.new-design-active .switch.checked {
    background: linear-gradient(135deg, #42B6F4 0%, #2F68C5 100%) !important;
    border-color: transparent !important;
}
body.new-design-active .switch.checked small {
    background-color: #ffffff !important;
}

body.dark-mode.new-design-active .switch {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode.new-design-active .switch small {
    background-color: #94a3b8 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode.new-design-active .switch.checked {
    background: rgba(66, 182, 244, 0.2) !important;
    border: 1px solid rgba(66, 182, 244, 0.6) !important;
    box-shadow: inset 0 0 10px rgba(66, 182, 244, 0.2) !important;
}
body.dark-mode.new-design-active .switch.checked small {
    background-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(66, 182, 244, 0.8), inset 0 0 4px rgba(66, 182, 244, 0.5) !important;
}
body.dark-mode.new-design-active .form-answer-area {
    background: rgba(26, 32, 53, 0.4) !important;

    backdrop-filter: blur(16px) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;

    padding: 20px !important;
    margin-top: 15px !important;
    color: #ffffff !important;
}

body.dark-mode.new-design-active .drop-box-small{
	background: #1520348c;
    border: 2px dashed rgb(66 182 244 / 20%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode.new-design-active .answer-area {
    background: var(--bg-dark);
    border: 1px solid var(--primary-cyan-dark) !important;
    border-radius: 8px !important;

    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding: 12px 15px !important;

    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}
body.dark-mode.new-design-active .border-table {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 14px rgba(0, 160, 200, 0.35);
}
body.dark-mode.new-design-active .phoenix-stat-card {
    background-color : var(--pb-bg-dark);
}
body.dark-mode.new-design-active .phoenix-form-control {
    border: 1px solid rgba(0, 210, 240, 0.5);
}
body.dark-mode.new-design-active .select-trigger {
    border: 1px solid rgba(0, 210, 240, 0.5)
}
body.dark-mode.new-design-active .jstree-default .jstree-hovered {
    background: var(--pb-accent-blue);
}
body.dark-mode.new-design-active a:focus {
    border: none !important;
    outline: none !important;
}
body.new-design-active a:focus {
    border: none !important;
    outline: none !important;
}
body.new-design-active .geofence-item {
    border: 1px dotted var(--primary-cyan);
    cursor: move;
    padding: 5px !important;
    display: flex;
}


body.new-design-active .geofence-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    padding: 12px 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;

    display: flex !important;
    align-items: center !important;
}

body.new-design-active .geofence-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

body.new-design-active [ui-sortable] .geofence-item {
    cursor: grab !important;
}
body.new-design-active [ui-sortable] .geofence-item:active {
    cursor: grabbing !important;
}

body.new-design-active .geofence-item .btn-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
}
body.new-design-active .geofence-item .btn-danger:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}



body.dark-mode.new-design-active .geofence-item {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

body.dark-mode.new-design-active .geofence-item:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(66, 182, 244, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode.new-design-active .geofence-item .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}
body.dark-mode.new-design-active .geofence-item .btn-danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.4) !important;
}


.new-design-active .station.ui-sortable-helper {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #42B6F4 !important;
    border-radius: 8px !important;
    cursor: grabbing !important;
    z-index: 99999 !important;
}

.new-design-active .station.ui-sortable-helper .group-answer {
    background: transparent !important;
}

.new-design-active .ui-sortable-placeholder {
    background: rgba(66, 182, 244, 0.05) !important;
    border: 2px dashed rgba(66, 182, 244, 0.4) !important;
    border-radius: 8px !important;
    visibility: visible !important;
    margin-bottom: 8px !important;
}


body.dark-mode.new-design-active .station.ui-sortable-helper {
    background: rgba(26, 32, 53, 0.95) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(66, 182, 244, 0.6) !important;
}

body.dark-mode.new-design-active .station.ui-sortable-helper .group-answer {
    background: transparent !important;
    color: #ffffff !important;
}

body.dark-mode.new-design-active .ui-sortable-placeholder {
    background: rgba(66, 182, 244, 0.1) !important;
    border: 2px dashed rgba(66, 182, 244, 0.5) !important;
}
body.dark-mode.new-design-active .question-area {
    border: none !important;
}
body.new-design-active .question-area {
    border: none !important;
}
body.dark-mode.new-design-active .item-question,
body.dark-mode.new-design-active .item-question-marked {
    border-radius: 10px !important;
}




body.dark-mode.new-design-active .ibox-content {
    background: transparent !important;
    border: none !important;
}

body.dark-mode.new-design-active #question-area {
    padding: 15px !important;
    background: rgba(20, 28, 44, 0.4) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
}

body.dark-mode.new-design-active .item-question[style*="background-color"],
body.dark-mode.new-design-active .form-question-detail[style*="background-color"] {
    background-color: transparent !important;
    background: transparent !important;
}
body.dark-mode.new-design-active [id="defaultStyleBlupassion"] {
    color: #e2e8f0 !important;
}

body.dark-mode.new-design-active .item-question {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

body.dark-mode.new-design-active .item-question:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(66, 182, 244, 0.4) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}




body.dark-mode.new-design-active .update-element-item,
body.dark-mode.new-design-active .remove-element-item-left {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 5px !important;
}

body.dark-mode.new-design-active .update-element-item {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}
body.dark-mode.new-design-active .update-element-item:hover {
    background: #10b981 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3) !important;
}

body.dark-mode.new-design-active .remove-element-item-left {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}
body.dark-mode.new-design-active .remove-element-item-left:hover {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode.new-design-active .form-question-detail {
    background: rgba(15, 23, 42, 0.3) !important;
    padding: 20px !important;
}

body.dark-mode.new-design-active .form-question-detail input.form-control,
body.dark-mode.new-design-active .form-question-detail select.form-control,
body.dark-mode.new-design-active .form-question-detail textarea.form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
}
body.dark-mode.new-design-active .form-question-detail input.form-control:focus,
body.dark-mode.new-design-active .form-question-detail select.form-control:focus {
    border-color: #42B6F4 !important;
    box-shadow: 0 0 0 3px rgba(66, 182, 244, 0.2) !important;
}

body.dark-mode.new-design-active .sort-button-area {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}
body.dark-mode.new-design-active .button-on-top-container-right {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 8px 15px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode.new-design-active .button-on-top-container-right label {
    margin: 0 10px 0 0 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}
body.dark-mode.new-design-active .button-on-top-container-right i {
    color: #000000 !important;
    font-size: 16px !important;
    padding: 5px !important;
    transition: 0.2s !important;
}
body.dark-mode.new-design-active .button-on-top-container-right i:hover {
    color: #fff !important;
    transform: scale(1.1) !important;
}


body.dark-mode.new-design-active section.border-table {
    display: block !important;
    background: rgba(20, 28, 44, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    backdrop-filter: blur(10px) !important;
}

body.dark-mode.new-design-active .ibox-title-element {
    color: #42B6F4 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 16px !important;
    margin: 0 0 20px 0 !important;
}
body.dark-mode.new-design-active .ibox-title-element i {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
body.dark-mode.new-design-active .ibox-title-element:hover i {
    background: #42B6F4 !important;
    color: #fff !important;
}

body.dark-mode.new-design-active .sort-button-area {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode.new-design-active .button-on-top-container-right {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    position: relative !important;
}

body.dark-mode.new-design-active .button-on-top-container-right:hover {
    background: rgba(66, 182, 244, 0.15) !important;
    border-color: rgba(66, 182, 244, 0.4) !important;
    transform: translateY(-2px) !important;
}

body.dark-mode.new-design-active .button-on-top-container-right label {
    margin: 0 10px 0 0 !important;
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    pointer-events: none !important;
}

body.dark-mode.new-design-active .button-on-top-container-right i::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

body.dark-mode.new-design-active .container-element {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 15px !important;
    color: #e2e8f0 !important;
}

body.dark-mode.new-design-active .container-element audio,
body.dark-mode.new-design-active .container-element img {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}


/* ============================================================
   FORM BUILDER - LIGHT MODE
   ============================================================ */

body.new-design-active #question-area,
body.new-design-active section.border-table {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: blur(10px) !important;
    display: block !important;
}

body.new-design-active .item-question[style*="background-color"],
body.new-design-active .form-question-detail[style*="background-color"] {
    background-color: transparent !important;
    background: transparent !important;
}

body.new-design-active [id="defaultStyleBlupassion"],
body.new-design-active .container-element {
    color: #334155 !important;
    background: transparent !important;
    border: none !important;
}

body.new-design-active .item-question {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(51, 65, 85, 0.02) !important;
}

body.new-design-active .item-question:hover {
    background: #f8fafc !important;
    border-color: #bae6fd !important;
    box-shadow: 0 8px 25px rgba(51, 65, 85, 0.08) !important;
    transform: translateY(-2px) !important;
}

body.new-design-active .item-question-marked {
    overflow: hidden !important;
    display: block !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    background: rgba(66, 182, 244, 0.05) !important;
    border: 1px solid #42B6F4 !important;
    box-shadow: 0 0 15px rgba(66, 182, 244, 0.15) !important;
}

body.dark-mode.new-design-active .item-question-marked {
    overflow: hidden !important;
    display: block !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    background: rgba(66, 182, 244, 0.1) !important;
    border: 1px solid #42B6F4 !important;
    box-shadow: 0 0 15px rgba(66, 182, 244, 0.2) !important;
}

body.new-design-active .update-element-item,
body.new-design-active .remove-element-item-left {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 5px !important;
}

body.new-design-active .update-element-item {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}
body.new-design-active .update-element-item:hover {
    background: #10b981 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
}

body.new-design-active .remove-element-item-left {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}
body.new-design-active .remove-element-item-left:hover {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25) !important;
}

body.new-design-active .form-question-detail {
    background: #f8fafc !important;
}

body.new-design-active .form-question-detail input.form-control,
body.new-design-active .form-question-detail select.form-control,
body.new-design-active .form-question-detail textarea.form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}
body.new-design-active .form-question-detail input.form-control:focus,
body.new-design-active .form-question-detail select.form-control:focus {
    border-color: #42B6F4 !important;
    box-shadow: 0 0 0 3px rgba(66, 182, 244, 0.2) !important;
}

body.new-design-active .sort-button-area {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

body.new-design-active .button-on-top-container-right {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    position: relative !important;
}

body.new-design-active .button-on-top-container-right:hover {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(51, 65, 85, 0.05) !important;
}

body.new-design-active .button-on-top-container-right label {
    margin: 0 10px 0 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    pointer-events: none !important;
}

body.new-design-active .button-on-top-container-right i {
    color: #42B6F4 !important;
    font-size: 16px !important;
}

body.new-design-active .button-on-top-container-right i::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* 6. Tiêu đề Go Back */
body.new-design-active .ibox-title-element {
    color: #42B6F4 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 16px !important;
    margin: 0 0 20px 0 !important;
}

body.new-design-active .ibox-title-element i {
    background: #f1f5f9 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
body.new-design-active .ibox-title-element:hover i {
    background: #42B6F4 !important;
    color: #fff !important;
}

body.new-design-active .container-element audio,
body.new-design-active .container-element img {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

body.dark-mode.new-design-active .container-pdf-builder {
    background: transparent !important;
}

body.dark-mode.new-design-active .pdf-builder-container {
    background: rgba(15, 23, 42, 0.2) !important;
    border-radius: 16px;
}

body.dark-mode.new-design-active .toolbox {
    background-color: rgba(30, 41, 59, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    color: #e2e8f0 !important;
}

body.dark-mode.new-design-active .toolbox-header {
    color: #42B6F4 !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    font-weight: 600 !important;
}

body.dark-mode.new-design-active .element-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    transition: all 0.3s ease;
}

body.dark-mode.new-design-active .element-item:hover {
    background: rgba(66, 182, 244, 0.15) !important;
    border-color: #42B6F4 !important;
    color: #fff !important;
}

body.dark-mode.new-design-active .canvas-page {
    /* background-color: rgba(30, 41, 59, 0.7) !important; */
    border: 1px solid rgba(66, 182, 244, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode.new-design-active .canvas-page::before {
    background-size: 20px 20px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
}

body.dark-mode.new-design-active .property-panel {
    background-color: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

body.dark-mode.new-design-active .property-label {
    color: #94a3b8 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

body.dark-mode.new-design-active .property-input,
body.dark-mode.new-design-active .form-control {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-mode.new-design-active .input-group-text {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #42B6F4 !important;
}
body.dark-mode.new-design-active .action-buttons {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode.new-design-active .canvas-element.selected {
    outline: 2px solid #42B6F4 !important;
    box-shadow: 0 0 15px rgba(66, 182, 244, 0.4) !important;
}

/* ============================================================
   FIX BACKGROUND CHO TOOLBOX-ITEM TRONG PDF BUILDER
   ============================================================ */

body.dark-mode.new-design-active .pdf-builder-container .toolbox-item,
body.dark-mode.new-design-active .pdf-builder-container .element-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important; /* Chữ sáng xám xanh */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
    cursor: grab !important;
}

body.dark-mode.new-design-active .pdf-builder-container .toolbox-item:hover,
body.dark-mode.new-design-active .pdf-builder-container .element-item:hover {
    background-color: rgba(66, 182, 244, 0.15) !important;
    border-color: #42B6F4 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode.new-design-active .pdf-builder-container .toolbox-item i,
body.dark-mode.new-design-active .pdf-builder-container .element-item i {
    color: #42B6F4 !important;
    margin-right: 8px !important;
}
body.dark-mode.new-design-active .pdf-builder-container .style-panel,
body.dark-mode.new-design-active .pdf-builder-container .style-panel-header,
body.dark-mode.new-design-active .pdf-builder-container .tech-details-container {
    border: 1px solid rgba(30, 41, 59, 1) !important;
    background: rgba(30, 41, 59, 1) !important;
}
body.dark-mode.new-design-active .pdf-builder-container .tech-details-container {
    border: none!important;
}
body.dark-mode.new-design-active .pdf-builder-container .style-panel-header {
    border-bottom: 2px solid var(--pb-accent-blue) !important;
}
body.dark-mode.new-design-active .pdf-builder-container .canvas-row {
    padding: 10px;
    background-color: transparent;
    margin-bottom: var(--element-spacing);
    position: relative;
}
body.dark-mode.new-design-active .pdf-builder-container .dropzone {
   background-color: transparent;
}
body.dark-mode.new-design-active .pdf-builder-container .btn-control {
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 22px;
    border-radius: 3px;
    background: linear-gradient(to right, #2F68C5, #234E94)!important;
    border: 1px solid #ddd;
    font-size: 12px;
    text-align: center;
    margin-left: 3px;
    cursor: pointer;
    /* color: var(--primary-cyan-dark); */
}


body.dark-mode.new-design-active .jodit-container:not(.jodit_inline) {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px;
}

body.dark-mode.new-design-active .btn-with-html-text,
body.new-design-active .btn-with-html-text {
    width: 100% !important;
}
body.dark-mode.new-design-active .right-form-detail {
    background: rgba(20, 28, 44, 0.4) !important;
}
body.new-design-active .right-form-detail {
    background: rgba(255, 255, 255, 0.85) !important;
}
body.dark-mode.new-design-active #scrollable-area {
    border-radius: 10px;
}
body.new-design-active #scrollable-area {
    border-radius: 10px;
}
body.dark-mode.new-design-active .form-control optgroup{
    background-color: #0d121e !important;
    background: linear-gradient(to right, #2F68C5, #234E94);
}
body.dark-mode.new-design-active .edit-icon {
    color: var(--primary-cyan-dark);
}
body.dark-mode.new-design-active .delete-icon {
    color: var(--error-text-color-dark);
}

/* new design table */



body.dark-mode.new-design-active table.footable {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
}



body.dark-mode.new-design-active table.footable tbody tr.ng-table-group {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode.new-design-active table.footable tbody tr.ng-table-group td {
    background: transparent !important;
    border: none !important;
    padding: 25px 20px 5px 20px !important;
    color: #42B6F4 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: left !important;
}

body.dark-mode.new-design-active table.footable tbody tr:not(.ng-table-group) {
    background: rgba(255, 255, 255, 0.03) !important;
    transition: all 0.3s ease !important;
}

body.dark-mode.new-design-active table.footable tbody tr:not(.ng-table-group):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(1.01) !important;
}

body.dark-mode.new-design-active table.footable tbody tr:not(.ng-table-group) td {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 18px 20px !important;
    color: #e2e8f0 !important;
}

body.dark-mode.new-design-active table.footable tbody tr:not(.ng-table-group) td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top-left-radius: 16px !important; border-bottom-left-radius: 16px !important;
}
body.dark-mode.new-design-active table.footable tbody tr:not(.ng-table-group) td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top-right-radius: 16px !important; border-bottom-right-radius: 16px !important;
}

/* LIGHT MODE */
body.new-design-active table.footable {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
}

body.new-design-active table.footable tbody tr.ng-table-group {
    background: transparent !important;
    box-shadow: none !important;
}

body.new-design-active table.footable tbody tr.ng-table-group td {
    background: transparent !important;
    border: none !important;
    padding: 25px 20px 5px 20px !important;
    color: #42B6F4 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

body.new-design-active table.footable tbody tr:not(.ng-table-group) {
    background: rgba(255, 255, 255, 0.45) !important;
     transition: all 0.3s ease !important;
}

body.new-design-active table.footable tbody tr:not(.ng-table-group):hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: scale(1.01) !important;
}

body.new-design-active table.footable tbody tr:not(.ng-table-group) td {
    border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    padding: 18px 20px !important;
    color: #334155 !important;
}

body.new-design-active table.footable tbody tr:not(.ng-table-group) td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-top-left-radius: 16px !important; border-bottom-left-radius: 16px !important;
}
body.new-design-active table.footable tbody tr:not(.ng-table-group) td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-top-right-radius: 16px !important; border-bottom-right-radius: 16px !important;
}


body.new-design-active .btn-icon:not(.ng-hide) {
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 4px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

body.new-design-active .btn-icon i {
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1 !important;
}


body.dark-mode.new-design-active .btn-icon.btn-primary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #42B6F4 !important;
}
body.dark-mode.new-design-active .btn-icon.btn-primary:hover {
    background: #42B6F4 !important;
    color: #ffffff !important;
    border-color: #42B6F4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(66, 182, 244, 0.3) !important;
}

body.dark-mode.new-design-active .btn-icon.btn-danger {
    background: rgba(244, 63, 94, 0.08) !important;
    border: 1px solid rgba(244, 63, 94, 0.15) !important;
    color: #f43f5e !important;
}
body.dark-mode.new-design-active .btn-icon.btn-danger:hover {
    background: #f43f5e !important;
    color: #ffffff !important;
    border-color: #f43f5e !important;
    transform: translateY(-2px) rotate(180deg) !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3) !important;
}

body.new-design-active:not(.dark-mode) .btn-icon.btn-primary {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #42B6F4 !important;
}
body.new-design-active:not(.dark-mode) .btn-icon.btn-primary:hover {
    background: #42B6F4 !important;
    color: #ffffff !important;
    border-color: #42B6F4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(66, 182, 244, 0.25) !important;
}

body.new-design-active:not(.dark-mode) .btn-icon.btn-danger {
    background: #fff1f2 !important;
    border: 1px solid #ffe4e6 !important;
    color: #e11d48 !important;
}
body.new-design-active:not(.dark-mode) .btn-icon.btn-danger:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: translateY(-2px) rotate(180deg) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
}
body.dark-mode.new-design-active .button-form-detail {
    display: flex;
}
body.new-design-active .button-form-detail {
    display: flex;
}

    /* ── MAIN ACTIONS ─────────────────────────
	.main-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 10px 0px 0px 0px;
    }
    .action-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 12px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .2s, box-shadow .2s;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,.1);
    }
    .action-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
    }
    .action-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.04);
      opacity: 0;
      transition: opacity .2s;
    }
    .action-card:hover::before { opacity: 1; }

    /* Individual card gradients – dark mode */
      /*.action-card.send-update {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(56, 189, 248, 0.18);
      box-shadow: inset 0 0 20px rgba(56,189,248,.05), inset 0 -6px 14px rgba(56,189,248,.08);
    }
    .action-card.send-update .action-icon { color: #38bdf8; background: rgba(56,189,248,.1); }

    .action-card.start-conversation {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(167,139,250,.18);
      box-shadow: inset 0 0 20px rgba(167,139,250,.05), inset 0 -6px 14px rgba(167,139,250,.08);
    }
    .action-card.start-conversation .action-icon { color: #a78bfa; background: rgba(167,139,250,.1); }

    .action-card.create-news {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(251,146,60,.18);
      box-shadow: inset 0 0 20px rgba(251,146,60,.05), inset 0 -6px 14px rgba(251,146,60,.08);
    }
    .action-card.create-news .action-icon { color: #fb923c; background: rgba(251,146,60,.1); }

    .action-card.start-process {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(74,222,128,.18);
      box-shadow: inset 0 0 20px rgba(74,222,128,.05), inset 0 -6px 14px rgba(74,222,128,.08);
    }
    .action-card.start-process .action-icon { color: #4ade80; background: rgba(74,222,128,.1); }

    .action-icon {
      width: 42px; height: 42px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .action-text { display: flex; flex-direction: column; gap: 2px; }
    .action-title {
      font-size: 13px; font-weight: 600;
      color: #f1f5f9; line-height: 1.3;
    }
    .action-desc {
      font-size: 11px; color: #94a3b8;
      line-height: 1.4;
    }
        /* Light mode action cards */
    /*  body.light .action-card.send-update       { background: linear-gradient(135deg, #eff9ff, #dbeafe); border-color: rgba(6,182,212,.25); }
    body.light .action-card.start-conversation{ background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: rgba(139,92,246,.25); }
    body.light .action-card.create-news       { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: rgba(251,146,60,.25); }
    body.light .action-card.start-process     { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: rgba(34,197,94,.25); }
    body.light .action-title  { color: #1e293b; }
    body.light .action-desc   { color: #64748b; }

*/
/* ── END MAIN ACTIONS ───────────────────────── */

/* Dashboard Main Actions */
body.new-design-active .main-actions {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 14px;
    padding: 14px 0px 24px;
}

body.new-design-active .action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.new-design-active .action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

body.new-design-active .action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.04);
    opacity: 0;
    transition: opacity .2s;
}

body.new-design-active .action-card:hover::before {
    opacity: 1;
}

/* Individual card gradients – dark mode */
body.dark-mode.new-design-active .action-card.send-update {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(56, 189, 248, 0.18);
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.05), inset 0 -6px 14px rgba(56, 189, 248, 0.08);
}

body.dark-mode.new-design-active .action-card.send-update .action-icon {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
}

body.dark-mode.new-design-active .action-card.start-conversation {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(167, 139, 250, 0.18);
    box-shadow: inset 0 0 20px rgba(167, 139, 250, 0.05), inset 0 -6px 14px rgba(167, 139, 250, 0.08);
}

body.dark-mode.new-design-active .action-card.start-conversation .action-icon {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
}

body.dark-mode.new-design-active .action-card.create-news {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(251, 146, 60, 0.18);
    box-shadow: inset 0 0 20px rgba(251, 146, 60, 0.05), inset 0 -6px 14px rgba(251, 146, 60, 0.08);
}

body.dark-mode.new-design-active .action-card.create-news .action-icon {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
}

body.dark-mode.new-design-active .action-card.start-process {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(74, 222, 128, 0.18);
    box-shadow: inset 0 0 20px rgba(74, 222, 128, 0.05), inset 0 -6px 14px rgba(74, 222, 128, 0.08);
}

body.dark-mode.new-design-active .action-card.start-process .action-icon {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

body.new-design-active .action-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

body.new-design-active .action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.new-design-active .action-title {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.3;
}

body.new-design-active .action-desc {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

/* Light mode action cards */
body.new-design-active:not(.dark-mode) .action-card.send-update {
    background: linear-gradient(135deg, #eff9ff, #dbeafe);
    border-color: rgba(6, 182, 212, 0.25);
}

body.new-design-active:not(.dark-mode) .action-card.start-conversation {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: rgba(139, 92, 246, 0.25);
}

body.new-design-active:not(.dark-mode) .action-card.create-news {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: rgba(251, 146, 60, 0.25);
}

body.new-design-active:not(.dark-mode) .action-card.start-process {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: rgba(34, 197, 94, 0.25);
}

body.new-design-active:not(.dark-mode) .action-title {
    color: #1e293b;
}

body.new-design-active:not(.dark-mode) .action-desc {
    color: #64748b;
}

@media (max-width: 900px) {
    .new-design-active .main-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .new-design-active .main-actions {
        grid-template-columns: 1fr;
    }
}

/* Chat Dialog Styles from admin-chat.html */
.admin-chat-dialog {
    --chat-bg: #080c18;
    --chat-sidebar-bg: rgba(10, 14, 26, 0.96);
    --chat-surface: rgba(16, 22, 40, 0.92);
    --chat-surface-2: rgba(22, 30, 52, 0.88);
    --chat-surface-3: rgba(28, 38, 64, 0.85);
    --chat-border: rgba(255, 255, 255, 0.07);
    --chat-border-2: rgba(255, 255, 255, 0.13);
    --chat-text-1: #e8f0fe;
    --chat-text-2: #8ba4c8;
    --chat-text-3: #4e6280;
    --chat-ic-color: #C4DFF7;
    --chat-accent: #4d7cf6;
    --chat-accent-dim: rgba(77, 124, 246, 0.15);
    --chat-accent-glow: rgba(77, 124, 246, 0.25);
    --chat-green: #22c55e;
    --chat-amber: #f59e0b;
    --chat-red: #ef4444;
    --chat-sidebar-w: 280px;
    --chat-topbar-h: 58px;
}

.ngdialog.admin-chat-dialog .ngdialog-content {
    background: var(--chat-bg) !important;
    width: 90% !important;
    max-width: 1200px !important;
    height: 80vh !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    color: var(--chat-text-1) !important;
    font-family: 'Poppins', sans-serif !important;
}

.admin-chat-dialog .chat-app {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}

.admin-chat-dialog .chat-sidebar {
    width: var(--chat-sidebar-w);
    min-width: var(--chat-sidebar-w);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--chat-sidebar-bg);
    border-right: 1px solid var(--chat-border);
    backdrop-filter: blur(20px);
}

.admin-chat-dialog .sidebar-head {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--chat-border);
    flex-shrink: 0;
}

.admin-chat-dialog .sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-chat-dialog .sidebar-title h1 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.admin-chat-dialog .admin-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(77, 124, 246, 0.1);
    border: 1px solid rgba(77, 124, 246, 0.2);
    border-radius: 20px;
    padding: 4px 10px 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--chat-text-2);
}

.admin-chat-dialog .admin-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4d7cf6, #2f5ec4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

.admin-chat-dialog .sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--chat-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--chat-text-3);
}

.admin-chat-dialog .sidebar-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--chat-text-1);
    width: 100%;
}

.admin-chat-dialog .sidebar-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--chat-border);
}

.admin-chat-dialog .action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: none;
}

.admin-chat-dialog .btn-private {
    background: var(--chat-accent-dim);
    color: var(--chat-accent);
    border: 1px solid rgba(77, 124, 246, 0.25);
}

.admin-chat-dialog .btn-group {
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.25);
}

.admin-chat-dialog .sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.admin-chat-dialog .section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--chat-text-3);
    padding: 10px 18px 5px;
}

.admin-chat-dialog .chat-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    margin: 1px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.13s;
}

.admin-chat-dialog .chat-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.admin-chat-dialog .chat-item.active {
    background: var(--chat-accent-dim);
    border: 1px solid rgba(77, 124, 246, 0.2);
}

.admin-chat-dialog .ci-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}

.admin-chat-dialog .online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--chat-green);
    border: 2px solid #0a0e1a;
}

.admin-chat-dialog .ci-body {
    flex: 1;
    min-width: 0;
}

.admin-chat-dialog .ci-name {
    font-size: 14px;
    font-weight: 600;
}

.admin-chat-dialog .ci-preview {
    font-size: 12px;
    color: var(--chat-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread message styles with GLOW */
.admin-chat-dialog .chat-item.unread {
    background: rgba(77, 124, 246, 0.06);
    box-shadow: inset 0 0 15px rgba(77, 124, 246, 0.05);
}

.admin-chat-dialog .chat-item.unread .ci-name {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.2);
}

.admin-chat-dialog .chat-item.unread .ci-preview {
    color: var(--chat-text-1) !important;
    font-weight: 600 !important;
}

.admin-chat-dialog .ci-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.admin-chat-dialog .ci-badge {
    background: var(--chat-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(77, 124, 246, 0.4);
}

.admin-chat-dialog .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(8, 12, 24, 0.4);
}

.admin-chat-dialog .chat-topbar {
    height: var(--chat-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    background: rgba(10, 14, 26, 0.8);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--chat-border);
}

.admin-chat-dialog .messages-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-chat-dialog .msg-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-chat-dialog .msg-group.mine {
    align-items: flex-end;
}

.admin-chat-dialog .bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    position: relative;
}

.admin-chat-dialog .bubble.in {
    background: var(--chat-surface-2);
    border: 1px solid var(--chat-border);
    color: var(--chat-text-1);
    border-bottom-left-radius: 4px;
}

.admin-chat-dialog .bubble.out {
    background: linear-gradient(135deg, #2f5ec4, #4d7cf6);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.admin-chat-dialog .input-area {
    padding: 16px;
    background: rgba(10, 14, 26, 0.8);
    border-top: 1px solid var(--chat-border);
}

.admin-chat-dialog .input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-chat-dialog .input-box {
    flex: 1;
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--chat-text-1);
    outline: none;
    resize: none;
    max-height: 100px;
}

.admin-chat-dialog .send-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--chat-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #fff;
    cursor: pointer;
}.admin-chat-dialog .send-btn:hover {
    background: #3a6ae0;
    transform: scale(1.05);
}

/* -- New Chat Tools & Panel -- */
.admin-chat-dialog .input-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
}

.admin-chat-dialog .tool-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.13s;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--chat-border);
    color: var(--chat-text-2);
}

.admin-chat-dialog .tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--chat-text-1);
    border-color: var(--chat-border-2);
}

/* -- Group Settings Panel -- */
.admin-chat-dialog .group-settings-panel {
    position: absolute;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background: rgba(12, 18, 34, 0.98);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--chat-border);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-chat-dialog .group-settings-panel.open {
    right: 0;
}

.admin-chat-dialog .gs-head {
    padding: 18px;
    border-bottom: 1px solid var(--chat-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-chat-dialog .gs-head h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.admin-chat-dialog .gs-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.admin-chat-dialog .gs-av-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.admin-chat-dialog .gs-av {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.admin-chat-dialog .gs-av::after {
    content: '??';
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 12px;
    background: #1a1f2e;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--chat-border);
}

.admin-chat-dialog .gs-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--chat-text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.admin-chat-dialog .member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.admin-chat-dialog .member-item:hover {
    background: var(--chat-surface-2);
}

.admin-chat-dialog .mi-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.admin-chat-dialog .mi-body {
    flex: 1;
    min-width: 0;
}

.admin-chat-dialog .mi-name {
    font-size: 13px;
    font-weight: 600;
}

.admin-chat-dialog .mi-role {
    font-size: 11px;
    color: var(--chat-text-3);
}

.admin-chat-dialog .mi-remove {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(239, 68, 68, 0.1);
    color: var(--chat-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
    transition: all 0.2s;
}

.admin-chat-dialog .mi-remove:hover {
    background: var(--chat-red);
    color: #fff;
}

/* -- More Menu -- */
.admin-chat-dialog .more-wrap {
    position: relative;
}

.admin-chat-dialog .more-menu {
    position: absolute;
    top: 45px;
    right: 0;
    background: #161b2c;
    border: 1px solid var(--chat-border-2);
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: none;
}

.admin-chat-dialog .more-menu.open {
    display: block;
}

.admin-chat-dialog .more-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--chat-text-1);
    transition: background 0.15s;
}

.admin-chat-dialog .more-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.admin-chat-dialog .more-menu-item.danger {
    color: var(--chat-red);
}

.admin-chat-dialog .more-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* -- Modern Creation Overlay & Modals -- */
.admin-chat-dialog .chat-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.admin-chat-dialog .creation-card {
    background: rgba(12, 18, 34, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid var(--chat-border-2);
    border-radius: 20px;
    width: 680px;
    max-width: 96%;
    height: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(77, 124, 246, 0.15);
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.admin-chat-dialog .cc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--chat-border);
}

.admin-chat-dialog .cc-head h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--chat-text-1);
}

.admin-chat-dialog .modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--chat-border);
    transition: all 0.13s;
    color: var(--chat-text-2);
}

.admin-chat-dialog .modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--chat-text-1);
}

.admin-chat-dialog .cc-body {
    padding: 24px 32px;
    overflow-y: auto;
    flex: 1;
}

.admin-chat-dialog .cc-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--chat-border);
    display: flex;
    gap: 8px;
}

.admin-chat-dialog .modal-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--chat-surface-2);
    border: 1px solid var(--chat-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.admin-chat-dialog .modal-search i {
    color: var(--chat-text-3);
    font-size: 14px;
}

.admin-chat-dialog .modal-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--chat-text-1);
    font-size: 14px;
    width: 100%;
}

.admin-chat-dialog .user-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.admin-chat-dialog .user-list::-webkit-scrollbar {
    width: 4px;
}

.admin-chat-dialog .user-list::-webkit-scrollbar-thumb {
    background: var(--chat-border-2);
    border-radius: 10px;
}

.admin-chat-dialog .user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.13s;
    border: 1px solid transparent;
}

.admin-chat-dialog .user-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.admin-chat-dialog .user-item.selected {
    background: var(--chat-accent-dim);
    border-color: rgba(77, 124, 246, 0.25);
}

.admin-chat-dialog .ui-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}

.admin-chat-dialog .ui-body {
    flex: 1;
    min-width: 0;
}

.admin-chat-dialog .ui-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--chat-text-1);
}

.admin-chat-dialog .ui-role {
    font-size: 12px;
    color: var(--chat-text-2);
    margin-top: 1px;
}

.admin-chat-dialog .status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.admin-chat-dialog .check-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--chat-border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    color: #fff;
}

.admin-chat-dialog .user-item.selected .check-circle {
    background: var(--chat-accent);
    border-color: var(--chat-accent);
}

.admin-chat-dialog .group-av-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 12px;
    margin-bottom: 14px;
}

.admin-chat-dialog .gap-av {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.admin-chat-dialog .color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.admin-chat-dialog .color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.13s;
    border: 2px solid transparent;
}

.admin-chat-dialog .color-dot:hover { transform: scale(1.2); }
.admin-chat-dialog .color-dot.active { border-color: #fff; transform: scale(1.1); }

.admin-chat-dialog .selected-count {
    font-size: 12px;
    color: var(--chat-text-3);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-chat-dialog .selected-count span {
    color: var(--chat-accent);
    font-weight: 600;
}

.admin-chat-dialog .btn-block {
    width: 100%;
}

/* -- Status Colors -- */
.admin-chat-dialog .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.admin-chat-dialog .status-online { background: var(--chat-green); }
.admin-chat-dialog .status-offline { background: #64748b; }
.admin-chat-dialog .selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid var(--chat-border);
}

.admin-chat-dialog .file-tag {
    background: var(--chat-accent-dim);
    border: 1px solid rgba(77, 124, 246, 0.3);
    color: var(--chat-accent);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-chat-dialog .file-tag i {
    cursor: pointer;
    opacity: 0.7;
}

.admin-chat-dialog .file-tag i:hover {
    opacity: 1;
}

/* Adjust topbar actions */
.admin-chat-dialog .ct-actions {
    display: flex;
    gap: 8px;
    margin-right: 12px;
}

.admin-chat-dialog .ct-btn {
    background: none;
    border: none;
    color: var(--chat-text-2);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.admin-chat-dialog .ct-btn:hover {
    color: #fff;
}

/* -- Attachment Styling -- */
.admin-chat-dialog .attachment-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-chat-dialog .attachment-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.admin-chat-dialog .chat-img-preview {
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.admin-chat-dialog .chat-img-preview:hover {
    transform: scale(1.01);
}

.admin-chat-dialog .chat-video-preview {
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    display: block;
    background: #000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.admin-chat-dialog .chat-audio-preview {
    width: 100%;
    max-width: 250px;
    height: 36px;
    border-radius: 20px;
}

.admin-chat-dialog .chat-file-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.admin-chat-dialog .chat-file-link:hover {
    background: rgba(255, 255, 255, 0.15);
}

.admin-chat-dialog .chat-file-link i {
    font-size: 18px;
    color: var(--chat-accent);
}

/* -- Special Media Bubble Styling -- */
.admin-chat-dialog .bubble.has-media {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.admin-chat-dialog .bubble.has-media .attachment-container {
    margin-top: 0;
}


/* push dialog on dashboard */



/* ── DIALOG ─────────────────────────── */
.dialog {
  width: 760px;
  max-width: 100%;
  height: 880px;
  max-height: 90vh;
  background: rgba(10, 15, 28, 0.88);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.dialog::before { display: none; }

/* ── HEADER ─────────────────────────── */
.dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dialog-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: #f1f5f9;
}
.dialog-title .icon-wrap {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(6,182,212,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan); font-size: 15px;
}
.btn-close {
  background: none; border: none;
  color: var(--muted); font-size: 18px;
  cursor: pointer; padding: 4px 6px;
  border-radius: 6px; transition: color .15s, background .15s;
}
.btn-close:hover { color: #f1f5f9; background: rgba(255,255,255,.07); }

/* ── STEP TABS ──────────────────────── */
.step-tabs {
  display: flex;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.step-tab {
  flex: 1; text-align: center;
  padding: 12px 8px; font-size: 12px;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.step-tab.active { color: #06b6d4; border-bottom-color: #06b6d4;     background-color: transparent; }
.step-tab .step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.step-tab.active .step-num { background: var(--cyan); color: #06b6d4; border-color: #06b6d4; }
.step-tab.done .step-num { background: rgba(6,182,212,.2); color: var(--cyan); border-color: rgba(6,182,212,.5); }
.step-tab.done { color: rgba(6,182,212,.7); }

/* ── BODY – scrollable, header/footer stay fixed ── */
.dialog-body {
  padding: 24px 28px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.dialog-body::-webkit-scrollbar { width: 4px; }
.dialog-body::-webkit-scrollbar-track { background: transparent; }
.dialog-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.step-panel { display: none; flex-direction: column; gap: 20px; }
.step-panel.active { display: flex; background-color: transparent;}

/* ── SECTION LABEL ──────────────────── */
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(210, 235, 255, 0.85);
  margin-bottom: 14px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(6,182,212,.2);
}



/* ── FOOTER ─────────────────────────── */
.dialog-footer {
  display: flex; align-items: center;
  flex-shrink: 0;
  padding: 14px 28px 22px;
  border-top: 1px solid var(--border);
  gap: 10px;
}
.footer-left { margin-right: auto; }
.btn {
  padding: 10px 22px; border-radius: 9px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-cancel {
  background: linear-gradient(to right, #1d273b, #12203d);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,.1);
}
.btn-cancel:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.btn-back {
  background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-back:hover { color: var(--text); border-color: rgba(255,255,255,.15); }
.btn-send {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dark));
  color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(6,182,212,.35);
}
.btn-send:hover { box-shadow: 0 6px 20px rgba(6,182,212,.5); transform: translateY(-1px); }

/* ── CONFIRM OVERLAY ────────────────── */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  z-index: 999; align-items: center; justify-content: center;
}
.overlay.show { display: flex; }
.confirm-box {
  background: rgba(13,19,35,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 360px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.confirm-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(248,113,113,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #f87171;
  margin: 0 auto 16px;
}
.confirm-title { font-size: 15px; font-weight: 600; color: #f1f5f9; margin-bottom: 8px; }
.confirm-msg { font-size: 13px; color: var(--label); margin-bottom: 24px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.btn-confirm-no {
  flex: 1; padding: 9px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--label); font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: .15s;
}
.btn-confirm-no:hover { color: var(--text); background: rgba(255,255,255,.1); }
.btn-confirm-yes {
  flex: 1; padding: 9px; border-radius: 8px;
  background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.3);
  color: #f87171; font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: .15s;
}
.btn-confirm-yes:hover { background: rgba(248,113,113,.25); }

/* end push dialog on dashboard */