/*place global styles here */
html,
body {
    @apply h-full;
}
body {
    background-color: #FFF !important;
}

.color-picker .wrapper {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    z-index: 999 !important;
}

.color-picker .slider-indicator {
    width: 21px !important;
    height: 15px !important;
    border-color: #aaa8a8 !important;
}

.color-picker .picker .picker-indicator {
    width: 25px !important;
    height: 25px !important;<
    border-radius: 50px !important;
}

.color-picker label {
    width: 36px !important;
    overflow: hidden !important;
    height: 36px !important;
    margin: 1px 0 0 3px !important;
}

.color-picker label .color {
    border: 2px solid #e5e7eb !important;
    -webkit-box-shadow: inset 0px 0px 0px 2px #FFFFFF !important;
    box-shadow: inset 0px 0px 0px 2px #FFFFFF !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 99px !important;
    margin-left: 4px !important;
}

.snackbar-wrapper {
    align-items: flex-start !important;
}

.container {
    max-width: 100% !important;
}

@media (min-width: 712px) {
    .container {
        max-width: 712px !important;
    }
}
@media (min-width: 940px) {
    .container {
        max-width: 940px !important;
    }
}
@media (min-width: 1120px) {
    .container {
        max-width: 1120px !important;
    }
}
@media (min-width: 1350px) {
    .container {
        max-width: 1350px !important;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px !important;
    }
}

@font-face {
    font-family: 'icomoon';
    src:  url('/icons/icomoon.eot?i9u2rm');
    src:  url('/icons/icomoon.eot?i9u2rm#iefix') format('embedded-opentype'),
    url('/icons/icomoon.ttf?i9u2rm') format('truetype'),
    url('/icons/icomoon.woff?i9u2rm') format('woff'),
    url('/icons/icomoon.svg?i9u2rm#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}





.icon-save:before {
    content: "\e902";
}
.icon-mirror:before {
    content: "\e900";
}
.icon-expand_left:before {
    content: "\e903";
}
.icon-expand_right:before {
    content: "\e906";
}
.icon-expand_more:before {
    content: "\e901";
}
.icon-new_tab:before {
    content: "\e904";
}
.icon-pencil:before {
    content: "\e905";
}
.icon-image:before {
    content: "\e90d";
}
.icon-layers:before {
    content: "\e92e";
}
.icon-basket:before {
    content: "\e93a";
}
.icon-upload:before {
    content: "\e95f";
}
.icon-back:before {
    content: "\e967";
}
.icon-search:before {
    content: "\e986";
}
.icon-lock:before {
    content: "\e98f";
}
.icon-unlocked:before {
    content: "\e990";
}
.icon-magic-wand:before {
    content: "\e997";
}
.icon-bin:before {
    content: "\e9ac";
}
.icon-cross:before {
    content: "\ea0f";
}
.icon-check:before {
    content: "\ea10";
}
.icon-arrow-up:before {
    content: "\ea3a";
}
.icon-arrow-down:before {
    content: "\ea3e";
}
.icon-crop:before {
    content: "\ea57";
}
.icon-text:before {
    content: "\ea6d";
}


.designer-preview:hover .designer-movable-wrapper .target{
    opacity: 0.9;
}

.overflow-hidden {
    overflow: hidden;
}
.rounded-full {
    border-radius: 9999px;
}
.animate-spin {
    animation: spin 1s linear infinite;
}
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}
.stroke-surface-500\/30 {
    stroke: rgb(122 122 122 / 0.3);
}
.duration-200 {
    transition-duration: 200ms;
}
.transition-\[stroke-dashoffset\] {
    transition-property: stroke-dashoffset;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.shadow-swatch-inner {
    -webkit-box-shadow: inset 0px 0px 0px 2px #FFFFFF;
    box-shadow: inset 0px 0px 0px 2px #FFFFFF;
}

.tooltip {
    position: static;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    margin-left: -60px;
    margin-top: 40px;
    z-index: 99;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
    z-index: 99;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}