/*
    ____                      _ _
   | __ ) _ __ __ _ _ __   __| (_)_ __   __ _
   |  _ \| '__/ _` | '_ \ / _` | | '_ \ / _` |
   | |_) | | | (_| | | | | (_| | | | | | (_| |
   |____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |
                                        |___/
*/
/*

   __     ___    ____  ____
   \ \   / / \  |  _ \/ ___|
    \ \ / / _ \ | |_) \___ \
     \ V / ___ \|  _ < ___) |
      \_/_/   \_\_| \_\____/

*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i|Montserrat:300,300i,400,400i,500,500i|");
:root {
  --text-blue:  #225C88;
  --text-light: #7D8296;
  --text-white: #FFFFFF;
  --text-black: #000000; }

:root {
  --font-family: ProximaNovaA-Regular;
  --font-weight: normal;
  --font-medium-font-weight: normal;
  --font-regular-font-weight: normal;
  --font-semibold-font-weight: normal;
  --font-italic-font-weight: normal;
  --font-thin-font-weight: normal;
  --font-italic-font-style: normal; }

/*
NOTE: when you reference one of these vars, comment underneath the element you've used it for. Mandem organised
*/
/*
USED FOR:
plan inputs
dashboard-panel
dashboard panel buttons
modal-body.report-options-modal > span.glyphicon
*/
/*
USED FOR:
dashboard panel header
dashboard panel buttons
typeahead
editable table > page header
*/
/*
USED FOR:
.modal-body.report-options-modal > .Select-menu-outer
*/
/*
USED FOR:
menu
dashboard panel
charts > drillup
.dashboard-filter-sentence-container > #fixed-version
superbutton overlay content
*/
/*
context menu
USED FOR:
header
pinned nav
dashboard panel
simple sidebar
spark chart

*/
/*
USED FOR:
modals
tooltip box
c tooltip

*/
/*
USED FOR:
error messages

*/
.alert-multi-view {
  margin: 25px; }
  .alert-multi-view .alert-multi-view-header {
    margin: 25px; }

.alert-multi-view-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start; }
  .alert-multi-view-body .alert-create-new {
    width: 300px;
    height: 420px;
    margin: 20px;
    border: 4px dashed #7D8296;
    font-size: var(--text-size-jumbo);
    border-radius: 5px;
    color: var(--text-light); }
    .alert-multi-view-body .alert-create-new div {
      margin: 10px; }
    .alert-multi-view-body .alert-create-new:hover {
      background: #eeeff1;
      color: var(--text-main); }
    .alert-multi-view-body .alert-create-new:active {
      background: var(--text-main);
      color: white;
      border: 2px dashed #F4F5F3; }

.single-alert-view {
  color: white;
  width: 300px;
  margin: 20px; }
  .single-alert-view .single-alert-front, .single-alert-view .single-alert-back {
    border-radius: 5px;
    background: #474c60;
    height: 420px;
    display: flex;
    flex-direction: column; }
    .single-alert-view .single-alert-front.lower-triggered, .single-alert-view .single-alert-back.lower-triggered {
      background: #ED6447; }
      .single-alert-view .single-alert-front.lower-triggered button:hover, .single-alert-view .single-alert-back.lower-triggered button:hover {
        background-color: #d33615; }
      .single-alert-view .single-alert-front.lower-triggered button:active, .single-alert-view .single-alert-back.lower-triggered button:active {
        background-color: #bc3012; }
    .single-alert-view .single-alert-front.upper-triggered, .single-alert-view .single-alert-back.upper-triggered {
      background: #42B04B; }
      .single-alert-view .single-alert-front.upper-triggered button:hover, .single-alert-view .single-alert-back.upper-triggered button:hover {
        background-color: #2d7833; }
      .single-alert-view .single-alert-front.upper-triggered button:active, .single-alert-view .single-alert-back.upper-triggered button:active {
        background-color: #26662b; }
  .single-alert-view .single-alert-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 25px 20px; }
    .single-alert-view .single-alert-header span.metric-icon {
      font-size: 4rem;
      line-height: 80px; }
    .single-alert-view .single-alert-header i.metric-icon {
      font-size: 4rem; }
    .single-alert-view .single-alert-header .single-alert-description {
      flex: 1;
      text-align: left; }
  .single-alert-view .single-alert-body {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-top: auto;
    margin-bottom: 20px; }
    .single-alert-view .single-alert-body .metric-value {
      align-self: center; }
    .single-alert-view .single-alert-body .alert-last-updated {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: var(--text-size-small); }
    .single-alert-view .single-alert-body .alert-threshold {
      align-self: center;
      font-size: 2rem;
      margin-bottom: 20px; }
    .single-alert-view .single-alert-body .alert-threshold-values.only-one {
      margin-bottom: 30px; }
    .single-alert-view .single-alert-body .alert-threshold-values {
      margin: 0 10px; }
    .single-alert-view .single-alert-body .alert-frequency {
      align-self: center;
      font-size: 2rem; }
      .single-alert-view .single-alert-body .alert-frequency i {
        margin-right: 5px; }
  .single-alert-view button {
    margin-bottom: 4px;
    padding: 2px 6px 2px 8px;
    color: white;
    font-size: var(--text-size-medium);
    line-height: var(--button-line-height-medium);
    background-color: inherit;
    border: none;
    border-radius: 7px; }
    .single-alert-view button span {
      display: none; }
    .single-alert-view button:hover {
      background-color: #262934; }
    .single-alert-view button:active {
      background-color: #111217; }
  .single-alert-view .single-alert-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    margin: auto 5px 5px 0; }
    .single-alert-view .single-alert-footer .info-button {
      margin-right: auto;
      margin-left: 20px; }
  .single-alert-view .single-alert-back {
    padding: 15px 15px 3px 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* A modal that appears on top of the back to give feedback when testing */ }
    .single-alert-view .single-alert-back ::-webkit-scrollbar {
      width: 0; }
    .single-alert-view .single-alert-back .alert-metadata {
      overflow: scroll; }
    .single-alert-view .single-alert-back .alert-metric-name {
      align-self: center;
      border-bottom: 1px solid white;
      margin-bottom: 10px;
      padding-bottom: 10px; }
    .single-alert-view .single-alert-back .alert-spec-section {
      text-align: left;
      margin-bottom: 10px;
      border-bottom: 1px dashed white;
      padding-bottom: 3px; }
      .single-alert-view .single-alert-back .alert-spec-section .spec-label {
        font-size: 13px;
        padding-right: 10px;
        margin-bottom: 5px; }
      .single-alert-view .single-alert-back .alert-spec-section .alert-spec-row {
        padding-bottom: 3px; }
      .single-alert-view .single-alert-back .alert-spec-section .thresholds {
        display: flex;
        flex-direction: row;
        padding-bottom: 5px; }
        .single-alert-view .single-alert-back .alert-spec-section .thresholds .threshold {
          flex: 1;
          text-align: center; }
    .single-alert-view .single-alert-back .alert-spec-section.when-values {
      display: flex;
      flex-direction: row; }
      .single-alert-view .single-alert-back .alert-spec-section.when-values .when-value {
        flex: 1; }
    .single-alert-view .single-alert-back .single-alert-back-footer {
      display: flex;
      flex-direction: row;
      margin-top: auto; }
      .single-alert-view .single-alert-back .single-alert-back-footer button i {
        margin-right: 4px; }
      .single-alert-view .single-alert-back .single-alert-back-footer .flip-back-button {
        align-self: flex-start;
        margin-top: auto; }
    .single-alert-view .single-alert-back .messaging-modal {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.5);
      color: black;
      top: 60%;
      padding: 10px;
      margin-left: auto;
      border-radius: 4px;
      align-self: flex-end;
      width: 70%; }