/* style variables - starts */

--border-radius-top: 10px 10px 0 0;
--border-radius-bottom: 0 0 10px 10px;

--default-border-radius: 10px;

--content-spacing: 30px;

/* style variables - ends */

@font-face {
    font-family: 'Sofia Pro';
    src: url('https://www.asite.com/hubfs/resources/fonts/sofia-pro-regular-az.woff2') format('woff2'),
        url('https://www.asite.com/hubfs/resources/fonts/sofia-pro-regular-az.woff') format('woff'),
        url('https://www.asite.com/hubfs/resources/fonts/sofia-pro-regular-az.otf') format('otf'),
        url('https://www.asite.com/hubfs/resources/fonts/sofia-pro-regular-az.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html, body {
    font-family: 'Sofia Pro', Helvetica, Arial, Sans-Serif;
}

.layout-content.status.status-index .page-status {
    border-radius: 20px;
    padding: 27px;
}

.updates-dropdown a {
    text-decoration: underline;
}


/* CSS REDS */ /* CSS REDS */ /* CSS REDS */ /* CSS REDS */ /* CSS REDS */ /* CSS REDS */ /* CSS REDS */
.layout-content.status.status-index .status-day .update-title.impact-critical a,
.layout-content.status.status-index .status-day .update-title.impact-critical a:hover,
.layout-content.status.status-index .page-status.status-critical,
.layout-content.status.status-index .unresolved-incident.impact-critical .incident-title,
.flat-button.background-red {
    background: linear-gradient(180deg, #E43B2C 60%, #FFB0A5 100%);
    border-radius: var(--border-radius-top, 10px 10px 0 0);
}

.layout-content.status-index .components-statuses .component-container.status-red:after,
.layout-content.status-full-history .month .incident-container .impact-critical,
.layout-content.status-incident .incident-name.impact-critical,
.layout-content.status.status-index .incidents-list .incident-title.impact-critical a,
.status-red .icon-indicator,
.incident-history .impact-critical,
.components-container .component-inner-container.status-red .component-status,
.components-container .component-inner-container.status-red .icon-indicator {
    color: #E43B2C;
}

.layout-content.status.status-index .unresolved-incident.impact-critical .updates {
    border-color: #E43B2C;
    border-radius: var(--border-radius-top, 0 0 10px 10px);
}


/* CSS ORANGES */ /* CSS ORANGES */ /* CSS ORANGES */ /* CSS ORANGES */ /* CSS ORANGES */ /* CSS ORANGES */
.layout-content.status.status-index .status-day .update-title.impact-major a,
.layout-content.status.status-index .status-day .update-title.impact-major a:hover,
.layout-content.status.status-index .page-status.status-major,
.layout-content.status.status-index .unresolved-incident.impact-major .incident-title {
    background: linear-gradient(180deg, #DC8608 60%, #FFCD84 100%);
    border-radius: var(--border-radius-top, 10px 10px 0 0);
}

.layout-content.status-index .components-statuses .component-container.status-orange:after,
.layout-content.status-full-history .month .incident-container .impact-major,
.layout-content.status-incident .incident-name.impact-major,
.layout-content.status.status-index .incidents-list .incident-title.impact-major a,
.status-orange .icon-indicator,
.incident-history .impact-major,
.components-container .component-inner-container.status-orange .component-status,
.components-container .component-inner-container.status-orange .icon-indicator {
    color: #DC8608;
}

.layout-content.status.status-index .unresolved-incident.impact-major .updates {
    border-color: #DC8608;
    border-radius: var(--border-radius-top, 0 0 10px 10px);
}


/* CSS YELLOWS */ /* CSS YELLOWS */ /* CSS YELLOWS */ /* CSS YELLOWS */ /* CSS YELLOWS */ /* CSS YELLOWS */
.layout-content.status.status-index .status-day .update-title.impact-minor a,
.layout-content.status.status-index .status-day .update-title.impact-minor a:hover,
.layout-content.status.status-index .page-status.status-minor,
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title,
.layout-content.status.status-index .scheduled-incidents-container .tab {
    background: linear-gradient(180deg, #DDC606 60%, #FFEE5E 100%);
    border-radius: var(--border-radius-top, 10px 10px 0 0);
}

.layout-content.status-index .components-statuses .component-container.status-yellow:after,
.layout-content.status-full-history .month .incident-container .impact-minor,
.layout-content.status-incident .incident-name.impact-minor,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor a,
.status-yellow .icon-indicator,
.incident-history .impact-minor,
.components-container .component-inner-container.status-yellow .component-status,
.components-container .component-inner-container.status-yellow .icon-indicator,
.layout-content.status.manage-subscriptions .confirmation-infobox .fa {
    color: #DDC606;
}

.layout-content.status.status-index .unresolved-incident.impact-minor .updates,
.layout-content.status.status-index .scheduled-incidents-container {
    border-color: #DDC606;
    border-radius: var(--border-radius-top, 0 0 10px 10px);
}


/* CSS BLUES */ /* CSS BLUES */ /* CSS BLUES */ /* CSS BLUES */ /* CSS BLUES */ /* CSS BLUES */
.layout-content.status.status-index .status-day .update-title.impact-maintenance a,
.layout-content.status.status-index .status-day .update-title.impact-maintenance a:hover,
.layout-content.status.status-index .page-status.status-maintenance,
.layout-content.status.status-index .unresolved-incident.impact-maintenance .incident-title,
.layout-content.status.status-index .scheduled-incidents-container .tab {
    background: linear-gradient(180deg, #3D36B4 60%, #9892F2 100%);
    border-radius: var(--border-radius-top, 10px 10px 0 0);
}

.layout-content.status-index .components-statuses .component-container.status-blue:after,
.layout-content.status-full-history .month .incident-container .impact-maintenance,
.layout-content.status-incident .incident-name.impact-maintenance,
.layout-content.status.status-index .incidents-list .incident-title.impact-maintenance a,
.status-blue .icon-indicator,
.incident-history .impact-maintenance,
.components-container .component-inner-container.status-blue .component-status,
.components-container .component-inner-container.status-blue .icon-indicator {
    color: #3498DB;
}

.layout-content.status.status-index .unresolved-incident.impact-maintenance .updates,
.layout-content.status.status-index .scheduled-incidents-container {
    border-color: #3498DB;
    border-radius: var(--border-radius-top, 0 0 10px 10px);
}


/* CSS GREENS */ /* CSS GREENS */ /* CSS GREENS */ /* CSS GREENS */ /* CSS GREENS */ /* CSS GREENS */ /* CSS GREENS */
.layout-content.status.status-index .page-status.status-none {
    background: linear-gradient(180deg, #70AD47 60%, #2FCC66 100%);
}

.layout-content.status-index .components-statuses .component-container.status-green:after,
.status-green .icon-indicator,
.components-container .component-inner-container.status-green .component-status,
.components-container .component-inner-container.status-green .icon-indicator {
    color: linear-gradient(180deg, #70AD47 60%, #2FCC66 100%);
}

/* CSS LINK COLOR */  /* CSS LINK COLOR */  /* CSS LINK COLOR */  /* CSS LINK COLOR */  /* CSS LINK COLOR */  /* CSS LINK COLOR */
a,
a:hover,
.layout-content.status-index .page-footer span a:hover,
.layout-content.status-index .timeframes-container .timeframe:not(.active):hover,
.layout-content.status-incident .subheader a:hover {
    color:#274A7D;
}

.flat-button,
.masthead .updates-dropdown-container .show-updates-dropdown,
.layout-content.status-full-history .show-filter.open  {
    background: #274A7D;
    border-radius: var(--default-border-radius, 10px);
}


/* top-bottom-padding - starts */

.layout-content.status .masthead-container.basic .masthead {
    padding-top: var(--content-spacing, 30px);
}

.layout-content.status .masthead-container .masthead {
    margin-bottom: var(--content-spacing, 30px);
}

.layout-content.status.status-index .page-status {
    margin-bottom: var(--content-spacing, 30px);
}

.layout-content.status.status-index .components-section {
    margin-bottom: var(--content-spacing, 30px);
}

.page-footer {
    margin: 30px 0;
}

.layout-content.status.status-index .unresolved-incidents {
    margin-bottom: var(--content-spacing, 30px);
}

/* top-bottom-padding - ends */

body.status .layout-content.status .page-footer.border-color {
    border: none;
}

.layout-content.status .incidents-list {
    display: none;
}