:root {
	--widget-width: 100%;
	--options-width-side: 200px;
	--options-width-btm: 620px;
	--options-inner-pad: 20px;
	--canvas-bottom-margin: 170px;
	--canvas-bottom-margin-mob: 250px;
}
.widget-wrapper{
	max-width: var(--widget-width);
	margin: auto !important;
}
.widget-wrapper{
	display: flex !important;
}



.options-panel{
	z-index: 10000
}



/* ************** */
/* options left layout */
/* ************** */
.options-panel{
    /* Set a fixed width for the first child */
	width: auto;
	width: 20%;
	width: var(--options-width-side);
    /* Or let it size based on its content */
    /* width: auto; */
}
.canvas-panel{
	width: 950px;
}
/* ************** */
/* [end]options left layout */
/* ************** */





/* ************** */
/* options bottom layout */
/* ************** */
.options-bottom .options-panel{
	width: var(--options-width-btm);
	position: fixed;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	/*overflow: auto !important; */ /* Adds scrollbars only when necessary */
}
.options-bottom .options-panel{
	max-width: 95%;
}

.options-bottom .panel-toggler{
	position:fixed;
	
	top: -15px;
	left: 0;
	right: 0;
	margin-inline: auto; /* Centers horizontally */
	width: fit-content;  /* Or a specific width like 300px */
	
	z-index: 10000;
}
@media screen and (max-width: 920px){
.options-bottom .panel-toggler{
	top: -5px;    /* Acts as the 5px right margin */
	right: -5px;    /* Acts as the 5px right margin */
}
}

.options-bottom .options-inner{
	display: flex; /* when options at the bottom, display contents horizontally */
	flex-wrap: wrap; /* Allows items to move to the next line */
}
.options-bottom .options-inner{
	gap: 20px
}
@media screen and (max-width: 920px){
.options-bottom .options-inner{
	gap: 10px
}
}



.options-bottom .canvas-panel{
	width: 100%;
	height: 100% vh;
	margin-bottom: var(--canvas-bottom-margin);
}
@media screen and (max-width: 920px){
.options-bottom .canvas-panel{
	margin-bottom: var(--canvas-bottom-margin-mob);
}
}
/* ************** */
/* [end]options bottom layout */
/* ************** */





/* ******************* */
/* cart floating right */
/* ******************* */
.cart-wrap.floating{
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	
	z-index: 10000
}
/* ******************* */
/* [end]cart floating right */
/* ******************* */





/* ************** */
/* toggler button */
/* ************** */
.spin-out {
    animation: spinAndFadeOut 0.5s forwards;
}
@keyframes spinAndFadeOut {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: rotate(180deg); /* Half spin for a smooth transition */
        opacity: 0;
    }
}
.spin-in {
    animation: spinAndFadeIn 0.5s forwards;
}
@keyframes spinAndFadeIn {
    0% {
        transform: rotate(-180deg); /* Spin back in from the opposite side */
        opacity: 0.3;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}
/* ************** */
/* [end]toggler button */
/* ************** */





/* ************* */
/* jquery dialog */
/* ************* */
.ui-dialog.ui-widget,
.ui-dialog-titlebar.ui-widget-header,
.ui-button.ui-dialog-titlebar-close{
	border: 0px;
	border-radius: 0px;
	background: white;
}
.ui-dialog.ui-widget{
	z-index: 100000;
	padding: 0px;
}		
.ui-dialog-titlebar.ui-widget-header{
	background: #121212 !important;
	color:#ffffff;
}
.ui-dialog-buttonset button{
	font-size: 18px;
	color:#000000;
	border-color: #000000 !important;
	outline:none;
	background-color: white !important;
	border-radius: 0
	
}
/* ************* */
/* [end]jquery dialog */
/* ************* */





/* ************* */
/* marching ants */
/* ************* */
.marching-ants {
  /* Top, Right, Bottom, Left */
  background-image: 
    linear-gradient(to right, red 50%, transparent 50%),   /* Top */
    linear-gradient(to bottom, red 50%, transparent 50%),  /* Right */
    linear-gradient(to right, red 50%, transparent 50%),   /* Bottom */
    linear-gradient(to bottom, red 50%, transparent 50%);  /* Left */

  /* Position: top-left, top-right, bottom-left, top-left */
  background-position: 
    0 0,        /* Top */
    100% 0,     /* Right */
    0 100%,     /* Bottom */
    0 0;        /* Left */

  /* Sizes */
  background-size: 
    20px 2px,   /* Top */
    2px 20px,   /* Right */
    20px 2px,   /* Bottom */
    2px 20px;   /* Left */

  /* Repeat directions */
  background-repeat: 
    repeat-x,   /* Top */
    repeat-y,   /* Right */
    repeat-x,   /* Bottom */
    repeat-y;   /* Left */

  animation: marching-ants 1s linear infinite;
}

@keyframes marching-ants {
  0% {
    background-position: 
      0 0, 
      100% 0, 
      0 100%, 
      0 0;
  }
  100% {
    background-position: 
      20px 0,    /* Top moves right */
      100% 20px, /* Right moves down */
      -20px 100%,/* Bottom moves left */
      0 -20px;   /* Left moves up */
  }
}

.marching-ants-3-border{
  /* Top, Left, and Right gradients (Dash length 10px, Gap 10px) */
  background-image: 
    linear-gradient(to right, red 50%, transparent 50%), /* Top */
    linear-gradient(to bottom, red 50%, transparent 50%), /* Left */
    linear-gradient(to bottom, red 50%, transparent 50%); /* Right */
	
	/* Top, Right, Bottom, Left */
  background-image: 
    linear-gradient(to right, red 50%, transparent 50%),   /* Top */
    linear-gradient(to bottom, red 50%, transparent 50%),  /* Right */
    linear-gradient(to right, red 50%, transparent 50%),   /* Bottom */
    linear-gradient(to bottom, red 50%, transparent 50%);  /* Left */

  /* Position each side and size them (Bottom is omitted) */
  background-position: 0 0, 0 0, 100% 0;
  background-size: 20px 2px, 2px 20px, 2px 20px;
  background-repeat: repeat-x, repeat-y, repeat-y;

  animation: marching-ants-3-border 1s linear infinite;
}
@keyframes marching-ants-3-border{
  0% { background-position: 0 0, 0 0, 100% 0; }
  100% { background-position: 20px 0, 0 -20px, 100% 20px; }
}
/* ************* */
/* [end]marching ants */
/* ************* */














/* *********************************************************************** */
/* layout below 
/* *********************************************************************** */





html, body, .widget-wrapper{
	margin: 0
}



[target-url]{
	cursor: pointer;
}






.panel-toggler,
.panel-toggler img{
	z-index: 1000000 !important;
}
.panel-toggler img{
	position: relative;
	width: 35px;
}





.canvas-panel,
.canvas-panel .document{
	padding: 0 !important
}
.options-inner{
	padding: var(--options-inner-pad);
}
@media screen and (max-width: 920px){
.options-inner{
	padding: 20px 20px !important
}.
}







.option.actions{
	max-width: 46% /* for some reason this block is growing and this was the only way to fix it */
}
@media screen and (max-width: 920px){
.option.actions{
	max-width: inherit /* for some reason this block is growing and this was the only way to fix it */
}
}
.option.actions{
	display: flex;
	flex-wrap: wrap; /* Essential for multiple rows */
	align-items: center; /* vertically align */
}
.option.actions > div{
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: auto !important;
}
.option.actions > div:nth-child(1){
	flex-basis: 30% !important;	
}
.option.actions > div:nth-child(2){
	flex-basis: 66% !important;	
}
.option.actions > div:nth-child(1),
.option.actions > div:nth-child(2){
	margin-bottom: 10px;
}
.option.actions > div:not(:last-child):not(:first-child){
	margin-right: 5px;
}
@media screen and (max-width: 920px){
.option.actions > div:first-child{
	margin-right: 10px;
}
.option.actions > div,
.option.actions > div:nth-child(1),
.option.actions > div:nth-child(2){
	flex-basis: auto !important;		
}
}







.option.content-manager{
	display: flex;
	flex-wrap: wrap; /* Essential for multiple rows */
}
.option.content-manager > div{
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: auto !important;
}
.option.content-manager > div:first-child{
	flex-basis: 100% !important;	
}
.option.content-manager > div:not(:last-child):not(:first-child){
	margin-right: 10px;
}
@media screen and (max-width: 920px){
.option.content-manager > div:first-child{
	margin-right: 10px;
}
.option.content-manager > div,
.option.content-manager > div:first-child{
	flex-basis: auto !important;		
}
}









/* This method ensures all dialogs on your site are responsive and do not exceed the width of the viewport width. */
.ui-dialog {
    max-width: 94%;
}
.ui-dialog input,
.ui-dialog textarea{
	width: 100%;
	box-sizing: border-box;
	padding:8px;
	font-size: 16px
}


.ui-dialog #text-updater textarea{
	field-sizing: content;
}
.ui-dialog #text-updater #dialog-current-text{
	padding:0px;
	border: none;
	outline: none;
}
.ui-dialog #text-updater #dialog-new-text{
	background-color: #e8f3dc;
}
.ui-dialog .text-type-label{
	font-weight: bold;
	font-size: 18px
}
.ui-dialog .text-type-label:not(:first-child){
	margin-top: 20px
}


.ui-dialog #welcome{
	font-size: 18px;
	text-align: center
}


































/* *********************************************************************** */
/* style below 
/* *********************************************************************** */











.widget-wrapper{
	font-family: Arial, Helvetica, sans-serif;
}


.option-label{
	font-weight: bold	
}



.option.actions a{
	text-decoration: none;
	color: inherit;
	border: 1px solid red;
	
	background: red;
	color: #ffffff;
	background: #ffffff;
	color: red;
	
	padding: 3px 5px
}

.options-panel{
	background-color: #efeae6;
	background-color: #ffffff;
	background-color: yellow;
	border-radius: 5px 5px 5px 5px;
}

.option select{
	font-size: 16px !important
}

.option.actions .option-cart{
	font-size: 20px !important;
	text-align: right;
}
.option.actions .cart-total{
	color: red;
	background: white;
	padding: 5px 5px;
	border: 1px solid red;	
}




.cart-wrap.floating > div{
	width: 100%
}
.cart-wrap.floating .cart{
	background: red;
	padding: 5px 5px;	
}
.cart-wrap.floating .buy-now{
	background: green;
	padding: 5px 5px;
	color: white;
}
.cart-wrap.floating .cart-total{
	color: yellow;
	font-size: 24px
}






















#welcome .welcome-pitch,
#welcome .text-updater-pitch{
	font-size: 28px;
	font-weight:bold
}
#welcome .text-updater-pitch{
	color: #ff0000;
}
#welcome .text-updater-pitch,
#welcome .business-name-enter-prompt{
	margin: 20px 0;
}
#welcome .business-name-enter-prompt{
	font-weight:bold
}
#welcome [name="business-name"]{
	outline: none;
	border: 1px solid #121212;	
}