/* GLOBAL */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');


body {
    font-family: 'Roboto', sans-serif;
    background: #FFF;
}

.font-large {
    font-size: 16px;
}

/* HEADER */

#resideo-header {
    background: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 90%;
    max-width: 850px;
    margin: 0 auto;
    padding: 18px 0 16px 0;
}

#resideo-header .header-container {
    padding: 40px 0 10px 0;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: auto 1fr auto;
    row-gap: 10px;
    border-bottom: 1px solid #ededed;
}

#resideo-header .brand {
    margin: 0 auto;
    display: inline-block;
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: 4;
}

#resideo-header .brand .header-logo {
    height: 40px;
}

#resideo-header .support-link {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}

#resideo-header .updates-dropdown-container {
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

#resideo-header .show-updates-dropdown {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

#updates-dropdown-support>a {
    visibility: hidden;
    position: relative;
    font-size: 0;
}

#updates-dropdown-support>a:after {
    visibility: visible;
    content: "Support Page";
    font-size: 0.875rem;
}

/* BODY */

.scheduled-maintenances-container>.font-largest,
.incidents-list>.font-largest,
.components-section>.font-largest {
    background: #326892;
    color: #fff;
    padding: 16px;
    font-size: 18px;
    letter-spacing: 1px;
    display: block;
}

.container {
    margin-top: 161px !important;
}

.unresolved-incidents,
.components-section,
.incidents-list {
    background: #fff;
}

.incidents-list {
    padding-top: 24px;
    padding-bottom: 24px;
}

.components-section .border-color {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.incidents-list .status-day>*,
.incidents-list .font-largest,
.scheduled-maintenance>* {
    padding-left: 24px;
}

.components-container .component-status {
    position: relative;
}



.components-container .component-status::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-size: contain;
    margin-right: 5px;
}

.components-container .component-inner-container[data-component-status="operational"] .component-status::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EOperational%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop-HD-Copy-14' transform='translate(-1097.000000, -526.000000)'%3E%3Cg id='Group' transform='translate(295.000000, 184.000000)'%3E%3Cg id='System-Status-Name-Copy-4' transform='translate(24.000000, 342.000000)'%3E%3Cg id='Operational' transform='translate(778.000000, 0.000000)'%3E%3Cpath d='M12.0003061,22.1635464 C6.39591889,22.1635464 1.83650045,17.6036321 1.83650045,12 C1.83650045,6.39575575 6.39591889,1.8364536 12.0003061,1.8364536 C17.6040811,1.8364536 22.1634996,6.39575575 22.1634996,12 C22.1634996,17.6036321 17.6040811,22.1635464 12.0003061,22.1635464 L12.0003061,22.1635464 Z M12.0003061,0 C5.38339498,0 0,5.38325766 0,12 C0,18.6167423 5.38339498,24 12.0003061,24 C18.616605,24 24,18.6167423 24,12 C24,5.38325766 18.616605,0 12.0003061,0 L12.0003061,0 Z' id='Fill-1' fill='%23258039'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23258039' cx='12' cy='12' r='11'%3E%3C/circle%3E%3Cpolygon id='Path' fill='%23FFFFFF' points='16.9050349 7.2 18.2034076 8.4983727 9.86835688 16.8346478 5.8 12.7032393 7.10816712 11.414661 9.8781513 14.2268836'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.components-container .component-inner-container[data-component-status="partial_outage"] .component-status::before,
.components-container .component-inner-container[data-component-status="under_maintenance"] .component-status::before,
.components-container .component-inner-container[data-component-status="degraded_performance"] .component-status::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EPartialOutage%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop-HD-Copy-14' transform='translate(-1097.000000, -417.000000)'%3E%3Cg id='Group' transform='translate(295.000000, 184.000000)'%3E%3Cg id='System-Status-Name-Copy-2' transform='translate(24.000000, 233.000000)'%3E%3Cg id='PartialOutage' transform='translate(778.000000, 0.000000)'%3E%3Cpath d='M12.0003061,22.1635464 C6.39591889,22.1635464 1.83650045,17.6036321 1.83650045,12 C1.83650045,6.39575575 6.39591889,1.8364536 12.0003061,1.8364536 C17.6040811,1.8364536 22.1634996,6.39575575 22.1634996,12 C22.1634996,17.6036321 17.6040811,22.1635464 12.0003061,22.1635464 L12.0003061,22.1635464 Z M12.0003061,0 C5.38339498,0 0,5.38325766 0,12 C0,18.6167423 5.38339498,24 12.0003061,24 C18.616605,24 24,18.6167423 24,12 C24,5.38325766 18.616605,0 12.0003061,0 L12.0003061,0 Z' id='Fill-1' fill='%23FFB302'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23FFB302' cx='12' cy='12' r='11'%3E%3C/circle%3E%3Cpath d='M13.5,16.5 C13.5,17.3286 12.828,18 12,18 C11.1714,18 10.5,17.3286 10.5,16.5 C10.5,15.6714 11.1714,15 12,15 C12.828,15 13.5,15.6714 13.5,16.5 L13.5,16.5 Z' id='Path' fill='%23FFFFFF'%3E%3C/path%3E%3Cpolygon id='Path' fill='%23FFFFFF' points='10.773 13 10.5 6 13.5 6 13.209 13'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.components-container .component-inner-container[data-component-status="major_outage"] .component-status::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EMajorOutage%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop-HD-Copy-14' transform='translate(-1097.000000, -474.000000)'%3E%3Cg id='Group' transform='translate(295.000000, 184.000000)'%3E%3Cg id='System-Status-Name-Copy-3' transform='translate(24.000000, 290.000000)'%3E%3Cg id='MajorOutage' transform='translate(778.000000, 0.000000)'%3E%3Cpath d='M12.0003061,22.1635464 C6.39591889,22.1635464 1.83650045,17.6036321 1.83650045,12 C1.83650045,6.39575575 6.39591889,1.8364536 12.0003061,1.8364536 C17.6040811,1.8364536 22.1634996,6.39575575 22.1634996,12 C22.1634996,17.6036321 17.6040811,22.1635464 12.0003061,22.1635464 L12.0003061,22.1635464 Z M12.0003061,0 C5.38339498,0 0,5.38325766 0,12 C0,18.6167423 5.38339498,24 12.0003061,24 C18.616605,24 24,18.6167423 24,12 C24,5.38325766 18.616605,0 12.0003061,0 L12.0003061,0 Z' id='Fill-1' fill='%23CE4A32'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23CE4A32' cx='12' cy='12' r='11'%3E%3C/circle%3E%3Cpolygon id='Path' fill='%23FFFFFF' points='18.2437954 7.05443044 13.2987119 12 18.2437954 16.9449574 16.9453896 18.2433301 12.0003061 13.2983727 7.05522255 18.2433301 5.75681673 16.9449574 10.7019003 12 5.75681673 7.05443044 7.05522255 5.75605775 12.0003061 10.7016273 16.9453896 5.75605775'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

/* FOOTER */

#resideo-footer {
    background: black;
    padding: 2rem;
}

#resideo-footer div {
    text-align: center;
    line-height: 1.5;
}

#resideo-footer a {
    font-size: 12px;
    color: #fff;
}

#resideo-footer a::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 8px;
    background-color: #FFF;
}

#resideo-footer a:last-child::after {
    width: 0px;
}

#resideo-footer p {
    text-align: center;
    font-size: 12px;
    color: #fff;
}

.fa-plus-square-o:before {
    content: ""
}

.fa-minus-square-o:before {
    content: ""
}

/* Toggle Button Styles */
.component-toggle-container {
    display: inline-block;
    margin-left: auto;
    padding-right: 20px;
}

.component-toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 2px solid #deebff;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #0052cc;
}

.component-toggle-button:hover {
    border-color: #0052cc;
    background: #f1f7ff;
}

.component-toggle-button.pro-mode {
    border-color: #ff5630;
    color: #ff5630;
    background: #fff6f6;
}

.component-toggle-button.pro-mode:hover {
    border-color: #ff5630;
    background: #ffebeb;
}

.toggle-switch {
    width: 36px;
    height: 18px;
    background: #deebff;
    border-radius: 9px;
    position: relative;
    transition: all 0.3s ease;
}

.component-toggle-button.pro-mode .toggle-switch {
    background: #ff5630;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.component-toggle-button.pro-mode .toggle-switch::after {
    transform: translateX(18px);
}

.toggle-label-consumer,
.toggle-label-pro {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header Layout Styles */
.components-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: inherit;
    /* Inherit background from original header */
    padding: inherit;
    /* Inherit padding from original header */
    margin: inherit;
    /* Inherit margin from original header */
}

.components-header-content {
    flex: 1;
}