@import url('https://rsms.me/inter/inter.css');

body, .layout-content, .component-name, .incident-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.updates-dropdown-container .show-updates-dropdown:after{
 content: 'Subscribe for updates'!important; 
}

.flat-button,.updates-dropdown-container .show-updates-dropdown{
 text-transform: none!important; 
  
}


label{
font-size: 14px;
}

.directions{
 margin-bottom: 4px; 
}
.incident-name, h1{
font-weight: 600!important;
  font-size: 2rem!important;
  line-height: 2.25rem!important;
  letter-spacing: -0.04em!important;
}

.incident-title::after {
    content: " →"!important;
}

.font-largest, h4{
font-weight: 600!important;
  font-size: 2rem!important;
  line-height: 2.25rem!important;
  letter-spacing: -0.04em!important;
}

.font-large, .subheader, .month-title {
	  font-weight: 600!important;
  font-size: 1.25rem!important;
  line-height: 1.5rem!important;
  letter-spacing: -0.02em!important;
}

h2.status.font-large {

  font-size: 1rem !important; 
  line-height: 1.5rem!important;

}

.layout-content.status.status-index .page-status .status{
 top:0px!important; 
}


.page-title::before {
    content: "";
    display: block;
    width: 128px;
    height: 32px;
    background-image: url("//dka575ofm4ao0.cloudfront.net/pages-transactional_logos/retina/141632/Portbase_logo_Blue_RGB_300px-d76186c3-b809-4585-93e6-630f8e3a7fbf.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-bottom: 20px;
}

.component-status{
font-weight: 500;
}

.fa{
  user-select: none;
}

body{
 padding: 0px 16px; 
}

.unresolved-incident .incident-title {
  
  border-radius: 8px 8px 0 0;
}

.unresolved-incident {
  
  &.impact-minor .incident-title {
    background-color: #FFF6D1!important;
    border: 1px solid #FFE062!important; 
    
    .actual-title {
      color: #5B4701!important; 
    }
  }
  
  &.impact-major .incident-title {
    background-color: #FFF6D1!important; 
    border: 1px solid #FFE062!important;
    
    .actual-title {
      color: #5B4701!important; 
    }
  }
  
  &.impact-critical .incident-title {
    background-color: #FDE0E0!important; 
    border: 1px solid #F89595!important; 
    
    .actual-title {
      color: #930000!important; 
    }
  }
}

.page-status.status-none{
  background-color:#DFFED5!important;
  border: 1px solid #B4EF9F!important;  
}

.page-status.status-none h2.status {
  color: #226C06!important; 
  text-shadow: none!important;
}

.update{
 margin-bottom: 32px!important; 
}

.updates{
  border: none!important;
}



.unresolved-incidents{
  background-color: #f7fafc !important;
  border-radius: 0 0 8px 8px;
}

/* ===== LAYOUT & CONTAINERS ===== */
.masthead-container.basic {
  max-width: 100% !important;
  width: 100% !important;
}

.container {
  padding: 0 !important;
  max-width: 600px;
  width:100%;
  
}

body.status.history .container {
  background: #f7fafc !important;
  padding: 24px !important;
  border-radius: 8px !important;
}

.layout-content.status.status-index .components-section, .unresolved-incidents{
 margin-bottom: 48px!important; 
}


.component-container.border-color:not(:first-child) {
    padding-top: 8px!important;
}


.component-container.border-color:not(:last-child) {
    padding-bottom: 8px!important;
}

/* ===== COMPONENT SECTIONS ===== */
.components-section, 
.incidents-list {
  background: #f7fafc !important;
  border-radius: 8px !important;
}

.component-container.border-color {
  border-color: transparent !important;
}

.layout-content.status.status-full-history .grouped-items-selector{
  left: 24px;
}


.component-container,
.group-parent-indicator {
  user-select: none!important;
}

/* ===== STATUS & PAGE ELEMENTS ===== */
.page-status {
  border-radius: 4px !important;
  margin-bottom: 24px;
}

.component-section {
  margin-bottom: 24px;
}

.components-section {
  margin-bottom: 24px;
}

/* ===== MASTHEAD STYLING ===== */
.layout-content.status .masthead-container.basic .masthead {
  padding: 16px 24px 0 24px;
  margin-bottom: 24px;
}

.layout-content.status .masthead-container.basic .masthead .logo-container {
  padding-top: 12px;
  max-width: 160px;
}

.layout-content.status.status-index .page-status {
  margin-bottom: 24px;
}

/* ===== TYPOGRAPHY & TEXT COLORS ===== */
h2.status.font-large {
  margin-bottom: 0;
}

h1.incident-name{
color: #002357 !important;
}



.layout-content .incident-title,
.incidents-list .incident-title.impact-minor a,
.incidents-list .incident-title.impact-major a {
  color: #002357 !important;
}

.layout-content.status.status-incident .page-title {
  text-align: left;
}

/* ===== BUTTONS ===== */
.show-updates-dropdown, .flat-button{

  box-shadow: none !important;
  color: #ffffff !important;
  background-color: rgb(0, 89, 221);
  border-radius: 8px !important;
  text-shadow: none !important;
  height: 48px!important;
  align-content: center;
}



.show-updates-dropdown:hover, 
.flat-button:hover {
  box-shadow: none !important;
  background-color: #0044aa !important;
  text-shadow: none !important;
  border-radius: 8px !important;
  text-decoration: none;
}

/* ===== LINKS ===== */
a {
  text-decoration: none;
}


a.previous-page,
a.next-page {
  text-decoration: none;
}

a.color-secondary{
  text-decoration: underline!important;
}

a.previous-page,a.next-page{
  text-decoration: none!important;
}


/* ===== BACKGROUND SECTIONS ===== */
.unresolved-incidents,
.components-section,
.incidents-list,
.page-footer,
.history-container,
.history-nav,
.history-backpage,
.status-full-history .container,
.status-incident .container,
.scheduled-maintenances-container {
  background: #ffffff;
}

.history-backpage, 
.page-footer {
  background: transparent !important;
}

/* ===== SPACING & PADDING ===== */
.incidents-list,
.page-footer,
.container,
.scheduled-maintenances-container {
  padding: 24px;
}

.layout-content.status .incidents-list {
  margin-top: 24px;
}

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

/* ===== MOBILE RESPONSIVE ===== */
@media screen and (max-width: 650px) {
  .layout-content.status .masthead-container.basic .masthead {
    padding: 8px 0px 0px;
  }
  
  .layout-content.status.status-index .components-section{
 margin-bottom: 16px; 
}

  
  .layout-content.status .masthead-container.basic .masthead .logo-container {
    float: left;
    max-width: 130px;
    margin-bottom: 0;
  }
  
  .layout-content.status .masthead-container.basic .masthead .updates-dropdown-container {
    float: right;
  }
  
  .component-container,.component-container.is-group{
   padding-left: 16px!important; 
   padding-right: 16px!important; 
  }
  
  
}