/*
Theme Name:   WMT Woop
Description:  Lite theme for Wordpress Woocommerce websites
Author:       Victor Sauhing
Author URI:   https://webmastech.com
Version:      1.0.0
*/


:root { 
  --color-1: #23a1ce;
  --color-2: #F77F00;
  --color-3: #3E3B33;
  --color-1-rgb: rgb(35, 161, 206);
  --color-2-rgb: rgb(247, 127, 0);
  --color-3-rgb: rgb(62, 59, 51);
  --font-1: Poppins;
  --font-2: Merienda;
}

/*------------------------------ BASE CSS ------------------------------*/
html { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px!important;  }
@media (max-width: 768px) {
  html { font-size: 14px!important;  }
}

html, body { margin: 0; padding: 0;}
figure{ margin: 0!important; }
a{color: var(--color-1);}

.wp-block { max-width: 1000px!important; }

.wmt_page, .edit-post-visual-editor{ background: #ffffff; overflow-x: hidden; font-family: var(--font-1);  font-size: 0.9rem; line-height: 1.7; color: #222;}
.wmt_page h1, .wmt_page h2, .wmt_page h3 , .wmt_page h4, .wmt_page h5, .edit-post-visual-editor h1, .edit-post-visual-editor h2, .edit-post-visual-editor h3 , .edit-post-visual-editor h4, .edit-post-visual-editor h5{ font-family: var(--font-2); font-weight: normal;}

::-moz-selection { background: #000000; color: #FFFFFF; }
::selection { background: #000000; color: #FFFFFF; }

/*------------------------------ GENERAL CSS ------------------------------*/
.w0{width:0%;} .w5{width:5%;} .w10{width:10%; } .w15{width:15%; } .w20{width:20%; } .w25{width:25%; } 
.w30{width:30%; } .w35{width:35%; } .w40{width:40%; } .w45{width:45%; } .w50{width:50%; } .w55{width:55%; } 
.w60{width:60%; } .w65{width:65%; } .w70{width:70%; } .w75{width:75%; } .w80{width:80%; } .w85{width:85%; } 
.w90{width:90%; }  .w95{width:95%; } .w100{width:100%; }

.h100{height:100%;}

.bgcolor-f{ background-color: #FFF;} .color-f, .color-f a{ color:#FFF!important; } 
.bgcolor-0{ background-color: #000;} .color-0, .color-0 a{ color:#000!important; }

.bgcolor-1{ background-color: var(--color-1); } .color-1, .color-1 a{ color: var(--color-1)!important; }
.bgcolor-2{ background-color: var(--color-2); } .color-2, .color-2 a{ color: var(--color-2)!important; }
.bgcolor-3{ background-color: var(--color-3); } .color-3, .color-3 a{ color: var(--color-3)!important; }
.bgcolor-4{ background-color: var(--color-4); } .color-4, .color-4 a{ color: var(--color-4)!important; }


.fs-xl{font-size: 4rem;}
.fs-lg{font-size: 3rem;}

.fs-7{font-size: 0.75rem;}
.fs-8{font-size: 0.625rem;}

.font-1{ font-family: var(--font-1)!important; }
.font-2{ font-family: var(--font-2)!important; }

.text-justify{text-align: justify;}

.cursor-pointer{cursor: pointer;}


.squared:after{content: ""; display: block; padding-bottom: 100%;}
.rectangled:after{content: ""; display: block; padding-bottom: 88%;}

.hover-scale-1, .hover-scale-2, .hover-scale-3{ transition: all .2s ease-in-out;  }
.hover-scale-1:hover{ transform: scale(1.03); }
.hover-scale-2:hover{ transform: scale(1.06); }
.hover-scale-3:hover{ transform: scale(1.1); }


.after-border:after{ content: ''; width: 80%; height: 0.20rem; max-width: 30rem; display: block; margin: 0.25rem auto 0 auto; }

.after-border.lh-sm:after{ margin-top: 0.65rem; }

.after-border.color-0:after{ background: #000; }
.after-border.color-f:after{ background: #fff; }
.after-border.color-1:after{ background: var(--color-1); }
.after-border.color-2:after{ background: var(--color-2); }
.after-border.color-3:after{ background: var(--color-3); }

.bshadow-light{ box-shadow: 0 0.275rem 1rem #00000020!important; }
.bshadow-inset-dark{ box-shadow: inset 0 0 1.875rem #000000!important; }
.bshadow-inset-light{ box-shadow: inset 0 0 0.625rem #00000055!important; }


.parallax{background-attachment: fixed!important;}
.isMobile .parallax { background-attachment: initial!important; }
.bgsize-cover{ background-size: cover; }

.bgsize-shrink { background-size: 110%; background-position: center center; animation: shrink 10s infinite alternate;}
@keyframes shrink {
  0% { background-size: 110%; }
  100% { background-size: 100%; }
}

@media (max-width: 768px){
  .bgsize-shrink { background-size: cover; animation: none; }
}


@keyframes right_to_left {
  0% { background-position: 100% center; }
  100% { background-position: 0% center; }
}



.lzb_faq .accordion-item { background: #f8f8f8; }
.lzb_faq .accordion-body p{margin: 0 0 0.5rem 0; }
.lzb_faq .accordion-button { font-size: 0.9rem; }
.lzb_faq .accordion-button:not(.collapsed) { background: #f8f8f8; font-weight: bold; text-decoration: underline; text-underline-offset: 0.175rem; }
.lzb_faq .accordion-button:focus { border-color: transparent; box-shadow: 0 0 0 transparent; }
.lzb_faq .accordion-button::before {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-right: 0.25rem;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
  transform: rotate(-90deg) scale(0.85);
}
.lzb_faq .accordion-button:not(.collapsed)::before {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: rotate(0deg) scale(0.75);
}

.lzb_faq .accordion-button::after{display:none;}

.lzb-container .lazyblock{background: transparent !important; padding: 0 !important; margin: 0 !important;}
.lzb-container .lzb-content-title{display: none !important;}

.material-icons, .material-symbols-outlined {
  font-size: inherit!important;
  transform: scale(1.1); 
  vertical-align: middle; /* Opcional para alinear con texto */
}

.required{
  color:#FF0000;
}

.table-ocl .material-name{ font-weight: normal;}
.table-ocl td{ text-align: center; vertical-align: middle;}
.table-ocl .col-no{ font-weight: bold; color: var(--color-2); }
.table-ocl .col-designation{ text-align: start; }
.table-ocl .col-length, .table-ocl .col-width{ white-space: nowrap; font-weight: bold;}
.table-ocl .col-length{ color: var(--color-2); }
.table-ocl .col-width{ color: var(--color-1); }

.table-ocl .edge-top{ border-top: 2px solid #000;}
.table-ocl .no-edge-top{ border-top: 2px dotted #aaa;}
.table-ocl .edge-bottom{ border-bottom: 2px solid #000;}
.table-ocl .no-edge-bottom{ border-bottom: 2px dotted #aaa;}

.table-ocl .edge-left{ border-left: 2px solid #000;}
.table-ocl .no-edge-left{ border-left: 2px dotted #aaa;}
.table-ocl .edge-right{ border-right: 2px solid #000;}
.table-ocl .no-edge-right{ border-right: 2px dotted #aaa;}


.table-ocl .has_edges{ border: 3px dashed #ccc; cursor: pointer; min-width: 3.7rem;}
.table-ocl .has_edges.l1{ border-top: 4px solid var(--color-2);}
.table-ocl .has_edges.l2{ border-bottom: 4px solid var(--color-2);}
.table-ocl .has_edges.w1{ border-left: 5px solid var(--color-1);}
.table-ocl .has_edges.w2{ border-right: 5px solid var(--color-1);}

.wmt-tooltip {
  --bs-tooltip-bg: #ffffec;
  --bs-tooltip-color: #000;
}
.wmt-tooltip span, .wmt-tooltip div{ 
  font-weight: bold;
}
.wmt-tooltip div{
  color: var(--color-2);
}
.wmt-tooltip span{
  color: var(--color-1);
}