/*BACKEND*/

.uf-field-name-canvas_msg {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    /* align-self: auto; */
}

.uf-field-name-canvas_msg .uf-field-description p {
    /* background-color: #f6f6f6; */
    /* display: flex; */
    /* text-align: center; */
    /* flex-flow: column; */
    /* align-items: center; */
    /* height: inherit; */
    /* justify-content: normal; */
    /* max-width: 500px; */
    /* width: 100%; */
    /* margin: 0px; */
    /* margin: auto; */
    /* box-shadow: 0px 0px 10px -3px #000000; */
    /* position: sticky; */
    top: 0px;
    /* margin-top: 0; */
}
.uf-field-name-canvas_msg .uf-field-description {
    opacity: 1;
    }

.uf-field-name-canvas_msg .uf-field-description .canvas-container {
    /* background-color: #fff; */
    box-shadow: 0px 0px 10px -3px #000000;
    /* margin: 40px; */
    /* max-width: 100%; */
    background: linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}

.uf-field-name-canvas_msg .uf-field-description {
    /* height: 100%; */
    /* display: flex; */
    /* text-align: center; */
    /* flex-flow: column; */
    /* align-items: center; */
    /* height: inherit; */
    transform-origin: top left;
    position: sticky;
    top: 100px;
}

.uf-field-name-canvas_msg .uf-field-input-wrap {
    height: 100%;
}

.uf-field-layout-grid { min-width: 0px!important; }
.uf-field-label label { font-size: 10px; text-transform: uppercase; font-weight: 300; }
[data-custom-type="hidden"] {
    display: none;
}

.post-type-mds_template th#thumbnail {
    width: 50px;
    text-align: center;
} 

.post-type-mds_template td.thumbnail.column-thumbnail img {
    width: 100%;
    height: auto;
    margin: 0px;
}

.uf-section h4 {
    font-size: 11px!important;
    text-transform: uppercase!important;
    margin: 0!important;
    line-height: 20px!important;
}

.uf-section.first-col {
    padding: 10px 15px!important;
}


.uf-section span.dashicons {
    font-size: 18px!important;
}

.uf-field-name-fontFamilyPreview .uf-image-select label, .mds_font_preview.uf-image-select label {
    height: 100px;
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    float: left;
    padding: 1px;
    background: #fff;
    border: 2px solid #eee;
    margin: 0 5px 5px 0;
}

.mds_color_preview.uf-image-select label {
    height: 30px;
    width: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    float: left;
    padding: 1px;
    background: #fff;
    border: 2px solid #eee;
    margin: 0 5px 5px 0;
}

.mds_color_preview.uf-image-select span {
    display: block;
    width: 100%;
    height: 100%;
}

.mds_font_preview.uf-image-select label.mds_selected {
    border-color: #000;
}

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

.uf-field-input.uf-basic-input {
    flex-direction: column;
}

.uf-basic-input input {
    padding: 0px 5px;
    min-height: 25px;
    line-height: 1;
    border-radius: 0px;
    font-size: 11px;
}

input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* width: 30px; */
    /* height: 30px; */
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
  }
  input[type="color"]::-webkit-color-swatch {
    border-radius: 0px;
    border: none;
  }
  input[type="color"]::-moz-color-swatch {
    border-radius: 0px;
    border: none;
  }

  .pickr, .pcr-app {
    font-size: small;
}
.pcr-app { position: absolute!important; top: 31px;}

[data-custom-type="color"] {
    z-index: unset!important;
}

.pickr .pcr-button {
    border: 1px solid #000;
}

/*FRONTEND*/


.mds-element[data-type="image"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}


.mds_layer_content h5 {
    font-size: 10px;
    text-transform: uppercase;
    margin: 0px;
    margin-bottom: 10px;
}


.mds_layer_title {
    border-bottom: 1px solid #efefef;
}

.mds-layer {
    border: 1px solid #efefef;
    /* padding: 20px; */
    margin-bottom: 20px;
}

.mds_layer_title h5 {
    padding: 10px 15px;
    margin: 0px;
    font-size: 15px;
    text-transform: uppercase;
}

.mds_layer_content, .mds-element-container > .mds-element > .mds-container {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}

.mds-element-container > .mds-element > .mds-container {
    padding: 0;    
}

.mds-element.mds-element-font_control {
    margin-left: -10px;
    margin-right: -10px;
}

.mds-element-container > .mds-element.mds-element-font_control > .mds-container {
    margin: 0;
}

.mds_layer_content > .mds-element-container, .mds-element-container > .mds-element > .mds-container > .mds-control {
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
}

.mds-element label input[type="radio"] {
    display: none;
}

.mds-element {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

.mds-element label {
    float: left;
    padding: 1px;
    background: #fff;
    border: 2px solid #eee;
    margin: 0 5px 5px 0;
    cursor: pointer;
}

.mds-element label.mds_selected {
    border-color: #000;
}

input.mideas-text-input {
    width: 100%;
    display: block;
}

.mideas-text-element {
    display: contents;
}

.mds-container {
    width: 100%;
}

.mds-container > h5 {
    margin-top: 10px;
}

.mds_template_container {
    width: 100%;
}

.woocommerce td.product-name .wc-item-meta .wc-item-meta-label, .woocommerce td.product-name .wc-item-meta dt, .woocommerce td.product-name dl.variation .wc-item-meta-label, .woocommerce td.product-name dl.variation dt {
    float: none !important;
    font-weight: bold;
}

#add_payment_method table.cart img.mideas_custom_thumbnail, .woocommerce-cart table.cart img.mideas_custom_thumbnail, .woocommerce-checkout table.cart img.mideas_custom_thumbnail {
    width: 120px;
    height: auto;
}

dt.variation-mideas_designer_popup {
    display: none !important;
}

dd.variation-mideas_designer_popup a.mideas_designer_popup_link {
    margin-top: 10px;
}

dt.variation-mideas_designer_popup_content {
    display: none !important;
}

.mideas_designer_popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.mideas_designer_popup.active {
    display: flex;
}

.mideas_designer_popup .mideas_designer_popup_inside {
    width: 600px;
    background-color: #ffffff;
    padding: 10px;
    max-width: 100%;
    overflow-y: auto;
    max-height: 90vh;
}

.mideas_designer_popup .mideas_designer_popup_inside .mideas_designer_popup_header h5 {
    margin-top: 0;
    margin-bottom: 10px;
}

.mideas_designer_popup .mideas_designer_popup_inside .mideas_designer_popup_header .mideas_designer_popup_close {
    float: right;
}

.mideas_designer_popup .mideas_designer_popup_inside .mideas_designer_popup_header .mideas_designer_popup_close a.mideas_designer_popup_close_link {
    font-size: 16px;
    text-decoration: none;
    font-weight: 700;
    font-family: cursive;
}

.mideas_designer_popup .mideas_designer_popup_inside .mideas_designer_popup_content table.mideas_designer_table {
    margin-bottom: 0;
}

.mideas_designer_popup .mideas_designer_popup_inside .mideas_designer_popup_content table.mideas_designer_table thead th.label {
    width: 33%;
}

:is(.elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,.elementor-widget-wc-add-to-cart,.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart.variations_form .woocommerce-variation-add-to-cart, :is(.elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,.elementor-widget-wc-add-to-cart,.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart:not(.grouped_form):not(.variations_form) {
    display: block !important;
}

.mds-form-output {
    display: block;
    clear: both;
    visibility: visible;
    width: 100%;
}

.mds-form-output.mds-form-inline {
    display: block;
}

.mds-form-output.mds-form-tabs {
    display: block;
}

.mds-form-output.mds-form-tabs .mds-form-tabs-buttons {
    display: flex;
    flex-direction: row;
}

.mds-form-output.mds-form-tabs .mds-form-tabs-buttons a.mds-form-tab-link {
    border: 1px solid;
    /* background-color: #efefef; */
    display: inline-block;
    padding: 10px;
    margin-bottom: -1px;
}

.mds-form-output.mds-form-tabs .mds-form-tabs-buttons a.mds-form-tab-link.active {
    border-bottom: 1px solid #ffffff;
    background-color: #ffffff;
}

.mds-form-output.mds-form-tabs .mds-form-tabs-buttons a.mds-form-tab-link:hover {
    background-color: #ffffff;
}

.mds-form-output.mds-form-tabs > .mds-layer {
    display: none;
}

.mds-form-output.mds-form-tabs > .mds-layer.active {
    display: block;
}

.mds-form-output.mds-form-accordion {
    display: block;
    margin-bottom: 20px;
}

.mds-form-output.mds-form-accordion > .mds-layer {
    margin-bottom: 0;
}

.mds-form-output.mds-form-accordion > .mds-layer .mds_layer_title {
    cursor: pointer;
}

.mds-form-output.mds-form-accordion > .mds-layer .mds_layer_content {
    display: none;
}

.mds-form-output.mds-form-accordion > .mds-layer.active .mds_layer_content {
    display: flex;
}

.mds-form-output.mds-form-custom {
    display: block;
}

.mds-form-output.mds-form-hide {
    display: none;
}

.mds-control.mds-inline {
    display: inline-block;
    width: auto;
    vertical-align: text-top;
    margin-right: 10px;
    margin-bottom: 10px;
}

.mds-control.mds-inline .mds-element {
    gap: 0px;
}

.mds-control.mds-inline  input[type="number"] {
    width: 45px;
    padding: 4px 0px 4px 7px;
    border-radius: 0px;
    font-size: 12px;
}

.mds-control.mds-inline .mds-element label {
    float: left;
    padding: 1px;
    background: #fff;
    margin: 0 0px 0px 0;
    cursor: pointer;
}

.mds_color_preview label, .mds_color_preview label span {
    border-radius: 100%;
    overflow: hidden;
}

.select2-results__option span.optgroup {
    color: #bbb;
    text-transform: uppercase;
    pointer-events: none;
    font-weight: 700;
}

/* Mideas Designer Widths */
.mds-width-100 {
    width: 100% !important;
}

.mds-width-80 {
    width: 80% !important;
}

.mds-width-75 {
    width: 75% !important;
}

.mds-width-66 {
    width: 66% !important;
}

.mds-width-60 {
    width: 60% !important;
}

.mds-width-50 {
    width: 50% !important;
}

.mds-width-40 {
    width: 40% !important;
}

.mds-width-33 {
    width: 33% !important;
}

.mds-width-30 {
    width: 30% !important;
}

.mds-width-25 {
    width: 25% !important;
}

.mds-width-20 {
    width: 20% !important;
}

.mds-width-auto {
    width: auto !important;
}

.mds-grid {
    display: grid;
    width: 100%;
}

.mds-grid.forced-aspect > * {
    aspect-ratio: 1
}

.mds-grid .uf-image-select {
    margin-bottom: 0px;
}

.mds-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}

.mds-templates-grid .mds-template {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
.mds-admin-top-bar {
    right: 0;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,.03);
    position: relative;
    top: 0;
    width: 100%;
    z-index: 1;
    padding: 10px;
    margin-left: -22px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: -10px;
    margin-bottom: 15px;
    /* margin-right: -40px; */
    /* right: 0px; */
}

.mds-admin-top-bar h2 { margin:0px}

.canvas-container {
    z-index: 1;
}

/*
.mds-loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 
    */