/* For complete application */

body{
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	height: 100%; 
	max-height: 100%; 
	font-family: 'Arimo', sans-serif; font-weight: 400;
	font-size: 0.9em;
	color: #333333;
/*	background-color: #EEEEEE;
	overflow-x: hidden;
	overflow-y: hidden; */
}
.mybg{
	background-image: url("../images/desktop1.jpg");
	background-repeat: no-repeat;
    background-size: cover;

}
.content-wrapper {
    padding-top: 130px;
    padding-left: 15px;
    padding-right: 15px;
}
.login-box {
    background: white;
    padding: 55px 30px 40px;
    max-width: 443px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}
.login-box .title {
    font-size: 1.5em;
    font-weight: 600;
/*    text-transform: uppercase;   */
    margin-bottom: 50px;
}
.field {
    margin-bottom: 30px;
	border-radius: 6px;
}
.field input:not([type="submit"]) {
    width: 100%;
    border: 0;
    border-bottom: solid 2px #3A3932;
    color: #7d7d7d;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    outline: 0;
}
.field input::-webkit-input-placeholder, .field input::placeholder {
    color: #3A3932;
    font-weight: 600;
    transition: color ease .2s;
}
.field input:not([type="submit"]):focus::-webkit-input-placeholder, .field input:not([type="submit"]):focus::placeholder {
    color: transparent;
}
.field input[type="submit"] {
    background: white;
    padding: 11px 44px;
    display: inline-block;
/*    text-transform: uppercase;   */
    font-size: 14px;
    font-weight: 600;
    margin-top: 35px;
    cursor: pointer;
    transition: all ease .2s;
    outline: 0;
	border-radius: 4px;
}
.field input[type="submit"]:hover {
	color: white;
	background: #E53139;
	border-radius: 4px;
}

h1{
	font-family: 'Arimo', sans-serif; font-weight: 700; font-size: 1.2em;
}
h2{
	font-family: 'Arimo', sans-serif; font-weight: 400; font-size: 1em;
	line-height: 0.3em;
}
h3{
	font-family: 'Arimo', sans-serif; font-weight: 400; font-size: 0.9em;
	line-height: 0.3em;
}
h5{margin-top: 3px;}
h6{
	border-bottom: 3px dotted #004D40;
	margin-top: 15px;
	width: 320px;
}
optgroup{
	font-family: 'Arimo', sans-serif; font-weight: 700; font-style: normal;
	color: #666666;
}
.legend_text{
	font-family: 'Arimo', sans-serif; font-weight: 400;
	color: #21211F;
	line-height: 1.6;
}
.form_text{
	font-family: 'Arimo', sans-serif; font-weight: 700;
	color: #21211F;
	line-height: 1.6;
}

/* Basic page clases */
.img_inline{
	margin: 10px 0px 5px 20px;
	float: left;
}
img.center { vertical-align: -9px;}
.form_field { margin: 4px 0 5px 0; padding: 0; }
.signsel{
	margin: 2px;
	width: 37px;
	height: 37px;
}
.imgsign:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.imgselected{
	background-color: blue;
}

/* Content elements */
#map { margin: 0; padding: 0px 0px 0px 0px; width:600px; height:500px;}
#map_title {
	position: absolute;
	top: 0px;
	font-size: 0.9em;
	background-color: #FFF;
	z-index:5000;
}
#gridwin{padding: 18px 0px 0px 0px;}
#list_title {
	position: absolute;
	top: 0px;
	font-size: 0.9em;
	background-color: #FFF;
	z-index:5000;
}
#list_subtitle {
	position: absolute;
	font-size: 0.8em;
	background-color: #FFF;
	z-index:5000;
}

.olControlLayerSwitcher .layersDiv {
    background-color: #aaaaaa!important;
}
.olControlOverviewMapElement {
    background-color: #aaaaaa!important;
}

#zoomin{
	position:absolute;
	top:50px;
	right:20px;
	width:35px;
	height:35px;
	z-index:5000;
	background-image:url("../images/a4_zoomin.png");
	opacity:1;
}
#zoomin:hover{
	cursor:pointer;
/*	opacity:0.6; */
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
#zoomout{
	position:absolute;
	top:90px;
	right:20px;
	width:35px;
	height:35px;
	z-index:5000;
	background-image:url("../images/a4_zoomout.png");
	opacity:1;
}
#zoomout:hover{
	cursor:pointer;
/*	opacity:0.6; */
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
#layerbtn{
	position:absolute;
	top:130px;
	right:20px;
	width:35px;
	height:35px;
	z-index:5000;
	background-image:url("../images/a4_layers.png");
	opacity:1;
}
#layerbtn:hover{
	cursor:pointer;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
#printbtn{
	position:absolute;
	top:170px;
	right:20px;
	width:35px;
	height:35px;
	z-index:5000;
	background-image:url("../images/a4_print.png");
	opacity:1;
}
#printbtn:hover{
	cursor:pointer;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
#locbtn{
	position:absolute;
	top:210px;
	right:20px;
	width:35px;
	height:35px;
	z-index:5000;
	background-image:url("../images/a4_locgrey.png");
	opacity:1;
}
#locbtn:hover{
	cursor:pointer;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

#layercontrol{
	position: absolute;
	background-color: #fff;
	z-index: 1031;
	top: 500px; left: 20px;
	padding: 5px;
	width: 250px;
	box-shadow: 2px 2px 6px 2px #CCC;
	border-radius: 4px;
	display: none;
	overflow: auto;
}
#layercontrolheader{
	padding: 10px;
	cursor: move;
	width: 100%;
	z-index: 1032;
	background-color: #E53139;
	color: white;
	border-radius: 3px;
}

/* Basic page elements */
#cnt_login_tab {position:absolute; top:15px; right:35px;
	margin:0; padding:7px 0 2px 10px;
	background-color: #7DBC39;
	color: #FFFFFF;
	text-align:left; width:650px;
}
#cnt_header{
	width: 100%;
	height: 55px;
	float: right;
/*	position: fixed;  */
	top: 10px; left: 10px;
	/* border-bottom: 1px solid #58594B
	box-shadow: 2px 2px 4px 0 #cccccc; */
}
.apptitle{
	position: fixed;
	top: 30px;
	left: 180px;
	font-weight: 700;
	font-size: 1.8em;
}
#cnt_header_load{
	width: 100%;
	height: 100px;
	float: right;
	top: 10px; right: 10px;
	/* border-bottom: 1px solid #58594B
	box-shadow: 2px 2px 4px 0 #cccccc; */
}
#header_navbar {
	font-family: 'Arimo', Ariel, sans-serif; font-weight: 400; font-size: 1em;
	float: right;
	height: 45px;
	margin: 15px 0px 0px 5px;
	padding: 0; text-align: right;
}
#maptab_navbar {
	font-family: 'Arimo', Ariel, sans-serif; font-weight: 400; font-size: 0.9em;
	height: 30px;
	margin: 0;
	padding: 0;
}
#report_navbar {
	font-family: Ariel, sans-serif; font-weight: 400; font-size: 0.8em;
	width: 190px;
	float: left;
	height: 38px;
/*	background-color: #7DBC39; */
}
.ol_bw {
    filter: grayscale(80%);
}
.mapmargin{
	margin: 10px 0 0 0; /*Margins for inner DIV cnt_map element (to provide padding)*/
}
.mymargin{
	margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
.mytopmargin{
	margin-top: 6px;
}
.narrowlist{
/*	padding: 2px;   */
	width: 140px;
	float: right;
}
.droplistwidth{
	min-width: 320px;
	max-width: 320px;
}
#scselbox{
	position: absolute;
	background-color: #fff;
	z-index: 10;
	bottom: -220px; left: 15px;
	padding: 5px;
	width: 200px; height: 210px;
	box-shadow: 2px 2px 6px 2px #CCC;
}
#ayudabox{
	position: fixed;
	background-color: #fff;
	z-index: 10001;
	bottom: -500px; left: 290px;
	padding: 10px;
	width: 550px; height: 450px;
	box-shadow: 2px 2px 6px 2px #CCC;
}
#cnt_ayudabox{
	margin-top: 15px;
	width: 550px; height: 410px;
	overflow: auto;
}
#cnt_main{
	position: fixed;
	top: 40px; 
	left: 33px; /* was 240px width to leave room for control panel */
	right: 20px;
	bottom: 30px;
	overflow: hidden;
	border: black 1px;
	/* background: #fff; */
	/* border: 1px solid red; */
}
#cnt_map{
	position: absolute;
	margin-top: 12px;
	top: 30px;;
}
#cnt_table{
	position: absolute;
	margin-top: 12px;
	top: 1000px; right: 15px;
}
#cnt_footer{
	width: 100%; height: 35px;
	position: fixed;
	bottom: 10px; left: 0px;
	text-align: center;
	font-size: 0.8em;
}
.leftpane{
	position: fixed;
	padding: 10px;
	top: 90px;
	left: 0px;
	bottom: 0;
	width: 370px; /*Width of frame div*/
	overflow: auto;
	background-color: #ffffff;
	z-index: 1025;
}
.leftpaneinout{
	position:fixed;
	top: 200px;
	left: 370px;
	width: 32px;
	height: 90px;
	background-color: #ffffff;
/*	background-color: rgba(0,0,0,0.1); */
	background-image: radial-gradient(red 1px, transparent 0);
	background-size: 5px 5px;
	cursor: pointer;
	z-index: 1025;
}
.leftpanebutton{
	padding: 5px;
}
.load{
	float: left;
	margin: 0 0 15px 10px;
	width: 500px; height: 400px;
	background-color: #fcf2f2;
/*	border: 1px solid grey;
	box-shadow: 2px 2px 6px 2px #CCC; */
}

/* Export and print button definition */
.right_button{
	position:absolute;
	top:0px; right:0px;
}
.btn_small{
	font-size: 0.9em;
}

/*==Modify bootstrap buttons and nav-item style ==*/

.form-check-input:checked {
	background-color: #E53139 !important; 
}
.btn-primary{
	background-color: #E53139 !important;
	border-style:solid;
	border-color:#E53139 !important;
	color:#FFFFFF !important; /*color letras*//*WHITE*/
}

.btn-primary:hover {
    background-color:#E53139 !important;
    /* border-color: #837171; */ /*set the color you want here*/
	border-style:solid;
	border-color:#312478 !important;
	color:#FFFFFF !important;
}

.btn-primary:focus{
	background-color:#121766 !important;/*color contenido foco*/
	border-style:solid;
	border-color:#E53139 !important;
	color:#FFFFFF !important; /*color letras*/
}

.nav-item a, button{
	font-size: 1em;
	top:6px;
	right:2px;
	margin-left: 2px;
	color:#333333 !important;

/*	color:#E53139 !important;  */

	/* background-color:#f2b843; */ /*color contenido fondo*/
	/* border-style:solid; */
 	/* border-color:#000000; */
}
.nav-item a:hover{
	font-size: 1em;
	top:6px;
	color: #FFFFFF !important;
    background-color:#E53139 !important;
    /* border-color: #837171; */ /*set the color you want here*/
	/* border-style:solid; */
	border-color:#000000 !important;
}
.nav-item a:focus{
    background-color:#E53139 !important;	
}
.nav-item > .active{
    background-color:#E53139 !important;
	color: #FFFFFF !important;

}
/*==Modify buttons and nav-item style ==*/

/*== Openlayer css modifications ==*/

/* Definiciones para el ol-popup */
.ol-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 10px;
	border-radius: 6px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
}
#popup-content{
	/* height: 210px;*/
	width: 200px; 
}
.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}
.ol-popup-closer {
	text-decoration: none;
	font-size: 20px; 
	position: absolute;
	top: 2px;
	right: 8px;
}
.ol-popup-closer:after {
	content: "✖";
}

/*===== slider prueba===*/
.slidecontainer {
  width: 100%; /* Width of the outside container */
}
/* Text of slider value */
#slidervalue{
	
}
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 10px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
/*   opacity: 0.7; Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
/*   opacity: 1; Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: #E53139; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: #E53139; /* Green background */
  cursor: pointer; /* Cursor on hover */
}