/*
 *  Stylesheet file for Supervision Web Page - Condor Project
 */
.container-fluid{
    padding-left: 10px;
    padding-right: 10px;
}

/* Add a padding at the bottom of the page */
.grid-map {
    padding-bottom: 10px;
    margin-right: 0;
    margin-left: 0;
}

/* Button with chevron (that hide table) */
.grid-map .div-chevron button {
    border-radius: 5px;
    width: 98%; 
    height: 660px;
    outline: 0; 
    border: 1px solid rgb(212,212,212);
    background-color: rgba(234,234,234,0.8);
}
.grid-map .div-chevron button:hover {
    background-color: rgba(234,234,234,1);
}
.grid-map .div-chevron {
    padding-right: 0px;
    padding-left: 0px;
    width: 2%;
}
#spanChevron {
    margin-left: 0px;
}

/* Table */
.grid-map .gridStyle {
    width: 46%; 
    height: 660px;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 3px;
    margin-left: 0px;
    border: 1px solid rgb(212,212,212);
    border-radius: 5px;
}
.grid-map .gridStyle .ngHeaderCell {
    border-bottom: 1px solid rgb(212,212,212);
    background-color: #eaeaea;
}
.gridStyle .cellHover:hover {
    background-color: rgba(201,221,225,0.4);
}
.grid-map .gridStyle.ngCellText {
    border-bottom: 1px solid rgb(212,212,212);
}
/* Map */
.grid-map .div-map #leafletmap{
    width: 103%; 
    height: 660px; 
    border-radius: 5px;
    border: 1px solid rgb(212,212,212);
}
.grid-map .div-map {
    padding-left: 3px;
    padding-right: 0;
    margin-right: 0;
}
.grid-map .col-xs-6 {
    margin-right: 0;
}

/* Legend on the map */
.grid-map #leafletmap .legend {
    line-height: 18px;
    color: #555;
    background-color: #fff;
    border-radius: 5px;
    opacity: 0.8;
    padding-left: 5px;
    padding-right: 5px;
    color: #000;
}
.grid-map #leafletmap .legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

/* Search bar */
.panel {
    margin-bottom: 5px;
}
.searchbar .panel-body {
    background-color: #F9F9F9;
    padding-bottom: 5px;
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 3px;
    overflow: hidden;
}
.searchbar .col-xs-1 {
    padding-left: 5px;
    padding-right: 5px;
    outline: 0;
}
.searchbar .filter {
    width: 12%;   
}
.searchbar .filter-status {
    width: 12%;
}
.searchbar option {
    text-align: right;
}

/* Search bar popup */
.searchbar .popup{
    cursor: help;
}

/* Buttons Search & By Default of the Search Bar */
.searchbar .btn-search-and-cancel {
    width: 16%;
    padding-left: 5px;
    padding-right: 5px;
}
.searchbar .btn-search-and-cancel .btn {
    margin-top: 7px;
    font-size: 16px;
    color: white;
}
.searchbar .btn-search-and-cancel .btn-search{
    width: 72%;
    background-color: rgba(29,133,179,0.6);
    border-color: rgba(29,133,179,0.2);
}
.searchbar .btn-search-and-cancel .btn-search:hover{
    background-color: rgba(29,133,179,0.9);
    border-color: rgba(29,133,179,0.7);
}
.searchbar .btn-search-and-cancel .btn-cancel {
    width: 25%;
    background-color: rgba(221,25,54,0.6);
    border-color: rgba(221,25,54,0.2);
}
.searchbar .btn-search-and-cancel .btn-cancel:hover{
    background-color: rgba(221,25,54,0.9);
    border-color: rgba(221,25,54,0.7);
}

/* Style for grid cells & header cells */
.grid-map .gridStyle .status-cells {
    opacity: 0.7;
    text-align: center;
    padding-left: 7%;
    padding-top: 5%;
}
.grid-map .gridStyle .ngCellText {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  white-space: normal;
}
.grid-map .gridStyle .ngHeaderSortColumn {
    text-align: center;
}

/* Popup custom style */
.grid-map #leafletmap .leaflet-popup-content-wrapper {
    opacity: 0.8;
    border-radius: 8px;
}
.grid-map #leafletmap .leaflet-popup-content-wrapper .leaflet-popup-content {
    margin: 5px 7px;
}
.grid-map #leafletmap .leaflet-popup-tip-container {
    opacity: 0.8;
}

/* Add opacity to the leaflet control elements */
.leaflet-control-pan > div {
    opacity: 0.8;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    opacity: 0.8;
}
/* Alert Area */
#alertSiriError {
    margin-bottom: 5px;
}
#tout, #rien
{
	cursor: pointer;
}

/* Popup d'info */
#infoBus {
    box-shadow: 10px 5px 5px #d9d7ce;
    border: 1px solid #d9d7ce;
    min-width: 15%;
    width: max-content;
    height: 60%;
    position: fixed;
    margin-right: 1%;
    right: 0;
    padding-top: 20px;
    padding-left: 20px;
    background-color: #FFFFFF;
    z-index: 99;
	top: 146px;
}