/* main shell */

.pizzalayer-ui-container{padding:0px;margin:5px auto;clear:both;}
.pizzalayer-pizza-static{padding:10px;margin:5px auto;clear:both;}

#pizzalayer-pizza{
object-fit: contain;width:600px !important;height:600px !important;padding:0;margin:20px auto;background-size:contain !important;max-width:100%;max-height:100%;z-index:100;}

.pizzalayer-pizza-dynamic,.pizzalayer-pizza-static{position: relative;width: 100%;padding-top: 100%; /* 16:9 Aspect Ratio */}

#pizzalayer-visualizer-pizza-container{position:relative;height:auto;padding:5%;background:#e6e6e6;}

.pizzalayer-crust,.pizzalayer-sauce,.pizzalayer-cheese,.pizzalayer-toppings-wrapper,.pizzalayer-cut,.pizzalayer-drizzle{background-size:contain !important;background-repeat:no-repeat;margin:auto;}

.pizzalayer-cut{z-index:900;width:96%;height:96%;padding:2%;overflow:hidden;}
.pizzalayer-crust{z-index:100;width:96%;height:96%;padding:2%;overflow:hidden;}
.pizzalayer-sauce{z-index:200;width:99%;height:99%;padding:.5%;overflow:hidden;}
.pizzalayer-cheese{z-index:300;width:100%;height:100%;padding:0;margin:0;overflow:hidden;}
.pizzalayer-drizzle{z-index:900;width:100%;height:100%;padding:0;margin:0;overflow:hidden;}
.pizzalayer-topping-cut{z-index:950;background-position: center center;position:relative;top:-100%;}

.pizzalayer-toppings-wrapper{width:100%;height:100%;position:relative;border-radius:50%;padding:0;margin:auto auto -100% auto;}
body .pizzalayer-toppings-wrapper.pizzalayer-toppings-wrapper-static{margin:auto;}
.pizzalayer-toppings-wrapper .pizzalayer-topping{width:1200px;height:1200px;max-width:100%;max-height:100%;padding:0 !important;overflow:hidden;vertical-align:middle;text-align:center;position:relative;}
.pizzalayer-toppings-wrapper .pizzalayer-topping div{width:100%;clear:both;}
.pizzalayer-toppings-wrapper .pizzalayer-topping img{margin:0 !important;padding:0;}
.pizzalayer-visualizer .pizzalayer-toppings-wrapper div:first-child{margin-top:100%;}
.pizzalayer-toppings-wrapper div:not(:first-child){margin-top:-100%;}

/* basic UI framework - some templates may override these elements */

.pizzalayer-ui{border:solid 1px #e6e6e6;margin:15px;padding:20px;}

.pizzalayer-alert{background:rgba(0,0,0,.5);padding:6px 12px;color:white;font-weight:bold;border:solid 1px rgba(255,255,255,.2);display:none;}
.pizzalayer-alert #pizzalayer-alert-content{display:inline;}

.pizzalayer-ui-menu-col-alert{background:rgba(0,0,0,.5) !important;color:white;font-size:16px;}

/* halves */
.pizzalayer-topping.tcg-half-left,.pizzalayer-topping.tcg-half-right{width:50%;height:100%;}
.pizzalayer-topping.tcg-half-left img{width:50%;height:100%;position:absolute;left:0;object-fit: cover; object-position: 50% 0;}
.pizzalayer-topping.tcg-half-right img{width:50%;height:100%;position:absolute;right:0;object-fit: cover; object-position: 50% 0;}

/* quarters */
.pizzalayer-topping.tcg-quarter-top-left,
.pizzalayer-topping.tcg-quarter-top-right,
.pizzalayer-topping.tcg-quarter-bottom-left,
.pizzalayer-topping.tcg-quarter-bottom-right{width:48%;height:48%;border:solid 1% blue !important;}
.pizzalayer-topping.tcg-quarter-top-left img{width:50%;height:50%;position:absolute;left:0;top:0;object-fit: cover; object-position: top left;}
.pizzalayer-topping.tcg-quarter-top-right img{width:50%;height:50%;position:absolute;right:0;top:0;object-fit: cover; object-position: top right;}
.pizzalayer-topping.tcg-quarter-bottom-left img{width:50%;height:50%;position:absolute;left:0;top:50%;object-fit: cover; object-position: bottom left;}
.pizzalayer-topping.tcg-quarter-bottom-right img{width:50%;height:50%;position:absolute;right:0;top:50%;object-fit: cover; object-position: bottom right;}


/* UI Controls */
.pizzalayer-control-nextprev{padding:6px;}
.pizzalayer-control-nextprev a{border:solid 1px rgba(255,255,255,.6);padding:6px 12px;}
.pizzalayer-control-nextprev a:hover{}
.pizzalayer-control-nextprev .fa{font-size:28px;color:white;}
.pizzlayer-control-next{float:right;}


/* Idle Animation */

@keyframes jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-20px); }
  60% { transform: translateY(0); }
}

.jump {
  animation: jump 0.5s ease;
}

/* Loading Animation / Background Rotation */

.bg-rotate-wrapper {
  position: relative;
  overflow: hidden;
}

.bg-rotate-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('your-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: bg-spin 10s linear infinite;
  z-index: 0;
  pointer-events: none;
}