/* --- Font Face Declarations --- */
@font-face {
    font-family: 'Bitso';
    src: url('https://assets.ctfassets.net/2tmkdt5ni5qx/0n6SMeMagDAknypvRjmmk/294a15d8e48af7abea6290059322baf1/bitso-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Bitso';
    src: url('https://assets.ctfassets.net/2tmkdt5ni5qx/6ylFbYnTkcl6b243AJ4GrE/115e9eae768744287844d3a730d3b6e3/bitso-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bitso';
    src: url('https://assets.ctfassets.net/2tmkdt5ni5qx/5AxPy95sBwwxGgYq2NRVDP/f0fb316fc82e123988e8fe21bfd68e3c/bitso-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* --- Global Body & Paragraph Styles --- */
body {
    background-color: #ffffff;
    font-family:'Bitso', Arial, Helvetica, sans-serif;
    color:#4F5051;
}
p {
    color:#4F5051 !important;
}

/* --- Font Awesome Adjustments --- */
.fa.fa-plus-square-o {
    font-family: "Font Awesome 5 Pro" !important;
}

/* --- General Layout & Container Sizes --- */
.layout-content.status .masthead-container.basic {
    width:100% !important;
    max-width:960px;
}
.container {
    width:90% !important;
    max-width:960px !important;
}
.updates-dropdown-container .show-updates-dropdown {
    background-color:#86AF6B !important;
}

/* --- Incident Status Styling --- */
.unresolved-incident.impact-major .incident-title {
    background-color:#e29434 !important;
    border-radius:5px 5px 0px 0px;
}
.unresolved-incident.impact-minor .incident-title {
    background-color:#e0d064 !important;
    border-radius:5px 5px 0px 0px;
}
.unresolved-incident.impact-none .incident-title {
    background-color:#bbbbbb !important;
    border-radius:5px 5px 0px 0px;
}

.impact-major .updates {
    background-color:#ffffff !important;
    border-color:#e29434 !important;
    border-radius:0px 0px 5px 5px;
}
.impact-minor .updates {
    background-color:#ffffff !important;
    border-color:#e0d064 !important;
    border-radius:0px 0px 5px 5px;
}
.impact-none .updates {
    background-color:#ffffff !important;
    border-color:#bbbbbb !important;
    border-radius:0px 0px 5px 5px;
}

.incident-container .impact-major a {
    color:#FFFFFF !important;
    background-color:#e29434;
    padding:20px;
    padding-top:8px;
    padding-bottom:6px;
    border-radius:20px;
    margin-top:5px;
    margin-bottom:10px;
    margin-left:-20px;
    display:inline-block;
    font-size:18px;
}
.incident-container .impact-minor a {
    color:#ffffff !important;
    background-color:#e0d064;
    padding:20px;
    padding-top:8px;
    padding-bottom:6px;
    border-radius:20px;
    margin-top:5px;
    margin-bottom:10px;
    margin-left:-20px;
    display:inline-block;
    font-size:18px;
}
.incident-container .impact-none a {
    color:#ffffff !important;
    background-color:#cccccc;
    padding:15px;
    padding-top:4px;
    padding-bottom:2px;
    border-radius:15px;
    margin-top:5px;
    margin-bottom:10px;
    margin-left:-15px;
    display:inline-block;
    font-size:16px;
}
.incident-data a {
    color:#86AF6B !important;
}

/* --- Component Status Styling --- */
.component-container:hover {
    background-color:#F7F9F9;
}
.component-status {
    width:190px;
    text-align:center;
}
.status-green .component-status {
    color:#FFFFFF !important;
    background-color:#6ABF4B !important;
    padding:15px;
    padding-top:2px;
    padding-bottom:1px;
    border-radius:12px;
    margin-top:-3px;
}
.status-yellow .component-status {
    color:#665600 !important;
    background-color:#edcc12 !important;
    padding:15px;
    padding-top:2px;
    padding-bottom:1px;
    border-radius:12px;
    margin-top:-3px;
}
.status-orange .component-status {
    color:#FFFFFF !important;
    background-color:#f29c32 !important;
    padding:15px;
    padding-top:2px;
    padding-bottom:1px;
    border-radius:12px;
    margin-top:-3px;
}
.status-red .component-status {
    color:#FFFFFF !important;
    background-color:#CE4152 !important;
    padding:15px;
    padding-top:2px;
    padding-bottom:1px;
    border-radius:12px;
    margin-top:-3px;
}
.status-blue .component-status {
    color:#FFFFFF !important;
    background-color:#aaaaaa !important;
    padding:15px;
    padding-top:2px;
    padding-bottom:1px;
    border-radius:12px;
    margin-top:-3px;
}

/* --- Update & Date Styles --- */
.layout-content.status .border-color {
    border-color:#cccccc !important;
}
.update strong {
    text-transform:uppercase;
    color:#666666;
}
.date {
    color:#999999;
    font-size:15px;
    font-weight:normal;
    position:relative;
    padding-bottom:10px !important;
    padding-top:10px !important;
}
.date:before {
    content: "•";
    position:absolute;
    width:7px;
    left:-15px;
    color:#CCCCCC;
}
.months-container h4 {
    color:#999999;
    font-size:18px;
}
.months-container h4:before {
    content: "▸";
    position:absolute;
    width:7px;
    left:-15px;
    color:#CCCCCC;
}

/* --- Expand Incidents Button --- */
.expand-incidents {
    background-color:#eaeaea;
    color:#999999 ;
    border:none !important;
}
.expand-incidents:hover {
    background-color:#A5C88F;
    color:#FFFFFF;
    border:none !important;
}

/* --- Page Title & Subheader --- */
.page-title .impact-minor, .page-title .impact-major, .page-title .impact-none {
    color:#86AF6B !important;
    font-size:30px;
}
.page-title .subheader {
    color:#999999 !important;
    font-size:24px;
}
.default-spacing {
    width:100% !important;
    max-width:700px !important;
}
.layout-content.status.status-incident>.container {
    max-width:700px !important;
}
.page-footer a {
    color:#A5C88F;
}

/* --- Custom Header Navigation & Elements --- */
.navbar-brand {
    float:left;
    padding:15px 0 15px;
    font-size:18px;
    line-height:30px;
    height:66px;
}
.navbar-brand:hover, .navbar-brand:focus {
    text-decoration:none;
}

.navbar-header {
    height:118px;
    border-bottom:1px solid #ccc;
    position:relative; /* CRITICAL: This allows absolute positioning of its children */
}

/* Positioning for Logo */
.navbar-header .logo {
    height:40px;
    width:124px;
    position:absolute;
    top:40px;
    left:0px;
}

/* Positioning for BACK TO BITSO link - Set to FAR RIGHT */
.navbar-header .backbitso {
    height:40px;
    width:auto;
    position:absolute;
    top:85px; /* Vertical position: lower part of header */
    right:0px; /* Aligns to the absolute far right edge */
    color:#a5c88f;
    font-size:12px;
}

/* Positioning for Navbar Title (currently hidden) */
.navbar-header .navbar-tittle {
    height:24px;
    width:auto;
    position:absolute;
    top:37px;
    right:35px;
    font-size:25px;
    color:#8C8C8C;
    font-weight:bold;
    display:none;
}

/* Positioning for Social Media Icons */
.navbar-header ul.social_top {
    height:24px;
    width:auto;
    position:absolute;
    top:48px; /* Vertical position */
    right:-18px; /* Positioning from right edge */
    font-size:24px;
    color:#999;
    text-shadow: none;
}
ul.social_top li {
    float: right;
    padding-right: 18px;
    color:#FFF;
}
.fab {
    color: #D5D5D5;
    font-size:18px;
}

/* --- Subscribe Button Positioning and Styling --- */
/* This container is where the Statuspage subscribe UI will be injected.
   It's positioned to also be on the right, but higher up. */
.subscribe-container-wrapper {
    position: absolute !important;
    top: 20px !important; /* Vertical position from top of header: higher part of header */
    right: 20px !important; /* Positioned very close to the right edge (adjust if needed) */
    z-index: 1000 !important; /* Ensures it appears on top of other elements */
    width: auto !important;
    height: auto !important;
}

/* Styling for the Statuspage's injected subscribe UI elements */
.updates-dropdown-container {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.updates-dropdown-container .show-updates-dropdown {
    color: #a5c88f !important;
    font-family: 'Bitso', Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.updates-dropdown-container .show-updates-dropdown span {
    color: #a5c88f !important;
    font-family: 'Bitso', Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.updates-dropdown-container .show-updates-dropdown:hover {
    text-decoration: underline !important;
    color: #6ABF4B !important;
}

/* --- Page Footer --- */
.footer {
    padding-bottom:30px;
    height:20px;
}
.footer p.footer_left {
    display: block;
    float: left;
    color: #A9ADAF !important;
    font-size:14px !important;
}

/* --- Media Queries for Responsiveness --- */
@media screen and (max-width: 586px){
    .layout-content.status .masthead-container.basic {
        width:90% !important;
        margin-left:5%;
    }
    .layout-content.status .masthead-container.basic .masthead {
        padding-top:25px;
        margin-bottom:25px;
    }
    .logo-container img {
        width:100px !important;
        height:100px !important;
        float:left;
    }
    .incident-container .impact-major a {
        margin-left:0px;
        display:inline-block;
        font-size:18px;
    }
    .incident-container .impact-minor a {
        margin-left:0px;
        display:inline-block;
        font-size:18px;
    }
    .incident-container .impact-none a {
        margin-left:0px;
        display:inline-block;
        font-size:16px;
    }
    .date {
        padding-left:17px;
    }
    .date:before {
        left:0px;
        color:#CCCCCC;
    }
    span.component-status {
        width:auto !important;
        text-align:center;
        font-size:11px !important;
        padding-left:15px !important;
        padding-right:15px !important;
        display:inline;
    }
    .component-container .child-components-container {
        padding-left:5px !important;
    }

    /* Mobile Header Adjustments */
    .navbar-header {
        height: 80px;
    }
    .navbar-header .logo {
        height:30px;
        width:100px;
        position:absolute;
        top:24px;
        left:0px;
    }
    .navbar-header ul.social_top {
        height: 24px;
        width: auto;
        position: absolute;
        top: 30px;
        right: -18px;
        font-size: 18px;
        color: #999;
        text-shadow: none;
    }
    .backbitso {
        display:none; /* "Back to Bitso" link is hidden on mobile */
    }

    /* Mobile Subscribe Button Positioning */
    /* Since Back to Bitso is hidden, subscribe can go to the far right on mobile */
    .subscribe-container-wrapper {
        top: 15px !important;
        right: 15px !important;
    }
}