/* Basic reset for padding and margin */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
html body .font-9 {
    font-size: 9px; 
}

.modal.notTooWide .modal-dialog
{
    max-width: 650px;
}
.modal-dialog.modal-dialog-xl
{
    max-width:650px;
}


.modal-dialog.quotation .quotationBlock
{
    font-size:2em;
    font-weight: 600;
    color:#000;
    padding: 35px 25px 10px 25px;
}

.modal-dialog.quotation .attributionBlock
{
text-align: right;
margin-right: 4em;
font-size: 2em;
color:#444;
margin-bottom:50px;
}
.modal-dialog.quotation .explanationBlock
{
    margin-top:20px;
    line-height:1.8;
    color:#666;
    padding-left:2em;
    padding-right:2em;
}

.justify-content-space-between{
    justify-content: space-between;
}
.defaultStyle .defaultStyleInnerWrapper
{
    padding:20px;
}

.secondary
{
    font-size: 12px;
    color: #a1aab2;
    margin-top: 5px;
}
.nb
{
    white-space: nowrap;
}


.error-box .error-title
{
    font-size: 89px;
    text-shadow: 4px 4px 0 #716f6f, 6px 6px 0 #40474e;
    line-height: 140px;
    color: #e6e6e6;
}
.error-box {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    /* z-index: -1; */
}

.error-box video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* Ensures the video covers the entire area while maintaining its aspect ratio */
    transform: translate(-50%, -50%);
    z-index: -1;
}

.error-body {
    position: relative;
    z-index: 1; /* Ensures the error content stays on top of the video */
    color: #ffffff; /* Set appropriate text color */
}

.prominent
{
    color:#fff;
    font-weight: bold;
    font-size: 2em;
}


.topbar .top-navbar .navbar-nav>.nav-item>.nav-link .rounded-circle
{
border: 1px solid #b9b9b9;
}
#paneContainer { 
    display: flex;
    flex-direction: column;
    height: 100vh;  /* This ensures that the paneContainer fills the entire viewport */
}

.top-row {
    display: flex;
    flex: 1;  /* Takes up 1 part of the available space */
}



.creativePagesArea {
    /*display: flex;
    flex: 15; /* Sum of middle (6) and right (9) ratios */
    padding:20px;
}
.renderFrame .creativePagesArea
{
    padding: 0;
}
.creative
{
    display:flex;
    position: relative;
}
.creative.stackHorizontal
{
    flex-direction: row;
    align-items: center;
}
.creative.stackVertical
{
    flex-direction: column;
    align-items: center;
}
 
/* Non-mobile stacked mode: give both rows equal weight and ignore aspect on wrappers */
body.nonMobile .creative.stackVertical .gridUnit.middle,
body.nonMobile .creative.stackVertical .gridUnit.right {
    flex: 1 1 auto;
    aspect-ratio: auto;
}
body.nonMobile .creative.stackVertical .gridUnit.middle
{
    top:50px;
}
body.nonMobile .creative.stackVertical .gridUnit.right
{
    top:46px;
}
.creative.stackHorizontal .postcard69Page.horizontal
{
    margin-left:20px;
}

.renderFrame .creative.stackHorizontal .postcard69Page.horizontal
{
    margin-left:0;
}

.renderFrame.sideBySide .creative.stackHorizontal .postcard69Page.horizontal
{
    margin-left:20px;
}

.gridUnit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Apply padding here for spacing around content */
}

.left {
    /*flex-grow: 1; /* Allow growth if extra space is available */
   /* min-width: 300px; /* Minimum width */
   width:400px; /*320px;*/
}

/* .mobile .gridUnit.left
{
    justify-content: flex-end;
} */
.middle, .right {
    position: relative; /* Needed for absolute positioning of content */
    /*overflow: hidden;  Ensures no spill over due to padding */
}

.middle .content, .right .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid black;   */
}

.middle {
    flex: 6;
    aspect-ratio: 6 / 9;
}

.right {
    flex: 9;
    aspect-ratio: 9 / 6;
}

.page-wrapper.isEDDM .middle
{
    flex:6.498;
    aspect-ratio: 6.498 / 9;
}
.page-wrapper.isEDDM .right
{
    flex:9;
    aspect-ratio: 9 / 6.498;
}

.designWorkbench .gridUnit.right
{
    aspect-ratio: auto;
}
.bottom-row {
    display: flex;
    flex: 1;  /* Takes up 1 part of the available space */
    
}

.full {
    width: 100%;
}


.gridUnit.left {
    display: flex;
    flex-direction: column;
    height: 100%;  /* Ensures this container fills its parent’s height */
}

.companyOverview {
     display: none;
     padding: 20px;
     border: 1px solid #e0e0e0; 
    
    top: 10px;
    margin-left: 10%;
    width: 80%;
    text-align: center;
   
    color: rgb(0, 0, 0);
    /* min-width: 390px; */
    position: absolute;
    top: 0;
    left:0;
    max-width: 500px;
}
.mobile.preCreativeOnScreen .companyOverview
{
    width:calc(100% - 80px);
}
.companyOverview h4
{
    display:block;
}
 .chatAreaHolder {
    flex-grow: 1;  /* Takes up the remaining space */
    overflow: auto;  /* Optional, in case the content overflows */
} 

.top-row, .bottom-row {
    width: 100%; /* Ensures full width */
   
}
.top-row
{
    overflow: hidden;
}

/* .card-body.chatEntryAreaCard
{
    flex: 0 0 auto;  /* Prevents the card from growing */
} */

/* Responsive Design */
@media (max-width: 768px) {
    .top-row {
        flex-direction: column;
        overflow: scroll;
        align-items: center;
    }
    .left, ._creative {
        width: 100%; /* Take full width on small screens */
        align-items: center;
        width: calc(100% - 50px);
        max-height: 36em;
        max-width: 33em;
    }
    .creativePagesArea {
        flex-direction: column; /* Stack middle and right vertically */
    }
    .middle, .right {
        width: 100%; /* Maintain full width in their container */
        min-height: 0; /* Override minimum height */
        aspect-ratio: auto; /* Reset aspect ratio for responsive design */
    }
    .middle .content, .right .content {
        position: static; /* Revert to normal flow in responsive layout */
    }
    textarea.chatTextInput {
        height:70px !important;
    }
    .twoColOnSmallScreen 
    {
    float:left;
    max-width: 50%;
    }
}


.moodboardImages {
    display: flex;  /* Align children (images) in a row */
    overflow-x: auto;  /* Enable horizontal scrolling */
    align-items: center;  /* Align images vertically in the middle */
    height: 100%;  /* This needs to be defined, ensure parent has a set height if necessary */
    white-space: nowrap;  /* Prevent images from wrapping onto the next line */
    padding-bottom: 10px;
    justify-content: center;
}

.moodboardImages img {
    max-height: 100%;  /* Scale the image to fit the div’s height */
    width: auto;  /* Maintain the aspect ratio of the image */
    margin-right: 10px;  /* Space between images */


   /* visibility: hidden;    Hide images initially */
    transition: visibility 0.3s ease-in-out;  /* Smooth transition to visible state */
    display:none;
}
.moodboardImages .photo-wrapper
{
    display:none;
}

.moodboard
{
    padding: 10px;
    box-shadow: 6px -5px 10px 0 rgb(0 0 0 / 20%);
    border: 1px solid #e0e0e0;
    background-color: #000;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height:200px;
   
    display:none;
}

.moodboard img
{
    border:1px solid #fff;
    cursor:pointer;
}

.imageDetailModal
{
    text-align:center;
    padding:20px;
}

.imageDetailModal img
{
    border:1px solid #f0f0f0;
}




.chatAreaHolder .card-body 
{
    padding:.75rem;
}
.tipContent{
    padding:20px;
}
.tipContent p
{
    color: #111;
    font-size: 1rem;
    line-height: 1.8;
}

img.tipPointer
{
    position: absolute;
    bottom: -61px;
    transform: rotate(261deg);
    left: -65px;
}
img.tipPointer.upperRight
{
    position: absolute;
    top: -126px;
    transform: rotate(86deg);
    left: inherit;
    right: -65px;
}
.tip {
    position: absolute;
    width: 283px;
    padding: 20px;
    background-color: rgb(255 255 202);
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    color: #000;
  }
  .tip p
  {
    color:#000; 
  }
  
  .close-button {
    position: absolute;
    top: 2px;
    right: 5px;
    cursor: pointer;
  }
  .tip.mobileMoodboard .close-button
  {
    color: #afadad;
    font-size: 19px;
    top: 9px;
    right: 13px;
  }
  .tip.mobileMoodboard p
  {
    font-size:17px;
    color:#333;
  }

  .arrow {
    position: absolute;
    bottom: -10px; /* Adjust so the arrow connects the tip to the moodboard */
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: yellow transparent transparent transparent;
    transform: translateX(-50%);
  }
  
  /* Optional: Add transition for smoother opening/closing */
  .tip {
    transition: opacity 0.3s, visibility 0.3s;
  }



  .glow-effect {
    animation: glow-animation 1.5s ease-out forwards;
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7); /* Yellow glow */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
    }
}

.moodboardOuterFrame .scroll-arrow {



    position: absolute;
   
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 9999;
    width: 38px;
    background-color: #d5d5d5;
    height: 75px;
    font-size: 40px;
    padding: 8px;
    color: #000000;
    top: 86px;
    border-radius: 5px;



    
   
    display: none; /* Hidden by default */
}

.moodboardOuterFrame .scroll-arrow.left {
    left: 0px;
}

.moodboardOuterFrame .scroll-arrow.right {
    right: 0px;
}

.moodboardOuterFrame
{
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
    overflow: hidden;
    width: calc(100% - 60px);
}











.card-body.chatCardBody
{
    padding:12px;
    background-color:white;
}




.topbar
{
    z-index: 2002; /* +2 above floating draggable windows, so that dropdown menu covers them */
}
.modal
{
    z-index: 2004; /* +2 above .topbar, so that modal is not covered by topbar */
}
.modal-backdrop
{
    z-index: 2003; /* +1 above .topbar, so that backdrop is below modal but above topbar */
}
#main-wrapper[data-layout=vertical][data-sidebartype=full].noLeftNav .page-wrapper 
{
    margin: 0 0 !important;
}
#main-wrapper[data-layout=vertical][data-header-position=fixed].hidePageTop .topbar
{
    display:none;
}

#main-wrapper.hidePageTop .page-breadcrumb
{
    display:none;
}
.topbar .top-navbar .navbar-header .navbar-brand .logo-icon
{
    color: yellow;
    font-family: 'Audiowide';

}
.topbar .top-navbar .navbar-header .navbar-brand .logo-text
{
    color: yellow;
    font-family: 'Codystar';
}
.chat-list .chat-item.template
{
    display:none;
}
textarea.chatTextInput
{
    height:110px;
    max-height: 8em;
    
    resize: vertical;
}

.chat-wrapper
{
    flex-grow: 1;        /* Expand to take available space */
    display: flex;       /* Enable flexbox */
    flex-direction: column; /* Stack its children vertically */
    z-index: 1;
}
.chat-wrapper .btn-circle.btn-lg
{
    width: 32px;
    height: 32px;
    padding: 5px 6px;
    font-size: 17px;
    margin-top: 8px;
    cursor: pointer;
}

.mobile.landscape .chat-wrapper .btn-circle.btn-lg {
    width: 25px;
    height: 25px;
    padding: 2px 4px;
    font-size: 14px;
    margin-top: 1px;
}

.mobile .navbar-nav
{
    align-items:center;
}
.card .card-body.chatEntryAreaCard
{
    padding: 8px;
}

.chatRow
{
    display:flex;
}

.chatRow .chatRowLeft
{
    display: inline-block;
    width: calc(100% - 36px);
    margin-right: 7px;
}
.chatRow .chatRowRight
{
    display:flex;
    flex-grow:1;
}
table td.uploadCell
{
    text-align: center;
}
@keyframes pulseWithPause {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.15); /* Begins to grow */
    }
    80% {
        transform: scale(1.15); /* Stays large for a pause */
    }
    100% {
        transform: scale(1); /* Returns to normal */
    }
}
.selectedPulse {
    animation: pulseWithPause 1.0s ease-in-out;
}

.selectedPulse .chatText.bg-light-info
{
    background-color:#d5ffff !important
}


#developerDebug
{
    display: inline-block;
    width: 370px;
    padding: 13px;
    border: 1px solid #bfbfbf;
    border-radius: 2px; 
    position: fixed;
    bottom: 15px;
    background-color: #fefdf3;
    right: 12px;
    font-size: 12px;
    z-index: 10000;
    box-shadow: 5px 5px 8px 2px rgb(0 0 0 / 20%);
}
#developerDebug .developerControl
{
    display: inline-block;
    position: relative;
    bottom: -8px;
   
}

#developerDebug .iUserStatus
{
    display:none;
    font-size: 13px;
   
}
#developerDebug .iUserStatus.active
{
    color: #26ac26;
}
#developerDebug .iUserStatus.inactive
{
    color: #959292;
}
#developerDebug.userActive .showOnUserActive,
#developerDebug.userInactive .showOnUserInactive
{
    display:inline;
}

.iDevCtrl
{
    color: #000;
    cursor: pointer;
    margin-right:4px;
    font-size: 15px;
}

#developerDebug[data-pos="0"]
{
    
    bottom: 15px;
    left:auto;
    top:auto
    right: 12px;
    
}
#developerDebug[data-pos="1"]
{
    bottom:15px;
    right: auto;
    left: 12px;
    top:auto;
}
#developerDebug[data-pos="1"] .iMover
{   
    transform: rotate(90deg);
}
#developerDebug[data-pos="2"]
{
    bottom: auto;
    top:15px;
    left:12px;
    right:auto;
}
#developerDebug[data-pos="2"] .iMover
{   
    transform: rotate(180deg);
}
#developerDebug[data-pos="3"]
{
    left:auto;
    right:12px;
    top:15px;
    bottom:auto;
}
#developerDebug[data-pos="3"] .iMover
{   
    transform: rotate(270deg);
}
#developerDebug .iClose
{
    float: right;
    position: relative;
    top: -9px;
    right: -8px;
    color: #a4a1a1;
    cursor: pointer;
}
#developerDebug .iMover
{
    position: relative;
    top: -9px;
    left: -12px;
    color: #a4a1a1;
    cursor: pointer;
    display: inline-block;
    width:20px;
}

#developerDebug.hideDeveloperDebug
{
    width: 20px;
    overflow: hidden;
    height: 18px;
    left: 50%;
    top: -7px;
    background-color: rgb(0, 0, 0, .20);
}
#developerDebug.hideDeveloperDebug i 
{
    display:none;
}
#developerDebug i.doHide
{
    cursor: pointer;
    float: right;
    position: relative;
    top: -7px;
    left: -4px;
    color: #acacac;
}
#developerDebug.hideDeveloperDebug i.doHide 
{
    display: inline-block;
    position: absolute;
    top: 9px;
    left: 7px;
    color: #a0a0a0;
}

#developerDebug .btn-row .btn 
{
    margin-bottom:10px;
}

#developerDebug table.devStats
{
    font-size:10px;
}
#developerDebug table.devStats td
{
    padding: 3px;
}
#developerDebug table.devStats td span.stat
{
    margin-left:3px;
    display:inline-block;
    font-weight: 700;
}
.showOnStartErase button
{
    float:right;
    margin-left: 8px;
}
.doToggleResetView
{
    float:right;
    cursor:pointer;

}

.iThinking
{

    display:none;

    position: relative;
    top: 3px;
    left: 3px;
    color: #84daf1;
}
.chat-wrapper .iStatus
{
    display:none;
}
.chat-wrapper.idle .iStatus.iIdle
{
    display:inline;
}
.chat-wrapper.thinking .iThinking
{
    display:block;
}


.chat-wrapper.working .iStatus.iWorking
{
    display:inline;
}


.chat-wrapper .botStatusHolder
{
    font-size: 11px;
    color: #a6a6a6;
    float: right;
    margin-right: 3px;
    margin-bottom: 3px;
    text-align: right;
    display:none;
}

   

.chatAreaHolder /* was a card */
{
    flex-grow: 1;  /* Takes up the remaining space */
    overflow: hidden;  /* Optional, in case the content overflows */
    
    display: flex;       /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
    height: 100%;

    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left:10px;
   /* max-width: 270px;*/
   justify-content: flex-end;
}
.mobile .chatAreaHolder
{
    flex-grow:0;
}
/* .gridUnit.left .chatAreaHolder 
{
    justify-content: flex-start;
} */

.chatAreaHolder .chat-list .chat-item .chat-img img
{
    width:100%;
}

.chatAreaHolder .chat-list .chat-item .chat-img
{
    width:12%;
    max-width: 45px;

    border: 2px solid white;
    border-radius: 100%;
}
.chatAreaHolder .chat-list .chat-item .chat-content {
    width: calc(87% - 15px);
}


.moodboardImage.userSelected
{
    border:4px solid #9bc600;
}

.imgHostURL
{
    cursor: pointer;
    border-bottom: 1px solid #f4f4f4;
    color: #777;
  
    
}

.imageDetailModal .imageDetails
{
    margin-top: 10px;
    margin-left: 5px;
    font-size:11px;
}

#whiteboard .card-deck
{
    align-items: flex-start;
}

 .verticalScroller
{
    max-height:400px;
    
} 

.creative .iCtrlIcon
{
    cursor:pointer;
    display:none;
    margin-left:10px;
}

.creative.selected  .iCtrlIcon.iRebuild
{
    display: inline;
    color:black;
    cursor:pointer;
}
.creative.selected  .iCtrlIcon.iRebuild.refreshInProgress
{
    color: #6a6a6a;
    cursor:not-allowed;
}
.rotate-right {
    transform: rotate(90deg);
}
.creative.selected.sideBySideOff .stacked.on,
.creative.selected.sideBySideOff .sidebyside.off,
.creative.selected.sideBySideOn .sidebyside.on,
.creative.selected.sideBySideOn .stacked.off
{
    display: inline-block; /* inline-block needed for rotate to work */
}

.lineHeight1
{
    line-height:1;

}

.win-size-grip {
    position: absolute;
    width: 16px;
    height: 16px;
    padding: 4px;
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/wingrip.png) no-repeat;
  }

.postcard69Page .pageLabel,
.gridUnit .content > .pageLabel 
{
    position: absolute;
    top:-40px;
    width:100%;

}
.pageLabelInner
{
    text-align: center;
    font-family: 'Poppins';
    color: #3daed8;
    margin-left: auto;
    margin-right: auto;
    /*width: 20em;*/
    /* background-color: #fff; */
    padding: 5px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
body.nonMobile .outerPage.horizontal .creative.stackHorizontal .pageLabelInner
{
    text-align:left;
}
.creativeContent.worksheetFocus .postcard69Page .pageLabel,
.creativeContent.listInfoFocus .postcard69Page  .pageLabel,
.creativeContent.worksheetFocus .gridUnit .content > .pageLabel,
.creativeContent.listInfoFocus .gridUnit .content > .pageLabel
{
    display:none;
}

.renderFrame .pageLabel
{
    display:none;
}
.postcard69Page.vertical
{
    aspect-ratio: 6 / 9;
}
.postcard69Page.horizontal
{
    aspect-ratio: 9 / 6;

    margin-top: 20px;
}
.postcard69Page.outerPage.vertical.shrunk
{
    max-width: 110px;
    transition: max-width 0.5s ease;
}
.sideBySideOff .postcard69Page
{
    width: calc(80% - 40px);
    max-width: 760px;
}
.sideBySideOff .postcard69
{
    /* 2024-05-18 */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.designHint,
.gridUnit .content > .designHint 
{
    display: none;
    position: absolute;
    top: -40px;
    font-family: 'Poppins', sans-serif !important;
    padding: 5px;
    background-color: #f3ffd7;
    font-size: 10.5px;
    border: 1px solid #bbb;
    text-transform: uppercase;
}
.outerPage.zoomedIn .designHint,
.gridUnit .content > .outerPage.zoomedIn ~ .designHint
{
    display:block;
}

.default-vertical .postcard69Page.horizontal
{
    
    transition: max-width 0.5s ease;
}
.default-vertical .postcard69Page.horizontal.zoomedIn
{
    max-width: calc(100% - 40px);
    transition: max-width 0.5s ease;
}

.renderFrame .postcard69Page
{
    position: relative;
   
    margin-top: 40px;
}

.renderFrame .creative .outerPage
{
    overflow:visible;
}

.renderFrame.pageSpecific .creative .outerPage
{
    overflow:inherit;
}


.renderFrame.pageSpecific .postcard69Page
{
    max-width: none;
    flex: none;
    position: inherit;
   
    margin-top:inherit;
}
.renderFrame .pageDescrip
{
    position: absolute;
    top: -38px;
    left: 0px;
    padding: 3px 5px;
    background: #f5f3f3;
    width: 18em;
    font-size: 11.5px;
    border: 1px solid #b0b0b0;
    color: #000;
    font-family: roboto;
}
.renderFrame .imageWrapper
{
    position: relative;
    display: inline-block;
}

.innerCreativePage
{
    position: absolute;
    width:100%;
    height: 100%;
    z-index: 15;
}

.rotator
{
    transform: rotate(-90deg);
}

.vertical-center
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.moodboard .mb-inner-frame
{
    position: relative;
    background-color: white;
}
.moodboard .card 
{
    border-color: #777;
    padding-top: 21px;
}

.moodboard .showOnNoDraftsExist,
.moodboard .showOnDraftsExist
{
    display:none;
}
.moodboard.draftsExist .showOnDraftsExist
{
    display:block;
}
.moodboard.noDraftsExist .showOnNoDraftsExist
{
    display:block;
}

.editable-text
{
    border:1px solid transparent;
}
.editable-text.editing
{
    border: 1px dashed #6ac5ff;
}


.creative {
    width: 100%;
    /* Transition setup for all transitioning properties */
    transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
}
.creative .outerPage
{
    /*overflow:hidden;*/
}
.creative.selected .postcard69
{ 
    
    background: #e3e3e3;
    border: 1px solid #333;
    padding-top: 50px;
}
.creativeArea
{
     
    /* position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; */
}


.creative.unselected {
    position: fixed;
    bottom: 0;
    transform: scale(0.20); 
    transform-origin: bottom left;
    z-index: 102;
    
}
.creative.unselected.initialPageLoadComplete
{
    transition: transform 0.5s ease, left 0.5s ease;
}
#bottomTranslucentBar
{
    display:none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background-color: #555555;
    z-index: 100;
    transition: bottom 0.3s ease;
    border-top: 1px solid #cdcdcd;
}
.relativizer
{
    position: relative;
    width:100%;
}
#bottomTranslucentBar .iBottomControl{
    display:none;
    cursor: pointer;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
#bottomTranslucentBar.collapsed .iBottomControl.iShowOnCollapsed,
#bottomTranslucentBar.expanded .iBottomControl.iShowOnExpanded
{
    display:inline-block;
}
.bottomToggle
{
    position: absolute;
    bottom: 0px;
    right: 43px;
    height: 25px;
    width: 64px;
    background-color: #000000f2;
    padding: 3px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    color: white;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}

 
.creativeContent
{
    position: relative;
    display: flex;

    min-width: 350px;
    flex-grow: 1;    /* added 20250830 */
    

}
.renderFrame .creativeContent
{
    display:block;
}
.creative .creativeTitle
{
    padding: 5px;
    font-size: 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.creative.selected
{
    position: relative;
    z-index: 3;
    /* 20240828 transform: scale(1); /* Normal scale */
    
}
.creative.selected.initialPageLoadComplete
{
    transition: transform 0.5s ease, left 0.5s ease;

}
.creative.selected .creativeTitle
{
    font-weight: 400;
    color: #000;
    position: relative;
    /*background-color: #ffffdf;*/
    background-color: #f4f4f4;
    border-top: 1px solid #8c8c8c;
    border-left: 1px solid #8c8c8c;
    border-right: 1px solid #8c8c8c;
}
.creative.unselected .creativeTitle
{
    cursor: pointer;
    font-size: 72px;
    font-weight: 500;
    padding: 30px;
    position: relative;
    top: 2px;
    left: 2px;
    color: white;
    width: 735px;
    height: 163px;
}
.creativeTitle .rebuildIconHolder
{
    position: absolute;
    right: 19px;
    bottom: 4px;
}




#__slider {
    cursor: ew-resize; /* Cursor indicates resizable handle */
    width: 5px; /* Set to desired slider width */
    background-color: black; /* Color of the slider */
}
#slider {
   /*position: relative;*/ /* Needed for absolute positioning inside */
    position: absolute;
    background-color: #ccc; /* Light grey background for the slider */
    width: 2px; /* Thin line width */
    height: 100%; /* Full height of the container */
    cursor: ew-resize; /* Cursor indicates the slider can be moved */
    left: 350px;
}

#handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    width: 15px;
    background-color: #b9b9b9;
    border-radius: 5px;
    border: 1px solid #676767;
    box-shadow: 1px 2px 4px 2px rgb(0 0 0 / 11%);
}

#left-pane, #right-pane {
    transition: width 0.2s; /* Smooth transition for resizing effect */
}
#rightVertScroll
{
    margin-left:30px;
}
#paneContainer
{
   display: flex;
   position: relative;
}
#paneContainer #leftPane
{
    width: 350px;/* Set initial width of left pane */
}
#paneContainer #___slider
{
    background-color: #000; width: 5px; cursor: ew-resize;
}
#paneContainer #rightPane
{
    flex-grow:1;
}

#paneContainer #__slider
{
    display:inline-block;
    position: absolute;
}
#paneContainer #leftPane,
#paneContainer #rightPane {
  float:left;
  display:inline-block;
  width:330px; /* Set initial width of left pane */
}

.chatAreaHolder.width-1 .chat-list .chat-item .chat-content .box
{
    font-size:12px;
}
.chatAreaHolder.width-1 .chat-list .chat-item .chat-img
{
    display:none;
}
.chatAreaHolder.width-1 .chat-list .chat-item .chat-content .box
{
    width:100%;
}
.chatAreaHolder.width-1 .chat-list .chat-item .chat-content
{
    width: calc(100% - 5px);
}
.chatAreaHolder.width-1 .chatCardBody
{
    padding:15px;
}

.iForceResize
{
    font-size:12px;
    cursor:pointer;
    z-index: 99;
    float:right;
}


.defaultHidden
{
    display:none !important;
}
.renderFrame.pageSpecific .creative.selected .outerPage
{
    box-shadow:none;
    
}
.renderFrame .creative.selected .template 
{
    border:none;
    background:none;
    height: 100%;
}
.renderFrame.pageSpecific .creative.selected .template 
{
    width: 100%;
    padding: 0;
    gap: 0;
    margin-bottom: 0;
}
img.ui-draggable 
{
    border: 2px solid transparent;
}
.moodboardImages img.ui-draggable
{
    border: 2px solid white;
}

.valid-drop-target {
    border: 3px solid rgb(100, 254, 100) !important;
}

.dragging-helper {
    opacity: 0.7; /* Example visual feedback */
    border: 2px dashed #000; /* Example border for visual feedback */
}

.dragging {
    cursor: grabbing; /* Change cursor for visual feedback */
}

img.ui-draggable.ready-to-drag {
    opacity: 0.7; /* Example visual feedback */
    border: 2px dashed #000; /* Example border for visual feedback */
}
.moodboardImages img.ui-draggable.ready-to-drag {
    border: 2px dashed #a80404;
}
#resize-proxy {
    position: absolute;
    border: 2px dashed #920e0e; /* Dashed border to indicate the proxy element */
    display: none; /* Hidden by default */
    z-index: 9999; /* Ensure it is on top of other elements */
  }
  .noselect {
    user-select: none; /* Standard syntax */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    -webkit-user-select: none; /* Safari and Chrome */
  }
  
.creative .resize-handle, 
.moodboard .moodboard-resize-handle
{
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 1px;
    right: 1px;
    background: #ccc;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    cursor: se-resize;
    
    display: none;
    background: linear-gradient(135deg, #ddd 25%, transparent 25%) -10px 0, linear-gradient(225deg, #ddd 25%, transparent 25%) -10px 0, linear-gradient(315deg, #ddd 25%, transparent 25%), linear-gradient(45deg, #ddd 25%, transparent 25%);
    background-size: 3px 3px;
    background-color: #fdfdfd;
  }
  .creative.selected.preeminent .resize-handle,
  .moodboard.preeminent .moodboard-resize-handle
  {
        display:block;
  }


  .moodboard.ui-resizable-resizing .mbinnerFrame
  {
      background-color: #ffffff;
      overflow: hidden;
  }
.creative.selected .creativeTitle /* not yet preeminent */
.moodboard .moodboard-resizable-handle
{
    background-color:#fcfcfc;
}
.moodboard .moodboard-handle
{
    border-bottom: 1px solid #999;
    height: 27px;
    position: absolute;
    top: 1px;
    width: 100%;
    background-color: #f4f4f4;
    z-index: 999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}
.moodboard.preeminent .moodboard-handle,
.creative.selected.preeminent .creativeTitle
{
    width: 100%;
    height: 27px;
    background: linear-gradient(135deg, #ddd 25%, transparent 25%) -10px 0, linear-gradient(225deg, #ddd 25%, transparent 25%) -10px 0, linear-gradient(315deg, #ddd 25%, transparent 25%), linear-gradient(45deg, #ddd 25%, transparent 25%);
    background-size: 3px 3px;
    background-color: #bababa;
    cursor: move;
    border-top: 1px solid #8c8c8c;
    border-left: 1px solid #8c8c8c;
    border-right: 1px solid #8c8c8c;
    border-bottom:none;
}
.creative.selected.preeminent .creativeTitle
{
    height:28px;
}
.noMarginNoPadding
{
    margin:0 !important;
    padding:0 !important;
}
#main-wrapper[data-layout=vertical][data-sidebartype=full].noLeftNav .page-wrapper.noMarginNoPadding
{
    margin: 0 !important;
    padding:0 !important;
}



.table.details td, .table.details th
{
    font-size: 12px;
}
.table.details td.promptResponse, .table.details th.promptResponse
{
    max-width:600px;
}
.table.details .promptWrapper, .table.details .responseWrapper
{
    max-height: 600px;
    overflow-y: scroll;
    padding-left: 10px;
    padding-right: 10px;
}
.table.details .promptWrapper
{
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom:1px solid #dddddd;
}
.table.details td.ai_type
{
    word-wrap: break-word;
    min-width: 10em;
    max-width: 13em;
    font-size: 10px;
} 
 
.table.details pre {
    white-space: pre-wrap; /* Allows the text to wrap */
    word-wrap: break-word; /* Breaks the word at the edge of the pre area */
    font-size:13px;

}


.bottomAlertBarPositioner
{
    display:none;
    position: fixed;
    bottom: 0;
    left: -50px;
    right: -50px;
    z-index: 9999;
    padding: 0 15px;
    text-align: center;
    background-color: rgb(23 23 23);

}
#main-wrapper.requireUserInteraction .bottomAlertBarPositioner
{
    display:block;
}

.bottomAlertBar
{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
   
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
    transition: all 0.5s ease;
    width: 100%;

}
.bottomAlertBar .btn
{
    margin-left: 10px;

}


.chat-wrapper .chat-box.scrollable
{
    height:475px;
} 


.chat-wrapper.readOnly .chatEntryAreaCard
{
    display:none;
}

.paddingBox
{
    padding:30px;
}
table.compact
{
    width:auto;
}


.column-adjustment {
    margin-right: -6.5px;  /* Half of the gutter size to balance right and left */
    margin-left: -6.5px;
  }
  
  .column-adjustment .col-custom {
    padding-right: 6.5px;  /* Half of the total gutter size */
    padding-left: 6.5px;
    box-sizing: border-box;  /* Includes padding in the width calculation */
  }
  

.column-adjustment.one-column .col-custom {
  flex: 0 0 100%;
  max-width: 100%;
}

.column-adjustment.two-columns .col-custom {
  flex: 0 0 50%;
  max-width: 50%;
}

.column-adjustment.three-columns .col-custom {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.column-adjustment.four-columns .col-custom {
    flex: 0 0 25%;
    max-width: 25%;
  }




.worksheet, 
.listInfo
{
   
    border:1px solid #ccc;
    padding: 10px;
    box-shadow: 6px -5px 10px 0 rgb(0 0 0 / 20%);
    align-self: flex-start;

    margin: 20px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;

    z-index: 99;
    position: relative;
    background-color: white;

}
.worksheet.v2
{
    max-width: none;
}

.creativeContent.worksheetFocus .postcard69Page,
.creativeContent.listInfoFocus .postcard69Page
{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#quantWorksheet .showOnQuantError,
#quantWorksheet .showOnSpendError
{
    display:none;
    color:red;
}
#quantWorksheet.quanterror .showOnQuantError,
#quantWorksheet.spenderror .showOnSpendError,
#quantWorksheet.spenderror_timed .showOnSpendError
{
    display:block;
}
#quantWorksheet.hilite_green .postcardspurchased
{
    background-color: #e0f4e0;
    border: 1px solid green;
}
#quantWorksheet.hilite_green .postcardspurchased input
{
    border:2px solid green;
}
/* Reset any flex properties */
.scaled-element
{
    flex: none;
    width: auto;
    height: auto;
    
    /* Position at the bottom */
    position: fixed;
    bottom: 20px; /* Adjust for desired distance from bottom */
    
    /* Apply scaling */
    transform: scale(0.5);
    transform-origin: bottom center;
    
    /* Ensure the element is above other content */
    z-index: 1000;
  }
  
  /* Position the first element */
  .scaled-element.vertical {
    position:fixed;
    bottom: 0;
    left: calc(50% + 213px);
  }
  
  /* Position the second element */
  .scaled-element.horizontal {
    position: fixed;
    left: calc(50% - 275px);
}

#campaignForm .form-group
{
    padding:8px;
}

.select2-container
{    
    z-index: 99999;
}
#developerDebug .select2-container
{
    width:100% !important;
    margin-bottom:10px;
}
.progress-wrapper {
    position: relative;

    display:inline-block;
    
  }
  .chatAreaHolder .chat-list .chat-item .chat-img.progress-wrapper img
  {
    position: relative;
    z-index: 3;
  }
  .shutupable
  {
    cursor:pointer;
  }
  .chatAreaHolder .chat-list .chat-item.shutupable .progress-wrapper:hover
  {
    border: 2px solid #ff9f9f;
    border-radius: 100%;
  }    
  .btn-stop-icon {
    width: 26px;
    height: 26px;
    /* padding: 15px 11px; */
    text-align: center;
    border-radius: 100%;
    border: 2px solid #f3f3f3;
    position: relative;
    z-index: 5;
    cursor:pointer;
  }
  .btn-stop-icon:hover{
    background-color: rgba(255, 255, 255, 0.1);
  }
  .btn-stop-icon:hover .iStopper
    {
        color: #444;
    }
    .progress-wrapper::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 50%;
        background: conic-gradient(
            #3498db var(--progress, 0%),
            transparent var(--progress, 0%)
        );
        z-index: 1;
    }
    
    .progress-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background: white;
        z-index: 1;
    }
    
    .iStopper {
        font-size: 10px;
        color: #919191;
        z-index: 3;
        position: relative;
    }




    .imageDetailClose
    {
        position: relative;
        top:-5px;
        left:5px;
    }






.creativeShower img.thumbnail
{
    border:1px solid #777;
    cursor:pointer
}
.creativeShower .thumbnailHolder
{
    margin:20px;
    text-align: center;
}
#main-wrapper[data-layout=vertical][data-header-position=fixed] .page-wrapper.projectViewWrapper
{
    padding-top:6px;
}

.text-small
{
    font-size:11px;
}
.projectViewWrapper .gridUnit.right
{
    display: flex;
    align-items: flex-start;
    padding: 0 0 0 35px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
}
.projectViewWrapper .chatAreaHolder
{
    margin-top:0;
}
.projectViewWrapper .paneContainer 
{
    margin-top:20px;
}
.creativePagesArea.creativeShower
{
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
}
.creativeShower .thumbnailHolder.front 
{
    margin-top:0;
}
.projectViewWrapper .gridUnit.right .card
{
    min-width:400px;
    margin-right: 30px;
}
.projectViewWrapper .gridUnit
{
    z-index: 1;
}

.projectViewWrapper .gridUnit.right .label
{
    padding: 3px 8px;
    font-size: 62%;
    position: relative;
    top: -1px;
}
.projectViewWrapper .error 
{
    display:none;
    font-size: 12px;
    margin-top: 15px;
}

.list_info_reasoning_internal
{
    font-size:12px;
    color:#777;
    max-width: 38em;
    max-height: 14em;
    overflow: scroll;
    margin-bottom: 16px;
}
.projectViewWrapper .card.mailDetails .tableHolder
{
    max-height:12em;
    overflow:scroll;
}

.thumbnailHolder .iLookedAt
{
    display:none;
    color:green;
    font-size:14px;
    margin-left:10px;
}

.thumbnailHolder.lookedAt .iLookedAt
{
    display:inline;
}

.projectList img.thumbnail
{
    border: 1px solid #a49e9e;
}
.multiThumbEncloser
{
    position: relative;
}
.multiThumbLabel
{
    text-align:center;
}
.projectList img.thumbnail.left
{
    width: calc(40% - 10px);
    margin-right: 10px;
    max-width:175px;
}

.projectCard .card-body
{
    padding-top:10px;
}

.projectList img.thumbnail.right
{
    width: calc(60% - 10px);
    max-width:262px;
}



@keyframes highlightAnimation {
    0%, 100% {
      border-color: transparent;
      box-shadow: 0 0 0 0 rgba(1, 130, 31, 0);
    }
    10%, 90% {
      border-color: rgb(1, 130, 31);
      box-shadow: 0 0 0 4px rgba(1, 130, 31, 0.3);
    }
  }
  


#campaignForm .form-group.attention {
    animation: highlightAnimation 6s ease-in-out;
    border: 3px solid transparent;
}

#campaignForm .form-group.attention-active {
    border: 3px solid rgb(1, 130, 31);
    box-shadow: 0 0 0 4px rgba(1, 130, 31, 0.3);
}

  


  .creativeContent.worksheetFocus,
  .creativeContent.listInfoFocus
  {
    width:100%;
    display: block;
  }



  .defaultStyleInnerWrapper.designWorkbench .creativeEntire .outerPage
  {
    margin:0 20px 20px 0;
  }





  .projectViewWrapper
  {
    padding:20px;
  }

  .projectDetails
  {
    font-size:11px;
    color: #84898e;
    margin-top:5px;
  }

.card .statLabel
{
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #000;
}

.card .jobStatus
{
    font-size: 11px;
    line-height: 1.4;
    display: inline-block;
}

.card .ctu 
{
    line-height: 1.5;
    margin-bottom:18px;
}






/* commented  2024-11-13 */

.defaultStyleInnerWrapper.customerDashboard
{
    display: flex;
    flex-direction: column;
    height: 100vh;

}




.projectList .card-body {
    flex: 1;
    overflow:hidden;
  }



.projectUnit.projectCard
{
    cursor:pointer;
}
.projectUnit.selected .projectCard
{
    border: 2px solid green;
    background-color: #f7f9f6;
    cursor:inherit;
}
.projectList .thumbnail
{
    cursor:pointer;
}

.projectDetails > div
{
    flex:0
}


.customerDashboard .detailsContent .card-body
{
    padding-top:0;
}







.custom-container {
    min-height: 100vh;
  }
  
 





.dataUnit
{
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.hdr 
{
    font-weight: 400;
}

.listDetails .hdr{
    min-width:10em;
}

.nameCount
{
    display:flex;

    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    min-height: 20px;
}

.nameCount .btn
{
    position: relative;
    top:-3px;
}

.nameCount .cmdHolder
{
    margin: 5px 0 0 10px;
}



.chat-content .btn-row
{
    margin-top: 15px;
    padding-bottom: 2px;
}
.chat-content .btn-row .btn
{
    margin-left: 10px;
    float:right;
    cursor: pointer;
}

.linkCommand
{
    font-size: 12px;
    cursor: pointer;
    color: #405972;
    font-weight: 400;
    margin-top: 5px;
    border-bottom: 1px dashed #81d8e5;
}


.timelineContainer ul,
.timelineContainer li{
    list-style: none;
    padding: 0;
  }
  
  .timelineContainer{
    display: flex;
    justify-content: center;
    align-items: center;
   
  }
 
  
  .timelineContainer .timelineEvents{
    margin-top: 2rem;
    border-radius: 12px;
    position: relative;
  }
  .timelineContainer li{
    padding-bottom: 1.5rem;
    border-left: 1px solid #c6c5c5;
    position: relative;
    padding-left: 20px;
    margin-left: 10px;
    &:last-child{
      border: 0px;
      padding-bottom: 0;
    }
    &:before{
      content: '';
      width: 15px;
      height: 15px;
      background: white;
      border: 1px solid #515151;
      
      border-radius: 50%;
      position: absolute;
      left: -8px;
      top: 0px;
    }
  }
  .timelineContainer .time{
    color: #2a2839;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
  }
  
  
  .tab-pane#timelinePane
  {
    overflow:hidden;
  }


  .miniAdminArea .showOnHasCollectionID
  {
      display: none;
  }
  .miniAdminArea.hasCollectionID .showOnHasCollectionID
  {
      display: inline;
  }

.miniAdminCmd
{
    cursor:pointer;
   
    margin-left:10px;
}
.miniAdminCmd span
{
    font-weight: 600;
}

.miniAdminArea.hasCollectionID .miniAdminCmd::after
{
    content: '|';
    padding-left: 10px;
    color:#ddd;
}

.miniAdminArea.hasCollectionID .miniAdminCmd:last-child::after 
{
    content: '';
}


.customerDashboard .detailsContent
{
    max-width: 35em;
    overflow: hidden;
}
.customerDashboard.mailingListMode .detailsContent
{
    max-width: none;
}
/* .customerDashboard .projectList
{
    max-width: 630px;
} */
.copyThisThumb
{
    width:120px;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
}
.emptyThumb
{
    width:120px;
    height:180px;
    border:1px solid #ccc;
    background-color:#f7f7f7;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    padding-top: 64px;
    padding-left:5px;
}
.iNewDoc
{
    font-size: 47px;
    color: #d6d6d6;
}
.minilink
{
    font-size: 11px;
    color: #7f7f7f;
    cursor:pointer;
    border-bottom:1px dashed #e0e0e0;
}
.minilink.doReturnToCreative
{
    position: relative;
    top:-15px;

}
.projectUnit .showOnNoDrafts
{
    display:none;
}
.projectUnit.noDrafts .showOnNoDrafts
{
    display:inline-block;
}
.projectUnit.noDrafts.multiThumbLabel .showOnNoDrafts
{
    display:block;
}
.projectUnit.noDrafts .hideOnNoDrafts
{
    display:none;
}
.projectUnit .btn
{
    cursor:pointer;
}
.projectUnit .btn.projectControl
{
    position: relative;
    top: 7px;
    margin-bottom: 7px;
}
.table.border-none td, .table.border-none th
{
    border:none;
}
.table-compact
{
    width:auto;
}

.doStartNewProject, .doCloneProject
{
    cursor:pointer;
}
.countTest table td, .countTest table th 
{
    padding: 5px;
}

.tab-pane .showOnNoMailingList
{
   display: none;
}
.tab-pane.noMailingList .showOnNoMailingList
{
   display: block;
   padding: 20px;
}
.tab-pane.noMailingList .hideOnNoMailingList
{
   display: none;
}
[class*="styleHint"] #listInfo * {
    font-family: Poppins, sans-serif !important;
}
.mailingListDetails table,
.customerDashboard.mailingListMode .mailingListDetails table
{
    font-size:12px;
}
.mailingListDetails table td,
.customerDashboard.mailingListMode .mailingListDetails table td
{
    padding: 3px;
}
.listInfo p.reasoning_customer
{
    font-size:12.5px;
}

.tmlnHdr
{
    margin-top:10px;
    font-weight: bold;
}
#pageNav
{
    color:white;
    font-size:12px;
    margin-left:113px;
    cursor:pointer
}
.customerDashboard .card .card-body.chatEntryAreaCard
{
    max-height:110px;
}
.pageSlide
{
    font-size: 27px;
    cursor: pointer;
    position: absolute;
    top: 2px;
    color: #93939c;
    z-index: 6;
    display:none;
    
}

.interactWithCreative .pageSlide
{
    display:inline-block;
}

.noDrafts .pageSlide
{
    display:none;
}

.nonMobile .pageSlide
{
    display:none !important
}
.pageSlide.goLeft 
{
    left: 35px;
}
.pageSlide.goRight
{
    right: 35px;
}
.nav-toggler .iLeft
{
    font-size: 22px;
    position: relative;
    top: 4px;
} 
.editable
{
    cursor:text;
    border-bottom:1px dashed #afaae3
}
.editable.editing 
{
    background-color: white;
    border: 1px solid #81adff;
    padding: 2px;
}
.btn{
    cursor:pointer;
}
.projectName.project_name_is_slug_line
{
    margin-bottom:10px;
}
.editable.projectName.project_name_is_slug_line
{
    cursor: text;
    border-bottom: none;
    font-weight: 500;
    font-size: 11.5px;
}
.editable.projectName.project_name_is_slug_line.editing
{

    border-bottom: 1px solid #81adff;
 
}
.projectUnit.mailinglistonly .projectCard .slugLine
{
margin-top: 10px;
color: #504b4b;
margin-bottom: 10px;
font-size: 11.5px;
}
.projectUnit.mailinglistonly .projectName
{
    font-weight: 500;
    font-size: 11.5px;
}

.page-wrapper.projectType-letter .iDoRender.back
{
    display:none;
}

.iLandscapeLeft
{
    position: absolute;
    bottom: 11px;
    left: 30px;
    font-size: 12px;
    color: #c0c000;
    display:none;
}
.navbar-header .iHome
{
    color: white;
    font-size: 20px;
    padding: 0 12px;
    display:none;
}
.showLinkToDashboard.portrait .navbar-header .iHome
{
    display:inline-block;
}
.mobile.landscape .topBarHomeNav
{
    display:none !important;
}
.showLinkToDashboard.portrait.nonMobile .navbar-header .iHome
{
    display:none !important;
}
.mobile.landscape.showLinkToDashboard .iLandscapeLeft
{
    display:block;
}
.listHeadline
{
    display: none;
}
.isPossibleList .listHeadline.showOnPossible,
.isPriorList .listHeadline.showOnPrior
{
    display: block;
}


.isPriorList .hideOnPrior
{
    display: none;
}

#navDash
{
display: none;
position: absolute;
cursor:pointer;
top: 16px;
left: 68px;
color: #d1d1d1;
z-index: 9999;
font-size: 22px;
}
.mobile #navDash
{
    display: inline-block;
}



body.hideMoodboard .doShowMobileMoodboard
{
    display:none !important;
}
.mobileMoodboardUI
{
    min-width:53px;
    visibility: hidden;
}
.projectUnit.letter .thumbnail.pg2
{
    visibility: hidden;
}
.moodBoardImagesReceived .mobileMoodboardUI
{
    visibility: visible;
}
body.nonMobile .mobileMoodboardUI
{
    display:none !important;
}

body.mobile .ddtext
{
    word-break: break-word;
    line-height: 1.3;
    text-align: right;
    font-size: 80%;
}
.mobile .chat-wrapper .chat-box.scrollable
{
padding-top: 10px;
}
.photo-wrapper {
    position: relative; /* Ensure the wrapper is the positioning context */
    display: inline-block; /* Keeps the wrapper size matching the image size */
  }
  

  
  .photo-wrapper.aiGen::after {
    content: "AI"; /* Or use "100Customers" as needed */
    position: absolute;
    top: 5px; /* Adjust to position the badge */
    left: 5px; /* Adjust to position the badge */
    background-color: yellow; /* Badge background color */
    color: black; /* Text color */
    font-size: 12px; /* Adjust font size */
    font-weight: bold; /* Make the text stand out */
    padding: 2px 8px; /* Add padding to create the pill shape */
    border-radius: 12px; /* Round corners for pill effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for a 3D effect */
    pointer-events: none; /* Ensure it doesn’t block mouse interactions */
    z-index: 10; /* Ensure it appears above the image */
  }
  


  .moodboard-drag-active {
    background-color: rgba(52, 152, 219, 0.1) !important;
    border: 2px dashed #3498db !important;
    transition: all 0.2s ease;
}

.mailingListDataTable
{
font-size: 12px;
padding: 1px;
white-space: nowrap;
}
#list-data-pane
{
    max-height:500px;
}

@media (max-width: 1600px) {
  .chat-list .chat-item .chat-content .box
    {
        font-size:13px;
    }
  }

  @media (max-width: 1500px) {
  .chat-list .chat-item .chat-content
  {
      padding-left:6px;
  }
}

 
@media (max-width: 875px) {
    .scaled-element.horizontal {
        position: fixed;
        left: calc(50% - 240px);
    }
}
@media (min-width: 1399px) {
    .scaled-element.horizontal {
        left: calc(50% - 400px);
    }
}
@media (max-width: 1170px)
{
    #dashboardLink
    {
        margin-left:17px;
    }
}


@media (max-width: 600px) {
    #paneContainer #leftPane
    {
        width: 175px;/* Set initial width of left pane */
    }
    #slider {
        left: 175px;
        z-index: 97;
    }
    .chatAreaHolder .chat-list .chat-item .chat-img
    {
        display:none;
    }
    .chat-item
    {
        font-size:12px;
    }
    .chatAreaHolder.width-1 .chatCardBody
    {
        padding:3px;
    }
    .card-body.chatCardBody
    {
        padding:3px;
    }
    .chat-box.scrollable
    {
        height:400px;
    }
    .card-body.chatEntryAreaCard
    {
        padding:8px;
    }
    textarea.chatTextInput
    {
        font-size:11px;
        padding:0px;
    }
    .chat-wrapper .btn-circle.btn-lg
    {
        width: 30px;
        height: 30px;
        padding: 6px 7px;
        font-size: 14px;
        line-height: 18px;
        margin-top: 5px;
    }

    #rightVertScroll {
        margin-left: 4px;
    }
    .postcardHeaderText h2 {
        font-size: 8vw; /* Increase font size for smaller screens */
    }
    .companyOverview .card-body
    {
        padding:7px;
    }
    h4, .h4
    {
        font-size:13px;
    }
    body
    {
        font-size: 13px;
    }
    .postcard69
    {
        padding:5px;
    }
}

@media (max-height: 1000px)
{
    .scaled-element
    {
        transform: scale(0.2);
    }
}





@media (max-height: 390px) {
    .twoColOnSmallScreen 
    {
        float:left;
        max-width: 50%;
    }
    .modal-dialog.quotation .quotationBlock
    {
        font-size:1.4em;
        padding-top:20px;
    }
    .modal-dialog.quotation .attributionBlock
    {
        margin-bottom:10px;
    }
   
}

@media (max-width: 925px) {
    .minilink.doReturnToCreative
    {
        font-size: 9px;
        top: -10px;
        color: #5a5a5a;
        margin-right: 10px;
    }
    .nonMobile .addressText
    {
        font-size: 9px;
    }
}

/* Adjustments for smaller screens where 4.5vw might be too large */
@media (max-width: 800px) {
    .postcardHeaderText h2 {
        font-size: 6.75vw; /* Increase font size for smaller screens */
    }
}


@media (max-width: 390px) {
    .projectList img.thumbnail.left
    {
        width: 30%;
        margin-right: 8px;
        margin-bottom: 10px;
    }
    .projectList img.thumbnail.right
    {
        width: 43%;
        margin-right: 0;
        margin-bottom:10px;
    }
    .projectList .sbsThumbs
    {
        text-align:center;
    }
    .customerDashboard .btn {
        font-size: 10px !important;
    }
      
}



/* Further adjustments if the postcard is expected to be viewed on very large screens */
@media (min-width: 1200px) {
    .postcardHeaderText h2 {
        font-size: 3.375vw; /* Smaller percentage as the screen gets larger */
    }
    .chatAreaHolder
    {
        min-width:260px;
    }
}



@media (min-width: 768px) {
    .leftSideProfile
    {
        display: none;
    }
    #main-wrapper[data-layout=vertical][data-sidebar-position=fixed][data-sidebartype=mini-sidebar] .topbar .top-navbar .navbar-collapse, #main-wrapper[data-layout=vertical][data-sidebartype=mini-sidebar] .page-wrapper {
        margin-left: 20px;
    }

    #main-wrapper.defaultStyle[data-layout=vertical][data-sidebar-position=fixed][data-sidebartype=mini-sidebar] .topbar .top-navbar .navbar-collapse, #main-wrapper[data-layout=vertical][data-sidebartype=mini-sidebar] .page-wrapper {
        margin-left: 70px;
    }

}


/* @media (max-width: 767px) { */
    /* ipad mini not included */
    .mobile .hide-on-mobile {
        transform: translateX(-100vw) translateY(-100vh);
    }
    /* .mobile .chatRow .chatRowLeft
    {
        height: 62px !important ;
    } */

    .mobile textarea.chatTextInput {
       height: 50px !important ;
        
    }
    .mobile .chatRow
    {
        height:50px;
    }
    .mobile .gridUnit.left
    {
    height: 234px;
    position: absolute !important;
    bottom: 0 !important;
    }

    .bot.mobile.preCreativeOnScreen .gridUnit.left
    {
        /* height: 100% !important; */
    }
    #largeAvatar
    {
        display:none;
    }
    .bot.mobile.preCreativeOnScreen #largeAvatar
    {
        display: flex;
        margin-top: 22px;
        margin-left:10px;
        justify-content: center;
        flex-direction: row;
    }
    .bot.mobile.landscape #largeAvatar
    {
        display:none !important
    }
    .mobile.landscape .chatCardBody .card-title
    {
        font-size:12px;
    }
    .largeAvatarImg
    {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        border: 1px solid #e0e0e0;
    }
    .mobile .postcard69Page .pageLabel,
    .mobile .gridUnit .content > .pageLabel
    {
        top:-26px !important;
    }
    .mobile .postcard69Page.horizontal .pageLabel,
    .mobile .gridUnit .content > .pageLabel
    {
        top:-26px !important;
    }
  
    .mobile .postcard69Page
    {
        flex-grow:0 !important;
    }
    .mobile .creative
    {
        justify-content: center;
    }


    @media (max-width: 767px), (max-height: 450px) {
        #quoteModal .explanationBlock
        {
            display:none;
        }
        .modal-dialog.quotation .quotationBlock
        {
            font-size:1.6em;
        }
       .modal-dialog.quotation .attributionBlock {
            margin-right: 2em;
            font-size: 1.3em;
        }
    }
 

.hideHorizontal .outerPage.horizontal
{
    display: none !important;
}
.hideVertical .outerPage.vertical
{
    display: none !important;
} 
/* Also collapse the unused grid units so they don't consume layout space */ 
body.hideHorizontal .creative .gridUnit.right.rightBox { display: none !important; }
body.hideVertical   .creative .gridUnit.middle.leftBox { display: none !important; }

.mobile .chatFrom
{
    font-size:12px;
}
.mobile .chat-list .chat-item .chat-content .box
{
    font-size:12.5px;
}


.mobile.landscape .paneContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.mobile.landscape .top-row > .gridUnit.left { display: none !important; }
.mobile.landscape .chatAreaHolder {
    flex: 0 0 200px; /* fixed left column width */
    margin-left: 0;
    margin-top: 0;
}
.mobile.landscape .top-row {
    flex: 1 0 auto; /* don't shrink; width comes from flex layout */
    min-width: 0; /* allow contents to shrink without forcing overflow */
}
.mobile.landscape .creativePagesArea,
.mobile.landscape .creative {
    height: 100%;
}
/* In landscape, creative area lives on the right: do not grow beyond computed width */
.mobile.landscape .creativePagesArea {
    flex: 0 1 auto;
}
.mobile.landscape .gridUnit.middle .content,
.mobile.landscape .gridUnit.right .content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile.landscape .postcard69Page.horizontal
{
    margin-top:12px;
}
.mobile.landscape .card-body.chatCardBody
{
    padding-left:7px;
    padding-right:2px;
}
.mobile.landscape .chatAreaHolder .chat-list .chat-item .chat-img
{
    width: 28px;
    position: relative;
    top: -8px;
}
.mobile.landscape .chat-list .chat-item
{
    margin-top:20px;
}
.mobile.landscape  .chat-list .chat-item .chat-content
{
    padding-left:0;
    margin-left:-5px;
}
.mobile.landscape .chatFrom
{
    margin-left:5px;
}
.mobile.landscape .chat-list .chat-item .chat-content .box
{
    font-size:12px;
}
.mobile.landscape .chatAreaHolder .card-body
{
    padding:5px;
}
.mobile.landscape .card-body.chatEntryAreaCard
{
    flex-basis:70px;
}

.mobile.landscape textarea.chatTextInput
{
    height: auto !important;
    padding: 3px;
    font-size: 12px;
    min-height: 58px;
}

.mobile #main-wrapper.defaultStyle.noLeftNav[data-layout=vertical][data-sidebar-position=fixed][data-sidebartype=mini-sidebar] .topbar .top-navbar .navbar-collapse,
 #main-wrapper.noLeftNav[data-layout=vertical][data-sidebartype=mini-sidebar] .page-wrapper {
    margin-left: 0;
}



.mobile textarea:focus, .mobile select:focus , textarea.chatTextInput:focus{
    font-size: 16px !important;
    /* top:0; */
  }


  /* .mobile .chatRow .chatRowLeft
  {
    display: block;
  } */












.simPngToIcon
{
    width:23px;
}


  .modal-header {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  

  .carousel-cell {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-cell img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .modal-footer {
    padding: 1rem;
    border-top: 1px solid #eee;
    text-align: center;
  }



  .mobile-moodboard-modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    bottom: -100%; /* Start hidden below viewport */
    transition: bottom 0.3s ease-out; /* Add smooth transition */
  }
  .mobile-moodboard-modal.visible {
    bottom: 0;
  }
  .mobile-moodboard-modal .modal-header
  {
    border-bottom:none;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
  }
  .mobile.landscape .mobile-moodboard-modal {
    right:inherit;
    width:200px;
  }
  .mobile-moodboard-carousel
  {
    padding-bottom: 35px;
    padding-left: 10px;
    padding-right: 20px;
    margin-bottom: 8px;
    /* margin-top: 12px;*/
  }


  .carousel-container {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  /* Custom Navigation Styling */
  .custom-flickity-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none; /* Allows clicks to pass through to carousel */
    z-index: 2;
  }

  .custom-flickity-prev,
  .custom-flickity-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto; /* Re-enable clicks on buttons */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-flickity-prev:hover,
  .custom-flickity-next:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .custom-flickity-prev {
    left: 10px;
  }

  .custom-flickity-next {
    right: 10px;
  }

  .custom-flickity-prev i,
  .custom-flickity-next i {
    font-size: 20px;
    color: #333;
  }





  .target-selector {
    padding: 1rem;
  }

  .target-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .target-option {
    padding: 1rem;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
  }

  .flickity-page-dots
  {
    bottom:9px;
  }

  .potential-drop-target {
    position: relative;
    outline: 3px dashed #4a90e2;
    outline-offset: -3px;
    cursor: pointer;
}

.potential-drop-target::after {
    content: 'Click to place image here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(74, 144, 226, 0.9);
    color: white;
    padding: 8px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.potential-drop-target:hover {
    outline-color: #2171d3;
}
.chat-box
{
    background-color:white;
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */
    transform: translateZ(0); /* Forces GPU acceleration */
    backface-visibility: hidden; /* Helps prevent rendering glitches */
    perspective: 1000; /* Also helps with rendering */
    min-height: 0; /* Critical for flex containers */
}
@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(0.8); opacity: 0; }
  }


  .keyboard-tutorial-active .outerPage
  {
    display: none;
  }

.mobile #dashboardMiniAdmin
{
    top: 4px;
    left: calc(50% - 9em);
    position: absolute;
    color: yellow !important;
    z-index: 99999;
    background-color: #767676;
    max-width: 43%;
    font-size: 9px;
    padding: 5px;
    border: 1px solid #e0e0e0;
    text-align: center;
}
.mobile .projectList .projectDetails
{
    display: none !important;
}
.mobile .doStartNewProject.btn
{
    font-size:11px;
}
.mobile .scrollable 
{
    -webkit-overflow-scrolling: touch;
}


.mobile.portrait .worksheet, .mobile.portrait .listInfo
{
    height: 336px;
    overflow: scroll;
}

.mobile.landscape .worksheet, .mobile.landscape .listInfo
{
    height: calc(100vh - 50px);
    overflow: scroll;
    margin: 0;
    font-size: 90%;
}

.iAI
{
    font-size: 22px;
    position: relative;
    top: 1px;
    left: 1px;
}
#ai-magic-button
{
    position: absolute;
    right: 20px;
    background: #01C0CD;
    color: white;
    border-radius: 9999px;
    padding: 8px 16px;
    z-index: 1000;
    border: 1px solid #c2c0c0;
    box-shadow: 0 4px 6px rgb(201 201 201);
    cursor:pointer;
}
#ai-magic-button .insideButton
{
    position:relative;
}
.mobile.showHorizontal.showOnePage #ai-magic-button, 
.hideMoodboard #ai-magic-button
{
    display:none !important;
}

.sketchpadClassHolder h1
{
    font-size:23px;
    margin-top:10px;
}
.sketchpadClassHolder h2
{
    font-size:21px;
    margin-top:10px;
}
.sketchpadClassHolder ul{
    padding-left:13px;
}
.sketchpadClassHolder li
{
    margin-bottom:10px;
}
@keyframes wiggleIn {
    0% { transform: translateX(100px) rotate(0deg); opacity: 0; }
    20% { transform: translateX(-10px) rotate(-5deg); opacity: 1; }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(2px) rotate(1deg); }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

.wiggle-animation {
    animation: wiggleIn 0.8s ease-out forwards;
}

.letterPage .dynamicVert
{
    display: block;
    text-align: left;
}

.letterPage .innerCreativePage {
    width: 100%;
    height: 100%;
    background: white;
    position: relative;
    aspect-ratio: 8.5/11;
    padding:9% 11%;
    border:1px solid #e0e0e0;
    overflow: hidden;
}
.renderFrame .letterPage .innerCreativePage
{
    overflow: visible;
}

.letterPage .innerCreativePage div
{
    text-align:left;
    color:#000;
}



.letterPage.scaled-element .innerCreativePage .insideClearZone {
    text-align: left;
    color: #000;
    transform: scale(2);
    position: relative;
    left: 34%;
}



.letterPage .innerCreativePage .signatureFont,
.letterPage.altsigfont1  .innerCreativePage .signatureFont
{
    font-family: 'Homemade Apple';
    font-size: 18px;
   
    color: #2171d3;
    
    line-height: 1;   
}
.letterPage.scaled-element .innerCreativePage .signatureFont
{
    font-size:40%;
}
.letterPage.altsigfont2 .signatureFont
{
    
    font-family: Caveat;
    font-size: 23px;
}
.letterPage.altsigfont3 .signatureFont
{
    font-family: 'Shadows Into Light';
    font-size: 23px;
   
}
.letterPage.altsigfont4 .signatureFont
{
    font-family: 'Style Script';
    font-size: 23px;
     
}

.renderFrame .letterPage .innerCreativePage
{
    border:none;
}
.renderFrame .letterPage .signatureFont
{
    font-size:55px;
}
/* Letterhead image area */
#letterheadImage {
    width: 100%;
    height: 10.9%;  /* Approximately 1.2/11 of page height */
    margin-bottom: 4.55%;  /* 0.5/11 of page height */
}

/* Date positioning */
#letterDate {
    text-align: right;
    height: 2%;
    margin-bottom: 4.55%;
}

/* Address block styling */
#letterAddressArea {
    position: absolute;
    top: 24%;
    left: 10%;
}

.letterAddressText
{
    
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    line-height: 1.2;
}
.letterPage.scaled-element .letterAddressText
{
    position: relative;
    top: 17px;
    left: 17%;
}

#simBarcode .bars 
{
    font-family: "Libre Barcode 39", serif;
    color: #555;
    font-weight: 400;
    font-style: normal;
    font-size: 180%;
    line-height: 1;
    margin-bottom: -3px;
}
#simBarcode .bars .u
{
    display: inline-block;
    position: relative;
    top: -3px;
    font-size: 90%;
    font-family: "Libre Barcode 39", serif !important;
    color:#555 !important;
}
#simBarcode .bars .d
{
    display: inline-block;
    position: relative;
    top: 3px;
    font-family: "Libre Barcode 39", serif !important;
    color:#555 !important;
    font-size: 90%;
}
#simBarcode .aster 
{
    font-family:Arial, Helvetica, sans-serif;
    color:#111;
}
.letterPage #simBarcode
{
    display:none;
}
.proofThumbnail
{
    border:1px solid #d0d0d0;
}

.embiggenable, .embiggenCell
{
    cursor:pointer;
}
.proofThumbnail.leftFront
{
    
    width:99%;
    max-width:333px
}
.proofThumbnail.rightBack
{
   
    width:99%;
    max-width:500px;
}
/* Letter body - using dynamicVert */
#letterBody {
   
    line-height: 2;
    text-align: left;
}
.modal.fullScreenWidth .modal-xl
{
    max-width: 100% !important
}

.iUploadImage
{


cursor: pointer;

font-size: 19px;
color: #999999;
display:none;
}
.interactWithCreative .iUploadImage
{
    display:inline-block;
}
.dz-preview, .dz-file-preview, .dz-processing, .dz-success, .dz-complete
{
    display:none !important;
}
.mobile.landscape .iUploadImage
{
    font-size: 16px;
    position: relative;
    top: -7px;
}

.chatIcon
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}
.mobile.portrait .chatIcon
{
    position: relative;
    top: -11px;
    left: 6px;
}
.drop-spinner {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: dropSpin 1s linear infinite;
    z-index: 9999;
    transform: translate(-50%, -50%);
}



.scrolling-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.imgcard {
    display: inline-block;
    margin-right: 10px;
}

.minithumbnail {
    width: 100px;
    margin-bottom: 10px;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;

}

/* Center the wrapper when content is less than screen width */
.wrapper-container {
    display: flex;
    justify-content: center;
}

.minithumbnail.aigen:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.other_images_row
{
    margin-top:40px;
    border-top:1px solid #e0e0e0;
    padding-bottom:20px;
}

.ctaArea
{
    font-size: 1.2em;
    line-height: 2;
    margin-top: 20px;
}
.ctaArea b, .ctaArea strong
{
color: #000;
font-weight: 500;
}
.unclaimed .embiggenCell {
   
    font-size: 12px;
    color: #777;
    font-weight: normal;
}
.overlayPS
{
    margin-top:5%;
}
.overlayOuter
{
    position: absolute;
    z-index: 1000;
    right: 1.5%;
    top: 0;
    width: 43%;
    height: 50%;
}
img.overlayQR
{
    left: 37%;
    bottom: 13%;
    position: absolute;
}
.overlayInner
{
    padding: 7%;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
    background-color: #ffff9e;
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}

.overlayURL
{
    font-family: 'Source Code Pro', Courier, monospace !important;
    font-size: .9em;
    color: #ce276b;
    font-weight: 600;
    display: inline-block;
    position: absolute;
    right: 3.7%;
    bottom: 3.5%;
}
.overlayArrow
{
    width: 7%;
    height: auto;
    position: absolute;
    bottom: 12%;
    left: 52%;
    rotate: -106deg;
}
.overlayTitle
{
    font-size: 3em;
    margin-bottom: 1%;
    color: #104b92;
    font-family: 'Indie Flower' !important;
}
.overlayMessage
{ 
    width:100%;
}
.overlayMessage p, .overlayMessage li, .overlayMessage .handwritten
{
    font-size: 3.3em;
    line-height: 140%;
    font-family: 'Indie Flower' !important;
    margin-bottom: 3.5%;
    color: #104b92;
}

.overlaySig
{
    font-family: 'Homemade Apple' !important;
    font-size: 3em;
    color: #104b92;
    line-height: 1;
    margin-top: 1%;
}

.listPurchaseConfirmation .listSlug
{
    line-height: 1.4;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 10px 20px 0;

}
.listPurchaseConfirmation .content
{
    padding: 20px;
    margin-top: 20px;
}
.listPurchaseConfirmation .list_describe
{
    max-height: 10em;
    padding: 10px;
    border: 1px solid #e0e0e0;
    margin: 10px 25px 10px 15px;
    font-size:13px;
}
.listPurchaseConfirmation .afterButton
{
    margin-top: 20px;
    padding-top:20px;
    border-top:1px solid #e0e0e0;
}

.iDeleteProject, .iAssignProject, .iSendToMailhouse
{
    cursor:pointer;
    font-size:13px;
    margin-left:8px;
}
.iAssignProject
{
    font-weight:bold;
    color:#555;
}



.projectList .projectUnit.mailinglistonly  .showOnNoMailingList
{
   display: none;
}
.projectList .projectUnit.mailinglistonly .noMailingList .showOnNoMailingList
{
   display: block;
   padding: 20px;
}
.projectList .projectUnit.mailinglistonly .noMailingList .hideOnNoMailingList
{
   display: none;
}
.paneColumn.isUpload .hideOnUpload
{
    display: none;
}

[class*="styleHint"] .projectList .projectUnit.mailinglistonly * {
    font-family: Poppins, sans-serif !important;
}

.projectList .projectUnit.mailinglistonly .mailingListDetails
{

    max-height: 300px;
    padding: 10px;

    border-radius: 4px;
    border: 1px solid #e0e0e0;
    background-color: white;
    margin-bottom:20px;

}
.projectList .projectUnit.mailinglistonly .mailingListDescriptionOuter
{
    max-height: 170px;
    font-size:12px;
   
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.4;

    padding: 10px;

    border-radius: 4px;
    border: 1px solid #e0e0e0;
    background-color: white;
    margin-bottom:20px;
}
.tab-content .mailingListDescriptionOuter
{
    margin-top:20px;
}

.projectList .projectUnit.mailinglistonly.no_list_count .mailingListDetails,
.projectList .projectUnit.mailinglistonly.no_list_count .mailingListDescriptionOuter
{
    display:none;
}

.smallHeadline
{
    color:#222;
    font-weight: bold;
}
.projectList .projectUnit.mailinglistonly .mailingListDetails table 
{
    font-size:11px;
}
.projectList .projectUnit.mailinglistonly .mailingListDetails table td
{
    padding: 3px;
}
.projectList .projectUnit.mailinglistonly p.reasoning_customer
{
    font-size:12.5px;
}

.ellipsize 
{
    white-space: nowrap;        /* Keeps text on a single line */
    overflow: hidden;           /* Hides any overflow */
    text-overflow: ellipsis;    /* Adds the ellipsis */
}
.dropdown-menu.companySwitcher
{
    font-size: 12px;
    width: 300px;
    box-shadow: 6px 7px 5px 2px rgb(0 0 0 / 13%);
}
.doShowCompanySwitcher
{
margin-right: 2px;
position: relative;
top: -2px;
background: rgb(255 255 255 / 23%) !important;
}
.subtleNav
{
    font-family: simple-line-icons !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: rgb(106 127 144) !important;
    font-size: 11px !important;
    position: relative;
    top: -2px;
    left: -1px;
    margin-right: -4px;
}

@keyframes dropSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
  /* Hotspot indicator */
  .ai-feature-hotspot {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    z-index: 1001;
  }
  
  .ai-feature-hotspot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #ef4444;
    border-radius: 50%;
    z-index: 5;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    animation: hotspotpulse 1.5s infinite;
  }
  
  @keyframes hotspotpulse {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(2.5);
      opacity: 0;
    }
  }
  
  /* Tooltip */
 
  .ai-feature-tooltip {
    position: fixed;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    width: 220px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
 
  /* Tooltip arrow */
  .ai-feature-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background-color: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
  }
  
  .ai-feature-tooltip.active {
    opacity: 1;
    visibility: visible;
  }
  
  .ai-feature-tooltip h4 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
  }
  
  .ai-feature-tooltip p {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 13px;
    color: #4b5563;
  }
  
  .ai-feature-dismiss-btn {
    background-color: #f3f4f6;
    border: none;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .ai-feature-dismiss-btn:hover {
    background-color: #e5e7eb;
  }

  #dashboardMiniAdmin
  {
    margin-bottom:12px;
  }
  .initiateEraseAll
  {
    cursor:pointer;
    border-bottom:1px dashed #e0e0e0;
  }
  #dashboardMiniAdmin.eraseMode initiateEraseAll
  {
    border-bottom:none;
  }

  #dashboardMiniAdmin .eraseUI
  {
    display:none;
  }
  #dashboardMiniAdmin.eraseMode  .eraseUI
  {
    display:inline-block;
  }
  .cancelErase
  {
    border-bottom:1px dashed #e0e0e0;
    cursor:pointer;
  }
  .renderFrame.sideBySide .outerPage
  {
    margin-left:20px;
  }
  
  .no-break-phone
  { 
    white-space: nowrap; display: inline-block; 
  }

  .putSingleCompanyName
  {
    text-wrap: auto;
  }

.doExportList
{
    cursor:pointer;
}
/* 

#quant-ui {
    width: 100%;             
    max-width: 800px;        
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }

#quantitySlider {
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
  }
  #quantitySlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #555;
    cursor: pointer;
    margin-top: -5px; 
  }

  /* .slider-labels {
    width:100%;
    pointer-events:none;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;       
    margin-top: 8px;
    font-size: 2em;
    white-space: nowrap;    
  }
  .slider-labels .slider-label {
    text-align: center;
    flex: 1;              
  } 
    */
   
  #worksheetDetails
  {
    margin: 16px 0;
    font-size: 1em;
    position: absolute;
    bottom: 0;
    left: 30px;
}
#quantWorksheet.v2
{
    min-height:200px;
    padding:20px;
}


#assumptionsPanel
{
    display:none;
    border:1px solid #ddd;
    padding:12px;
    border-radius:4px;
    font-size:0.9em;
    margin:10px;
}
.slider-container
{
    position:relative;
    padding:20px 30px;
}



/* Main Slider Container */
/* Add this CSS to your stylesheet */

/* Main Slider Container */
#quant-ui {
    margin: 2rem 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  }
  
  #quant-ui h4 {
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #333;
  }
  
  .slider-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  /* Slider Styling */
  #quantitySlider {
    margin: 2rem 0;
    height: 10px;
  }
  
  /* Live Details Section */
  .liveDetails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  @media (max-width: 768px) {
    .liveDetails {
      grid-template-columns: 1fr;
    }
  }
  
  /* Stats Cards */
  .stat-card {
    background-color: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
  }
  
  .stat-card:hover {
    transform: translateY(-2px);
  }
  
  .stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
  
  .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
  }
  
  /* Primary Stats (visible in basic mode) */
  .primary-stat {
    background-color: #f0f7ff;
    border-left: 4px solid #0d6efd;
  }
  
  /* Secondary Stats (hidden in basic mode) */
  .secondary-stat {
    background-color: #fff;
    border-left: 4px solid #6c757d;
  }
  
  /* Cost Stats */
  .cost-stat {
    background-color: #fff8f0;
    border-left: 4px solid #fd7e14;
  }
  
  /* Total Cost Card */
  .total-stat {
    background-color: #f0fff4;
    border-left: 4px solid #198754;
  }
  
  /* Job Fee Note Styling */
  .job-fee-note {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: right;
  }
  
  /* Button Styling */
  #analyzeBtn {
    width: 100%;
    padding: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
  }
  
  /* Customer Summary for Basic Mode */
  .customer-summary {
    font-size: 0.9rem;
    color: #495057;
    margin: 0.5rem 0 1.5rem;
    text-align: left;
    padding-left: 0.25rem;
  }
  
  .explain-link {
    color: #0d6efd;
    text-decoration: none;
    margin-left: 0.5rem;
    font-weight: 500;
  }
  
  .explain-link:hover {
    text-decoration: underline;
  }
  
  /* Advanced Panels */
  .advanced-panels {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
  }
  
  .advanced-panel-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #495057;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Simplify button styling */
  .simplify-link {
    font-size: 0.85rem;
    color: #0d6efd;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.2s;
  }
  
  .simplify-link:hover {
    text-decoration: underline;
    transform: translateY(-2px);
  }
  
  .simplify-link svg {
    margin-top: -2px;
  }
  
  .editable-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .doBustCache
{
    cursor:pointer;
    margin-left: 10px;
    
    position: relative;
    top: -2px;
    text-transform: uppercase;
    font-size: 90%;
}
  @media (max-width: 768px) {
    .editable-panels {
      grid-template-columns: 1fr;
    }
  }
  
  .editable-panel {
    background-color: white;
    padding: 1rem;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .editable-panel label {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
  }
  
  .editable-value {
    padding: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    border: 1px dashed #ced4da;
    border-radius: 4px;
    cursor: text;
  }
  
  .editable-value:hover {
    background-color: #f8f9fa;
  }
  
  .editable-value:focus {
    outline: none;
    border-color: #86b7fe;
    background-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  .result-value {
    padding: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
  }
  
  /* Toggle visibility */
  .basic-mode .secondary-stat,
  .basic-mode .advanced-mode-only {
    display: none;
  }
  
  .basic-mode-only {
    display: none;
  }
  
  .basic-mode .basic-mode-only {
    display: block;
  }
#analyzingMessage
{
    display:none;
}
  #analyzingMessageHolder
  {
    display: inline-block;
    max-width: 16em;
    padding: 8px;
    position: relative;
    top: -1px;
  }


  #draft-tip {
    position: absolute;
    display: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    line-height: 1.4;
    z-index: 10000;
    color: #222;
    background: #ffffcc;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 8px rgb(0 0 0 / 42%);
    
  }
  /* base (mobile) */
  #draft-tip.tip-mobile {
    max-width: 280px;
    font-size: 14px;
    padding: 12px 16px;
  }
  /* desktop */
  @media (min-width: 768px) {
    #draft-tip.tip-desktop {
      max-width: 560px;     /* 2×280 */
      font-size: 28px;      /* 2×14 */
      padding: 24px 32px;   /* 2×(12,16) */
    }
  }
  #draft-tip button#draft-tip-close {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
  }
  /* mobile close button */
  #draft-tip.tip-mobile button#draft-tip-close {
    top: 8px; right: 8px;
    font-size: 16px;
  }



  .rfb-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%; /* Set your desired container width */
    
  }
  
  .rfb-logo {
    max-width: 325px;
   
    object-fit: contain; /* This is the key property */
  }


  /* desktop close button */
  @media (min-width: 768px) {
    #draft-tip.tip-desktop button#draft-tip-close {
      top: 16px; right: 16px;
      font-size: 32px;
    }
  }

  @media (max-width: 844px) {
  .error-box .error-title
  {
      font-size: 50px;
      line-height: 78px;
     
  }
  .prominent{
    font-size:1.2em;
  }

  
  .error-box video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 100%;
      object-fit: cover; /* Ensures the video covers the entire area while maintaining its aspect ratio */
      transform: translate(-50%, -50%);
      z-index: -1;
  }

  .rfb-logo-container
  {

    position: absolute;
    bottom: 0;
    width:100%;
  }
  .rfb-logo {
    max-width: 235px;
  }
  .error-box .error-body {
    padding-top: 1%;
}
}

@media (max-height: 500px) {
    .rfb-logo-container {
        position: absolute;
        bottom: 0;
        right: 0;
        width:auto;
    }
}
.creativeContent.routeFocus .creative
{
    display:none;
}

.sliderAndMap
{
    flex: 1 0 auto;
    max-width:1000px;
    display:flex; flex-direction:column; height:100%;
}

.sliderFrame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
   
    padding: 1rem 1.5rem;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #333;


  }
  #map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 280px; /* fallback for very short panels */
    border-radius: 8px;
    border:1px solid #e0e0e0;
    overflow: hidden;
    margin-top:15px;
  }
  
  .sliderFrame label {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #374151; /* slate */
  }
  
  .sliderFrame input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: #e5e7eb; /* light gray */
    outline: none;
    accent-color: #3b82f6; /* blue-500 */
  }
  
  .sliderFrame .summaryText {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #1f2937; /* gray-800 */
  }
  
  .sliderFrame .summaryText span {
    white-space: nowrap;
  }
  
 #main-wrapper.hideCreativeContent .creativePagesArea
 {
    display:none;
 }

 .company-marker {
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.eddm-summary {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}


/* Ensure map container has explicit dimensions */
#eddm-project-map {
    position: relative !important;
    width: 100% !important;
    height: 500px !important;
    overflow: hidden !important;
}

/* Ensure Leaflet container styles */
#eddm-project-map .leaflet-container {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix tile positioning */
#eddm-project-map .leaflet-tile-container {
    position: absolute !important;
}

/* Ensure parent wrapper doesn't interfere */
.eddm-map-wrapper {
    position: relative;
    overflow: visible !important;
}

/* --- EDDM panel visibility control (non-destructive rendering) --- */
.eddm-routes-panel {
    display: none; /* Hidden by default; shown via wrapper classes */
}
.page-wrapper.isEDDM.currently_at_list_route .eddm-routes-panel {
    display: block;
}
/* Hide creative canvas when showing EDDM UI */
.page-wrapper.currently_at_list_route .creative {
    display: none;
}
/* Avoid overlapping controls while in EDDM */
.page-wrapper.currently_at_list_route .zoom-controls {
    display: none;
}


.piglet_logo_text
{
    font-family: 'Rubik Dirt', Cursive;
    color: #fdb3bf;
    font-size: 25px;
    line-height: 1;
    position: relative;
    left: 3px;
    top: 3px;
}

body.wl2696 #main-wrapper[data-layout=vertical] .topbar .navbar-collapse[data-navbarbg=skin1], 
body.wl2696 #main-wrapper[data-layout=vertical] .topbar[data-navbarbg=skin1], 
body.wl2696 #main-wrapper[data-layout=horizontal] .topbar .navbar-collapse[data-navbarbg=skin1], 
body.wl2696 #main-wrapper[data-layout=horizontal] .topbar[data-navbarbg=skin1]
{
    background: #fdb3bf !important;
}














/* Combined Progress Navigation and Zoom Controls */ 

/* Container visibility control */
.progress-nav-container {
    position: absolute;
    top: 20px;
    right: 13px;
    z-index: 1000;
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 8px;
}

/* Show container when explicitly enabled */
.page-wrapper.show-zoom-controls .progress-nav-container {
    display: flex;
} 

/* Grippy strip handle (subtle) used for draggable panels
.progress-nav-container .drag-grip,
.template-picker .drag-grip {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 4px;
    background-image: repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.22) 0,
      rgba(0,0,0,0.22) 2px,
      transparent 2px,
      transparent 6px
    );
    opacity: 0.35;
    cursor: grab;
    touch-action: none;
}
.progress-nav-container .drag-grip:active,
.template-picker .drag-grip:active { cursor: grabbing; } */

.progress-nav-container .drag-grip,
.template-picker .drag-grip {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    cursor: grab;
    touch-action: none;
    transition: all 0.2s ease;
}

.progress-nav-container .drag-grip:hover,
.template-picker .drag-grip:hover {
    background: rgba(0, 0, 0, 0.4);
    width: 60px;
}

.progress-nav-container .drag-grip:active,
.template-picker .drag-grip:active {
    cursor: grabbing;
    background: rgba(0, 0, 0, 0.5);
}

/* Progress nav visibility within container */
.progress-nav {
    background: rgba(255,255,255,0.95);
    padding: 11px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; /* Hidden by default */
    min-width: 280px;

    padding-top:27px;
}

/* Show progress nav when both container is shown AND nav is enabled */
.page-wrapper.show-zoom-controls.show-progress-nav .progress-nav {
    display: block;
}

/* Zoom controls are always visible when container is shown */
.zoom-controls {
    background: rgba(255,255,255,0.95);
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; /* Always flex when container is visible */
    flex-direction: column;
    gap: 5px;
    width: auto;
    height: auto;
} 

/* Hide zoom controls while viewing Proof */
.page-wrapper.currently_at_proof .zoom-controls {
    display: none !important;
}

/* Show progress nav based on parent class */
/* .page-wrapper.currently_at_design .progress-nav,
.page-wrapper.currently_at_list_route .progress-nav,
.page-wrapper.currently_at_proof .progress-nav,
.page-wrapper.currently_at_production .progress-nav {
    display: block;
} */

.progress-track {
    display: flex;
    align-items: center;
    position: relative;
    height: 40px; /* Give explicit height for dots and text */
}

.progress-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 11px;
    color: #999;
    padding: 20px 4px 4px 4px;
    cursor: default;
    transition: all 0.2s;
    min-width: 60px;
    min-height: 36px; /* Reserve consistent height */
}

.progress-step::before {
    content: '';
    position: absolute;
    top: 8px; /* Position dot at top */
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 2px solid #fff;
    z-index: 2;
}

/* Connector lines between steps */
.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px; /* Align with dot centers */
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e0e0e0;
    z-index: 1;
}

/* Step label positioning - reserve space for suffix */
.step-label {
    display: block;
    margin-top: 4px;
    line-height: 1.1;
    min-height: 26px; /* Reserve space for two lines of text */
}

/* Active step */
.progress-step.active {
    color: #2196F3;
    font-weight: 600;
}

.progress-step.active::before {
    background: #2196F3;
    width: 14px;
    height: 14px;
    top: 7px; /* Adjust for larger size */
}

/* Completed steps */
.progress-step.completed {
    color: #4CAF50;
}

.progress-step.completed::before {
    background: #4CAF50;
}

.progress-step.completed::after {
    background: #4CAF50;
}

/* Clickable steps */
.progress-step.can-navigate {
    cursor: pointer;
}

.progress-step.can-navigate:hover {
    color: #1976D2;
}

.progress-step.can-navigate:hover::before {
    background: #1976D2;
    transform: translateX(-50%) scale(1.2);
}

/* Mailing type toggle */
.mailing-type-toggle {
    /* display controlled via stage/pro gating; keep layout styles here */
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.mailing-type-toggle button {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s;
}

.mailing-type-toggle button.active {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.mailing-type-toggle button:not(.active):hover {
    background: #f0f0f0;
}

/* Hide toggle unless pro and at list/route */
.mailing-type-toggle { display: none; }
.page-wrapper.show-mail-type-choice.currently_at_list_route .mailing-type-toggle { display: flex; }

/* Hide gear and help for non-pro users */
.page-wrapper:not(.show-mail-type-choice) .mail-settings-btn,
.page-wrapper:not(.show-mail-type-choice) .mailing-help-btn {
    display: none;
}

/* Adjust label based on mailing type - use absolute positioning */
.progress-step.list-route .step-label {
    position: relative;
}

.progress-step.list-route .step-label::after {
    content: ''; /* Empty by default to reserve space */
    display: block;
    font-weight: normal;
    color: #666;
    font-size: 9px;
    height: 12px; /* Fixed height always */
    margin-top: 2px;
}

.page-wrapper.show-mail-type-choice.isEDDM .progress-step.list-route .step-label::after {
    content: '(EDDM)';
}

.page-wrapper.show-mail-type-choice.isFirstClass .progress-step.list-route .step-label::after {
    content: '(List)';
}


.zoom-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.zoom-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.zoom-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

.zoom-btn:active {
    background: #e0e0e0;
}

.zoom-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.zoom-level-indicator {
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
    min-width: 45px;
    justify-content: center;
}

/* Visual hint for pan mode */
.zoom-controls .pan-hint {
    font-size: 11px;
    color: #666;
    text-align: center;
    display: none;
    padding: 2px 5px;
    border-top: 1px solid #ddd;
    margin-top: 2px;
    white-space: nowrap;
}

/* Creative zoom/pan behaviors */
.creative {
    transform-origin: center center;
    transition: transform 0.3s ease;
}

.creativePagesArea {
  overflow: visible;
}
body.mobile.landscape .creativePagesArea { overflow: hidden; }

/* Mobile portrait: ensure the creative fills available height and the middle grid anchors to top */
body.mobile.portrait .creativePagesArea { position: relative; }
body.mobile.portrait .creative { position: relative; height: 100%; }
body.mobile.portrait .gridUnit.middle {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  flex: none; /* ignore flex/aspect in mobile portrait fill */
  aspect-ratio: auto;
}

.creative.zoom-active {
    cursor: grab;
}

.creative.zoom-active:active {
    cursor: grabbing;
} 

.creative.zoom-active .editable-text,
.creative.zoom-active .editable-text.editing,
.creative.zoom-active .editable,
.creative.zoom-active .editable.editing {
    cursor: text; /* Allow text caret while zoomed in */
}

.creativePagesArea.zoom-panning {
    cursor: grabbing !important;
}

/* Page focus states (keeping for compatibility) */
.creative.zoom-focus-front .outerPage.horizontal {
    opacity: 0.3;
    transition: opacity 0.3s;
}

.creative.zoom-focus-back .outerPage.vertical {
    opacity: 0.3;
    transition: opacity 0.3s;
}

/* Smooth transitions */
.outerPage {
    transition: transform 0.3s ease;
}

/* While adjusting vertical framing of cover image */
.outerPage.hasCoverImage.cover-adjust-active {
    cursor: ns-resize;
} 
/* Horizontal adjust cursor when axis is X */
.outerPage.hasCoverImage.cover-adjust-active.cover-adjust-axis-x {
    cursor: ew-resize;
}
 
/* Hint cursor when armed via toggle */
.outerPage.hasCoverImage.cover-adjust-armed {
    cursor: ns-resize;
}

/* Prevent text selection during adjust */
.outerPage.hasCoverImage.cover-adjust-active,
.outerPage.hasCoverImage.cover-adjust-active * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Adjust Photo toggle near page label */
.pageLabelInner .cover-adjust-toggle {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    line-height: 1.2;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(61,174,216,0.1);
    color: #3daed8;
    border: 1px solid rgba(61,174,216,0.3);
    cursor: pointer;
}
.pageLabelInner .cover-adjust-toggle.active {
    background: #3daed8;
    color: #fff;
    border-color: #3daed8;
} 
 
.pageLabelInner .cover-adjust-reset {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1.2;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    color: #444;
    border: 1px solid rgba(0,0,0,0.15);
    cursor: pointer;
}
.pageLabelInner .cover-adjust-reset[disabled] {
    opacity: 0.5;
    cursor: default;
}

 



















.progress-nav-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mail-settings-btn {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 3px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #666;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: 6px;
    top: 6px;

}

.mail-settings-btn:hover {
    background: #f0f0f0;
    color: #2196F3;
}

.mail-settings-btn.active {
    background: #2196F3;
    color: white;
}




@media (min-width: 1201px) {
    /* leave some room for nav in eddm mode when screen width will put nav over zip code panel */
    body.nonMobile .page-wrapper.currently_at_list_route.show-progress-nav.isEDDM .summary-panel
    {
        margin-top:43px;
    }
}














/* Help button styling */
.mailing-help-btn {
    width: 20px;
    height: 20px;
    border: 1px solid #2196F3;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #2196F3;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: all 0.2s;
}

.mailing-help-btn:hover {
    background: #2196F3;
    color: white;
    transform: scale(1.1);
}

.mailing-help-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

/* Ensure toggle items are properly aligned */
.mailing-type-toggle {
    /* display controlled via stage/pro gating; keep layout styles here */
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

/* Modal customizations for better readability */
#mailingTypeHelpModal .modal-body h6 {
    color: #2196F3;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
    margin-top: 15px;
}

#mailingTypeHelpModal .modal-body h6:first-child {
    margin-top: 0;
}


@media (min-height: 820px) {
    body.nonMobile #quantWorksheet
    {
        margin-top:80px;
    } 
}
/* Template Picker (Retail) */
/* Unified container positioned like old toggle/panel */
.template-picker {
  position: absolute;
  right: 12px;
  top: 150px;
  z-index: 20;
  transition: width 0.25s ease;
} 
.template-picker-toggle {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 28px 6px 10px; /* room for icon */
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  display: inline-block;
  margin-bottom: 6px;
  position: relative;
}
.template-picker-panel {
  width: 420px;              /* give more horizontal room so the shot gets taller */
  max-height: 70vh;          /* allow a bit more vertical scroll */
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  position: relative;
  transform-origin: top right;
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.18s ease-out;
}
.template-picker
{
    width:420px;
}
.template-picker.isCollapsed
{
    width:240px;
}
.template-picker.isCollapsed .template-picker-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden; /* hide until expanded */
  pointer-events: none;
  transform: scale(0.98);
}
.template-picker:not(.isCollapsed) .template-picker-panel {
  max-height: 70vh;
  opacity: 1;
  transform: scale(1);
}
.template-picker:not(.isCollapsed) .template-picker-toggle { display: none; }

/* Collapsed (mini) appearance */
.template-picker.isCollapsed .template-picker-toggle {
  display: block;
  width: 100%;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.2;
}
/* Right-side icon on collapsed toggle */
.template-picker-toggle .picker-icon {
  position: absolute;
  right: 8px;
  top: 6px;
  color: #666;
  opacity: .8;
  cursor: pointer; 
}
.template-picker-toggle .picker-icon i { font-size: 14px; line-height: 1; }
.template-picker-toggle:hover .picker-icon { opacity: 1; color: #444; }
.template-picker-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 8px 10px; 
  border-bottom: 1px solid #eee; 
  font-weight: 600; 
  user-select: none;
  -webkit-user-select: none;
}
.template-picker-header .title { font-weight: 600; color: #222; }
.template-picker-header .close-picker { cursor: pointer; color: #666; display: inline-flex; align-items: center; }
.template-picker-header .close-picker i { font-size: 16px; }
.template-picker-header .close-picker:hover { color: #333; }
.template-grid {  
  display: grid; 
  grid-template-columns: 1fr;   /* single column so each card is wider → taller */
  gap: 10px; 
  padding: 10px;  
}
.template-grid.scrollable {
  max-height: 275px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.template-card { 
  border: 1px solid #eee; 
  border-radius: 6px; 
  overflow: hidden; 
  cursor: pointer;  
} 
.template-card.active { outline: 2px solid #4caf50; cursor: default; opacity: .85; }

/* Working state on a specific card */
.template-card.is-working {
  outline: 2px dashed #888;
  opacity: .6;
  position: relative;
}
.template-card.is-working::after {
  content: 'Applying…';
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 11px;
  color: #444;
  background: rgba(255,255,255,.8);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Inline tiny spinner used inside empty textNeeded blocks */
.inline-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.45);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Busy indicator on Templates toggle */
.template-picker-toggle.busy {
  position: absolute;
  right: 12px;
  top: 150px;
  width: 320px;
  max-height: 60vh;
  overflow: auto;
  pointer-events: none;
  opacity: .8;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  z-index: 30;

  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.template-picker-toggle.busy::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.template-picker-panel.busy {
  pointer-events: none; /* prevent rapid re-clicks while working */
}
.template-picker-panel .picker-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.picker-overlay .status-text {
  font-size: 13px;
  color: #333;
}
.picker-overlay.degraded { background: rgba(255,255,255,0.5); pointer-events: none; }
.picker-overlay .subtext {
  font-size: 12px;
  color: #777;
}
.picker-overlay .fake-progress {
  width: calc(100% - 24px);
  height: 8px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 12px;
} 
.picker-overlay .fake-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6bd3ff, #2a9df4);
  transition: width 0.4s ease;
}
.template-shot { 
  aspect-ratio: 5 / 2;   /* composite (front 6:9 + back 9:6) approx wide; use 5:2 for clarity */
  background: #f0f0f0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.template-shot img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}
/* Per-user composite (front + back) inside a card */
.template-shot .user-composite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}
.template-shot .user-composite img.front {
  height: 100%; 
  width: auto;
}
.template-shot .user-composite img.back {
  height: 66%;
  width: auto;
  opacity: 0.98;
}
/* Live cover overlay removed; static thumbnails only */
.template-meta { 
  padding: 6px 8px; 
  font-size: 12px; 
  color: #333; 
}
.template-meta .name { font-weight: 600; }
.template-meta .ver { color: #777; }