#indicators {
	width:           100%;
	display:         flex;
	align-items:     stretch;
	justify-content: flex-start;
	flex-wrap:       wrap;
}

#indicators .card {
	flex:           0 0 calc(33% -10px);
	margin:         5px 0;
	vertical-align: top;
}

#indicators .card:not(:last-of-type) { margin-right: 10px; }

a.definition { color: #2491ff; }

.popup {
	display:            block;
	position:           absolute;
	margin-top:         5px;
	z-index:            10;
	width:              250px;
	padding:            0;
	border:             1px solid #2491ff;
	background-color:   #f1f3f6;
	border-radius:      5px;
  -webkit-box-shadow: 0px 4px 15px rgba(36,145,255,0.4);
     -moz-box-shadow: 0px 4px 15px rgba(36,145,255,0.4);
          box-shadow: 0px 4px 15px rgba(36,145,255,0.4);
}

.popup:before {
	content:       "";
	position:      absolute;
	width:         0px;
	height:        0px;
	border:        15px solid transparent;
	left:          10px;
	top:           -25px;
	border-bottom: 10px solid #2491ff;
}

.popup .popup-title {
	border-radius:    5px 5px 0 0;
	margin:           0 !important;
	padding:          0.5em 1em !important;
	font-size:        20px;
	color:            #3d4551;
	background-color: #dcdee0;
	border-bottom:    1px #3d4551 solid;
}

.popup .popup-body {
	border-radius:    0 0 5px 5px;
	margin:           0 !important;
	padding:          0.5em 1em !important;
	font-size:        16px;
	background-color: #3d4551;
	color:            #dcdee0;
}

.zingchart-ts { width: 100%; height: 400px; margin: 1em auto; }
.warm { color: #e41d3d; }
.cold { color: #2491ff; }

/* SST *
 *******/
#nino-regions-select { display: flex; justify-content: space-between; }

.nino-regions-selection { position: absolute; opacity: 0; }

label.nino-regions-selection-label {
 cursor:        pointer;
 font-weight:   normal;
 display:       inline-block;
 text-align:    center;
 font-size:     14px;
 padding:       2px !important;
 border-radius: 0.25rem;
 height:        100%;
 border:        solid 1px transparent;
 width:         70px;
 border-color:  #c6cace;
 color:         #8d9297;
 margin:        auto 1px;
}

label.nino-regions-selection-label:hover {
 border-color:     #8d9297 !important;
 background-color: #ddd;
}

.nino-regions-selection:checked ~ label.nino-regions-selection-label {
 cursor:           default;
 background-color: #8d9297 !important;
 border-color:     #8d9297;
 color:            #ffffff;
}

.nino-regions-selection:checked ~ label.nino-regions-selection-label:hover {
 border-color:     #8d9297 !important;
 background-color: #8d9297 !important;
}
/*
#sst-time-series > * { flex: 1; }
#sst-time-series img { min-width: 300px; }
*/
/*******
 * SST */

/* SOI *
 *******/
.eqn { display: flex; justify-content: flex-start; align-items: center; }
.eqn > * { padding: 5px; text-align: center; white-space: nowrap; }
.numerator { border-bottom: solid 1px; }
.denominator { border-top: solid 1px; }
/*******
 * SOI */