@import 'https://fonts.googleapis.com/css?family=Roboto:400,500,700';

html {
 height: 100%; 
}

body
{
		    font-family: Roboto, Helvetica, Arial, Sans-Serif;
}

body.incident {
  height: 100%;
}

.layout-content
{
  padding: 20px;
}

body.incident .layout-content
{
    position: relative;
}

.container
{
    background: #f6f6f6;
    padding: 30px !important;
    width: auto;
    border: 1px solid rgba(0,0,0,0.1);
}

body.incident .layout-content.status-incident > .container {
  	margin-top: 0;
  margin-bottom: 0;
}

.layout-content.status.status-index .page-status
{
    padding: 0 30px !important;
    border-radius: 0;
    line-height: 4em !important;
    margin: -30px -30px 30px -30px !important;
    box-shadow: 0 none !important;
}

.layout-content.status.status-index .page-status .status,
.layout-content.status.status-index .page-status .last-updated-stamp
{
  line-height: inherit;
  top: auto;
  margin: 0 !important;
}

.font-small, small
{
    text-transform: uppercase;
    font-size: 0.79rem;
}

.font-large
{
    font-size: inherit;
    margin-bottom: 1em !important;
}

.font-largest
{
  border-bottom: 2px solid rgba(0,0,0,0.1);
  display: block;
  font-size: inherit;
  line-height: inherit;
  position: relative;
  text-transform: uppercase;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.font-largest:before {
  background: #5D5BED;
  bottom: -2px;
  content: ' ';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 40px;
}

.layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance .incident-title a
{
  max-width: 70%;
}

.layout-content.status .masthead-container.basic {
  width: auto !important;
  max-width: inherit !important;
  background: #5D5BED;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
}

.layout-content.status .masthead-container.basic .masthead {
  margin: 0 auto !important;
  padding: 0px !important;
  max-width: 850px;
  height: 60px;
}


.layout-content.status .masthead-container.basic .masthead .logo-container {
  height: 100%;
  padding: 0;
  
}

.layout-content.status .masthead-container.basic .masthead .logo-container a {
  display: block;
  height: 100%;
}

.layout-content.status .masthead-container.basic .masthead .logo-container a img {
  height: 100%;
  max-width: 100%;
}

.layout-content.status.status-index .custom-metrics-container .timeframes-container {
  
}

.layout-content.status.status-index .components-section {
  margin-bottom: 30px !Important;
  box-shadow: rgba(0,0,0,0.1) 0 1px 3px;
}


  .layout-content.status.status-index .scheduled-maintenances-container {
    margin: 40px 0 !important;
  }
  
  .layout-content.status.status-index .components-section {
    background-color: #fff;
  }
  
  .layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
    background-color: #fff;
  }
  
  .metrics-container rect {
  fill: #fff !important;
  }
  
  .layout-content.status.status-index .text-section {
    margin-bottom: 30px;
  }
  
  .layout-content.status.status-index .page-status {
    box-shadow: rgba(0,0,0,.1) 0 1px 1px;
    margin-bottom: 40px;
  }
  
  .layout-content.status.status-index .components-section {
    margin-bottom: 40px;
  }

.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
  box-shadow: rgba(0,0,0,0.1) 0 1px 3px;
}

.layout-content.status.status-index .components-section .components-container.one-column .component-container:first-child,
.layout-content.status.status-index .components-section .components-container.one-column .component-container:last-child {
  border-radius: 0 !important;
}

.layout-content.status.status-index .custom-metrics-container .metrics-container .metric .metric-meta {
  background: #a5a5a5;
  margin: -1.5rem;
  margin-bottom: 1.5rem !important;
  padding: 0.75rem 1.5rem;
}

.layout-content.status.status-index .custom-metrics-container .metrics-container .metric .metric-meta .metric-name,
.layout-content.status.status-index .custom-metrics-container .metrics-container .metric .metric-meta .metric-average {
 color: #fff 
}

.layout-content.status.status-full-history .months-container .month:first-of-type {
  margin-top: 0; 
}

.page-footer {
  margin: 40px 0 0 0;
}

body .flat-button, 
body .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
   letter-spacing: 1px;
   border-radius: 6px;
   box-shadow:none;
   text-shadow:none;
   text-transform:none;
   background-color:#FDBC00;
}

body .flat-button,
body .flat-button:hover, 
body .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover,
body .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
   color:#000;
}


@media screen and (max-width: 650px) {
  
  
  .layout-content.status .masthead-container.basic .masthead .logo-container
  {
      width:158px;
  }
  
  
  .layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance .incident-title a {
    display: block;
    line-height: normal;
    margin-bottom: 0.5em;
    white-space: normal;
    max-width: inherit;
  }
  
  .layout-content.status.status-index .custom-metrics-container .metrics-container .metric .metric-meta {
    margin: -1rem;
    margin-bottom: 1rem !important;
    padding: 0.75rem 1rem;
  }
  
}


@media screen and (max-width: 450px) {

  .layout-content {
    padding: 0
  }
  
  body.incident .layout-content {
    padding: 10px;
  }
  
  .layout-content.status .masthead-container.basic {
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 0;
  }

  
.layout-content.status .masthead-container.basic .masthead .logo-container {
    float:none;
    display: inline-block;
    margin: 0;
  }
  
.layout-content.status .masthead-container.basic .masthead .updates-dropdown-container {
    		float:none;
    display: inline-block;
    margin-top: 1em;
  }
  
  .container {
      padding: 20px !important;
  }
  
  .layout-content.status.status-index .page-status {
      line-height: 2em !important;
      padding: 10px 20px !important;
      margin: -20px -20px 20px -20px !important;
  }
  
}