@charset "utf-8";
/* CSS Document for WMO PLAN of Action Hydrology 2021-2030  */
/* box-sizing property set to border-box.  padding and border are included in the total width and height of the elements.*/
* 
{
  box-sizing: border-box;
}
/* Colunns */
/* All columns */
[class*="col-"] {
  float: left;
  padding: 15px;
 /* border: 1px solid red;*/
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) 
{
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 768px) 
{

}

/*
row should be wrapped in a <div>. The number of columns inside a row should always add up to 12
*/
/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow*/ 
.row::after {
  content: "";
  clear: both;
  display: table;
}

body {
	font-family: Arial, "sans-serif", Verdana;
}
#search h3{
	
	margin:2px 0;
}
a {
	text-decoration: none;
}

a:hover {
	color:#ff9900;
}
#header.row {
	border-bottom: 1px solid  #3D3D3D; 
}
#search.row{
	border: 5px solid  #D1EBFC;
	margin-bottom: 10px;
}
.details, .search {
	padding: 5px;
	margin-bottom: 10px;
	border:1px solid #3D3D3D;
	border-radius: 5px;
	box-shadow: 10px 10px 6px -5px rgba(0,0,0,0.48);
	-webkit-box-shadow: 10px 10px 6px -5px rgba(0,0,0,0.48);
	-moz-box-shadow: 10px 10px 6px -5px rgba(0,0,0,0.48);
	
}
.details h3{
	/*color: #030829;*/
	font-size: 1em;
	font-weight: bold;
}

#title.col-8 h1 {
	/*color: #030829;*/
}
#search.row h3 {
	/*color: #030829;*/
}

#logo  {
	/*border: 1px solid #666565;*/
	
	}
#title {
	
	/*border: 1px solid #666565;*/
}
   
.details .row .milestones /* for milestones and subactivities content*/

{
	width:98%;
	margin:auto;
	border:1px solid #e9eff5;
	border-radius: 5px;
	background-color:#e9eff5 ;/*#E0E2E8*/
	padding:15px;
	
}

/* Status icones for bullets */

.completed
{
	
	list-style-image: url( "../images/icone-ok_24.png");
	color:#19a319;

}

.ongoing
{
	list-style-image: url("../images/icone-ongoing_24.png");
	color:#044a9b;
}

.notstarted
{
	list-style-image: url("../images/icone-notstarted_24.png");
}



/* XXX  Responsive CSS   XXX */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{
#ambitions {
	max-width: 100%;	
	
	}
#outputs {
	max-width: 100%;
	}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) 
{
body {
	max-width: 1200px;
	margin:auto;
}	
/**/	
#ambitions {
	
	max-width: 90%;	
	
	}
#outputs {
	
	max-width: 95%;
	
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)
{

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)
{

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{

}