:root{
	--main-teal: #16a6b5;
	--main-green: #267c51;
	--dark-green: #17623c;
	--dark-teal:  #13393c;
	--main-width-spacer: 20px;
	--main-height-spacer: 10px;
	--green-gradient: linear-gradient(to bottom, var(--dark-green) 0%,var(--main-green) 100%);
	--dark-blue: #173269;
	--secondary-blue: #1F51B5;
	--secondary-green: #0DB561;

	--main-teal-muted: rgba(22,166,181,.3);

	/*for categories*/
	--gc-red-500: #F44336;
	--gc-red-900: #B71C1C;
	--gc-purple-500: #9C27B0;
	--gc-purple-900: #4A148C;
	--gc-pink-500: #E91E63;
	--gc-pink-900: #880E4F;
	--gc-blue-500: #2196F3;
	--gc-blue-900: #0D47A1;
	--gc-cyan-500: #00BCD4;
	--gc-cyan-900: #006064;
	--gc-green-500: #4CAF50;
	--gc-green-900: #1B5E20;
	--gc-yellow-500: #FFEB3B;
	--gc-yellow-900: #F57F17;

	--form-red: #DD0000;
}

body{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
}

h1,h2,h3,h4,h5 {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dark-blue);
}

h3{
	margin-top: var(--main-width-spacer);
}

p{
	font-size: 1.2em;
	line-height: 1.4em;
	font-weight: normal;
}

a{
	color: var(--main-teal);
	text-decoration: none;
}
a:hover{
	color: var(--main-green);
}


.main-content a{
	border-bottom:  1px dotted var(--main-teal);
}

.main-content a:hover{
	border-bottom:  1px dotted var(--main-green);
}

.fullwidth{
	background-color: #fff;
	box-shadow: 0px 20px 20px #efefef;
}

.wrapper{
	width: 76vw;
	margin: 0 auto;
}

header,footer{
	/*min-height: 11vh;*/
}

.home header{
	display:none;
}

.maincontent{
	background-color: rgba(255, 125, 10,.5);

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efefef+1,ffffff+100 */
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top,  #efefef 1%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #efefef 1%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #efefef 1%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	min-height: 73vh;

}

.main-content{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.required::after{
	content: " *";
	color: var(--form-red);
}

table{
	margin-bottom:40px;
}

.fullwidth.secondary-content {
    padding: 40px 0;
    /*background-color: var(--main-teal-muted);*/
}

.toprow{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.nav{
	display: flex;
	justify-content: flex-end;
	margin: 20px 0;
	align-items:center;
}

.nav a {
	text-transform: uppercase;
	color: var(--main-green);
	letter-spacing: .08em;
	padding-left: 20px;
	letter-spacing: .08em;
}

.nav a, .languages a{
	text-decoration: none;
	font-size: 0.9em;
}

.menu {
    list-style: none;
}

.menu li {
    float: left;
    padding-left: 20px;
    text-transform: uppercase;
    font-size: .9em;
    color: var(--main-green);
}

.menu ul {
    display: none;
}

.menu li ul {
    position: absolute;
    list-style: none;
    z-index: 1;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

.menu li:hover ul{
    display:block;
}

.menu li ul li {
    float: none;
    margin: 0;
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid var(--main-teal);
}

.down-arrow{
	font-size:.6em;
}

.languages {
    display: inline-block;
    margin-left: 20px;
}

.languages a{
	color: #333;
	padding: 0;
}

.languages li:first-child {
    border-right: 1px solid #000;
    padding-right: 5px;
}

.languages li {
    margin: 0;
    padding: 0 0 0 5px;
}


.lang::after{
	content: " | ";
}

.lang:last-child::after{
	content: "";
}

.nav a:hover, .languages a:hover{
	color: var(--main-teal);
}

#logo{
	width: 10vw;
}

#logo img{
	height: 10vh;
}

.menus{
	display: flex;
	align-content: space-between;
	flex-flow: column wrap;
	align-items: flex-end;
}


.heroimg, .small-heroimg{
	background: transparent url(../img/bg.png) 50% 50% no-repeat;
	background-size: cover;
	height: 24vh;
	width: 100%;
	color: #fff;
}

.small-heroimg{
	height:6vh;
}


.heroimg .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
}

.heroimg h2{
	color: #fff;
}

.searchandexplain {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.searchandexplain .explain{
	text-align: right;
	line-height: 1em;
}
.searchandexplain .explain h2{
	font-size: 2em;
	font-weight: 400;

}
.searchandexplain .explain p{
	font-size: 1.4em;
	font-weight: 400;

}



.suggestions.top{
	background-color: var(--main-teal);
}
.suggestions.bottom{
	background-color: var(--dark-blue);
}

.actions-2{
	display: flex;
	justify-content: space-between;
}

a.active, a.selected{
	border-bottom: 2px solid var(--main-teal);
}

.column{
	width: 50%;
	font-size: 1.2em;
}

.sidebar{
	width: 20vw;
	font-size: 0.8em;
}

.stats{
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;

}

.statsblock{
	display: flex;
	height: 8vw;
	width: 10vw;
	color: #fff;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

.statsblock h2{
	font-size: 3em;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

.statsblock p{
	margin: 0;
	padding: 0;
}

.datasets{
	background-color: var(--secondary-green);
}

.publishers{
	background-color: var(--secondary-blue);
}

.search{
	background-color: #fff;
	padding: 60px 0;
}

.searchfieldwrapper{
	position: relative;
	width: 20vw;
}

.newsletter .searchfieldwrapper{
	width: 33vw;
}

.searchfield #q{
	display: block;
	width: calc(100% - (var(--main-width-spacer) * 2) ) !important;
	padding: var(--main-height-spacer) var(--main-width-spacer);
	margin: var(--main-height-spacer) auto;
	font-size: 1.4em;
}

.searchbutton{
	position: absolute;
    right: -4px;
    top: -1px;
    width: 46px;
    height: 46px;
    background-color: var(--main-green);
    background: var(--green-gradient);
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.searchbutton:hover, button:hover{
	background: var(--main-teal);
}

.searchbutton img{
	fill: #fff;
	height: 70px;
	margin-top: -4px;
}

button, input[type=submit]{
	border-radius: 10px;
	background: var(--green-gradient);
	color: #fff;
	padding: 10px 20px;
	font-size: 1.2em;
	border:1px solid rgba(0,0,0,0 );
	letter-spacing: .07em;
	text-transform: uppercase;
}

button:hover, input[type=submit]:hover{
	background:var(--main-teal);
}


button:active, input[type=submit]:active{
	box-shadow:2px 2px 2px #999;
}

#file_infos button{
	text-transform:capitalize;
	padding:
}

.first-button {
    text-transform: capitalize;
    font-size: .9em;
    position: absolute;
    right: 0;
}

.categories{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
  	gap: var(--main-width-spacer);
}

.category{
	padding: 6px;
	width: 96%;
	height: 100px;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0 #ccc ;
	background-color: #fff;
}

.category:hover, .category a:hover{
	color: #fff;
}



.categories .agriculture{border-left: 4px solid var(--gc-purple-500); }
.categories .agriculture i, .theme-icons .agriculture{color: var(--gc-purple-500); }
.categories .arts, .funding-project{border-left: 4px solid var(--gc-yellow-900); }
.categories .arts i, .theme-icons .arts, .funding-project i{color: var(--gc-yellow-900); }
.categories .justice, .licence{border-left: 4px solid var(--gc-cyan-500); }
.categories .justice i, .theme-icons .justice, .licence i{color: var(--gc-cyan-500); }
.categories .economy{border-left: 4px solid var(--gc-red-900); }
.categories .economy i, .theme-icons .economy{color: var(--gc-red-900); }
.categories .education, .dsi{border-left: 4px solid var(--gc-green-500); }
.categories .education i, .theme-icons .education, .dsi i{color: var(--gc-green-500); }
.categories .energy{border-left: 4px solid var(--gc-blue-900); }
.categories .energy i, .theme-icons .energy{color: var(--gc-blue-900); }
.categories .environment{border-left: 4px solid var(--gc-red-500); }
.categories .environment i, .theme-icons .environment{color: var(--gc-red-500); }
.categories .government{border-left: 4px solid var(--gc-yellow-500); }
.categories .government i, .theme-icons .government{color: var(--gc-yellow-500); }
.categories .health{border-left: 4px solid var(--gc-pink-900); }
.categories .health i, .theme-icons .health{color: var(--gc-pink-900); }
.categories .housing{border-left: 4px solid var(--gc-green-900); }
.categories .housing i, .theme-icons .housing{color: var(--gc-green-900); }
.categories .population{border-left: 4px solid var(--gc-purple-900); }
.categories .population i, .theme-icons .population{color: var(--gc-purple-900); }
.categories .science{border-left: 4px solid var(--gc-cyan-900); }
.categories .science i, .theme-icons .science{color: var(--gc-cyan-900); }
.categories .regions{border-left: 4px solid var(--gc-blue-500); }
.categories .regions i, .theme-icons .regions{color: var(--gc-blue-500); }
.categories .transport{border-left: 4px solid var(--gc-pink-500); }
.categories .transport i, .theme-icons .transport{color: var(--gc-pink-500); }

.categories i{display: inline-block; margin: 0 15px 0 5px;}

.browse-resources .categories i{width:20px;}

.categories .agriculture:hover{background-color: var(--gc-purple-500); }
.categories .arts:hover, .funding-project:hover{background-color: var(--gc-yellow-900); }
.categories .justice:hover, .licence:hover{background-color: var(--gc-cyan-500); }
.categories .economy:hover{background-color: var(--gc-red-900); }
.categories .education:hover, .dsi:hover{background-color: var(--gc-green-500); }
.categories .energy:hover{background-color: var(--gc-blue-900); }
.categories .environment:hover{background-color: var(--gc-red-500); }
.categories .government:hover{background-color: var(--gc-yellow-500); }
.categories .health:hover{background-color: var(--gc-pink-900); }
.categories .housing:hover{background-color: var(--gc-green-900); }
.categories .population:hover{background-color: var(--gc-purple-900); }
.categories .science:hover{background-color: var(--gc-cyan-900); }
.categories .regions:hover{background-color: var(--gc-blue-500); }
.categories .transport:hover{background-color: var(--gc-pink-500); }

.category:hover a, .category:hover i{
	color: #fff;
}

.browse-resources .category {
    padding: 0 6px;
    margin-bottom: 0;
    justify-content: flex-start;
    width: 14vw;
}

.browse-resources .sidebar.categories {
    grid-template-columns: auto;
    gap: 2px;
}

.browse-resources {
    display: flex;
    margin: 40px 0;
}

.sidebar .category{
	height:unset;
	padding:10px;
}

.theme-icons i{
	margin:0 10px 10px 0;
}

.flash{
	width:76vw;
	margin:0 auto;
	padding: 20px 0;
}

.total{
	font-size:.8em;
}

.column button{
	margin: 0 auto;
}

.section{
	margin: 60px auto;
}

.searchandexplain button, .searchbutton{
	background: none;
	background-color: var(--main-teal);
}
.searchandexplain button:hover, .searchbutton:hover{
	background-color: var(--secondary-green);
}


.resource-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.resource-details ul{
	list-style: none;
	margin: 0 0 20px 0;
	padding:0;
}

.resource-details .column{
	width:46%;
}

.resource-details .heading {
    font-weight: bolder;
    color: var(--dark-teal);
    text-transform: uppercase;
    font-size: .8em;
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top:10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
   	 padding-left: 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	height:100%;
}

.add-resource{
	margin-left:5px;
	margin-right:5px;
}


#resource_titles button, #resource_descriptions button, #attributions button, #ipr_holders button, #texts button, #file_infos button {
    padding: 4px 10px;
}

.newsletter{
	background-color: var(--main-teal);
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	margin-top: 40px;
}

.newsletter h3{
	color: #fff;
	padding: 40px;
}

#email-field{
	display: block;
    width: calc(100% - (var(--main-width-spacer) * 2) );
    padding: var(--main-height-spacer) var(--main-width-spacer);
    margin: var(--main-height-spacer) auto;
    font-size: 1.4em;
}

.newsletter button{
	background: none;
	background-color: var(--main-green);
	border-radius: 0;
	width: auto;
}
.newsletter button:hover{
	background-color: var(--secondary-green);
	border-radius: 0;
}

.clear-filters{
	display: inline-block;
	margin-left:40px;
}

/*
	--- --- --- --- ---
	TOOLTIP
	--- --- --- --- ---
*/

.tooltip-wrapper {
	display: inline-block;
	vertical-align:top;
	margin-top:1px;
}

.tooltip-template {
	display: none;
}

table{
	border-collapse:separate;
	border-spacing:10px;
}

table.resources-table,
#user_list{
	border-spacing:0;
}

table.resources-table tbody tr:nth-child(even),
#user_list tbody tr:nth-child(even){
	background-color:#fefefe;
}

table.resources-table th, table.resources-table td,
#user_list th, #user_list td{
	padding:5px;
	vertical-align:middle;
}

td:first-child {
	text-align: left;
}

td{position:relative}

th {
	text-align: left;
}

td ul, .field ul{
	margin:0;
	padding:0;
	list-style:none;
}

tr{
	vertical-align:top;
}

.hide{
	display:none;
}

.field{
	margin-bottom:20px;
	border-top:1px solid #ccc;
	padding:20px;
}

.field label{
	width:10vw;
	display:inline-block;
	padding:10px;
	padding-right:0;
	vertical-align:top;
	text-align:right;
}

.field li label{
	width:auto;
	text-align:left;
	vertical-align: baseline;
}

.field ul{
	margin-left:calc(10vw + 20px);
}

.field p{
	margin-left:calc(10vw + 20px);
	font-size: 1.0em;
}

.field.last{
	margin-bottom:40px;
}

.field.tos label{
	vertical-align:baseline;
}

.select2 ul{
	margin:0;
}

input[type=text], select,  textarea, .select2-container {
    width: 36vw !important;
}

input, select, textarea {
    font-size: 1em;
    padding: 5px;
}

.select2 button, .select2-selection__choice__remove{
	background-color:transparent;
}

.select2-selection__choice__remove{
	color:#fff !important;
}

.select2-selection__choice__remove:hover,
.select2-selection__choice__remove:focus{
	color:#333 !important;
}

.select2-selection__choice__display {
    margin-left: 10px;
}

.errors{
	color:red;
	display: block;
	width:140px;
}

.filter-labels{
    min-height:43px;
}

.filter-labels span {
    display: inline-block;
    margin-right: 20px;
    border: 1px solid #aaa;
    padding: 5px 10px;
    border-radius: 5px;
    font-size:.8em;
}


.browse-search-field-wrapper .searchbutton {
    margin-top: 3px;
}


footer{
	background-color: var(--dark-blue);

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c9de96+0,8ab66b+44,398235+100;Green+3D+%233 */
	/*background: var(--main-green); /* Old browsers */
	/*background: -moz-linear-gradient(top,  var(--dark-green) 0%,  var(--main-green) 100%); /* FF3.6-15 */
	/*background: -webkit-linear-gradient(top,  var(--dark-green) 0%,var(--main-green) 100%); /* Chrome10-25,Safari5.1-6 */*
	/*background: linear-gradient(to bottom,  var(--dark-green) 0%,var(--main-green) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--dark-green)', endColorstr='var(--main-green)',GradientType=0 ); /* IE6-9 */

	display: flex;
	justify-content: space-between;
	align-items: center;


	color: #fff;
	font-size: .7em;
	text-align: center;
	padding: 20px 0;
}

footer a{
	color: #fff;
}

footer .wrapper{
	display: flex;
	justify-content: space-between;
}

.acknowledgements {
    display:flex;
    justify-content: flex-end;
    align-items:center;
    text-align: right;
    height: 100%;
    line-height: 1.6em;
    width:100%;
    letter-spacing:1px;
    color: #6f8ac1;
    border-top: 1px solid #6f8ac1;
    margin-top:10px;
    padding-top:10px;

}

figcaption{
	display: inline-block;
}


.search-results{
	width:60vw;
}

.search-results-list{
	width: calc(100% -20px);
    	padding: 0;
}

.search-results-list li {
    border: 1px solid grey;
    margin-bottom: 10px;
    width: calc(100% - 26px);
    display: flex;
    flex-direction:column;
    background-color: #fff;
    padding: 20px;
    border-top:none;
    border-left:5px solid lightgrey;
    position:relative;
}

.search-results-list li  a {
    font-size: 1.2em;
}

.description{
	font-size:1em;
}

.resource-metrics{
	display:flex;
	justify-content:flex-end;
	margin-top:0px;
	width: 40%;
	position: absolute;
	right:20px;
	top:0;
}

.action-block{
	position:relative;
}

.resource-metrics p{
	margin-left: 10px;
	font-size:.8em;
}

.list-of-links{
	font-size:1.2em;
	line-height:1.8em;
	text-align:right;
}

.list-of-links a{
	display: block;
}

footer .logos img{
	height: 5vh;
	margin-left: 20px;
}

footer a:hover{
	color: var(--gc-cyan-500);
}

.logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.metasharelogo{
	height: 2vh !important;
}

.dculogo{
	height: 8vh !important;
}

.adaptlogo{
	height: 6vh !important;
}


.lottologo, .tourismlogo{
	height:7vh !important;
}


.smallprint{
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

.footercolumn{
	width: 20vw;
}

#cookiebanner {
    background-color: var(--main-teal);
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 2px;
    font-size:.8em;
}

#cookiebanner span{
	display:inline-block;
	margin-left:10px;
}

#cookiebanner button{
	font-size:1em;
	letter-spacing:normal;
	background-color: var(--gc-cyan-900);
}

#cookiebanner a{
	color:#fff;
	text-decoration:underline;
}

@media only screen and (max-width: 1600px) {
	.statsblock h2 {
	    font-size: 2.4em;
	}

	.heroimg {
		height: 40vh;
	}

	.category{
		font-size: 0.8em;
		height: 80px;
	}
}


@media only screen and (max-width:1200px){

	th, td{
		font-size:.7em;
	}

	#logo{
		width:7vw;
	}
	#logo img {
 		height: 7vh;
	}
	.nav a, .languages a {
    		font-size: 0.79em;
	}

}