.f-size-08 { font-size: 0.8rem; }
.f-size-09 { font-size: 0.9rem; }
.f-size-1 { font-size: 1rem;}

.icona_ajuda { font-size: 1.3rem; color: #afafaf}
.titol-pregunta { border-bottom: 1px solid #9e9e9e; font-size: 1.5rem; font-weight: 300; padding-bottom: 0.5rem}
.titol-pregunta-sm { font-size: 0.8rem;  padding-bottom: 0;  font-weight: 400;}
.ico-minus { font-weight: 800; font-size: 2rem; cursor: pointer;}
.ico-minus-sm { font-size: 1rem;}

.titol-pregunta.color-golmar { border-color: #fa6400}
.color-golmar { color: #fa6400}
.color-gris { color: #808080}

.img-btn { border: 10px solid #ededed; cursor: pointer;}
.img-btn:hover, .img-btn-active { border-color: #fa6400}

.pregunta-content { padding: 2rem 0; font-size: 0.8rem}
.opcio-btn { aspect-ratio: 1 / 1; background-size: contain; border: 1px solid #9e9e9e; border-radius: 0.5rem!important; background-repeat: no-repeat; background-position: center;}
.opcio-btn:hover,  .opcio-btn.active{ border: 2px solid #fa6400; -webkit-box-shadow: 0px 0px 20px 0px rgba(158,158,158,0.6);
  -moz-box-shadow: 0px 0px 20px 0px rgba(158,158,158,0.6);
  box-shadow: 0px 0px 20px 0px rgba(158,158,158,0.6); cursor: pointer}

.opcio-btn.disabled { pointer-events:none; opacity: 0.7; }

.opcio-btn-fons { background-size: cover}

.option-btn-sistema { aspect-ratio: 1/0.9;
  background-repeat: no-repeat;
  background-color: #FFF;}

.opcio-btn-placa { aspect-ratio: 1/2; background-position: center 40%; background-size: 95%}
.opcio-btn-padding { background-size: calc(100% - 22px);}

.option-btn-sistema p { margin-bottom: 0.2rem; margin-top: 0.6rem; font-size: 0.9rem; font-weight: 800; text-transform: uppercase;}

.bloc-bg-shadow { -webkit-box-shadow: 0px 5px 43px 5px rgba(158,158,158,0.36);
  -moz-box-shadow: 0px 5px 43px 5px rgba(158,158,158,0.36);
  box-shadow: 0px 5px 43px 5px rgba(158,158,158,0.36); background-color: #f7f7f7; border-radius: 1.2rem!important;}

.text-ajuda-1 { font-size: 0.9rem; font-weight: bold; }

.btn-primary {
  background-color: #fa6400 !important; padding: .45rem 1.6rem; border-color: #fa6400 !important; border-radius: 2rem; font-size: 0.8rem; font-weight: 800;
}

.form-control { border-color: #989898 !important}

.btn-modal { border-radius: .25rem; font-size: .8rem; color: #fa6400; border: 1px solid #fa6400; padding: .575rem .75rem}

.modal-content { border-radius: .45rem !important;}
.modal-header { border: 0 !important}

.unidad-interior p { height: 60px;}
.unidad-interior-img { border-radius: .45rem !important; border: 1px solid #989898; padding: 1.2rem; position: relative; height: 180px;     background-size: contain;
  background-position: center;
  background-repeat: no-repeat;}
.unidad-interior-img a { position: absolute; right: 4px; width: 15px; top: 0}

.icos { height: 25px}
.icos img { max-height: 100%;}

.comptador input[type=number] { width: 40px; text-align: center; font-size: 0.8rem; border: 0}
.comptador { -webkit-box-shadow: 0px 4px 4px 0px rgba(158,158,158,0.5);
  -moz-box-shadow: 0px 4px 4px 0px rgba(158,158,158,0.5);
  box-shadow: 0px 4px 4px 0px rgba(158,158,158,0.5); background-color: #f1f1f1; border-radius: 0.2rem!important; border: 0}
.comptador .restar-quantitat, .comptador .sumar-quantitat { border: 0; color: #808080; font-size: 0.8rem;}

.titol-accessos {
  text-transform: uppercase; font-size: 1.1rem; font-weight: 300; color: #808080
}

.comptador-accessos input[type=number] { width: 80px; text-align: center; font-size: 4rem; border: 0; background-color: transparent; color: #808080; font-weight: 300;}
.comptador-accessos .restar-quantitat, .comptador-accessos .sumar-quantitat { border: 0; color: #fa6400; font-size: 3rem; font-weight: 300; background-color: transparent; }

.popover-header { display: none !important}
.row-tooltip:hover { background-color: #f1f1f1;}

  .br-error { border-color: red}

  .custom-control-input:checked~.custom-control-label::before { border-color: #fa6400 !important; background-color: #fa6400 !important;}

.bloc-content-list {  position: fixed; z-index: 200000; right: 100px; top: 100px; width: 570px}
.bloc-content-list>div { background-color: #FFF; -webkit-box-shadow: 0px 4px 4px 0px rgba(158,158,158,0.5);
  -moz-box-shadow: 0px 4px 4px 0px rgba(158,158,158,0.5);
  box-shadow: 0px 4px 4px 0px rgba(158,158,158,0.5); border-radius: 0.5rem!important; font-weight: 300; clear: both}

@media (min-width: 1200px){
  .modal-xl {
      max-width: 1800px;
  }
}

a.btn-content-list { width: 83px; height: 78px; background-repeat: no-repeat; cursor: pointer}
a.ull-tancat { background-image: URL('../img/list_hide.svg')}
a.ull-obert { background-image: URL('../img/list_open.svg')}

#plaques .option-btn-sistema { background-position: center top !important;}

#fons .scrollBox { width: 100%}
#fons .scrollBox .contentBox { max-height: 300px;}
#configurador-esq .scrollBox .contentBox { max-height: 745px;}
#configurador-esq .scrollBox { max-height: 845px;}

.zl-scrollBarBox{
  height:100%;
  position:absolute;
  background:#f3f3f3;
}

.zl-scrollBar{
  position:absolute;
  left:0;
  top:0;
  background:#848484;
  transition:background 0.3s;
}

.zl-scrollBar.zl-verticalBar{
  min-height:10px;
}

.zl-scrollBar.zl-horizontalBar{
  min-width:10px;
}

.zl-scrollBar:hover{
  background:#000;
}

.zl-scrollContentDiv{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  top:0;
  left:0;
}

.marcs { background-size: contain; background-repeat: no-repeat;}
.marcs:hover button { display: block !important}

.marc-h-1 { background-image: url('../img/panel-1.jpg'); height: 153px;}
.marc-h-2 { background-image: url('../img/panel-2.jpg'); height: 198px}
.marc-h-3 { background-image: url('../img/panel-3.jpg'); height: 398px}
.marc-h-4 { background-image: url('../img/panel-4.jpg'); height: 527px}

#composicio-content { background-size: cover; background-repeat: no-repeat; height: 950px;}

.marcs-content .marcs-interior td { background-size: contain; padding-top: 10px; padding-bottom: 10px}
.marcs-content td.alumini { background-color: transparent; padding-top: 0; padding-bottom: 0}
.marc-espai { width: 112px; height: 112px; border: 1px solid #c4c4c4; overflow: hidden; margin: 16px 18px}

.sixty .marc-espai { margin: 0; width: 155px; height: 317px;} /* width: 140px; height: 292px; */

.inox-4 .marc-espai { width: 124px; height: 124px; margin: 14px 27px;}
.alumini .marc-espai { margin: 0 }

.icona-remove { font-size: 2rem; border: 1px solid #9e9e9e; border-radius: 0.5rem; width: 75px; height: 75px; display: block; text-align: center; color: #9e9e9e}

.marc-espai .col-4 { max-width: 100% !important; padding: 0 !important; margin-top: 0 !important; height: 100%;}
.marc-espai .opcio-btn { border: 0 !important; background-size: 100%; height: 100%; margin-left: 0 !important; border-radius: 0 !important}

.sixty .marc-espai .opcio-btn { width: 100%; background-size: cover!important;}

#col-l, #col-r { width: 87px; background-size: contain; background-repeat: no-repeat;}
#col-l { background-position: right;}
#col-r { background-position: left;}

#col-t, #col-b { height: 24px; background-repeat: repeat; background-size: auto 100%; background-position: center;}

#titol-configurador { font-weight: bolder;}

.toast { z-index: 50000000; margin: auto}
#content-toast { z-index: 50000000; width: 100%; text-align: center; top: 15%}
.toast-body { font-size: 1rem; font-weight: 300;}

.tooltip-inner{ text-align: left; }

/* INICI */
.fons-configurador-login {height: 100vh;}
@media(min-width:992px) {
  .fons-configurador-login { background-size: contain;
    background-position: left;
    height: 100vh; /* 100% de la altura de la ventana visible */
    background-repeat: no-repeat;
    background-image: url('../img/fons-entrada-configurador.png');
  }
}
@media (min-width: 1600px) {
  .justify-content-xxl-start {
    -ms-flex-pack: start!important;
    justify-content: flex-start!important;
  }
}
.logo-login {max-width:236px;}
@media(min-width:1441px) and (max-width:1600px) {.info-login {position:relative;right:80px}}

.svg-info {position:absolute;bottom:12px; left:12px; width:35px; cursor:pointer}
.info-login-modal .titol-login {color:#fa6400}

.fons-configurador-login .form-control {border: none; border-bottom: 1px solid #fff; border-radius:0;}
.fons-configurador-login .form-control:focus {border-bottom: 1px solid #fa6400!important;}
.fons-configurador-login .form-control:focus::placeholder {color:#fa6400!important;}

.fons-configurador-login .line {overflow: hidden; text-align: center; padding: 0 55px; color:#808080;}
.fons-configurador-login .line::before, .fons-configurador-login .line::after { background-color: #808080; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; }
.fons-configurador-login .line::before {right: 0.5em;margin-left: -50%;}
.fons-configurador-login .line::after {left: 0.5em;margin-right: -50%;}
.fons-configurador-login .c-gris {color:#808080!important; font-size:0.9rem;}

.br-top-2-gray a {color:#808080; font-size:0.9rem; text-decoration-line: underline; text-decoration-style: dotted;}


.btn-sessio, .btn-senseSessio, .btn-crear {border-radius:20px;}
.btn-sessio {background-color:#fa6400; color:#fff}
.btn-senseSessio {background-color:#E5E5E5}
.btn-crear {border-color:#fa6400; color:#fa6400}

h1.titol-login, h2.titol-login { font-family: "Poppins"; font-weight: bold; color: #FFF; font-size: 35px; line-height: 35px;}
@media(min-width:992px) {h1.titol-login, h2.titol-login { font-size: 54px; line-height: 47px;}}

#tancarPopUp .modal-header .close {background-color:#B2B2B2; opacity:1; color:white; box-shadow: none; border-radius:50%; width:50px; height:50px; font-size:30px; line-height:0; margin:0; margin-left:auto}
.titol-taronja {color:#fa6400; font-family: "Poppins"; font-weight: bold; font-size: 25px; line-height: 25px; margin-top: 100px; margin-bottom:50px}
.w-215 {width:215px}

.linies-custom td {background-color:#ffcc99}