/* General styles */

.region.region-front-col1 {
  height: 100%;
}
.frontblock-graph.block-bonds-graph {
  height: 90%;
}

.bonds-graph-block {
  margin: 0;
  padding: 5px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.bonds-graph-block .bonds-graph {
  margin: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #f4f4f4;
}

.bonds-graph .total-current,
.bonds-graph .previous-total,
.bonds-graph .estimated-total {
  display: block;
  font-weight: bold;
  width: 100%;
}

.bonds-graph .total-current {
  display: flex;
  justify-content: space-between;
}

.bonds-graph .total .text,
.bonds-graph .previous-total .text,
.bonds-graph .estimated-total .text {
  display: inline-table;
  float: left;
  clear: right;
}

.bonds-graph .cumulative {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bonds-graph .cumulative-issuance {
  font-size: 2rem;
  text-align: right;
  color: #3467a4;
  font-family: "Encode Sans", 'pt_sansregular', Arial, sans-serif;
}

.bonds-graph .total .amount,
.bonds-graph .previous-total .amount,
.bonds-graph .estimated-total .amount {
  display: inline-table;
  float: right;
}

.bonds-graph-block .previous-total {
  font-size: 0.9em;
  float: left;
  margin: 0 50px 10px 0;
}

.bonds-graph .total-current span.subhead {
  font-size: 0.9em;
  font-style: italic;
  font-weight: normal;
}

/* issuance-total-estimate */
.bonds-graph-block .ytd-total {
  float: left;
  width: 100%;
  background-color: #e5e5e5;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* issuance-climatebonds-certified */
.bonds-graph-block .ytd-labelled {
  display: flex;
}

.bonds-graph-block .ytd-labelled .ytd-certified {
  height: 35px;
  display: inline-block;
  background: #418933
}

/* issuance-climatebonds-defined */
.bonds-graph-block .ytd-labelled .ytd-issued {
  height: 35px;
  margin-left: -4px;
  display: inline-block;
  background-color: #8ab930;
}

/* issuance-other-defined */
.bonds-graph-block .ytd-labelled .ytd-other {
  height: 35px;
  margin-left: -4px;
  display: inline-block;
  background-color: #9CD88D;
}

/* bonds graph block: key */
.bonds-graph .key {
  width: 100%;
  clear: both;
}

.bonds-graph .key .row {
  width: auto;
  margin: 0 0 0 0;
}

.bonds-graph .key .row .text {
  width: 65%;
  display: inline-table;
  vertical-align: top;
  font-size: 0.8em;
}

.bonds-graph .key .row .value {
  font-size: 0.8em;
  width: auto;
  display: inline-table;
  float: right;
}

.bonds-graph .key .row .key-ytd-other {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background-color: #9CD88D;
  display: inline-table;
}

.bonds-graph .key .row .key-ytd-issued {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background-color: #8ab930;
  display: inline-table;
}

.bonds-graph .key .row .key-ytd-certified {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background: #418933;
  display: inline-table;
}

.bonds-graph-block .monthly {
  margin-top: 2rem;
}

.bonds-graph-block .monthly .horiz-total {
  background: url("../img/graphbg.png") no-repeat scroll 0 0 #E5E5E5;
  border-radius: 4px;
  float: left;
  height: 20px;
  margin-bottom: 5px;
  margin-left: 5px;
  width: 65%;
}

.bonds-graph-block .monthly .horiz-issued {
  float: left;
  height: 20px;
  background-color: #8ab930;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.bonds-graph-block .monthly .month {
  float: left;
  clear: left;
  font-size: 0.8em;
  width: 30px;
}

.bonds-graph-block .monthly .amount {
  float: right;
  font-size: 0.8em;
  margin-left: 5px;
  text-align: right;
}

.bonds-graph-block .current-total {
  font-size: 0.9em;
  float: left;
  margin: 0 0 10px 0;
}

/* Admin overrides */
/*current*/
.form-item-bonds-graph-current-jan,
.form-item-bonds-graph-current-feb,
.form-item-bonds-graph-current-mar,
.form-item-bonds-graph-current-apr,
.form-item-bonds-graph-current-may,
.form-item-bonds-graph-current-jun {
  float: left;
  margin-right: 10px !important;
}

.form-item-bonds-graph-current-jul {
  clear: both;
}

.bonds-graph-block .key .key-ytd-certified {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #3063A6,
    #3063A6 5px,
    #73CF3A 5px,
    #73CF3A 10px
  );
  display: inline-table;
}

.bonds-graph-block .horiz-total {
  background: url("../img/graphbg.png") no-repeat scroll 0 0 #E5E5E5;
  border-radius: 4px;
  float: left;
  height: 20px;
  margin-bottom: 5px;
  margin-left: 5px;
  width: 65%;
}

.bonds-graph-block .horiz-issued {
  float: left;
  height: 20px;
  background-color: #8ab930;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.bonds-graph-block .month {
  float: left;
  clear: left;
  font-size: 0.8em;
  width: 30px;
}

.bonds-graph-block .current-total {
  font-size: 0.9em;
  float: left;
  margin: 0 0 10px 0;
}

.bonds-graph-block .previous-total span,
.bonds-graph-block .current-total span {
  font-weight: bold;
}

/* Admin overrides */
/*current*/
.form-item-bonds-graph-current-jan,
.form-item-bonds-graph-current-feb,
.form-item-bonds-graph-current-mar,
.form-item-bonds-graph-current-apr,
.form-item-bonds-graph-current-may,
.form-item-bonds-graph-current-jun {
  float: left;
  margin-right: 10px !important;
}

.form-item-bonds-graph-current-jul {
  clear: both;
}

.form-item-bonds-graph-current-jul,
.form-item-bonds-graph-current-aug,
.form-item-bonds-graph-current-sep,
.form-item-bonds-graph-current-oct,
.form-item-bonds-graph-current-nov,
.form-item-bonds-graph-current-dec {
  float: left;
  margin-right: 10px !important;
}

/*other*/
.form-item-bonds-graph-other-jan,
.form-item-bonds-graph-other-feb,
.form-item-bonds-graph-other-mar,
.form-item-bonds-graph-other-apr,
.form-item-bonds-graph-other-may,
.form-item-bonds-graph-other-jun {
  float: left;
  margin-right: 10px !important;
}

.form-item-bonds-graph-other-jul {
  clear: both;
}

.form-item-bonds-graph-other-jul,
.form-item-bonds-graph-other-aug,
.form-item-bonds-graph-other-sep,
.form-item-bonds-graph-other-oct,
.form-item-bonds-graph-other-nov,
.form-item-bonds-graph-other-dec {
  float: left;
  margin-right: 10px !important;
}

/*certified*/
.form-item-bonds-graph-certified-jan,
.form-item-bonds-graph-certified-feb,
.form-item-bonds-graph-certified-mar,
.form-item-bonds-graph-certified-apr,
.form-item-bonds-graph-certified-may,
.form-item-bonds-graph-certified-jun {
  float: left;
  margin-right: 10px !important;
}

.form-item-bonds-graph-certified-jul {
  clear: both;
}

.form-item-bonds-graph-certified-jul,
.form-item-bonds-graph-certified-aug,
.form-item-bonds-graph-certified-sep,
.form-item-bonds-graph-certified-oct,
.form-item-bonds-graph-certified-nov,
.form-item-bonds-graph-certified-dec {
  float: left;
  margin-right: 10px !important;
}