/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/Select.vue?vue&type=style&index=0&id=7e7c718c&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select2-selection__rendered .space-formatted {
    padding: 0 !important;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/LoopTab.vue?vue&type=style&index=0&id=673d30fa&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.content-border-bottom[data-v-673d30fa] {
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid var(--warning);
}
.no-templates[data-v-673d30fa] {
    text-align: center;
    font-size: 14px;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/panels/Templates.vue?vue&type=style&index=0&id=ec7b20ee&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* .custom-fs-select .select2-selection__rendered, .custom-fs-select .select2-results__options {
    font-size: 12px !important;
} */


/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/ColorPicker.vue?vue&type=style&index=0&id=58bfebfa&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.transparent[data-v-58bfebfa] {
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        cursor: pointer;
}
.transparent[data-v-58bfebfa]::after {
        content: "";
        width: 36px;
        transform: rotate(45deg);
        height: 3px;
        background: red;
        display: block;
        position: absolute;
        left: 0px;
        top: 16px;
}
.no-color[data-v-58bfebfa] {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        font-size: 50px;
        border-radius: 10px;
        overflow: hidden;
        pointer-events: none;
        background: #fff;
}
.no-color[data-v-58bfebfa]::after {
        width: 50px;
        height: 2px;
        background: #f00;
        content: "";
        transform: rotate(-45deg);
}
.color-picker[data-v-58bfebfa] {
        cursor: pointer;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/TextCheckbox.vue?vue&type=style&index=0&id=7241dbce&scoped=true&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.settings-checkbox[data-v-7241dbce] {
        margin-right: 10px;
        cursor: pointer;
}
.settings-checkbox svg[data-v-7241dbce] {
        width: 17px;
        height: 17px;
        fill: #fff;
        transform: rotate(90deg);
}
.settings-checkbox.active svg[data-v-7241dbce] {
        fill: '#FF5C00'
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Workspace.vue?vue&type=style&index=0&id=38d89215&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.workspace__body[data-v-38d89215] {
        justify-content: center;
        align-items: center;
        display: flex;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Workspace.vue?vue&type=style&index=1&id=38d89215&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.logo-editor-mode .canvas-container {
        border-radius: 50%;
        overflow: hidden;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/properties-panels/BasePanel.vue?vue&type=style&index=0&id=c763d126&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.tools-panel-mini[data-v-c763d126] {
        transition: none;
}
.tools-panel-mini__heading[data-v-c763d126] {
        cursor: grab;
        cursor: -webkit-grab;
}
.tools-panel-mini__heading.dragging[data-v-c763d126] {
        cursor:         grabbing;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/LayersList.vue?vue&type=style&index=0&id=22dc363e&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.l-layer-item[data-v-22dc363e] {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px;
        background-color: #0d1218;
        color: var(--secondary);
}
.l-layer-item[data-v-22dc363e]:hover, .l-layer-item.active[data-v-22dc363e] {
        background-color: #141A20;
        color: #E8EEF4;
}
.l-content[data-v-22dc363e] {
        display: flex;
        align-items: center;
}
.l-content .icon[data-v-22dc363e] {
        margin-right: 10px;
        width: 28px;
        height: 28px;
}
.l-content .icon img[data-v-22dc363e] {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
}
.l-controls[data-v-22dc363e] {
        display: flex;
}
.l-btn[data-v-22dc363e] {
        width: 18px;
        height: 18px;
        margin-right: 10px;
}
.l-btn[data-v-22dc363e]:last-child {
        margin-right: 0;
}
.l-hover[data-v-22dc363e] {
        opacity: 0;
        pointer-events: none;
}
.l-layer-item:hover .l-hover[data-v-22dc363e] {
        opacity: 1;
        pointer-events: auto;
}
.l-content .icon[data-v-22dc363e] {
        justify-content: center;
        align-items: center;
        display: flex;
}
.l-content .icon svg[data-v-22dc363e] {
        width: 28px;
        height: 28px;
}
.l-title[data-v-22dc363e] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 140px;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/LayerPropertiesRight.vue?vue&type=style&index=0&id=37553348&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.layer-properties-right[data-v-37553348] {
        position: absolute;
        width: 250px;
        right: 18px;
        background-color: #0D1218;
        left: auto;
        top: auto;
        bottom: 60px;
        height: calc(100% - 54px - 20px);
        display: block;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/popups/BasePopup.vue?vue&type=style&index=0&id=889a57fa&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.popup[data-v-889a57fa] {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        -webkit-backdrop-filter: blur(5px);
                backdrop-filter: blur(5px);
        z-index: 100;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
}
.popup-body[data-v-889a57fa] {
        margin: 0 5px;
        width: 1200px;
        min-width: 480px;
        height: 734px;
        min-height: 300px;
        background-color: #000000;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
}
.popup-header[data-v-889a57fa] {
        background-color: #141A20;
        height: 42px;
        font-size: 12px;
        color: #E8EEF4;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 20px;
}
.popup-content[data-v-889a57fa] {
        padding: 0 10px;
        flex: 1;
        overflow: hidden;
}
.p-title[data-v-889a57fa] {
        text-transform: uppercase;
        font-weight: bold;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/modules/vue-stack-grid/src/Stack.vue?vue&type=style&index=0&id=6ff69621&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.vsg-container[data-v-6ff69621] {
    display: block;
    position: relative;
    width: 100%;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/modules/vue-stack-grid/src/StackItem.vue?vue&type=style&index=0&id=38b9c754&scoped=true&lang=css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.vsg-stack-item[data-v-38b9c754] {
		position: absolute;
		top: 0;
		left: 0;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/popups/StockImagesPopup.vue?vue&type=style&index=0&id=552f0f26&scoped=true&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.unsplash-sub[data-v-552f0f26] {
       color: #777E84;
       font-size: 14px;
}
.unsplash-sub a[data-v-552f0f26] {
        color: #FF5C00;
}
.unsplash-content[data-v-552f0f26] {
        display: flex;
        flex-direction: column;
        height: calc(100%);
}
.unsplash-content .unsplash-images[data-v-552f0f26] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
}
.unsplash-images[data-v-552f0f26] {
        text-align: center;
        padding-top: 1px;
}
.unsplash-images img[data-v-552f0f26] {
        cursor: pointer;
}
.unsplash-images img[data-v-552f0f26]:hover {
        outline: 1px solid #FF5C00;
}
.unsplash-images img.disabled[data-v-552f0f26] {
        outline: 1px solid #0888c1;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/

.disabled {
        opacity: .4;
        pointer-events: none;
        cursor: default;
}
.tools-panel-image-preview img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: 100%;
}
.graphics .tools-panel-image-preview img {
        padding: 10px;
}
.pointer {
        cursor: pointer;
}
.delete-item-card {
        position: absolute;
        right: 8px;
        top: 8px;
        display: none;
        width: 18px;
        height: 18px;
        cursor: pointer;
}
.card-image-panel {
        cursor: pointer;
        position: relative;
        overflow: hidden;
}
.cover-background {
        position: absolute;
        left: 2px;
        top: 0;
        width: calc(100% - 4px);
        height: 100%;
        pointer-events: none;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        transition: .2s;
        border-radius: 12px;
        border: 1px solid transparent;
}
.card-image-panel:hover .delete-item-card {
        display: block;
}
.card-image-panel:hover .cover-background {
        opacity: 1;
        transition: .2s;
}
.workspace__footer-actions .btn.active {
        color: var(--defaultTextColor);
        background-color: #141A20;
}
.workspace__footer {
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
}
.workspace__body .canvas-container {
        /* border: 1px solid #1A222B; */
        background: #ffffff;
}