.platform-page {}

.platform-page #platform-view-content h2 {
    padding-top: 25px;
}

.platform-page #platform-view-content .panel {
     padding: 0 25px 0 25px;
}

div#wrapper.platform-page {
    width: 100%;
}


.platform-page #platform-view-content .panel .panel-heading{
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: 0;
}

.platform-page #platform-view-content .panel-heading h4 i {
    color: black;
}

.platform-page #platform-view-content .panel-heading h4 {
    padding: 10px;
    background-color: #5c9ccc;
    color: white;
    text-align: left;

    background: #5c9ccc; /* Old browsers */
    background: -moz-linear-gradient(left,  #5c9ccc 20%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #5c9ccc 20%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #5c9ccc 20%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c9ccc', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}


.platform-page #platform-view-content .panel-heading h4:hover {
    transition: background 5s;

    background: #dfeffc; /* Old browsers */
    background: -moz-linear-gradient(left,  #1e5799 20%, #dfeffc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #1e5799 20%,#dfeffc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #1e5799 20%,#dfeffc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#dfeffc',GradientType=1 ); /* IE6-9 */
}


.platform-page #platform-view-content .panel-heading h4 small {
    color: black;
}

.platform-page #platform-view-content table {
    width: 90%;
    margin: 20px 20px 0 20px;
}

.platform-page #platform-view-content table th:first-child {
    width: 30%;
}

.platform-page #platform-view-content table tr {

}

.mapboxgl-ctrl-compass {
  display: none !important;
}

#map canvas {
    left: 0px;
    width: 300%;
}

#map {
}

.mooringIcon{
    border-radius: 48px;
    background: orange;
    border: 2px solid #000;
    opacity: 1;
}

.otherMooringIcon{
    border-radius: 48px;
    background: teal;
    border: 2px solid #000;
    opacity: 0.85;
}

.otherSitesIcon{
    border-radius: 48px;
    background: green;
    border: 2px solid #000;
    opacity: 0.85;
    z-index: -100000;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
/*dark gray	Not Operational	96	96	96	606060
gray	Unavailable	160	160	160	A0A0A0
light gray	Pending	224	224	224	E0E0E0
blue	Not Evaluated	0	76	153	004C00
orange	Suspect	204	102	0	CC6600
red	Fail	204	0	0	CC0000
green	Pass	0	204	0	00CC00
dark green	Good	0	102	0	006600*/

.fa.fa-circle.failed {
    color: #CC0000;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.degraded {
    color: #CC6600;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.removedFromService {
    color: #606060;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.notTracked {
    color: blue;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.fetchingStatusFailed {
    color: #A0A0A0;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.noStatusReturned {
    color: #A0A0A0;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.operational {
    color: #00CC00;
    font-size: 16px;
    float: left;
}

.fa.fa-circle.unknownStatusResult {
    color: #A0A0A0;
    font-size: 16px;
    float: left;
}