:root {
    --min-height-desktop: 100vh;
    --darkorange: #E8764B;
    --lightorange: #F5E7E1;
    --ivory: #F4EFEA;
    --white: #ffffff;
    --black: #161616;
    --grey: #868585;
    --mediumgrey: #dedede;
    --lightgrey: #f3f3f3;
    --lightblue: #D5E7F8;
    --blue: #2C87DD;
    --lightgreen: #E6F9E6;
    --green: #08a94d;
    --lightyellow: #F9E8CE;
    --yellow: #DA6142;
    --lightred: #F5C8C8;
    --red: #DF5353;
    --regular: 400;
    --semibold: 600;
    --light: 100;
    --sidebar-width: 280px;
    --border-radius: 15px;
    
    /* Form Range Customization */
    --cui-form-range-track-bg: #dedede; /* Light gray track */
    --cui-form-range-thumb-bg: #161616; /* Dark orange thumb */
    --cui-form-range-thumb-active-bg: #161616; /* Darker orange when active */

}

/******* FONTS  
    *
    *    
    */
@font-face {
    font-family: 'Roboto';
    src: url('../assets/fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../assets/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: var(--black)
}
h1, .heading--h1  {
    font-weight: var(--semibold);
    font-size: 32px;
    line-height: 45px;
    word-break: break-word;
}
h2, .heading--h2  {
    font-weight: var(--semibold);
    font-size: 25px;
    line-height: 34px;
}
div:where(.swal2-container) div:where(.swal2-popup) .swal2-title  {
    font-weight: var(--semibold);
    font-size: 25px !important;
    line-height: 34px !important;
}
h3, .heading--h3 {
    font-weight: var(--semibold);
    font-size: 20px;
    line-height: 28px;
}
h4, .heading--h4 {
    font-weight: var(--regular);
    font-size: 18px;
    line-height: 25px;
}
h5 {
    font-weight: var(--regular);
    font-size: 16px;
    line-height: 23px;
}

p, li, textarea {
    font-weight: var(--regular);
    font-size: 15px;
    line-height: 22px;
    color: var(--black);
}

a {
  text-decoration: none;
  line-height: 20px;
}
a:hover{
    color: var(--black);
}

b, .fw-semibold {
  font-weight: var(--semibold);
}

.fw--light {
  font-weight: var(--light) !important;
}
.fw--regular {
    font-weight: 400 !important;
}
.text--small {
    font-weight: var(--light);
    font-size: 13px !important;
    line-height: 18px !important;
}
.text--big {
    font-weight: var(--semibold);
    font-size: 60px;
    line-height: 80px;
}
.text--medium {
    font-weight: var(--semibold);
    font-size: 40px;
    line-height: 55px;
}
.form-label, label {
    font-size: 15px;
    color: var(--black) !important;
}
.text--underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media only screen and (max-width: 991px) {
    h1, .heading--h1 {
        font-size: 26px;
        line-height: 40px;
    }
    h2, .heading--h2 {
        font-size: 22px;
        line-height: 30px;
    }
    div:where(.swal2-container) div:where(.swal2-popup) .swal2-title {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    h3, .heading--h3 {
        font-size: 18px;
        line-height: 22px;
    
    }
    h4, div:where(.swal2-container) .swal2-html-container, .heading--h4  {
        font-size: 16px;
        line-height: 20px;
    }
    h5 {
        font-size: 14px;
        line-height: 18px;
    }
    .form-label, label {
        font-size: 14px;
    }
    .text--big {
        font-size: 34px;
        line-height: 42px;
    }
    .text--medium {
        font-size: 29px;
        line-height: 38px;
    }
   
   
}

@media only screen and (max-width: 767px) {
    h1, .heading--h1 {
        font-size: 24px;
        line-height: 36px;
    }
    h2, .heading--h2 {
        font-size: 22px;
        line-height: 26px;
    }
    div:where(.swal2-container) div:where(.swal2-popup) .swal2-title {
        font-size: 17px !important;
        line-height: 26px !important;
    }
    h3, .heading--h3 {
        font-size: 16px;
        line-height: 20px;
    
    }
    h4, div:where(.swal2-container) .swal2-html-container, .heading--h4  {
        font-size: 15px;
        line-height: 18px;
    }
    h5 {
        font-size: 14px;
        line-height: 18px;
    }
    .form-label, label {
        font-size: 14px;
    }
    .text--big {
        font-size: 32px;
        line-height: 38px;
    }
    .text--medium {
        font-size: 26px;
        line-height: 34px;
    }
   
}

/******* TEXTS  
    *
    *    
    */
.text--darkorange {
    color: var(--darkorange) !important;
}
.text--black {
    color: var(--black) !important;
}
.text--lightgrey {
    color: var(--mediumgrey) !important;
}
.text--white {
    color: var(--white) !important;
}
.text--grey {
    color: var(--grey) !important;
}
.text--hover {
    color: var(--black) !important;
}
.text--hover:hover {
    color: var(--darkorange) !important;
}
.input--text::placeholder,
.input-brief::placeholder {
    color: var(--grey);
    opacity: 1;
}
.input--text::-ms-input-placeholder,
.input-brief::-ms-input-placeholder {
    color: var(--grey);
}
.text-muted {
    color: #40404085 !important;
}

/******* BACKGROUNDS  
    *
    *    
    */

.bg--ivory {
    background-color: var(--ivory);
}
.bg--darkorange {
    background-color: var(--darkorange);
}
.bg--lightorange {
    background-color: var(--lightorange);
}
.bg--dark {
    background-color: var(--black);
}
.bg--black {
    background-color: #232323;
}
.bg--lightgrey {
    background-color: var(--lightgrey);
}
.bg--transparent {
    background-color: transparent;
}

/******* BUTTONS  
    *
    *    
    */
.btn{
    color: var(--black);
    font-size: 15px;
}
.btn--darkorange {
    background: var(--darkorange) !important;
    color: var(--white) !important;
    box-shadow: none !important;
    font-weight: var(--semibold) !important;
}
.btn--darkorange--outline {
    background: var(--white) !important;
    color: var(--darkorange) !important;
    border: 1px solid var(--darkorange) !important;
    box-shadow: none !important;
    font-weight: var(--semibold) !important;

}
.btn--white  {
    background: var(--white) !important;
    color: var(--black) !important;
    box-shadow: none !important;
    font-weight: var(--semibold) !important;
}
.btn--lightorange {
    background: var(--lightorange) !important;
    color: var(--darkorange) !important;
    box-shadow: none !important;
    font-weight: var(--semibold) !important;
}
.btn--lightgrey {
    background: var(--lightgrey) !important;
    color: var(--black) !important;
    box-shadow: none !important;
    font-weight: var(--semibold) !important;
}
.btn--outline--dark, .btn--outline--dark:hover {
    border-color: var(--black);
    color: var(--black);
    background: var(--white);
    font-weight: var(--semibold) !important;
}
.btn--outline--grey, .btn--outline--grey:hover {
    border-color: var(--mediumgrey);
    color: var(--black);
    background: transparent;
    font-weight: var(--semibold) !important;
}
.btn-light {
    color: var(--black);
}
.btn-light, .dropdown-btn {
    box-shadow: none !important;
 }
button:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}
 /* BADGES */
.badge--info{
    background: var(--lightblue) !important;
    color: var(--blue) !important;
    box-shadow: none !important;
    font-weight: var(--regular);
    border-radius: var(--border-radius);
} 
.badge--info.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.badge--success {
    background: var(--lightgreen) !important;
    color: var(--green) !important;
    box-shadow: none !important;
    font-weight: var(--regular);
    border-radius: var(--border-radius);
}
.badge--warning {
    background: var(--lightyellow) !important;
    color: var(--yellow) !important;
    box-shadow: none !important;
    font-weight: var(--regular);
    border-radius: var(--border-radius);
}
.badge--danger {
    background: var(--lightred) !important;
    color: var(--red) !important;
    box-shadow: none !important;
    font-weight: var(--regular);
    border-radius: var(--border-radius);
}
/* ALERTS */
.alert-success {
    background: var(--lightgreen) !important;
    color: var(--green) !important;
    border-radius: 100px;
    border: 0px solid var(--green) !important;
    font-weight: var(--regular);
}
.alert-error, .alert-danger {
    background: var(--lightred) !important;
    color: var(--red) !important;
    border-radius: 100px;
    border: 0px solid var(--red) !important;
    font-weight: var(--regular);
}
.alert-warning {
    background: var(--lightyellow) !important;
    color: var(--yellow) !important;
    border-radius: 100px;
    border: 0px solid var(--yellow) !important;
    font-weight: var(--regular);
}
/* DROPDOWN */
.dropdown-menu {
    border: 1px solid var(--mediumgrey);
    border-radius: var(--border-radius);
}
.choose--tonal--reference:hover, .choose--writingstyle.show, .choose--language--option:hover, .choose--language.show {
    background: var(--lightgrey)
}
.choose--tonal--reference.active, .choose--tonal--reference:active, .choose--language--option.active, .choose--language--option:active {
    background: var(--lightgrey);
    border: 0px;
    box-shadow: none !important;
}
.dropdown--menu--length {
    width: 300px;
}
.choose--output--options .btn {
    font-size: 14px;
}
/* FORM RANGE */
.form-range::-webkit-slider-thumb {
    box-shadow: none !important;
    border: none !important;
}
.form-range::-webkit-slider-thumb:active {
    box-shadow: none !important;
}
.form-range::-webkit-slider-thumb:focus {
    box-shadow: none !important;
}
/* LOGO */
.logo--main {
    height: 70px;
    padding: 10px;
    transition: height 0.3s ease, padding 0.3s ease, transform 0.3s ease;
}

.navbar.sticky-lp .logo--main {
    height: 50px;
    padding: 5px;
}
.logo--footer {
    height: 70px;
    padding: 10px 0px;
    margin-bottom: 15px;
}
.sidebar--logo {
    height: 50px;
}
.sidebar.show .sidebar--logo {
    margin-top: 50px;
}

@media (max-width: 768px) {
    #tryit--button--navbar {
        display: none;
    }
    .logo--main {
        height: 50px;
        padding: 5px 5px 5px 10px; 
    }
    .navbar.sticky-lp .logo--main {
        height: 40px;
        padding: 5px 5px 5px 10px; 
    }
    
}

/* NAVBAR TABS */
.nav-tabs {
    padding: 5px !important;
    border-radius: 30px;
    border: 0px;
}
.nav-tabs .nav-link {
    font-size: 15px;
    border: 0px;
    border-radius: 30px;
}
.nav-tabs .nav-link:hover {
    border: 0px;
}
.nav-tabs-mediumgrey {
    background-color: var(--lightgrey);
}
.nav-tabs-whiteorange {
    background-color: var(--white);
}
.nav-tabs-whiteorange .nav-link.active {
    background-color: var(--lightorange);
    color: var(--darkorange);
    font-weight: var(--semibold);
}
.nav-tabs-mediumgrey .nav-link.active {
    color: var(--black);
    font-weight: var(--semibold);
}
.nav-tabs-whiteorange .nav-link, .nav-tabs-mediumgrey .nav-link {
    color: rgba(0, 0, 0, 0.5);
}

/******* POSITIONING  */
.row {
    margin: 0px;
}
.body--app, body.no-scroll, .wrapper--body--app {
    overflow-x: hidden
}

/* SCROLLBAR */
.ql-editor::-webkit-scrollbar, .preview--content::-webkit-scrollbar, #fullTreatmentContent::-webkit-scrollbar {
    width: 2px; 
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--mediumgrey);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--mediumgrey);
}

/* SIDEBAR */
.sidebar {
    width: var(--sidebar-width);
    background: var(--white);
    border-right: 1px solid var(--lightgrey) !important;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 1030;
    overflow-y: auto;
}
.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--lightgrey);
    background: var(--white);

}
.sidebar-brand {
    font-size: 1.25rem;
    font-weight: var(--semibold);
    color: var(--black);
    background: var(--white);
    display: none;
}
.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}
.sidebar-nav .nav-link, .sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--black);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
}
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active, .sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: var(--lightgrey);
    color: var(--black);
}
.sidebar-nav .nav-icon, .sidebar-nav .nav-link:hover .nav-icon, .sidebar-nav .nav-link.active .nav-icon, .sidebar .nav-icon, .sidebar .nav-link:hover .nav-icon, .sidebar .nav-link.active .nav-icon {
    width: 20px;
    margin-right: 0.75rem;
    text-align: center;
    color: var(--black);
    font-size: 14px;
}
.sidebar-footer {
    border-top: 1px solid var(--lightgrey);
    background-color: var(--white);
}
.sidebar-footer p {
    font-size: 14px;
}
@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .sidebar-toggle {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1040;
        background: var(--white);
        border: 0px;
        border-radius: 0.375rem;
        padding: 0.5rem;
        display: block;
    }

}

@media (min-width: 992px) {
    .sidebar-toggle {
        display: none;
    }
}

/* Overlay for mobile */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1025;
    display: none;
}
.sidebar-backdrop.show {
    display: block;
}


/* statci mobile navbar */
html:not([dir=rtl]) .wrapper--static {
    padding-left: 0px;
}

/* Mobile submenu styles */
.mobile-submenu {
    display: none;
}

.mobile-submenu.show {
    display: block;
    animation: slideDown 0.3s ease-out;
} 
.mobile-submenu .dropdown-item {
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    text-decoration: none;
    color: var(--black);
}

.mobile-submenu .dropdown-item:hover {
    background-color: var(--white);
}

.mobile-dropdown-toggle {
    cursor: pointer;
}

.mobile-dropdown-arrow {
    transition: transform 0.3s ease;
}

.mobile-dropdown-arrow.rotated {
    transform: rotate(180deg);
}
.navbar-toggler-icon {
    background-image: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure mobile sidebar takes full height */
@media (max-width: 1199.98px) {
    .sidebar--static {
        width: 300px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        top: 0;
    }
    .sidebar--static.show {
        transform: translateX(0);
    }
}

/* NAVBAR */    
.navbar.sticky {
    box-shadow: -1px -1px 20px 0px var(--white);
}
.navbar.sticky-lp {
    background-color: #ffffffef;
}
.navbar-collapse {
    max-width: fit-content !important;
    width: fit-content !important;
}
.nav--submenu .dropdown-item:hover {
    background-color: var(--white);
    border-radius: var(--border-radius);
}
.nav--submenu .dropdown-item:hover h6 {
    color: var(--darkorange);
}
.nav--submenu .dropdown-item i {
    width: 20px;
}
.navbar {
    padding-top: 20px;
}
.navbar-nav .nav-link {
    color: var(--black);
    border-bottom: 1px solid transparent;
}
.navbar-nav .nav-link.active {
    font-weight: bold !important;
    color: var(--black)
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding: 7px 15px;
}
.navbar--btn-profile {
    width: 40px;
    height: 40px;
}
.navbar--btn-profile::after {
    display: none;
}
.navbar--dropdown-profile {
    width: min-content;
    min-width: 220px;
    border-radius: 15px;
    position: absolute !important;
    left: auto !important;
}
.navbar-toggler {
    border: 0px !important;
    box-shadow: none !important;
}
@media only screen and (max-width: 991px) {
    .navbar-collapse.show {
        position: absolute;
        width: 100vw !important;
        max-width: 100vw !important;
        top: 82px;
        left: 0;
        background: var(--white);
        padding: 0px 10px;
        transition: all 0.5s ease;
        border-top: 1px solid var(--mediumgrey);
        border-bottom: 1px solid var(--mediumgrey);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 20px 15px;
        border-bottom: 1px solid var(--mediumgrey);
    }
}
@media only screen and (max-width: 767px) {
    .nav-tabs {
        min-height: 40px;
    }
    .navbar-collapse.show {   
        top: 63px;
    }  
}

/* FOOTER */
.footer {
    background: var(--white);
    border: 0px;
}
.footer--logo {
    font-size: 32px;
    color: var(--white);
    font-weight: 100;
}
.footer--heading {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}
.footer--col--links {
    margin-top: 20px;
}


/* LOADING SCREEN */
.loading--item {
    display: flex;
    align-items: center;
}
.loading--item{
    transition: color 1s ease; /* Adjust time and easing function as needed */
}
.loading--item, .styles--loading--item {
    font-size: 20px;
    line-height: 28px;
}
.spinner-border-sm {
    border-width: 2px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 991px) {
    .loading--item, .styles--loading--item {
        font-size: 18px;
        line-height: 22px;
    }
}
/******* PAGES  
    *
    *    
    */
/******* LOGIN  */
.logo--login {
    height: 60px;
}
.text--login {
    padding-left: 90px;
    width: 80%;
}
.wrapper--login--left {
    height: 100vh;
    background-color: var(--lightgrey);
}
.wrapper--login--left .row {
    max-width: 800px;
    margin: 0px auto;
}


.login--form,
.signup--form {
    max-width: 500px;
    margin: 0px auto;
}

.login--form .input--text,
.signup--form .input--text {
    border: 1px solid var(--black)66;
}
.wrapper--loginform .alert {
    max-width: 500px;
    margin: 30px auto 0px auto;
    padding: 10px 30px;
    text-align: center;
    border-radius: 30px;
}

@media only screen and (max-width: 991px) {
    .wrapper--login--left {
        height: auto;
        padding: 140px 0px 60px 0px;
        background-position: top 30px left 30px;
        background-size: 100px;
    }
    .wrapper--login {
        background-color: var(--lightgrey);
    }
    .wrapper--loginform {
        top: -30px;
        position: relative;
        border-radius: 40px;
        background-color: var(--white);
        border: 20px solid var(--lightgrey);
    }
}


/******* TREATMENT OVERVIEW  */
.overview--wrapper {
    min-height: var(--min-height-desktop);
    padding-top: 5px;
}
.overview--btn {
    box-shadow: rgb(207 193 177) 0px 3px 8px;
    min-height: 220px;
}

.card {
    box-shadow: unset;
    border-radius: 15px;
}
.card-body {
    border-radius: 15px;
}
.overview--treatment--card {
    transition: all 0.3s ease-in;
}

.card-dropdown {
    position: absolute;
    right: 20px;
}
.card-dropdown button{
    font-size: 14px;
    line-height: 18px;
}
.overview--treatment--card .dropdown-item.active,
.overview--treatment--card .dropdown-item:active,
.overview--treatment--card .dropdown-item:hover,
.overview--treatment--card .dropdown-item:focus,
.navbar--dropdown-profile .dropdown-item.active,
.navbar--dropdown-profile .dropdown-item:active,
.navbar--dropdown-profile .dropdown-item:hover,
.navbar--dropdown-profile .dropdown-item:focus {
    background-color: var(--lightgrey);
}
.overview--card--footer p,
.overview--card--footer a {
    width: fit-content;
    padding: 0px;
}
@media only screen and (max-width: 1440px) {
    .overview--card--footer p {
        max-width: 150px;
    }
}
/* Search */
.input-group-text {
    border-color: #dfdfdf;
    background: #f4f4f4;
}
.search--input {
    border: 0px;
    font-family: Roboto, FontAwesome;
    background-color: var(--lightgrey);

}
.search--input:active,
.search--input:focus {
    background: var(--lightgrey);
    background-color: var(--white);
}
.form-control:focus {
    box-shadow: 0 0 0 2px rgb(208 208 208 / 31%);
}
.input-brief:focus {
    border: 0px;
}
/*  Quota */
.overview--quota {
    text-wrap: nowrap;
}    

/******* NEW TREATMENT  */
.newtreatment--wrapper {
    min-height: var(--min-height-desktop);
}
.newtreatment--wrapper .left--panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 33.33333333%;
    min-height: var(--min-height-desktop);
    background-image: url("/assets/img/background_person_standing.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000;
}
.newtreatment--wrapper .right--panel {
    min-height: var(--min-height-desktop);
    width: 66.66666666%;
    margin-left: 33.33333333%;
    background-color: var(--white);
    overflow-y: auto;
    height: 100vh;
}
.newtreatment--wrapper--inner--header {
    max-width: 800px;
    margin: 100px auto 50px auto;
}
.newtreatment--wrapper--inner {
    background-color: var(--lightgrey);
    border-radius: var(--border-radius);
    padding: 20px;
    max-width: 800px;
    margin: 0px auto;
}
.upload--wrapper {
    border-radius: var(--border-radius);
}
#brief-error-message {
    display: none;
}
.custom--checkbox {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mediumgrey);
}
.custom--checkbox.active {
    background: var(--darkorange);
}
.custom--radio {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mediumgrey);
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.btn--tonalref {
    min-height: 100% !important;
    border-radius: 15px;
}  
.btn--tonalref.active .custom--radio {
    border-color: var(--darkorange);
    background: var(--darkorange)
}
  
.btn--tonalref.active .custom--radio::after, .custom--checkbox.active::after {
    content: '';
    display: block;
    position: absolute;
    left: 8px;
    top: 3px;
    width: 10px;
    height: 16px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    border-radius: 2px;
}
.btn--tonalref.active,
.btn--tonalref:focus{
    background-color: var(--lightorange);
}

@media only screen and (max-width: 991px) {
    /* Mobile layout for new treatment panels */
    .newtreatment--wrapper .left--panel {
        position: relative;
        width: 100%;
        height: 300px;
        min-height: auto;
    }
    .newtreatment--wrapper .right--panel {
        margin-left: 0;
        width: 100%;
        height: auto;
        min-height: auto;
    }
}
.btn--directorref .custom--radio {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    transition: all 0.2s ease;
}

.btn--directorref.active .custom--radio {
    background-color: #e67e22;
    border-color: #e67e22;
}

.btn--directorref.active .custom--radio::after {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: bold;
}


/**** MODAL ****/
.modal--badge {
    width: fit-content;
    margin: 0px auto 20px auto;
}
.swal2-popup {
    border-radius: 15px;
}
div:where(.swal2-container) div:where(.swal2-popup) .swal2-title {
    padding: 10px !important;
    text-align: center !important;
}
div:where(.swal2-container) div:where(.swal2-popup) {
    font-family: Roboto Medium;
    padding: 30px !important;
}
div:where(.swal2-container) .swal2-html-container {
    margin: 0px !important;
    font-size: 15px !important;
}
div:where(.swal2-container) h2:where(.swal2-title),
div:where(.swal2-container) div:where(.swal2-popup) {
    font-family: Roboto !important;
    font-weight: 100 !important;
    text-align: left !important;
    padding-bottom: 24px !important;
    color: var(--black) !important;
}
.swal2-input {
    font-size: 14px;
    height: 55px;
    background-color: var(--lightgrey);
    border: 0px;
    border-radius: 35px;
    padding-left: 16px;
    color: var(--black);
}
.swal-background-grey div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
    background-image: unset !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    height: 44px;
}
.swal2-close {
    margin: 20px 20px 0px 0px;
    position: absolute;
}
div:where(.swal2-container) div:where(.swal2-validation-message) {
    background: transparent !important;
}
button.swal2-cancel.swal2-styled.swal2-default-outline, 
button.swal2-confirm.swal2-styled.swal2-default-outline,
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel, 
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    border-radius: 30px !important;
}
button.swal2-cancel.swal2-styled.swal2-default-outline, button.swal2-cancel.swal2-styled.swal2-default-outline:hover {
    background-color: var(--darkorange) !important;
    color: var(--white) !important;
    padding: 8px;
    height: 40px;
    background-image: none !important;

}
button.swal2-confirm.swal2-styled.swal2-default-outline, button.swal2-confirm.swal2-styled.swal2-default-outline:hover {
    background-color: transparent !important;
    color: var(--black) !important;
    border: 1px solid var(--black) !important;
    padding: 8px;
    height: 40px;
    background-image: none !important;
}
div:where(.swal2-container) button:where(.swal2-close):hover {
    color: var(--black) !important;
}

.input--text {
    font-size: 14px;
    height: 55px;
    background-color: var(--lightgrey);
    border: 0px;
    border-radius: 35px;
    padding-left: 16px;
    color: var(--black);
}
.input--text:focus {
    color: var(--black);
}
input:-internal-autofill-selected {
    background-color: var(--lightgrey);

}
.modal--btn--submit::after {
    content: 'Create treatment';
}
textarea {
    resize: none;
}

/*Hide all modal fieldsets except first fieldset*/
#create-treatment .modal_fieldset:not(:first-of-type) {
    display: none;
}

.modal_fieldset {
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    overflow-x: hidden;
}
.error {
    color: #d74545;
}
.success {
    color: #1c6e37;
}




/* Button Group */
.btn-group-tonalref .col-4 {
    padding-top: 20px;
}

.btn--directorref, .btn--directorref:hover {
    box-shadow: none !important;
}
.btn--directorref.active {
    background: var(--lightorange);
    color: var(--black);
}


.file--btn--delete--audio,
.file--btn--delete--brief,
.delete-file-audio-detail {
    display: none;
    z-index: 10;
}


.audio--language--wrapper{
    display: none;
}


@media only screen and (max-width: 991px) {
    .input--text {
        height: 45px;
    }
}
@media only screen and (max-width: 576px) {
    .modal--btn--submit::after {
        content: 'Create';
    }
}

/******* TREATMENT DETAIL  */
#timer {
    display: none;
}
.recording-buttons {
    display: flex;
}
#volume-bar {
    display: none;
    vertical-align: middle;
    position: absolute;
    left: 0;
    bottom: 42px;
    width: 100%;
    box-shadow: 0 4px 5px 0 rgba(var(--cui-elevation-base-color, 60, 75, 100), .14), 0 1px 10px 0 rgba(var(--cui-elevation-base-color, 60, 75, 100), .12), 0 2px 4px -1px rgba(var(--cui-elevation-base-color, 60, 75, 100), .20);
    border-radius: var(--border-radius);
    padding: 10px;
    background-color: var(--white);
}
.fulltreatment--header, .fulltreatment--content {
    border-radius: var(--border-radius);
}
.fulltreatment--content {
    height: calc(100% - 130px);
}
#nav-fulltreatment {
    position: relative;
}
#fullTreatmentContent {
    height: 100%;
    overflow-y: scroll;
}
#compareBtnInline {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    padding: 8px 12px;
}


/* Branding and Project Name */
.wrapper--section--header {
    border-bottom: 1px solid var(--mediumgrey);
}
.wrapper--section--header--back {
    width: fit-content;
}
.project--name--display, .brand--name--display {
    width: fit-content;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 30px;
    transition: background-color 0.2s ease;
}
.project--name--display:hover, .brand--name--display:hover {
    background-color: var(--lightgrey);
}
.project--name--edit .btn, .brand--name--edit .btn {
    border-radius: 0 25px 25px 0;
    border: 0px;
    border-left: none;
    padding: 7.1px 12px;
}
.project--name--edit .btn:disabled, .brand--name--edit .btn:disabled {
    opacity: 1 !important;
}

.project--name--edit, .brand--name--edit {
    min-width: 140px;
    width: fit-content;
    display: inline-flex;
}

.project--name--edit .input-group, .brand--name--edit .input-group {
    width: fit-content;
    display: inline-flex;
    align-items: center;
}
.btn--name--edit--save, .btn--brand--edit--save {
    border: 0px !important;

}
.project--name--edit .form-control, .brand--name--edit .form-control {
    border-radius: 25px 0 0 25px;
    border: 0px;
    background: var(--lightgrey);
    color: var(--black);
    padding: 8px 20px 7px 20px;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    font-size: 16px;
    line-height: 23px;
}
.project--name--edit .form-control::placeholder, .brand--name--edit .form-control::placeholder {
    color: var(--grey);
}
.project--name--edit .form-control:focus, .brand--name--edit .form-control:focus {
    box-shadow: none;
}
.project--name--edit--separator {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    font-size: 20px;
    padding-bottom: 5px;
}



/* Wrapper Section */
.wrapper--section {
    overflow-y: scroll;
    height: 100%;
    position: relative;
}
.alert--custom {
    border: 1px solid var(--darkorange);
    background: var(--darkorange)1d;
}
.wrapper--section .dropdown-toggle {
    box-shadow: none !important;
}
.dropdown--toggle--sections {
    margin: 0px auto;
}

.dropdown-toggle::after {
    content: '\f078';
    font-family: fontAwesome;
    border: 0px;
    font-size: 14px;
}

/* Remove dropdown arrow from navbar */
.navbar--lp .nav--dropdown .dropdown-toggle::after {
    display: none;
}
/* .dropdown-toggle, .dropdown-toggle:hover {
    color: var(--black);

} */
.section--dropdown {
    border: 1px solid var(--lightgrey) !important;
    padding: 10px;
    border-radius: 30px;
    background: var(--white);
    max-width: 300px;
}
.dropdown-btn{
    border-radius: 30px;
    text-align: left;
}
.dropdown-btn:hover {
    background: var(--lightgrey);
}
.custom-section-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.custom-section-input {
    width: 100%;
    padding-right: 35px; /* Space for the button */
    border-color: var(--mediumgrey);
    color: var(--black);
    font-size: 15px;
}
.custom-section-input::placeholder {
    color: var(--grey)
}
.custom-section-input:focus {
    border-color: var(--mediumgrey);
    box-shadow: none;
    color: var(--black);
}

.custom-section-add {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.exchange--prompt--textarea {
    max-height: 150px;
    overflow-y: auto;
    border-radius: var(--border-radius);
    border: 0px ;
    outline: 0px;
    background: var(--white);
}
.exchange--prompt--inputs {
    border-radius: var(--border-radius);
    background: var(--white);
}
.wrapper--exchange--prompt {
    padding: 0px 15px;
    border-radius: 15px;
    border: 0px;
    margin: 0px auto;
}


.loading--word {
    display: flex;
    gap: 0.02em;
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin: 0px auto;
    max-width: fit-content;
  }
  
.loading--word span {
    opacity: 0.1;
    animation: fade 2.2s infinite ease-in-out;
  }
.loading--word--audio, .loading--word--writing {
    display: flex;
    gap: 0.02em;
    font-size: 15px;
    font-weight: 400;
    color: var(--black);
    margin: 0px auto;
    max-width: fit-content;
  }
.loading--word--audio span, .loading--word--writing span {
    opacity: 1;
    animation: fade 2.2s infinite ease-in-out;
  }

  
  @keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

#loadingContainerEditor {
    display: none;
}

.spinner-grow.bg--dark {
    width: 5px;
    height: 5px;
    margin: 0px 2px;
}
.wrapper--exchange {
    overflow-y: hidden;
    height: 100%;
    margin: 0px auto;
    max-width: 1100px;
}
.wrapper--exchange .tab-content {
    height: calc(100% - 50px);
}
.wrapper--exchange .tab-content > .active {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    align-content: space-between;
    overflow-y: scroll;
    overflow-x: hidden;
    gap: 30px;
}
.wrapper--exchange .card-body {
    overflow-y: auto;
    display: inline-flex;
    height: 100%;
    max-height: 60vh;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.wrapper--exchange .card-body::-webkit-scrollbar,
.exchange--prompt--textarea::-webkit-scrollbar,
.exchange--output--text::-webkit-scrollbar{
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.wrapper--exchange .card-body,
.exchange--prompt--textarea{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.wrapper--detail--row {
    height: var(--min-height-desktop);
    background: var(--lightgrey);
}
.btn--prompt {
    border-radius: 15px;
    background: var(--lightgrey);
    box-shadow: none !important;
}
.wrapper--section--audioprompt, .wrapper--section--insights {
    padding: 20px;
}

.prompt--btn--submit {
    padding: 4px 8px;
    min-width: fit-content;
}
.choose--writingstyle {
    padding: 4px 8px;
}

.char-warning {
    padding: 20px 15px 0px;
    background: transparent;

}
.brief--summary, .audio--summary, .brief--keypoints {
    background: #edf3f8;
    border-radius: var(--border-radius);
}

/* TEXT EDITOR */

.ql-container {
    height: calc(100% - 135px) !important;
    max-height: calc(100% - 135px) !important;
}
.ql-container.ql-snow{
    border: 0px !important;
}
.editor--toolbar--alerts {
    border-bottom: 1px solid var(--lightgrey);

}
@media only screen and (max-width: 575px) {
    .ql-container {
        height: calc(100% - 175px) !important;
        max-height: calc(100% - 175px) !important;
    }
}
#includeInTreatmentBtn {
    width: 35px;
    height: 35px;
}
.wrapper--editor {
    margin: 0 auto;
    border-radius: var(--border-radius);
    height: 50vh;
    width: 100%;
}
.wrapper--editor.hide {
    display: none;
}
/* Loading Steps Animation */
.progress {
    background-color: var(--mediumgrey);
}
.loading-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.loading-steps .step {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: all 0.3s ease;
    font-size: 18px;
    line-height: 25px;
}
@keyframes stepPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
.step.active {
    animation: stepPulse 2s ease-in-out infinite;
    font-weight: 600;
}


.loading-steps .step.active {
    opacity: 1;
    transform: scale(1.05);
}

.loading-steps .step i {
    font-size: 1.2rem;
}
@keyframes paragraphEaseIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.paragraph-animation .ql-editor p{
    animation: paragraphEaseIn 0.8s ease-out;
}


#editor p {
    padding-bottom: 15px;
    font-family: Roboto;
}

#editor p::selection {
    background: var(--lightorange);
}

/* Sentence highlighting styles */
.ql-editor .sentence-highlight {
    background-color: var(--lightorange);
    border-radius: 3px;
    padding: 2px 0;
    transition: background-color 0.2s ease;
}

.ql-editor .sentence-highlight:hover {
    background-color: var(--lightorange);
}
.ql-editor {
    padding: 1rem !important;
}
.editor--btn--download {
    cursor: pointer;
}
.preview--content {
    overflow: scroll;
    height: calc(100% - 70px) !important;
    max-height: calc(100% - 70px) !important;
}
#compareBtn {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px;
}

/* UserContent Dropdown Styling */
#userContentDropdown {
    display: inline-block;
    vertical-align: middle;
}

#userContentDropdown .btn {
    transition: all 0.2s ease;
}

#userContentDropdown .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--lightgrey);
    color: var(--grey);
    border-color: var(--lightgrey);
}

#userContentDropdown .btn:disabled:hover {
    background: var(--lightgrey);
    border-color: var(--lightgrey);
    color: var(--grey);
}

#userContentDropdown .dropdown-menu {
    min-width: 250px;
    border: 1px solid var(--lightgrey);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
}

#userContentDropdown .dropdown-item {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--black);
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
}

#userContentDropdown .dropdown-item:hover {
    background: var(--lightgrey);
    color: var(--black);
}

#userContentDropdown .dropdown-item:active {
    background: var(--mediumgrey);
    color: var(--black);
}

#userContentDropdown .text-muted {
    color: var(--grey) !important;
    font-size: 0.75rem;
}
@media only screen and (max-width: 1199px) {
    #userContentDropdown .btn {
        max-width: 300px;
    }
    #userContentDropdownText {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}



/* Mobile responsive adjustments for userContent dropdown */
@media only screen and (max-width: 991px) {

    
    #userContentDropdown .dropdown-menu {
        min-width: 200px;
    }
    
    #userContentDropdown .dropdown-item {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    #userContentDropdown .text-muted {
        font-size: 0.7rem;
    }
    .wrapper--editor {
        top: 0px;
        height: 80vh;
    }
    .exchange--prompt--textarea {
        margin-top: 20px;
        position: relative;
    }
    .wrapper--section--audioprompt {
        padding: 0px;
    }
}


/* tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}
.wrapper--editor--tooltip {
    display: none;
    width: auto;
    position: absolute;
    background-color: var(--white);
    border-radius: 10px;
    z-index: 1;
    box-shadow: rgb(163 163 163) 0px 3px 16px 0px;
}
.wrapper--editor--tooltip .btn {
    border-radius: 20px;
}
.wrapper--editor--tooltip .btn:hover {
    background-color: var(--lightgrey);
}


/* Text Options */
.wrapper--editor--options {
    position: absolute;
    display: none;
    width: fit-content;
    z-index: 100;
    border-radius: 10px;
    width: 360px;
    min-height: 120px;
    box-shadow: rgb(163 163 163) 0px 3px 16px 0px;
    background-color: var(--lightgrey);
}

#optionsLoading {
    display: none;
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 4px);
}
.fa-xmark {
    cursor: pointer;
}

@media only screen and (max-width: 991px) { 
    body.no-scroll {
        overflow: scroll;
    }
    .wrapper--detail--row {
        height: 100%;   
        min-height: var(--min-height-desktop);
        padding: 0px 15px;
    }
    .wrapper--section{
        height: auto;
        min-height: 300px;
    }
    .wrapper--exchange {
        height: auto;
        padding: 30px 0px !important;
    }


    .wrapper--section {
        border: 0px;
        margin-top: 20px;
        border-radius: 30px;
    }

    span.ql-formats:nth-of-type(2), span.ql-formats:nth-of-type(3), span.ql-formats:nth-of-type(4) {
        display: none;
    }
    .editor--toolbar--alerts .dropdown {
        max-width: 80%;
    }
    .editor--toolbar--alerts .dropdown .dropdown-toggle{
        width: 100%;
    }
    #userContentDropdownText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
}


/***** PROFILE  */
.wrapper--profile {
    min-height: var(--min-height-desktop);
}
.wrapper--profile--content, .wrapper--creditmanagement--content {
    max-width: 1200px;
    margin: 0px auto;
    border-radius: var(--border-radius);
}
.wrapper--profile---input, .wrapper--billing---input {
    background: var(--white);
    border-radius: 15px;
    box-shadow: rgb(194 194 194) 0px 3px 16px 0px;
}
.profile--table table, .team--table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: var(--white);
}
.profile--table th,.profile--table td, .team--table th,.team--table td {
    padding: 15px;
    text-align: left;
}
.profile--table th, .team--table th {
    background-color: var(--mediumgrey);
    color: var(--black);
    font-weight: var(--semibold);
}
.profile--table tbody tr:nth-child(odd), .team--table tbody tr:nth-child(odd)  {
    background-color: var(--lightgrey);
}
.dt-paging-button {
    border: 0px;
    padding: 5px 12px;
    border-radius: 5px;
    margin: 0px 2px;
    width: 40px;

}
.dt-paging-button.first,
.dt-paging-button.previous,
.dt-paging-button.last,
.dt-paging-button.next {
     margin: 0px 8px;
}
/* Responsive styling */
@media (max-width: 1200px) {
    .team--table tbody {
        display: table-caption;
    }
    .team--table th {
        display: none; /* Hide headers */
    }
    .team--table tr {
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 5px;
    }
    .team--table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 14px;
        position: relative;
    }
    .team--table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        color: #333;
        width: 50%;
        flex-basis: 50%;
        text-align: left;
        padding-right: 10px;
    }
    .team--table td:last-child {
        padding-bottom: 0; /* Optional for visual */
    }
    .team--table a {
        text-align: right;
    }
}

/* Responsive styling */
@media (max-width: 768px) {
    .profile--table tbody {
        display: table-caption;
    }
    .profile--table th  {
        display: none; /* Hide headers */
    }
    .profile--table tr {
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 5px;
    }
    .profile--table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 14px;
        position: relative;
        text-align: right;
    }
    .profile--table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        color: #333;
        width: 50%;
        flex-basis: 50%;
        text-align: left;
        padding-right: 10px;
    }
    .profile--table td:last-child{
        padding-bottom: 0; /* Optional for visual */
    }
    .profile--table a {
        text-align: right;
    }
}

/****** WRITING STYLE */
.personalize--wrapper {
    border-radius: var(--border-radius);
}
.styles--wrapper {
    min-height: var(--min-height-desktop);
}
.styles--upload  {
    border-radius: 30px;
}
.styles--upload--finished {
    display: none;
}
.styles--wrapper--upload, .styles--wrapper--output {
    border-radius: 30px;
    box-shadow: rgb(194 194 194) 0px 3px 16px 0px;

}
.styles--wrapper--output {
    height: fit-content;
}
.styles--wrapper--loading, .styles--wrapper--summary, .styles--wrapper--nocontent, .styles--upload--error {
    display: none;
}


.placeholder--line--header {
    width: 30%;
    height: 40px;
    background-color: var(--lightgrey);
    border-radius: 5px;
    margin: 0px 0px 30px;
}
.placeholder--line {
    width: 100%;
    height: 20px;
    background-color: var(--lightgrey);
    border-radius: 5px;
    margin: 18px 0px;
}


@media only screen and (max-width: 991px) { 
 
    .styles--upload {
        padding: 10px;
    }

}
/* QQ Uploader */
.qq-uploader {
    border-radius: var(--border-radius);
    max-height: unset;
    background: transparent;
    padding: 20px;
    border-color: var(--grey);
    border-width: 1px;
    min-height: 80px;
}

.qq-upload-list {
    box-shadow: unset;
    max-height: unset;
}
.qq-upload-drop-area, .qq-upload-drop-area-active {
    background: transparent;
    border: 0px;
}
.qq-upload-list li {
    padding: 15px;
    border-radius: 15px; 
    margin: 30px 0px;
    overflow: hidden;
    box-shadow: unset;
}
.qq-upload-list li.qq-upload-success {
    background-color: var(--lightorange);
    color: var(--black);
    border-bottom: 0px;
    border-top: 0px;
}
.qq-upload-file {
    overflow: hidden;
    width: unset;
}
.qq-upload-success .progress {
    display: none;
}
.qq-upload-delete, .qq-upload-delete:hover {
    background-color: transparent;
    color: var(--black);
    border: 0px;
    text-shadow: none;
}
.qq-upload-retry {
    background-color: transparent;
    color: var(--black);
    border: 0px;
}
.qq-upload-cancel, .qq-upload-continue, .qq-upload-delete, .qq-upload-pause, .qq-upload-retry, .qq-upload-size {
    font-size: 16px;
}
.progress-bar {
    background-color: var(--darkorange);
}
.qq-upload-button-hover {
    background: transparent;
}
dialog.qq-alert-dialog-selector {
    border: 0px;
    border-radius: 15px;
    padding: 30px;
}
button.btn.btn-danger.qq-cancel-button-selector {
    background-color: var(--darkorange);
    color: var(--lightgrey);
    border-radius: 30px;
    padding: 5px 20px;
}
.modal_fieldset .audio--upload .qq-upload-file-selector {
    font-size: 13px;
    max-width: 60px;
}
.audio--lightbulb {
    padding: 5px 7px;
    border-radius: 20px;
    margin-right: 10px;
}
.modal_fieldset .qq-upload-size-selector, .modal_fieldset .qq-upload-delete-selector,.modal_fieldset .qq-upload-file-selector, .modal_fieldset .qq-upload-delete, .modal_fieldset .qq-upload-status-text-selector {
    font-size: 13px;
}


@media only screen and (max-width: 991px) { 
    .qq-upload-cancel, .qq-upload-continue, .qq-upload-delete, .qq-upload-pause, .qq-upload-retry, .qq-upload-size, .qq-upload-list li {
        font-size: 14px;
    }
}
@media only screen and (max-width: 767px) { 
    .modal_fieldset .qq-upload-file-selector {
        max-width: 60px;
    }
}
/* TEAM */
.wrapper--team {
    min-height: var(--min-height-desktop);
}
.wrapper--team--content{
    max-width: 1200px;
    margin: 0px auto;
}
.wrapper--team--table {
    border-radius: var(--border-radius);
    max-width: 1200px;
    margin: 0px auto;
}
.wrapper--teamTreatment--details {
    max-width: 1200px;
    margin: 50px auto;
    border-radius: var(--border-radius);
}
.btn--credits--company--big::after {
    content: 'Buy more credits'; 
    font-family: 'FontAwesome', 'Roboto';
}
.btn--credits--company::after {
    content: ''; 
    font-family: 'FontAwesome', 'Roboto';
}
.directorfilter--dropdown .filter-option:hover {
   background: var(--lightgrey);
   
}
.invite--email {
    min-width: 300px;
}

@media only screen and (max-width: 767px) { 
    .btn--credits--company--big::after {
        content: ''; 
        font-family: 'FontAwesome', 'Roboto';
    }
   
}

/* Landing Page */
.feature--img--container{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px;
    border-radius: var(--border-radius);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper--feature--1 .feature--img--container{
    background-image: url('/assets/img/background_orange_gradient.webp');   
}
.wrapper--feature--2 .feature--img--container{
    background-image: url('/assets/img/background_orange_gradient_01.webp');   
}
.wrapper--feature--3 .feature--img--container{
    background-image: url('/assets/img/background_orange_gradient_02.webp');   
}
.wrapper--feature--4 .feature--img--container{
    background-image: url('/assets/img/background_orange_gradient_03.webp');   
}   
.wrapper--feature--5 .feature--img--container{
    background-image: url('/assets/img/background_orange_gradient_04.webp');   
}
.wrapper--feature--6 .feature--img--container{
    background-image: url('/assets/img/background_orange_gradient_05.webp');   
}

.feature--img {
    border-radius: var(--border-radius);
}
.statement--img {
    border-radius: var(--border-radius);
}
.fade-in, .steps--card {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible, .steps--card.visible{
    opacity: 1;
    transform: translateY(0);
}
.wrapper--intro--img {
    background-image: url('/assets/img/background_orange_art.webp');   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px;
    border-radius: var(--border-radius);
}
@media only screen and (max-width: 992px) { 
    .feature--img--container, .intro--img--container {
        padding: 20px;
    }
    .wrapper--intro--img {
        padding: 20px;
    }
}

video {
    border-radius: 15px;
}

.btn--lp--login::after {
    content: 'Login'; /* Use the correct Unicode for the arrow-right-to-arc icon */
    font-family: 'FontAwesome', 'Roboto';
}
.wrapper--lp {
    max-width: 1440px;
    margin: 0px auto;
    padding: 0px 20px;
}
.wrapper--lp--feature {
    min-height: 60vh;
    border-radius: var(--border-radius);
    margin-top: 50px;
    margin-bottom: 50px;
}
.btn--alert--new {
    min-width: fit-content;
}
.wrapper--hero {
    min-height: 65vh;
    margin-top: 100px;
}
.wrapper--hero--pricing {
    padding-top: 220px;
}
.wrapper--pricing--page {
    padding: 160px 0px;
}
.wrapper--contact--pricing, .wrapper--quote--pricing {
    min-height: 70vh;
    padding: 100px 0px;
}
.badge--pricing {
    width: fit-content;
}

.intro--alert {
    width: 100px;
    text-align: center;
    bottom: 5%;
    left: -5%;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.3s ease-in-out;
}
.intro--alert.show {
    opacity: 1;
    transform: scale(1);
}
.hand.hand-writing {
    animation: hand-writing 1s infinite ease-in-out;
    transform-origin: bottom right;
}
@media only screen and (max-width: 767px) { 
    .wrapper--hero {
        min-height: 55vh;
    }
}
@keyframes hand-writing {
    0%,
    100% {
        transform: translateY(0px) rotate(-1deg);
    }

    50% {
        transform: translateY(1px) rotate(0deg);
    }
}

.placeholder-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: max-content;
    box-shadow: 1px -1px 20px 0 #b6afa845;
}
.placeholder-heading {
    opacity: 0;
}
.placeholder {
    height: 16px;
    background: #f0ebe5;
    border-radius: 8px;
    opacity: 0; /* Start hidden */
    animation: shimmer 1.5s infinite linear;
    cursor: auto;
}
@keyframes shimmer {
    0% {
        background: #f0ebe5;
    }
    50% {
        background: #e0dcd5;
    }
    100% {
        background: #f0ebe5;
    }
}
.placeholder.shown { 
    opacity: 1 !important;
    height: 10px;
    border-radius: 8px;
    min-height: unset;
}
.placeholder.short {
    width: 60%;
}
.placeholder.medium {
    width: 80%;
}
.placeholder.long {
    width: 100%;
}
.wrapper--brands img {
    filter: invert(0.1);
    max-width: 80px;
}
.video--intro{
    border-radius: 15px;
    box-shadow: rgb(194 194 194) 0px 3px 16px 0px;
    max-width: 1440px;
    border: 10px solid #fff;
}
.ana--writingstyle--svg {
    transform: rotateY(180deg);
}
.ana--writingstyle--svg.svg--shadow {
    filter: drop-shadow(3px 3px 0px var(--darkorange));
}

.wrapper--writingstyles--sample--1 {
    width: 60%;
    display: flex;
    justify-self: flex-end;
    transform: rotateX(-5deg) rotateY(-25deg) skewX(2deg);
    box-shadow: -4px 4px 1px var(--darkorange);
    animation: writingStylesAnimation1 3s infinite ease-in-out;
}
@keyframes writingStylesAnimation1 {
    0% {
        transform: rotateX(-5deg) rotateY(-25deg) skewX(2deg);
        box-shadow: -4px 4px 1px var(--darkorange);
    }
    50% {
        transform: rotateX(4deg) rotateY(-23deg) skewX(2deg);
        box-shadow: -6px 6px 2px var(--darkorange);
    }
    100% {
        transform: rotateX(-5deg) rotateY(-25deg) skewX(2deg);
        box-shadow: -4px 4px 1px var(--darkorange);
    }
}
.wrapper--writingstyles--sample--2 {
    width: 60%;
    display: flex;
    justify-self: flex-end;
    transform: rotateX(4deg) rotateY(-23deg) skewX(2deg);
    box-shadow: -4px 4px 1px var(--darkorange);
    animation: writingStylesAnimation2 3s infinite ease-in-out;
}
@keyframes writingStylesAnimation2 {
    0% {
        transform: rotateX(4deg) rotateY(-23deg) skewX(2deg);
        box-shadow: -6px 6px 2px var(--darkorange);
    }
    50% {
        transform: rotateX(-5deg) rotateY(-25deg) skewX(2deg);
        box-shadow: -4px 4px 1px var(--darkorange);
    }
    100% {
        transform: rotateX(4deg) rotateY(-23deg) skewX(2deg);
        box-shadow: -6px 6px 2px var(--darkorange);
    }
}

.wrapper--upload--files-1 {
    animation: uploadAnimation 3s infinite ease-in-out;
}
.wrapper--upload--files-2 {
    animation: uploadAnimation 3s infinite ease-in-out;
    animation-delay: 1s;
}

@keyframes uploadAnimation {
    0% {
        transform: translate(0px, 0px);
        box-shadow: 0px 0px 0px var(--darkorange);

    }
    50% {
        transform: translate(10px, -20px);

    }
    100% {
        transform: translate(0px, 0px);
        box-shadow: -4px 4px 0px var(--darkorange);
    }
}
.wrapper--upload--animation {
    border: 2px dashed var(--black);
    border-radius: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    max-height: 120px;
    transform: translateX(-100px);
}
.wrapper--upload--animation .fa-cloud-arrow-up {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.5;
    transform: translate(-50%, -50%);
}


.wrapper--badge {
    transform: translate(-100px, 100px);
}
.wrapper--timer {
    transform: translate(50px, 0px);

}
@media only screen and (max-width: 767px) {  
    .wrapper--writingstyles--sample--2,  .wrapper--writingstyles--sample--1 {
        width: 75%
    }
    .wrapper--upload--animation {
        transform: translate(0, 20px);
    }
}


.fa--timer::before {
    filter:  drop-shadow(2px 2px 0px var(--black))
}
.wrapper--persona,  .wrapper--faq, .wrapper--values  {
    padding: 160px 0px;
}
.wrapper--product, .wrapper--pricing, .wrapper--cta--companies {
    padding: 120px 0px;
}
.wrapper--setup, .wrapper--howitworks  {
    padding: 160px 0px 160px 0px;
}
.wrapper--userquote {
    padding: 220px 0px;
}
.wrapper--features {
    padding: 160px 0px;
}
.wrapper--feature--subpage {
    padding: 80px 0px;
}
.wrapper--feature--subpage .wrapper--lp {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 50px;
    margin: 0px auto;
}

.wrapper--video {
    padding: 120px 0px 120px 0px;
}
.wrapper--feature .wrapper--lp {
    margin: 80px auto;
}

.wrapper--cta {
    padding: 200px 0px 60px;
}
.wrapper--howitworks--step  {
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
}
.wrapper--howitworks--step:hover {
    opacity: 1;
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.5);
}
.wrapper--howitworks--step.active-step {
    background-color: var(--white);
    opacity: 1;
    transform: translateY(-2px);
}


.wrapper--howitworks--step a,
.wrapper--howitworks--step p {
    display: none !important;  
    transition: all 0.3s ease;
}
.wrapper--howitworks--step.active-step a,
.wrapper--howitworks--step.active-step p {
    display: block !important;
}
@media only screen and (max-width: 992px) { 
    .wrapper--feature--subpage .wrapper--lp {
        padding: 30px;
    }
    .wrapper--features {
        padding: 80px 0px;
    }
    .wrapper--feature .wrapper--lp {
        margin: 40px auto;
    }
    .wrapper--userquote {
        padding: 120px 0px;
    }
}

@media only screen and (max-width: 767px) { 
    .wrapper--howitworks--step .howitworks--imgmobile {
        display: none !important;
    }
    .wrapper--howitworks--step.active-step .howitworks--imgmobile {
        display: block !important;
    }
}


.howitworks--img--container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro--img{
    border-radius: var(--border-radius);
    opacity: 0.98;
}

.wrapper--quote--user {
    border-radius: var(--border-radius);
}

.wrapper--quote--icon {
    position: absolute !important;
    font-size: 60px;
    top: 10px;
    left: -10px;
}
@media only screen and (max-width: 991px) { 
    .wrapper--quote--icon {
        font-size: 45px;
        top: -10px;
    }   
}



/* Demo styles */
.demostyles--wrapper--summary {
    border-radius: 15px;
}
.pricing--list li{
    line-height: 26px;
}
.accordion-item {
    border: 0px;
}
.accordion-button:not(.collapsed) {
    color: var(--black);
    background-color: transparent;
}
.accordion-button:focus, .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-color: transparent;
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0)
}

.dashboard--privacy--content {
    border-radius: 15px;
    box-shadow: rgb(194 194 194) 0px 3px 10px 0px;

}
.nav--brandname::after  {
    font-size: 32px;
    content: "Treatment Studio";
    font-family:'Roboto';

}

@media only screen and (max-width: 1200px) { 
    .wrapper--brands img {
        max-width: 160px;
    }
    .btn--lp--login::after {
        content: '\f090'; /* Use the correct Unicode for the arrow-right-to-arc icon */
        font-family: 'FontAwesome', 'Roboto';
    }
    .nav--brandname::after  {
        content: 'TS'; /* Use the correct Unicode for the arrow-right-to-arc icon */
        font-family:'Roboto';
    }

}



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

    .wrapper--brands img {
        width: 80px;
        margin: 10px;
    }
    .wrapper--video, .wrapper--setup, .wrapper--cta, .wrapper--persona, .wrapper--product, .wrapper--pricing, .wrapper--faq, .wrapper--cta--companies  {
        padding: 60px 0px;
    }
    .wrapper--lp--feature {
        margin: 40px 20px;
        min-height: unset;
    }
    .wrapper--security--logo {
        height: 120px;
    }
    .wrapper--badge {
        transform: translate(-50px, 50px);
       
    }
}
@media only screen and (max-width: 767px) { 

    .demostyles--menu {
        width: 50px;
        height: 15px;
    }

    .demostyles--profile {
        width: 50px;
        height: 40px;
    }

}


/***** PRODUCT TOUR  *****/
/* .uf-close-button {
    display: none;
} */
.uf-progress .uf-progress-bar {
    background-color: var(--darkorange) !important;
}

/***** DOCS *******/
.docs--wrapper--detail--list {
    border-right: 1px solid var(--mediumgrey);
}
.docs--nav-link {
    text-decoration: none;
    color: var(--black);
    padding: 8px 0;
    transition: color 0.3s ease;
}

.docs--nav-link:hover {
    color: var(--darkorange);
    text-decoration: none;
}

.docs--nav-link.active {
    color: var(--darkorange);
}

/* Content Section Transitions */
.docs--content-section {
    transition: opacity 0.3s ease;
}
.dashboard--privacy{
    padding-top: 120px;
}
.docs--wrapper {
    margin-top: 100px;
    padding: 50px 0px;
    min-height: calc(100vh - 80px);
}
.docs--wrapper--detail {
    max-width: 1200px;
    margin: 0px auto;
    border-radius: 15px;
    padding: 50px;
}

.docs--wrapper--detail  img {
    box-shadow: rgb(194 194 194) 0px 3px 10px 0px;
    border-radius: var(--border-radius);
    border: 5px solid var(--lightgrey);
}
.docs--nav-link {
    display: block;
}

/* Mobile dropdown styles */
@media (max-width: 767.98px) {
    .docs--wrapper--detail {
        padding: 20px;
    }
    .docs--wrapper--detail--list {
        background: white;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        border: 0;
    }
    
    .docs--nav--container {
        display: none;
        margin-top: 0;
        border: 1px solid var(--mediumgrey);
        padding: 20px;
        border-radius: var(--border-radius);
    }
    
    .docs--nav--container .docs--nav-link:not(.fw-semibold) {
        display: none;
    }
    
    .docs--nav--container.show {
        display: block;
    }
    
    .docs--mobile--toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--mediumgrey);
        background: white;
        padding: 12px 16px;
        border-radius: 6px;
        font-weight: 500;
    }
    
    .docs--mobile--toggle:hover {
        background: #f8f9fa;
        border-color: var(--mediumgrey);
    }
    
    .docs--toggle--icon {
        transition: transform 0.2s ease;
    }
    
    .docs--toggle--icon.rotated {
        transform: rotate(180deg);
    }
    
    .docs--wrapper--detail--detail {
        margin-top: 40px;
        padding-left: 0 !important;
    }
}

/* Desktop styles remain unchanged */
@media (min-width: 768px) {
    .docs--nav--container {
        display: block !important;
    }  
    .docs--mobile--toggle {
        display: none !important;
    }

}

/*** DEMO FORM  ****/
.demo--wrapper {
    padding-top: 120px;
    min-height: 100vh;
}
.demo--img  {
    max-width: 80px;
}
.wrapper--form {
    padding: 50px;
    border-radius: 15px;
    box-shadow: rgb(194 194 194) 0px 3px 16px 0px;
    border: 10px solid var(--lightgrey);
}
input {
    background-color: var(--lightgrey);
    outline: 0px;
}
ul {
    padding-inline-start: 30px;
}

@media only screen and (max-width: 991px) { 
    .demo--img  {
        max-width: 50px;
    }
    .wrapper--form {
        padding: 0px;
        border-radius: 30px;
    }
    .wrapper--form iframe {
        padding: 10px 0px !important;
    }
}

/*  FAQs */
.accordion--faq {
    border-radius: var(--border-radius);
    padding: 30px;
}

/**** PRODUCTION COMPANY ****/
.wrapper--pd--howitworks .howitworks--img{
    border-radius: var(--border-radius);
}
.wrapper--pd--features {
    padding: 160px 0px;
}
.pd--features--animation--container, 
.pd--features--img--container {
    border-radius: var(--border-radius);
    aspect-ratio: 2/1;
    padding: 30px;
}
.wrapper--feature--pd--1 .pd--features--img--container, 
.wrapper--feature--pd--2 .pd--features--animation--container, 
.wrapper--feature--pd--3 .pd--features--img--container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pd--features--img {
    border-radius: var(--border-radius);
    max-height: 160px;
    width: auto !important;
}
.wrapper--feature--pd--1 .pd--features--img--container {
    background-image: url('/assets/img/background_orange_art_04.webp');
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.wrapper--feature--pd--2 .pd--features--animation--container {
    background-image: url('/assets/img/background_orange_art_05.webp');
}
.wrapper--feature--pd--3 .pd--features--img--container {
    background-image: url('/assets/img/background_orange_art_01.webp');
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.pd--animation--demo--container {
    height: 160px;
    border-radius: var(--border-radius);
}
.wrapper--feature--pd .wrapper--lp {
    margin: 80px auto;
}
.text-output {
    text-align: left;
    max-width: 100%;
    min-height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.placeholder-line {
    height: 11px;
    background-color: var(--lightgrey);
    border-radius: 8px;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(10px);
    animation: slideInFade 0.5s ease forwards;
}

.placeholder-line:nth-child(1) { width: 85%; animation-delay: 0.1s; }
.placeholder-line:nth-child(2) { width: 92%; animation-delay: 0.3s; }
.placeholder-line:nth-child(3) { width: 78%; animation-delay: 0.5s; }
.placeholder-line:nth-child(4) { width: 88%; animation-delay: 0.7s; }

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

/***** DIRECTORS PAGE *****/
.wrapper--solutions--hero {
    padding: 240px 0px;
}
.wrapper--intro--directors--img {
    background-image: url(/assets/img/background_person_standing.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px;
    border-radius: var(--border-radius);
}
.intro--directors--img {
    border-radius: var(--border-radius);
}
@media only screen and (max-width: 991px) { 
    .wrapper--intro--directors--img {
        padding: 30px;
    }
}

/* WRITERS PAGE */
.wrapper--intro--writers--img {
    background-image: url(/assets/img/background_eyes.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px;
    border-radius: var(--border-radius);
}
.intro--writers--img {
    border-radius: var(--border-radius);
}
@media only screen and (max-width: 991px) { 
    .wrapper--intro--writers--img {
        padding: 30px;
    }
}

/**** CASE STUDIES PAGE ****/
.wrapper--case--study--brief {
    border-radius: var(--border-radius);
}
.wrapper--case--study--brief img {
    border-radius: var(--border-radius);
}
.wrapper--case--study {
    padding: 80px 0px;
}
.wrapper--case--study .wrapper--lp {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 50px;
    margin: 0px auto;
}
.wrapper--case--study--content {
    max-width: 600px;
}
.btn--case-study--prompt {
    background-color: #edf3f8;
    box-shadow: none;
    border-radius: var(--border-radius);
}
.input--case-study {
    border-radius: var(--border-radius);
}
.expandable--text--container {
    overflow: hidden;
}

.expandable--text--preview {
    position: relative;
    max-height: 120px;
    overflow: hidden;
}

.expandable--text--overlay {
    top: 0;
    left: 0;
    background: linear-gradient(135deg, transparent 20%, rgba(243, 243, 243, 0.8) 70%, rgba(243, 243, 243, 0.95) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.expandable--text--full {
    transition: all 0.5s ease;
    transform: translateY(0);
}

.expandable--text--full.expanding {
    animation: slideDown 0.5s ease forwards;
}

.expandable--text--full.collapsing {
    animation: slideUp 0.5s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
}

.btn--read--more {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.btn--read--more:hover {
    color: var(--darkorange);
}

.btn--read--more i {
    transition: transform 0.3s ease;
}

.btn--read--more.expanded i {
    transform: rotate(180deg);
}

.expandable--text--container.expanded .expandable--text--overlay {
    opacity: 0;
}

.expandable--text--container.expanded .expandable--text--preview {
    display: none;
}

@media only screen and (max-width: 991px) { 
    .wrapper--case--study .wrapper--lp {
        padding: 15px;
    }
}
/*** LINKTREEE ****/
.linktree--wrapper {
    padding-top: 120px;
    min-height: 100vh;
}
.linktree--wrapper img {
    border: 10px solid var(--white);
}
@media only screen and (max-width: 991px) { 
    .wrapper--solutions--hero {
        padding: 140px 0px 80px 0px;
    }
}
/* BLOG */
.wrapper--blog--hero {
    margin-top: 100px;
    padding: 100px 0px;
}
.blog--wrapper {
    padding: 120px 0px;
}
.card--blog {
    border-radius: var(--border-radius);
}
.card--blog img { 
    border-radius: var(--border-radius);
}
.author--wrapper {
    border-radius: var(--border-radius);
}
.blog--hero--backgroundimg {
    background-image: url(/assets/img/background_orange_gradient_06.webp);
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    height: 100%;
    min-height: 260px;
}
.wrapper--blog--content p, .wrapper--blog--content li{
    font-size: 16px;
    line-height: 24px;
}
.wrapper--blog--content li {
    margin-bottom: 10px;
}
.wrapper--blog--content h2, .wrapper--blog--content .heading--h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 20px;
}
.wrapper--blog--content h2:not(:first-of-type) {
    margin-top: 60px;
}
.wrapper--blog--content h3, .wrapper--blog--content .heading--h3 {
    margin-top: 30px;
    margin-bottom: 10px;
}
.blog--directory li {
    margin-bottom: 10px;
}

.blog--author--wrapper--fixed {
    position: sticky;
    top: 100px;
}
@media only screen and (max-width: 767px) {
    .wrapper--blog--content p, .wrapper--blog--content li{
        font-size: 15px;
        line-height: 23px;
    } 
    .wrapper--blog--content h2, .wrapper--blog--content .heading--h2 {
        font-size: 24px;
        line-height: 30px;
    }

}

/* Video Tutorial */
.video--tutorial {
    border-radius: 15px;
    box-shadow: rgb(194 194 194) 0px 3px 16px 0px;
    max-width: 1200px;
}

/* Toast */
.toast--analysis {
    background: var(--lightgrey) !important;
    border-radius: var(--border-radius);
    border: 0px;
}
.toast--header--analysis {
    border-radius: 15px 15px 0px 0px;
    border-bottom: 0px;
    background: var(--lightorange);
}
.toast--body--analysis {
    border-radius: 0px 0px 15px 15px;
}
.toast--warning {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: var(--red) !important;
}
/* No Sidebar Layout */
.wrapper.no-sidebar {
    margin-left: 0 !important;
    width: 100% !important;
}

.wrapper.no-sidebar .wrapper-body {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Hide sidebar toggle button when sidebar is not shown */
.wrapper.no-sidebar ~ .sidebar-toggle {
    display: none !important;
}

/* Ensure full width content when no sidebar */
.wrapper.no-sidebar .container-fluid,
.wrapper.no-sidebar .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {
    .wrapper.no-sidebar .container-fluid,
    .wrapper.no-sidebar .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1200px) {
    .wrapper.no-sidebar .container-fluid,
    .wrapper.no-sidebar .container {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

.delete-section-btn {
    margin-left: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-section-btn:hover {
    transform: scale(1.1);
}

.delete-confirmation-overlay {
    animation: fadeIn 0.2s ease-out;
}

.delete-confirmation-overlay .card {
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Editor Bottom Toolbar */
.editor--toolbar--bottom {
    border-top: 1px solid var(--lightgrey);
}






/* Toast Alerts Column */
.wrapper--toast--alerts {
    background: var(--lightgrey);
    min-height: 100vh;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-height: 100vh;
    overflow-y: scroll
}

.wrapper--toast--alerts.d-none {
    opacity: 0;
    transform: translateX(100%);
}

.wrapper--toast--alerts .toast-container {
    width: 100%;
    max-width: none;
}

.wrapper--toast--alerts .toast {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
}

/* Smooth transitions for wrapper--exchange column width changes */
.wrapper--exchange {
    transition: all 0.3s ease;
}

@media only screen and (max-width: 991px) {
    .wrapper--toast--alerts {
        min-height: auto;
        order: 3;
    }
    
    .wrapper--toast--alerts.d-none {
        transform: translateY(100%);
    }
}

/* UserContent Delete Button Styling */

/* Delete buttons in dropdown */
.delete-user-content-btn {
    transition: all 0.2s ease;
    opacity: 0.7;
    cursor: pointer;
}

.delete-user-content-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.delete-user-content-btn.fa-solid.fa-spinner {
    opacity: 1;
    transform: none;
}

/* Delete confirmation overlay styling */
.delete-user-content-confirmation-overlay .card {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#sentence-action-input {
    min-width: 280px;
    max-width: 340px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    background: #fff;
    border-radius: 20px;
    padding: 0;
    transition: box-shadow 0.2s;
    display: none; 
    position: absolute; 
    z-index: 2000;
    pointer-events: auto;
}
#sentence-action-input input[type="text"] {
    font-size: 14px;
    border: none;
    outline: none;
    background: transparent;
    min-width: 280px;
    max-width: 300px;
}
input#sentence-action-text::placeholder {
    color: var(--mediumgrey);
}
#sentence-action-input button {
    background: var(--darkorange);
    color: #fff;
    border: none;
    border-radius: 16px;
    margin-left: 6px;
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
#sentence-action-input button:hover {
    background: var(--lightorange);
}
#sentence-action-form {
    display:flex; 
    align-items:center; 
    background:#fff; 
    border-radius:20px; 
    box-shadow:0 2px 8px rgba(0,0,0,0.08); 
    padding:4px 8px;  

}
@media (max-width: 600px) {
    #sentence-action-input {
        min-width: 140px;
        max-width: 98vw;
    }
    #sentence-action-input input[type="text"] {
        min-width: 60px;
        max-width: 120px;
    }
}


/* About Page */

.wrapper--purpose {
    padding: 240px 0px;
}
.image--about, .profile--image {
    border-radius: var(--border-radius);
}
.wrapper--aboutteam {
    padding-bottom: 160px;
}

/* Features Page */
.feature--animation--container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px;
    border-radius: var(--border-radius);
    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
    position: relative;
}
.feature--animation--container--inner{
   border-radius: var(--border-radius);
}
.wrapper--feature--1 .feature--animation--container{
    background-image: url('/assets/img/background_orange_gradient_01.webp');   
}
.wrapper--feature--2 .feature--animation--container{
    background-image: url('/assets/img/background_orange_gradient_03.webp');   
}
.wrapper--feature--3 .feature--animation--container{
    background-image: url('/assets/img/background_orange_gradient_04.webp');   
}
.wrapper--feature--content {
    max-width: 600px;
}
.list--feature {
    max-width: 500px;
    margin: 0 auto !important;
}
@media only screen and (max-width: 992px) { 
    .feature--animation--container {
        padding: 15px;
    }
}
@media only screen and (max-width: 767px) { 
    .feature--animation--container--inner {
        max-height: calc(100% - 30px);
    }
}

/* Upload Demo Styles */
.ai--processing--output {
    display: flex;
}
.upload--demo--container, .upload--area, .output--area {
    border-radius: var(--border-radius);
}

  .upload--area {
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
  }
  
  .upload--area:hover {
    background-color: #e9ecef;
    border-color: #ff5e58 !important;
  }
 
  
  .upload--progress {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
  }
  
  .progress {
    height: 8px;
    background-color: #e9ecef;
  }
  
  .progress-bar {
    transition: width 0.3s ease;
  }
  
  .ai--processing {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
  }
  
  .output--area {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFadeIn 0.5s ease forwards;
    max-height: 90%;
    overflow: hidden;
  }
  .results--container {
    overflow-y: hidden;
  }
  
  .output--content {
    max-height: 400px;
    overflow-y: hidden;
  }
  .insight--item {
  opacity: 0;
  transform: translateX(-20px);
  visibility: hidden;
}

.insight--item.animate {
  animation: slideInLeft 0.5s ease forwards;
  visibility: visible;
}
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideUpFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Writing Style */
  .styles--loading--overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	border-radius: 15px;
}

.styles--loading--content {
	text-align: center;
	padding: 2rem;
}
.styles--upload--wrapper {
	position: relative;
}
.styles--details--section {
	text-align: left;
    background: var(--lightgrey);
    border-radius: var(--border-radius);
    transition: opacity 0.3s ease;
}
.styles--details--section.inactive {
	opacity: 0.5;
}

.styles--section--toggle {
	min-width: 40px;
    height: 20px;
}

.styles--details--section .form-check {
	margin-bottom: 0;
}
.form-check-input:checked {
	background-color: var(--darkorange);
	border-color: var(--darkorange);
}
.form-check-input:focus {
	box-shadow: none;
	border-color: var(--darkorange);
}

/* Quote Icon Rounded Background */
.quote--icon--bg {
	background-color: var(--darkorange);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}
.quote--icon--bg i {
	color: var(--white) !important;
}

/* Writing Style Processing Overlay */
.writingstyle--processing--overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	border-radius: 15px;
}

.writingstyle--processing--overlay .text-center {
	padding: 2rem;
}