:root{
--primary-color:#c4e4b5;
--icon-color:#79c484;
--bg-color:#55b467;
--title-color:#00441b;
}

#includeFooter{
	height:185px;
	background-color: var(--primary-color);
}
#F_container {
	overflow:hidden;
	height:100%;
	/* background-color:#26272b; */
	background-color: var(--primary-color);
	/* padding: 15px 0 0; */
	font-size: 15px;
	line-height: 24px;
	color: black;
	/* height:100px; */
	display:grid;
	grid-template-columns:40% 20% 40%;
	justify-items: center;
}
#F_container #down{
	grid-column:1/span 3;
	grid-row:2;
}
#F_container #left{
	grid-column:1/span 1;
	grid-row:1/span 1 ;
	display:flex;
	flex-direction:column;
}
#F_container #right{
	grid-column: 3 /span1;
	grid-row:1/span 1;
	display:flex;
	flex-direction:column;
}
#F_container hr {
	border-top-color: #bbb;
	opacity: 0.5
}

.site-footer hr.small {
	margin: 0 0
}

#F_container h6 {
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 2px;
	padding-top:10px;
	
}

.site-footer a {
	color: black;
}

.site-footer a:hover {
	color: white;
	text-decoration: none;
}

.footer-links {
	padding-left: 0;
	list-style: none
}

.footer-links li {
	display: block
}

.footer-links a {
	color: black
}

.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
	color: white;
	text-decoration: none;
}

.footer-links.inline li {
	display: inline-block
}

.copyright-text {
	margin: 0;
	margin-top:-10px;
}

@media (max-width:991px) {
	.site-footer [class^=col-] {
		margin-bottom: 30px
	}
}

@media (max-width:767px) {
	.site-footer {
		padding-bottom: 0
	}

	.site-footer .copyright-text,
	.site-footer .social-icons {
		text-align: center
	}
}





/* GENERAL CSS */
body {
	background-color: #fff;

}

/* GLOBAL CSS */
section {
	padding: 40px 0px;
}

.bg-custom-blue {
	background-color: #0076bc;
	color: #fff;
}

.bg-grey {
	background-color: #f7f7f7;
}

.text-custom-white {
	color: rgba(238, 238, 238, 0.685);
}

/* NAVBAR */
.navbar {
	background-color: #fff;
}

.navbar-nav .nav-item {
	margin-left: 25px;
	transition: all 0.5s;
	border-radius: 0.25rem;
}

.navbar-nav .nav-item:hover {
	background-color: var(--primary-color);
}

.navbar-nav .nav-item .nav-link {
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 400;
}

.navbar-shadow {
	box-shadow: 0px 1px 20px -7px rgb(0 0 0 / 52%);
}

.modal-wrapper {
	background-color: rgb(255, 255, 255);
	box-shadow: rgb(0 0 0 / 31%) 0px 0px 1px 0px,
		rgb(0 0 0 / 25%) 0px 7px 16px -4px;
}

.modal-top {
	display: flex;
	padding: 24px 18px 16px;
}

.modal-heading {
	color: rgb(23, 43, 77);
	margin: 0;
	padding-top: 7px;
}

.modal-description {
	margin: 8px 0px 0px;
	font-size: 0.875rem;
	color: rgb(107, 119, 140);
}

.danger-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	font-size: 1.25rem;
	border-radius: 50%;
	background-color: rgba(244, 67, 54, 0.08);
	color: rgb(244, 67, 54);
	margin-right: 16px;
}

.modal-bottom {
	display: flex;
	justify-content: flex-end;
	padding: 12px 24px;
}

.btn-custom-danger {
	background-color: rgb(244, 67, 54);
	color: white;
}

.btn-custom-danger:hover {
	background-color: rgb(170, 46, 37);
	color: white;
}




/* MEDIA QUERIES */
/* Extra small devices (phones, 465px and down) */
@media only screen and (max-width: 465px) {
	.xs-custom-mt {
		margin-top: 100px;
	}

}






.alert {
	padding: 20px;
	background-color: var(--icon-color);
	color: white;
}

.closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
}

.closebtn:hover {
	color: white;
}

/* a:hover {
	color:white;
  } */
/* a i:hover{
	color: white;
} */
.responsive {
	height: 100%;
	width: auto;
}

.fa {
	color: var(--icon-color);

}

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@100&display=swap');
/* 
h1, h2, h3, h4 {
	font-weight: bold;
} */

h1 {
	font-family: 'Roboto Slab', serif;
	text-align: center;
	text-transform: uppercase;
	font-size: 45px;
	margin: 0 0 24px;

}

.h1-mainPage {
	color: #000;
	text-shadow:
		-2px -2px 0 #fff,
		2px -2px 0 #fff,
		-2px 2px 0 #fff,
		2px 2px 0 #fff;
	/* padding: 80px; */
}

h2, h3, h4 {
	font-family: 'Roboto Slab', serif;
	text-align: center;
	margin: 0 0 24px;
	color:var(--title-color)
}

p {
	/*font-family: 'Fira Sans';*/
	text-align: justify;
	text-justify: values;
	/* text-align: center; */
	margin-left: 10%;
	margin-right: 10%;
}
#bins{
	text-align: center;
}


ul {
	text-align: justify;
}

/* random css for sidebar link => TODO: maybe to clean this huge amount here above i dont wanna read :D */
.sidebar-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

#headersContainer {
	background-image: url("../images/banner.jpg");
	background-size: cover;
	background-position: center center;
	height: 250px;
	margin-bottom: 20px;

}

#containerBtnAssgn3, #containerBtnAssgn2, #containerBtnAssgn1, #containerBtnAssgn4, #containerBtnAssgn5 {
	margin-top: 50px;
	display: flex;
	justify-content: center;

}


#pageContent {
	position: absolute;
	overflow-x: auto;
	z-index: 2;
	margin-top: 15px;
	margin-left: 300px;
}

#assignm1PageContent, #assignm2PageContent, #assignm3PageContent , #assignm4PageContent, #assignm5PageContent{
	/* position: absolute;  */
	overflow-x: auto;
	z-index: 2;
	margin-top: 15px;
	margin-left: 300px;
}



#includeHeader {
	position: relative;
	z-index: 4;
	max-height: 64px;

}
#headerTitle{
	color:var(--title-color);
	font-weight:700 !important;
}
#header {
	background-color: var(--primary-color);
	max-height: 64px;
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
}

#trentoTreeMapImg {
	width: 40%;
	height: 40%;
	
}

#containerImgTrentomap {
	/* text-align: center; */
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

#mySidebar {
	z-index: 3;
	width: 300px;
	margin-top: 45px;
}

#mySidebarHome {
	z-index: 3;
	width: 300px;
	margin-top: 45px;
}

#HomePageTitle {
	padding-top: 22px;
	margin-top: 70px;
}

#assignm1Title, #assignm2Title, #assignm3Title, #assignm4Title, #assignm5Title {
	padding-top: 22px;
	margin-top: 90px;
}


.task-container {
	display: flex;
	justify-content: center;
}

#task3, #A2task1{
	justify-content: center;
	text-align: center;
}


#task5, #task5-1, #task5-2, #task5-3, #task5-4, #task5-5, #task5-6, #task5-7, #task5-8, #task5-9, #task5-10, #task5-11, #task5-12   {
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	text-align: center;
}

#waffle_legend {
	display: flex;
	justify-content: center;
	text-align: center;
}

.waffle_row {
	display:flex;
	/* justify-content: space-around; */
}

.waffle_row h3 {
	width: 50%;
}

span {
	font-family: 'Roboto Slab', serif;
}

#members {
	font-family: 'Roboto Slab', serif;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
}
.w3-light-blue{
	background-color:var(--bg-color) !important;
}

.bubbles {
	stroke-width: 1px;
	stroke: #F1F1F1;
	opacity: .75
  }
  .bubbles:hover {
	stroke: black;
	opacity: 1
  }
.map-container{
	text-align: center;

}
.map-container p{
	text-align: center;
}


.link {
	fill: none;
	stroke: #000;
	stroke-opacity: .2;
  }
  .link:hover {
	stroke-opacity: .5;
  }