/* 
All extra styles for customize and adapt
light boostrap dasboard
Claroflex 2017
*/

/* FONTS */
@font-face {
  font-family: 'Novecento Wide';
  src: url('../fonts/novecentowide-normal-webfont-webfont.woff2') format('woff2'),
       url('../fonts/novecentowide-normal-webfont-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.ff-novecento {
font-family: 'Novecento Wide', Helvetica, sans;
}

.fs-2 {
font-size: 2em;
}

/* UTILS */
.fullscreen {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: auto;
  z-index: -2;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
  width: 100%;
  height: 100%;
}

.claroflex-frame {
border: 1.2em solid #ed1c22;
}

.claroflex-frame.margin-bottom{
margin-bottom: 2em;
}

/* ENHANCED */
/* Login */
.card.card-login {
background-color: rgba(255,255,255,0.35);
}

.v-middle {
position: relative;
  top: 15%;
}

.card label.c-dark {
color: #333333;
}

/* Language Selector Form */
.navbar .navbar-nav > li > form#form-set-lang {
  padding: 10px 15px;
  margin: 10px 3px;
  position: relative;
}
.navbar .navbar-nav > li > form#form-set-lang select {
  background-color: #FFFFFF;
  border: 0px solid transparent;
  color: #9A9A9A;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  -o-text-overflow: '';
     text-overflow: '';
}
.navbar .navbar-nav > li > form#form-set-lang:hover i.fa.pe-7s-flag,
.navbar .navbar-nav > li > form#form-set-lang:focus i.fa.pe-7s-flag,
.navbar .navbar-nav > li > form#form-set-lang:hover select,
.navbar .navbar-nav > li > form#form-set-lang:focus select {
  cursor: pointer;
  color: #1DC7EA;
}

/* FORMS */
@media (min-width: 992px) {
  .card form.form-searcher [class*="col-"]:last-child {
      padding-right: 6px;
  }
  .card form.form-searcher [class*="col-"]:first-child {
      padding-left: 6px;
  }
}
.ui-autocomplete {
  z-index: 1070;
}
ul.errorlist {
  color: #FF4A55;
}
table.table > tbody tr.tr-alert {
 background-color: #f08080;
}
input.form-control.i-error{
background-color: #f08080;
}

p.p-form-field-warning {
outline: 2px solid #db2c36;
  padding: 10px;
}
/*SweetAlert2*/
.swal2-html-container, .swal2-actions button {
font-size: 1.6rem !important;
}
.swal2-default-outline{
box-shadow: 0px 0px 0.5px 3px #7cba15 !important; 
}
.swal2-toast-height{
  font-size: 1.6rem;
}
.swal2-toast-height-colored-success{
  background-color: #a5dc86 !important;
  font-size: 1.6rem;
  color:white;
}
.sign-swal2-html-container{
  text-align: start !important;
  font-size: 1.8rem !important;
}
.sign-swal2-title{
  font-size: 2.5rem !important;
}

.swal2-info-container{
  text-align: start !important;
}

/* overrides JQuery DATEPICKER */
.ui-widget-header {
border: 1px solid #db4865;
background: #ff6b7f url("images/ui-bg_dots-small_35_35414f_2x2.png") 50% 50% repeat;
color: #ffffff;
font-weight: bold;
}
.ui-datepicker-prev.ui-corner-all.ui-state-hover.ui-datepicker-prev-hover,
.ui-datepicker-next.ui-corner-all.ui-state-hover.ui-datepicker-next-hover {
background-color: #db4865;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #db4865;
  background: transparent url("images/ui-bg_dots-medium_80_ffff38_4x4.png") 50% 50% repeat;
  color: #363636;
}
.colored-toast.swal2-icon-success {
  background-color: #a5dc86 !important;
}
.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}
.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}

input.form-error, select.form-error {
  border: 1px #cc2222 solid;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
/* COLORS */
.c-dark {
color: #333333;
}

span.true {
  color: #5cb85c;
}
span.false {
  color: #ff4a55;
}

span.stock-caption-square {
  height: 1em;
  width: 1em;
  display: inline-block;
}
/* traffic-light */
.bg-green {
  background-color: #82ffa5;
}
.bg-intense-red {
  background-color: #cc2222;
}
.bg-red {
  background-color: #ff8282;
}
.bg-orange {
  background-color: #ffc082;
}
.bg-subcomponent {
  background-color: #6FE7C6;
}
.bg-transparent {
  background-color: transparent;
}
.border-surplus {
  border: 1px solid #82ffa5;
}

.bg-green-important {
    background-color: #82ffa5 !important;
}
.bg-intense-red-important {
    background-color: #cc2222 !important;
}

/* TABLES */
table.table-magnus {
display: block;
overflow-x: auto;
}

table.table-striped table.table-striped {
  background-color: #e9e9e9
}
ul.ul-table {
  list-style: none;
  padding-left: 0;
  font-size: 0.85em;
}
/* customizing overrides header tables font sizes*/
.table > thead > tr > th.fs-11-px {
  font-size: 11px;
}
.table > thead > tr > th.fs-10-px {
  font-size: 10px;
}
/* CREATE PROJECT SLIDE */
table.table-create-slide td.section-length input,
table.table-create-slide td.section-height input {
  width: 6em;
}
table.table-create-slide td.section-panels input,
table.table-create-slide td.section-tracks input {
  width: 4em;
}
table.table-create-slide td.section-profile input,
table.table-create-slide td.section-opening select {
  width: 7em;
}
table.table-create-slide td.section-direction select,
table.table-create-slide td.section-both-lock select {
  width: 10em;
}
#change-aluminium-section-container, #change-accesories-container, #change-aluminium-container, #change-rates-container {
  display:none
}
.alu-section-header, .rates-section-header{
  display: inline-flex;
  align-items: baseline;
}
/* visual rows for commertials (JORDI)*/

/*RED*/
.table-striped>tbody>tr.even.p-ask-transport,
.table-striped>tbody>tr.odd.p-ask-transport,
.table-striped>tbody>tr.odd.p-transport-quotation,
.table-striped>tbody>tr.even.p-accept-sign,
.table-striped>tbody>tr.odd.p-accept-sign,
.table-striped>tbody>tr.even.p-accept-transport,
.table-striped>tbody>tr.odd.p-accept-transport,
.table-striped>tbody>tr.even.p-confirmation-order,
.table-striped>tbody>tr.odd.p-confirmation-order,
.table-striped>tbody>tr.even.p-transport-quotation {
background-color: #cc2828;  
background-color: rgba(204, 40, 40, .55);
}
/*ORANGE*/
.table-striped>tbody>tr.even.p-start-manufacture,
.table-striped>tbody>tr.odd.p-start-manufacture,
.table-striped>tbody>tr.even.started-manufacture,
.table-striped>tbody>tr.odd.started-manufacture,
.table-striped>tbody>tr.even.paused-manufacture, 
.table-striped>tbody>tr.odd.paused-manufacture {
background-color: #f0ad4e;
background-color: rgba(240, 173, 78, .55);
}
/*GREEN*/
.table-striped>tbody>tr.even.finished-manufacture,
.table-striped>tbody>tr.odd.finished-manufacture {
background-color: #88e552;
background-color: rgba(136, 229, 82, .55);
}
/* data-toggle Checkboxes on tables */
.checkbox.checked .second-icon,
.radio.checked .second-icon {
  color: #5cb85c;
}
.checkbox.disabled.checked .second-icon,
.radio.disabled.checked .second-icon {
  color: #5cb85c;
  opacity: 0.7;
}

/* IMAGE EFFECTS */
figure.claro-link {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
/*  min-width: 230px;
max-width: 315px;*/
width: 100%;
color: #000000;
text-align: center;
-webkit-perspective: 50em;
perspective: 50em;
}
figure.claro-link * {
-webkit-box-sizing: padding-box;
        box-sizing: padding-box;
-webkit-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
}
figure.claro-link img {
max-width: 100%;
vertical-align: top;
}
figure.claro-link figcaption.computer {
top: 50%;
left: 20px;
right: 20px;
position: absolute;
opacity: 0;
z-index: 1;
}
figure.claro-link figcaption.mobile {
top: 25%;
  left: 20px;
  right: 20px;
  position: absolute;
  z-index: 1;
  background-color: rgba(255,255,255,0.4);
  padding-top: 1em;
  padding-bottom: 1em;
}
figure.claro-link h2,
figure.claro-link h4 {
margin: 0;
}
figure.claro-link h2 {
font-weight: 600;
}
figure.claro-link h4 {
font-weight: 400;
text-transform: uppercase;
}
figure.claro-link i {
font-size: 32px;
}
figure.claro-link:after {
/*background-color: rgba(255,255,255,0.4);*/
position: absolute;
content: "";
display: block;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 16px solid #db2c36;
-webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
-webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
-webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
opacity: 0;
}
figure.claro-link a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.claro-link.hover:hover figcaption,
figure.claro-link.hover:hover figcaption {
  opacity: 1;
}
figure.claro-link.hover:hover figcaption.computer,
figure.claro-link.hover:hover figcaption.computer {
-webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    transform: translateY(-50%);
opacity: 1;
/*  -webkit-transition-delay: 0.2s;
transition-delay: 0.2s;*/
}
figure.claro-link.hover:hover img {
-webkit-filter:blur(3px);
        filter:blur(3px);
}
figure.claro-link.hover:hover figcaption.mobile,
figure.claro-link.hover:hover figcaption.mobile {
opacity: 1;
}
figure.claro-link:hover:after {
-webkit-transform: rotateX(0);
        transform: rotateX(0);
opacity: 0.8;
}
/* for disabled links */
figure.claro-link.hover.disabled {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* Buttons */
.btn.btn-success.btn-success-solid {
color: #ffffff;
background-color: #87cb16;
}
.btn.btn-review.btn-review-solid {
  color: #ffffff;
  background-color: cornflowerblue;
  border-color: cornflowerblue;
}
.btn.btn-review.btn-review-solid:hover{
  border-color: rgb(20 59 135);
  background-color: #a4c5ff;
}
.btn.btn-comercial-check.btn-comercial-check-solid {
color: #ffffff;
background-color: grey;
}
.btn.btn-info.btn-info-solid {
color: #ffffff;
background-color: #1dc7ea;
}
.btn.btn-warning.btn-warning-solid {
color: #ffffff;
background-color: #f0ad4e;
}
.btn.btn-danger.btn-danger-solid {
color: #ffffff;
background-color: #dc3545;
}
.btn.btn-secondary.btn-secondary-solid {
color: #ffffff;
background-color: #313131;
}
#download-sage-button{
  border-color: #2da46c;
  color: #2da46c;
}
/* For to-top button */
#myBtn {
  display: unset;
  position: fixed;
  bottom: 7rem;
  right: 1.7rem;
  z-index: 99;
  font-size: 27px;
  border: none;
  outline: none;
  background-color: transparent;
  /*opacity: 0.2;*/
  color: black;
  cursor: pointer;
  /*padding: 15px;*/
  border-radius: 4px;
  }

  #myBtn i:hover {
  background-color: rgba(254, 40, 51, 1);
  border-radius: 30px;
  color:#17043A;
  }

  /* For to-bottom button */
  #myBtn2 {
  display: inline-block;
  position: fixed;
  bottom: 3rem;
  right: 1.7rem;
  z-index: 99;
  font-size: 27px;
  border: none;
  outline: none;
  background-color: transparent;
  color: black;
  cursor: pointer;
  /*opacity: 0.2;*/
  /*padding: 15px;*/
  border-radius: 4px;
  }
  
  #myBtn2 i:hover {
  background-color: rgba(254, 40, 51, 1);
  border-radius: 30px;
  color:#17043A;
  }

/* Order messages */
span.order-msg {
font-size: 1em;
/*color: grey;*/
}

a.h-link {
  text-decoration: none;
  color: grey;
  border: 1px solid grey;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  padding: 0.5em;
}

/* AJUSTMENT for MODAAL 
Its default z-index its 9999 and for notiify its 1031
We new to know it to understand this ugly important
We allow display Notify messages over Modaal

.modaal-wrapper {
  z-index: 1030 !important;
} */

.alert[data-notify="container"] {
  padding: 10px 10px 10px 20px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  z-index: 9999 !important;
}

/* LOADER */
.loader {
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.85);
  position: absolute;
  right: 0%;
  top: 0%;
  z-index: 1000;
}

/* INCIDENCE */
.remarks-incidence {
border-style: solid;
border-width: thick;
border-color: #884dff;
}
.remarks-incidence div.header {
padding-top:0px;
}
.remarks-incidence div.content {
background-color:#e6e6e6
}
.remarks-incidence h4 {
margin-top: 20px;
}

/* NOT ENOUGTH MATERIAL */
.not-enought-material {
border-style: solid;
border-width: thick;
border-color: #F1B560;
}
.not-enought-material div.header {
padding-top:0px;
}
.not-enought-material div.content {
background-color:#e6e6e6
}
.not-enought-material h4 {
margin-top: 20px;
}

/* PRIVACY-POLICY */
@media screen and (min-width:640px) {
.card.card-privacy {
padding-left: 3em;
padding-right: 3em;
}
}

@media screen and (max-width:640px) {
.card.card-privacy h5 {
  font-size: 1.1em;
}
.card.card-privacy p {
  font-size: 1em;
}
}

.card.card-privacy li {
margin-left: -1.5em;
}

/* PRIVACY-POLICY MODAL*/

.content.content-privacy-modal li {
list-style: none;
}

.content.content-privacy-modal li {
margin-left: -1.8em;
margin-right: 0.5em;
}

/* HAMBURGER MENU 15/07/2019 */
.navbar {
border: 0;
font-size: 16px;
-webkit-border-radius: 0;
        border-radius: 0; 
}
.navbar .navbar-hamburger-custom {
font-weight: 400;
margin: 5px 0px;
padding: 15px 15px;
font-size: 20px; 
}
@media screen and (max-width:991px) {
li.hamburger-menu-custom {
visibility: hidden;
display:none;
}
}
a.hamburger-button-custom {
cursor: w-resize;
}
a.hamburger-button-custom.active{
cursor: e-resize;
}
/* SIDEBAR */
.sidebar#sidebar-collapsed {
background:;
max-width: 4%;
text-align: center;
max-height: 100%;
}
.sidebar#sidebar-collapsed .nav{
margin-top: 0;
position: absolute;
}
.sidebar#sidebar-collapsed i{
font-size: 2em;
font-size: 28px;
float: initial;
line-height: 30px;
width: 30px;
text-align: center;
}
.sidebar#sidebar-collapsed li a p{
width: 95px;
height: 30px;
}
.sidebar#sidebar-collapsed li{
  left: 5%;
}
.sidebar#sidebar-collapsed .nav{
width: 100%;
}
.sidebar#sidebar-collapsed p {
visibility:hidden;
}
.sidebar#sidebar-collapsed img{
max-width: 100%;
}
.sidebar#sidebar-collapsed #logo-sidebar{
padding: 0;
}
.sidebar#sidebar-collapsed a{
margin: .3em;
padding: 0.5em;
height: 45px;
}
.sidebar#sidebar-collapsed .sidebar-wrapper {
max-width: 4%;
position: fixed;
overflow: hidden;
overflow-y: scroll;
padding-bottom: 0;
}
@media screen and (max-width:1400px) {
.sidebar#sidebar-collapsed .sidebar-wrapper {
  max-width: 5%;
}
.sidebar#sidebar-collapsed {
  max-width: 5%;

}
.main-panel.active {
  max-width: 95%;
}
}
.dropdown-submenu {
position: relative;
}

.dropdown-submenu ul li::marker {
content:"";
}
.padding-bottom-extra{
padding-bottom: 20px;
}
/*SIDEBAR SCROLL*/
.sidebar .sidebar-wrapper::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar
{
width: 2px;
background-color: #F5F5F5;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
/* MAIN PANEL WITH SIDEBAR COLLAPSED */
.main-panel.active {
width: 96%;
}

/*.main-panel.active .content{
z-index: -1;
}
*/
/*KIT ICONS MANAGEMENT*/
.sidebar#sidebar-collapsed a i.pe-7s-plugin#icon-kit-1 {
font-size: 1.60em;
margin-right:0em;
position:relative;
top: -0.3em;
left: -0.4em;
}
.sidebar#sidebar-collapsed a i.pe-7s-plugin#icon-kit-2 {
font-size: 1.6em;
margin-right:-1em;
position:relative;
bottom: -0.1em;
left: -1em;
}
@media screen and (max-width:1650px) {
.sidebar#sidebar-collapsed a i.pe-7s-plugin#icon-kit-1 {
  font-size: 1.60em;
  margin-right:0em;
  position:relative;
  float: left;
  top: -0.3em;
  left: -0.4em;
}
.sidebar#sidebar-collapsed a i.pe-7s-plugin#icon-kit-2 {
  font-size: 1.60em;
  margin-right:-1em;
  position:relative;
  float: right;
  width: 30%;
  bottom: -0.1em;
  left: -1.4em;
}
}
.pe-7s-plugin#icon-kit-1 {
font-size: 1.5em;
margin-right:0em;
position:relative;
top: -0.2em;
left: -0.2em;
}
.pe-7s-plugin#icon-kit-2 {
font-size: 1.5em;
margin-right:-1em;
position:relative;
bottom: -0.2em;
left: -1.2em;
}

/* LOGO navbar  */
.navbar-middle img{
width:100%;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 0em;
vertical-align: middle;
}
.navbar .navbar-brand{
width: 9em;
}

@media screen and (min-width:1921px) {
.navbar-middle{
  height: 0em;
  width: 18em;
  margin: 0.1em 31%;
}
}
@media screen and (max-width:1920px) {
.navbar-middle{
  height: 0em;
  width: 18em;
  margin: 0.1em 26%;
}
}
@media screen and (max-width:1764px) {
.navbar-middle{
  height: 0em;
  width: 18em;
  margin: 0.1em 20%;
}
}
@media screen and (max-width:1222px) {
.navbar-middle{
  height: 0em;
  width: 18em;
  margin: 0.1em 15%;
}
}
@media screen and (max-width:1222px) {
.navbar-middle{
  height: 0em;
  width: 18em;
  margin: 0.1em 15%;
}
}
@media screen and (max-width:1163px) {
.navbar-middle{
  height: 0em;
  width: 18em;
  margin: 0.1em 12%;
}
.navbar-middle img{
  width:100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: middle;
 }
} 
@media screen and (max-width:1099px){
.navbar-middle{
  height: 0em;
  width: 12em;
  margin: 0.1em 12%;
}
.navbar-middle img{
  width:100%;
  padding-top: 0.7em;
}
}
/* FIN HAMBURGER MENU 15/07/2019 */

/* CHANGE COMPONENTS QR SIZE */

.component_qr_small img{
width: 8rem;
}

/* CUBE GRID LOADER  15/12/2020 */
.sk-cube-grid {
width: 27vw;
height: 12vw;
margin: 33vh auto;
}

.sk-cube-grid .sk-cube {
width: 11%;
height: 25%;
background-color: #e20c15;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 4s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 4s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 1.9s;
animation-delay: 1.9s;
}
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4;
}
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.sk-cube-grid .sk-cube10 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sk-cube-grid .sk-cube11 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sk-cube-grid .sk-cube12 {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.sk-cube-grid .sk-cube13 {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-cube-grid .sk-cube14 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.sk-cube-grid .sk-cube15 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube16 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube17 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube18 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.sk-cube-grid .sk-cube19 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.sk-cube-grid .sk-cube20 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-cube-grid .sk-cube21 {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.sk-cube-grid .sk-cube22 {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
  -webkit-transform: scale3D(1, 1, 1);
          transform: scale3D(1, 1, 1);
} 35% {
  -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1); 
}
}

@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
  -webkit-transform: scale3D(1, 1, 1);
          transform: scale3D(1, 1, 1);
} 35% {
  -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1);
} 
}
/* FIN CUBE GRID LOADER  15/12/2020 */

.address_summary {
display: list-item; 
text-transform: uppercase; 
font-size: 12px; 
border-radius: 5px;
}
.address_summary:hover{
cursor:pointer;
}

.client_summary {
display: list-item; 
text-transform: uppercase; 
font-size: 12px; 
border-radius: 5px;
}
.client_summary:hover{
cursor:pointer;
}

.summary_fieldset {
min-width: 0; 
padding: 20px; 
margin: 1px; 
border: 1px solid #E3E3E3;
}

.modaal-ajax-update-pdf:hover{
background-color: #5cb85c;
color:white;
}

.btn-disabled{
border-color: grey !important;
color: grey;
}

.btn-disabled:hover{
color: grey;
}

.project-pdf-modal{
width:600px !important;
}
.project-pdf-modal .clearfix{
margin-top: 1em;
}

.pull-center, .detail-pull-center{
display: flex;
justify-content: center;
}
.detail-pull-center{
  margin-top: 25vh;
  text-align: center;
}
.detail-pull-center .card{
  width: 25vw;
}
.sidebar-items{
margin-left: 12px;
background: #c13f46;
width: 90%;
}
.sidebar-items-local{
margin-left: 12px;
background: linear-gradient(to bottom, #9368E9 0%, #943bea 100%);
background: #9368E9;
width: 90%;
}
.sidebar-menu-dropdown:focus{
  background-color: #eeeeee23!important;
}

/* .btn-success-wout-outline{color:#fff;background-color:#5cb85c;border-color:#4cae4c}

.btn-danger-wout-outline{color:#fff;background-color:#3085d6;border-color:#1d79ce}  */
.btn-success-wout-outline, .btn-danger-wout-outline {
box-shadow: 0px 0px 0.5px 3px #ffffff00 !important;;
}
.flex-center{
  display: flex !important;
  align-items: center;
}
/* DUO CSS*/
.glass-graphic, .glass-graphic-hidden{
  background:rgb(215, 245, 255) !important;
  border:1px solid rgb(140, 189, 205) !important;
  height: 150px; 
  width: 15px;
  text-align: center; 
  transform: rotate(180deg);
  /* border:1px solid rgb(85, 85, 255) !important; */
}
.glass-graphic-hidden{
  display:none;
  background:rgb(215, 245, 255) !important;
  border:1px solid rgb(140, 189, 205) !important;
  
} 
.glass-graphic-text{
  transform: rotate(180deg);
}
#air-gap-graphic{
  background:rgb(255, 214, 161) !important; 
  border: 1px solid rgb(228, 176, 108) !important;
  height: 100px ; 
  width: 50px ;
  text-align: center ; 
  transform:translateY(125px);
}
.glass-info{
  transform: translateY(50px);
  margin-left: 10px;
  margin-right: 10px;
}
.glass-options-row{
  display: flex;
  align-items: flex-end;
}
.row-duo, .vento-add-section{
  /* padding-left: 15px;
  padding-right: 15px; */
  display: flex;
  gap:15px;
}
.row-duo-margin{
  margin-bottom: 15px;
}
.boolean-centered{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: left;
  box-shadow: 0px 0px 0.5px 3px #ffffff00 !important;
}
.project-component-update{
  /* width: fit-content !important; */
  display: flex !important;
  align-items: center !important;
}
.project-component-update-pivot-slide{
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
}

.custom-flex-column{
  display:flex;
  flex-direction: column;
}
.custom-flex-row{
  display:flex;
  flex-direction: row;
  align-items: baseline;
}
.flex-wrap{
  flex-wrap: wrap;
}
.gap-1{
  gap: 1rem;
}
.gap-2{
  gap: 2rem;
}
.gap-3{
  gap: 3rem;
}
.gap-4{
  gap: 4rem;
}
.gap-5{
  gap: 5rem;
}
.align-items-end{
  align-items: end;
}
.uploaded-files{
  cursor: pointer;
}
.uploaded-files h4::after {
  content: '▶';
  margin-left: 10px
}
.uploaded-files[open] h4::after {
  content: '▼';
  margin-left: 10px;
}

/* MUESTRAS EN INVOICING */
.is-sample{
    /* outline-color: green !important; */
    /* outline-style: auto !important; */
    /* outline-offset: 0.9vw; */
    border: 2px solid green;
    border-radius: 5px;
    /* border-spacing: 10px; */
    padding: 10px;
}
span.sample-legend{
  height: 1em;
  width: 1em;
  display: inline-block;
  border: 2px solid green;
  border-radius: 3px;
}
/* START PROFILE DOCUMENTS */
.details-general, .details-lock, .details-profile, .details-sidelock, .details-packs-slide, .packing-lists-details, .uploaded-files{
  cursor: pointer;
}
.details-general ul, .details-lock ul, .details-profile ul{
  --icon-space: 1.3em;
  list-style: none;
}

.details-general li i, .details-lock ul li {
  font-size: 18px;
}
i+a {
  margin-left: 10px;
}
.false-title{
  font-size: x-large;
}
/* END PROFILE DOCUMENTS */

.options-details, .section-details{
  margin-left: 15px; 
}
.options-details, .section-details {
  list-style-type: none;
  position: relative;
  padding-left: 1.5em;
}
.options-details::before, .section-details::before {
  content: '▶';
  color: seagreen;
  position: absolute;
  left: 0;
  line-height: 1;
  font-size: 16px;
}
.options-main[open] > summary, .details-main[open] > summary {
  list-style-type: none;
  position: relative;
  padding-left: 1.5em;
}
.options-main[open] > summary::before, .details-main[open] > summary::before {
  content: '▼';
  color: seagreen;
  position: absolute;
  left: 0;
  font-size: 16px;
  line-height: 1;
}
.options-details{
  border-bottom: 1px solid lightgrey; 
  margin-top: 2rem; 
  cursor:pointer
}


details.details-main[open] form {
  animation: fadeIn 0.5s both ease-in;
}
.section-details:hover{
  cursor:pointer;
  }
.detail-container-1{
  zoom:0.9
}
.detail-container-2{
  zoom:0.7
}
.zip-folder, .zip-link{
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;

}
.zip-link{
  transition: transform .3s ease-out;
  color:grey;
}
.zip-link:hover{
  color:grey;
  transform: translate(0, -5px);
  filter: brightness(0.9);
}
.zip-folder{
  padding: 20px;
}
/* REPORTS */
/* td hr{
  margin-top: 0 ;
  margin-bottom: 0 ;
  border: 0 ;
  border-top: 1px dashed #868686;
  width: 80%;
} */
.table-text-center th, .table-text-center td  {
  text-align: center;
}
/* INFORMATION BUTTON AND TEXT IN INCIDENCES */
.show-info {
  display: block;
	position: relative;
	max-width: 30em;
	background-color: #fff;
	padding: 1.125em 1.5em;
	font-size: 1.1em;
	border-radius: 1rem;
  box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
}
.show-info::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	left: 3em;
	border: .75rem solid transparent;
	border-top: none;
	border-bottom-color: #fff;
	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}
.hide-info {
  display: none;
}
/* END INFORMATION BUTTON AND TEXT IN INCIDENCES */

/* USER PROFILE BUTTONS*/
.jump-button-row{
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1vh;
  width: 500px;
}
@media (width < 450px) {
  .jump-button-row{
    display: inline-flex;
    margin-top: 1vh;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .go-full-screen{
    display: none;
  }
}
.jump-to-time{
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  cursor: pointer;
  font-family: arial,sans-serif;
  font-size: 14px;
  height: 36px;
  line-height: 27px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
}
.jump-to-time:hover{
  border-color: #dadce0;
  box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
  color: #202124;
}
.jump-to-time:focus{
  border-color: #4285f4;
  outline: none;
}
.swal-fullscreen-video{
  max-width: 100% !important;
  width: auto !important; 
  display: flex !important;
  flex-direction: column;
  align-items: center;;
}
.swal-fullscreen-video video{
  width: 60vw;
  height: 65vh;

}
.swal-pack-components-size {
  width:950px !important;
}
.go-full-screen, .go-full-screen-light{
  background-color: #c2fbd7;
  border-radius: 50px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}


.go-full-screen:hover {
  transform: scale(1.05);
}
@media (width < 450px) {
  .go-full-screen{
    display: none;
  }
  #Pivot-video{
    width: 80vw;
  }
}
/* END USER PROFILE BUTTONS*/
/* MATERIAL ORDER GLASS STYLES */
.change-input-type{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  color: darkolivegreen;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  transition: 40ms linear all;
  -webkit-transition: 40ms linear all;
  -moz-transition: 40ms linear all;
  -o-transition: 40ms linear all;
}
.change-input-type:hover{
  cursor: pointer;
}
.change-input-type:active{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
/* END MATERIAL ORDER GLASS STYLES */
/* TOOLTIPS */
 .tooltip-pvp{
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.custom-tooltip .tooltip-pvp::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.custom-tooltip:hover .tooltip-pvp {
  visibility: visible;
  opacity: 1;
}
.tooltip-label:hover{
  cursor: help;
}

.tooltip-plisse-boolean{
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 55px;
  /* left: 50%; */
  margin-left: -60px;
  opacity: 1;
  transition: opacity 0.3s;
}
.tail {
  visibility: hidden;
  position:relative;
  bottom: 11px;
  left:-35px;
  width:0;
  height:0;
  border-color: #555 transparent transparent transparent;
  border-width:10px;
  border-style:solid;
}


.main-tooltip-plisse-blind .tooltip-plisse-boolean, .main-tooltip-plisse-blind .tail{
  visibility: visible;
  opacity: 1;
}

/* END TOOLTIPS */

/* COMERCIAL J CSS*/
#watermark {

  position: relative;
  overflow: hidden;
}
#watermark #watermark-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  color: #aeaeae21;
  font-size: 400px;
  pointer-events: none;
  /* transform:rotate(-30deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg); */
}

/* END COMERCIAL J CSS*/
.table-format-stock {
  margin-top: 1em;
  width: 25%;
  text-align: left;
}
.table-format-inventory {
  margin-top: 1em;
  width: 10%;
  text-align: left;
}
.left {
    float: left;
}
.right {
    float: right;
    text-align: -webkit-right;
}
.table-format-components {
  margin-top: 1em;
  width: 12%;
  text-align: left;
}
.table-format-translations, .table-format-location {
  margin-top: 1em;
  text-align: left;
}
.table-format-translations{
  width: 40%;
}
/* END COMERCIAL J CSS*/

/* INCIDENT_REPORT LIST ROWS */
.long-incident {
  border: 4px solid #ff0000 !important;
}
/* END INCIDENT_REPORT LIST ROWS */

/* VENTO */
.row-main-vento{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
}
fieldset:has(#preconfigButtons){
  margin-top: 1rem !important;
}
#preconfigForm{
  margin-top: 1rem;
}
#preConfigButtons{

  display: flex;
  justify-content: space-between;
  align-items: center;
}
#preConfigButtons input{
   visibility: hidden;
}
#preConfigButtons label{
  cursor: pointer;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  100% { opacity: 1; }
  0% { opacity: 0; }
}
#preConfigButtons input + label {
  border-bottom: 3px solid transparent;
  transition: border-bottom 0.5s;
}
#preConfigButtons input:checked + label {
  border-bottom: 3px solid seagreen;
}
.boolean-big-left input{
  width: 4rem;
  height: fill-available;
  height: -moz-fill-available;
  height: -webkit-fill-available;
}
.vento-add-section{
  justify-content: flex-end; /* tiene la regla flex con la clase row-duo arriba en la línea 1070 */
}
#table-sections{
  text-align: center;
}
#table-sections th{
  text-align: center;
  color: black;
  font-weight: 600;
}
#table-sections thead {
  /* background-color: antiquewhite !important; */
  /* background-color: #ffd0bf !important; */
  background-color: lightgray !important;
}
.card .hide-no-loading{
  box-shadow: 0px 0px 3px 1px #c0bfbf;

}
.td-editable:focus-visible{
  outline: 1.5pt solid darkolivegreen;
  border-radius: 10px;
  background-color: #d4f6d4;
}
.accesories-append-component{
  cursor: pointer;
}
.accesories-append-component:hover{
  transform: translateY(2px);
  transition: 0.2s;
  background-color: #cbdbcf;
}

/* Projects */
.product-summary{
  background-color: #e1e1e1; color: #fb404b;
}
.product-summary h2{
  width: 10vw;
  text-align: center;
}
.product-summary:hover, details[open]:has(.product-summary) .product-summary{
  content:'';
  opacity: 1;
  cursor:pointer;
  color: whitesmoke;
  background: rgb(251,64,75);
  background: -moz-linear-gradient(90deg, rgba(251,64,75,1) 0%, rgba(225,225,225,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(251,64,75,1) 0%, rgba(225,225,225,1) 100%);
  background: linear-gradient(90deg, rgba(251,64,75,1) 0%, rgba(225,225,225,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb404b",endColorstr="#e1e1e1",GradientType=1);
  -webkit-transition: all  0.4s ease-out;
  -ms-transition: all  0.4s ease-out;
  transition: all 0.4s ease-out;
  border-radius: 20px;

}
.disabled-link{
  pointer-events: none;
  cursor: default;
  color: grey !important;
  text-decoration: none !important;
}
/* PROGRESS BAR CSS */
th.tracking_status{
  padding-left: 59px !important;
}
.progress-bar {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.progress-bar > * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.progress-bar-ul {
  display: flex;
  padding-inline-start: 0px !important;
}

.progress-bar-ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.progress-bar-ul li .icons {
  font-size: 25px;
  color: #bbbbaa;
  margin: 0 60px;
}

.progress-bar-ul li .label {
  font-family: sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  color: #bbbbaa;
}

.progress-bar-ul li .step {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #bbbbaa;
  margin: 16px 0 10px;
  display: grid;
  place-items: center;
  color: ghostwhite;
  position: relative;
}

.step::after {
  content: "";
  position: absolute;
  width: 128px;
  height: 3px;
  background-color: #bbbbaa;
  right: 30px;
}

.first::after {
  width: 0;
  height: 0;
}

.progress-bar-ul li .step .awesome {
  display: none; 
}

.progress-bar-ul li .step p {
  font-size: 18px;
}

.progress-bar-ul li .active {
  background-color: #1b761b;
}

.progress-bar-ul li .active::after {
  background-color: #1b761b;

}

.progress-bar-ul li .active p {
  display: none;
}

.progress-bar-ul li .label-active {
  font-family: sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  color: #1b761b;
}

.progress-bar-ul li .icons-active {
  font-size: 25px;
  color: #1b761b;
  margin: 0 60px;
}

.progress-bar-ul li .active .awesome {
  display: flex;
}

.fa-check:before{
  margin-top: auto;
}
/* END PROGRESS BAR CSS */

/* REPORTS HOME */
.product-summary{
  background-color: #e1e1e1; color: #fb404b;
}
.product-summary h2{
  width: 10vw;
  text-align: center;
}
.product-summary:hover, details[open]:has(.product-summary) .product-summary{
  content:'';
  opacity: 1;
  cursor:pointer;
  color: whitesmoke;
  background: rgb(251,64,75);
  background: -moz-linear-gradient(90deg, rgba(251,64,75,1) 0%, rgba(225,225,225,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(251,64,75,1) 0%, rgba(225,225,225,1) 100%);
  background: linear-gradient(90deg, rgba(251,64,75,1) 0%, rgba(225,225,225,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb404b",endColorstr="#e1e1e1",GradientType=1);
  -webkit-transition: all  0.4s ease-out;
  -ms-transition: all  0.4s ease-out;
  transition: all 0.4s ease-out;
  border-radius: 20px;

}
/* END REPORTS HOME */
/* QUOTE EXTRAS DETAILS */
@keyframes bounce {
0%   { transform: translateY(0); }
50%  { transform: translateY(-5px); }
100% { transform: translateY(0); }
}

.details-sidelock summary, .details-packs-slide summary {
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
}
.details-sidelock summary:hover, .details-packs-slide summary:hover {
  animation-name: bounce;
  animation-timing-function: linear;
}
.details-sidelock summary, .details-packs-slide summary{
  margin-top:1rem; 
  width: 26vw;
}
.details-sidelock h6, .details-packs-slide h6 {
  text-align: left; 
  border-bottom: 1px solid lightgray;
}
/* /QUOTE EXTRAS DETAILS */
/* ERROR HTML DETAILS */
.error-content-buttons{
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 14px;
}
/* .error-details{
  display: list-item;
  list-style-type: '▶ ';
}

.error-details[open] > summary{
  list-style-type: '▼';
} */
.error-content{
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  text-align: left;
  background-color: linen;
  padding: 1rem;
  overflow: hidden;
  border-top: 1px solid lightgray;
}
.error-content div{
  overflow: hidden;
  /* white-space: nowrap; */
}
.error-summary{
  display: list-item; 
  cursor: pointer;
}
/* /ERROR HTML DETAILS */
/* COSTCONSUMPTION CHILDREN */
.father-row{
  background-color: antiquewhite;
}
/* /COSTCONSUMPTION CHILDREN */

.loader-timetracker {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.loader-timetracker::after,
.loader-timetracker::before {
  content: '';  
  box-sizing: border-box;
  width: 65px;
  height: 40px;
  border: 6px solid #808080;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotationBreak 3s ease-in-out infinite alternate;
}
.loader-timetracker::after {
  border-color: #FF3D00;
  animation-direction: alternate-reverse;
}

@keyframes rotationBreak {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 /* GENERATE JOINED DELIVERY NOTE */
.invoiced-button-table-container, .delivery-note-buttons-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.delivery-note-buttons-container{
  gap: 1rem;
}
.delivery-checkbox-th, .delivery-checkbox-td, .packing-checkbox-th, .packing-checkbox-td, 
.parcel-quantity-th, .parcel-quantity-td,
.sub-parcel-number-th, .sub-parcel-number-td, .has-sub-parcel-container, 
.sub-parcel-total-dimensions-th, .sub-parcel-total-dimensions-invisible,
.sub-parcel-gross-weight-th, .sub-parcel-gross-weight-invisible, .parcel-options-th, .parcel-options-td{
  display: none;
}
.sub-parcel-total-dimensions-visible, .sub-parcel-gross-weight-visible{
  display: table-cell;
}
 /* WAREHOUSE COMPONENTS */
#table-remarks thead{
  display: table !important; 
  width: 100% !important;
  table-layout: fixed !important;
}
.tbody-scroll{
  display: block !important;
  max-height: 300px !important; 
  overflow-y: scroll !important;
 }
.tbody-scroll tr{
  display: table !important;
  width: 100% !important; 
  table-layout: fixed !important;
  word-wrap: break-word;
}
.eye-warehouse{
  margin-top: 1rem !important;
  cursor: pointer !important;
}
.filter-menu{
  padding:2rem;
}
 /* /WAREHOUSE COMPONENTS */
/* PIVOT THINGS */
.plisse-blind-fields {
  display: none; 
  transform: scale(0); 
  transition: transform 0.3s ease, opacity 0.3s ease; 
  opacity: 0;
}
.plisse-blind-fields.show {
  display: block; 
  transform: scale(1);
  opacity: 1; 
}
.door-lock-disabled{
  pointer-events: none;
}
/* //PIVOT THINGS */
/* PLISSE BLIND */
.plisse-flex-row{
  display:flex;
  flex-direction: row;
  align-items: center;
}
.modaal-container{
 border-radius:10px !important;  /* para todos los modales de sección */
}
.icon-green{
  color:#1b761b
}
.icon-red{
  color:#cc2828
}
.title-row{
  display: flex;
  gap: 14px;
}
.simplify-panels{
  display:none
}

.no-highlight {
  color: #9A9A9A;
  transform: scale(1);
}

.highlight {
  color: green;
  animation: breathe 3s infinite linear;
}

@keyframes breathe {
  0%, 100% {
    font-size: 14px; /* Original size */
  }
  50% {
    font-size: 18px; /* Larger size */
  }
}
#project-chosen-link[data-title]:hover::after{
  content: attr(data-title);
  position: absolute;
  top: 40%;
  left: 9%;
}
/* //PLISSE BLIND */

/* MARK: SWAL and TOAST STYLES */
.swal-font-size-medium{
  font-size: medium !important;
}
.colored-toast, .swal-font-size-2rem {
  font-size: 2rem !important;
}
.colored-toast.swal2-icon-success {
  background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}

.colored-toast .swal2-title {
  color: white;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}

.slide-swal-select{
  font-size: medium !important;
  background-color: #FFFFFF;
  border: 1px solid #E3E3E3;
  border-radius: 4px;
  color: #565656;
  padding: 8px 12px;
  height: 40px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.swal2-popup:has( .slide-swal-select){
  height: 25vh;
  width: 16vw;
  padding: 20px;
}

/* PACKING LIST STYLES */
.table-border-grey-radious{
  border-collapse: separate;
  border-radius: 7px;
  border-spacing: 2px 0.3rem;
  overflow: hidden;
  border: 1px solid darkgray;
  z-index: 0;
  position: relative;
}
.table-top-border-ddd{
  border-top: 1px solid #ddd;

}
.td-grey-light-grey{
 background-color: lightgray;
}
.td-paragraph-bold-black{
  color:#333; 
  font-weight: 900;
}
.th-color-333-background-grey{
  color: #333 !important;
  background: rgb(190, 190, 190);
  font-weight: bold !important;
}
.packing-checkbox{
  width: 3rem;
  height: 3rem;
}
.b-right-grey{
  border-right: 1px solid lightgray;

}
.d-flex-row-content-center{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.align-start{
  align-items: flex-start;
}
.align-end{
  align-items: flex-end;
}
.justify-flex-start{
  justify-content: flex-start;
}
.justify-flex-end{
  justify-content: flex-end;
}
.justify-content-evenly{
  justify-content: space-evenly;
}
.warehouse-cells-range{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: start;
  gap: 2rem;
}
.td-10-per{
  width:10%;
}
.td-70-per{
  width:70%;
}
.fake-header{
  background-color: lightgrey;
  font-weight: bold;
}
.add-packing-buttons-container-column{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.add-packing-buttons-container-row{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}
.is-disabled{
  pointer-events: none;
  color: grey;
  border-color: grey !important;
  cursor: not-allowed !important;
}

.parcel-odd{
  background-color: lightgrey;
}

.parcel{
  border-right: 2px solid lightgrey;
}
tr:has(td.parcel) {
  border-top: 2px solid lightgrey !important;
}
.add-packing-buttons-container {
  position: relative; 
  margin: 20px;
}

.floating-container {
  position: fixed;
  top: 20px; 
  right: 20px;
  display: none; 
  background: white; 
  padding: 10px; 
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  z-index: 999; 
  border-radius: 10px;
}
.floating-container-row{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}
#id_total_parcels, #id_total_net_weight, #id_total_gross_weight{
  text-align: center;
}
#id_total_net_weight{
  pointer-events: none;
  border: none;
}
.dimgray-bold{
  color: dimgray;
  font-weight: 900;
}
.pdf-packing-table{
  display: inline-flex;
  width: 100%;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}
.hideModal{
  display: none;
}
.showModal{
  display: inline-flex;
  position: fixed;
  top: 10%;
  flex-direction: column;
  transition: all .3s ease-in-out;
  min-width: 50%;
  max-width: 100%;
  align-items: center;
}
.modal-container{
    width: 100vw;
    height: 100vh;
    background: #0000006b;
    top: 0;
    left: 0;
    position: fixed;
    min-width: 50%;
}
.packing-lists-details{
  display: list-item;
  list-style-type: disclosure-closed;
  font-size: 16px;
  margin: 0 3% 0 3%;
  transition:0.5s;
}
.packing-lists-details[open]{
  list-style-type: disclosure-open !important;
}
.packing-lists-details[open] table{
  animation: fadeIn 0.5s both ease-in;
}
.packing-lists-details table{
  animation: fadeOut 0.5s both ease-in;
}
.white-space-pre-wrap{
  white-space: pre-wrap;
}
.close-packing-button {
  width: 4rem;
  height: 4rem;
  margin: 5px;
  padding: 1% 1.5%;
  margin-left: 95%;
  position: relative;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: 0.5s;
}

.close-packing-button:hover {
  color: white;
  font-weight: bold;
  background-color: lightcoral;
  border-radius: 15px;
}

.packing-table-container{
  max-height: 300px; /* Set the maximum height for the table container */
  overflow-y: auto;
}

.component-action{
  padding: 12px 8px !important;
}
/* /PACKING LIST STYLES */
.tr-border-top td{
  border-top: 1px solid grey !important;
}
.text-white {
  color: white;
}

/* LIGHT QUOTE */
.card-1, .card-2, .card-3, .card-4{
  width: 80vw;
}
.light-form-container, .charac-form-container{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: inherit;
  align-items: stretch;
  
}
.charac-form-container{
  width: auto;

}
.hide-card{
  display:none !important;
}
.light-form-buttons{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 2rem;
  /* flex-wrap: wrap; */
  justify-content: center;
  height: fit-content;
  width: inherit;
}
.light-index{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  height: 77vh;
  margin-left: 2rem;
  border-left: 1px solid #eaeaea;
  margin-bottom: 1rem;
}
.light-index .index-link{
  margin-left: 1rem;
  color: grey;
  cursor: pointer;
}
.selected{
  margin-left: 2rem !important;
  color: #1DC7EA !important;
  text-decoration: underline 1px #1DC7EA !important;
  text-underline-offset: 1rem;
  padding-right: 1rem;
  transition: text-decoration-color 0.5s ease-in-out, text-underline-offset 0.5s ease-in-out;
}
.colour-fields-container{
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  min-width: 65rem;
}
#sliding-surface-container{
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  min-width: fit-content; 
  align-items: flex-end;
  gap:4rem;
}
#pivot-charac-container{
  display: flex;
  flex-direction: column-reverse;
  margin-top: 6rem;
}
.img-title-container{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}
#sliding-surface-container #surface-black,
#sliding-surface-container #surface-white,
#sliding-surface-container #surface-grey{
  width: 7rem;
  background-color: white;
  text-align: center;
  font-size: 12px;
}
#sliding-surface-container #surface-black{
  border: 4px solid #555;
}
#sliding-surface-container #surface-white{
  border: 4px solidwhite;
}
#sliding-surface-container #surface-grey{
  border: 4px solid grey;
}

/* MARK: COMMISSIONS */
.commissions-h3{
  margin-left:2rem;
}
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
}
.col-md-4:has(#not-paid){
  width: auto !important;
}
.commissions-goto-button.active{
  /* border: 1px solid #1b761b !important; */
  background-color: #1b761b;
  color:#ffffff;
}
.commissions-download-container {
  margin: 2rem;
}
.commissions-table-container table, .commissions-link-container{
  margin-left: 2rem;
}
.commissions-table-container table{
  width: min-content;
}
.commissions-table-container caption{
  border-bottom: 1px solid #c4c4c4;
}
.commissions-link-container a {
  border: 0;
  border-radius: 0%;
  background-color: #eaeaea;
}
.commissions-link-container a:hover {
  background-color: #797979;
  color: #ffff;
}
.confirm-commission-td:hover, 
.action-commission-td:hover, 
.commission-user-td:hover{
  cursor: pointer;
  color: #f8bb86;
  font-weight: 500;
}
.confirm-commission-td i,
.action-commission-td i{
  font-size: large;
}
.commissionCheck{
  color:green
}  
.commission-form-control{
  border-radius: 4px 4px 0 0;
  background-color: #FFFFFF;
  border: 1px solid #E3E3E3;
  border-radius: 4px;
  color: #565656;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
}
.is-delayed{
  color:#f8bb86;
}
#commissions-legend{
  white-space: nowrap;

}
.space-evenly{
  justify-content: space-evenly;
}
/* Scrollable wrapper instead of blocking table parts */
.table-wrapper {
  max-height: 45rem;
  overflow-y: auto;
}

/* Ensure all tables fill the container properly */
#commission-orders-table,
#current-commission-table,
#delayed-commission-orders-table,
#not-paid-table,
#paid-table,
#pending {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Normalize cell widths and prevent overflow */
#commission-orders-table th,
#commission-orders-table td,
#delayed-commission-orders-table thead th,
#delayed-commission-orders-table thead td,
#current-commission-table th,
#current-commission-table td,
#not-paid-table th,
#not-paid-table td,
#paid-table th,
#paid-table td,
#pending th,
#pending td {
  padding: 0.75rem;

  box-sizing: border-box;
  word-wrap: break-word;
  text-align: left;
}

/* Optional: Fix header alignment if sticky headers are needed */
#pending th, #paid-table th, #not-paid-table th, #commission-orders-table thead th, #delayed-commission-orders-table thead th {

  background-color: #ffffff; /* Solid background for visibility */
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* MARK: END COMMISSIONS */
.components-buttons-container{
  gap:2rem;
}
.components-buttons-subcontainer, .components-action-container{
  display: flex;
  gap:2rem;
}
.components-buttons-subcontainer{
  flex-direction: column;
}
.components-action-container{
  flex-direction: row;
}
.components-buttons-subcontainer .fake-title{
  border-bottom: 1px solid black;
  max-width: 10rem;
  font-weight: bold;
}
/* slide */
.hideStripOverlap{
  animation: fadeIn 0.3s both ease-in;
}
.showStripOverlap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  animation: fadeIn 0.3s both ease-in;
}
.center-space-around{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.swal-fire-custom-width{
  width: 70vw;
}
.swal-fire-custom-width th{
  text-align: center;
}
.swal-fire-custom-width caption{
  text-align: left;
  font-weight: bold;
}
.extra-meters-container{
  display:none;
}
.swal-fire-text-left{
  text-align: left;
}
/* company dialog style */
#company-conditions-frame{
  width: 100%;
  height: 75vh;
}
#upload-company-conditions-dialog{
  border: none;
  border-radius: 2rem;
  padding: 3rem;
}

/* logistics ai button */
#auto-quote-btn{
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: 2px solid transparent;
}

#auto-quote-btn > i {
  color: #6b21a8;
  font-size: 18px;
  text-shadow: 0 0 6px rgba(59,130,246,0.25);
}

/* right-edge animated bar */
#auto-quote-btn::before{
  content: "";
  position: absolute;
  top: -3px;       /* extend a bit past top */
  right: 0;        /* anchored to right edge */
  bottom: -3px;    /* extend a bit past bottom */
  width: 6px;      /* thickness of the animated border */
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  background: linear-gradient(180deg, #3b82f6, #6b21a8, #3b82f6);
  background-size: 200% 200%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* hover: show and animate the gradient */
#auto-quote-btn:hover::before{
  opacity: 1;
  animation: borderShift 2s linear infinite;
}

/* icon hover glow */
#auto-quote-btn:hover > i{
  color: #6b21a8;
  text-shadow: 0 0 10px rgba(59,130,246,0.6), 0 0 4px rgba(107,33,168,0.25);
}

@keyframes borderShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
/* END logistics ai button */
/* MARK: COMPONENTS LOCATION */
.racks-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: start;
}

.rack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cells {
  display: grid;
  grid-template-columns: repeat(8, 90px); /* 8 columnas por fila visual */
  grid-auto-rows: 40px;
  gap: 8px;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 6px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.cell:focus,
.cell.active {
  outline: 3px solid #4a90e2;
}

.rack-label {
  margin-top: 8px;
  font-weight: 600;
}
.rack .level-label {
  width: 100%;
  text-align: center;
  background: #f7f7f7;
}

/* Blueprint warehouse */
/* Plano: grid con espacios transparentes */
.plano-grid, .plano-grid-detail {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 60px;
  gap:8px;
  align-items:stretch;
  width:100%;
  max-width:900px;
  padding-left: 40px;
}
.plano-grid-detail{
grid-template-columns: repeat(8, 1fr);
}

/* Estantería vertical por defecto (1 columna x varias filas si quieres) */
.estante {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #999;
  border-radius:4px;
  padding:0.25rem;
  background: transparent; /* sin background en el plano */
}

/* Estantería horizontal (ocupa varias columnas) */
.estante-horizontal { grid-column: span 2; }

/* Zonas no interactivas: sin background, con borde punteado opcional */
.no-interactiva{
  text-align: center;
}
.zona { display:flex; align-items:center; justify-content:center; border:1px dashed #bbb; color:#444; background:transparent; pointer-events:none; }
.mesa {
      grid-row-start: 2;
      grid-row-end: 4;
      grid-column-start: 4;
      grid-column-end: 5;
  }

/* Espacio vacío (sin background ni borde) */
.espacio { background:transparent; border:none; grid-area: none;}

/* Resaltado: solo cambia color de la letra */
.plano-grid .selected .label,
.plano-grid .selected > .label {
  color:#d9534f; /* color de resalte para la letra */
  font-weight:700;
}

/* Etiqueta dentro de estantes */
.label { color:#222; transition: color .12s ease; }

.estante-compartida {
  display:flex;
  border:1px solid #999;
  border-radius:6px;
  overflow:hidden; /* para que parezca un único bloque */
  background:transparent;
}
.estante-vertical{
  grid-row: span 3;
}

/* cada lado ocupa la mitad del bloque */
.estante-compartida .lado {
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid rgba(0,0,0,0.05); /* separación sutil */
}

/* quitar borde izquierdo en el primer lado */
.estante-compartida .lado.left { border-left:none; }

/* resaltado por lado: solo cambia color de la letra */
.estante-compartida .lado.selected .label { color:#d9534f; font-weight:700; }
.estante-k{
  grid-column: 3 / 4;
  grid-row: 4 / 7;
}
.estante-j{
  grid-column: 4 / 6;
  grid-row: 6 / 7;
}
.selected-rack{
  background-color: #eba68b;
}
#reset-location{
  margin-bottom: 0.5rem;
}
#location-modaal{
    display: none;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100%;
    opacity: 0;
    z-index: 1000;
    opacity: 1;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    transition: all .3s ease-in-out;
    border-width: 0;

}
#location-modaal .close{
  opacity: 1;
  margin-top: 1rem;
  font-size: 4rem;
}
.warehouse-layout-container{
  display: block;
  max-height: 80vh; 
  overflow-y: scroll;
}
/* END COMPONENTS LOCATION */
.htmx-request .htmx-loading {
    display: block !important;
}

.htmx-request.js-load-more,
.htmx-request .js-load-more {
    opacity: 0.6;
    pointer-events: none;
}
/* kit packaging styles */
.table-kit-add-packaging{
  background-color: #ffffff;
  border: 1px solid #cacaca;
  border-collapse: unset;
  border-radius: 2rem;
}
.table-kit-add-packaging td {
  border-top: none !important;
}
/* end kit packaging styles */

/* QUOTE LIST ESTIMATED TIME */
.estimated-manufacturing-entry-date{
  color: #ED8D00;
}
.estimated-manufacturing-entry-date:hover, .estimated-manufacturing-entry-date:focus{
  color: #dc8400;
}
/* END QUOTE LIST ESTIMATED TIME */
/* QUOTE LIST PROBABILITY MANUFACTURE */
.probability-manufacture{
  color: #ED8D00;
}
.probability-manufacture:hover, .probability-manufacture:focus{
  color: #dc8400;
}
/* END QUOTE LIST ESTIMATED TIME */