@import "../fonts/helveticarounded/style.css";
@import "../fonts/arialroundedmt/styles.css";
@import "../fonts/zhunyuan/styles.css";

body {
    overflow-x: hidden;
    font-family: "Arial Rounded MT";
}

p {
    line-height: 1.75;
}

a {
    color: #808080;
    font-family: "Helvetica";
}

a:hover {
    color: #808080;
}

.btn:hover {
    filter: brightness(70%);
}

select.font_size,
select.font_type {
    -webkit-appearance: none;
    appearance: none;
}

.photo-sticker {
    background-color: rgb(86, 79, 79);
}

.photo-sticker a:not(:last-child) {
    border-radius: unset;
}

.photo-sticker a.nav-item,
#myfiles a.nav-item {
    color: white;
}

.photo-sticker a.active {
    color: rgb(125, 218, 215) !important;
    background-color: #756c6c !important;
    border-bottom: 2px solid #59d9d4;
}

.cover {
    position: relative;
    z-index: 100000;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.btn-font-color {
    position: relative;
}

.color-line {
    position: absolute;
    width: 16px;
    height: 3px;
    background-color: black;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 20px;
}

.canvas-form .w-90 {
    width: 90%;
}

.canvas-form .form-check-label {
    vertical-align: -webkit-baseline-middle;
}

.canvas-form .form-check {
    margin-top: 2px;
    margin-bottom: 2px;
}

.context-menu-icon i,
.context-menu-icon::before {
    color: rgb(91, 193, 205) !important;
}

.white-text {
    color: white !important;
}

#customSize .custom-close {
    color: white;
}

.btn-default {
    border-radius: 20px;
    border-color: transparent;
    border: thin;
    font-size: 0.8rem;
}

.btn-default:focus {
    outline: none;
    box-shadow: none;
}

.coming-soon {
    z-index: 100000;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: rgb(252, 209, 64);
    background-color: darkgray;
}

.coming-soon-label {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgb(252, 209, 64);
    transform: translate(-50%, -50%);
    z-index: 9999999999;
}

.right-click-shortcut {
    color: lightgray;
    float: right;
}

.text-primary {
    color: #fed136 !important;
    color: #59d9d4 !important;
}

.btn-add-page {
    background-color: #9d9193;
    border-radius: 8px;
}

.container-btn-add-page {
    max-width: 174px;
}

.sp-dd {
    display: none;
}

#button .sp-replacer,
#form .sp-replacer {
    width: 35px;
    height: 35px;
    border-radius: 50px;
}

.confirm-change-modal-dialog .modal-header,
.confirm-change-modal-dialog .modal-body,
.confirm-change-modal-dialog .modal-footer {
    /* width: 400px; */
    margin: 1.2em;
}

.confirm-change-modal-dialog h4 {
    font-weight: 700;
    font-family: "Helvetica";
    color: #564f4f;
}

.modal-content-p {
    font-family: "Arial Rounded MT";
    font-size: 16px;
}

.btn-stive-border {
    background: #ffffff;
    border-radius: 50px;
    line-height: 25px;
    color: #000000;
    padding: 10px 30px;
    min-width: 200px;
    border: 1px solid black !important;
}

.btn-stive-color {
    background: #00c8ce;
    border-radius: 50px;
    line-height: 25px;
    color: white;
}

.btn-medium-light-stive {
    background: #59d9d4;
    color: white;
}

.btn-light-stive {
    background: #56d0d8 !important;
    color: white !important;
}

.white-bg.form-control:disabled,
.form-control[readonly] {
    background-color: white;
}

#component-button-border-radius {
    font-size: 0.8rem;
    padding-right: 5px;
    border-radius: 50px;
    border-right: none;
}

.px-border {
    font-size: 0.8rem;
    background: white !important;
    padding: 0px;
    border-radius: 50px;
    padding-left: 5px;
    border-left: none;
}

.button-font-style select,
.button-font-style select:focus,
.button-font-style button {
    background-color: transparent;
    border: lightgray solid 1px;
    color: white;
    font-size: 0.8rem;
}

.button-border-none {
    border: none !important;
}

.button-border-none:focus {
    outline: 0;
    box-shadow: none;
}

.button-show-more {
    border: none !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
}

#checkout-pricing-menu p,
#checkout-pricing-menu label,
#checkout-pricing-menu .package {
    color: #564f4f;
    font-family: "Helvetica";
}

#checkout-modal p,
#checkout-modal label,
#checkout-modal .package {
    color: #564f4f;
    font-family: "Helvetica";
}

.button-font-style button.active {
    background-color: lightgray;
    color: black;
}

.button-font-style select option {
    color: black;
}

#music .status {
    pointer-events: none;
}

#music .select-music.row:hover {
    opacity: 0.5;
}

.musicModal .editor-default-blue {
    border-top-left-radius: 1.3rem;
    border-top-right-radius: 1.3rem;
    height: 220px;
}

.musicModal #description {
    font-size: 9px;
    word-wrap: break-word;
}

.musicModal .round-btn {
    top: 0;
    right: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
}

.musicModal .second-content {
    color: black;
    background: white;
    border-bottom-left-radius: 1.3rem;
    border-bottom-right-radius: 1.3rem;
}

.musicModal .modal-content {
    width: 573px;
    height: 464px;
}

.music-button {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: right;
    z-index: 9999;
}

.music-button .custom i {
    font-size: 2rem;
    padding: 10px;
}

.fas.fa-music.slash:after {
    position: absolute;
    content: "/";
    color: #212529;
    font-weight: 700;
    font-size: 4rem;
    left: 34px;
    top: 4px;
    transform: rotate(109deg);
}

.musicModal .custom-add {
    background-color: rgb(125, 218, 215);
    transform: translate(150%, 0%);
}

#music .card:hover {
    filter: brightness(70%);
}

.loading-button-img {
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.custom-save {
    background-color: white;
    transform: translate(150%, 120%);
}

.custom-share {
    background-color: white;
    transform: translate(150%, 240%);
}

.custom-add i {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translate(45%, 20%);
}

.custom-save i {
    position: absolute;
    transform: translate(61%, 20%);
    top: 0;
    bottom: 0;
}

.custom-share i {
    position: absolute;
    transform: translate(77%, 20%);
    top: 0;
    bottom: 0;
}

.music-container {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

.white-ring {
    position: absolute;
    top: 9%;
    left: 0;
}

.white-ring.spin {
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.music-container .btn {
    position: absolute;
    background-color: transparent;
    color: white;
    font-size: 16px;
    padding: 16px 30px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-family: "Helvetica";
}

button:focus {
    outline: 0;
}

.bookmark {
    color: rgb(252, 209, 64);
}

.bold p {
    font-weight: bolder;
}

[type="file"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    white-space: nowrap;
    width: 1px;
}

input[type="radio"] {
    margin-right: 0.3rem;
}

[type="file"] + label {
    font-family: "Helvetica";
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

li .component i {
    font-size: 60px;
}

.component p {
    margin: unset;
}

a.component {
    padding: 10%;
}

.component-height {
    border: none;
    position: relative;
}

.component-height:before {
    content: "";
    display: block;
    padding-top: 100%;
    /* initial ratio of 1:1*/
}

li.component-height .component i {
    /* font-size: 2.5rem; */
}

.component-btn {
    opacity: 0.5;
}

.component-btn.clicked {
    opacity: 1;
}

/* .tab-pane.component, */
.nav-link.component {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    transform: translate(-50%, -50%);
}

.shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.editor-button {
    border-radius: 20px;
    width: 100%;
    border-color: transparent !important;
    border: thin;
    height: calc(1.5em + 0.75rem + 6px);
    font-size: 0.8rem;
    border: 1px solid #59d9d4;
}

.editor-button1 {
    border: solid white 2px;
    color: white;
    margin-right: 10px;
    margin-top: unset;
}

.editor-button2 {
    border: solid white 2px;
    background-color: white;
    color: black !important;
    margin-right: 10px;
    margin-top: unset;
}

.download {
    padding: unset;
    border-bottom: 3px solid white;
}

.scrollbar {
    overflow-y: scroll;
}

#component .scrollbar.editor-popup-box {
    /* height: 430px !important; */
    overflow-y: scroll;
}

.scrollbar.style1::-webkit-scrollbar-track {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.scrollbar.style1::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.scrollbar.style1::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #808080;
}

.done-button {
    background-color: #59d9d4;
    color: white;
}

.remove-button {
    background-color: rgb(240, 128, 128);
}

.download-button {
    color: white !important;
    background-color: #59d9d4;
    width: 240px;
}

.font-blue {
    color: rgb(125, 218, 215);
}

.font-grey {
    color: lightgrey !important;
}

.icon {
    font-size: 20px;
}

.side-component-data .artist-custom-card .delete .icon,
.side-component-image .artist-custom-card .delete .icon {
    background: black;
    padding: 5px;
    width: 25px;
    text-align: center;
    height: 25px;
    border-radius: 50%;
    font-size: 15px;
}

.artist-phone-content {
    top: calc(50% + 5px);
    /*25 -> 5*/
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    display: none;
}

.parent {
    /* flex: 1;
    display: flex;
    margin: auto;
    max-width: fit-content; */
}

#editor-canvas {
    /* margin-top: 50px; */
}

.editor-main-container {
    /* padding: 0px 10px 0px 200px!important; */
}
.play-all-animation {
    border-radius: 50%;
    position: absolute;
    box-shadow: 4px 17px 20px #47404038;
    bottom: 3.5%;
    left: 46%;
    background: white;
    z-index: 1000;
    color: rgb(104, 95, 95);
}
.play-all-animation i {
    padding: 10px 10px 10px 12px;
}

.noselect {
    /* -webkit-touch-callout: none; */
    /* iOS Safari */
    /* -webkit-user-select: none; */
    /* Safari */
    /* -khtml-user-select: none; */
    /* Konqueror HTML */
    /* -moz-user-select: none; */
    /* Old versions of Firefox */
    /* -ms-user-select: none; */
    /* Internet Explorer/Edge */
    /* user-select: none; */
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
.nav-link.animation {
    border: 1.5px solid #5bc2cd00;
}
.nav-link.animation.active-animation {
    border: 1.5px solid #5bc1cd;
}

.zoom-percentage-option {
    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: 1000;
    text-align: center;
}

.zoom-in-out {
    position: absolute;
    bottom: 3%;
    left: 50%;
    background-color: white;
    border: 1px solid #47404038;
    border-radius: 40px;
    padding: 5px 0px;
    color: rgb(104, 95, 95);
    font-size: 18px;
    box-shadow: 4px 17px 20px #47404038;
    z-index: 1000;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .zoom-in-out {
        top: 10%;
        bottom: unset;
        left: unset;
        right: 3%;
    }
}

.zoom-in-out .zoom-out {
    padding: 0px 10px 0px 15px;
}

.zoom-in-out .zoom-percentage {
    padding: 0px 10px;
    line-height: 0.8;
}

.zoom-in-out .zoom-in {
    padding: 0px 15px 0px 10px;
}

.zoom-percentage * {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.zoom-percentage {
    display: inline-block;
}
.zoom-percentage a {
    display: block;
    text-decoration: none;
}

.zoom-percentage ul li ul li {
    border: none;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
}

.zoom-percentage ul li ul li a {
    font-family: "Arial Rounded MT";
    font-weight: 400;
    padding: 10px 20px;
}

.zoom-percentage li {
    position: relative;
    /* float:left; */
}

.zoom-percentage ul li ul,
.zoom-percentage.active ul li ul,
.zoom-percentage.active ul li ul li ul {
    display: none;
    list-style-type: none;
}

.zoom-percentage.active ul,
.zoom-percentage.active ul li ul,
.zoom-percentage.active ul li ul li ul {
    display: block;
}

.zoom-percentage.active ul li ul li ul {
    position: absolute;
    font: 10px;
}

.zoom-percentage-top-border {
    border-top: 1px solid rgb(104 95 95 / 26%) !important;
}
.zoom-percentage.active ul li ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
    left: -60%;
    margin-bottom: 15px;
    background: white;
    text-align: center;
    border-radius: 15px;
    border: 1px solid rgb(104 95 95 / 26%);
}

.width-100 {
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

.artist-phone-content.active {
    display: block;
}

.artist-artwork-design {
    border: 1px solid grey;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -50;
    width: 214px;
    height: 380px;
    /* margin: 50px; */
}

.translate-canva {
    transform: translate(50%, 50%);
}

/* .artist-phone-content:after{
    content: url('../images/logo.svg');
    left: 0;
    right: 0;
    position: absolute;
    align-self: center;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: .5;
} */

/* .carousel-inner .carousel-item {
    height: 150px;
} */

.page-summary {
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}

.page-summary.selected {
    background-color: rgb(104, 95, 95) !important;
}

.page-summary:hover {
    background-color: rgb(104, 95, 95);
}

/* Editor */

.editor-default-blue {
    background-image: linear-gradient(
        to right,
        rgb(91, 193, 205),
        rgb(98, 199, 207),
        rgb(125, 218, 215)
    );
}

.editor-default-grey {
    background-color: #44403f;
}

.editor-default-grey-right {
    background-color: rgb(86, 79, 79);
}

.selected-grey,
.editor-selected-grey {
    background-color: rgb(104, 95, 95);
}

.editor-white {
    background-color: white;
}

.sort {
    cursor: pointer;
}

.search-text {
    color: inherit;
    font-family: inherit;
    text-decoration: none;
}

.search-text:hover {
    color: inherit;
    font-family: inherit;
    text-decoration: none;
}

.editor-blue {
    background-color: rgb(68, 100, 239);
}

.editor-border-radius {
    border-radius: 10px;
}

.ai-output--wrap{
    white-space: pre-wrap;
}

.ai--icon{
    width: 10%;
    margin-right: 4px;
}

.ai--title{
    font-size: 14px;
    margin-bottom: 0;
}

.editor-icon {
    padding: 10px;
    text-align: center;
    color: white;
    line-height: 1.5rem;
    vertical-align: middle;
    font-size: 1.5rem;
}

.editor-icon-svg {
    width: 48px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

.upload-img-icon-svg {
    width: 20px;
    transform: translate(0px, -3px);
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

.editor-icon-svg:hover {
    filter: invert(53%) sepia(0%) saturate(119%) hue-rotate(181deg)
        brightness(95%) contrast(80%);
}

.carousel-button {
    position: relative;
    padding: 8px;
    background: white;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    font-size: 17px;
    left: -15%;
    top: 15%;
    color: white;
}

.carousel-icon-svg {
    width: 20px;
    filter: invert(37%) sepia(0%) saturate(1085%) hue-rotate(141deg)
        brightness(106%) contrast(86%);
}

.page-summary-icon-svg {
    color: white;
    display: inline-block;
    width: 40%;
    color: white;
    transform: translate(13px, -2px);
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

.add-icon-float-svg {
    width: 15px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

i.page-summary-add-page-svg,
i.page-summary-delete-svg {
    width: 20px;
    transform: translate(5px, 3px);
}

i.page-summary-add-page-svg:before {
    content: url("../images/artist-editor/Add\ Page-01.svg");
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

i.page-summary-delete-svg:before {
    content: url("../images/artist-editor/Delete-01.svg");
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

i.dropdown-icon-svg:before {
    content: url("../images/artist-editor/Dropdown-01.svg");
}

i.checkbox-icon-svg:before {
    content: url("../images/artist-editor/Checkbox-01.svg");
}

i.radio-icon-svg:before {
    content: url("../images/artist-editor/Multiple Choice-01.svg");
}

i.comment-icon-svg:before {
    content: url("../images/artist-editor/Comment Box-01.svg");
}

.small-text {
    font-size: 0.8rem;
}

.editor-top-nav {
    min-height: 56px;
    color: white;
}

/* min-height: 56px;
    color: white;
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    justify-content: center;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 50px;
    padding: auto;
    height: 100%;
    padding-top: 5px;
    vertical-align: middle; */
.editor-icon-side {
    padding: 10px 15px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.5rem;
    color: white;
    width: 55px;
}

/* .editor-icon-side.active {
    filter: invert(63%) sepia(99%) saturate(301%) hue-rotate(130deg) brightness(87%) contrast(90%);
} */

ul.desktop-sidebar {
    background-color: rgb(104, 95, 95);
}

ul.desktop-sidebar li a.nav-link {
    background-color: #44403f;
    min-width: 75px;
}

.mobile-sidebar {
    width: 75px;
}

.border-bottom-right-radius {
    border-bottom-right-radius: 8px !important;
}

.border-top-right-radius {
    border-top-right-radius: 8px !important;
}

@media only screen and (max-width: 768px) {
    .editor-icon-side {
        padding: 10px 0px;
    }

    .container-btn-add-page {
        max-width: 125px;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-sidebar {
        width: 100%;
    }

    .mobile-sidebar li.nav-item.editor-side-item {
        padding: 0 7.5px;
    }
}

.editor-side-item {
    font-size: 0.6rem;
    text-align: center;
    border-radius: unset;
}

.editor-side-item:hover {
    background-color: rgb(104, 95, 95);
}

.editor-side-item a {
    color: white;
}

.editor-side-item a.active {
    background-color: rgb(104, 95, 95) !important;
    border-radius: unset !important;
}

.editor-side-item.editor-side-filter img {
    /* padding: .25rem .5rem; */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
        brightness(103%) contrast(103%);
}

.editor-side-item.editor-side-filter a.active img {
    /* filter: invert(88%) sepia(25%) saturate(600%) hue-rotate(119deg) brightness(89%) contrast(91%); */
    filter: invert(76%) sepia(30%) saturate(4582%) hue-rotate(127deg)
        brightness(96%) contrast(101%);
}

.editor-nav-top {
    padding: 0.5rem 1rem;
}

.premium-border {
    position: relative;
    border: solid rgb(252, 209, 64) 1px;
    border-radius: 10px;
}

.premium-icon {
    position: absolute;
    top: -25%;
    right: -20%;
}

.nav-link {
    padding-right: unset !important;
    padding-left: unset !important;
}

.nav-link.left-right-padding {
    padding: 10px !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: rgb(0, 221, 213);
    background-color: rgb(104, 95, 95);
    border-color: unset;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.yellow.active {
    color: rgb(252, 209, 64);
    background-color: rgb(104, 95, 95);
    border-color: unset;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active i {
    color: rgb(125, 218, 215);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.yellow.active i {
    color: rgb(252, 209, 64);
}

.nav-link.yellow {
    color: rgb(252, 209, 64);
}

.nav-link.yellow i {
    color: rgb(252, 209, 64);
}

.nav-tabs .nav-link {
    border: unset;
    border-radius: unset;
}

.nav-tabs {
    border-bottom: none;
}

.tab-content {
    color: white;
}

.editor-header {
    text-align: center;
}

.editor-header-icon {
    padding: 10px;
}

a:hover {
    cursor: pointer;
}

/* Hide Drop down Arrow */
select::-ms-expand {
    display: none;
}

.dropdown-item.active,
.dropdown-item:active {
    color: black;
    text-decoration: none;
    background-color: rgb(125, 218, 215);
}

.artist-editor-dropdown {
    border-radius: 10px;
    min-width: 20%;
}

.editor-custom-search {
    border-radius: 20px !important;
}

.input-group .editor-custom-search {
    border-radius: 20px;
    border-right: none;
}

.input-group-text.editor-video-search-icon.youtube,
.input-group-text.editor-video-search-icon.google-map,
.input-group-text.editor-video-search-icon.headline {
    border-radius: 20px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    position: absolute;
    right: 0;
    background: transparent;
    top: 30%;
    border: none;
    z-index: 100;
}

#music .editor-custom-search,
#template .editor-custom-search,
#upload .editor-custom-search,
#image .editor-custom-search,
.has-search .form-control {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.input-group .editor-video-search-icon {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: white;
    padding: 0 0.75rem;
    cursor: pointer;
}

#preloaded_stickers_container {
    min-height: 80px;
}

@media only screen and (min-width: 991px) {
    .search-container-fixed {
        /* position: fixed;
        width: 250px;
        z-index: 10;
        top: 80px; */
    }

    .search-container-fixed.music {
        /* width: 230px;
        margin-top: 0px !important;
        padding-top: 1rem !important; */
    }

    .search-container-fixed.video {
        /* width: 230px;
        padding-top: 1rem; */
    }

    .search-container-fixed.self-upload {
        /* width: 230px; */
    }

    .search-container-fixed.photo-menu {
        /* top: 210px;
        width: 220px; */
    }

    .search-container-fixed.photo-library-sticker,
    .search-container-fixed.photo-library {
        /* top: 260px; */
    }

    #preloaded_images_container {
        /* margin-top: 260px !important; */
    }

    #preloaded_stickers_container {
        /* margin-top: 260px !important; */
    }
}

#music .editor-custom-search,
#template .editor-custom-search,
#upload .editor-custom-search,
#image .editor-custom-search {
    /* padding-left: 38px; */
}

#upload hr {
    border-top: 1.5px solid #9d9193 !important;
}

#upload .create-carousel-button,
#image .create-carousel-button {
    display: none;

    position: sticky;
    bottom: 1%;
}

.image-search-container {
    position: sticky;
    top: 0;
}

.search-container-fixed {
    position: sticky;
    top: 0;
    z-index: 1000;
}

#upload .create-carousel-button.active,
#image .create-carousel-button.active {
    display: block;
}

.input-group-append .custom-select.editor-custom-search {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.has-search .form-control {
    /* padding-left: 2.375rem; */
    padding-left: 1rem;
    padding-right: 2.5rem;
}

.form-content .el-del-btn {
    margin-top: 0.3rem;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    font-size: 0.6rem;
    padding: 0;
    color: white;
    background-color: red;
    border-color: red;
}

.form-content .op-del-btn {
    height: 1rem;
    width: 1rem;
    font-size: 0.8rem;
    padding: 0;
    color: #565252;
    position: absolute;
    right: 6px;
    top: 22%;
    font-weight: 700;
}

.canvas-form .form_content label {
    margin-bottom: unset;
}

.answer-el .has-search {
    position: relative;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.editor-custom-card {
    /* height: 250px; */
    min-height: 50px;
    position: relative;
    border-radius: 5px;
    margin: unset;
    padding: unset;
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        to bottom,
        grey,
        lightgrey,
        white,
        lightgrey,
        grey
    );
}

.editor-custom-card.active {
    opacity: 0.5;
    background-image: url("../images/template1.png");
    background-repeat: no-repeat;
}

.float-icon {
    position: absolute;
    display: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.float-icon img {
    vertical-align: unset;
}

.float-icon.paid-artwork {
    top: 0.5rem;
    left: 0rem;
    padding: 5px;
    display: block;
    background-color: white;
    border: solid 0.5px lightgray;
}

.float-icon.user-subscribed-artwork{
    top: 0.5rem;
    left: 2rem;
    padding: 5px;
    display: block;
    background-color: white;
    border: solid 0.5px lightgray;
}


.float-icon.special-icon {
    top: 0.5rem;
    left: 2.5rem;
    display: block;
}

.float-icon.see-more {
    top: 0.1rem;
    padding: 2px;
    right: 0.6rem;
}

.float-icon.see-more a:hover img,
.float-icon.see-more a.active img {
    filter: invert(76%) sepia(100%) saturate(290%) hue-rotate(125deg)
        brightness(89%) contrast(87%);
}

.editor-custom-card:hover .float-icon,
.float-icon.see-more.show,
.artist-custom-card:hover .float-icon {
    display: block;
}

.item-container:hover .float-icon {
    display: block;
}

.sticker-grid .float-icon.paid-artwork {
    left: -2%;
}

.images-grid .float-icon.paid-artwork {
    left: 2%;
}

.artist-custom-card.select_photo:hover .float-icon {
    display: block;
}

.editor-phone {
    /* height: 600px;
    width: 700px; */
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* padding: 100px; */
    /* position: relative; */
    /* Position fixed is added because it will affect the text properties box */
}

.editor-font-grey {
    color: rgb(86, 79, 79);
}

div.scroll-menu {
    overflow: auto;
    white-space: nowrap;
}

.scroll-menu a,
.music-category a {
    display: inline-block;
    text-align: center;
    padding: 5px;
    text-decoration: none;
    color: white !important;
}

.selection a:hover {
    background-color: rgb(86, 79, 79);
}

.card-height {
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card-height:hover,
.card-height.active {
    opacity: 0.8;
}

/* .animation-pack-container .editor-popup-box {
    background: unset;
    border-radius: 0;
} */
.editor-popup-box {
    background: rgb(114, 105, 105);
    border-radius: 10px;
    width: 100%;
    z-index: 1;
}

.editor-popup-container {
    position: relative;
    /* height: 700px; */
}

.editor-color-choice {
    border: none;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    border-radius: 20px;
    width: 160px;
}

.editor-close-button,
.animation-close {
    background: transparent;
    outline: unset;
    border: unset;
    color: white;
}

button.editor-close-button.button-back:hover,
button.animation-close.button-back:hover {
    opacity: 0.6;
}

.hover-effect:hover {
    opacity: 0.7;
}

.hover-effect-invert {
    opacity: 0.7;
}

.hover-effect-invert:hover {
    opacity: 1;
}

.artist-form input {
    padding-left: 2.375rem;
    padding-right: 2.375rem;
}

.artist-form select {
    padding-left: 2.375rem;
    padding-right: 2.375rem;
}

.artist-custom-card {
    position: relative;
    border-radius: 5px;
    margin: unset;
    padding: unset;
    background-size: contain !important;
    background: no-repeat;
    background-position: center;
    text-align: center;
}

.artist-custom-card.select_carousel {
    text-align: left;
}

.artist-custom-card.select_carousel [data-count]:after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: attr(data-count);
    font-size: 70%;
    padding: 0.6em;
    border-radius: 50%;
    line-height: 0.8em;
    color: white;
    text-align: center;
    min-width: 1em;
    font-weight: bold;
    transform: translate(-50%, -50%);
    font-family: "Helvetica";
}

.artist-custom-card .check {
    font-size: 1.5rem;
    color: rgb(125, 218, 215);
    position: absolute;
    top: 5px;
    left: 5px;
}

.canvas-button a {
    border-radius: 20px;
    padding: 0.5rem;
    outline: unset;
    border: unset;
    text-decoration: none;
    color: white;
    width: 100%;
    position: relative;
}

.canvas-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    display: block;
    overflow-wrap: unset !important;
}

.canvas-locator img {
    color: red;
    width: 100%;
}

.center {
    line-height: 233px;
}

.center span {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

/* .artist-custom-card:hover {
    opacity: 0.8;
} */

/* .artist-custom-card.active {
    opacity: 0.5;
} */

.button-color.active {
    border: solid 2px white;
}

/* Multi Select */
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: rgb(98, 199, 207) !important;
    border: 1px solid white !important;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (max-width: 768px) {
        .editor-icon {
            font-size: 1.2rem;
        }

        .nav-link {
            padding: 5px;
        }

        .editor-icon-side {
            padding: 10px;
            text-align: left;
            vertical-align: middle;
            font-size: 1.2rem;
            color: white;
        }
    }
}

.editor-container {
    position: fixed;
    width: 100%;
    max-height: 55px;
    border-bottom: 1px solid #bbb;
    font-size: 0.9rem;
    color: black;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    z-index: 99;
    background-color: #f3efee;
}

#tool-properties.editor-container {
    background-color: #ffffff;
}

.editor-container.float .title {
    cursor: move;
}

.editor-container .title {
    position: relative;
    background-color: #eee;
    width: 100%;
    padding: 0.65rem;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 1rem;
}

.editor-container.allow-collapse .title {
    cursor: pointer;
}

.editor-container.allow-close .title,
.editor-container.allow-collapse .title {
    padding-right: 1.85rem;
}

.editor-container.allow-close .title .btn-close {
    content: "\f00d";
    position: absolute;
    padding: 0.65rem;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    font-size: 1rem;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: black;
    line-height: 100%;
    cursor: pointer;
    transition: transform 0.35s, color 0.35s;
}

.editor-container.allow-close .title .btn-close:hover {
    transform: translateY(-50%) rotate(90deg);
    color: #888;
}

.editor-container.allow-collapse .title:after {
    content: "\f0da";
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    font-size: 1rem;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    transition: transform 0.35s;
}

.editor-container.allow-collapse .title[aria-expanded="true"]:after {
    transform: translateY(-50%) rotate(90deg);
}

.editor-container .content {
    padding: 0.65rem;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 0;
    list-style: none;
    font-size: 0.85rem;
    overflow: auto;
}

#editor-layers.content {
    max-height: 16rem;
}

.editor-container .content .row {
    margin: 0;
}

.editor-container .content label {
    font-size: 0.85rem;
}

.editor-container .content > li {
    position: relative;
    background-color: white;
    width: 100%;
    padding: 0.3rem;
    padding-right: 1rem;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin-bottom: 0.2rem;
    /* user-select: none; */
    cursor: pointer;
    transition: background 0.35s, border 0.35s, font-weight 0.35s,
        box-shadow 0.35s;
}

.editor-container .content > li:hover {
    background-color: #f0f0f0;
    border: 1px solid var(--theme-color-secondary);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.editor-container .content > li.active {
    background-color: #f0f0f0;
    border: 2px solid var(--theme-color-secondary);
    font-weight: bold;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.editor-container .content > li:before {
    content: "\f302";
    margin-right: 0.35rem;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
}

.editor-container .content > li.layer-image:before {
    content: "\f093";
}

.editor-container .content > li.layer-text:before {
    content: "\f031";
}

.editor-container .content > li:after {
    content: "\f338";
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-size: 0.9rem;
    font-weight: bold;
}

.editor-container .btn.btn-container {
    background-color: #eee;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(175, 175, 175, 0.5);
    font-size: 1rem;
    color: black;
}

.editor-container .btn.btn-container:hover {
    background-color: #ccc;
    color: black;
}

.round-bold.btn-text-style.btn-bold {
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

.editor-container .btn-text-style.active,
.editor-container .btn-text-align.active {
    background-color: var(--theme-color);
    color: black;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #5a5a5a;
}

.editor-container .btn-text-style.active:hover,
.editor-container .btn-text-align.active:hover {
    background-color: rgba(
        var(--theme-color-r),
        var(--theme-color-g),
        var(--theme-color-b),
        0.7
    );
    /* color: white; */
}

.editor-export .canvas-item,
.canvas .canvas-item {
    position: absolute;
    border: 1.5px dashed transparent !important;
    top: 0;
    left: 0;
    /* user-select: none; */
    cursor: pointer;
    line-height: 100%;
}

.canvas .canvas-item.active {
    border: 1px dashed black !important;
    /* position: relative; */
    cursor: move;
}

.fa-circle {
    display: none;
    color: black;
}

.canvas-item .fa-window-minimize {
    display: none;
}

#viewAlbum .fa-circle.active,
.side-component-data .fa-circle.active {
    display: block;
}

.fa-redo.rotate {
    display: none;
    color: black !important;
}

.fa-lock.lock {
    display: none;
    color: black !important;
}

.canvas-item.active:not(.locked) .fa-circle {
    content: "\f111";
    position: absolute;
    font-size: 0.9rem;
    background-color: white;
    border-radius: 50%;
    display: block;
}

.canvas-item.active.locked .fa-lock {
    color: red !important;
    position: absolute;
    display: block;
    font-size: 15px;
    top: -11px;
    left: -11px;
}

.canvas-item.active:not(.locked) .fa-redo {
    position: absolute;
    display: block;
    font-size: 15px;
}

.canvas-item.active:not(.locked) .fa-redo.rotate {
    top: -22px;
    left: 50%;
    transform: translate(-50%, 0);
}

.canvas-item.active:not(.locked) .fa-circle.circle1 {
    top: -10px;
    left: -11px;
}

.canvas-item.active:not(.locked) .fa-circle.circle2 {
    top: -10px;
    right: -11px;
}

.canvas-item.active:not(.locked) .fa-circle.circle3 {
    bottom: -10px;
    left: -11px;
}

.canvas-item.active:not(.locked) .fa-circle.circle4 {
    bottom: -10px;
    right: -11px;
}

.canvas-item .line {
    display: none;
    background-color: rgb(125, 218, 215);
    width: 30px;
    height: 0.3rem;
    border-radius: 20px;
}

.canvas-item.active .line {
    position: absolute;
    font-size: 3rem;
    display: block;
}

.canvas-item.active .line.top {
    top: -4px;
    left: 50%;
    transform: translate(-50%, 0);
}

.canvas-item.active .line.bottom {
    bottom: -3px;
    left: 50%;
    transform: translate(-50%, 0);
}

.canvas-item.active .line.left {
    top: 50%;
    left: -16px;
    transform: translate(0, -50%) rotate(90deg);
}

.canvas-item.active .line.right {
    top: 50%;
    right: -16px;
    transform: translate(0, -50%) rotate(90deg);
}

/* .editor-export .canvas-item img,
.editor .canvas .canvas-item img {
    position: relative;
    max-height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
} */

.editor-export .canvas-item span,
.editor .canvas .canvas-item span {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    text-align: inherit;
    text-stroke: inherit;
    -webkit-text-stroke: inherit;
}

.editor .canvas-wrapper #editor-active-controls .control-move,
.editor .canvas-wrapper #editor-active-controls .control-rotate,
.editor .canvas-wrapper #editor-active-controls .control-delete,
.editor .canvas-wrapper #editor-active-controls .ui-resizable {
    position: absolute;
    background-color: white;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    transform: translate(-100%, -100%);
    /* user-select: none; */
    cursor: move;
    pointer-events: auto;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.editor .canvas-wrapper #editor-active-controls .control-rotate {
    top: 0;
    left: auto;
    right: 0;
    transform: translate(100%, -100%);
    cursor: grab;
}

.editor .canvas-wrapper #editor-active-controls .control-delete {
    top: auto;
    bottom: 0;
    transform: translate(-100%, 100%);
    cursor: pointer;
}

.editor .canvas-wrapper #editor-active-controls .ui-resizable {
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: translate(100%, 100%);
    cursor: nw-resize;
}

.editor .canvas-wrapper #editor-active-controls .control-move:before,
.editor .canvas-wrapper #editor-active-controls .control-rotate:before,
.editor .canvas-wrapper #editor-active-controls .control-delete:before,
.editor .canvas-wrapper #editor-active-controls .ui-resizable:before {
    content: "\f0b2";
    position: relative;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 1rem;
}

.editor .canvas-wrapper #editor-active-controls .control-rotate:before {
    content: "\f2f1";
}

.editor .canvas-wrapper #editor-active-controls .control-delete:before {
    content: "\f1f8";
}

#previewModal .modal-content {
    background-color: transparent;
    border: unset;
}

/* MODAL */
.modal-content {
    border-radius: 1.3rem !important;
    min-height: 230px;
}

.custom-close {
    top: -55px;
    right: -56px;
    position: absolute;
    font-size: 2rem;
    border-radius: 50%;
    padding: 5px;
}

.round {
    position: relative;
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    left: 20px;
    position: absolute;
    top: 0;
    width: 20px;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 4px;
    opacity: 0;
    position: absolute;
    top: 5px;
    transform: rotate(-45deg);
    width: 10px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
    background-color: #66bb6a;
    border-color: #66bb6a;
}

.round input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

.side-tab {
    height: calc(100vh - 80px);
    overflow: hidden;
}

.side-tab-content {
    /* height: calc(100vh - 57px); */
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.side-tab-content .content {
    height: calc(100vh - 250px) !important;
}

.side-tab-content .component .content {
    height: calc(100vh - 350px) !important;
}

.side-tab-content .preloaded-stickers-container.content,
.side-tab-content .preloaded-stickers-container.content {
    height: calc(100vh - 300px) !important;
}

.side-page-summary {
    z-index: 99;
    /* height: calc(100vh - 57px); */
    height: 100vh;
    overflow-y: auto;
    will-change: transform;
    position: relative;
    max-width: 174px;
}

.float-add-page {
    position: absolute;
    bottom: 2%;
    left: 40%;
    transform: translate(-40%, 0);
}

.float-add-page .editor-button {
    width: 150% !important;
}

.artist-side-music {
    max-width: 21%;
}

.same-artist:hover {
    background-color: rgb(230, 230, 230);
    border-radius: 10px;
}

.same-artist:hover .icon-container i {
    color: rgb(104, 95, 95);
}

.same-artist .icon-container i {
    color: white;
    padding: 10px;
}

.same-artist {
    align-items: center;
}

.same-artist-music-list .custom-add {
    display: inline-block;
    transform: none;
}

.musicModal {
    background: rgba(0, 0, 0, 0.8);
}

.canvas .canvas-item.canvas-text {
    width: auto;
    line-height: 1;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.editor-main-container {
    background-color: #f3efee;
    overflow: scroll;
    white-space: nowrap;
}

.custom-size-icon {
    width: 22px;
    display: inline-block;
    vertical-align: initial;
}

.preset-size-selection {
    flex-wrap: nowrap;
    overflow-y: auto;
    justify-content: initial !important;
}

.horizontal-scrollable > .row {
    overflow-x: auto;
    white-space: nowrap;
}

/* .carousel-button.active {
    filter: invert(99%) sepia(31%) saturate(3176%) hue-rotate(157deg) brightness(89%) contrast(91%);
} */

.carousel-button.carousel-icon-svg-container.active {
    background: #00ddd5;
}

.carousel-button.carousel-icon-svg-container.active .carousel-icon-svg {
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(41deg)
        brightness(109%) contrast(101%);
}

.carousel-button.carousel-icon-svg-container:hover {
    filter: unset;
}

.carousel-button:hover {
    filter: invert(99%) sepia(31%) saturate(3176%) hue-rotate(157deg)
        brightness(89%) contrast(91%);
}

.preloaded-category a,
.preloaded-sticker-category a,
.preloaded-gifs-category a,
.preloaded-album-category a,
.theme a,
.music-category a {
    border: solid 1px white;
    border-radius: 5px;
    margin-bottom: 10px;
}

.preloaded-category a:hover,
.preloaded-sticker-category a:hover,
.preloaded-gifs-category a:hover,
.preloaded-album-category a:hover,
.theme a:hover {
    border: solid 1px rgb(252, 209, 64);
    color: rgb(252, 209, 64) !important;
}

.music-category a:hover,
.preloaded-category a.active,
.preloaded-sticker-category a.active,
.preloaded-gifs-category a.active,
.preloaded-album-category a.active,
.theme a.active,
.music-category a.active {
    border: solid 1px rgb(252, 209, 64);
    color: rgb(252, 209, 64) !important;
}

.float-icon.see-more .template-name {
    font-family: "Arial Rounded MT";
    font-size: 1rem;
    word-break: break-all;
}

.show-preview:hover {
    text-decoration: none;
}

.editor-icon:hover img {
    filter: brightness(0.5);
}

.editor-video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    width: 100%;
}

.editor-video-container img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.editor-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.editor-locator-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.editor-locator-container img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.editor-locator-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media only screen and (max-width: 768px) {
    body {
        height: 100vh;
        background-color: #f3efee;
    }

    .editor-container {
        max-height: 75px;
    }

    .editor-popup-container h4 {
        font-size: 1rem;
    }

    #component.editor-popup-container {
        height: auto;
    }

    #artist-content h4 {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }

    #editor-content h4 {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }

    .editor-popup-container li .component i {
        font-size: 30px;
    }

    .preset-size-selection {
        flex-wrap: nowrap;
        overflow-y: scroll;
        justify-content: initial !important;
    }

    #component .scrollbar {
        height: auto !important;
    }

    .editor-popup-container .side-component-data,
    #editor-content .side-component-data,
    .preloaded-images-container,
    .artist-component-row {
        flex-wrap: nowrap;
        overflow-y: scroll;
        justify-content: initial !important;
    }

    #artist-content .font-style-row,
    #editor-content .font-style-row {
        flex-wrap: nowrap;
        overflow-y: scroll;
        justify-content: initial !important;
    }

    #artist-content .side-component-image,
    #editor-content .side-component-image {
        flex-wrap: nowrap;
        overflow-y: scroll;
        justify-content: initial !important;
    }

    #artist-content .font-style-row .card,
    #editor-content .font-style-row .card {
        height: 90px !important;
    }

    #artist-content #text .mt-5,
    #editor-content #text .mt-5 {
        margin-top: 0.5rem !important;
    }

    #artist-content .tab-pane hr,
    #editor-content .tab-pane hr,
    #page-summary hr {
        margin-top: 0.5rem;
    }

    .text-button-container {
        color: white;
    }

    .text-button-container .btn {
        color: white;
    }

    .text-add-container {
        text-align: center;
    }

    .artist-side-music {
        max-width: 100%;
    }

    .editor-phone {
        background-color: #f3efee;
    }

    /* .artist-phone-content {
        padding-bottom: 140px;
    } */

    #editor-content .has-search.mt-3 {
        margin-top: 0 !important;
    }

    /* #editor-content .scroll-menu {
        margin-left: 15px;
        margin-right: 15px;
    } */

    #editor-content #video .top-row.mt-5,
    #editor-content #image .top-row.mt-5 {
        margin-top: 0.5rem !important;
    }

    .editor-side-item {
        min-width: 60px;
    }

    .load-more-container {
        align-items: center;
        display: flex;
    }

    .canvas-button a {
        border-radius: 5px;
        padding: 0.25rem;
        outline: unset;
        border: unset;
        text-decoration: none;
        color: white;
    }

    .editor-main-container {
        height: calc(100vh - 150px);
    }

    .editor-container .btn.btn-container {
        padding: 0.2rem 0.3rem;
        font-size: 0.7rem;
    }

    .editor-container .form-control {
        font-size: 0.7rem;
    }
}

.canvas-item.canvas-gif img,
.canvas-item.canvas-component-image img {
    position: absolute;
    top: 0;
    z-index: -1;
}

.editor-icon.undo-button:hover,
.editor-icon.redo-button:hover {
    text-decoration: none;
}

.editor-icon.undo-button.disabled,
.editor-icon.redo-button.disabled {
    opacity: 0.5;
}

.grid {
    padding: 10px 15px;
}

.grid .grid-item {
    margin: 2.5px;
}

.grid .grid-item img {
    margin: 0 auto;
}

.grid .load-more-container {
    position: absolute;
    bottom: 0px;
}

#map-old-way .message,
#youtube-search-result .message {
    line-height: 1.25;
}

#map-old-way .take-note,
#youtube-old-way .take-note {
    padding-top: 10px;
    margin-bottom: 0;
    line-height: 1.25;
    font-size: 0.75rem;
    border-top: 1px solid #cecece;
}

.box-container {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.box-container img {
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.box-container:hover::before {
    /* background-color: #000000;
    opacity: 0.50;
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    bottom: 0; */
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
}

.box-container::before:hover {
    opacity: 0;
}

.box-container:hover .overlay,
.box-container:hover .overlay::after {
    /* bottom: 0px; */
}

.box-container .overlay {
    /* position: absolute;
    bottom: -80px;
    left: 15px;
    right: 15px; */
    background-color: #827b7b;
    position: relative;
    padding: 10px 8px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
}

.box-container .overlay .title,
.box-container .overlay .published_at {
    font-size: 10px;
    overflow: hidden;
    padding: 0 5px;
    margin-bottom: 3px;
}

.box-container .overlay .title {
    font-size: 12px;
}

@media only screen and (max-width: 768px) {
    .box-container .overlay .published_at {
        font-size: 9px !important;
    }

    .box-container .overlay .title {
        font-size: 10px !important;
    }
}

.canvas-item.canvas-video {
    padding: 0px !important;
}

.canvas-item.canvas-locator::after,
.canvas-item.canvas-video::after {
    content: "";
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.canvas-item.canvas-locator.active.dblclick::after,
.canvas-item.canvas-video.active.dblclick::after {
    width: 0;
    height: 0;
}

.context-menu-icon-paste:before,
.context-menu-icon-copy:before,
.context-menu-icon-delete:before,
.context-menu-icon-lock:before,
.context-menu-icon-duplicate:before {
    width: 20px !important;
    -webkit-transform: translate(6px, -50%) !important;
    -ms-transform: translate(6px, -50%) !important;
    -o-transform: translate(6px, -50%) !important;
    transform: translate(6px, -50%) !important;
}

.context-menu-icon-paste:before {
    content: url("../images/editor/paste.svg") !important;
}

.context-menu-icon-copy:before {
    content: url("../images/editor/copy.svg") !important;
}

.context-menu-icon-delete:before {
    content: url("../images/editor/delete.svg") !important;
}

.context-menu-icon-lock:before {
    content: url("../images/editor/lock.svg") !important;
    filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(257deg)
        brightness(0%) contrast(108%);
}

.context-menu-icon-duplicate:before {
    content: url("../images/editor/duplicate.svg") !important;
}

.context-menu-icon.context-menu-icon--fa5 i {
    width: 20px;
    left: 0.45em !important;
}

.context-menu-icon--fa5.bring-forward .fa-share:before {
    content: url("../images/editor/bring-forward.svg") !important;
}

.context-menu-icon--fa5.bring-to-front .fa-arrow-up:before {
    content: url("../images/editor/bring-to-front.svg") !important;
}

.context-menu-icon--fa5.send-backward .fa-reply:before {
    content: url("../images/editor/send-backward.svg") !important;
}

.context-menu-icon--fa5.send-to-back .fa-arrow-down:before {
    content: url("../images/editor/send-to-back.svg") !important;
}

.form-control:focus {
    box-shadow: 0 0 0 0.1rem #59d9d4;
}

p {
    font-size: 12px;
    font-family: "Helvetica";
}

.font-title {
    font-size: 12px;
    font-family: "Helvetica";
}

.button-back {
    padding: 5px 15px;
    margin-top: 1rem;
    margin-bottom: 15px;
    border: 2px solid white;
    border-radius: 5px;
}

.form-control.button_font_type,
.form-control.button_font_size,
.btn-bold,
.animation-directions,
.animation-delay,
.animation-duration {
    border-radius: 25px;
    height: 40px;
}

.slidecontainer {
    width: 100%;
}

.slider-delay,
.slider-duration {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background: linear-gradient(
        to right,
        #7cd6d4 0%,
        #7cd6d4 20%,
        #fff 20%,
        #fff 100%
    );
    outline: none;
    /* opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s; */
}

.slider-delay::-moz-range-progress,
.slider-duration::-moz-range-progress {
    -webkit-appearance: none;
    background: #7cd6d4;
}

.slider-delay:hover,
.slider-duration:hover {
    opacity: 1;
}

.slider-delay::-webkit-slider-thumb,
.slider-duration::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid #7cd6d4;
    cursor: pointer;
}

.slider-delay::-moz-range-thumb,
.slider-duration::-moz-range-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #7cd6d4;
    cursor: pointer;
}

.font-text-bg {
    background: #847a7a;
    border-radius: 10px;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    position: relative;
}

.font-text-bg a {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#headline-generator-container .font-text-bg {
    background: #847a7a;
    border-radius: 10px;
    height: 100%;
    min-height: 45px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    white-space: unset !important;
    overflow: unset !important;
    text-overflow: unset !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

#headline-generator-container .font-text-bg a {
    margin: 0;
    position: unset !important;
    top: unset !important;
    -ms-transform: unset !important;
    transform: unset !important;
}

.selection .font-text-bg a:hover {
    background-color: unset;
}

.drop-append {
    z-index: 100;
    position: absolute;
    right: 0;
}

.question-box-content {
    padding: 8px;
}

i.add-btn-svg {
    width: 15px;
    transform: translate(5px, 2px);
    margin-right: 8px;
}

i.add-btn-svg:before {
    content: url("../images/icons/Add-01.svg") !important;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

i.add-form-btn-svg {
    width: 25px;
}

i.add-form-btn-svg:before {
    content: url("../images/icons/Add\ form\ question-01.svg") !important;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

i.fa-paint-roller {
    width: 20px;
    margin-right: 5px;
    transform: translate(0px, 5px);
}

i.fa-paint-roller:before {
    content: url("../images/icons/Appearance-01.svg") !important;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

.editor-selected-grey-2 {
    background: #756c6c;
}

.appearance,
.recipient,
.component-form-content,
.button-content {
    padding-bottom: 8px;
}

.appearance-control,
.recipient-control,
.component-form-content-control,
.button-control {
    cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
}

#form-input-font-type,
#form-input-font-size,
#fontType3,
#fontSize3,
.animation-directions,
.animation-delay,
.animation-duration {
    color: #44403f !important;
    background-color: white !important;
}

.border-top-appearance {
    border-radius: unset;
    border-top: 3px solid #685f5f !important;
}

.border-bottom-appearance {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.border-top-radius {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.padding-8px {
    padding: 8px;
}

i.fa-envelope {
    width: 20px;
    margin-right: 5px;
    transform: translate(0px, 5px);
}

i.fa-envelope:before {
    content: url("../images/icons/Recipient\ email-01.svg") !important;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg)
        brightness(112%) contrast(101%);
}

#upload .card.white-bg,
.white-bg {
    background-color: white !important;
}

.light-bg {
    background-color: #847a7a !important;
}

.photo-sticker a:hover {
    text-decoration: none;
}

.photo-sticker a {
    padding: 0.5rem 1rem;
}

a.no-link {
    text-decoration: none;
}

.see-more a {
    font-size: 14px;
}

.component-form-editor .font-title,
.button-content .font-title {
    font-size: 13.5px;
}

.component-form-editor small {
    font-size: 85%;
}

.letter-spacing {
    letter-spacing: 1px;
}

.text--grey {
    color: #ccc;
}

.color-preview-size {
    text-align: right;
}

.color-preview-size .sp-replacer {
    width: 35px !important;
    height: 35px !important;
}

.radius_left_none {
    border-top-left-radius: unset !important;
    border-bottom-left-radius: unset !important;
}

.radius_right_none {
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
}

.my-rounded-append input {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-right: unset;
    padding-right: unset;
}

.my-rounded-append .form-control:focus {
    box-shadow: unset;
}

.my-rounded-append .input-group-text {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding-left: unset;
    background: white;
    color: #aaa;
}

.question-el-card {
    background-color: white;
    color: #756c6c;
    border-radius: 25px;
    font-size: 12px;
}

.question-el-card i {
    color: #756c6c;
}

.question-el-card-header:hover {
    cursor: pointer;
}

.question-el-card .move-btn,
.question-el-card .option-btn {
    border-left: 1px solid #bbb;
    padding: 0px;
    height: 35px;
    text-align: center;
}

.question-el-card .move-btn:hover {
    cursor: move;
}

.question-el-card .dropdown-toggle::after {
    display: none;
}

.question-el-card .option-btn button:focus {
    box-shadow: unset;
}

.question-el-card .dropdown-item,
.question-el-card .dropdown-toggle-icon {
    font-size: 12px;
    color: #756c6c;
}

.question-el-card-footer {
    border-top: 1px solid #bbb;
}

.question-el-card-footer .form-control {
    color: #44403f;
    font-size: 12px;
    border-radius: 25px;
    height: 28px;
}

.question-el-card-footer .question-el-type:focus {
    color: #44403f;
}

label.swtich {
    margin-bottom: unset;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #2196f3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.sticker_search_keyword,
.album_search_keyword {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}

.vertical-line {
    margin-left: 5px;
    margin-right: 10px;
    height: 30px;
    padding: 5px 0px;
    border: 0.5px solid #aeaeae57;
}

.editor-container .btn.btn-container.btn-tools {
    background-color: transparent;
    padding: 0.25rem 0.6rem;
    border: 0;
    font-size: 1rem;
    color: black;
}

.editor-container .btn.btn-container.btn-tools.active-btn {
    border-radius: 10px !important;
    background-color: #d5f5f4 !important;
    color: #56d0d8 !important;
    font-weight: 600;
    padding: 5px 10px !important;
}

.btn.btn-extra-light-stive:hover {
    filter: unset;
}

#add-link-dropdown.dropdown-menu {
    top: 55px;
    left: 5px;
}

#add-link-dropdown.dropdown-menu.align-to-right {
    left: unset !important;
    right: 30px !important;
}

#position-dropdown.dropdown-menu {
    top: 55px;
    left: 15px;
}

#info-dropdown.dropdown-menu {
    top: 55px;
    left: 15px;
}

#info-dropdown .small-info {
    font-size: 0.8rem;
    font-family: "Arial Rounded MT";
}

#info-dropdown .title-info {
    font-size: 1.2rem;
    word-break: break-word;
    white-space: pre-line;
    overflow-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#info-dropdown .large-info {
    font-size: 1rem;
    font-family: "Arial Rounded MT";
}

#arrange-dropdown.dropdown-menu {
    top: 55px;
    left: unset;
    right: 35px;
    min-width: unset;
    padding: 10px !important;
    width: min-content;
}

#text-properties #arrange-dropdown.dropdown-menu {
    right: 235px;
}

#ai-properties {
    position: absolute;
    width: 30%;
    z-index: 99;
    top: 20%;
    right: 1%;
    background-color: white;
    white-space: normal;
    display: none;
}

#align-dropdown.dropdown-menu {
    top: 55px;
    left: unset;
    right: 35px;
    min-width: unset;
    padding: 10px 15px !important;
    width: max-content;
}

#text-properties #align-dropdown.dropdown-menu {
    right: 235px;
}

#show-more-dropdown.dropdown-menu {
    top: 55px;
    left: unset;
    right: 10px;
    min-width: unset;
    padding: 10px !important;
    width: min-content;
}

#loader .fa-spinner {
    font-size: 50px;
}

.ui-draggable-disabled .ui-rotatable-handle {
    cursor: unset;
}

li.context-menu-item {
    margin: 0 0.2em;
}

li.context-menu-item.context-menu-icon-line {
    cursor: auto;
    padding: 0px 10px !important;
}

li.context-menu-item.context-menu-icon-line:hover {
    cursor: auto;
    background: unset;
    background-color: unset;
}

.btn-stive {
    background: #ffffff;
    border-radius: 50px;
    line-height: 25px;
    color: #000000;
    padding: 8px 0;
    min-width: 100%;
    border: 0;
}

.btn-grey {
    background: #f3f3f4;
    padding: 8px 0;
    min-width: 100%;
}

.btn-medium-light-stive {
    background: #59d9d4;
    color: white;
}

.tools-dropdown {
    border-radius: 20px;
    padding: 20px;
    width: 25rem;
    border: 0;
    cursor: default;
}

#position-dropdown.dropdown-menu {
    width: 28rem;
}

.right-border {
    border-right: 1px solid #80808038;
}

.proportion-top-border {
    width: 10px;
    border: 1px solid grey;
    height: 15px;
    float: right;
    border-bottom: none;
    border-right: none;
}

.proportion-bottom-border {
    width: 10px;
    border: 1px solid grey;
    height: 15px;
    float: right;
    border-top: none;
    border-right: none;
}

/* cannot remove */
.flip-horizontal {
    transform: scale(-1, 1);
}

.flip-vertical {
    transform: scale(1, -1);
}

.flip-horizontal.flip-vertical {
    transform: scale(-1, -1);
}

@media (max-width: 767px) {
    .tools-dropdown {
        max-width: 90%;
    }

    .right-border {
        border-right: none;
    }
}

.title-position {
    font-size: 14px;
}

.input-rounded-append input {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-left: unset;
    padding-left: 5px;
}

.input-rounded-append .form-control:focus {
    box-shadow: unset;
}

.input-rounded-append .input-group-text {
    border-top-left-radius: 25px !important;
    border-bottom-left-radius: 25px !important;
    padding-right: unset;
    border-right: unset;
    background: white;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
}

.btn-apply-hyperlink:disabled,
.btn-apply-hyperlink[disabled],
.btn-remove-hyperlink:disabled,
.btn-remove-hyperlink[disabled] {
    background-color: #cccccc;
    color: #666666;
}

button.btn.btn-container.btn-tools.active-tools {
    background: #dcf6f5;
}

button.btn.btn-container.btn-tools.active-tools img {
    filter: invert(76%) sepia(30%) saturate(4582%) hue-rotate(127deg)
        brightness(96%) contrast(101%);
}

button.btn.btn-container.btn-animation-tab.btn-tools.active-tools {
    background: #dcf6f5;
}

button.btn.btn-container.btn-animation-tab.btn-tools.active-tools img {
    filter: invert(76%) sepia(30%) saturate(4582%) hue-rotate(127deg)
        brightness(96%) contrast(101%);
}

.position-input-label {
    font-size: 10px;
    border-bottom-left-radius: 20px !important;
    border-top-left-radius: 20px !important;
    border-right: none;
    background: white;
    font-weight: bold;
    padding: 5px 0px 5px 15px;
}

.position-input-label-right {
    font-size: 10px;
    border-bottom-right-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-left: none;
    background: white;
    font-weight: bold;
    padding: 5px 10px 5px 5px;
}

.position-input {
    border-left: none;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    padding: 5px;
    font-size: 13px;
}

.position-input:focus {
    outline: 0 !important;
    /* border: none!important; */
    box-shadow: unset;
}

.position-input-left {
    border-right: none;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding: 5px;
    font-size: 13px;
}

.position-input-left:focus {
    outline: 0 !important;
    /* border: none!important; */
    box-shadow: unset;
}

.btn-position-tools {
    background-color: transparent;
    padding: 0.25rem 0.6rem;
    border: 0;
    font-size: 1rem;
    color: black;
}

.vertical-align-list {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.form-pills.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #44403f;
}

.form-pills.nav-pills .nav-link {
    color: #fff;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.animation-pause {
    animation-play-state: paused;
}

#myfiles_purchased_artworks_container #tpl-load-more-container,
#myfiles_collected_artworks_container #tpl-load-more-container {
    display: none;
}

.editor-collapse_btn {
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.editor-flow_button_color {
    fill: rgb(104, 95, 95);
    pointer-events: all;
}
.editor-collapsed_btn .editor-flow_button_color {
    fill: #44403f !important;
}
.editor-flow_button_arrow_color {
    fill: white;
}

.SUDcEg,
.editor-flow_button {
    margin-left: -4px;
}

.editor-flow_button {
    overflow: hidden;
    pointer-events: none;
    cursor: pointer;
    position: relative;
    width: 20px;
}

.cwOZMg {
    justify-content: center;
}

.o4TrkA {
    outline: none;
}

.CA2Rbg {
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    text-transform: inherit;
    color: inherit;
    font: inherit;
    padding: 0;
    margin: 0;
    /* -webkit-user-select: none; */
    /* -moz-user-select: none; */
    /* -ms-user-select: none; */
    /* user-select: none; */
}
.yIDCqA,
.editor-collapse_btn button {
    -webkit-tap-highlight-color: transparent;
}

._5eN-wQ .editor-flow_button_icon {
    transition: opacity 0.25s ease-in-out;
}
.editor-flow_button_icon {
    position: absolute;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    pointer-events: all;
}
.editor-flow_button_icon .editor-flow_button_icon_rotate {
    transform: rotateY(180deg);
}

.editor-flow_button_size {
    width: 12px;
    height: auto;
}

.editor-flow_button_arrow {
    display: inline-block;
    vertical-align: text-bottom;
    box-sizing: border-box;
}
.editor-flow_button {
    overflow: hidden;
    pointer-events: none;
    cursor: pointer;
    position: relative;
    width: 20px;
}