.canvas-container{width:100%;max-width:600px;overflow:hidden}canvas{width:100%;height:auto;border:none}.layout-selection{margin-bottom:30px}.color-selection-container{width:100%;max-width:600px;display:flex;flex-direction:column}.color-selection{margin-top:20px}.colors{display:flex;flex-wrap:wrap;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.color-item{display:flex;align-items:center;margin:5px;cursor:pointer;border:1px solid transparent;padding-right:10px}.color-box{width:50px;height:50px;margin-right:10px;border:1px solid #000;background-size:cover;flex-shrink:0}.color-item.selected{border-color:#000}.color-item span.selected{font-weight:700}.color-selection h3{padding-left:5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.arrow:before{content:"▼";display:inline-block;transition:transform 1s}.arrow-right:before{transform:rotate(-90deg)}.arrow-down:before{transform:rotate(0deg)}.selected-color-box{width:50px;height:50px;border:2px solid #000;margin-left:0;margin-right:10px;flex-shrink:0}@media (max-width:600px){.colors{grid-template-columns:repeat(2,1fr)}.color-item span{font-size:13px}.color-item{padding-right:0}.color-box{margin-right:5px}}.color-selection h3{font-size:24px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.selected-color-box.spin{animation:spin 1s ease-in-out}.fade-enter-active,.fade-leave-active{transition:opacity 2.5s,max-height 1.5s ease-in-out;overflow:hidden}.fade-enter,.fade-leave-to{opacity:0;max-height:0}.wrap_calc_inp{padding-left:5px;padding-right:10px}@keyframes loadingAnimation-76c707ff{0%{background-position:100% 50%}to{background-position:0 50%}}.loading[data-v-76c707ff]{background:linear-gradient(90deg,#828989,#f8f8f8,#828989);background-size:200% 100%;animation:loadingAnimation-76c707ff 1.5s infinite}.layout-selection[data-v-76c707ff]{margin-bottom:10px;width:600px}textarea[data-v-76c707ff]{height:150px}input[type=number][data-v-76c707ff],textarea[data-v-76c707ff]{width:100%;margin-top:10px}@media (max-width:600px){.layout-selection[data-v-76c707ff]{max-width:350px}}.main-container[data-v-76c707ff]{display:flex;flex-direction:row;align-items:start}.canvas-container[data-v-76c707ff]{flex:1}.thumbnail-slider[data-v-76c707ff]{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:600px;max-width:200px;padding-top:28px;margin-left:50px;padding-right:50px}.thumbnail[data-v-76c707ff]{width:100%;margin-bottom:10px;cursor:pointer;border:2px solid transparent}.thumbnail.selected[data-v-76c707ff]{border-color:#000}.slider-icon-container[data-v-76c707ff]{display:none}@media (max-width:600px){.main-container[data-v-76c707ff]{flex-direction:column}.thumbnail-slider[data-v-76c707ff]{flex-direction:row;width:100%;height:auto;overflow-x:scroll;margin-left:0;margin-right:0;max-width:100%;padding-right:0}.thumbnail[data-v-76c707ff]{height:auto;margin-right:10px}.slider-icon-container[data-v-76c707ff]{display:flex;justify-content:center;margin-top:10px}.scroll-indicator-icon[data-v-76c707ff]{width:32px;height:32px}}@media (max-width:768px){.thumbnail-slider[data-v-76c707ff]{padding-right:5px}}.no-click[data-v-76c707ff]{pointer-events:none}.shimmering[data-v-76c707ff]{animation:shimmer-76c707ff 1.5s infinite;border-color:grey!important}@keyframes shimmer-76c707ff{0%{border-color:grey}50%{border-color:#d3d3d3}to{border-color:grey}}.selected[data-v-76c707ff]:not(.shimmering){border-color:#000}#app{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;margin:0;padding:20px;box-sizing:border-box;height:auto!important}@media (max-width:600px){#app{padding:0}}