/* 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="view"],
      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_btn,
      section#interventions_edit .attachment .delete_btn {
            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;
      }
}