/* For ak_design application only */

body{
	font-family: 'Arimo', sans-serif; font-weight: 400;
	overflow: hidden;
	color: #666666;
}
#btn_video1{
	position:fixed;
	bottom: 20px;
	left: 20px;
}
#video1{
	display: none;
}
video{
	position: absolute;
	z-index: 100000;
	bottom: 5px;
	right: 5px;
	width: 50%;
	height: auto;
}
#map{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
h3{
	font-size: 1.3em;
	font-weight: bold; 
}
h4{
	font-size: 1.1em;
	font-weight: bold; 
}
h5{
	font-size: 1em;
	font-weight: bold; 
}
p{
	margin-top: 20px;
}
/* Font size for tables */
#table_id_wrapper {
	font-size: 0.9em;
}
#graph_pages {
	font-size: 0.9em;
}

/* Change Bootstrap primary button */
.btn-primary {
    background: #337AB7;
    color: #ffffff;
}

/* Change dataTables button color */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #337AB7;
	color: #ffffff!important; /*change the hover text color*/
}
/*below block of css for change style when active*/

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	background: #337AB7;
	color: #ffffff!important;
}

/* Box for slider for thematic opacity */
#slidecontainer {
    width: 100%;
}
/* The main container of the app */
#cnt_main{
}

#graph_index{
	margin-left: 20px;
}

/* Panel opened by big buttons */
.cnt_panel{
	position: absolute;
	top: 80px;
	left: 60px;
	padding-top: 10px;
	border-style: solid;
	border-width: 5px 0 0 5px;
	border-color: #337AB7;
	background-color: #ffffff;
	max-height: calc(100vh - 150px);
	max-width: calc(100vw - 30%);
	overflow: auto;
	display: none;
	z-index: 2;
	-webkit-box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
}

.firstcol {
	min-width: 290px;
	max-width: 350px;
}
.onecol{
	padding: 10px;
}

/* Button pad small */
#buttonpad_small{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 35px;
}
.buttonsmall{
	width: 35px;
	height: 35px;
	margin-bottom: 5px;
	-webkit-box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
}
.buttonsmall_off{
	width: 35px;
	height: 35px;
	margin-bottom: 5px;
}
.buttonsmall:hover{
	cursor:pointer;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/* Button pad big */
#buttonpad_big{
	position: absolute;
	top: 80px;
	left: 10px;
	width: 50px;
}
.buttonbig{
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	margin-bottom: 10px;
	-webkit-box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 16px -8px rgba(0,0,0,0.75);
}
.buttonbig:hover{
	cursor:pointer;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.buttonbig_btn{
	position: relative;
	top: 5px;
	left: 5px;
}
.btn_size{
  max-width:40px;
  max-height:40px;
  width: auto;
  height: auto;
}

#logo_client{
	position: absolute;
	top: 10px;
	left: 10px;
}

#logo_geotactica{
	position: absolute;
	bottom: 60px;
	right: 10px;	
}

/* 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{
	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: "✖";
}

@media (min-width: 576px) {
	.firstcol {
		max-width: 300px;
	}
}