body.canvas-studio-responsive {
    display: flex;
    justify-content: center; 
    align-items: center;   
}

body.canvas-studio-responsive .canvas-studio-responsive-container {
    overflow-x: hidden;
    margin: auto;
}


.spinnerOuterContainer0 .spinnerContainerPrimary0 {

    background-color: rgb(56 85 69);
}

.spinnerOuterContainer0 .messageContainer0.messageContainerPrimary0 {
height: 30px;
}


.spinnerOuterContainer0 .spinnerContainerMin0 {

    background-color: rgb(56 85 69) ;
}


#canvasStudioToast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    position: fixed;
    z-index: 9999;
    left: 0;right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
    border-radius: 8px;
}
#canvasStudioToast .img{
    opacity: 0;
	width: 50px;
	height: 50px;
    float: left;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
    background-color: #111;
    color: #fff;
    border-radius: 8px;
}
#canvasStudioToast .desc {
    opacity: 0;
    color: #fff;
    padding: 14px;
    overflow: hidden;
	white-space: nowrap;
    
}
#canvasStudioToast.show .img {
    opacity: 1;
}
#canvasStudioToast.show.expanded .desc {
    opacity: 1;
}
#canvasStudioToast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

.canvas-studio-loading-text {
    font-size: 18px; margin-bottom: 20px;
}


#canvas-studio-progress-text {
    margin-top: 10px; 
    font-size: 14px; 
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px} 
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px} 
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}


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

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* Breathe - Very professional, subtle */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* Float - Smooth and calming */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Zoom Pulse - Modern and attention-grabbing */
@keyframes zoomPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1.05); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Glow - Great for tech/gaming brands */
@keyframes glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
        transform: scale(1.05);
    }
}

/* Bounce - Friendly and approachable */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Animation classes */
.canvas-studio-logo-spin { animation: spin 2s linear infinite; }
.canvas-studio-logo-pulse { animation: pulse 2s ease-in-out infinite; }
.canvas-studio-logo-breathe { animation: breathe 3s ease-in-out infinite; }
.canvas-studio-logo-float { animation: float 3s ease-in-out infinite; }
.canvas-studio-logo-zoom-pulse { animation: zoomPulse 2s ease-in-out infinite; }
.canvas-studio-logo-glow { animation: glow 2s ease-in-out infinite; }
.canvas-studio-logo-bounce { animation: bounce 2s ease infinite; }

body.canvas-pointer-events-only {
    pointer-events: none !important;
}
body.canvas-pointer-events-only .canvas-studio-widget-container[id^="canvas-studio-container-"] canvas,
body.canvas-pointer-events-only #saveModal,
body.canvas-pointer-events-only #loadModal{
    pointer-events: auto !important;
}

/* div#theatrejs-studio-root {
    margin-top: 120px;
} */

.canvas-studio-error {
    display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        color: red;
}

.canvas-studio-animation-modal {
    /* WebKit browsers (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: #666 #2a2a2a;
  }
  
  .canvas-studio-animation-modal::-webkit-scrollbar {
    width: 12px;
  }
  
  .canvas-studio-animation-modal::-webkit-scrollbar-track {
    background: #2a2a2a;
  }
  
  .canvas-studio-animation-modal::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 6px;
  }
  
  .canvas-studio-animation-modal::-webkit-scrollbar-thumb:hover {
    background: #888;
  }