.paddingTab {
	padding: 5px 15px 10px 0;
}

#mapid {
	position: relative;
	width: 100%;
	height: 800px;
	z-index: 0;
}

#container {
	overflow: initial;
	background-color: #FFFFFF;
}

html, body {
	overflow: initial;
	background-color: #004494;
}

a {
	color: #004494; /* EC blue */
}

#resultStats {
	display: none;
	flex-wrap: wrap;
}

#allFilters {
	display: none;
	flex-wrap: wrap;
}

#query {
	width: 250px;
}

#coordinatorOnly {
	display: flex;
}
/* 
table.dataTable tr.even { background-color: #d1edf2; } */

/* tfoot input {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
} */

/* #formsDiv{
    display: none;
} */
.formFilter {
	padding-right: 15px;
}

.sliderStyle {
	border: 0;
	color: #000000;
	font-weight: bold;
}

/* .multiselect {
    width: 250px;
} */
.selectBox {
	position: relative;
}

.selectBox select {
	width: 100%;
	font-weight: bold;
}

.overSelect {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.checkboxes {
	display: none;
	border: 1px #dadada solid;
	height: 100px;
	overflow: auto;
}

.checkboxes label {
	display: flex;
}

.checkboxes label:hover {
	background-color: #1e90ff;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modalP2Co {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, .8)
		/*url('/visualisations/p2co/img/FhHRx.gif') 
                50% 50% 
                no-repeat*/;
}

#loadingDiv {
	display: none;
	position: fixed;
	z-index: 1001;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 15px;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modalP2Co {
	overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modalP2Co {
	display: block;
}

body.loading #loadingDiv {
	display: block;
	width: 25%;
}

body.loading .loadingTxt {
	overflow: hidden;
	display: block;
	text-align: center;
}

body.loading .spinnerClass {
	text-align: center;
	padding-bottom: 5px;
}

#progress {
	position: relative;
	width: 100%;
}

.sliderFilter {
	margin-left: 7px;
	width: 95%;
	z-index: 0;
}

#ddlCsvBtn {
	margin-top: 5px;
}

.displayButton {
	height: 30px;
	margin-right: 10px;
}

/* Style the tab */
.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	width: 50%;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	/* display: none; */
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

/* #array{
  overflow-x: auto;
} */

/* .tabcontent {
  animation: fadeEffect 1s;  Fading effect takes 1 second 
} 

/* Go from zero to full opacity 
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
} */
.arrowsButton {
	width: 20px;
	height: 20px;
}

#loadNextProj {
	display: none;
}

.sidebar {
	top: 10px;
	left: 20px;
}

#textContent {
	font-size: 16px;
	padding: 12px;
	display: none;
}

#textAndButton {
	background-color: #FFFFFF;
}

#sidebarAndMap {
	/*padding-left: 6px;
    padding-right: 15px; 
    */
	/* position: relative; */
	
}

.sidebar-pane {
	padding: 10px;
}

.sidebar-header {
	background-color: #004494;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-tabs>li.active, .sidebar-tabs>ul>li.active {
	color: #fff;
	background-color: #004494;
}

#arrayAndButtons {
	z-index: 10000; /* on top of everything */
}	

/* The Modal (background) */
.modalArrayAndButtons {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 2; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content-ArrayButtons {
	background-color: #fefefe;
	margin: 1% 10px 1% 10px; 
	padding: 0 20px 15px; 
	border: 1px solid #888;
	width: 96%; /* Could be more or less, depending on screen size */
	overflow: hidden;
}

/* The Close Button */
.closeArrayAndB {
	color: black;
	font-size: 28px;
	font-weight: bold;
}

.closeArrayAndB:hover, .closeArrayAndB:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.logoOtelo {
	height: 40px;
}

.logoUL {
	height: 70px;
}

.logoNext {
	height: 45px;
	margin-left: 12px;
}

#logos {
	float: right;
	position: relative;
	z-index: 3;
	display: grid;
	margin-top: 10px;
}

#divButtons {
	margin-bottom: 10px;
}

#arrayTable_wrapper {
	margin-top: 5px;
}

.txtDiv {
	background-color: white;
	margin-top: 10px;
	margin-left: 72px;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	font-size: 15px;
	max-width: 530px;
	height: auto !important;
}

.leaflet-popup-content {
	overflow: auto;
	max-height: 600px;
	margin: 2px 19px;
}

.participantTd {
	max-width: initial !important;
}

.participantTitle {
	padding-left: 30px;
}

td.details-control {
	text-align: center;
	color: forestgreen;
	cursor: pointer;
}

tr.shown td.details-control {
	text-align: center;
	color: red;
}

.markercluster-blue {
	background-color: rgb(134, 212, 247, 0.6);
	width: 22px !important;
	height: 22px !important;
}

.markercluster-blue div {
	background-color: rgba(36, 174, 238, 0.6);
	width: 15px !important;
	height: 15px !important;
	font-size: 11px !important;
	margin-left: 2.5px !important;
	margin-top: 2.5px !important;
}

.markercluster-blue span {
	line-height: 15px;
}

.markercluster-orange {
	background-color: rgba(253, 156, 115, 0.6);
	width: 28px !important;
	height: 28px !important;
}

.markercluster-orange div {
	background-color: rgba(241, 128, 23, 0.6);
	width: 20px !important;
	height: 20px !important;
	font-size: 12px !important;
	margin-left: 4px !important;
	margin-top: 4px !important;
}

.markercluster-orange span {
	line-height: 20px !important;
}

/* gold is default */
.markercluster-gold {
	background-color: rgba(241, 211, 87, 0.6);
}

.markercluster-gold div {
	background-color: rgba(255, 247, 15, 0.6);
}

.markercluster-red {
	background-color: rgba(248, 103, 105, 0.6);
	width: 50px !important;
	height: 50px !important;
	border-radius: 25px !important;
}

.markercluster-red div {
	background-color: rgba(238, 36, 46, 0.6);
	width: 40px !important;
	height: 40px !important;
	font-size: 14px !important;
	margin-left: 5px !important;
	margin-top: 5px !important;
	border-radius: 20px !important;
}

.markercluster-red span {
	line-height: 40px !important;
}

.markercluster-black {
	width: 60px !important;
	height: 60px !important;
	background-color: rgba(94, 94, 94, 0.6);
	color: white;
	border-radius: 30px !important;
}

.markercluster-black div {
	background-color: rgba(10, 10, 10, 0.6);
	color: white;
	width: 50px !important;
	height: 50px !important;
	font-size: 15px !important;
	margin-left: 5px !important;
	margin-top: 5px !important;
	border-radius: 25px !important;
}

.markercluster-black span {
	line-height: 45px !important;
}

.barplotSlider {
	position: absolute;
	margin: auto;
	border: 0.5px black solid;
	text-align: center;
	border-radius: 6px;
	visibility: hidden;
	background-color: white;
	display: none;
}

.barplotSlider.show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
	left: 0;
	right: 0;
	bottom: -8px;
}

/* Add animation (fade in the popup) */
@
-webkit-keyframes fadeIn {
	from {opacity: 0;
}

to {
	opacity: 1;
}

}
@
keyframes fadeIn {
	from {opacity: 0;
}

to {
	opacity: 1;
}

}
.checkboxes>input {
	display: flex;
}

.checkboxes>div>span {
	padding-bottom: .5rem;
}

.checkboxes>div>span>label {
	margin-bottom: 0 !important;
}

.dataTables_scrollBody {
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

table td {
	max-width: 70px;
	white-space: wrap;
	/*text-overflow: ellipsis;*/
	word-break: break-word;
	overflow: hidden;
}

#labelAndSliderBudget {
	position: relative;
}

.plotAndSlider {
	position: relative;
}

.labelAndSliderClass {
	margin-left: 5px;
}

.participantTable {
	width: -moz-available; /* For Mozzila */
	width: -webkit-fill-available; /* For Chrome */
}

table.dataTable thead th {
	text-align: center;
	word-wrap: break-word;
	word-break: break-all;
}

.jsonErrorClass {
	/*padding: 5px;*/
	color: red;
	text-align: center;
	height: auto;
}

.sliderNbProjects {
	width: 50%
}

table.dataTable thead th {
	padding: 10px 10px;
}

#navBarSearchForm {
	/* width: 38% !important; */
	
}

#advancedSearchForm {
	display: none;
	position: absolute;
	color: black;
	z-index: 1000;
	background-color: white;
	border-radius: 5px;
	overflow: auto;
}

#checkboxesDiv {
	margin: 5px;
}

.labelAndCheckbox {
	display: flex;
}

.labelAndCheckbox label {
	padding-left: 5px;
	margin-bottom: 0 !important;
}

.advancedSearchBlock {
	margin-left: 7px;
	margin-bottom: 5px;
	font-size: 1rem;
}

.advancedSchTitle {
	margin-left: 3px;
	font-size: 1rem;
}

#glassIcon {
	float: right;
	padding-right: 10px;
}

.searchableHeader {
	border: 0.5px gray solid;
	border-radius: 3px;
	margin-right: 5px;
}

.hide {
	display: none;
}

#colName {
	word-break: break-word;
	word-wrap: break-word;
}

#modalContentOperator {
	padding: 20px;
}

.relative {
	position: relative;
}

.flex {
	display: flex;
}

.centerAlign {
	align-items: center;
}

.block {
	display: block;
}

.radioInputArray {
	vertical-align: middle;
	margin-right: 5px !important;
}

#info-modal {
	top: 0 !important;
	left: 0 !important;
}

.extendedWidth {
	width: 100%;
}

.leaflet-container a.leaflet-popup-close-button {
	color: black;
}