@charset "utf-8";

.customily-animations-fade-enter-active, .customily-animations-fade-leave-active { transition: opacity 0.3s; }

.customily-animations-fade-enter, .customily-animations-fade-leave-to { opacity: 0; }

.customily-hide-scrollbar { scrollbar-width: none; }

.customily-hide-scrollbar::-webkit-scrollbar { display: none; }

.customily-modal-container { position: fixed; width: 100%; height: 100vh; display: flex; float: left; inset: 0px; background: rgba(0, 0, 0, 0.4); z-index: 1000000; text-align: center; justify-content: space-around; align-items: center; }

.customily-modal-container * { border-radius: 0px; }

.customily-modal-container .row { width: auto; }

.customily-modal-container .buttons-container-col { display: initial; }

.customily-modal-container #cl_optionsapp { height: 100%; overflow-y: auto; z-index: 1010; }

.customily-modal-container #cl_optionsapp:not(.customily-hide-scrollbar) { padding-right: 5px; margin-bottom: 5px; }

.customily-modal-container #cl_optionsapp::-webkit-scrollbar { width: 8px; }

.customily-modal-container #cl_optionsapp::-webkit-scrollbar-track { box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px inset; border-radius: 8px; }

.customily-modal-container #cl_optionsapp::-webkit-scrollbar-thumb { border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px inset; }

.customily-modal-container .main { max-width: 1200px; background: white; height: 80vh; width: 80vw; padding: 15px; box-sizing: border-box; }

.customily-modal-container .main .customily-close-button { position: fixed; z-index: 10000; float: right; background: lightgrey; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 36px; cursor: pointer; user-select: none; right: 18px; line-height: initial; }

.customily-modal-container .main .options { height: 100%; width: 100%; }

.customily-modal-container .main .options .canvas-col::before { background: white; }

.customily-modal-container .main .options .canvas-col .canvas-loader { font-size: 100px; }

.customily-modal-container .main .options .canvas-col .canvas-loader::after { border-width: 0.1em; }

.customily-modal-container .main .options-col { max-height: 100%; display: flex; flex-flow: column; }

.customily-modal-container .main .options-col .customily_option .customily-file-input { text-align: left; }

.customily-modal-container .main .options-col .customily_option label { text-align: left; }

.customily-modal-container .main .options-col .customily_option label .option_name { display: inline-block; }

.customily-modal-container .main .options-col .customily_option .cl-accordion { width: 100%; }

.customily-modal-container .main .options-col .customily_option .bottom-spacer { margin-bottom: 5px; display: flex; }

.customily-modal-container .main .options-col .customily_option .swatch-container { justify-content: left; }

.customily-modal-container .main .cart-buttons { align-content: flex-end; padding-top: 10px; margin-bottom: 0px; margin-top: 0px; }

.customily-modal-container .main .cart-buttons .cl-add-to-cart > * { width: 100% !important; max-inline-size: unset !important; min-inline-size: unset !important; margin-left: 0px !important; margin-right: 0px !important; }

.customily-modal-container .main .cart-buttons .cl-add-to-cart > :not(:last-child) { margin-bottom: 10px !important; }

.customily-modal-container .loadingoverlay { display: none !important; z-index: -10000 !important; }

@media (max-width: 767px) {
  .customily-modal-container { justify-content: initial; align-items: initial; }
  .customily-modal-container #cl_optionsapp { min-height: 170px; }
  .customily-modal-container #cl_optionsapp .cl-checkbox-inner-label { margin-top: 0px; font-size: 90%; }
  .customily-modal-container #cl_optionsapp .customily_option.cl-has-checkbox { margin-top: 0px !important; text-align: left; }
  .customily-modal-container #cl_optionsapp .customily_option.cl-has-checkbox input { vertical-align: top; }
  .customily-modal-container #cl_optionsapp .customily_option.cl-has-checkbox .cl-checkbox-label { margin-left: 0px !important; }
  .customily-modal-container #cl_optionsapp .customily_option.cl-has-checkbox .cl-option-content { position: unset !important; width: unset !important; }
  .customily-modal-container #cl_optionsapp:not(.customily-hide-scrollbar) { padding-right: 0px; margin-bottom: 0px; }
  .customily-modal-container #cl_optionsapp .help-text { padding-left: 10px; padding-right: 10px; }
  .customily-modal-container #cl_optionsapp .customily_option.cl-has-checkbox { display: block; }
  .customily-modal-container .main { height: 100%; width: 100vw; padding: 0px; display: flex; flex-direction: column; }
  .customily-modal-container .main * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; }
  .customily-modal-container .main .options { flex: 1 1 auto; flex-direction: column; justify-content: space-evenly; }
  .customily-modal-container .main .options .canvas-col { flex: 0 1 auto; margin-top: initial !important; margin-right: initial !important; margin-left: initial !important; margin-bottom: 5px !important; }
  .customily-modal-container .main .cl-header { width: 100%; flex: 0 1 50px; align-items: center; justify-content: flex-end; padding-right: 10px; z-index: inherit; position: relative; }
  .customily-modal-container .main .customily-close-button { right: 0px; position: relative; }
  .customily-modal-container .main .options-col { padding: 0px; flex: 0 1 auto; overflow: hidden; }
  .customily-modal-container .main .options-col .customily-set > div:first-child { display: flex; flex-flow: row; overflow: hidden; }
  .customily-modal-container .main .options-col .no-transition { transition: none !important; }
  .customily-modal-container .main .options-col .customily_option { pointer-events: none; flex-wrap: wrap; min-width: 100%; position: absolute; top: 0px; min-height: 170px; transition: 0.35s; }
  .customily-modal-container .main .options-col .customily_option .swatch-container { flex-wrap: nowrap !important; overflow-x: auto; }
  .customily-modal-container .main .options-col .customily_option .customily-file-input { text-align: center; }
  .customily-modal-container .main .options-col .customily_option > :not(label) { pointer-events: all; margin-left: 10px; margin-right: 10px; width: 100%; }
  .customily-modal-container .main .options-col .customily_option > label { padding-left: 10px; color: rgb(51, 51, 51); height: 45px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(211, 211, 211); border-bottom-color: rgb(211, 211, 211); border-image: initial; border-left-style: initial; border-left-color: initial; border-right-style: initial; border-right-color: initial; display: flex; align-items: center; white-space: nowrap; flex-direction: column; justify-content: center; padding-bottom: 0px; margin-right: 45px; margin-bottom: 0px; margin-left: 45px; box-sizing: border-box; text-align: left !important; margin-top: 0px !important; }
  .customily-modal-container .main .options-col .customily_option > label .option_number { font-size: 10px; line-height: 1; display: block !important; width: 100% !important; }
  .customily-modal-container .main .options-col .customily_option > label .option_name { display: block; max-width: calc(-100px + 100vw); align-self: end; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 45px; width: 100% !important; }
  .customily-modal-container .main .options-col .customily_option > select, .customily-modal-container .main .options-col .customily_option > input { margin-bottom: 15px; }
  .customily-modal-container .main .options-col button.options-control-button { display: flex; float: right; height: 45px; width: 45px; justify-content: center; border: 1px solid rgb(211, 211, 211); cursor: pointer; user-select: none; background: transparent; align-items: center; border-radius: 0px; padding: initial; margin: 0px; min-width: unset; box-shadow: none; }
  .customily-modal-container .main .options-col .control-buttons { z-index: 11000; background: white; position: absolute; }
  .customily-modal-container .main .options-col .control-buttons .disabled > img { opacity: 0.5; }
  .customily-modal-container .main .options-col .control-buttons img { width: 8px; }
  .customily-modal-container .main .options-col .control-buttons.next { right: 0px; }
  .customily-modal-container .main .options-col .cart-buttons { margin: 0px 0px 10px; padding-top: 0px; align-content: initial; flex: 0 1 auto; }
  .customily-modal-container .main .options-col .cart-buttons .buttons-container-col { padding: 0px; }
  .customily-modal-container .main .options-col .cart-buttons .cl-add-to-cart { padding: 0px; justify-content: space-evenly; width: 100%; }
  .customily-modal-container .main .options-col .cart-buttons .cl-add-to-cart > * { margin-top: initial !important; width: auto !important; flex-grow: 1 !important; flex-basis: 0px !important; margin-left: 10px !important; margin-right: 10px !important; margin-bottom: 0px !important; max-height: 50px !important; line-height: 1 !important; }
  .customily-modal-container .main .options-col .cart-buttons .cl-add-to-cart.cl-shared-personalization { margin-top: 10px !important; }
}