:root{
    --background:white;
    --text-color: black;
    --black-text:#191c24;
    --gray-opacity:#e2e4e980;
    --gray-text:#70778c;
    --gray-border:#e2e4e9;
    --box-shadow:#00000008;
    --green-text:#059669;
    --default-indicate:#727da13b;
    --green-indicate:var(--green-text);
    --red-indicate:#b91c1c;
    --yellow-indicate:#ff9c2b;
    --orange-indicate:#ee7a53;
    --green-indicate-opc:#059669b3;
    --title-background:#eeeff2d5;
    --title-sub-background:#eeeff2;
    --subscribe-btn:#eeeff2;
    --subscribe-text:var(--black-text);
}

html.--dark{
    --background:#0b0c14;
    --text-color: white;
    --gray-opacity:#e2e4e912;
    --black-text: #e9eaf7;
    --gray-text: #b1b4bf;
    --gray-border: #e2e4e91f;
    --box-shadow:#00000085;
    --green-text:#12c38c;
    --green-indicate: #059669;
    --green-indicate-opc: #059669b3;
    --title-background:#727da114;
    --title-sub-background:transparent;
    --subscribe-btn:linear-gradient(0deg,#5B63D3,#5B63D3),linear-gradient(258.47deg,#5B63D3 38.52%,#795FD0 98.47%);
    --subscribe-text:var(--text-color);
}
html body.--animate, html body.--animate *{
    transition: color 300ms ease-in-out,background-color 300ms ease-in-out,border-color 300ms ease-in-out,border 300ms ease-in-out;
    -webkit-transition: color 300ms ease-in-out,background-color 300ms ease-in-out,border-color 300ms ease-in-out,border 300ms ease-in-out;
}

html,body{
    padding:0;
    margin:0;
    height:100%;
    font-family: "Lato","Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-color:var(--background);
    color:var(--text-color);
}

*{
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.app{
    max-width:880px;
    width:100%;
    height:100%;
    margin-left: auto; margin-right: auto;
    padding:0px 20px;
}

.navbar{
    width: 100%;
    padding: 20px 0px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray-opacity);
    align-items: center;
}
.navbar .logo,.--footer .--logo{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 1.2px;
    font-size: 13px;
    display: inline-block;
    color:var(--text-color);
}
.navbar .--subscribe{
    background-color:var(--title-background);
    border:1px solid var(--gray-opacity);
    border-radius:9px;
    padding:8px 10px;
    font-size:13px;
    color:var(--subscribe-text);
    cursor: pointer;
    transition:transform 150ms linear;
    -webkit-transition: -webkit-transform 150ms linear;
    font-weight:500;
}
.navbar .--subscribe:active{transform: scale(0.985); -webkit-transform: scale(0.985);}

.--footer{
    width: 100%;
    padding: 20px 0px;
    display:flex;
    align-items: center;
    justify-content: center;
    color:var(--gray-text);
    font-size: 13px;
}

.--status,.--head-space-range{ margin:60px 0px 40px 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.--head-space-range{margin:60px 0px;}
.--status i,.--services i.fa-circle-check{color:var(--green-indicate); font-size:30px; position: relative;}
.--status i::after,.--services i.fa-circle-check::after{content: ""; border-radius: 50%; height: 31px; width: 31px; display: block; position: absolute; box-shadow: 0px 0px 10px 1px var(--green-indicate-opc); left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);border:1px solid var(--background);}
.--services i.fa-circle-check{font-size:12px;}
.--services i.fa-circle-check::after{height:14px; width:14px;box-shadow:1px 1px 10px 1px #05966912;}
.--status h1{color:var(--black-text); margin:10px 0px;}
.--status span{
    font-size:14px;
    color:var(--gray-text);
}
.--head-space-range h1{font-size:30px;margin:20px 0px;}
.--head-spacer{margin: 60px 0px 20px 0px; display:block;}
.--head-spacer .--back-redirector{display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #ccdbea; font-size: 13px; font-weight: 400;}
.--head-spacer .--back-redirector i, .--head-space-range i[data-role]{height: 24px; width: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: var(--title-background); border: 1px solid var(--gray-opacity); color: #ccdbea; border-radius: 6px;cursor:pointer;}
.--head-spacer .--back-redirector:hover{color:var(--text-color);}
.--head-space-range .--range-wrapper{display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ccdbea;gap:15px;}
.--head-space-range .--range-wrapper [data-role="month-range"]{display: block; min-width: 140px; text-align: center;}

.--services, .--incident-block,.--month-block{
    border:1px solid var(--gray-border);
    box-shadow: 0px 4px 7px 0px var(--box-shadow);
    border-radius: 12px;
    margin-bottom:80px;
}
.--month-block{margin-bottom:50px;min-height:230px;}
.--month-block .--month-title{height:60px;min-height:60px;display:flex;align-items:center;padding:0px 30px;font-size:13px;font-weight:400;border-bottom:1px solid var(--gray-border);}
.--month-block .--month-content{width:100%;}

.--incident-block{user-select:text;}
.--incident-block .--meta-info{padding:30px 35px;}
.--incident-block .--meta-info h3{font-weight:800;max-width:330px;line-height:1.4;margin-top:12px;}
.--incident-block .--meta-info span.--state{font-size: 12px;padding: 4px 10px; border-radius: 12px; min-width: 72px; display: inline-block; text-align: center;font-weight:600;}
.--incident-block .--meta-info span.--state::after{content:"No Impact";}
.--incident-block .--meta-info span.--state.minor::after{content:"Minor Impact";}
.--incident-block .--meta-info span.--state.maintenance::after{content:"Maintenance";}
.--incident-block .--meta-info span.--state.maintenance,.--incident-block .--meta-info span.--state.minor{color: #e9891a; background: #d9770647;}
.--incident-block .--meta-info span.--state.major{color: var(--orange-indicate); background: #ee7a5336;}
.--incident-block .--meta-info span.--state.major::after{content:"Major Outage";}
.--incident-block .--meta-info span.--state.critical{color: #eb3a3a; background: #eb3a3a38;}
.--incident-block .--meta-info span.--state.critical::after{content:"Critical";}
.--incident-block .--meta-info p.--date{margin: 0; font-size: 13px; color: var(--gray-text);}
.--incident-block .--services-info{display:flex;align-items:center; gap:10px 15px; flex-wrap:wrap; padding:15px 35px;border-top:1px solid var(--gray-border);border-bottom:1px solid var(--gray-border);}
.--incident-block .--services-info span{white-space:nowrap;font-size:12px;display:block;min-width:50px;}
.--incident-block .--services-info span:not(.--service-span){font-weight:600;}
.--incident-block .--services-info span.--service-span{background-color: var(--title-background); border: 1px solid var(--gray-opacity); border-radius:12px; padding:5px 8px;}
.--incident-block .--report-sections{
    background:var(--title-background);
    min-height:200px;display:flex;flex-direction:column;gap:15px;
    padding:30px 35px;
}
.--incident-block .--report-sections .--update{display:flex;line-height:1.5;}
.--incident-block .--report-sections .--update .--side-tick{flex:0;width:20px;min-width:20px;color:#939db8;display:flex;flex-direction:column;align-items:center;padding-top:21px;}
.--incident-block .--report-sections .--update .--side-tick i{font-size: 12px; text-align: center;}
.--incident-block .--report-sections .--update .--side-tick i::before{content:"\f110";color:#939db8;}
.--incident-block .--report-sections .--update .--side-tick i.investigating::before{color:#e91e63;content:"\f192";font-weight:400;}
.--incident-block .--report-sections .--update .--side-tick i.mitigation::before{color:#1e90ff;content:"\f192";font-weight:400;}
.--incident-block .--report-sections .--update .--side-tick i.monitoring::before{color:#6a5acd;content:"\f192";font-weight:400;}
.--incident-block .--report-sections .--update .--side-tick i.identified::before{color:#df6954;content:"\f192";font-weight:400;}
.--incident-block .--report-sections .--update .--side-tick i.resolved::before,.--incident-block .--report-sections .--update .--side-tick i.completed::before{content:"\f058";color:var(--green-indicate);font-weight:400;}
.--incident-block .--report-sections .--update .--side-tick hr{border:none;border-right:1px solid var(--gray-border);height:100%;}
.--incident-block .--report-sections .--update:last-child .--side-tick hr{display:none;}
.--incident-block .--report-sections .--update .--content{
    border: 1px solid var(--gray-border); border-radius: 12px;
    background:var(--background);font-size:13.5px;padding:20px 25px;color:#ccdbea;
    line-height: 1.6; font-weight: 500; -webkit-font-smoothing: auto;width:100%;
}
.--incident-block .--report-sections .--update .--content .--flex-title{display: flex; gap: 15px; margin-bottom: 20px; line-height: 1; align-items: center;}
.--incident-block .--report-sections .--update .--content .--flex-title .--title{font-weight:600;color:var(--text-color);}
.--incident-block .--report-sections .--update .--content .--flex-title .--date{font-size:13px;}

.--services .--service:first-child{padding-top:12px;}
.--services .--service{padding:6px 12px 6px 12px;}
.--services .--service:last-child{padding-bottom:12px;}

.--services .--service ~ .--service.--active{
    border-top:1px solid var(--gray-opacity);
}

.--services .--service .--title{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    align-items:center;
    padding:18px 0px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color,transform 150ms linear;
    -webkit-transition: background-color,-webkit-transform 150ms linear;
}
.--services .--service .--title:active{transform: scale(0.99); -webkit-transform: scale(0.99);}
.--services .--service .--title span.--name{
    font-size:13px;
    font-weight:600;
    padding:0px 15px;
}
.--services .--service .--title span.--state{
    padding:4px 8px;
    background-color:var(--title-sub-background);
    color:var(--black-text);
    border-radius: 12px;;
    transition: background-color 150ms linear;
    -webkit-transition: background-color 150ms linear;
}
.--services .--service .--title span.--drop{
    margin: 0px 15px; display: inline-block; font-size: 12px;
    transition: transform 150ms linear; -webkit-transition: -webkit-transform 150ms linear;
}
.--services .--service:not(.--active) .--title,.--services .--service:not(.--active) .--title span.--state,.--services .--service .--title:hover,.--services .--service .--title:hover span.--state{
    background-color: var(--title-background);
}

.--service-content{flex-direction:column;overflow:hidden;max-height:0;transform-origin:top center;transition:0.3s ease-out;}

.--services .--service.--active .--title span.--drop{transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.--services .--service .--content{
    width:100%;padding:10px 15px;flex-direction:column;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}
.--services .--service.--active .--content{opacity: 1; transform: translateY(0);}
.--services .--service:not(.--active) .--content{height: 0; overflow: hidden;padding:0;visibility: hidden;}
.--services .--service .--inline{width:100%;display:inline-flex;align-items:center;justify-content:space-between;padding:8px 0px;font-size:12.5px;}
.--services .--service .--inline:nth-child(1) span:nth-child(1){font-weight: 500;font-size:13px;color:var(--black-text);}
.--services .--service .--inline:nth-child(1) span:nth-child(2){color:var(--green-text)}
.--services .--service .--inline{color:var(--gray-text);}
.--services .--service .--inline span[data-time-range]::before{content: "90 days ago";}

.--tickes{height:25px;width:100%;border-radius:2px;display:inline-flex;align-items: center;overflow:hidden;gap:1.4px;}
.--tick{background-color:var(--default-indicate);height:100%;width:100%;cursor:pointer;}
.--tick:active,.--tick:hover{opacity: 0.7;}
.--tick.operational{background-color:var(--green-indicate);}
.--tick.major_outage{background-color:var(--orange-indicate);}
.--tick.degraded{background-color:var(--yellow-indicate);}
.--tick.maintenance{background-color:var(--yellow-indicate);}
.--tick.partial_outage{background-color:var(--orange-indicate);}

/* Media query for screens with a maximum width of 500px */
@media (max-width: 800px) {
    /* Hide items from 50 and downwards */
    .--tick:nth-last-child(n+60) {
        display: none;
    }
    .--services .--service .--inline span[data-time-range]::before{content: "60 days ago";}
}
@media screen and (max-width:780px) {.navbar .--opts{display:none !important;}}
@media (max-width: 540px) {
    .app{padding:0px 10px;}
    .app .navbar{padding: 20px 10px;}
    /* Hide items from 50 and downwards */
    .--tick:nth-last-child(n+30) {
        display: none;
    }
    .--services .--service .--inline span[data-time-range]::before{content: "30 days ago";}
}

.navbar .--opts{
    display: flex; align-items: center; justify-content: center; gap: 15px;
}
.navbar .--opts .--opt{border-color: transparent; background-color: transparent;border-radius: 9px; padding: 8px 10px; font-size: 13px; color: var(--subscribe-text); border:1px solid transparent; cursor: pointer; transition: transform 150ms linear; -webkit-transition: -webkit-transform 150ms linear; font-weight: 500; min-width: 100px; text-align: center;}
.navbar .--opts .--opt.--selected{color:var(--text-color); font-weight: 600; background:var(--title-background);border-color:var(--gray-opacity);}
.navbar .--opts .--opt:hover{border-color:var(--gray-opacity);}

/* sub wrappers */
.navbar .--sub-wrapper{
    position: relative;
}
.navbar .--sub-wrapper a{color: #7179ff !important;text-decoration:none !important;font-weight:600;}
.navbar .--sub-wrapper .--sub-con{
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    min-height: 100px;
    width: 100%;
    min-width: 300px;
    background: #1e2127;
    z-index: 11111;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--gray-border);
    border-radius: 12px;
    display:none;
    transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%;
    animation: main 200ms; -webkit-animation: main 200ms; 
    overflow:hidden;
}
@keyframes main { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@-webkit-keyframes main { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); } }
.navbar .--sub-wrapper.--visible .--sub-con{display:block;}
.navbar .--sub-wrapper .--sub-con .--sub-nav{
    width: 100%; display: flex; flex-direction: row; justify-content: space-between; font-size: 12px; border-bottom: 1px solid var(--gray-border); overflow: hidden; border-radius: 7px;
}
.navbar .--sub-wrapper .--sub-con .--sub-nav span{ display: block; text-align: center; width: 100%; padding: 8px 6px; cursor: pointer; }
.navbar .--sub-wrapper .--sub-con .--sub-nav span ~ span{border-left: 1px solid var(--gray-border);}
.navbar .--sub-wrapper .--sub-con .--sub-nav span:hover{color:lightslategray;}
.navbar .--sub-wrapper .--sub-con .--sub-nav span i{font-size: 11px; margin-right: 2px;}
.navbar .--sub-wrapper .--sub-con .--opt-sub-content{padding: 15px 15px 20px 15px;display:none;}
.navbar .--sub-wrapper .--sub-con .--opt-sub-content span{font-size: 12px; display: block;}
.navbar .--sub-wrapper .--sub-con .--opt-sub-content input{
    display: block;
    margin-top: 20px;
    padding: 12px;
    border: 1px solid var(--gray-border);
    border-radius: 11px;
    background: var(--background);
    width: 100%;
    color: var(--text-color);
    font-family: "Lato","Reddit Sans", sans-serif;
    outline:none;
}
.navbar .--sub-wrapper .--sub-con .--opt-sub-content input:focus-within{border-color:rgb(65, 74, 225);}
.navbar .--sub-wrapper .--sub-con .--opt-sub-content button{
    display: block;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #52558b;
    border-radius: 11px;
    background-color:rgb(65, 74, 225);
    width: 100%;
    color: white;
    font-family: "Lato","Reddit Sans", sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 200ms ease-in-out;
    -webkit-transition: background-color 200ms ease-in-out;
    font-size: 13px; font-weight: 600;
}
.navbar .--sub-wrapper .--sub-con .--opt-sub-content button:hover{background-color:rgb(54, 61, 201);}
.navbar .--sub-wrapper .--sub-con[data-opt="e"] .--sub-nav span[data-opt="e"]{background-color:var(--background);color:var(--text-color) !important;}
.navbar .--sub-wrapper .--sub-con[data-opt="s"] .--sub-nav span[data-opt="s"]{background-color:var(--background);color:var(--text-color) !important;}
.navbar .--sub-wrapper .--sub-con[data-opt="r"] .--sub-nav span[data-opt="r"]{background-color:var(--background);color:var(--text-color) !important;}
.navbar .--sub-wrapper .--sub-con[data-opt="e"] .--opt-sub-content[data-opt="e"]{display:block;}
.navbar .--sub-wrapper .--sub-con[data-opt="s"] .--opt-sub-content[data-opt="s"]{display:block;}
.navbar .--sub-wrapper .--sub-con[data-opt="r"] .--opt-sub-content[data-opt="r"]{display:block;}

.--incident-box{position: fixed; background:var(--background); border: 1px solid var(--gray-border); padding:10px; box-shadow: 0 0 10px rgba(0,0,0,0.15); z-index: 9999; display: none; max-width: 250px; pointer-events: none; border-radius: 8px; font-size: 13px;}
.--incident-box .date{display:block;margin-top:10px; padding-top:5px; border-top:1px solid var(--gray-border); font-size: 12px; color: #95a3b1;}