/* STANDARD RESOLUTION */
@media(min-width:870px) {

	/*section#scoreboard #map {
		margin:0px;
	}*/

	section#scoreboard .filter {
		width:100%;
	}
	
	section#scoreboard #step_details_container {
		position:absolute;
		left:50%;
		top:50%;
		width:33%;
		padding:10px;

		box-shadow: 1px 1px 10px #000;

		background-color: rgba(255,255,255,0.85);
		z-index:2;
		border-radius: 10px;
	}
	section#scoreboard #step_details_container::before {
		position:absolute;
		top:-2px;
		left:-2px;
		width:10px;
		height:10px;
		border-left:5px solid #000;
		border-top:5px solid #000;
		content:' ';
	}
	section#scoreboard #step_details_container table,
	section#scoreboard #global_recap_container table {
		background-color: transparent;
		min-width:auto;
		width:auto;
	}
	section#scoreboard #step_details_container h3 {      
		color:#333;
		display:inline-block;
	}
	section#scoreboard #global_recap_container h3 {
		display:none;
	}

	section#scoreboard #global_recap_container {    

		/*background-color:rgba(50, 80, 155, 0.85);*/
		background-color: #12113F;/* !important;*/

		position:absolute;

		/*top:0px;*/
		top: -92px;

		left:0px;
		width:100%;
		height:105px;
		color:#fff;
		box-sizing: border-box;

		padding:10px;
		/*padding-left: 130px;*/
		padding-left: 140px;
	}
	section#scoreboard #global_recap_container #interface_logo {            
		width:85px;
		height:85px;
		position:absolute;

		/*left: 10px;*/
		left: 20px;

		top:10px;
		background-color: #fff;

		background-image:url('../images/logos/systelecoms.png');
		background-position:5px center;
		background-size: 75px auto;
		background-repeat: no-repeat;
	}
	section#scoreboard #global_recap_container .visual {
		display:flex;
		text-transform: uppercase;
	}
	section#scoreboard #global_recap_container .visual>div {
		width:100%;
	}
	section#scoreboard #global_recap_container .visual .project {
		font-size:18px;
		font-weight:bold;
		padding-top:19px;
		line-height:24px;
		/*padding-right:20px;*/
		position:relative;
	}
	/*
	section#scoreboard #global_recap_container .visual .project::after {
		content:'/';
		font-size:95px;
		font-weight:normal;
		line-height:85px;
		position:absolute;
		top:0px;
		right:0px;
	}
	*/
	section#scoreboard #global_recap_container .visual .progress {
		display:flex;  
		font-size:18px;
		font-weight:bold;          
	}
	section#scoreboard #global_recap_container .visual .progress>div {
		width:100%;
		margin-left:10px;
		text-align:center;
	}
	section#scoreboard #global_recap_container .visual .progress .visual_percent_container {
		width:55px;
		height:55px;
		display:inline-block;
		background:conic-gradient(var(--orange) 180deg, #fff 0deg);
		border-radius:50%;
	}
	section#scoreboard #global_recap_container .visual .progress .visual_percent {
		width:45px;
		height:45px;
		line-height:45px;
		border-radius:50%;
		background-color:#fff;
		color:#333;
		display:inline-block;
		margin:5px;
		font-size:14px;
	}
	section#scoreboard #global_recap_container .visual .progress .value {
		font-size:14px;
	}

	section#scoreboard #global_recap_container .visual .progress .label {
		text-align:center;
		display: block;
		margin-bottom:10px;
		margin-top:4px;
		font-size:14px;
		white-space: nowrap;
	}
	section#scoreboard #global_recap_container table {
		display:none;
	}

}

/* SMALL SCREENS / SMARTPHONES */
@media(max-width:869px) {

	header nav a {
		display:none;
	}
	header nav select {
		display: inline-block;
		width: auto;
		margin-bottom : 0;
	}

	img {
		max-width: 100%;
		height:auto;
	}

	form {
		width:100%;
		padding:10px;
	}

	div.table_btns input {
		width: 100%;
	}
		
	table td {
		padding: 10px;
	}      

	/* display first two cols */
	table.datatable td {
		display:none;
	}
	/* display last two cols */
	table.datatable td[data-colname="num"],
	table.datatable td[data-colname="reference"],
	table.datatable td[data-colname="login"],
	
	table.datatable td[data-colname="serial"],
	table.datatable td[data-colname="type"],

	table.datatable td[data-colname="view"],
	table.datatable td[data-colname="select"],
	table.datatable td[data-colname="edit"],
	table.datatable td[data-colname="delete"] {
		display:table-cell;
	}
	
	form .nav_form input[type="button"] {
		width:50%;
	}

	form .dates>* {
		width:auto !important;
	}

	#pages {
		padding:10px;
	}

	section#scoreboard {
		margin-top:0px;
	}
	section#scoreboard #map {
		width: 100%;
	}
	/*
	section#scoreboard #global_recap_container .visual {
		display:none;
	}
	*/
	section#scoreboard #global_recap_container .visual {
		margin-left: 10px;
		line-height: 23px;
		margin-bottom: 13px;
	}
	section#scoreboard #global_recap_container #global_recap {
		padding-bottom : 13px ;
		padding-left : 10px ;
		padding-right : 10px ;
		line-height : 20px ;
	}

	#app footer {
		font-weight:normal;
		font-size:10px;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#global_recap_container h3 {
		padding-top: 12px;
		font-size: 17px;
		margin: 0 10px 13px 10px;
	}

	#back_btn {
		top: 10px;
		right: 10px;
		padding: 5px 10px;
		line-height: normal;
	}

	section#interventions_edit .attachment {
		margin-top:10px;
		margin-bottom:10px;
	}
	section#interventions_edit .attachment div {
		margin-left:10px;
	}
	section#interventions_edit .attachment .info_icon,
	section#interventions_edit .attachment .delete_icon {
		padding:10px;
	}
	section#interventions_edit .attachment a {
		width: calc(100% - 120px);
	}

}

/* DISPLAY FILTER ON TOP OF TABLE */
/* MAIN RULE OF DISPLAYING THEM NEXT TO EACH OTHER NOW RESERVED TO WIDEST SCREENS */
@media(max-width:1280px) {
	form.filter {
		width:100%;
		padding:10px;
	}
	table, div.table_btns {
		width: 100%;
		min-width: 320px;
	}
}

/* WIDE SCREENS DISPLAY SCOREBOARD FILTER INSIDE GLOBAL RECAP */
@media(min-width:1152px) {
	section#scoreboard .filter {
		float:none;
		width:21% !important;
		position:absolute;
		/*
		top:calc(50% + 53px); /* 2023-06-22 : Middle of map = 50% + (top_banner_height /2) *//*
		left:20px;            
		transform:translate(0, -50%);
		*/
		top: -63px;
		/*left: 29%;*/
		left:calc(12% + 280px);

		box-shadow: 1px 1px 10px #000;

		/*background-color: rgba(255,255,255,0.85);*/
		background-color: #fff;
		z-index:2;
		border-radius: 10px;
	}
}