html,
 body {
     height: 100%;
     padding: 0;
     margin: 0;
     font-family: 'Roboto', sans-serif;
 }
.p-datatable-tbody > tr.p-datatable-row-selected {background-color: #fcd9a5 !important;}

#container {
     display: flex;
     background-color: black;
     padding: 10px;
     border-radius: 15px;
     width: 100%;
     height: calc(100vh - 80px);
     height: -moz-calc(100vh - 80px);
     height: -webkit-calc(100vh - 80px);
 }

#point2 {
     height: calc(100vh - 450px);
     height: -moz-calc(100vh - 450px);
     height: -webkit-calc(100vh - 450px);
}
 #app {
     width: 100%;
     height: auto;
 }
 #contenu2 {
     width: 100%;
     margin: 0 1px;
     display: flex;
     background-color: black;
     padding: 10px;
     border-radius: 15px;
 }

 #contenu3 {
     width: 100%;
     margin: 0 1px;
     display: flex;
     background-color: black;
     padding: 10px;
     border-radius: 15px;
     display: flex;
     flex-direction: column;
     height: calc(100vh - 650px);
     height: -moz-calc(100vh - 650px);
     height: -webkit-calc(100vh - 650px);
 }

 /* cluster */
 .card {
     margin-top: 0;
     height:300px;
 }


 .product-card {
     border: 1px solid #ccc;
     padding: 5px;
     margin-bottom: 10px;
     border-radius: 10px;
     background-color: #f9f9f9;
     display: flex;
     flex-direction: column;
     Width: 150px;
     font-size: 12px;
     line-height: 14px;
 }

 .product-card h3 {
     margin-top: 0;
     color: #333;
 }

 .product-card p {
     margin: 5px 0;
 }

 .point-card {
     border: 1px solid #ccc;
     padding: 5px;
     margin-bottom: 10px;
     border-radius: 10px;
     background-color: #f9f9f9;
     display: flex;
     flex-direction: column;
     Width: 350px;
     font-size: 12px;
     line-height: 14px;
 }

 .point-card h3 {
     margin-top: 0;
     color: #333;
 }

 .point-card p {
     margin: 5px 0;
 }

 .controls {
     margin-top: 10px;
 }

 .edit-btn,
 .save-btn,
 .cancel-btn {
     background-color: #007bff;
     color: white;
     border: none;
     padding: 8px 12px;
     border-radius: 4px;
     cursor: pointer;
 }

 .edit-btn:hover,
 .save-btn:hover {
     background-color: #0056b3;
 }

 .cancel-btn {
     background-color: #6c757d;
 }

 .cancel-btn:hover {
     background-color: #5a6268;
 }

 input[type="text"],
 select {
     padding: 5px;
     border: 1px solid #ddd;
     border-radius: 3px;
     margin-right: 5px;
 }

 .product-details,
 .edit-fields {
     display: inline-block;
     gap: 1px;
 }

 .product-details p {
     line-height: 12px;
 }

 .rv-details {
     display: flex;
     flex-direction: column;
     gap: 1px;
     background-color: #dcdcdc;
     padding: 5px;
 }

 .accessible0 {
     border: 2px solid red;
 }

 .accessible1 {
     border: 1px solid green;
 }

 .first {
     order: -1;
     /* Place cet élément avant tous les autres */
 }

 .selected {
     border: 1px solid green;
 }

 /* BARRE SUP */

 #clusters {
     display: flex;
     flex-direction: column;
 }

 #cluster {
     display: flex;
     flex-direction: row;
 }

 #introcarte {
     display: flex;
     flex-direction: row;
 }

 #leaflet {
     height: 300px;
     width: calc(100% - 870px);
 }

 #divleaflet {
     background-color: white;
     height: 350px;
     width: 100%;
 }

 #leafletmap {
     height: 300px;
     width: 100%;
 }

 #header-app {
     height: 45px;
     line-height: 5px;
     color: #fff;
     margin: 0px;
     width: 800px;
     display: flex;
     flex-direction: row;
     justify-content: left;
 }

 .p-progressbar {
     with: 450px !important;
 }
ProgressBar {display: inline-block;}
 /* CRENEAUX */

 .agent {
     width: 300px !important;
     margin-left: 10px;
     padding-top: 20px;
     position: relative;
 }

 .product-card-complet {
     background-color: #bfbebe;
     background: repeating-linear-gradient( 45deg, #ffffff, #b9b9b9 1px, #b9b9b9 1px, #fff 20px);
 }

 .numberCircle {
     position: relative;
     display: flex;
     width: 6ch;
     /* Set this to slightly wider than the longest string */
     align-items: center;
     justify-content: center;
     aspect-ratio: 1 / 1;
     border-radius: 50%;
     border: 2px solid #666;
     margin-right: 10px;
     background-color: #89e8fc;
 }

 .numberCircle2 {
     position: absolute;
     top: 22px;
     left: 20px;
     display: flex;
     width: 3ch;
     /* Set this to slightly wider than the longest string */
     align-items: center;
     justify-content: center;
     aspect-ratio: 1 / 1;
     border-radius: 50%;
     border: 1px solid #666;
     margin-right: 10px;
     background-color: #fff;
 }
.green {background-color: #c2fcc7;}
 .creneau-ident {
     display: flex;
     flex-direction: column;
 }

 #pointSearch {
     display: flex;
     flex-direction: row;
     align-items: bottom;
 }

 .point_search_point-ts-control {
     width: 300px;
 }

 .col {
     display: inline-block;
 }

 .agent-nom {
     color: #fff;
     position: absolute;
     top: 0px;
     left: 0px;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 0px 10px;
     z-index: 20;
 }

 .item-agent-date {
     width: 120px;
 }

 .agent>.item-agent:nth-child(2) {
     margin-top: 30px;
 }

 .active,
 .selected {
     box-shadow: inset 1em 1em gold;
 }

 label {
     width: 70px;
 }

 a.info span {
     display: none;
     color: #fff;
     background: rgba(51, 51, 51, 0.9);
     padding: 20px;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     width: 300px;
     position: absolute;
     z-index: 10;
 }

 a.info {
     display: inline-block;
 }

 a.info:hover span {
     display: block;
 }

 .el-drag {
     background-color: #fff;
     z-index: 10;
 }

 .datecreneau {
     color: blue;
     font-size: 13px;
 }

 #masquage {
     margin-right: 170px;
 }
.creneau-distance {
     position: absolute;
     bottom: -7px;
     right: -17px;
     display: flex;
     width: 6ch;
     /* Set this to slightly wider than the longest string */
     align-items: center;
     justify-content: center;
     border: 1px solid #666;
     margin-right: 10px;
     background-color: #fff;
    color:green; font-weight: bold;font-size: 14px; 
}
#message {position: fixed; top: 50px;right: 0;min-width: 300px;z-index:10;}

.p-datatable-column-filter-button {
 display:none;
}

.p-datatable-tbody > tr > td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
}
#infosTabs {display:flex;flex-direction: row !important;position: relative;}
.infosTab {position: relative;min-heigth: 100px;min-width: 250px;display:flex;flex-direction: column !important;border:1px solid black;  border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     padding: 5px;
     margin-right: 15px;
 }
.top-right {position: absolute; top:10px; right: 10px;}
.flex {display: flex;}
.flex-col {flex-direction: column !important;}
.justify-between {justify-content: space-between;}

#tabmap2 {
    position: relative;
     width: 100% !important;
     max-width: 100% !important;
     display: flex;
     flex-direction: column;
}
#points {
     font-size: 12px;
     width: 100% !important;
     display: flex;
     flex-direction: column;
 }


#map {width: 100%;
    height:100%;
}
#agents {
     width: 100%;
     overflow: scroll;
     display: flex;
     flex-direction: row;
     height: 250px;
     position: relative;
 }
#leafletmap {
     height: 250px;
     width: 100%;
     overflow: hidden;
 }

#menu-bas {
    width: 100% !important;
    position: relative;
    overflow: hidden;
}
.p-tabs {display: block;}
.toogleMenu2 {position: absolute; top: 20px; right: 10px;height: 40px; width: 40px;}
.number-icon
{
    background-image: url("images/number-marker-icon.png");
    text-align:center;
    color:White;    
}
.leaflet-div-icon {
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px;
  text-align: center;
  height:26px !important;
  width:32px !important;
}