@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.esri-view .esri-view-surface--inset-outline:focus::after {
    outline: none !important;
}
:focus-visible {
    outline: none !important;
}
.cursor-crosshair{
    cursor: crosshair !important;
}

.esri-view-width-xlarge .esri-popup__main-container {
    width: 100% !important;
}

body {
    background: #1f333b;
}

.bmesri {
    /* margin: 10px; */
}

.btn-close {
    background-color: white !important;
    border-bottom: none !important;
}

.modal-content {
    /* background-color: transparent !important;*/
    height: 100%;
}

.modal-dialog {
    height: 100% !important;
    max-width: 100% !important;
    margin: 0px !important
}

.modal {
    z-index: 10000000 !important;
}

.bmesri #subCabecera .hamburger {
    /* width: 70px; */
    height: 100%;
    border-right: 1px solid white;
}

.bmesri #subCabecera .hamburger div {
    width: 40px;
    height: 4px;
    background: white;
    margin: 0 auto;
    margin-bottom: 7px;
    margin-top: 7px;
    border-radius: 0px;
}

.bmesri .sidebar ul.collapse {
    height: 100%;
}

.bmesri .sidebar .scroll {
    padding-left: 0px;
    font-size: 14px;
    height: calc(100% - 61px);
    overflow-y: auto;
    overflow-x: hidden;
}

.esri-menu{
    z-index: 10001 !important;
}

#searchNavDivMobile{
    display: none;
}

.bmesri .sidebar .scrollMenuClose {
    padding-left: 0px;
    font-size: 14px;
    height: calc(100% - 61px);
    /* overflow-y: auto;
    overflow-x: hidden; */
}

.bmesri .sidebar {
    position: fixed;
    background: #1f333b;
    width: 310px;
    height: 100%;
    top: 61px;
    /* border-bottom-left-radius: 20px; */
    /* transition: all 0.3s ease; */
    z-index: 10000;
}

.main_container{
    background: #1f333b;
}

.bmesri .sidebar ul {
    padding-left: 0px;
    font-size: 14px;
}

.bmesri .sidebar ul li a {
    display: block;
    padding: 7px 10px;
    color: #acc1c9;
    position: relative;
    margin-bottom: 1px;
    white-space: nowrap;
    height: auto;
}

.bmesri .sidebar ul li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: white;
    display: none;
}

.bmesri .sidebar ul li a span.icon {
    margin-right: 10px;
    display: inline-block; 
    width: 15px !important;
    text-align: center;
}


/* .bmesri .sidebar ul li a:hover span.title {
    display: block !important;
} */

.bmesri .sidebar ul li a span.title {
    display: inline-block;
    font-size: 14px;
    /* margin-left: 15px; */
}

.bmesri .sidebar  ul.scroll li a span.title {
    display: inline-block;
    font-size: 14px;
    margin-left: 22px;
}

.bmesri .sidebar > ul > li > ul > li:hover a {
    background-color: #065676 !important;
    color: #fff !important;
    cursor: pointer;
}

.bmesri .sidebar ul li:hover ul li a{
    color: #93a4aa;
    background-color: #121d21;
    width: 100%;
    font-size: 14px;
    height: auto;
}

.bmesri .sidebar ul li:hover a{
    background-color: #065676;
    color: #fff;
    cursor: pointer;
}

.bmesri .sidebar ul li a:hover:before,
.bmesri .sidebar ul li a.active:before {
    display: block;
}

i.icon-right{
    position: relative;
    width: auto;
    float: right;
    margin-top: 4px;
}
.bmesri .main_container {
    height: calc(100% - 16px);
    width: calc(100% - 8.33333333%);
    margin-left: 8.33333333%;
    /* width: calc(100% - 230px); */
    /* margin-top: 62px; */
    /* margin-left: 200px; */
    /* padding: 15px; */
    transition: all 0.3s ease;
    z-index: 10;
}

.bmesri .main_container .item {
    background: #fff;
    margin-bottom: 10px;
    padding: 15px;
    font-size: 14px;
    line-height: 22px;
}

.bmesri.closeMenu .sidebar {
    width: 8.33333333%;
}

.bmesri.closeMenu .sidebar ul li a {
    text-align: center;
}

.bmesri.closeMenu .sidebar ul li a span.icon {
    margin: 0;
}

.bmesri.closeMenu .sidebar ul li a span.title {
    display: none;
}

.bmesri.closeMenu .sidebar ul li a:hover span.title {
    display: block;
}

.bmesri.closeMenu .sidebar ul li a {
    height: 60px;
}

.bmesri.closeMenu .sidebar ul li a.nav-link {
    text-align: left;
    width: 100%;
    font-size: 14px !important;
    height: auto;
    padding: 7px 10px;
}

.bmesri.closeMenu .main_container {
    width: calc(100% - 8.33333333%);
    margin-left: 8.33333333%;
}

#mapViewDiv {
    padding: 0;
    margin: 0;
    position: fixed;
    height: calc(100% - 62px);
    width: calc(100% - 8.33333333%);
    /* width: calc(100% - 200px); */
    background: #1f333b;
}

#sceneViewDiv {
    padding: 0;
    margin: 0;
    position: fixed;
    height: calc(100% - 62px);
    width: calc(100% - 8.33333333%);
    /* width: calc(100% - 200px); */
    visibility: hidden;
    background: #1f333b;
}

.bmesri.closeMenu .main_container #mapViewDiv {
    width: calc(100% - 8.33333333%);
}

.bmesri.closeMenu .main_container #sceneViewDiv {
    width: calc(100% - 8.33333333%);
}

#cabecera {
    background: rgb(207, 0, 4);
    height: 21px;
    margin: 0;
}

#subCabecera {
    background: rgb(207, 0, 4);
    margin: 0;
    height: 40px;
}

#cabecera-logo {
    background: url(../img/logobizkaia_icono.gif) no-repeat;
    background-position: center;
    /* width: 73px; */
    border-right: 1px solid #fff;
    height: 21px;
    /* margin-left: 10px; */
}

#cabecera #textodipu,
#cabecera #textodipu-mobile {
    margin: 0 auto;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    font-family: verdana, arial;
    /* line-height: 10px;
    letter-spacing: -0.03em; */
    /* margin-left: 33px; */
}

#cabecera #idiomas {
    float: right;
    margin-right: 15px;
    width: 200px;
    font-size: 0.9em;
    line-height: 2.1em;
    position: fixed;
    right: 0;
    top: -2px;
    color: white;
    text-align: right;
}

#textocentral {
    /* float: left; */
    /* text-align: start; */
    font-size: 18px;
    /* margin-top: 4px;
    margin-left: 20px; */
    color: white;
}

.bmesri .sidebar ul.collapse:hover {
    background-color: #121d21;
}

.bmesri .sidebar li .collapse {
    font-size: 14px;
}


/* ============ desktop view ============ */

@media all and (min-width: 767px) {
    .bmesri .sidebar li {
        position: relative;
    }
    .bmesri .sidebar li .submenu {
        font-size: 14px;
        display: none;
        position: absolute;
        left: 100%;
        width: 310px !important;
        background-color: #121d21;
        color: #ffffff;
        height: auto;/*calc(318px - 61px);*/
        max-height: 250px;
        overflow-y: auto;
        top:-61px
    }
    .bmesri .sidebar li:hover>.submenu {
        display: block;
    }
}


.scroll .collapse.show{
    background-color: #121d21;
}

/* ============ desktop view .end// ============ */


.bmesri #tituloruta {
    margin-top: 20px;
    margin-bottom: 20px;
}

.bmesri .singleTop .address {
    font-size: 14px;
    line-height: 14px;
    color: #999;
    padding: 0 0 15px 0;
}

.bmesri h1.pageTitle {
    margin: 0;
    padding: 0 0 5px 0;
    font-size: 18px;
    line-height: 19px;
    font-weight: normal;
}

.icon-right {
    float: right;
    margin-right: 4px;
}

.scroll::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(18, 29, 33);
}

.scroll::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0)
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: transparent;
}

.submenu::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(18, 29, 33);
}

.submenu::-webkit-scrollbar-thumb {
    background-color: rgb(140, 140, 140);
}

.submenu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: rgb(18, 29, 33);
}

.esri-search__input-container {
    width: 84%;
    float: right;
}

button.esri-search__submit-button.esri-widget--button {
    background-color: transparent;
    color: white;
    border: none;
}

input#searchNavDiv-input {
    /* float: right; */
    background-color: rgb(255 255 255);
    color: rgb(31 51 59);
    border: 0 none;
    font-size: 14px;
    /* margin: 7px 0 0 5px; */
    width: 100%;
    -webkit-appearance: none;
    padding: 4px;
    padding-left: 14px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

form.esri-search__form {
    width: 100%;
}

.esri-search__container {
    display: block !important;
}

div#searchNavDiv {
    width: 100%;
    background: transparent;
    margin-bottom: 10px;
}

.wms::before {
    background-image: url(../img/wms.png);
    background-size: 30px 24px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 22px;
    content: "";
}

.wmts::before {
    background-image: url("../img/wmts.png");
    background-size: 30px 24px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 22px;
    content: "";
}

.geojson::before {
    background-image: url("../img/geojson.png");
    background-size: 30px 24px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 22px;
    content: "";
}


.bmesri .sidebar > ul > li > a > span.arrowRight {
    display: inline-block;
    float: right;
    font-size: 14px;
    margin-top: 5px;
}

.fa-angle-down:before {
    content: "\f107" !important;
}

a.hidden-md.hidden-lg.active {
    background: #1f333b;
}


/*POPUP CUSTOM*/

.propImg {
    position: relative;
}

.propImg img {
    width: 100%;
    height: 150px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.infoW {
    font-family: 'open_sansregular', sans-serif, Arial;
    color: #333;
    padding: 0 1px;
}

.esri-popup__main-container {
max-height: none !important;
}

.esri-popup__main-container.esri-widget.esri-popup--shadow {
    /* max-height: 62% !important; */
    height: none !important;
    width: 100% !important;
}

.esri-popup__main-container.esri-widget.esri-popup--shadow img#imagenvistaprevia {
    width: 100% !important;
    height: 100% !important;
}

.esri-popup__main-container.esri-widget.esri-popup--shadow .propImg img {
    width: 100% !important;
    height: none !important;
}

#imagen360{
    width: 40% !important;
}

.esri-view-width-less-than-medium .esri-popup__action-text{
    display: block !important;
}

.esri-view-height-less-than-medium .esri-popup__main-container {
   /*  max-height: 300px !important; */
    height: none !important;
    width: 100% !important;
}

.paWrapper {
    padding: 10px 0px 10px 10px;
    width: 250px;
    /* display: none; */
}

p.idioma{
    margin-bottom: 0px;
}

.ocultarDescripcion{
    display: none;
}

.propTitle {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    white-space: normal;
    overflow: hidden;
    /* margin-bottom: 5px; */
}

.disabled {
    display: none;
}

.propAddress {
    /* white-space: nowrap; */
    /* overflow: hidden; */
    width: 100%;
    color: #999;
    font-size: 14px;
    line-height: 18px;
}
.esri-popup__button {
    color: #2e2e2e;
    background-color: #f3f3f3;
}
.infoButtons {
    padding: 0px;
}

span.fa.fa-expand{
    background: white;
    padding: 5px;
}

span.fa.fa-expand:hover {
    background: #1f333b;
    padding: 4px;
    color: white;
}

a.btn.viewInfo {
    margin-left: 10px;
}
/* a.btn.viewInfo{
    width: 85px;
    padding: 6px 12px;
} */

a.btn.closeInfo {
    width: 85px;
    padding: 6px 12px;
}
.btn-icon.btn-round {
    border-radius: 50%;
}
.btn-icon {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 36px;
    text-align: center;
}
.btn-round {
    border-radius: 50px;
}
.btn {
    border-radius: 2px;
    text-decoration: none;
}

.esri-popup__content{
    margin: 0px !important;
}

#informacionRuta{
    height: 95% !important;
    width: 95% !important;
    left: 35px;
    top: 5px;
}

.esri-popup__button--dock{
    display: none !important;
}

.esri-popup__header{
    position: absolute !important;
    font-size: 12px;
    align-items: flex-end;
    justify-content: space-between;
    display: flex;
    /* flex: 0 0 auto; */
    right: 0;
    z-index: 1000000000000;
}

span#idioma-separador1 {
    color: white;
}

#Map2D{
    position: absolute;
    top: 61px;
    right: 0px;
    z-index: 100;
    padding: 10px;
    display: none;
    color: #acc1c9;
    background: #1f333b !important;
    text-decoration: none;
}

#Map3D{
    position: absolute;
    top: 61px;
    right: 0px;
    z-index: 100;
    padding: 10px;
    background: #1f333b !important;
    color: #acc1c9;
    text-decoration: none;
}

#Map2D:hover{
    background: #ffffff !important;
    color: #1f333b;
}

#Map3D:hover{
    background: #ffffff !important;
    color: #1f333b;
}

#info {
    position: absolute;
    top: 108px;
    right: 0px;
    z-index: 100;
    padding: 10px;
    background: #1f333b !important;
    color: #acc1c9;
    text-decoration: none;
    width: 43px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#info:hover{
    background: #ffffff !important;
    color: #1f333b;
}

#idioma_euskera a, #idioma_espanol a, #idioma_Ingles a{
    text-decoration: none;
    color: white;
}

#idioma_euskera a:hover, #idioma_espanol a:hover, #idioma_Ingles a:hover{
    text-decoration: none;
    color: #1f333b;
}

.infoButtons{
    position:absolute;
    bottom: 0px;
    right: 0px;
    z-index: 100000;
}

.btnampliar{
    width:40px;
    opacity:.7;
}

.hidden {
    display: none !important;
}

#CAPA_PLANIFICADO{
    pointer-events: none;
}
  
#block__install {
    position: absolute;
    bottom: 1em;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 10000;
}

#installContainer button {
    background-color: inherit;
    border: 1px solid white;
    color: white;
    font-size: 1em;
    padding: 0.75em;
}

/* @media (max-width: 768px) {
    */

    div#BlockInstallClose:hover, #BlockInstallButton:hover {
        cursor: pointer;
        background: #1f333b;
        color: white;
    }

    .block__install {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        z-index: 999999;
        background: #fff;
        padding: 15px;
        -webkit-box-shadow: 0px 0px 10px 5px rgba(31, 51, 59, 0.47);
        -moz-box-shadow: 0px 0px 10px 5px rgba(31, 51, 59, 0.47);
        box-shadow: 0px 0px 10px 5px rgba(31, 51, 59, 0.47);
   }
    .block__install .inner {
        display: flex;
        align-items: center;
   }
    .block__install .inner .close {
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
   }
    .block__install .inner .close img {
        width: 32px;
        height: 32px;
   }
    .block__install .inner .logo {
        width: 48px;
        margin-left: 20px;
   }
    .block__install .inner .logo img {
        width: 42px;
        border-radius: 2px;
   }
    .block__install .inner .name {
        padding-left: 10px;
   }
    .block__install .inner .name span {
        display: block;
   }
    .block__install .inner .name span.title {
        font-size: 1.125rem;
        line-height: 1;
        font-weight: 600;
   }
    .block__install .inner .cta {
        margin-left: auto;
   }
    .block__install.is-active {
        display: block;
   }
   /* 
}
*/


/* -------------------------------------------
	Estilos CSS del ejemplo del botón
----------------------------------------------*/

/* Ocultamos el input y le damos estilos al label */

input#abrir-cerrar { 
	visibility:hidden;
	position: absolute;
	top: -9999px;
}

.toggle-button {
	display:inline-block;
	width:50px !important;
    margin: 0 auto;
	height:34px;
	/* border:1px solid #222222; */
	position:relative;
	cursor: pointer;
	box-sizing: border-box;
}

/* Usamos los :before y :after del label para dibujar las tres rayitas */

.toggle-button:before, .toggle-button:after {
	position:absolute;
	display:inline-block;
	content:" ";
	width: calc(100% / 2);               
	box-sizing: border-box;
	left: calc(100% / 4);
	transition: all 0.2s ease-out;
}

.toggle-button:before {
	top: calc(100% / 6);
	height:calc(100% / 4);
	border-top:1px solid white;
	border-bottom:1px solid white;
	background-color: transparent;
}

.toggle-button:after {
	height:1px;
	background-color:white;
	bottom:calc(100% / 3);
}

/* Hacemos clic y el input queda como :checked, así que los centramos y giramos 45º en distinto sentido */

input#abrir-cerrar:checked + .toggle-button:before, input#abrir-cerrar:checked + .toggle-button:after {
	top:calc(100% / 2.5);
	height:1px;
	border-bottom:0;
}

input#abrir-cerrar:checked + .toggle-button:before {
	transform: rotate(45deg); 
}

input#abrir-cerrar:checked + .toggle-button:after {
	transform: rotate(-45deg);
}

/* Posicionamos y mostramos cuando procede los <span> que nos ayudarán con los tooltips */

.abrir, .cerrar { 
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	text-indent: -9999px;
}

.abrir {
	display:block;
}

.cerrar {
	display:none;
}

input#abrir-cerrar:checked + .toggle-button .abrir {
	display:none;
}

input#abrir-cerrar:checked + .toggle-button .cerrar {
	display:block;
}   

.esri-elevation-profile__action-button, .esri-distance-measurement-2d__clear-button{
    background-color: #cf0004 !important;
    border: 1px solid #cf0004 !important;
}

.esri-elevation-profile__header button, .esri-button--tertiary, .esri-elevation-profile__header button:hover{
    color: #cf0004 !important;
}

.esri-elevation-profile input[type=checkbox]:checked, .esri-elevation-profile-settings__popover-content input[type=checkbox]:checked {
    background: #cf0004 !important;
    border-color: #cf0004 !important;
}

/* .idiomaCombo {
    color: #fff;
    margin-right: 1.4vw;
    margin-top: 12px;
    float: right;
    font: Raleway;
    font-weight: 700;
    font-family: monospace;
}

#lang {
    padding: 6px;
} */