@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

body {  background-color: #FFF; color: #4a4a4a; font-family: 'Noto Sans', sans-serif; font-weight: 500; margin-top:0}

h1,h2,h3,h4,h5 { font-family: 'Noto Sans', sans-serif;}
h2 { font-size: 1.4rem;}
h3 { font-size: 1.2rem;}

a { color: #1061a1}

.mask_user {
	width: 100%;
	height: 15px;
	background-color: purple;
	position: fixed;
	top: 0px;
	z-index: 1000000;
	text-align: center;
    font-size: 10px;
    color: #FFF;
}

.f-size-08 { font-size: 0.8rem}
.f-size-09 { font-size: 0.9rem}
.f-size-11 { font-size: 1.1rem}
.f-size-12 { font-size: 1.2rem}

.f-w-300 { font-weight: 300;}

.navbar-light { background-color: #FFF; position:sticky; z-index: 1000}
.navbar-light .navbar-brand img{width: 260px}
.text-nav {color:#fff; font-weight: 300;}
@media(min-width:1200px) {.text-nav {font-size: 1.2em;}}
nav .roda {width:45px; max-width: 45px;}

select option:disabled {
    background-color: #dadada;
    color: #b0b0b0
}

.preguntes h2 { border-top: 1px solid #1061a1; border-bottom: 1px solid #1061a1; padding: 1rem 0; font-weight: 300;}
.preguntes h3 { border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3; padding: 0.5rem 0; font-weight: 300;}

.pasos {
	height: 25px;
	width: 40px;
	background-color: #d3d3d3;
	border-radius: 50%;
	display: inline-block;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	font-size: 1rem
 }

 .pasos.actiu-clic { background-color: #9dcaee; color: #1061a1 }
 .pasos.actiu, .pasos:hover { background-color: #1061a1; color: #FFF}
 .passos-linia { height: 5px; background-color: #d3d3d3; border-radius: 2px; width: 30px; margin-left: 0.5rem; margin-right: 0.5rem;}
 .passos-linia.actiu { background-color: #1061a1;}
 .passos-linia.actiu-clic { background-color: #9dcaee; }

.simon-pregunta { cursor: pointer; color: #4a4a4a}
.simon-pregunta:hover, .simon-pregunta.active { background-color: #1061a1; color: #FFF}

footer.simon { background-color: #FFF; color: #1061a1; border-top: 1px solid #1061a1; font-weight: 400; text-transform: uppercase;}
.footer-xarxes { font-size: 1.5rem}
.simon-titol { font-size: 1.8rem; font-weight: 500;}

.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary.focus, .btn-primary:focus { background-color: #1061a1; border-color: #1061a1}
.btn-primary:hover { opacity: 0.7;}

.nodisponible, .nodisponible:hover { /*pointer-events: none;*/ opacity: 0.5; background-color: initial; color: initial; cursor: default}
.br-simon { border: 1px solid #1061a1}
.f-size-final { font-size: 1.8rem; }
.css-final { color: #1061a1}
.text-primary { color: #1061a1}
.bg-primary { background-color: #1061a1 !important}

.modal { z-index: 1150}

.popover { background-color: rgb(135, 176, 208, 1) !important;}

.popover-body {
 background: transparent;
 color: #000;
 font-size: 0.9rem;
 border-radius: 10px;
 border-top: 1px solid #87b0d0;
 text-align: left;
 padding: .2rem .75rem;
 }

 .bs-popover-auto[x-placement^=right]>.arrow::after, .bs-popover-right>.arrow::after, .bs-popover-auto[x-placement^=left]>.arrow::before, .bs-popover-left>.arrow::before { border-left-color: #87b0d0}
 .bs-popover-auto[x-placement^=left]>.arrow::after, .bs-popover-left>.arrow::after { border-left-color: #87b0d0 }

 .spinner-border.text-primary { color: #1061a1; }

 .error { color: #dc3545}
 .custom-control-label.error::before { border-color: #dc3545}

 .foto-simbol { position: absolute; top: 20px; max-width: 100px; z-index: 500; right: 20px}
 .carousel-item { transition: transform 1s ease, opacity .5s ease-out}
 .resposta { cursor: pointer;}
 .resposta:hover, .resposta.active { background-color: #eef5fb;}
 .carousel-inner { min-height: 700px;}

 .bg-tram { width: 100%; height: 440px; background-repeat: no-repeat; background-position: center center; margin: auto; background-size: contain}

 .trams-config { top: 0; width: 100%; height: 100%; font-size: 0.8rem; font-weight: 300;}

 .trams_png .bg-primary.br-simon { display: none !important;}

 .inputs-trams { width: 83% !important}
 .content-mida-tram { width: 169px}
 .validacioIncorrecte {border:1px solid red!important;}

 .error-input {
	border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.error-politicaprivacitat::before { border: 1px solid #dc3545 !important}

.img-ajuda {
	max-width: 50%;
    margin: auto;
    display: block;
}

#mida-varilla, #mida-opal, #iluminacion-indirecta, #temperatura-cri, .cable-transparent { 
	top: 20%; background-color: #FFF; border-radius: 10px; border: 1px solid #1061a1;
	padding: 1rem; margin-left: 3rem; margin-right: 4rem;
}
.cable-transparent {margin-left: 4rem!important; width:65%!important}
@media (min-width: 576px) and (max-width: 768px) {.cable-transparent {margin-left: 2rem !important; margin-right: 2rem !important;}}
@media(min-width:992px) {.cable-transparent {width:72%!important}}

#mida-varilla button, #mida-opal button, #iluminacion-indirecta button, #temperatura-cri button, .cable-transparent button {

	background-color: #FFF;
	color: #1061a1;
}

#mida-varilla button.active, #mida-varilla button:hover, #mida-opal button.active, #mida-opal button:hover, #iluminacion-indirecta button:hover, #iluminacion-indirecta button:active, #iluminacion-indirecta button.active, #temperatura-cri button:hover, #temperatura-cri button:active, #temperatura-cri button.active, .cable-transparent button.active, .cable-transparent button:hover{
	background-color: #1061a1!important;
	color: #FFF!important;
}

.trams-config .tram { position: absolute;}
.trams-config .tram>div { background-color: #f2f2f2; min-width: 65px; padding-right: 0 }

.trazado-s-tram-y { top: 10rem;}

.trazado-i-tram-1 { top: 10rem; left: 9rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { .trazado-i-tram-1 { top: 10rem; left: 17rem} }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-l-tram-x { top: 14em; left: 0rem}
.trazado-l-tram-1 { top: 10rem; left: 10rem}
.trazado-l-tram-2 { top: 13rem; left: 10rem;}
.trazado-l-tram-y { top: 20rem; left: 10rem }

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { .trazado-l-tram-x { top: 10em; left: 4rem}
.trazado-l-tram-1 { top: 10rem; left: 17rem}
.trazado-l-tram-2 { top: 14rem; left: 19rem;}
.trazado-l-tram-y { top: 25rem; left: 20rem } }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-s-tram-1 { top: 12rem; left: 5rem}
.trazado-s-tram-2 { top: 18rem; left: 6rem;}
.trazado-s-tram-3 { top: 12rem; left: 13rem}
.trazado-s-tram-4 { top: 6rem; left: 13rem}
.trazado-s-tram-5 { top: 16rem; left: 17rem}
.trazado-s-tram-x { top: 21rem; left: 9rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-s-tram-1 { top: 12rem; left: 10rem}
	.trazado-s-tram-2 { top: 21.5rem; left: 13rem;}
	.trazado-s-tram-3 { top: 12rem; left: 24rem}
	.trazado-s-tram-4 { top: 1rem; left: 26rem}
	.trazado-s-tram-5 { top: 12rem; left: 37rem}
	.trazado-s-tram-x { top: 25rem; left: 20rem}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-u-tram-1 { top: 12rem; left: 9rem}
.trazado-u-tram-2 { top: 19rem; left: 9rem;}
.trazado-u-tram-3 { top: 6rem; left: 9rem}
.trazado-u-tram-y { top: 12rem; left: 0rem}
.trazado-u-tram-x { top: 20rem; left: 9rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-u-tram-1 { top: 12rem; left: 16rem}
.trazado-u-tram-2 { top: 21rem; left: 18rem;}
.trazado-u-tram-3 { top: 1rem; left: 18rem}
.trazado-u-tram-y { top: 12rem; left: 3rem}
.trazado-u-tram-x { top: 25rem; left: 18rem}
 }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-z-tram-y { top: 12rem}
.trazado-z-tram-x { top: 21rem; left: 8rem}
.trazado-z-tram-1 { top: 14rem; left: 5rem}
.trazado-z-tram-2 { top: 13rem; left: 12rem;}
.trazado-z-tram-3 { top: 6rem; left: 12rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	
	
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-z-tram-y { top: 12rem}
	.trazado-z-tram-x { top: 26rem; left: 18rem}
	.trazado-z-tram-1 { top: 22rem; left: 13rem}
	.trazado-z-tram-2 { top: 12rem; left: 13rem;}
	.trazado-z-tram-3 { top: 2rem; left: 23rem}
 }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-o-tram-1 { top: 12rem; left: 9rem}
.trazado-o-tram-2 { top: 18rem; left: 9rem;}
.trazado-o-tram-3 { top: 6rem; left: 9rem}
.trazado-o-tram-4 { top: 12rem; left: 17rem}
.trazado-o-tram-y { top: 12rem; left: 0rem}
.trazado-o-tram-x { top: 21rem; left: 9rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-o-tram-1 { top: 12rem; left: 14rem}
	.trazado-o-tram-2 { top: 21rem; left: 18rem;}
	.trazado-o-tram-3 { top: 12rem; left: 29rem}
	.trazado-o-tram-4 { top: 2rem; left: 17rem}
	.trazado-o-tram-y { top: 12rem; left: 2rem}
	.trazado-o-tram-x { top: 25rem; left: 18rem}
 }

 /* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-t-tram-y { top: 14em; left: 0rem}
.trazado-t-tram-1 { top: 11rem; left: 7rem}
.trazado-t-tram-2 { top: 11rem; left: 16rem;}
.trazado-t-tram-3 { top: 3rem; left: 12rem;}
.trazado-t-tram-x { top: 17rem; left: 12rem }
.tram-connector-t { top: 1rem; left: 9rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-t-tram-y { top: 10em; left: 4rem}
	.trazado-t-tram-1 { top: 11rem; left: 12rem}
	.trazado-t-tram-2 { top: 11rem; left: 22rem;}
	.trazado-t-tram-3 { top: 3rem; left: 17rem;}
	.trazado-t-tram-x { top: 17rem; left: 16rem } 
	.tram-connector-t { top: 1rem; left: 14rem}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.trazado-x-tram-y { top: 11em; left: 0rem}
.trazado-x-tram-1 { top: 7rem; left: 10rem}
.trazado-x-tram-2 { top: 11rem; left: 17rem;}
.trazado-x-tram-3 { top: 19rem; left: 16rem }
.trazado-x-tram-4 { top: 15rem; left: 9rem }
.trazado-x-tram-x { top: 24rem; left: 13rem }
.tram-connector-x { top: 2rem; left: 10rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-x-tram-y { top: 12em; left: 4rem}
	.trazado-x-tram-1 { top: 7rem; left: 15rem}
	.trazado-x-tram-2 { top: 11rem; left: 23rem;}
	.trazado-x-tram-3 { top: 19rem; left: 21rem;}
	.trazado-x-tram-4 { top: 15rem; left: 14rem }
	.trazado-x-tram-x { top: 25rem; left: 18rem }
	.tram-connector-x { top: 2rem; left: 15rem}
 }

 /* TRAZADO Y */
.trazado-y-tram-y { top: 16em; left: 0rem}
.trazado-y-tram-1 { top: 6rem; left: 7rem}
.trazado-y-tram-2 { top: 9rem; left: 18rem;}
.trazado-y-tram-3 { top: 18rem; left: 15rem;}
.trazado-y-tram-x { top: 24rem; left: 11rem }
.tram-connector-y { top: 2rem; left: 7rem}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.trazado-y-tram-y { top: 18em; left: 4rem}
	.trazado-y-tram-1 { top: 7rem; left: 12rem}
	.trazado-y-tram-2 { top: 9rem; left: 23rem;}
	.trazado-y-tram-3 { top: 19rem; left: 19rem;}
	.trazado-y-tram-x { top: 24rem; left: 16rem } 
	.tram-connector-y { top: 3rem; left: 12rem}
 
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.icona-ajuda { margin-bottom: 0.3rem}
.text-ajuda { background-color: #FFF; border: 1px solid #4a4a4a}

.inputs-num-trams { width: 50px;}

.resum h3 { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 1rem 0; font-weight: 300;}

#html_tramos .bg-tram { max-width: 617px;}
#html_tramos img { width: 100%}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	.passos-linia { margin-left: 1rem; margin-right: 1rem}
	.pasos {
		height: 40px;
		width: 40px;
	 }

	 .flex-column { flex-direction: inherit !important;}

	 .carousel-inner { min-height: 500px;}

	 #html_tramos img { width: auto}
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.content-mida-tram { width: 207px}
 }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

.bloquejat {background-color: #efefef!important; color: #a1a1a1!important; pointer-events: none; cursor: default;}
#temperatura-cri .bloquejat {border-color:#efefef}

.avis-validacio {background-color: #eef5fb; padding:8px; margin-bottom: 10px; color:#1061a1; border:1px solid #1061a1}

#info-TW {top:20%; background-color: #FFF; border-radius: 10px; border: 1px solid #1061a1; padding: 1rem; margin-left: 3rem; margin-right: 4rem;}