.workspace {
    float: left;
    width: 100%;
    height: calc(100vh - 250px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.workspace .div-upload-more-images {
    height: auto;
    cursor: pointer;
}
.left-col-wrapper {
    float: left;
    background-color: #ebebeb;
    height: 100vh;
}
.workspace .canvas-editor {
    line-height: 0;
    font-size: 0;
    background-color: #ebebeb;
}
.open-foto-upload-panel {
    cursor: pointer;
}
.workspace .canvas-editor .canvas-wrapper{
    display: inline-block;
}

.workspace .canvas-editor canvas{
    position: absolute;
}

.funproduct-tabs-panel {
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 50px;
    /* background-color: white */
}

.funproduct-effect-panel {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
	/* position: absolute; */
	width: 100%;
    height: 200px;
    /* bottom: 0; */
    /* left: 0; */
	transition: all 200ms ease-in-out;
    background-color: #fff;
}
.funproduct-tabs-panel .img-tab {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-right: 1px solid #ebebeb;
    border-top: 2px solid #ebebeb;
    top: 0;
    left: 0;
    font-size: 30px;
    cursor: pointer;
}
.funproduct-tabs-panel .img-tab.active {
    border-top: 2px solid #499cdc;
}
.funproduct-effect-panel .content-panel {
    width: 0px;
    height: 200px;
    transition: all 200ms ease-in-out;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    align-items: center;
}

.funproduct-effect-panel .add-to-cart {
    position: absolute;
    right: 20%;
    font-size: 36px;
    color: #499cdc;
    cursor: pointer;
}
.funproduct-effect-panel .btn.text-item{
    background: #2c6fa2;
    color: white;
    font-weight: bold;
}
.funproduct-effect-panel .list-product-option {
    height: 100%;
    overflow: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
.funproduct-effect-panel .list-product-option .product-option {
    width: 125px;
    border: 1px solid #ccc;
    float: left;
    margin-right: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 5px;
    cursor: pointer;
}

.funproduct-effect-panel .list-background {
    height: 100%;
    overflow: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
.funproduct-effect-panel .list-background .background-item {
    width: 125px;
    border: 1px solid #ccc;
    float: left;
    margin-right: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    height: 60px;
    background-repeat: repeat-x;
    background-size: auto 100%;
}
.funproduct-effect-panel .list-background .background-item img {
    width: 100%;
}

.funproduct-effect-panel .list-background .background-item.active {
    border: 1px solid #e50d7f;
}
.funproduct-effect-panel .list-product-option .product-option.active {
    border: 1px solid #e50d7f;
}

.funproduct-effect-panel .list-product-option .product-option img {
    width: 100%;
}

.funproduct-effect-panel .title-selection {
    margin-top: 2px;
    font-weight: bold;
}
.funproduct-effect-panel .content-panel.expand {
    width: 100%;
    display: flex;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.5s linear;
}
.funproduct-effect-panel .default .img-tab.right {
    right: 0;
    left: auto;
    display: none;
}
.funproduct-effect-panel .default.expand .img-tab.right {
    right: 0;
    left: auto;
    position: absolute;
    display: flex;
}
.funproduct-tabs-panel .img-tab.effect {
    color: #cc57ff;
}
.funproduct-tabs-panel .img-tab.cart  {
    color: #4caf50;
}
.funproduct-tabs-panel .img-tab.text  {
    color: #5e9ff6;
}
.funproduct-tabs-panel .img-tab.product {
    color: #499cdc;
}
.funproduct-effect-panel .product .price-display {
    padding: 0;
    margin: 0;
    font-size: 26px;
    white-space: nowrap;
    justify-content: center;
    display: flex;
}

.funproduct-effect-panel .item-panel-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
    margin-left: 10px;
}
.funproduct-effect-panel .expand .item-panel-content {
    margin-right: 10px;
}
.funproduct-effect-panel .item-panel-content::-webkit-scrollbar {
    height: 6px;
}
.funproduct-effect-panel .effect-item {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    cursor: pointer;
}
.funproduct-effect-panel .effect-item a {
    display: block;
    height: 100%;
    padding: 3px;
    border: 1px solid #cacaca;
    border-radius: 5px;
    margin-right: 5px;
}
.funproduct-effect-panel .effect-item a img {
    height: 100%;
    border-radius: 5px;
}
.funproduct-effect-panel .item-panel-content .text-item {
    margin-right: 10px;
    min-width: 200px;
    width: 200px;
}
.funproduct-effect-panel .item-panel-content .quantity {
    margin-right: 10px;
    min-width: 132px;
}
.funproduct-effect-panel .item-panel-content .text-item.btn {
    min-width: 100px;
    width: 100px;
}
.funproduct-effect-panel .item-panel-content .sp-replacer {
    min-width: 55px;
    height: 36px;
    margin-right: 10px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border: solid 1px #cccccc;
    background: #fff;
}
.funproduct-effect-panel .item-panel-content.flex-evenlyn {
    justify-content: space-evenly;
}
.funproduct-effect-panel .item-panel-content.flex-center {
    justify-content: center;
}
.form-control.error {
    border-color: #dc3545;
}
.funproduct-effect-panel .item-panel-content .packaging {
    float: inherit;
    width: auto;
    margin: 0;
}
.retrive-data {
    position: absolute;
    right: 10px;
    bottom: 80px;
    font-size: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.retrive-data a {
    color: #cacaca;
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.tippy-box {
    width: 180px;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px;
    pointer-events: auto;
}
.tippy-box a {
    display: block;
    color: #2d2d2d;
    cursor: pointer;
}
.tippy-box .tippy-arrow {
    display: none;
}
.draft-table th {
    text-align: center;
}
.draft-table a {
    padding: 5px;
    color: #251512;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .funproduct-effect-panel .item-panel-content.flex-evenlyn {
        justify-content: flex-start;
    }
    .funproduct-effect-panel .item-panel-content.flex-center {
        justify-content: flex-start;
    }
    .funproduct-effect-panel .effect .item-panel-content.flex-evenlyn {
        justify-content: space-around;
    }
    .funproduct-effect-panel .text .item-panel-content.flex-center {
        flex-wrap: wrap;
    }
    .funproduct-effect-panel .item-panel-content::-webkit-scrollbar {
        height: 0;
    }
    .funproduct-effect-panel::-webkit-scrollbar {
        height: 0;
    }
    .funproduct-effect-panel {
        overflow: auto;
        justify-content: flex-start;
    }
    .funproduct-effect-panel .expand {
        min-width: 100%;
    }
    .funproduct-effect-panel .list-product-option .product-option{
        width: 80px;
    }
    .funproduct-effect-panel .list-background .background-item {
        width: 85px;
    }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}