/* ================================================================================
Item Name: SushiLab Profile Styles
================================================================================ */


/* 
** ===============================
** BEGIN: Adding Fonts
** ===============================
*/

html, body {
font-family: 'Poppins', sans-serif !important;
background: #F8FAFB !important;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: 'Poppins', sans-serif !important;
}

p {
font-family: 'Poppins', sans-serif !important;
}

input, button, select, optgroup, textarea {
font-family: 'Poppins', sans-serif !important;
}

.tooltip{
font-family: 'Poppins', sans-serif !important;
}

.navigation-main {
font-family: 'Poppins', sans-serif !important;
background: #F8FAFB !important;
}

.header-navbar {
font-family: 'Poppins', sans-serif !important;
background: #F8FAFB !important;
}

html .content.app-content {
font-family: 'Poppins', sans-serif !important;
background: #F8FAFB !important;
}
/* =============================== END: Adding Fonts =============================== */




/*
** ===============================
** BEGIN: Global Styles
** ===============================
*/

.sl-disabled {
cursor: not-allowed !important;
box-shadow: none;
opacity: 0.5;
pointer-events: none;
}
.sl-a-disabled{
opacity: 0.25 !important;
cursor: not-allowed !important;
}
.sl-disabled button{
cursor: not-allowed !important;
}

.divider-bottom-gb {
height: 1px;
width: 100%;
background: #DFE1E3;
margin: 20px 0;
}

.soon-box {
background: #516FF7;
color: #FFF;
padding: 10px 30px;
border-radius: 10px;
}

.palybtn-box {
background: #516ff7;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
}

.overlay-state-gbl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #0000004a;
}
.overlay-state-gbl {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 15px  10px;
}
.overlay-state-gbl {
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}
.overlay-state-gbl {
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}
.overlay-state-gbl.playicon{
background: transparent;
cursor: pointer;
}

.storyteller-images-box:hover .overlay-state-gbl {
opacity: 1;
visibility: visible;
}
.storyteller-images-box.coming-soon .overlay-state-gbl {
opacity: 1;
visibility: visible;
}

/** global content **/
.setface-footer-gb {
text-align: center;
}
.setface-footer-gb .facefooter-btn {
max-width: inherit !important;
min-width: inherit;
padding: 17px 30px;
border-radius: 10px;
}
/* =============================== END: Global Styles =============================== */




/* 
** ===================================
** BEGIN: Notification Styles 
** ===================================
*/

body.swal2-toast-shown .swal2-container {
width: 370px;
max-width: 100%;
padding: 0 35px;
}

.swal2-popup {
border-radius: 20px;
bottom: 100px;
box-shadow: 0 0 40px #00000030 !important;
}

h2#swal2-title {
text-align: center;
font-weight: 400;
color: #484668;
}

.swal2-toast-sushiLab {
background: #516ff7 !important;
top: 53px;
border-radius: 10px;
max-width: 220px;
box-shadow: 3px 0px 10px #627ced !important;
padding: 10px !important;
}
.swal2-toast-sushiLab #swal2-title {
color: #fbfafb;
font-size: 16px;
text-shadow: 1px 1px 6px #3f5ad3;
}

.swal2-container.swal2-top-right.swal2-backdrop-show {
background: #516ff721;
width: 100%;
pointer-events: none;
}

body.swal2-toast-shown .swal2-container {
width: 100% !important;
}
/* ============================== END: Notification Styles ============================== */




/* 
** ===============================
** BEGIN: Scrollbar Effects
** ===============================
*/

.hover-scroll {
overflow-y: auto;
scrollbar-width: thin; 
scrollbar-color: transparent transparent; 
padding-right: 4px; 
    transition: all 500ms ease-in-out;
    overflow-x: hidden;
}
.hover-scroll:hover {
scrollbar-color: rgba(107, 105, 124, 0.3) transparent;
}

.hover-scroll::-webkit-scrollbar {
width: 4px;
}
.hover-scroll::-webkit-scrollbar-track {
background: transparent;
}
.hover-scroll::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 2px;
transition: all 500ms ease-in-out;
min-height: 20px; /* Minimum thumb height */
}
.hover-scroll:hover::-webkit-scrollbar-thumb {
background: rgba(22, 21, 22, 0.5);
}
.hover-scroll:hover::-webkit-scrollbar-thumb:hover {
background: rgba(27, 25, 34, 0.5);
}
/* =============================== END: Scrollbar Effects =============================== */




/* 
** ===============================
** BEGIN: Sidebar Dropdown List
** ===============================
*/

.user-profile-section{
position: relative;
}

.sidebar-dd-list {
padding: 0;
margin: 0;
}
.sidebar-dd-list a {
display: block;
padding: 8px 10px;
color: #353742;
transition: all 300ms ease-in-out;
}
.sidebar-dd-list a:hover {
background: #d3bcf175;
}

.sidebar-gbl-dropdown {
width: max-content;
min-width: 200px;
}
.sidebar-gbl-dropdown {
background: #FFF;
padding: 15px 5px;
box-shadow: 0 2px 24px 0 #171f4952;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
transition: all 300ms ease-in-out;
}
.sidebar-gbl-dropdown{
transform: translate(-50%, -30%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sidebar-gbl-dropdown.show{
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%);
pointer-events: all;
}

.user-profile-section .sidebar-gbl-dropdown {
top: 40%;
left: 45%;
transform: translate(-50%, -80%);
}
/* =============================== END: Sidebar Dropdown List =============================== */




/* 
** ===============================
** BEGIN: Sidebar Styles
** ===============================
*/

.main-menu {
background-color: white;
border-right: 1px solid #eaeaea;
width: 260px;
max-width: 260px;
}
.main-menu.menu-light .navigation {
background: #ffffff !important;
}
.main-menu.menu-light .sidebar-contentscroll .navigation > li.open:not(.menu-item-closing) > a {
background: #ffffff;
}

.navbar-header {
padding: 16px 0;
border-bottom: 1px solid #f0f0f0;
}

.sidebar-header-section {
text-align: center;
padding: 35px 0 8px 0;
}
.sidebar-brand-container {
padding: 0;
}
.sidebar-separator {
width: 90%;
margin: 14.4px auto 4px auto;
border-bottom: 1px solid #DFE1E3 !important;
border-radius: 1px;
height: 0;
}

.storyteller-title {
color: #516FF7;
font-size: 32px;
font-weight: 600;
line-height: 42px;
letter-spacing: 0;
}
.subtitle {
color: #9593AC;
font-size: 13.6px;
opacity: 0.8;
}

.profile-percent {
position: absolute;
top: 0;
right: 0;
background: #fff;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
border-radius: 50px;
z-index: 1;
color: #516ff7;
font-weight: 600;
}
.profile-percent {
box-shadow: 0px 3px 5px #64666f;
}

.user-avatar-wrapper {
position: relative;
}

.lock-icon {
position: absolute;
top: -5px;
right: 0;
}
.lock-icon rect {
fill: #262543;
}
.action-audio .lock-icon rect {
fill: #484668;
}

.active-icon {
position: absolute;
top: 0;
right: 0;
}
.active-icon svg {
background: #ffffff;
border-radius: 50px;
border: solid 2px #516ff7;
box-shadow: 1px 1px 5px #8f8f8f;
}

/** Sidebar: User Profile Section **/
.main-menu.menu-light .navigation > li ul li > a {
padding: 10px 15px 10px 10px !important;
}

.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li > a svg, 
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li > a i {
margin-right: 1rem;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li > a.active svg path {
stroke: #FFF;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li.menu-item-idea > a.active svg path {
fill: #FFF;
}

.link-soon-badge {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: #516ff7;
color: #fff;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
}
.user-profile-section {
padding: 8px 18px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}

.profile-card {
background-color: #FCFCFF;
border-radius: 16px;
padding: 16px 12px !important;
box-shadow: 0 2px 12px 0 rgba(81,111,247,0.04);
display: flex;
flex-direction: column;
align-items: center;
transition: all 300ms ease-in-out;
}
.profile-card:hover {
background-color: #E3E4F2;
}
.profile-card.active {
background-color: #516FF7;
}
.profile-card.active:hover   {
background-color: #3F5BD9;
}
.manage-profile-link:hover {
color: #5096FF;
}

.user-name {
color: #353742;
/*font-weight: 700;*/
font-size: 20px;
margin-bottom: 4px;
}
.user-profile-section .user-name.active {
color: #FFF;
}
.user-profile-section .user-name {
color: #353742;
font-size: 22px;
font-weight: 400;
}
.user-profile-section .user-name {
position: relative;
}

.dropdown-arrow-icons {
position: absolute;
right: -28px;
background: #D0D1F7;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30px;
top: 1px;
transition: all 300ms ease-in-out;
}
.dropdown-arrow-icons svg {
margin-left: -1px;
margin-top: 2px;
}

.user-profile-section:hover .dropdown-arrow-icons {
background: #1F41D8;
}
.user-profile-section:hover .dropdown-arrow-icons svg path {
fill: #ffffff;
}
.user-profile-section .user-name  .sidebar-dd-list a {
font-size: 1rem;
text-align: left;
}
.user-profile-section .user-name .sidebar-gbl-dropdown {
top: 0 !important;
transform: translate(-50%, 30%);
}

.username-select {
position: relative;
}

.manage-profile-link {
color: #5096FF;
font-size: 16px;
text-decoration: none;
margin-top: 2.4px;
}
.manage-profile-link.active {
color: #FFF;
}

.manage-profile-link:hover {
text-decoration: underline;
}

.user-avatar-wrapper {
width: 150px;
height: 154.84px; 
display: flex;
align-items: center;
justify-content: center;
}
.user-avatar {
width: 100%;
height: 100%; 
color: #fff;
box-shadow: 0 2px 12px 0 rgba(81,111,247,0.08);
font-size: 32px;
font-weight: 600;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.user-avatar.active {
background: #fff;
color: #516FF7;
}
.avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}

.navigation-main {
padding: 0;
margin: 0;
list-style: none;
}

.user-avatar-select {
border: solid 5px #516FF7;
border-radius: 150px;
overflow: hidden;
height: 100%;
width: 100%;
display: none;
}
.user-avatar-select.selected {
display: block;
}
.user-avatar-wrapper.active{
background-color: transparent;
}
.user-avatar-wrapper.active .user-avatar-select.selected,
.user-avatar-wrapper.active .user-avatar-default.selected {
display: block;
border-color: #FFF;
}

.user-avatar-default {
height: 100%;
width: 100%;
display: none;
}
.user-avatar-default.selected {
display: block;
}

.username-select, .username-default {
display: none;
}
.username-select.selected, 
.username-default.selected {
display: block;
}

.img-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000073;
}
.img-placeholder {
display: flex;
align-items: center;
justify-content: center;
border: solid 5px #516FF7;
border-radius: 100%;
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}

/*.user-profile-section:hover .img-placeholder {
opacity: 1;
visibility: visible;
}*/
.profile-percent{
transition: all 300ms ease-in-out;
}
.user-profile-section:hover .profile-percent{
background: #516FF7;
color: #FFF;
box-shadow: 0px 3px 5px #3857e4;
}
.user-profile-section .header-options-icon{
margin-left: 165px;
}
.user-profile-section .profile-card.active .header-options-icon svg path {
fill: white !important;
outline: #fff !important;
}


/** Sidebar: Menu sections styling **/
.menu-section {
margin-bottom: 8px;
padding: 0 16px;
}
.menu-header {
padding: 12px 0 8px;
color: #444;
font-weight: 500;
text-decoration: none;
border-radius: 6px;
}
.menu-header:hover {
background-color: #f8f8f8;
}
.menu-title {
font-weight: 500;
font-size: 16px;
color: #444;
}
.menu-toggle-icon {
color: #888;
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.rotate-icon {
transform: rotate(-180deg);
}

.menu-items {
list-style: none;
padding: 0 0 0 12px;
margin: 8px 0;
}
.menu-item a {
display: flex;
align-items: center;
padding: 8px 12px;
color: #555;
text-decoration: none;
border-radius: 6px;
font-size: 15.2px;
}
.menu-item a:hover {
background-color: #f5f5f5;
}
.menu-icon {
margin-right: 12px;
font-size: 17.6px;
width: 20px;
display: inline-flex;
justify-content: center;
}
.main-menu .main-menu-content {
/*  height: calc(90% - 30%) !important; */
height: auto !important;
position: relative;

}

/** Sidebar: Scroll **/
.sidebar-contentscroll {
overflow-y: auto;
height: calc(100% - 210px);
}

/** Sidebar: Credit section **/
.sidebar-credit-block {
position: absolute;
bottom: 10px;
width: 100%;
left: 0px;
padding: 10px 20px;
overflow: hidden;
}
.credit-top {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.mb-credit-content {
font-size: 18px;
font-family: 'Poppins';
font-weight: 400;
color: #353742;
}
.mb-credit-icon {
margin-right: 0px;
}
.mb-credit-icon svg {
width: 30px;
height: 30px;
}

.copy-right span {
font-size: 16px;
font-weight: 600;
}
.copy-right {
font-size: 14px;
font-weight: 400;
color: #9593AC;
text-align: center;
}
.credit-top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #F8FAFB;
max-width: 100%;
margin: 0 auto;
padding: 8px 10px;
border-radius: 50px;
}
.credit-dot-icon {
padding: 5px;
cursor: pointer;
}
.separator-line {
background: #DFE1E3;
height: 1px;
max-width: 100%;
margin: 20px auto;
}

/* Hide scrollbars but allow scrolling */
.main-menu-content {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
height: calc(100% - 160px);
} 
.main-menu-content::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.main-menu.menu-light .navigation > li ul .active {
box-shadow: none;
background: #516FF7;
color: #fff;
}
.shadow-bottom {
display: none;
}
/* ========================= END: Sidebar Styles ========================= */




/* 
** ===============================
** BEGIN: Header Styles
** ===============================
*/

html .content.app-content {
    padding: calc(2rem + 4.45rem + 1.3rem) 2rem 150px;
}

.header-profile-row {
    width: 100%;
    padding: 0px 0px 0px 0px;
}
.header-profile-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header-profile-title {
    font-size: 32px;
    font-weight: 400;
    color: #353742;
    letter-spacing: 0;
    line-height: 50px;
}

.header-profile-actions {
    display: flex;
    align-items: center;
}
.header-profile-actions {
    display: flex;
    align-items: center;
    gap: 16.2px;
    flex-wrap: wrap;
}
.header-link {
    color: #516FF7;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
}
.header-button {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    background-color: #516FF7;
    color: white;
    font-weight: 400;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    box-shadow: 0 4px 6px rgba(81, 111, 247, 0.15);
}
.header-button span {
    margin-left: 10px;
}
.header-loader .generating-indicator{
    padding: 10px 63px;
}


.header-separator {
    width: 99%;
    margin: 1.6px auto 3.2px auto;
    border-bottom: 2px solid #DFE1E3;
    border-radius: 1px;
    height: 0;
}
.header-navbar .navbar-container {
    border-bottom: 1px solid #DFE1E3 !important;
}
.credits-pill {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 32px;
    padding: 6.4px 22.4px 6.4px 14.4px;
    font-size: 16.8px;
    color: #484668;
    font-weight: 500;
    box-shadow: 0 1px 4px 0 rgba(81,111,247,0.07);
    white-space: nowrap;
} 
.credits-text {
    display: inline-block;
}
.credits-dot {
    display: inline-block;
    min-width: 19.2px;
    height: 19.2px;
    background: #fff;
    border: 4px solid #f4f6fb;
    border-radius: 50%;
    margin-right: 11.2px;
    box-shadow: 0 0 0 3px #eceffe;
    flex-shrink: 0;
}
.upgrade-btn {
    background: #516FF7;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 32px;
    padding: 7.2px 33.6px;
    font-size: 17.44px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 1px 4px 0 rgba(81,111,247,0.12);
    white-space: nowrap;
}
.upgrade-btn:hover {
    background: #3452c7;
}


/* Responsive styles */
@media (max-width: 991.98px) {
.header-profile-title {
    font-size: 28px;
}
.credits-pill {
    font-size: 16px;
    padding: 5.6px 19.2px 5.6px 12.8px;
}
.upgrade-btn {
    font-size: 16px;
    padding: 6.4px 28.8px;
}
}

@media (max-width: 767.98px) {
.header-profile-title {
    font-size: 24px;
    /* margin-bottom: 16px; */
}	
.header-profile-actions {
    width: 100%;
    justify-content: space-between;
}
.credits-pill {
    font-size: 15.2px;
}
.upgrade-btn {
    font-size: 15.2px;
    padding: 5.6px 25.6px;
}
.generate-image-content {
    padding: 0 1rem 0 1.6rem;
}
}

@media (max-width: 575.98px) { 
.header-profile-title {
    font-size: 21.6px;
}
.header-profile-actions {
    gap: 12.8px;
}	
.credits-pill {
    font-size: 14.4px;
    padding: 4.8px 16px 4.8px 11.2px;
}	
.credits-dot {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}	
.upgrade-btn {
    font-size: 14.4px;
    padding: 4.8px 19.2px;
}	
.navbar-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* =============================== END: Header Styles =============================== */




/* 
** ======================================
** BEGIN: Video Intro Popup Styles 
** ======================================
*/

.assistant-frame {
position: fixed;
bottom: 40px;
right: 30px;
background: #FFF;
padding: 25px 30px 30px 30px;
box-shadow: 0 4px 24px 0 #171F4980;
border-radius: 20px;
z-index: 12;
}
.assistant-frame {
width: 310px;
}
.assist-inner-video {
position: relative;
width: 100%;
max-width: 520px;
}
.assist-video.video-container {
border-radius: 10px;
}
.assist-video-close img {
width: 18px;
cursor: pointer;
}

.assis-video-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 15px;
}
.assis-video-title {
font-size: 18px;
color: #353742;
}
.assis-footer-title {
color: #5096FF;
padding-top: 15px;
cursor: pointer;
font-size: 15px;
}

.video-container {
width: 100%;
max-width: 350px;
position: relative;
padding-top: calc(415 / 350 * 100%); /* (height/width * 100%) */
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.circle-assistant {
width: 150px;
height: 150px;
border-radius: 150px;
padding: 15px;
cursor: pointer;
}
.circle-assistant .assis-video-header {
display: none;
}
.circle-assistant .assis-video-footer {
display: none;
}
.circle-assistant .video-container {
padding-top: calc(350 / 350 * 100%);
border-radius: 150px !important;
}

.assist-video .playbtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80px;
cursor: pointer;
}
.assist-video .playbtn svg {
width: 100%;
}

/* On click: shrink, move to bottom right, and become round */
.assistant-frame.circle-assistant {
transform: translateY(0);
}
.assistant-frame{
animation: fadeOut 0.5s forwards;
}
.assistant-frame.circle-assistant{
animation: fadeIn 0.5s forwards;
}


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

@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
/* ==================== END: Video Introduction Popup Styles ==================== */




/* 
** ===================================
** BEGIN: Storyteller Page Styles
** ===================================
*/

/* Main container styles */
.storyteller-main-container {
position: relative;
width: 100%;
height: calc(100vh - 130px);
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: -150px;
}

/* Avatar and circle styles */
.avatar-container {
position: relative;
width: 390px;
height: 390px;
display: flex;
justify-content: center;
align-items: center;
}
.inner-circle {
position: relative;
width: 100%;
height: 100%;
background-color: #F8FAFB;
border-radius: 50%;
z-index: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 30px #00000008;
}
.avatar-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border: solid 20px #FFF;
border-radius: 100%;
overflow: hidden;
}
.avatar-svg {
width: 100%;
height: 100%;
margin-bottom: -60px;
padding: 25px 15px 0px 15px;
margin-right: -15px;
}

.storyteller-select, .storyteller-default {
display: none;
}
.storyteller-select.selected, .storyteller-default.selected {
display: block;
cursor: pointer;
height: 100%;
width: 100%;
}
.storyteller-select img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: top !important;
}

.action-selected .action-circle {
background: #516ff7;
border-color: #516ff7;
}
.action-selected .action-circle svg path {
fill: white !important;
    outline: #fff !important;
}
.action-brand.action-selected .action-circle svg path,
.action-profile.action-selected .action-circle svg path,
.action-social.action-selected .action-circle svg path{
stroke:#fff !important;
fill: transparent !important;
}

/* Action button styles */
.action-button {
/*width: 28px;
height: 28px;
border-radius: 4px;*/
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #64748b;
cursor: pointer;    
position: absolute;
transition: background-color 0.3s ease, color 0.3s ease;
}
.action-button:hover {
color: #000;
}
.action-button:hover .action-circle-hovered {
    box-shadow: 2px 2px 30px #516ff7;
border: solid 3px #516ff7;
}
.action-button .action-circle:hover {
box-shadow: 2px 2px 30px #516ff7;
border: solid 3px #516ff7;
}

.action-top {
top: -350px;
left: 50%;
transform: translateX(-50%);
}
.action-brand {
bottom: 10%;
left: 70px;
}
.action-image {
top: 0%;
left: 196px;
}
.action-audio {
top: 120px;
right: -20px;
transform: translateX(-50%);
}
.action-social {
top: 25%;
left: 10px;
}
.action-profile {
bottom: 10%;
right: 70px;
}

.action-button.action-brand .action-tooltip{
left: 50%;
text-align: center;
right: inherit;
transform: translateX(-50%);
}
.action-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FAFCFF;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
border: solid 3px #FFF;
}
.action-tooltip {
position: absolute;
bottom: -25px;
background-color: #516FF7;
color: white;
padding: 5px 16px;
border-radius: 50px;
font-size: 22px;
white-space: nowrap;
z-index: 10;
}
.action-profile .action-tooltip {
left: 50%;
right: inherit;
transform: translateX(-50%);
width:140px;
text-align: center;
}
.avatar-circle-main {
position: relative;
padding: 50px;
}

.disabled-action .action-circle svg {
opacity: 0.3;
filter: grayscale(0.40);
}
.action-button.disabled-action,
.action-button.disabled-action:hover {
cursor: not-allowed !important;
}
.disabled-action .action-circle,
.disabled-action .action-tooltip,
.disabled-action:hover .action-circle-hovered {
cursor: not-allowed !important;
pointer-events: none !important;

border: none !important;
}
.disabled-action:hover .action-circle-hovered {
box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
border: none !important;
}
.disabled-action .action-circle-hovered svg{
opacity: 0.3;
filter: grayscale(0.40);
}
.disabled-action .action-tooltip{
    filter: grayscale(0.30); 
    background-color: #efefef;
    color: #ccc;
}
.action-highlighted .action-circle {
box-shadow: 2px 2px 30px #516ff7;
border: solid 3px #516ff7;
}


/** circle progressbar **/
.svg-progress {
width: 740px;
height: 570px;
transform: rotate(-25deg);
position: absolute;
top: -107px;
left: -135px;
z-index: 0;
}
.svg-progress circle {
fill: none;
stroke-width: 6px;
opacity: 0;
transition: all 300ms ease;
}
.svg-background {
stroke: rgba(255, 255, 255, 0.1);
}

.svg-20 {
stroke: #516FF7;
stroke-dasharray: 1201.48;
stroke-dashoffset: -1179.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));

}
.svg-20.active {
stroke: #516FF7;
stroke-dasharray: 1011.48;
stroke-dashoffset: -1015.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}

.svg-40 {
stroke: #516FF7;
stroke-dasharray: 981.48;
stroke-dashoffset: -1025.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 0;
transition: all 300ms ease;
}
.svg-40.active {
stroke: #516FF7;
stroke-dasharray: 791.48;
stroke-dashoffset: -1025.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}

.svg-60 {
stroke: #516FF7;
stroke-dasharray: 1121.48;
stroke-dashoffset: -1425.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}
.svg-60.active {
stroke: #516FF7;
stroke-dasharray: 1121.48;
stroke-dashoffset: -1625.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}

.svg-80 {
stroke: #516FF7;
stroke-dasharray: 801.48;
stroke-dashoffset: -1325.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}
.svg-80.active {
stroke: #516FF7;
stroke-dasharray: 561.48;
stroke-dashoffset: -1325.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}

.svg-100 {
stroke: #516FF7;
stroke-dasharray: 821.48;
stroke-dashoffset: -1655.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}
.svg-100.active {
stroke:#516FF7;
stroke-dasharray: 501.48;
stroke-dashoffset: -1505.89;
filter: drop-shadow(0 0 10px rgba(13, 154, 248, 0.5));
opacity: 1;
transition: all 300ms ease;
}

.svg-progress-bar {
stroke-linecap: round;
transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.avatar-container, .action-button {
z-index: 1;
}
.svg-progress.mobile {
display: none;
}
/* ========================= END: Storyteller Page Styles ========================= */




/*
** ========================================
** BEGIN: Generate Image Page Styles
** ========================================
*/

.generate-image-container {
    width: 100%;
}

/** Generate-Image: Content area styling **/
.generate-image-content {
    padding: 0px; 
    max-width: 100%; 
    position: relative;
}

/** Generate-Image: Tabs styling **/
.generate-image-content .tabs-container {
    margin-bottom: 20px;
    padding: 0px;
}
.generate-image-content .tabs-nav {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid #e7e9eb;
}
.tab-button {
    position: relative;
    padding: 16px 20px;
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: #2F2B3DE5;
    cursor: pointer;
    transition: color 0.3s ease;
}
.tab-button.active {
    color: #516FF7;
}
.generate-image-content .tab-button {
    font-size: 24px;
    font-weight: 500;
    color: #2F2B3DE5;
}
.generate-image-content .tab-button.active {
    color: #516FF7;
    font-weight: 700;
}
.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #516FF7;
    border-radius: 1px;
}
.tab-content {
    padding: 0;
}

/** Generate-Image: Form styling **/
.generate-form-container {
    width: 100%;
    max-width: 100%;
    margin: 0px;
    padding: 0px;
}
.form-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 32px;
}
.form-column {
    flex: 1;
    min-width: 300px;
}
.input-column {
    flex: 2;
}
.settings-column {
    flex: 1;
}
.input-label {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
}
.generate-form-container .input-label {
    font-size: 24px;
    color: #353742;
    font-weight: 400;
}

/* --- Generate-Image: Top buttons --- */



/* --- GenerateAudio word count alignment tweaks --- */
.generate-form-container .input-label.audio-input-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.prompt-count-separator {
    font-size: 16px;
    color: #353742;
    position: relative;
    white-space: nowrap;
    margin: 0 5px;
}
.prompt-word-count {
    font-size: 16px;
    color: #353742;
    position: relative;
    margin-left: auto; 
    white-space: nowrap;
}
.prompt-char-count{
    font-size: 16px;
    color: #353742;
    position: relative;
    margin-left: 10px;
    white-space: nowrap;
}
.prompt-char-count.text-danger, .prompt-word-count.text-danger {
    color: #FF5667 !important;
}

.text-input-wrapper {
    background-color: #FAFCFF;
    border-radius: 8px;
    border: 1px solid #e4e7eb;
    overflow: hidden;
}
.prompt-input {
    width: 100%;
    padding: 16px;
    font-size: 16px; 
    border: none;
    resize: none;
    transition: border-color 0.3s ease;
}
.prompt-input:focus {
    outline: none;
}

.storyteller-missing-alert{
    margin-top: 10px;
    background-color: #FFFFB8;
    border-radius: 8px;
    border: 1px solid #E5E8EB;
    overflow: hidden;
}
.storyteller-missing-alert span{
    color: #353742;
    font-size: 18px;
    font-weight: 400;
    margin-left: 10px;
}

.setting-block {
    margin-bottom: 24px;
}
.setting-label {
    font-size: 18px;
    font-weight: 500;
color: #333;
margin-bottom: 16px;
}
.dropdown-container {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e4e7eb;
    overflow: hidden;
}

.setting-dropdown {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    background-color: #FAFCFF;
    border: none;
    appearance: none;
    cursor: pointer;
}
.setting-dropdown {
    font-size: 15px;
}
.setting-dropdown:focus {
    outline: none;
}

.dropdown-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
}
.action-section {
display: flex;
justify-content: center;
align-items: center;
margin-top: 48px;
padding-bottom: 32px;
}
.action-section{
margin: 20px 0px 10px;
padding-bottom: 0px;
}

.button-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 200px;
}
.generate-button {
padding: 17px 20px;
background-color: #516FF7;
color: white;
font-weight: 400;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 18px;
min-width: 215px;
box-shadow: 0 4px 6px rgba(81, 111, 247, 0.15);
}
.generate-button:hover {
background-color: #3F5BD9;
box-shadow: 0 6px 10px rgba(81, 111, 247, 0.2);
transform: translateY(-1px);
}
.generate-button:disabled {
background-color: #A4B7FF;
cursor: not-allowed;
box-shadow: none;
}
.button-group {
display: flex;
align-items: center;
gap: 16px;
} 
.generating-indicator {
display: flex;
align-items: center;
gap: 12px;
color: #666;
background-color: #610707; 
padding: 17px 20px;
font-size: 18px;
min-width: 215px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: none;
}
.loading-spinner {
width: 25px;
height: 25px;
border: 4px solid #e2e8f0;
border-top-color: #516FF7;
border-radius: 50%;
animation: spin 1s linear infinite;
}

.credit-amount {
font-size: 18px;
font-weight: 450;
color: #247CFF;
align-items: center;
justify-content: center;
display: flex;
}

.archive-tabright {
display: flex;
align-items: center;
gap: 20px;
}
.archive-tabright .setting-block {
margin-bottom: 0px;
}
.archive-tabright .setting-block {
margin-bottom: 0px;
width: 240px;
}
.archive-tabright .storyteller-dropdown .dropdown-list-heading span {
font-size: 14px;
font-weight: 600;
}
.archive-tabright .storyteller-dropdown .dropdown-list-heading {
font-size: 14px; 
}
.archive-tabright .storyteller-dropdown .scrollable-container {
margin-bottom: 5px;
}
.archive-tabright .storyteller-dropdown .storyteller-dropdown-item {
margin-bottom: 5px;
}


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

/** Generate-Image: Image Prompt Selection List Section Styling **/
.image-prompt-section { 
margin: 20px 0px 30px !important;
width: 100%;
}
.generate-form-container .image-prompt-section {
background: #FFF;
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 6%);
padding: 20px;
border-radius: 10px;
}
.image-prompt-title {
font-size: 24px;
font-weight: 400;
color: #333;
margin-bottom: 15px;
}
.image-prompt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 10px;
width: 100%;
}
.image-prompt-item {
cursor: pointer;
border-radius: 8px;
border: solid 1px #5e9eff;
overflow: hidden;
transition: all 0.2s ease;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.image-prompt-container {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
}
.image-prompt-grid {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}

.image-prompt-item {
width: 180px;
}
.image-prompt-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.image-prompt-item.selected {
box-shadow: 0 0 0 3px #516FF7, 0 5px 15px rgba(0, 0, 0, 0.1);
}
.prompt-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
}


/** Generate-Image: Results Section Styling **/
.results-section { 
margin: 20px 0px 30px !important;
width: 100%;
}
.results-title {
font-size: 24px;
font-weight: 400;
color: #333;
margin-bottom: 15px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
width: 100%;
}
.results-grid {
display: flex;
align-items: center;
justify-content: flex-start;
}

.result-item {
width: 25%;
cursor: pointer;
border-radius: 8px;
border: solid 1px #5e9eff;
overflow: hidden;
transition: all 0.2s ease;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.result-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.result-image-container {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
}
.result-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
}
.result-item:hover .result-image {
transform: scale(1.05);
}

.generate-form-container .results-section {
background: #FFF;
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 6%);
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.right-hidebtn {
font-size: 18px;
color: #5096FF;
font-weight: 400;
cursor: pointer;  
}
.image-prompt-header {
display: flex;
justify-content: space-between;
}


/** Generate-Image : Archive styling **/
.archive-container {
width: 100%;
padding: 16px 0;
}
.no-data {
text-align: center;
color: #64748B;
padding: 32px; 
margin-top: 10px;
}
.no-images {
border-top: 1px solid #DFE1E3;
}

.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
}
.image-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.image-card:hover {
transform: translateY(0px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.image-ratio-time {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
}
.video-duration {
color: #FFF;
margin-right: 5px;
font-size: 12px;
}

.image-ratio-time .iconsize-layout {
display: flex;
justify-content: flex-end;
}
.image-ratio-time .landscape-4-3 {
background-color: #516FF7;
height: 15px !important;
width: 20px !important;
}
.image-ratio-time .landscape-16-9 {
background-color: #516FF7;
height: 15px !important;
width: 25px !important;
}
.image-ratio-time .portrait-4-3{
background-color: #516FF7;
height: 15px !important;
width: 10px !important;
} 
.image-ratio-time {
padding: 2px 10px;
background: #00000069;
border-radius: 25px;
}

.iconsize-layout .square {
width: 16px !important;
height: 16px !important;
}
.image-wrapper {
width: 100%;
padding-top: 75%;
position: relative;
cursor: pointer;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.image-meta {
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.image-date {
font-size: 12px;
color: #64748b;
}
.image-actions {
display: flex;
gap: 8px;
}


/** Generate-Image: Global Dropdown **/
.storyteller-dropdown {
max-height: 300px;
overflow-y: auto;
}
.storyteller-dropdown-container {
background: #fafcff !important;
width: 100%;
text-align: left;
border: 1px solid #e4e7eb;
border-radius: 8px;
}
.storyteller-dropdown-container .btn.dropdown-toggle {
padding: 14px 16px;
text-align: left;
font-size: 15px;
}
.storyteller-dropdown-container .dropdown-menu {
left: 0 !important;
transform: translateY(47px) !important;
width: 100%;
transition: all 300ms ease-in-out;
opacity: 0;
padding: 15px;
}
.storyteller-dropdown-container .dropdown-menu.show {
/* transform: translate(0px, 47px) !important; */
transform: translateY(47px) !important;
opacity: 1;
transition: all 300ms ease-in-out;
}

.storyteller-dropdown .list-item {
display: flex;
align-items: center;
}
.storyteller-dropdown .avatar {
width: 46px;
height: 46px;
border: solid 2px #516FF7;
overflow: hidden;
margin-right: 10px;
}
.storyteller-dropdown .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.storyteller-dropdown .dropdown-list-heading {
color: #353742;
font-size: 18px;
font-weight: 400;
}
.storyteller-dropdown .dropdown-list-heading span {
color: #353742;
font-size: 16px;
font-weight: 700;
}
.storyteller-dropdown .dropdown-list-text {
color: #858895;
font-size: 14px;
font-weight: 400;
line-height: normal;
}
.storyteller-dropdown .scrollable-container{
padding: 5px 10px;
border-radius: 4px;
transition: all 300ms ease-in-out;
}
.storyteller-dropdown .storyteller-dropdown-item{
padding: 5px 10px;
border-radius: 4px;
transition: all 300ms ease-in-out;
}

.scrollable-container:hover {
background: #F1F1FF;
}
.storyteller-dropdown-item:hover {
background: #F1F1FF;
}
.storyteller-dropdown .scrollable-container.active {
background: #F1F1FF;
border-radius: 5px;
}
.storyteller-dropdown .storyteller-dropdown-item.active {
background: #F1F1FF;
border-radius: 5px;
}
.storyteller-dropdown-container .dropdown-toggle::after {
right: 0px;
left: calc(100% - 25px);
vertical-align: 0;
filter: invert(0.5);
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}

.storyteller-dropdown .icon-format-layout {
width: 36px;
height: 36px;
overflow: hidden;
margin-right: 10px;
}
.image-iconbox {
margin-right: 10px;
}
.list-item-play {
display: inline-block;
position: absolute;
right: 25px;
}
.storyteller-dropdown .icon-size-layout {
width: 46px;
height: 46px;
overflow: hidden; 
display: flex;
align-items: center;
}

.landscape-4-3 {
background-color: #516FF7; 
height: 30px !important; 
width: 100%;
}
.landscape-16-9 {
background-color: #516FF7;
height: 26px !important; 
width: 100%;
}
.portrait-4-3 {
background-color: #516FF7;
width: 24px !important;
height: 32px !important;
margin: 0 10px;
}
.portrait-16-9 {
background-color: #516FF7;
width: 20px !important;
height: 36px !important;
margin: 0 12px;
}
.square, .square-hd {
background-color: #516FF7;
width: 30px !important;
height: 30px !important;
margin: 0 10px;
}

/** Generate-Image: Image Modal Styles **/
.image-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85); /* Darker overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 1050; 
}
.image-modal-content {
position: relative;
background-color: #fff; 
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
max-width: 80vw; 
max-height: 90vh;
display: flex;
flex-direction: column; 
overflow: hidden; 
}
.modal-headerleft {
display: flex;
align-items: center;
width: 100%;
}
.image-modal-header {
padding: 12px 20px;
background-color: #f8f9fa;
position: absolute;
width: 100%;
}
.modal-header-actions {
display: flex;
align-items: center; 
gap: 10px;
position: absolute;
top: 10px;
right: 10px;
}

.iconpencil-wrap {
cursor: pointer;
}
.iconpencil-wrap.gn-image {
padding-left: 5px;
}
.iconpencil-wrap svg{
padding: 3px;
}

.modal-header-title {
font-size: 17.6px;
font-weight: 400;
color: #353742;
}
.modal-header-actions {
display: flex;
align-items: center;
gap: 10px; 
}
.modal-action-button {
background: transparent;
border: none;
color: #555; 
cursor: pointer;
padding: 6px; 
border-radius: 4px; 
display: inline-flex; 
align-items: center;
justify-content: center;
}
.modal-action-button svg {
display: block;
width: 20px; /* Consistent icon size */
height: 20px; /* Consistent icon size */
}
.modal-action-button:hover {
color: #000; 
background-color: #e9ecef; 
}

.image-modal-body {
display: flex; 
justify-content: center;
align-items: center;
flex-grow: 1; 
overflow: auto; /* Allow scrolling for very tall/wide images if necessary */
}
.image-modal-image {
max-width: 100%;
max-height: 100%; /* Image will be contained by body's padding and header */
object-fit: contain;
border-radius: 4px; 
}

/*.archive-popup-medium .image-modal-content {
max-height: 75vh;
width: 60vw;
}*/

.copy-clipboard {
padding: 0 18px 18px;
position: absolute;
bottom: 0;
width: 100%;
}
.copyicon {
cursor: pointer;
position: absolute;
top: -5px;
right: 0;
}
.copy-clipboard .clip-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
max-width: 75%;
}

.image-popup-main .clipboard-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: -10px;
}
.image-popup-main .popup-footertitle {
width: 55%;
display: flex;
align-items: center;
}
.image-popup-main .copyicon {
position: relative;
top: inherit;
right: inherit;
}
.image-popup-main  .copy-clipboard .clip-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
padding-right: 10px;
padding-right: 10px;
line-height: 18px;
}

.footer-rightbtn .generate-button {
padding: 10px 15px;
background-color: #516FF7;
color: white;
font-weight: 400;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
min-width: 183px;
box-shadow: 0 4px 6px rgba(81, 111, 247, 0.15);
}

.archive-popup-medium .image-modal-body {
margin: 60px 20px 20px;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
overflow: hidden;
position: relative;
height: calc(100% - 20px);
}
.image-modal-content {
padding-bottom: 40px;
}
.archive-popup-medium .image-modal-image {
object-position: top;
}
.for-mobile {
display: none;
}
.clipboard-top {
position: relative;
}


/** Generate-Image: Image Modal Slider Style **/
.archive-popup-medium .carousel-control-prev, 
.archive-popup-medium .carousel-control-next {
margin:auto;
width: 75px;
height: 75px;
border-radius: 50%;
border: solid 2px #FFF !important;
background-color: #516FF7 !important;
}
.archive-popup-medium .carousel-control-prev-icon, 
.archive-popup-medium .carousel-control-next-icon {
width: 46px;
height: 46px;
}
.archive-popup-medium .carousel-control-prev{
left: 2%;
}
.archive-popup-medium .carousel-control-next{
right: 2%;
}

.mb-archive-slider{
width: 100%;
}
.generate-image-content .form-layout {
background: #FFF;
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 6%);
padding: 20px;
border-radius: 10px;
margin-bottom: 0 !important;
}
.generate-inner-box {
margin: 0 0px;
}

/*.carousel-item {  
position: relative;  
padding-top: 56.25%;  //16:9 ratio
padding-top: 100%;
} 

.carousel-item img {  
position: absolute;  
top: 0;  
left: 0;  
width: 100%;  
height: 100%;  
object-fit: contain;  
} */

.archive-popup-medium .carousel-item img {
max-height: 650px;
margin: 0 auto;
}

/** Generate-Image: Image Modal Zoom Animation **/
.image-modal-content.zoomIn {
animation: zoomIn 0.3s forwards;
}
.image-modal-content.zoomOut {
animation: zoomOut 0.3s forwards;
}

.image-modal-overlay.show {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
.image-modal-overlay {
visibility: hidden;
pointer-events: none;
opacity: 0;
transition: all 300ms ease-in-out;
}

@keyframes zoomIn {
from { transform: scale(0.7); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {
from { transform: scale(1); opacity: 1; }
to   { transform: scale(0.7); opacity: 0; }
}


/* Ensure tabs and other elements don't conflict with z-index */
.tabs-container {
position: relative;
z-index: 1;
}
.content-wrapper {
position: relative;
z-index: 0;
width: 100%;
/*min-width: 100%; */
}
.modal-action-button svg.is-loved-active path {
fill: #516FF7;
stroke: #516FF7; /* Optional: also change stroke color */
}


/* Style for the generating indicator */
.generating-indicator {
display: flex;
align-items: center;
gap: 12px;
color: #666;
background-color: #FFF; 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
}

/** Generate-Image: Archive Header **/
.archive-img-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 24px;
font-weight: 500;
color: #2F2B3DE5;
}
.image-favarite-box {
display: flex;
align-items: center;
}
.image-favarite-box svg {
margin-right: 6px;
width: 28px;
cursor: pointer;
}
.image-favarite-box svg path {
filter: #353742;
stroke: #353742 !important;
opacity: 0.7;
transition: all 300ms ease-in-out;
}
.image-favarite-box.active svg path {
fill: #516FF7;
stroke: #516FF7 !important;
opacity: 1;
}
.image-favarite-box svg:hover path {
stroke: #516ff7 !important;
}
.image-favarite-box.active span {
color: #516FF7;
}

.generate-imagedate {
font-size: 18px;
padding: 15px 0;
border-top: 1px solid #DFE1E3 !important;
color: #2F2B3DE5;
font-weight: 400;
}
.generate-imagedate {
margin-top: 10px;
}

.image-favarite-box {
font-size: 18px;
color: #353742;
cursor: pointer;
}

.archive-wrapper {
background: #FFF;
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 6%);
padding: 30px 20px 20px;
border-radius: 10px;
margin-bottom: 30px;
}
.archive-wrapper .archive-container {
padding: 0 0 16px;
}

.archive-popup-medium .modal-header-title {
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
margin-right: 10px;
}
.archive-popup-medium .modal-header-title input[type="text"] {
width: 100%;
overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-clamp: 1 !important;
    -webkit-line-clamp: 1 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    padding: 0px 10px;
}
.archive-popup-medium .modal-header-title input[type="text"]::placeholder {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-clamp: 1 !important;
    -webkit-line-clamp: 1 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
}
.archive-popup-medium .modal-header-title input[type="text"]:focus {
outline: none;
background: #E5E8EB;
color: #000;
border-radius: 5px;
padding: 0px 10px;
}

.title-edit-action {
display: flex;
align-items: center;
justify-content: center;
}
.title-edit-action svg{
cursor: pointer;
}
svg.icon-right {
width: 18px;
height: 18px;    
}

@keyframes spin {
to { transform: rotate(360deg); }
}
/* ==================== END: Generate Image Page Styles ==================== */




/* 
** ====================================
** BEGIN: Generate Audio Page Styles 
** ====================================
*/

/** audio page style textarea **/
.text-input-wrapper.prompt-input-hebrew textarea {
font-family: "Rubik", sans-serif !important;
direction: rtl;
}

.audio-player-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
padding: 16px;
width: 100%;
margin: 20px 0px 30px !important;
}

/** Generate-Audio: Audio Player Header **/
.audio-player-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.audio-title {
font-size: 16px;
font-weight: 600;
color: #283046;
margin: 0;
}
.audio-controls {
display: flex;
gap: 12px;
}
.btn-icon {
background: transparent;
border: none;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-download:hover {
background-color: #f8f8f8;
color: #7367f0;
}
.btn-love {
color: #b9b9c3;
}

.btn-love:hover, .btn-love.loved {
color: #516FF7;
}
.btn-love.loved i {
fill: #516FF7;
}
.btn-love.loved svg path {
fill: #516FF7;
stroke: #516FF7;
}

.audio-headerleft {
display: flex;
align-items: center;
max-width: 100%;
min-width: 35%;
}
.audio-headerleft .audio-title {
max-width: 100%;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;

}
.audio-headerleft input[type="text"] {
width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-clamp: 1 !important;
-webkit-line-clamp: 1 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
}
.audio-headerleft input[type="text"]:focus {
outline: none;
background: #e9e1d5;
color: #000;
border-radius: 5px;
padding: 0 5px;
}

/** Generate-Audio: Audio Waveform Container **/
.audio-waveform-container {
height: 80px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 16px;
}
.waveform-visualization {
flex: 1;
height: 80px;
background-color: #f8f8fb;
border-radius: 8px;
padding: 0px 16px;
}

/** Generate-Audio: Play Button **/
.play-button {
width: 48px;
height: 48px;
min-width: 48px; /* Prevent shrinking */
border-radius: 50%;
background-color: #516FF7;
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(115, 103, 240, 0.4);
transition: all 0.2s ease;
}
.play-button:hover {
background-color: #3F5BD9;
}
.play-button svg {
width: 24px;
height: 24px;
}

/** Generate-Audio: Audio Player Footer **/
.audio-player-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.audio-time {
color: #6e6b7b;
}
.time-separator {
color: #b9b9c3;
margin: 0 4px;
}
.audio-speed-control {
display: flex;
align-items: center;
gap: 8px;
}
.speed-label {
color: #6e6b7b;
font-weight: 500;
}
.speed-buttons {
display: flex;
background-color: #f8f8fb;
border-radius: 6px;
overflow: hidden;
}
.speed-btn {
background: transparent;
border: none;
width: 30px;
height: 28px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #6e6b7b;
transition: all 0.2s ease;
}
.speed-btn:hover:not(:disabled) {
background-color: #ededf5;
color: #7367f0;
}
.speed-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Responsive Styles */
@media (max-width: 768px) {
.audio-player-container {
    padding: 12px;
}    
.audio-player-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}    
.audio-speed-control {
    width: 100%;
    justify-content: space-between;
}
}

/** Generate-Audio: Audio List  **/
.audio-grid-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;

}
.audio-list-item {
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
padding: 16px;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.audio-list-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.audio-item-container {
display: flex;
align-items: center;
width: 100%;
gap: 16px;
position: relative;
}

.audio-waveform-icon {
display: flex;
height: 66px;
padding: 10px 20px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
flex-shrink: 0;
border-radius: 10px; 
}
.waveform-container {
width: 100%;
height: 70px;
position: relative;
}
.audio-wave-wrapps {
position: relative;
flex: 1;
min-width: 0;
}
.audio-list-item .audio-play-button {
flex-shrink: 0;
}

.audio-info {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.audio-metadata {
display: flex;
flex-direction: column;
}
.recording-number {
font-size: 12px;
color: #6E6F92;
margin-bottom: 4px;
}

.audio-title {
font-size: 16px;
color: #333333;
margin: 0;
font-weight: 600;
}
.audiotitle-tooltip {
position: absolute;
background: #333;
border-radius: 50px;
padding: 5px 15px;
color: #fff;
font-size: 11px;
line-height: 14px;
bottom: -40px;
left: -10px;
transition: all 300ms ease-in-out;
}
.audiotitle-tooltip {
visibility: hidden;
opacity: 0;
}
.audio-list-item:hover .audiotitle-tooltip {
bottom: -25px;
visibility: visible;
opacity: 1;
}
.audiotitle-full {
position: relative;
z-index: 1;
}
.caretbelow {
background: #333;
width: 7px;
height: 7px;
display: block;
position: absolute;
left: 50%;
transform: translateX(50%) rotate(45deg);
top: -3px;
}

.audio-duration {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.duration-label {
color: #6E6F92;
font-size: 12px;
margin-bottom: 4px;
}
.duration-time {
color: #333333;
font-size: 14px;
font-weight: 600;
}
.audio-actions {
display: flex;
gap: 12px;
align-items: center;
}

.btn-icon {
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s;
}
.btn-icon:hover {
background-color: rgba(0, 0, 0, 0.05);
}

.audio-list-item .play-button {
width: 48px; 
height: 48px; 
background: #516FF7; 
cursor: pointer; 
}
.audio-list-item:hover .audio-waveform-icon {
opacity: 1;
}

.share-button {
background-color: #516FF7;
color: white;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
text-align: center;
box-shadow: 0 2px 4px rgba(90, 103, 246, 0.2);
}
.share-button:hover {
background-color: #4555F2;
}

.audio-waveform-icon svg line {
stroke: #5f9dee !important;
}

.gbl-title-editable {
display: flex;
align-items: center;
width: 100%;
flex-direction: row;
}
.gbl-title-editable input[type="text"]::placeholder {
color: #353742;
}
.gbl-title-editable input[type="text"] {
width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-clamp: 1 !important;
-webkit-line-clamp: 1 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
padding: 0px 10px; 

}
.gbl-title-editable input[type="text"]:focus {
outline: none;
background: #E5E8EB;
color: #000;
border-radius: 5px;
padding: 0px 10px;
}

/*.image-grid-row .audio-waveform-icon {
max-width: calc(100% - 300px);
}*/
.audio-wave-wrapps {
display: flex;
flex-direction: row;
align-items: center;
}
.audiotime-duration {
display: flex;
align-items: center;
flex-direction: row;
}
.audiotime-duration .audio-duration {
align-items: flex-start;
}
.audiotime-duration .audio-duration:not(:last-child) {
margin-right: 20px;
}

.image-grid-row .audio-item-container {
justify-content: space-between;
}
.image-grid-row .audio-list-item {
flex-direction: column;
}
.audio-info {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.gbl-input-title input {
font-size: 16px;
font-weight: 500;
}
/* ==================== END: Generate Audio Page Styles ==================== */




/* 
** =================================== 
** BEGIN: Generate Video Styles 
** ===================================
*/

/** video generate image box style **/
.video-placeholder {
background: #EBECFB;
width: 163px;
height: 163px;
margin-bottom: 22px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.video-innerbox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.video-btn {
margin-bottom: 5px;
}
.video-btn a {
background: #516FF7;
color: #FFF;
font-size: 16px;
font-weight: 400;
padding: 10px 15px;
min-width: 137px;
border-radius: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
transition: all 300ms ease-in-out;
}
.video-btn a:hover {
background-color: #3F5BD9;
box-shadow: 0 6px 10px rgba(81, 111, 247, 0.2);
}

.video-contentbox {
padding: 45px;
border: solid 1px #E5E8EB;
border-radius: 10px;
background: #FAFCFF;
height: 347px;
position: relative;
overflow: hidden; 
}

.loader-block {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.loader-block {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader-block.show {
opacity: 1;
visibility: visible;
pointer-events: none;
}

.video-contentbox .loader-block.show {
pointer-events: all;
}
.video-upload-image a {
color: #5096FF !important;
}
.video-generate-box {
display: grid;
gap: 20px;
align-items: center;
align-content: center;
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
}
.video-box-block {
width: 100%;
}
.box-header {
padding-bottom: 10px;
}

.show-uploaded-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
padding-top: 100%;
    opacity: 0;
visibility: hidden;
pointer-events: all; 
transition: all 300ms ease-in-out;
}
.show-uploaded-image.active{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.show-uploaded-image img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: top;
top: 0;
position: absolute;
left: 0;
}

.video-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
z-index: 1;
background: #050000;
background: linear-gradient(180deg,rgba(5, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%, rgba(237, 221, 83, 0) 55%);
transition: all 300ms ease-in-out;
}
.show-uploaded-image:hover .video-image-overlay{
opacity: 1; 
visibility: visible;
}
.img-close-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
cursor: pointer;
opacity: 0; 
visibility: hidden;

transition: all 300ms ease-in-out;
transform: translateY(-10px);
}
.show-uploaded-image:hover .img-close-btn{
opacity: 1; 
visibility: visible;
transform: translateY(0px);
}
.show-uploaded-image.audiobox {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
background: #FFF;
flex-direction: column;
}
.show-uploaded-image.audiobox .img-close-btn {
transform: translateY(0px);
}

/** voice close btn hover **/
.upload-imgitem .img-close-btn {
transition: all 300ms ease-in-out;
}
.upload-imgitem .img-close-btn {
opacity: 1;
visibility: visible;
transform: translateY(-10px);
}
.upload-imgitem.image-item-active:hover .img-close-btn {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.upload-imgitem.image-item-active:hover .img-close-btn svg path {
stroke: none;
fill: black;
}
/** voice close btn hover end **/

.audiobox svg {
stroke: #000;
}
.generate-audio-title {
display: block;
width: 100%;
text-align: center;
padding: 5px 0;
}
.audio-wave {
width: calc(100% - 8%);
display: flex;
justify-content: center;
border-radius: 10px;
}


/** video checkbox style **/
.checkboxes__item {
padding: 5px 0px;
}
.checkbox.style-c {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
}
.checkbox.style-c input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox.style-c input:checked ~ .checkbox__checkmark {
background-color: #516FF7;
border-color: #516FF7;
}
.checkbox.style-c input:checked ~ .checkbox__checkmark:after {
opacity: 1;
}
.checkbox.style-c:hover input ~ .checkbox__checkmark {
background-color: #FFF;
}
.checkbox.style-c:hover input:checked ~ .checkbox__checkmark {
background-color: #3F5BD9;
}
.checkbox.style-c .checkbox__checkmark {
position: absolute;
top: 2px;
left: 0;
height: 20px;
width: 20px;
background-color: #FFF;
transition: background-color 0.25s ease;
border-radius: 2px;
border: solid 1px #cacaca;
}
.checkbox.style-c .checkbox__checkmark:after {
content: "";
position: absolute;
left: 6px;
top: 3px;
width: 5px;
height: 10px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.25s ease;
}
.checkbox.style-c .checkbox__body {
color: #333;
line-height: 1.4;
font-size: 16px;
}
.checkboxes__item .checkbox:not(:last-child) {
margin-bottom: 10px;
}

.video-pro {
background: #F75180;
font-size: 12px;
padding: 2px 5px;
color: #FFF;
border-radius: 15px;
width: 40px;
display: inline-block;
text-align: center;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}

/** video offcanvas popup style start **/
.enable-scrolling-backdrop.image-selection-panel .offcanvas-end,
.enable-scrolling-backdrop.audio-selection-panel .offcanvas-end{
width: 410px;
}

h5#imageSelectionLabel, h5#audioSelectionLabel, h5#ideaCanvasLabel, h5#scheduleCanvasLabel {
font-size: 32px;
font-weight: 400;
letter-spacing: 0;
}

.image-selection-panel .image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 5px;
}
.image-selection-panel .image-card {
        -moz-border-radius: 0px;  
-webkit-border-radius: 0px;
border-radius: 5px;  
}
.image-selection-panel .offcanvas-header,
.audio-selection-panel .offcanvas-header {
padding-bottom: 0;

}
.image-selection-panel .offcanvas-body,
.audio-selection-panel .offcanvas-body  {
padding-top: 0;
}
.image-selection-panel .btn-close, .audio-selection-panel .btn-close,
.idea-panel .btn-close, .idea-schedule-panel .btn-close {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1.25rem auto no-repeat;
opacity: 0.5 !important;
}
.image-selection-panel .offcanvas-header .btn-close, .audio-selection-panel .offcanvas-header .btn-close,
.idea-panel .offcanvas-header .btn-close, .idea-schedule-panel .offcanvas-header .btn-close  {
margin-right: 10px;
}

.audio-selection-panel .offcanvas-body.my-auto {
margin-top: 0px !important;
}
.audio-selection-panel .audio-list-item {
box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
}
.audio-selection-panel .audio-list-item:hover {
cursor: pointer;
transform: translateY(-4px);
box-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
}
.audio-selection-panel .duration-time {
color: #353742;
font-weight: 400;
}
.audio-selection-panel .audio-title {
color: #353742;
font-weight: 400;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.audio-selection-panel .audio-info {
align-items: end;
}

.audio-btn-dorpdown{
position: relative;
}
.button-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
transition: all 300ms ease-in-out;
transform: translate(-50%, 70%);
visibility: hidden;
pointer-events: none;
opacity: 0;
}
.button-dropdown.show {
top: 100%;
visibility: visible;
opacity: 1;
transform: translate(-50%, 20%);
pointer-events: auto;
}
.button-dropdown ul {
padding: 0;
margin: 0;
background: #F8FAFB;
box-shadow: 1px 1px 10px #ccc;
border-radius: 4px;
}
.button-dropdown ul a {
display: block;
padding: 6px 10px;
width: 110px;
color: #333;
}
/** video offcanvas popup style end **/


/* Video result player styling start */
.video-results-section {
margin-top: 2rem;
}
.video-results-section .video-player {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.video-results-section .responsive-video {
display: block;
width: 100%;
height: auto;
}
.video-results-section .playbtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.video-results-section .playbtn:hover {
transform: translate(-50%, -50%) scale(1.1);
}
/* Video result player styling end */


/* Video modal styles start */
.video-modal-content{
padding-bottom: 0px !important;
}
.video-popup .image-modal-content.video-modal-content {
max-width: 50vw;
}
.video-player .playbtn,.image-modal-body .playbtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80px;
cursor: pointer;
z-index: 10;
}

.image-modal-body {
position: relative;
}
.modal-video {
width: 100%;
border-radius: 4px;
max-height: 650px;
margin: 0 auto;
}

.overlay-stage { position: relative; display: inline-block; }
.modal-video { display: block; width: 100%; height: auto; }
.video-embed-overlay-body { position: relative; } /* keep */
.overlay-logo { user-select: none; touch-action: none; }
/* Video modal styles end */


/** image hoverd video **/
.image-selection-panel .image-card {
overflow: inherit; 
}
.image-wrapper.hovered-image {
position: absolute;
z-index: 1 !important;
border: solid 1px red !important;
left: 0;
width: 200px;
height: 240px;
transform: scale(1.5);
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transition: all 300ms ease-in-out;
}

.image-selection-panel .image-card:hover .hovered-image {
opacity: 1;
visibility: visible;
transform: scale(1.5);
}
.image-selection-panel .image-card.selected {
padding: 10px;
    -moz-border-radius: 0px;  
-webkit-border-radius: 0px;
border-radius: 5px;
box-shadow: 1px 1px 20px #5555558a;
}
.image-selection-panel .image-card {
box-shadow: none;
padding: 5px 5px;
transition: all 300ms ease-in-out;
}
.image-selection-panel .image-card img {
border-radius: 5px;
        -moz-border-radius: 0px;  
-webkit-border-radius: 0px;
}

/** offcanvas video image preview start **/
.image-selection-panel .offcanvas-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.hoverd-wraper-main {
border-top: 1px solid #DFE1E3 !important;
padding: 20px 0 0 0;
margin-top: 20px;
}

.video-preview-image {
text-align: center;
width: auto;
display: flex;
justify-content: center;
}
.video-preview-image img {
width: auto;
max-height: 270px;
object-fit: contain;
object-position: top;
border-radius: 15px;
box-shadow: 1px 1px 10px #ccc;
padding: 7px;
}
.image-selection-panel .offcanvas-body {
display: flex;
flex-direction: column;
margin-top: 0 !important;
}
.only-video-slide .carousel-item img {
margin: 0 auto;
}

.use-button-row {
display: flex;
justify-content: center;
text-align: center;
padding: 15px;
}
.use-button-row .generate-button {
padding: 12px 18px; 
min-width: 120px;
}
.use-button-row a {
position: relative;
left: inherit;
right: inherit;
width: 40px !important;
height: 40px;
opacity: 1;
margin: 5px 10px;
border-radius: 50%;
border: solid 2px #FFF !important;
background-color: #516FF7 !important;
}

.image-panel-loved-div {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
justify-content: flex-end;
padding: 10px 0 0;
border-top: 1px solid #DFE1E3 !important;
}
/* ==================== END: Generate Video Styles ==================== */




/* 
** ==================================
** BEGIN: Storyteller Profile 
** ==================================
*/

html .navbar-floating.footer-static .app-content.storyteller-profile .content-area-wrapper{
/* height: calc(100vh - calc(calc(2rem * 1) + -25.55rem + 3.35rem + 1.3rem + 0rem)); */
overflow: initial;
}


/*html .navbar-floating.footer-static .app-content.storyteller-profile .content-area-wrapper {
height: inherit;
overflow-y: auto;
}
html .navbar-floating.footer-static .app-content.storyteller-profile .content-area-wrapper {
height: calc(100% - -500px);
}*/

.storyprofile-content-wrapper {
width: calc(100vw - (100vw - 100%) - 220px);
margin-left: 20px;
position: relative; 
width: calc(100% - 250px);
display: flex;
/* white-space: nowrap; */
}
.storynav-inner {
display: flex;
align-items: center;
padding: 12px 20px;
border-radius: 10px;
font-size: 18px;
}
.storynav-inner {
background-color: #fff;
border-color: #e8e8e8;
color: #484668;
}
.storynav-inner {
transition: all 300ms ease-in-out;
position: relative;
}
.storynav-inner:hover {
background-color: #3b5ef3;
border-color: #3b5ef3;
color: #fff;
}

.story-nav:not(:last-child) {
margin-bottom: 10px;
}
.story-nav.active svg path {
stroke: #FFF;
}

.storyteller-nav .story-nav{
cursor: pointer;
}
.story-nav.active .storynav-inner {
background-color: #4c6ef5;
border-color: #4c6ef5;
box-shadow: 0 2px 4px rgba(76, 110, 245, 0.3);
color: #fff;
}
.storynav-inner:hover svg {
filter: brightness(0) invert(1);
}

.inner-menu-text{
padding-left: 10px;
}
.inner-menu-lock-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}

.navigation-btn {
background-color: #4c6ef5;
border-color: #4c6ef5;
box-shadow: 0 2px 4px rgba(76, 110, 245, 0.3);
color: #fff;
}

.storyteller-profile {
background-color: #f8f8f8;
}
.storyteller-setup-content {
padding:40px;
background-color: #FFF;
}
.story-profileslide-box {
display: flex;
position: relative;
overflow: hidden;
}
.story-sidebar-left {
width: 250px;
max-width: 100%;
}
.storyteller-box-header {
font-size: 28px;
font-weight: 500;
color: #484668;
}

.header-divider {
display: block;
background: #DFE1E3;
width: 100%;
height: 1px;
margin: 15px 0;
}
.storyteller-items-wrap {
padding: 30px;
background: #f8fafb;
}
.storyitems-title {
font-size: 24px;
font-weight: 400;
color: #484668;
margin-bottom: 20px;
}
.story-items-block {
display: flex;
justify-content: center;
gap: 20px;
}
.story-items-inner {
text-align: center;
}

.stroy-items {
width: 50%;
}
.stroy-items {
border: solid 1px #e7e7e7;
border-radius: 10px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFF;
}
.stroy-items{
transition: all 300ms ease-in-out;
cursor: pointer;
}
.stroy-items:hover, .stroy-items.selected {
box-shadow: 0 5px 20px rgb(81 111 247 / 18%);
border: solid 1px #4c6ef5;
}

.setface-icon {
width: 167px;
height: 167px;
background: #F7F7FC;
display: flex;
justify-content: center;
align-items: center;
border-radius: 167px;
margin-bottom: 15px;
}

.setface-desc {
    text-align: center;
    font-size: 16px;
    color: #9897A3;
    line-height: 20px;
}
.setface-footer {
    text-align: center;
    padding: 20px 0;
}
.facefooter-btn {
    background: #4c6ef5;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 30px;
    border-radius: 5px;
    max-width: 100px !important;
    min-width: inherit;
}
.generate-button.profilefooter-btn {
    min-width: 215px;
}
.setface-footer-gb.profilefooter {
    text-align: left;
}

.profilefooter .button-group {
  width: 215px;
}
.profilefooter .button-group .generating-indicator {
  padding: 17px 20px;
}
/** storyteller profile End **/

.upload-imgitem .loader-block {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.upload-imgitem .loader-block {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.upload-imgitem {
position: relative;
}
.loader-block.show {
opacity: 1;
visibility: visible;
pointer-events: none;
}



/** story slide block start **/
.app-content.content.storyteller-profile {
padding-bottom: 0;
height: calc(100vh - 0px);
}
.story-slide-wrapper {
color: #484668;
position: absolute;
top: 0;
left: 200%;
width: 100%;
background: #FFFFFF;
height: 100%;
transition: all 300ms ease;
}
.story-slide-wrapper.show {
left: 0%;
}
.story-slide-wrapper {
padding: 0px; 
}

.story-slide-inner {
padding: 40px; 
background: #FFFFFF;
}
.story-header-row{
display: flex;
align-items: center;
flex-direction: row;
}
.header-divider-bottom {
height: 1px;
width: 100%;
background: #DFE1E3;
margin: 20px 0;
}
.selected-title-name {
font-size: 20px;
color: #484668;
line-height: 22px;
}
.module-name {
font-size: 24px;
font-weight: 500;
color: #484668;
line-height: 28px;
}
.story-row-gray {
background-color: #F8FAFB;
padding: 10px 0px;
}

.slide-btn {
padding-right: 15px;
cursor: pointer;
}
.select-module-name {
font-size: 22px;
color: #484668;
font-weight: 400;
margin-bottom: 15px;
}
.image-gender {
display: flex;
align-items: center;
justify-content: space-between;
}
.image-gender-title {
width: 30%;
}
.image-gender-select {
width: 70%;
}
.image-gender-title, .select-desc {
font-size: 16px;
line-height: 20px;
font-weight: 400;
color: #353742;
}
.image-gender.image-gender-removed {
justify-content: flex-start;
}
.image-facemodal-outer {
width: 70%;
max-width: 100%;
}
.image-facemodal-outer .image-facemodel {
width: 100%; 
}

.remove-module {
padding: 10px 0;
}
.remove-module a {
color: #516FF7;
}
.inputbox input {
padding: 10px 20px;
width: 100%;
border: solid 1px #ccc;
border-radius: 5px;
font-size: 16px;
color: #353742;
background: #FFF;
}
.input-textarea-block textarea {
padding: 10px 20px;
width: 100%;
border: solid 1px #ccc;
border-radius: 5px;
font-size: 16px;
color: #353742;
background: #FFF;
resize: none;
}
.story-medium-desc {
font-size: 15px;
}
.input-textarea-block textarea::placeholder,
.set-profile-wrap .inputbox input::placeholder{
color: #353742;  
}
.multiple-textarea-row {
padding: 10px 0;
}

.writing-innerbtn-row .button-group {
  width: 215px;
}
.writing-innerbtn-row .button-group .generating-indicator {
  padding: 17px 20px 17px 30px;
}

.story-medium-wrap {
color: #484668;
margin-bottom: 30px;
}
.story-medium-title {
font-size: 20px;
line-height: 26px;
}

.selectbox select {
padding: 10px 20px;
width: 100%;
border: solid 1px #ccc;
border-radius: 5px;
font-size: 16px;
color: #353742;
background: #FFF;
}
.select-desc {
margin-top: 10px;
}
.selectbox {
position: relative;
}
.selectbox select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 50px;
}
.selectbox::after {
content: ">";
position: absolute;
right: 20px;
top: 10px;
transform: translateY(-50%);
pointer-events: none;
font-size: 20px;
transform: rotate(90deg);
color: #959494;
}
.selectbox select:focus-visible,
.selectbox select:focus,
.inputbox input:focus,
.inputbox input:focus-visible {
outline: solid 1px #bad4e5;
}

.story-row {
padding: 20px 30px;
}
.placeholder-img{
background: #F7F7FC;
width: 80px;
height: 80px;
padding: 26px;
border-radius: 80px;
}
.upload-imgitem {
background: #FFF;
border: solid 1px #E5E8EB;
border-radius: 5px;
padding: 25px;
width: calc(25% - 12px);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.upload-imgitem {
height: 160px;
overflow: hidden;
}
.upload-imgitem.image-item-active {
padding: 0 !important;
}
.upload-imgitem img {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
}
.upload-imgitem:hover {
box-shadow: 0 5px 20px rgb(81 111 247 / 18%);
border: solid 1px #4c6ef5;
}
.upload-image-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

/** brand profile style **/
.brandimage {
position: relative;
}
.inputbox.brand-colorbox {
display: flex;
gap: 20px;
} 
.brand-color {
display: flex;
align-items: center;
justify-content: space-between;
}
.color-title {
font-size: 18px;
padding-right: 10px;
color: #353742;
}
.upload-imgitem.brandimage {
width: calc(100% - 12px);
max-width: 200px;
}
.square-img {
background: #FFF;
border: solid 1px #E5E8EB;
border-radius: 5px;
padding: 25px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
max-width: 200px;
flex-direction: column;
transition: all 300ms ease-in-out;
}
.horizontal-img {
background: #FFF;
border: solid 1px #E5E8EB;
border-radius: 5px;
padding: 25px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
max-width: 300px;
transition: all 300ms ease-in-out;
}
.square-img .placeholder-img {
margin-bottom: 10px;
}
.square-img:hover,.horizontal-img:hover{
box-shadow: 0 5px 20px rgb(81 111 247 / 18%);
border: solid 1px #4c6ef5;
}
.horizontal-img .upload-img-desc {
display: flex;
flex-direction: column;
justify-content: flex-start !important;
align-items: flex-start;
}
.upload-img-desc {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.imagetitle {
font-size: 14px;
color: #353742;
}
.imgsize {
font-size: 12px;
color: #9897A3;
}

.brandfooter {
text-align: left;
}
.brandfooter-btn {
min-width: 100px;
}
.visual-block .image-gender {
align-items: flex-start;
}

/** upload large image **/
.uploading-image-large {
background: #FFF;
border: solid 1px #E5E8EB;
border-radius: 10px;
margin-bottom: 15px;
padding: 20px;
}
.large-upload-img {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px;
}
.large-upload-img {
transition: all 0.3s ease;
position: relative;
}

/* Drag and drop styling */
.large-upload-img.drag-active {
background-color: rgba(81, 111, 247, 0.1);
border: 2px dashed #516FF7;
transition: all 0.3s ease;
}
.image-desc-btn {
font-size: 18px;
padding-top: 5px;
}
.image-desc-btn a {
color: #516FF7;
}

.why-upload {
font-size: 20px;
margin-bottom: 10px;
line-height: 24px;
}
.story-row p {
font-size: 16px;
line-height: 20px;
}
.story-row ul li {
font-size: 16px;
line-height: 20px;
list-style-type: disc;
list-style-position: outside;
}
.traning-left .generate-button {
display: inline-block;
font-size: 16px;
text-align: center;
}
.traning-left .generate-button:hover {
color: #FFF;
}
.traning-ai {
display: flex;
align-items: center;
}
.traing-right {
display: flex;
align-items: center;
}
.cupicon {
margin: 10px;
}
.image-facemodel {
display: flex;
align-items: center;
justify-content: flex-start;
width: 70%;
padding: 20px;
border: solid 1px #ccc;
border-radius: 5px;
max-width: 100%;
background: #FFF;
}
.facemodel-img {
background: #f7f7fc;
width: 44px;
height: 44px;
/* border: solid; */
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
padding: 11px;
}
.image-details {
width: 85%;
padding: 0 10px;
}
span.imagesize {
font-size: 12px;
color: #9897A3;
font-weight: 400;
}
.image-details-title {
font-size: 14px;
line-height: 16px;
color: #353742;
}
.setface-title{
text-align: center;
}
/** story slide block END **/

.choose-itemsdesc-bottom {
color: #5096FF;
font-size: 18px;
line-height: 24px;
}
.items-bold-title {
font-size: 24px;
font-weight: 600;
color: #484668;
}
.choose-items-desc {
font-size: 18px;
line-height: 24px;
margin-bottom: 5px;
}
.bottombox {
margin-bottom: 30px;
}
.storyteller-row {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.storyteller-images-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 33.33%;
}

.stroy-image {
position: relative;
padding-top: 76%;
height: 100%;
width: 100%;
}
.stroy-image {
position: relative;
padding-top: 100%;
height: 100%;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.stroy-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.stroy-image {
border: solid 5px #516ff700;
}
.selected .stroy-image {
border: solid 5px #516FF7;
}

.storyteller-row {
margin: 20px 0;
}
.storyteller-name {
width: 100%;
text-align: center;
padding: 10px 0;
color: #353742;
font-size: 18px;
}


/* ----- Storyteller Next Operation Start ----- */
.story-row-next{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 30px;   /* mirrors .story-row */
}
.story-row-next a{
font-size:18px;
font-weight:400;
color:#516FF7;
}

.voice-set-btn{
background:#fff;
border:1px solid #DFE1E3;
border-radius:10px;
color:#516FF7;
font-size:16px;
font-weight:400;
padding:10px 30px;
display:inline-flex;
align-items:center;
gap:10px;
cursor:default;
}
.voice-set-btn svg path{
stroke:#516FF7;
}
/* ----- Storyteller Next Operation End ----- */
/* ======================= END: Storyteller Profile Styles ======================= */




/* 
** ====================================
** BEGIN: Coming Soon Modal Styles 
** ====================================
*/

.coming-soon-content-text {
    margin: 15px 0;
    color: #484668;
}
.coming-soon-content-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 34px;
    text-align: center;
}
.coming-soon-content-subtitle {
    font-size: 20px;
    line-height: 26px;
    text-align: center;
}

.coming-soon-content-icon {
    display: flex;
    justify-content: center;
}
.coming-soon-content-icon svg {
    width: 150px;
    height: 150px;
}

.coming-soon-content {
    background: #FAFCFF;
    width: 600px;
}
.coming-soon-content-footer {
    text-align: center;
    padding: 10px 0;
}

.coming-soon-popup .image-modal-content {
    padding-bottom: 0;
}
.coming-soon-popup .image-modal-header {
    position: relative;
}
.coming-soon-popup .image-modal-body {
    margin: 20px 25px 50px;
}
.coming-soon-content-footer .generate-button {
    padding: 10px 20px;
    min-width: auto;
    font-size: 16px;
}
/* ======================= END: Coming Soon Modal Styles ======================= */




/* 
** ====================================
** BEGIN: Credit Popup Styles 
** ====================================
*/

.credits-wrapper {
    width: 100%;
}
.credit-popup .modal-header-actions {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.credit-popup .credits-wrapper {
    max-height: 450px;
}
.credit-popup .image-modal-content {
    width: 800px;
    background: #f8f9fa;
}

.credit-list-row{
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: #353742;
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}
.credit-list-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.credit-body.selected .credit-list-row{
    background: #516FF7;
    color: #FFFFFF;
}

.credit-price-btnrow {
    display: flex;
    align-items: center;
}
.credit-pbtn .generate-button {
    min-width: 90px;
}
.credit-price {
    font-size: 24px;
    padding: 0 20px;
}
.credit-left {
    display: flex;
    align-items: center; 
    flex-wrap: nowrap;
}
.credit-unit-row {
    padding-left: 20px;
}
.unit-title {
    font-size: 24px;
    line-height: 30px;
}
.unit-subtitle {
    color: #516FF7;
}
.credit-body.selected .unit-subtitle{
    color: #FFFFFF;
}

.archive-popup-medium.credit-popup .modal-header-title {
    font-size: 28px;
    line-height: 32px;
}
.archive-popup-medium.credit-popup .image-modal-content {
    padding: 30px;
}
.archive-popup-medium.credit-popup .image-modal-header {
    margin-bottom: 20px;
    position: relative;
    padding: 0;
}
.archive-popup-medium.credit-popup .image-modal-body {
    margin: 25px 25px;
}
.archive-popup-medium.credit-popup .credit-checkout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-top: 1px solid #e5e7eb; /* light gray separator */
}
.archive-popup-medium.credit-popup .checkout-paypal-label {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #484668;
}
.archive-popup-medium.credit-popup .checkout-paypal-btn {
    flex-shrink: 0;
    padding-left: 30px;
    min-width: 300px;
}
.archive-popup-medium.credit-popup .checkout-paypal-btn .paypal-js-container {
    width: 100%;
}

/*.archive-popup-medium.credit-popup .checkout-paypal-btn > div {
    display: inline-block;
}*/


/** coupon popup **/
.coupon-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.coupon-box .inputbox {
    position: relative;
}
.coupon-box .inputbox {
    width: 58%;
}
.coupon-box .inputbox input {
    width: calc(100% - 120px);
}
.coupon-box .inputbox .generate-button {
    padding: 10px 20px;
    font-size: 16px;
    min-width: 100px;
    position: absolute;
    right: 0;
}
.coupon-title {
    font-size: 21px;
    color: #353742;
}
.coupon {
    color: #247CFF;
    font-size: 20px;
}
.coupon-box {
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
   transition: height 1s ease;
}
.coupon-box {
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: height 1s ease;
    width: calc(100% - 60px);
    margin: 0px 30px;
}
.coupon-box.show {
    height: 45px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
}

.archive-popup-medium.credit-popup .image-modal-header{
    margin-bottom: 20px;
}
.archive-popup-medium.credit-popup .image-modal-body {
    border-top: solid 1px #DFE1E3;
    padding-top: 25px;
    margin-top: 25px;
}

/* ======================= END: Credit Popup Styles ======================= */




/*
** ==============================================
** BEGIN: API Processing Notification Popup 
** ==============================================
*/

/** Popup 1 **/
.video-generation-popup .coming-soon-content-icon svg {
    background: #516ff7;
    width: 80px;
    height: 80px;
    margin: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 20px;
}
.video-generation-popup  .coming-soon-content-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.video-generation-popup  .coming-soon-content-title {
    margin-bottom: 10px;
}
.video-generation-popup .coming-soon-content-footer .generate-button {
    padding: 10px 26px;
    background: #FFF;
    color: #5096FF;
    border: solid 1px #5096FF;
    min-width: 150px;
    font-size: 20px;
    box-shadow: none;
    transition: all 300ms ease-in-out;
}
.video-generation-popup .coming-soon-content-footer .generate-button:hover {
    padding: 10px 26px;
    background: #5096FF;
    color: #FFF;
    border: solid 1px #5096FF;
    min-width: 150px;
    font-size: 20px;
    box-shadow: none;
}
.image-modal-overlay.archive-popup-medium.video-generation-popup .image-modal-body {
    margin: 50px 20px 50px 20px !important;
    padding: 30px 0px;
}
.archive-popup-medium.video-generation-popup .image-modal-content {
    padding-bottom: 0px !important;
}
.archive-popup-medium.video-generation-popup .image-modal-header {
    padding: 0;
    background-color:transparent;
    position: relative;
    width: 100%;
}


/** Popup 2 **/
.voice-generation-popup .coming-soon-content-icon svg {
    background: #516ff7;
    width: 80px;
    margin: auto;
    height: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 20px;
}
.voice-generation-popup  .coming-soon-content-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.voice-generation-popup  .coming-soon-content-title {
    margin-bottom: 10px;
}
/*.voice-generation-popup .coming-soon-content-footer .generate-button {
    padding: 10px 26px;
    background: #FFF;
    color: #5096FF;
    border: solid 1px #5096FF;
    min-width: 150px;
    font-size: 20px;
    box-shadow: none;
    transition: all 300ms ease-in-out;
}
.voice-generation-popup .coming-soon-content-footer .generate-button:hover {
padding: 10px 26px;
background: #5096FF;
color: #FFF;
border: solid 1px #5096FF;
min-width: 150px;
font-size: 20px;
box-shadow: none;
}*/

.face-model-generation-popup .coming-soon-content-footer .coming-soon-footer-button-div,
.voice-generation-popup .coming-soon-content-footer .coming-soon-footer-button-div{
    display: flex;
    justify-content: center;
}
.voice-generation-popup .coming-soon-content-footer .coming-soon-footer-button-div .generate-button{
    margin: 0 10px;
}
.voice-generation-popup .coming-soon-content-footer .coming-soon-footer-button-div .generate-button:hover{
    background: #3F5BD9;
    color: #FFF;
    border: solid 1px #3F5BD9;
    box-shadow: none;
}
.voice-generation-popup .coming-soon-content-footer .coming-soon-footer-close-link{
    display: flex;
    justify-content: center;
    margin: 20px;
}
.voice-generation-popup .coming-soon-content-footer .coming-soon-footer-close-link a{
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #247CFF;
}
.image-modal-overlay.archive-popup-medium.video-generation-popup .image-modal-body {
    margin: 50px 20px 50px 20px !important;
    padding: 30px 0px;
}
.archive-popup-medium.video-generation-popup .image-modal-content {
    padding-bottom: 0px !important;
}
.archive-popup-medium.video-generation-popup .image-modal-header {
    padding: 0;
    background-color:transparent;
    position: relative;
    width: 100%;
}


/** Popup 3 **/
.face-model-generation-popup .coming-soon-content-icon svg {
    background: #516ff7;
    width: 80px;
    margin: auto;
    height: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 20px;
}
.face-model-generation-popup  .coming-soon-content-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.face-model-generation-popup  .coming-soon-content-title {
    margin-bottom: 10px;
}
.face-model-generation-popup .coming-soon-content-footer .generate-button {
    padding: 10px 26px;
    background: #FFF;
    color: #5096FF;
    border: solid 1px #5096FF;
    min-width: 150px;
    font-size: 20px;
    box-shadow: none;
    transition: all 300ms ease-in-out;
}
.face-model-generation-popup .coming-soon-content-footer .generate-button:hover {
    padding: 10px 26px;
    background: #5096FF;
    color: #FFF;
    border: solid 1px #5096FF;
    min-width: 150px;
    font-size: 20px;
    box-shadow: none;
}
.image-modal-overlay.archive-popup-medium.face-model-generation-popup .image-modal-body {
    margin: 50px 20px 50px 20px !important;
    padding: 30px 0px;
}
.archive-popup-medium.face-model-generation-popup .image-modal-content {
    padding-bottom: 0px !important;
}
.archive-popup-medium.face-model-generation-popup .image-modal-header {
    padding: 0;
    background-color:transparent;
    position: relative;
    width: 100%;
}

/** vimeo video style 
.video-container-modern {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container-modern iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
**/
.iframe-container {
    overflow: hidden;
    padding-top: 56.25%; /* 16:9*/
    position: relative;
    width: 600px;
}
.iframe-container iframe {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
}
/* ======================= END: API Processing Notification Popup ======================= */




/* 
** ====================================
** BEGIN: Video Restriction Modal Styles 
** ====================================
*/

.image-modal-overlay.archive-popup-medium.video-restriction-popup .image-modal-content {
    padding-bottom: 30px !important;
}
.image-modal-overlay.archive-popup-medium.video-restriction-popup .image-modal-header {
    background-color:transparent;
}
.image-modal-overlay.archive-popup-medium.video-restriction-popup .image-modal-body {
    margin: 60px 30px 20px !important;
}
.image-modal-overlay.archive-popup-medium.video-restriction-popup .modal-header-title {
    font-size: 28px !important;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 100%;
    margin-right: 10px;
}
.image-modal-overlay.archive-popup-medium.video-restriction-popup .coming-soon-content {
    border-radius: 10px;
    width: 750px;
}

.video-restriction-popup .coming-soon-content-icon {
    padding-top: 30px;
}
.video-restriction-popup .coming-soon-content-icon svg {
    width: 100px;
    height: 100px;
}
.video-restriction-popup .coming-soon-content-footer {
    padding-bottom: 30px;
}
.video-restriction-popup .coming-soon-content-footer .generate-button{
    padding: 20px 30px;
    font-size: 24px;
    font-weight: 400;
}

/* ======================= END: Video Restriction Modal Styles ======================= */




/* 
** =========================================
** BEGIN: Video Production Popup Styles 
** =========================================
*/

.video-production-popup {
    background: #FFFFFF;
    position: absolute;
    right: -30px;
    top: 0;
    min-width: 350px;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 0 15px 0 rgba(34, 41, 47, 0.20);
    padding: 20px 25px;
}
.vid-items-block.selected-row {
    display: flex;
    align-items: center;
}

.vid-image {
    width: 90px;
    height: 60px;
    overflow: hidden;
    border-radius: 5px;
}
.vid-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.video-product-header {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
.vid-headtitle {
    font-size: 18px;
    color: #484668;
}
.vidtitle-left {
    display: flex;
    align-items: center;
}
.vid-title-close {
    padding: 2px;
    cursor: pointer;
}
.vid-title-close svg path {
    fill: #9E9E9E;
}
.vid-title-close:hover svg path {
    fill: #353742;
}
.inn-separator {
    height: 1px;
    width: 100%;
    background: #DFE1E3;
    margin: 10px 0;
}
.vid-items-block {
    margin: 10px 0;
    display: flex;
    align-items: center;
}
.vidimg-content {
    width: 100%;
    padding: 0 10px;
    /* padding-right: 80px; */
    position: relative;
}

.selected-production .vid-title {
    font-weight: 700;
    color: #353742;
    font-size: 16px;
}
.selected-production .vid-title-small, .selected-production .vid-title-small a {
    color: #247CFF;
    font-size: 16px;
    cursor: pointer;
}

.vid-title-small {
    font-size: 16px;
    color: #353742;
}
.vid-title-arrow {
    cursor: pointer;
    padding: 5px;
}
.vid-title-iconset {
    display: flex;
    align-items: center;
}
.vid-bell-icon{
padding: 2px; margin-right: 5px;
cursor: pointer;
}
.vid-title-arrow svg {
transform: rotate(0deg);
transition: all 300ms ease;
}
.vid-title-arrow.show svg {
transform: rotate(180deg);
}
.vid-bell-icon {
padding: 2px;
margin-right: 5px;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.vid-title-arrow {
filter: grayscale(1);
opacity: 0.5;
transition: all 300ms ease-in-out;
}

.vid-bell-icon svg{
filter: grayscale(1);
opacity: 0.5;

}
.vid-bell-icon:hover svg,.vid-bell-icon.active svg{
filter: grayscale(0);
opacity: 1;

}
.vid-title-arrow:hover {
filter: grayscale(0);
opacity: 1;
}
.vid-title-arrow {
filter: grayscale(1);
opacity: 0.5;
}

.vid-bell-icon {
position: relative;
}
.bell-tooltip {
position: absolute;
top: -25px;
right: 0;
width: max-content;
color: #333333 !important;
background: #D0D1F7;
padding: 5px 15px;
border-radius: 9px;
filter: grayscale(0);
opacity: 0;
transition: all 300ms ease-in-out;
}
.vid-bell-icon:hover .bell-tooltip {
top: -30px;
opacity: 1;
}

.refresh-icon {
width: 20px;
cursor: pointer;
}
.refresh-icon svg {
width: 20px !important;
}
.re-freshblock {
/*  position: absolute;
bottom: 0;
right: 0; */
cursor: pointer;
display: flex;
align-items: center;
color: #516ff7;
justify-content: center;
padding: 15px 0 0;
border-top: solid 1px #DFE1E3;
}

.r-text {
display: inline-block;
padding-left: 5px;
}

/** only hover case **/
/** .re-freshblock {
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}
.vid-product-content:hover .re-freshblock {
opacity: 1;
visibility: visible;
}
**/

.vid-product-content {
min-height: 85px;
max-height: 312px;
transition: all 300ms ease-in-out;
}
.vid-product-content.show {
max-height: 0px;
min-height: 0px;
}
.vid-img-overlay {
background:linear-gradient(180deg, rgba(81, 111, 247, 0.75) 11.35%, rgba(81, 111, 247, 0.75) 71.63%);
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
}
.generate-video-content .image-card.sl-disabled {
opacity: 1;
}
.vid-img-overlay {
font-size: 18px;
}

/* Basic clockwise rotation */
.img-download-btn {
cursor: pointer;
}
.img-loader-btn svg {
animation: rotateClockwise 6s linear infinite;
}

@keyframes rotateClockwise {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

.progress {
height: 1px;
width: 100%;
background: linear-gradient(#474bff 0 0),
    linear-gradient(#474bff 0 0),
    #dbdcef;
background-size: 60% 100%;
background-repeat: no-repeat;
animation: progress-7x9cg2 3s infinite;
}

@keyframes progress-7x9cg2 {
0% {
    background-position: -150% 0,-150% 0;
}

66% {
    background-position: 250% 0,-150% 0;
}

100% {
    background-position: 250% 0, 250% 0;
}
}
/* ======================= END: Video Production Popup Styles ======================= */




/* 
** ====================================
** BEGIN: Credit Popup Styles 
** ====================================
*/

.credit-popicon {
background: #4c6ef5;
font-size: 20px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
margin: auto;
}
.credit-dropdown-popup {
padding: 30px 20px;
background: #FFF;
box-shadow: 0px 0px 20px 0px rgba(34, 41, 47, 0.20);
text-align: center;
border-radius: 10px;
transition: all 300ms ease-in-out;
z-index: 1;
position: relative;
}
.credit-dropdown-popup{
opacity: 0;
visibility: hidden;
pointer-events: none;
display: none;
}
.credit-dropdown-popup.show{
opacity: 1;
visibility: visible;
pointer-events: all;
display: block;
}
.credit-popbtn a {
color: #516FF7;
font-size: 16px;
}
.credit-email-block {
padding: 8px 0;
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
color: #484668;
font-size: 14px;
word-wrap: break-word;
}
.credit-email-block {
overflow: hidden !important;
text-overflow: ellipsis !important;
line-clamp: 1 !important;
-webkit-line-clamp: 1 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
white-space: nowrap;
}
/* ======================= END: Credit Popup Styles ======================= */




/* 
** ====================================
** BEGIN: Video Popup Styles 
** ====================================
*/

/** popup button style **/
.archive-popup-medium .image-modal-body .playbtn {
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}
.archive-popup-medium .image-modal-body:hover .playbtn {
opacity: 1;
visibility: visible;
}

/** video sidebar slider only **/
.only-video-slide a.carousel-control-prev, .only-video-slide a.carousel-control-next {
display: none;
}
/** popup button style **/


/** video popup control **/
.video-controls {
position: absolute;
bottom: 20px;
width: calc(100% - 20px);
background: hsl(0deg 0% 0% / 80%);
border-radius: 16px;
}
.video-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
transition: all 300ms ease;
opacity: 0;
visibility: visible;
transform: translateY(10px);
}
.video-modal-content:hover .video-controls {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}

.embed-btn {
background: #247cff;
color: #fff;
padding: 5px 12px;
border-radius: 5px;
display: inline-block !important;
width: max-content;
transition: all 300ms ease-in-out;
}
.video-Embed-first .embed-btn {
margin: 0 0 15px 15px;
}
.embed-btn:hover {
background: #3f5bd9;
color: #fff;
}

.video-Embed-overlay .playbtn, .video-Embed-overlay .video-controls {
display: none;
}
input.progress-input {
position: relative;
width: calc(100% - 160px);
height: 1px;
background-color: red !important;
}

.control-btn svg {
background: #516ff7;
border-radius: 14px;
width: 25px;
height: 25px;
padding: 2px;
}
.control-btn svg path, .control-btn svg rect {
fill: #FFF;
}

.time-display {
color: #FFF;
font-weight: 300;
font-size: 12px;
opacity: 1 !important;
}

/*.progress-input::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 2px;
background:red;
transition: width 0.3s ease;
}*/
.progress-input {
appearance: none;
-webkit-appearance: none; /* Remove default styling (Safari/Chrome) */
/*width: 100%;
height: 6px;*/
border-radius: 5px;
background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF var(--progress, 0%), #222129 var(--progress, 0%), #222129 100%);
outline: none;
cursor: pointer;
transition: background 0.3s ease;
}

/* Chrome, Safari, Edge */
.progress-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff; /* Bubble color */
cursor: pointer;
border: 2px solid white;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
transition: background 0.2s ease;
}

/*.progress-input::-webkit-slider-thumb:hover {
background: #1e40af; // Darker bubble on hover
}*/

/* Firefox */
.progress-input::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #FFFFFF;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.progress-input::-moz-range-track {
/*height: 6px;*/
border-radius: 5px;
background: #d1d5db;
}
/* ======================= END: Video Popup Styles ======================= */





/* 
** ==============================
** BEGIN: Generate Posts Styles 
** ==============================
*/

.posts-accrobody {
color: #353742;
}
.posts-accrodion-head {
font-size: 24px;
color: #353742;
}
.tab-accrodion-itemsbox {
background: #FFF;
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 6%);
padding: 20px;
border-radius: 10px;
}
.tab-accrodion-itemsbox .form-layout {
background: transparent;
box-shadow:none;
padding: 20px 0;
border-radius: 0px;
}
.tabpost-topwrap {
display: flex;
align-items: center;
justify-content: space-between;
}

.posts-accro-arrow {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;

}
.posts-accro-arrow.active svg {
transition: all 300ms ease-in-out;
}
.posts-accro-arrow.active svg {
transform: rotate(-180deg);
}

.we-creating {
font-size: 18px;
line-height: 26px;
padding-bottom: 10px;
}
.create-itemsblock {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}

.postsitems {
background: #FFF;
width: 33.33%;
display: flex;
align-items: center;
flex-direction: column;
padding: 20px;
border-radius: 10px;
transition: all 300ms ease-in-out;
box-shadow: 0 0 20px 0 rgb(23 31 73 / 9%);
cursor: pointer;
}
.postsitems.active {
background: #516FF7;
color: #FFF;
}
.postsitems:hover{
    background: #516FF7; 
    color: #FFF;
}
.postsitems:hover svg path, .postsitems.active svg path{
    fill: #ffffff; 
}
.creating-posts {
padding: 10px 0 24px;
}
.post-textarea-label {
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
padding-top: 10px;
}
.posts-accrobody .setting-label {
font-weight: 400;
}
.generate-arrowicon {
margin: 10px;
}
.accro-formlabel {
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
padding-top: 10px;
}
.generate-button.soon {
background: #ccc;
margin-left: 10px;
}
.soon.sl-disabled {
background: #a3a3a3;
margin-left: 10px;
}
.action-section.accrodion-posts-action {
justify-content: flex-start;
}
.tab-accrodion-itemsbox:not(:last-child) {
margin-bottom: 15px;
}

.yourpost-title {
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
padding-top: 10px;
}
.yourpost-right-block.yourpost-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yourpost-imgbox {
background: #FAFCFF;
display: flex;
align-items: center;
justify-content: center;
/* min-height: 190px; */
border-radius: 5px;
border: solid 1px #D0D1F7;
padding: 100px;
}
.yourpost-audiobox input {
background: #FAFCFF;
border-radius: 5px;
border: solid 1px #D0D1F7;
width: 100%;
height: 50px;
}

.action-play-pause svg {
background: #516ff7;
width: 30px;
height: 30px;
padding: 8px;
border-radius: 50px;
cursor: pointer;
}
.action-play-pause svg.pauseicon-posts {
padding: 0px;
}
.audio-right {
display: flex;
align-items: center;
}
.audio-time {
margin-right: 10px;
}
.audio-settingbox {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
.audio-right .audio-time {
color: #353742 !important;
}

/** post archives style **/
.posts-archive .image-card {
box-shadow: none;
border-radius: 0;
padding: 20px;
box-shadow: 0 0 20px 0 rgba(23, 31, 73, 0.05);
}
.posts-archive .image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.posts-article-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.article-settings {
display: flex;
align-items: center;
justify-content: flex-end;
}
.article-settings span {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 0 2px;
cursor: pointer;
}

.article-settings span.posts-loved:hover svg, .article-settings span.posts-loved.loved svg {
fill: #516FF7;
}
.article-settings span.posts-loved:hover svg path, .article-settings span.posts-loved.loved svg path {
fill: #516FF7;
stroke: #516FF7;
}

.posts-brandname {
color: #516FF7;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.posts-article-desc {
margin: 10px 0px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
padding-right: 10px;
padding-right: 10px;
line-height: 18px;
}

.post-playimage {
background: #EEF;
border: solid 1px #D0D1F7;
width: 100%;
padding-top: 75%;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.post-playimage img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 5px;
}
.post-playimage .icons-bg{
position: absolute;
top: 0;
opacity: 0;
visibility: hidden;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: all 300ms ease-in-out;
}
.posts-article-blocks:hover .icons-bg{
opacity: 1;
visibility: visible;
}

.post-playimage .icons-bg {
display: flex;
align-items: center;
justify-content: center;
/*visibility: hidden;
opacity: 0;*/
transition: all 300ms ease-in-out;
}
.post-playimage:hover .icons-bg {
visibility: visible;
opacity: 1;
}
.playicon-posts, .pauseicon-posts {
background: #516ff7;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
}
.playicon-posts {
padding: 15px;
}
.progress-basic {
width: 100%;
height: 5px;
background-color: #e0e0e0;
border-radius: 0;
overflow: hidden;
margin-top: 10px;
}

.progress-fill {
height: 100%;
background-color: #516ff7;
transition: width 2s ease-in-out;
}
.progress-fill.no-transition {
transition: none !important;
}

.article-btns {
border: solid 1px #DCDCDC;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 0 rgba(23, 31, 73, 0.10);
}
.article-btns {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
font-size: 13px;
cursor: pointer;
}
.article-btns svg {
margin-right: 3px;
}

.posts-article-btnset {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}

.article-dropdown {
position: absolute;
padding: 15px 5px;
top: 37px;
right: 10px;
background: #fff;
box-shadow: 1px 1px 10px #ccc;
display: flex;
flex-wrap: nowrap;
border-radius: 5px;
z-index: 1;
transition: all 300ms ease-in-out;
visibility: hidden;
opacity: 0;
width: max-content;
min-width: 200px;
}
.article-dropdown a {
display: block;
padding: 8px 10px;
color: #353742;
transition: all 300ms ease-in-out;
}
.article-dropdown a:hover {
background: #d3bcf175;
}
.article-dropdown.show {
top: 30px;
visibility: visible;
opacity: 1;
}
.article-dropdown ul {
padding: 0px;
margin: 0;
width: 100%;
}

.accro-formrow .inputbox input {
padding: 10px 20px;
width: 100%;
font-size: 16px;
color: #353742;
background-color: #FAFCFF;
border-radius: 8px;
border: 1px solid #e4e7eb;
}

/* ======================= END: Generate Posts Styles ======================= */





/* 
** ==============================
** BEGIN: Generate Ideas Styles 
** ==============================
*/

.generate-idea-content .tab-accrodion-itemsbox {
    padding: 30px;
}

.tab-accrodion-topwrap {
    display: flex;
    align-items: center;
}
.tab-accrodion-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.tab-accrodion-text {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-right: auto;
    padding-top: 10px;
    cursor: pointer;
}
.tab-accrodion-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.tab-accrodion-actions .scheduled-badge {
    width: max-content;
    padding: 5px 10px;
    background-color: #9392A6;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}
.tab-accrodion-actions .scheduled-badge.is_scheduled {
    background-color: #516FF7;
}

.accrodion-action-button {
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.accrodion-action-button svg {
    display: block;
    width: 24px;
    height: 24px;
}
.tab-accrodion-actions .accrodion-action-dropdown {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 2px;
    cursor: pointer;
}
.tab-accrodion-body {
    margin-left: 50px;
    margin-right: 275px;
    text-align: justify;
}

.accrodion-body-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.accrodion-body-footer .accrodion-footer-btn {
    background: #516FF7;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 300ms ease;
}


/** Add Idea Panel **/
.idea-panel .offcanvas, .idea-schedule-panel .offcanvas {
    padding: 20px;
}
.idea-panel .offcanvas-end, .idea-schedule-panel .offcanvas-end {
    width: 450px;
}
.idea-panel .offcanvas-header, .idea-schedule-panel .offcanvas-header {
    padding: 0;
}
.idea-panel .offcanvas-body, .idea-schedule-panel .offcanvas-body {
    padding: 15px 0px !important;
}

.gbl-whitebody-divider {
    height: 1px;
    background: #DFE1E3;
    margin: 20px 0;
}
.gbl-whitebody-divider.narrow {
    height: 1px;
    background: #DFE1E3;
    margin: 10px 0;
}

.gbl-formrow { 
    display: flex;
    align-items: center;
}
.gbl-formrow {
    margin-bottom: 10px;
}
.gbl-formrow.full-widthcol {
    flex-direction: column;
}

.fromrow-label {
    width: 25%;
}
.f-lebel {
    font-size: 20px;
    color: #353742;
}
.full-widthcol .fromrow-label,.full-widthcol .formrow-input {
    width: 100%;
}
.full-widthcol .fromrow-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.formrow-input input, .formrow-input textarea, .formrow-input select {
    border: solid 1px #E5E8EB;
    padding: 10px 15px;
    border-radius: 10px;
}
.formrow-input input, .formrow-input textarea, .formrow-input select {
    width: 100%;
}

.formrow-input input:focus, .formrow-input input:focus-visible,
.formrow-input textarea:focus, .formrow-input textarea:focus-visible,
.formrow-input select:focus, .formrow-input select:focus-visible{ 
    outline: none;
}

.gbl-formrow-footer-btn {
    margin: 20px 10px;
}
.gbl-bluebtn { 
    background: #516FF7;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 300ms ease;
}
.gbl-bluebtn:hover { 
    background: #4260e7;
}
.gbl-bluebtn:disabled {
    background-color: #A4B7FF;
    cursor: not-allowed;
    box-shadow: none;
}
.gbl-formrow-footer-btn .gbl-bluebtn {
    width: 100%;
    padding: 15px;
    font-size: 18px;
}
.gbl-formrow-footer-btn .gbl-bluebtn:focus, .gbl-formrow-footer-btn .gbl-bluebtn:focus-visible {
    outline: none;
}

.button-group {
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 0 20px 0 rgba(23, 31, 73, 0.05);
}
.generating-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    background-color: #610707; 
    padding: 17px 90px;
    font-size: 18px;
    /*min-width: 215px;*/
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: none;
}
.generating-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    background-color: #FFF; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
}
.loading-spinner {
    width: 25px;
    height: 25px;
    border: 4px solid #e2e8f0;
    border-top-color: #516FF7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.gbl-formrow-footer-btn .button-group {
    width: 100%;
font-size: 18px;
}


/** Idea Scheduled Panel **/
.idea-content-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.idea-content-item .idea-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.idea-content-item .idea-item-info {
    width: 100%;
    font-size: 18px;
    color: #666;
}

.idea-schedule-calendar {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.idea-calendar-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 20px 20px;
  margin: 10px;
  width: 100%;
  min-width: 260px;
  /*max-width: 320px;*/
  box-shadow: 0 12px 30px rgba(15, 35, 52, 0.08);
}

.idea-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.idea-calendar-month {
  font-weight: 600;
  font-size: 16px;
  color: #262643;
}
.idea-calendar-nav {
  display: flex;
  gap: 6px;
}

.idea-calendar-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #516FF7;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.idea-calendar-nav-btn:hover {
  background: #e1e2ff;
}

.idea-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.idea-calendar-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #a2a2be;
}

.idea-calendar-weeks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idea-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.idea-calendar-day {
  position: relative;
  border: none;
  background: transparent;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
}
.idea-calendar-day-inner {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #55546f;
}

.idea-calendar-day.is-other-month .idea-calendar-day-inner {
  color: #c7c7d9;
}
.idea-calendar-day.is-today .idea-calendar-day-inner {
  border: 1px solid #516FF7;
}
.idea-calendar-day.is-selected .idea-calendar-day-inner {
  background: #516FF7;
  color: #ffffff;
}
.idea-calendar-day:hover .idea-calendar-day-inner {
  background: rgba(91, 90, 255, 0.08);
}
.idea-calendar-day.is-selected:hover .idea-calendar-day-inner {
  background: rgba(91, 90, 255, 0.08);
  color: #55546f;
}

.idea-loader-div .generating-indicator {
    padding: 17px 140px;
}
.idea-schedule-loader-div .generating-indicator {
    padding: 17px 120px;
}

/* ======================= END: Generate Ideas Styles ======================= */






/* 
** ===================================
** BEGIN: Blog Post Generate Style 
** ===================================
*/
.postsettings-btn {
    padding: 10px 25px;
    min-width: inherit;
}
.settingblog-button-set {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}
.postsettings-btn.upload-btn {
    background: transparent;
    color: #516ff7;
    box-shadow: none;
}
.settings-column .generating-indicator {
    display: flex;
    justify-content: center;
    padding: 10px 10px !important;
}

.tabpost-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tabpost-actions a {
    color: #516FF7;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
}
.tabpost-actions button {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    background-color: #516FF7;
    color: white;
    font-weight: 400;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    box-shadow: 0 4px 6px rgba(81, 111, 247, 0.15);
}
.tabpost-actions button span {
    margin-left: 10px;
}

.generate-blog-post-content .tab-accrodion-itemsbox .form-layout {
    padding: 0px;
}

.setting-block .inputbox input {
    padding: 10px 20px;
    width: 100%;
    font-size: 16px;
    color: #353742;
    background-color: #FAFCFF;
    border-radius: 8px;
    border: 1px solid #e4e7eb;
}

/*.yourpost-right-block.post-cover-image .yourpost-imgbox {
    padding: 50px;
}
.yourpost-right-block.post-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

.blog-post-left .text-input-wrapper {
    height: Calc(100% - 150px);
    border: 1px solid #e4e7eb !important;
}

.blog-post-left .text-input-wrapper .ql-container.ql-snow {
    height: 88% !important;
}

.blog-post-left .text-input-wrapper .ql-toolbar.ql-snow,
.blog-post-left .text-input-wrapper .ql-container.ql-snow {
    padding: 20px 30px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    border: none !important;
}
.blog-post-left .text-input-wrapper .ql-toolbar.ql-snow {
    border-bottom: 1px solid #e4e7eb !important;
}

.blog-post-left .text-input-wrapper .ql-container.ql-snow .ql-editor ul li {
    list-style-type: disc;
}
.blog-post-left .text-input-wrapper .ql-container.ql-snow .ql-editor ol li {
    list-style-type: decimal;
}

.setting-block-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.setting-block-button .generate-button {
    width: 100%;
    background: #516FF7;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 300ms ease;
}

.setting-block-button .button-group {
    width: 100%;
}
.setting-block-button .button-group .generating-indicator {
    padding: 12px 150px;
}

.blog-post-right .inn-separator {
    margin: 20px 0;
}

.blog-post-right .setting-block {
    margin-bottom: 15px;
}
.blog-post-right .setting-block .setting-label {
    margin-bottom: 5px;
}
.blog-post-right .setting-block .inputbox a {
    width: 100%;
    font-size: 16px;
    padding: 13px 20px;
    background: #FAFCFF;
    color: #247CFF;
    border-radius: 8px;
    border: 1px solid #D0D1F7;
    text-decoration: none;
}

.blog-post-card .posts-article-desc {
    cursor: pointer;
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 500;
}
.blog-post-card .posts-article-status{
    display: flex;
    align-items: center;
    margin: 10px 0;
    justify-content: space-between;
}
.blog-post-card .posts-article-status .switcher-title{
    padding: 0 0 0 10px;
    font-size: 16px;
    font-weight: 400;
}
.blog-post-card .posts-article-author {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.blog-post-card .posts-article-author .posts-author-imagebox {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}
.blog-post-card .posts-article-author .posts-author-imagebox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-post-card .posts-article-author .posts-author-name {
    font-size: 16px;
    font-weight: 500;
    color: #516FF7;
}
.blog-post-card .posts-article-btnset {
    margin-top: 10px;
}
/* ======================= END: Blog Post Generate Styles ======================= */




/* 
** ===============================================
** mb-switcher Start [inner-style ] parent
** ===============================================
*/

.mb-switcher {
    display: flex;
    align-items: center;
}
.header-profile-actions .mb-switcher {
    border-right: solid 1px #ccc;
}
.switcher-title {
    font-size: 20px;
    font-weight: 500;
    color: #484668;
    padding: 0 20px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E2E2E2;
    transition: 0.4s;
    border-radius: 40px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background-color: #516FF7;
}
input:checked + .slider:before {
    transform: translateX(13px);
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
/* =======================  mb-switcher End ======================= */





/* 
** ===============================================
**  Blog post page video controls Style start
** ===============================================
*/
.sushi-postvideo-section{
    position: relative;
}
.sushi-postvideo-section video {
    border-radius: 15px;
}
.sushi-postvideo-section .playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    cursor: pointer;
    z-index: 10;
}
.sushi-postvideo-section .playbtn {
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out;
}
.sushi-postvideo-section:hover .playbtn {
    opacity: 1;
    visibility: visible;
}

.video-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    transition: all 300ms ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}
.sushi-postvideo-section:hover .video-controls {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}
.video-controls {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 40px);
    background: hsl(0deg 0% 0% / 80%);
    border-radius: 16px;
    left: 20px;
}

input.progress-input {
    position: relative;
    width: calc(100% - 130px);
    height: 1px;
    background-color: red !important;
}
.time-display {
    color: #FFF;
    font-weight: 300;
    font-size: 12px;
    opacity: 1 !important;
}
.video-controls {
    z-index: 10;
    cursor: pointer;
}
.control-btn svg {
    background: #516ff7;
    color: #FFF;
    border-radius: 14px;
    width: 25px;
    height: 25px;
    padding: 2px;
}
.progress-input {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF var(--progress, 0%), #222129 var(--progress, 0%), #222129 100%);
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Chrome, Safari, Edge */
.progress-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff; /* Bubble color */
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 2px rgba(0,0,0,0.4);
    transition: background 0.2s ease;
}

/** =============================== video controls Style End ================================= **/





/* 
** ===============================================
**  Homepage Settings Style start
** ===============================================
*/

.homepage-settings .content-area-wrapper {
    overflow: hidden !important;
    height: auto !important;
}
.homepage-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.homepage-settings-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #353742;
    margin-bottom: 0px;
}
.homepage-settings-box .story-row {
    padding: 20px 20px 20px 0px !important;
}
.brand-color-group.brand-secondary-group select {
    min-width: 120px !important;
}
.homesetting-button-row {
    display: flex;
    align-items: center;
    gap: 15px;
    
}

.story-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.story-row-title {
    width: 20%;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #353742;
}
.story-row-input, .story-row-select, .story-row-textarea {
    width: 80%;
}

/* Name and slug row */
.settings-name-row .settings-name-inner {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: space-between;
}
.settings-name-group { 
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%; 
}
.settings-name-group .inputbox {
  width: 100%;
}
.settings-name-group .inputbox input {
  width: 95%;
}
.settings-name-group.settings-slug-group {
    gap: 20px; 
}
.settings-name-group.settings-slug-group .inputbox input {
  width: 100%;
}
.settings-name-label {
  font-size: 14px;
  color: #9593ac;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Homepage Hero settings: voice intro row */
.voice-intro-row .voice-intro-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.voice-intro-row .voice-file-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 2px 6px rgba(81, 111, 247, 0.05);
  width: 80%; 
}
.voice-intro-row .voice-audio-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.voice-intro-row .voice-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #516ff7;
  font-size: 14px;
}
.voice-intro-row .voice-file-name {
  font-size: 14px;
  color: #484668;
}
.voice-file-name {
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.voice-intro-row .voice-play-btn {
    width: 35px;
    height: 35px;
    border-radius: 20px;
    background: #516ff7;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(81, 111, 247, 0.25);
    cursor: pointer;
}

.hero-choose-btn {
  border: none;
  border-radius: 10px;
  background: #516ff7;
  color: #fff;
  padding: 10px 22px;
  font-size: 14px;
 min-width: inherit;
}
.hero-upload-text-btn {
  border: none;
  background: transparent;
  color: #516ff7;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}
.homepage-settings-box .homepage-button-wrap .generate-button {
    border-radius: 10px;
    padding: 10px 20px;
    min-width: 100px !important;
}


/* Brand colors row */
.brand-color-row .brand-color-inner {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: space-between;
}
.brand-color-group { 
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%; 
}
.brand-color-group.brand-secondary-group {
    gap: 30px; 
}
.brand-color-label {
  font-size: 14px;
  color: #9593ac;
}
.brand-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.brand-color-swatch {
    position: absolute; 
    top: 50%;
    right: 10px;
    transform: translateY(-50%); 
}
.brand-color{
    position: relative;
}

/* Brand color picker styles */
.brand-color-picker {
  position: relative;
}
.brand-color-picker .brand-color-input {
  position: absolute;
  top: 50%;
  right: 10px; /* adjust to align exactly with your swatch */
  transform: translateY(-50%);
  width: 20px;   /* match swatch size */
  height: 20px;  /* match swatch size */
  opacity: 0;    /* invisible but clickable */
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Hero image box */
.hero-image-row .hero-image-box {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #edf0f4;
  height: 150px;
  box-shadow: 0 4px 12px rgba(81, 111, 247, 0.04);
}

/* Generate / Upload buttons under hero image */
.hero-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.hero-generate-btn {
  border: none;
  border-radius: 10px;
  background: #516ff7;
  color: #fff;
  padding: 10px 30px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(81, 111, 247, 0.18);
  min-width: inherit;
}
.hero-upload-link-btn {
  border: none;
  background: transparent;
  color: #516ff7;
  font-size: 14px;
  cursor: pointer;
}
.hero-upload-link-btn:disabled {
    color: #A4B7FF;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

/* About Tab - Social Links Row */
.story-row.story-row-social .story-row-title{
    width: 20%;
}
.story-row.story-row-social .story-row-select{
    width: 30%;
}
.story-row.story-row-social .story-row-input {
    width: 50%;
    padding-left: 30px;
}

.homepage-button-wrap {
    padding-top: 20px;
}
.homepage-button-wrap .generate-button {
    border-radius: 10px;
    padding: 15px 20px;
    min-width: 115px !important;
}

.story-row .text-input-wrapper {
    height: 200px;
    border: 1px solid #ccc !important;
    background-color: #fff !important;
}
.story-row .text-input-wrapper .ql-toolbar.ql-snow,
.story-row .text-input-wrapper .ql-container.ql-snow {
    padding: 15px 30px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    border: none !important;
}
.story-row .text-input-wrapper .ql-toolbar.ql-snow {
    border-bottom: 1px solid #ccc !important;
}
.story-row .text-input-wrapper .ql-container.ql-snow {
    height: 65% !important;
}
.story-row .text-input-wrapper .ql-container.ql-snow .ql-editor p {
    line-height: 24px;
}
.story-row .text-input-wrapper .ql-container.ql-snow .ql-editor ul li {
    list-style-type: disc;
}
.story-row .text-input-wrapper .ql-container.ql-snow .ql-editor ol li {
    list-style-type: decimal;
}


/* Video Tab */
.video-links-wrap .voice-intro-row .voice-file-box {
    padding: 10px 20px;
}


/* loader */
.loader {
  width: 55px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side,#516ff7 90%,#0000) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
}
@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}

/* =============================== Homepage Settings Style End ================================= */





.gbl-imageicon-setimage {
    background: #FAFCFF;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 145px;
    border-radius: 5px;
    border: solid 1px #E5E8EB;
    padding: 30px;
    width: calc(100% - 150px);
    position: relative;
    overflow: hidden;
}
.heroimg-upload {
    align-items: flex-start;
}
.svgbox {
    background: #F7F7FC;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    z-index: 1;
}
.svgbox svg {
    width: 35px;
    height: 35px;
}
.gbl-imageicon-setimage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/** ======================
writing-style start 
=======================**/
.writing-style-reftitle .storyitems-title {
    margin-bottom: 5px;
    font-size: 20px;
}
.writing-style-reftitle .story-medium-desc {
    margin: 5px 0; 
    font-size: 15px;
}
.writing-post-row .image-gender {
    align-items: flex-start;
}
.postfield-block {
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 10px 20px;
    background: #fff;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.writing-post-row .placeholder-center{
    position: relative;
}
.writing-post-row .placeholder-center::placeholder {
position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1; 
    visibility: visible;
    transition: all 100ms ease-in-out;
    
}
.writing-post-row .placeholder-center:focus{ 
    outline: solid 1px;
}
.writing-post-row .placeholder-center:focus::placeholder{
    opacity: 0; visibility: hidden;
}


/** ======================
writing-style End 
=======================**/
/** ======================
News style Start 
=======================**/

.news-filter-content-row {
    display: flex;
    gap: 20px;
    justify-content: stretch;
}
.news-featureimg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-featureimg {
    position: relative;
    padding-top: 56%;
    border-radius: 10px;
    overflow: hidden;
}
.news-posttitle {
    font-size: 16px;
    font-weight: 400;
    color: #516FF7;
    margin-top: 10px;
}
.news-source-contentwrap {
    color: #353742;
}
.news-itemsblock-inner {
    padding: 20px;
    border-radius: 20px;
    background: #fff;
}
.news-filterrow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.news-filterrow span {
    background: #fff;
    justify-content: center;
    display: flex;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 14px;
}
.storyteller-items-wrap.news-source-wrap {
    background: #F8FAFB !important;
}
.news-visual-footer .generate-button {
    min-width: 100px;
}
.newsfilter-outer {
    padding-bottom: 100px;
}
/** ======================
News style End
=======================**/


.generate-img-labelrow { 
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.generate-img-labelrow .input-label{
    margin-bottom: 0px !important;
}
.medium-btns {
    padding: 8px 15px;
    font-size: 14px;
    min-width: inherit;
    border-radius: 6px;
    margin: 2px;
}




/* 
** ===================================
** BEGIN: Responsive All Style 
** ===================================
*/

/* ----- Media 767px Start ----- */
@media screen and (max-width: 767px){
    .svg-progress {display: none;}
    .svg-progress.mobile {
        width: 750px;
        height: 434px;
        transform: rotate(-25deg);
        position: absolute;
        top: -90px;
        left: -52px;
        z-index: 0;
        display: block;
    }
    .svg-20.active {
        stroke: #516FF7;
        stroke-dasharray: 871.48;
        stroke-dashoffset: -775.89;
        filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
        opacity: 1;
        transition: all 300ms ease;
    }
}


/* ----- Media 1920px Start ----- */
@media screen and (min-width: 1920px){
    .video-production-popup {
        right: -110px;  
    }
}

/* ----- Media 1919px Start ----- */
@media screen and (max-width: 1919px){
    .storyteller-missing-alert span {
        font-size: 17px;
    }
}

/* ----- Media 1600px Start ----- */
@media screen and (max-width: 1600px){
    .storyteller-missing-alert span {
        font-size: 14px;
    }
}
@media screen and (min-width: 1600px){
    .stroy-items {
        min-height: 430px;
    }
    .generate-img-labelrow { 
    align-items: center;
}
}

/* ----- Media 1366px Start ----- */
@media screen and (max-width: 1366px){
    .storyteller-missing-alert span {
        font-size: 12px;
    }
}


@media screen and (min-width: 1200px) and (max-width: 1299px){
.generate-form-container .input-label {
    font-size: 18px;
}
.medium-btns {
    font-size: 12px;
}
}



/* ----- Media 1199px Start ----- */
@media screen and (max-width: 1199px) {
    .floating-nav .navbar-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .floating-nav a.nav-link.menu-toggle {
        padding-left: 0 !important;
    }
    .generate-image-content .tab-button {
        padding: 16px 0px;
    }
    .drag-target {
        left: -20px;
    }
    .generate-img-labelrow {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

/* ----- Media 1024px Start ----- */
@media screen and (max-width: 1024px) {
    .story-row.visual-block {
        padding-left: 60px;
    }
}

/* ----- Media 991px Start ----- */
@media screen and (max-width: 991px) {
    .generate-img-labelrow {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
    }
    .medium-btns {
        padding: 6px 12px;
        font-size: 12px;
        min-width: inherit;
        border-radius: 6px;
        margin: 2px;
    }
    .generate-img-labelrow {
        justify-content: flex-start; 
        align-items: flex-start;
    }
    .story-sidebar-left {
        width: auto;
    }
    .inner-menu-text {
        padding-left: 0;
        font-size: 0;
    }
    .storynav-inner {
        padding: 12px 12px;
    }
    .storyprofile-content-wrapper {
        width: calc(100% - 50px);
    }
    .inner-menu-lock-icon {
        right: 0;
        top: 0;
        transform: translateY(0%);
    }
}

/* ----- Media 768px Start ----- */
@media screen and (min-width: 768px){
    .story-row.visual-block {
        padding-left: 60px;
    }
}
@media (max-width: 768px) {
    .image-settings {
        flex-direction: column;
        gap: 16px;
    }

    .setting-group {
        width: 100%;
    }

    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    html .navbar-floating.footer-static .app-content.storyteller-profile .content-area-wrapper {
    /* height: calc(100vh - -560px); */
        height: auto;
    }

    .story-row{
        flex-direction:column;
        gap:16px;
    }
    .story-row-next .voice-set-btn,
    .story-row-next .generate-button{
        width:100%;
        justify-content:center;
    }
}

/* ----- Media 767px Start ----- */
@media (max-height: 767px) and (orientation: landscape) {
    .vertical-layout.vertical-menu-modern.menu-expanded .main-menu 
    .user-avatar-wrapper{
        display: none;
    }

    .vertical-layout.vertical-menu-modern.menu-expanded .main-menu .credit-dot-icon{
        display: initial;
    }
}
@media screen and (max-width: 767px){
    .swal2-container.swal2-top-right.swal2-backdrop-show {
            justify-content: center;
    }
    .swal2-toast-sushiLab {
        top: 170px;
    }
    .swal2-toast-sushiLab {
        top: 168px;
        padding: 10px !important;
    }

    /** footer bottom slider start **/    
    .for-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #DFE1E3 !important;
        margin-top: 15px;
        padding-top: 10px;
    }

    .mb-archive-slider .carousel-control-prev, 
    .mb-archive-slider .carousel-control-next{
        display: none !important;
    }

    .for-mobile .carousel-control-prev, 
    .for-mobile .carousel-control-next {
        position: relative;
        left: inherit;
        right: inherit;
        width: 40px !important;
        height: 40px;
        opacity: 1;
        margin: 5px 10px;
    }

    .clip-download-image {
        background: #516ff7;
        width: 35px;
        height: 35px;
        border-radius: 50px;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .for-mobile  .carousel-control-next-icon,
    .for-mobile  .carousel-control-prev-icon {
        width: 25px !important;
        transition: all 300ms ease-in-out;
    }

    .copy-clipboard .clip-title {
        line-clamp: 2;
        -webkit-line-clamp: 2;
        max-width: 85%;
    }

    .archive-popup-medium .modal-header-title {
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-size: 15px;
    }
    .footer-rightbtn .generate-button {
        font-size: 13px;
        min-width: 140px;    
    }
    .iconpencil-wrap.gn-image {
    padding-left: 0;
    }
    .clip-download-image,
    .carousel-control-prev,
    .carousel-control-next{
            transition: all 300ms ease-in-out;
    }

    .clip-download-image:hover svg path {
        stroke: #FFF !important;
    }

    .clip-download-image:hover {
        background-color: #4763e5 !important;
    }

    .mobile-hide{
        display: none;
    }

    .image-modal-overlay.archive-popup-medium {
        align-items: end;
    }

    .image-modal-overlay.archive-popup-medium.coming-soon-popup {
        align-items: center;
    }

    .archive-popup-medium.coming-soon-popup .image-modal-content {
        border-radius: 8px 8px;
    }

    .for-mobile .carousel-control-prev:hover, 
    .for-mobile .carousel-control-next:hover {
        background-color: #4763e5 !important;
    }

    .archive-popup-medium .image-modal-content {
        border-radius: 8px 8px 0 0;
    }

    /** footer bottom slider end **/ 
    .image-prompt-title {
        font-size: 18px;
    }

    .image-modal-content {
        padding-bottom: 140px;
    }

    .copyicon {
        top: 5px;
    }
    .generate-image-content .tab-button {
        font-size: 20px;
        font-weight: 600;
    }

    html .content.app-content {
        padding: calc(2rem + 4.45rem + 1.3rem) 2rem 150px !important;
    }


    /* audio archive section **/
    .audio-item-container {
        flex-direction: column;
    }
    .audio-title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        max-width: 90%;
    }
    .audio-actions {
        width: 100%;
    }
    .audio-list-item .play-button {
        position: absolute;
        top: 45px;
        left: 10px;
    }
    .audio-info {
        padding-bottom: 15px;
        border-bottom: solid 0px #eaeaea;
    }
    .audio-list-item .play-button {
        width: 40px !important;
        height: 40px !important;
        min-width: inherit;
    }
    .audio-waveform-icon {
        padding: 10px 0px;
        width: calc(100% - 50px);
        margin-left: 50px;
    }
    .image-grid-row .audio-waveform-icon {
            max-width: calc(100% - 0px);
    }

    .circle-assistant {
        width: 90px;
        height: 90px;
        border-radius: 100px;
        padding: 10px;
    }

    /** story **/
    .avatar-container { 
        width: 300px; 
        height: 300px;
    }
    .action-circle { 
        width: 90px; 
        height: 90px;
    } 
    .assis-video-title { 
        font-size: 16px;
    }
    .assistant-frame { 
        bottom: 30px;
    }
    .avatar-svg { 
        padding: 15px;
    }
    .storyteller-default .avatar-svg {
        padding: 5px;
        margin-top: 10px;
    }
    .action-image { 
        left: 150px;
    }
    .action-image .action-tooltip {
        left: -7px !important;
        right: inherit;
        bottom: -20px;
    }
    /** action tooltip **/
    .action-profile .action-tooltip {
        width: 115px;
    }
    .action-tooltip {
        font-size: 16px;
    }


    /** audio offcanvas start **/
    .audio-selection-panel .audio-item-container {
        flex-direction: row;
    }
    .audio-selection-panel .audio-list-item .play-button {
        position: relative;
        top: 0;
        left: inherit;
    }
    h5#imageSelectionLabel, h5#audioSelectionLabel, h5#ideaCanvasLabel, h5#scheduleCanvasLabel {
        font-size: 24px;
    }
    .image-selection-panel .btn-close, 
    .audio-selection-panel .btn-close {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
    }
    .image-selection-panel .offcanvas-header .btn-close, 
    .audio-selection-panel .offcanvas-header .btn-close {
        margin-right: 0;
    }


    /** audio offcanvas end **/
    .image-gender {
        flex-direction: column;
    }
    .traning-ai {
        flex-direction: column-reverse;
    }
    .traning-left {
        margin-bottom: 15px;
    }

    .image-gender-title, .select-desc {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    .upload-imgitem {
        padding: 15px;
        width: calc(33% - 12px);
    }
    .image-facemodel, .image-gender-select {
        width: 100%;
        max-width: 100%;
    }
    .story-items-block { flex-direction: column;}
    .stroy-items { width: 100%;}

    /** credit popup **/
    .archive-popup-medium.credit-popup .image-modal-content {
        padding: 30px 15px;
    }
    .archive-popup-medium.credit-popup .image-modal-body {
        margin: 5px 5px;
    }
    .credit-price {
        font-size: 18px;
        padding: 0 10px;
    }
    .unit-title {
        font-size: 18px;
        line-height: 24px;
    }
    .archive-popup-medium.credit-popup .modal-header-title {
        font-size: 22px;
        line-height: 26px;
    }
    .image-modal-overlay.archive-popup-medium.credit-popup {
        align-items: center;
    }
    .credit-pbtn .generate-button {
        min-width: 75px;
        padding: 10px;
        border-radius: 9px;
    }
    .archive-popup-medium.credit-popup .image-modal-content {
        border-radius: 10px;
    }
    .image-modal-overlay.credit-popup.show {
        background-color: rgb(0 0 0 / 42%);
    }
    .image-facemodal-outer {
        width: 100%;
        max-width: 100%;
    }
    .upload-imgitem {
        padding: 15px;
        width: calc(33% - 12px);
        height: 100px;
    }
    .placeholder-img {
        width: 60px;
        height: 60px;
        padding: 16px;
    }

    .video-popup .image-modal-content.video-modal-content {
            max-width: 90vw;
    }
    .modal-header-actions {
        gap: 0px;
    }
    .audio-selection-panel .generate-imagedate {
        border-top: 0 !important;
    }
    .image-grid-block:not(:first-child) .generate-imagedate {
        border-top: 1px solid #DFE1E3 !important;
    }
    .audio-selection-panel .image-grid-block:not(:first-child) .generate-imagedate {
        border-top: 1px solid #DFE1E3 !important;
    }
    .image-prompt-title {
        font-size: 16px;
    }
    .image-prompt-grid {
        justify-content: center;
        flex-wrap: wrap;
    }
    .image-prompt-item {
        width: 75px;
    }
    .archive-tabright .setting-block {
        width: 170px;
    }
    #generateImageContent .archive-img-header {
        flex-wrap: wrap;
    }
    #generateImageContent .img-count {
        font-size: 20px;
        width: 100%;
        margin-bottom: 10px;
    }
    .generate-form-container .input-label {
        font-size: 20px;
    }
    .img-count {
        font-size: 20px;
    }
    .prompt-word-count {
        font-size: 14px;
    }
    .audio-headright span {
        font-size: 14px;
    }

    .itemstitle {
        text-align: center;
        line-height: 16px;
        margin-top: 5px;
    }
    .create-itemsblock {
        gap: 10px;
    }
    .itemsicon svg {
        width: 25px;
    }
    .posts-accrodion-head {
        font-size: 20px;
    }
    .generate-post-content .archive-img-header {
        flex-direction: column;
        justify-content: flex-start;
    }
    .generate-post-content .img-count {
        font-size: 20px;
        width: 100%;
        margin-bottom: 5px;
    }
    .generate-post-content .archive-tabright .setting-block {
        width: 190px;
    }
    .generate-post-content .posts-archive .image-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }
    .posts-archive .image-card {
        padding: 20px 0;
    }
    .generate-post-content .article-btns {
        font-size: 12px;
    }

    /** storyteller face **/
    .storyitems-title {
        font-size: 20px;
    }

    .setface-footer {
        text-align: center;
        padding: 20px 0;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 300ms ease-in-out;
    }
    .storyteller-items-wrap:hover .setface-footer {
        opacity: 1;
        visibility: visible;
    }
    .storyprofile-content-wrapper {
        margin-left: 0;
    }
    .story-slide-inner {
        padding: 20px 20px;
    }
    .story-row {
        padding: 15px 15px;
    }
    .large-upload-img {
        padding: 20px;
    }
    .image-desc-btn {
        font-size: 14px;
    }
    .module-name {
        font-size: 20px;
        line-height: 26px;
    }
    .slide-btn {
        padding-right: 10px;
    }
    .slide-btn svg {
        width: 26px;
    }
    .storyteller-row {
        flex-wrap: wrap;
        align-items: flex-start; 
    }
    .storyteller-images-box {
        width: 47%;
    }
    .items-bold-title {
        font-size: 20px;
    }
    .soon-box {
        padding: 10px 20px; 
    }
    .storyteller-box-header {
        font-size: 22px;
    }

    /** homepage-settings-box Start **/

    .homepage-settings-box .story-row-inner {
      flex-direction: column;
    }
 .homepage-settings-box .story-row-title {
    width: 100%;
    margin-bottom: 5px;
}
 .homepage-settings-box .story-row-input, 
  .homepage-settings-box .story-row-select, 
   .homepage-settings-box .story-row-textarea {
    width: 100%;
}
 .homepage-settings-box .story-row-select {
    min-width: 110px;
}
.homepage-settings-box .story-row {
    padding: 20px 0px 0px 0px !important;
}
.homepage-settings-box .voice-intro-row .voice-intro-inner {
    flex-direction: column;
}
.homepage-settings-box .voice-intro-row .voice-file-box { width: 100%;}

.homepage-settings-box .voice-intro-row .voice-play-btn {
    width: 30px;
    height: 30px;
}
.homepage-settings-box .voice-intro-row .voice-audio-box {  gap: 0;}
.homepage-settings-box .inputbox input { font-size: 12px;}
.homepage-settings-box .selectbox select { padding: 10px 30px 10px 10px  !important;  font-size: 13px;}
.homepage-settings-box  .brand-color-group.brand-secondary-group { gap: 10px;}
.homepage-settings-box .story-row-title,
.homepage-settings-box .story-row-input, 
.homepage-settings-box .story-row-select {
    width: 100% !important;
} 

.homepage-settings-box .story-row-input {
    padding-left: 0 !important;
    margin-top: 10px;
}

.homesetting-button-row {
width: 100%;
}

.homepage-settings-box .brand-color-group {
    flex-direction: column;
    width: 50%;
    gap: 0;
}
.homepage-settings-box .brand-color-label {
    width: 100%; 
}

.gbl-imageicon-setimage {
    width: calc(100% - 0px);
    margin-top: 10px;
}

/** news style **/
.news-filter-content-row {
    flex-direction: column;
}
/** homepage-settings-box Start **/

.medium-btns {
    padding: 6px 12px;
    font-size: 12px;
}

}

/* ----- Media 576px Start ----- */
@media (max-width: 576px) {
    .generate-form-container .input-label.audio-input-label {
        flex-direction: column;
        align-items: flex-start;
    }
    .prompt-char-count {
        margin-left: 0;
        margin-top: 4px;
    }

    .archive-popup-medium.credit-popup .credit-checkout-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .archive-popup-medium.credit-popup .checkout-paypal-btn {
        width: 100%;
    }


    /** credit poppu **/
    .coupon-box { flex-direction: column;}
    .coupon-box .inputbox {  width: 100%;}
    .coupon-title {  font-size: 18px; margin-top: 10px; text-align: left; width: 100%;}
    .coupon-box.show { height: 85px;}
    .coupon-box { width: calc(100% - 0px); margin: 0px 0px; }
    .archive-popup-medium.credit-popup .image-modal-body { margin-top: 25px !important;  }
    .coupon { font-size: 16px;}    
    /** credit poppu **/

}

/* ----- Media 480px Start ----- */
@media screen and (max-width: 480px) {
    .navbar-floating .header-navbar-shadow {
        top: -1px;
    }
    .main-menu .main-menu-content {
        height: calc(76% - 29%) !important;
        position: relative;
        overflow-y: scroll !important;
    }

    .sidebar-credit-block {
        position: relative;
    }

    .generate-form-container .form-column{
        min-width: 100%;
    }

    .generate-inner-box {
        margin: 0px;
    }

    .generate-form-container {
        padding: 0 0px;
    }

    .sidebar-contentscroll {
        overflow-y: auto;
        height: calc(100% - 0px);
    }

    .vertical-overlay-menu.menu-open .main-menu {
        overflow-y: scroll;
    }

    .copy-clipboard {
        position: relative;
    }

    .image-modal-content {
        padding-bottom: 0px;
    }

    .image-modal-content {
        max-width: 100vw;
        max-height: 100vh;  
    }

    /** audio offcanvas start **/
    .enable-scrolling-backdrop.image-selection-panel .offcanvas-end, 
    .enable-scrolling-backdrop.audio-selection-panel .offcanvas-end {
        width: 350px;
    }
    .image-selection-panel .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    /** audio offcanvas end **/

    /** video modal popup start **/
    .video-popup .image-modal-content.video-modal-content {
            max-width: 100vw;
    }
    .archive-popup-medium.video-popup .modal-header-title {
            max-width: 55%;
    }
    /** video modal popup End **/


    .storyteller-nav {
        display: flex;
        position: fixed;
        top: 92px;
        z-index: 1;
        width: 100%;
        justify-content: center;
        background: white;
        left: 0;
        box-shadow: 1px 1px 10px #ccc;
        align-items: center;
    }
    .story-nav:not(:last-child) {  margin-bottom: 0;}
    .story-nav { margin: 5px !important;}
    .storyprofile-content-wrapper {
        width: calc(100% - 0px);
        margin-top: 60px;
                padding-left: 0 !important;
    }
    .story-slide-wrapper { padding: 0px;}
    .upload-imgitem {
        padding: 15px;
        width: calc(50% - 12px);   
    }
    /*html .navbar-floating.footer-static .app-content.storyteller-profile .content-area-wrapper {
        height: calc(100vh - -840px);
    }*/
    .traning-left .generate-button {font-size: 14px;}
    .stroy-items { width: 100%;}
    .storyteller-items-wrap { padding: 0;}

    .storyteller-setup-content {
        padding: 40px 0;
    }

    /** credit popup **/

    .coming-soon-content-title {
        font-size: 24px;
        line-height: 30px;
    }
    .coming-soon-content-icon svg {
        width: 130px;
        height: 130px;
    }
    .modal-action-button svg {
            width: 16px;
            height: 16px;
    }
    .iconpencil-wrap svg {
        padding: 4px;
    }
    .audio-selection-panel .generate-imagedate {
        border-top: 0 !important;
    }
    .image-grid-block:not(:first-child) .generate-imagedate {
        border-top: 0px solid #DFE1E3 !important;
    }
    .image-prompt-title {
        font-size: 16px;
    }
    .image-prompt-grid {
        justify-content: center;
        flex-wrap: wrap;
    }
    .image-prompt-item {
        width: 75px;
    }
    .archive-tabright .setting-block {
        width: 170px;
    }
    .generate-form-container .input-label {
        font-size: 18px;
    }
}
/* ======================= END: Responsive All Style ======================= */