/**************************\
  Basic Modal Styles
\**************************/
.zoomout,.zoomin{ font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;}
.image-size-label{
  display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
    margin-top:30px
}
.modal__content {
	text-align: center; 
}
#zoom-slider{
  flex-basis: 100%;
}
.zoomout:before{
  content: "\e905";
  font-size: 30px;
  
}
.zoomin:after{
  content: "\e906";
  font-size: 30px;
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-progress{
  position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000cf;
    display:none;
}
.upload-progress:after{
  content:"";
  width: 2rem;
  height: 2rem;
  margin: 2rem;
  border-radius: 50%;
  border: 0.3rem solid rgba(151, 159, 208, 0.3);
  border-top-color: #979fd0;
  -webkit-animation: 1.5s spin infinite linear;
          animation: 1.5s spin infinite linear;
          position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* .loader {
  width: 24px;
  aspect-ratio: 1;
  border: 15px solid #ddd;
  border-radius: 50%;
  position: relative;
  transform: rotate(45deg);
}
.loader::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 15px solid #b406b4;
  animation: l18 3s infinite linear;
}
@keyframes l18 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
} */
.d-none {
	display:none;
}
.modal__container {
  background-color: #fff;
  padding: 30px ;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: visible;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  text-align: center;
  color: #000000;
  box-sizing: border-box;
}
button.modal__btn {
    padding: 8px 21px !important;
    margin: 7px;
}
.modal__close {
  background: transparent;
  border: 0;
  position: absolute;
  right: -15px;
  top: -15px;
  font-size: 21px;
  background: #C62828;
  color: #fff;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}
.modal__footer{text-align: center;}
.modal__btn {
  font-size: 30px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, .8);
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}



/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}
.frame__wrap{display:flex;margin-bottom: 60px;    flex-wrap: wrap;column-gap:20px;row-gap:30px;    justify-content: center;}

.frame__upload {
  text-align:center;
 display: flex;  justify-content: center;position:absolute; 
 padding: 10px;
 box-shadow: 0 0 1px;
 width:100%;height:calc(100% - 10px);

}
.frame__upload.is_image{
  height:auto;
}
#canvasContainer[class*="black"]  .frame__upload {
  background:#000!important;
}
#canvasContainer[class*="white"]  .frame__upload {
  background:#f1f1f1!important;
}
#canvasContainer[class*="gold"]  .frame__upload {
  background:#f6d566!important;
}
#canvasContainer[class*="silver"]  .frame__upload {
  background: #e3e3e3!important;
}

   #canvasContainer.classic .frame__upload img,  #canvasContainer.clasic .frame__upload img{
    max-width: 100%;
    border: 10px solid white;
   }
  
.frame__upload span{ background: #fff;   box-shadow: inset 2px 2px 4px #0000007a;
  display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   flex-direction:column;
   justify-content: center;}
   .frame__upload span p  {
     line-height: 1;
   margin: 4px 0;
}
.cropper-view-box {

  outline: none;
 
}
   .cropit-preview .cropper-crop-box{ overflow: hidden;outline:calc(2mm * 100 / 72) solid;   box-shadow: inset 2px 2px 4px #0000007a;
  display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;}
   #cropmodal[class*="black"]  .cropit-preview .cropper-crop-box{outline-color:#000}
   #cropmodal[class*="white"]  .cropit-preview .cropper-crop-box{outline-color:#f1f1f1}
   #cropmodal[class*="gold"]  .cropit-preview .cropper-crop-box{outline-color:#f6d566}
   #cropmodal[class*="silver"]  .cropit-preview .cropper-crop-box{outline-color:#e3e3e3}
.frame__upload:after,.cropit-preview:after,
.frame__upload:before,.cropit-preview:before {
 content: '';
 position: absolute;
 box-shadow: 5px 1px 14px 0px #00000038;
}


.frame__upload:after {
   
 width: 100%;
 height: 10px;
 left: 5px;
 bottom: 0;
 transform: translatey(100%) skewx(45deg);
}
.cropit-preview:after {
  width: calc(100% + 22px);
    height: 10px;
    left: -7px;
    bottom: -10px;
    transform: translatey(100%) skewx(45deg);
 }
   #canvasContainer[class*="black"]  .frame__upload:after,#cropmodal[class*="black"]  .cropit-preview:after{
      background:#333333;
   }
   #canvasContainer[class*="white"] .frame__upload:after,#cropmodal[class*="white"]  .cropit-preview:after{
      background:#858585;
   }
   #canvasContainer[class*="gold"] .frame__upload:after,#cropmodal[class*="gold"]  .cropit-preview:after{
    background:#8b7524;
 }
 #canvasContainer[class*="silver"] .frame__upload:after,#cropmodal[class*="silver"]  .cropit-preview:after{
  background:#808080;
}
.frame__upload:before {
 width: 10px;
 height: 100%;
 right: 0;
 transform: translatex(100%) skewy(45deg);
 top:  5px;
}
.cropit-preview:before {
  width: 10px;
  height: calc(100% + 22px);
  right: -10px;
  transform: translatex(100%) skewy(45deg);
  top: -7px;
 }
   #canvasContainer[class*="black"]  .frame__upload:before,#cropmodal[class*="black"]  .cropit-preview:before{
     
      background:#4D4D4D;
   }
   #canvasContainer[class*="white"] .frame__upload:before,#cropmodal[class*="white"]  .cropit-preview:before{
        background:#D0D0D0;
   }

   #canvasContainer[class*="gold"] .frame__upload:before,#cropmodal[class*="gold"]  .cropit-preview:before{
    background:#c09e31;
}


#canvasContainer[class*="silver"] .frame__upload:before,#cropmodal[class*="silver"]  .cropit-preview:before{
  background:#aeaeae;
}

#canvasContainer.classic .frame__upload  img[src=""],#canvasContainer.clasic .frame__upload  img[src=""] {
  display: none;
}
#frame__layout{position: relative;
   margin: 0;
   padding: 0;
   background: #fff;}
 #frame__layout li {
   background: #FFF;
   text-align: center;
   position: absolute !important;
   cursor: pointer;
   list-style: none;
   padding-right: 0;
   padding-left: 0;
   border: 1px dashed #cccccc;
   overflow: hidden;
   display: -webkit-box!important;
   display: -ms-flexbox!important;
   display: flex!important;
   -webkit-box-pack: center!important;
   -ms-flex-pack: center!important;
   justify-content: center!important;
   -webkit-box-align: center!important;
   -ms-flex-align: center!important;
   align-items: center!important;
}
#canvasContainer{
 display:flex;position: relative; 
}
.micromodal-slide.is-open {
   z-index: 99;
   position: relative;
}
.woocommerce div.product div.images .frame__upload  img {
   height: 100%;
   object-fit: cover;
   display:none;
}
#canvasContainer .phicon-crop{
  position: absolute;
  color: #fff;
  top: 15px;
  right: 15px;
  cursor: pointer;
  background: #000;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.photo__wrap.square{
  width: 200px;
  display: flex;
  flex-direction: row;
  height: 200px;
  position: relative;
}
.photo__wrap .phicon-plus{
  font-size: 60px;
  color: #ef5224;
}

.photo__wrap_clone{display:none}

.add-frame-btn{
  background-color: #d781d7!important;
}
.add-frame-btn:hover{
  background-color: #0075FF!important;
}
.woocommerce-variation-add-to-cart{
  column-gap: 15px;
}


.image-editor img{max-width:none!important}
.cropit-preview {
 position:relative;
  margin: 0 auto;

}

.img__del {
  background: transparent;
  border: 0;
  position: absolute;
  right: -15px;
  top: -15px;
  font-size: 21px;
  background: #C62828;
  color: #fff;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
table.variations tbody {
  display: flex;
  width: 100%;
  flex-direction: row-reverse;
    background-color:transparent !important;
    padding: 20px 9px;
    flex-wrap: wrap;
}
.woocommerce div.product form.cart .variations {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
table.variations tr:first-child {
  width: auto !important;
  margin-left: auto;
  text-align: right;
 
    align-items: center;

}
table.variations tr:last-child {
  width: 50% ;

}
table.variations tr {
display: flex;
width: 30%;
}
@media only screen and (max-width: 1160px) {
  .woocommerce div.product form.cart .variations {
    width: 98%;
   
}
  table.variations tr:last-child {
    width: 54% ;
  
  }
  table.variations tr {
    width: 36%;
}
}
@media only screen and (max-width: 990px) {
  table.variations tr {
    width: 100% !important; 
  }
  table.variations tbody {
    display: flex !important;
    flex-direction: column-reverse !important;
            align-items: center;
  }
  tbody tr::before {
    content: none !important;
  }
  table.variations tr {
    border: 0px !important;
    border-width: 0px 0px 0px 0px !important;
  }
  
  table.variations tbody {
  display: block; 
  }
  ul.variable-items-wrapper.image-variable-items-wrapper.wvs-style-squared {
    margin-bottom: 28px;
  }
}
th.label {
  padding: 4px;
}
table.variations th.label {
  display: flex !important;
  align-items: center;
}
#canvasContainer {
  justify-content: center;
}
div#framcontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:2% 4%
}
table.variations tr:hover {
  background: none !important;
}
td.value.woo-variation-items-wrapper {
  background: transparent !important;
}
table.variations th.label {
  background: transparent !important;
}
th.label {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
.e-con>.e-con-inner {
max-width: 100% !important; 
}

@media only screen and (max-width: 600px) {
div#framcontainer p {
  padding: 14px;
  text-align: center;
}

}
th.label {
  display: flex !important;
  flex-direction: column;
}
span.woo-selected-variation-item-name {
  display: none !important;
}
ul.variable-items-wrapper.image-variable-items-wrapper.wvs-style-squared li span {
  position: absolute;
  bottom: -30px;
  font-weight: 500;
}
 .woocommerce .elementor-106 .elementor-element.elementor-element-8dcb39e form.cart table.variations tr th, .woocommerce .elementor-106 .elementor-element.elementor-element-8dcb39e form.cart table.variations tr td {
background: #fff; 
} 
tr.pric-row td {
  font-size: 20px;
  font-weight: 700;
  color: #d72d83;
}
tbody {
  padding: 20px 0px !important;
}
.image-variable-item{
  background: transparent!important;
}
.image-variable-item:not(.selected){
  box-shadow: none!important;
}
th.label {
  /* margin-left: 25px; */
  margin: 0px 13px;
}
h1.entry-title {
  text-align: center;
  margin-top: 25px;
}

body.user-logout.single-product .variations_form.cart{
display:none
}

body.user-logout.single-product  .woocommerce {
  max-width: 900px;
  margin: auto;
  padding: 60px;
}

.loader span{
  position: absolute;
  left: 0;
  right: 0;
  margin: 15px auto;
  color:#fff;
  text-align: center;
}

.login_msg{text-align: center;
  margin: 15px;}