@charset "utf-8";



customize-button { cursor: pointer; }



.kickflip-modal { box-sizing: border-box; opacity: 0; visibility: hidden; z-index: -1; --innerHeight: 1vh; width: 100%; height: 100%; margin: 0px auto; position: fixed; top: 0px; left: 0px; overflow: auto; container-type: size; }



.kickflip-modal-exit { z-index: 1; cursor: pointer; fill: rgb(255, 255, 255); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; width: auto; padding: 12px; display: flex; position: absolute; top: 8px; right: 8px; }



.kickflip-modal-exit > svg { width: 16px !important; height: 16px !important; }



.kickflip-iframe-container { container-type: size; }



kickflip-customizer-iframe { height: 100%; display: block; position: relative; box-sizing: border-box !important; }



@media only screen and (orientation: landscape) {

  kickflip-customizer-iframe[height] { min-height: 496px !important; }

}



@container (height > 90dvh) or (height > 90vh) {

  kickflip-customizer-iframe { padding-top: 38px; }

}



.kickflip-overflow-hidden { overflow: hidden; }



.kickflip-modal[open] { opacity: 1; visibility: visible; z-index: 2147483647; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; display: flex; }



.kickflip-modal iframe { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: 100%; height: 100%; }



.kickflip-editor-focus { outline-offset: -2px; outline: rgb(255, 181, 67) solid 4px !important; }



@media (width <= 770px) {

  .kickflip-modal-exit { fill: rgb(0, 0, 0); top: 16px; right: 16px; }

}



@media (width <= 999px) {

  .kickflip-modal { height: calc(100 * var(--innerHeight)) !important; animation: 0.4s ease-in-out 0s 1 normal none running drawer-open-mobile !important; }

  .kickflip-modal .kickflip-iframe-container { width: 100% !important; height: 100% !important; }

  .kickflip-modal-exit { top: 0px; }

  .kickflip-modal-exit > svg { width: 12px !important; height: 12px !important; }

  .kickflip-overflow-hidden { position: fixed; }

}



.kickflip-modal-exit:hover { background: rgba(0, 0, 0, 0.15); }



.kickflip-beacon { z-index: 2147483647; background-color: rgb(255, 181, 67); border-radius: 50%; width: 12px; height: 12px; animation: 0.4s linear 0s 1 normal none running grow; position: absolute; display: block !important; }



.kickflip-beacon:hover { cursor: pointer; }



.kickflip-beacon-tooltip { z-index: 2147483647; color: rgb(0, 0, 0); background: rgb(255, 255, 255); border-radius: 8px; padding: 8px; font-size: 14px; position: absolute; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }



.kickflip-beacon::before { content: ""; background-color: rgba(0, 0, 0, 0); border-radius: 50%; width: 12px; height: 12px; animation: 2s linear 0s infinite normal none running active; position: absolute; top: 0px; left: 0px; box-shadow: rgb(255, 181, 67) 0px 0px 2px 2px; }



@-webkit-keyframes grow { 

  0% { transform: scale(0.1); }

  100% { transform: scale(1); }

}



@keyframes grow { 

  0% { transform: scale(0.1); }

  100% { transform: scale(1); }

}



@-webkit-keyframes active { 

  0% { opacity: 1; transform: scale(0.1); }

  70% { opacity: 0; transform: scale(2.5); }

  100% { opacity: 0; }

}



@keyframes active { 

  0% { opacity: 1; transform: scale(0.1); }

  70% { opacity: 0; transform: scale(2.5); }

  100% { opacity: 0; }

}