*{
    box-sizing: border-box;
}
body{
    font-family: Commissioner;
    background:white;
    margin: 0;
    padding: 0;
}
a{
    color: #83B235;
}
a:hover{
    text-decoration: underline;
}
h1{
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    display:block;
}
h2{
    font-weight: 500;
    font-size: 24px;
    line-height: 118%;
    display: flex;
    gap: 8px;
}
h3{
    font-weight: 600;
    font-size: 16px;
    line-height: 126%;
    margin-top:32px;
}
.border{
    border-style: solid!important;
    border-color: #e4e4e4!important;
    border-width: 1px!important;
}
header{
    border-top-style: none!important;
    box-shadow: 0px 8px 24px 0px #292B3714;
    font-size: 16px;
    font-weight: 600;
    color:#292B37;
}
.header-content{
    padding: 15px 64px;
    max-width: 1440px;
    margin:0 auto;
}
.header-logo, .header-logo img{
    width: 80px;
    height: 40px;
    display: block;
}
header a{
    color:#292B37;
}
.container{
    padding: 48px 64px!important;
    max-width: 1440px;
    width: 100%;
    min-height: calc(100vh - 118px);
    margin: 0 auto;
}
.status_top{
    text-align: center;
    margin-top:48px!important;
    margin-bottom:60px!important;
}
.status_img{
    display: block;
    margin: 0 auto;
}
.status_label{
    color:#000000;
    font-size: 40px;
    font-weight: 500;
}
.status_performance_issues{
    color: #4A85D5;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 400;
}
.status_date{
    color:#A8A8A8;
    font-size: 18px;
    margin-top: 12px;
}
.component-group{
    margin-top: 24px;
    margin-bottom: 0;
    border-radius:12px;
}
.component-group-border{
    border-style: solid !important;
    border-color: #e4e4e4 !important;
    border-width: 1px;
    border-radius:12px;
}
.component-group .component-group-header{
    background:#c2c2c228;
    width:100%;
    padding: 15px 20px;
    border-radius:12px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
    font-weight: 400;
}
.component-group .component-group-header button, .component-group .component-group-header button:hover, .component-group .component-group-header button:focus {

}
.component_item{
    padding: 15px 20px;
    border-style: none;
    border-bottom-style: solid;
    border-bottom-color: #e4e4e4;
    border-width: 1px;
}
.component-group button{
    border-style: none;
    background: transparent;
}
.component-group .component_name{
    font-size: 16px;
}
.component-group .component-status{
    font-size: 14px;
    color:#A8A8A8;
}
.component-group .component-group-header .component-group-name{
    display: flex;
    gap:10px;
}
.accordion_show_icon{
    width: 20px;
    height: 20px;
}
.rotate-180{
    transform: rotate(180deg);
}
.component-group .component-group-header h3 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0;
    line-height: 1;
    text-align: left;
    margin-bottom: 0;
}
.component{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.component-group ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.component_group_status{
    position: relative;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-width: 4px;
    border-color: #cadcb0;
    background: #83B235;
    border-radius: 50%;
}

.component_status{
    position: relative;
    width: 12px;
    height: 12px;
    border-style: solid;
    border-width: 4px;
    border-color: #cadcb0;
    background: #83B235;
    border-radius: 50%;
    top: 4px;
}

.component_status.component_status_2{
    background: #4A85D5;
    border-color: #b6ccea;
}
.component_status.component_status_3{
    background: #DFA22E;
    border-color: #ecd6ad;
}
.component_status.component_status_4{
    background: #D64F58;
    border-color: #e8b9bd;
}
.component_status_label{
    font-weight: 400;
    font-size: 14px;
    line-height: 116%;
    background: transparent!important;
    text-align: right;
    width: 100%;
    display: block;
}
.component_status_label.component_status_1{
    color:#83B235;
}
.component_status_label.component_status_2{
    color:#4A85D5;
}
.component_status_label.component_status_3{
    color:#DFA22E;
}
.component_status_label.component_status_4{
    color:#D64F58;
}
.component .component_show_tarif{
    display: block;
    width: 20px;
    height: 20px;
    background: url(/images/icon_show.svg) no-repeat;
    background-position: center;
}
.component.active .component_show_tarif{
    transform: rotate(180deg);
}
.component-name{
    display: flex;
    gap:8px;
}
.component-tarif{
    padding-left:28px;
    font-size: 14px;
    line-height: 28px;
    padding-right: 0px;
    color: #292B37;
    display: flex;
    margin-top: 8px;
}
.component_all_tariff{
    position: relative;
    display: block;
    width: 100px;
}
.component-tarif .active_tariff{
    display: block;
    padding: 5px 0;
}
.component_all_tariff_button{
    background: #F4F6F9 !important;
    padding: 5px 10px;
    display: block;
    border-radius: 6px;
    margin-left: 22px;
    font-weight: 500;
    color: #292B37;
    cursor: pointer;
    width: 100%;
}

.component-tarif .legasy_tariff{
    position: absolute;
    width: 300px;
    gap: 8px;
    left: -80px;
    padding-top: 5px;
    z-index: 10;
}
.legasy_tariff_triangle{
    position: absolute;
    left: 142px;
    box-shadow: 0px 12px 32px 0px #00000033;
    z-index: 15;
    margin-top:3px;
}
.component-tarif .legasy_tariff .label {
    box-shadow: 0px 12px 32px 0px #00000033;
    background: white;
    position: relative;
    padding: 16px;
    margin-top: 10px;
    border-radius: 8px;
}
.component_all_tariff:hover .legasy_tariff{
    display: block!important;
    position: absolute;
    z-index: 500!important;
}

.shedule{
    margin-top: 90px!important;
}
.schedule-header{
    display: flex;
    align-items: center;
    justify-content: left;
    padding-bottom: 26px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C2C2C266;
}
.shedule-item-date{
    display: flex;
    gap:20px;
}
.schedule_time_left{
    font-size: 14px;
    color:#A8A8A8;
}
.shedule-item-description{
    font-size:16px;
    margin-top: 20px;
}
.shedule-item{
    border-style:solid;
    border-width: 1px;
    border-color: #C2C2C299;
    border-radius: 10px;
    margin-top: 20px;
    padding: 10px;
}
.shedule-item-header{
    border-bottom-style:solid;
    border-bottom-width: 1px;
    border-bottom-color: #C2C2C299;
    margin-bottom: 16px;
    padding: 5px 0 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shedule-item-name{
    display: flex;
    align-items: center;
    gap:16px;
}
.shedule-item-header h3{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.shedule-item-header .date {
    color: #A8A8A8;
    font-size: 14px;
    font-weight: 400;
}
.shedule_detail_link{
    padding: 16px;
    color:#878C9D;
    font-weight: 600;
}
.shedule_detail_link.active{
    color:#252733;
}
.shedule_detail_link .icon{
    width: 14px;
    height: 14px;
    display: block;
    background: url("/images/plus.svg") no-repeat;
}
.shedule_detail_link.active .icon{
    width: 14px;
    height: 14px;
    display: block;
    background: url("/images/minus.svg") no-repeat;
}
.shedule_works_link{
    width: 142px;
    height: 33px;
    gap: 7px;
    border-radius: 10px;
    background: #F4F4FB;
    margin-left: 16px;
    font-size: 14px;
    font-weight: 500;
    color:#292B37;
    padding: 7px 10px;
    text-decoration: none;
}

.shedule_works_comback_link {
    width: 120px;
    height: 33px;
    gap: 7px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #E7E8EF;
    font-size: 14px;
    font-weight: 500;
    color: #292B37;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-bottom: 32px;
}

.shedule h3{
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C2C2C266;
    margin-bottom: 8px;
    padding-bottom: 8px;
    display: inline-block;
}
.tomorrov{
    border-style: solid;
    border-color: #83B235;
    color: #83B235;
    border-width: 2px;
    border-radius: 4px;
    width: 75px;
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 16px;
    text-align: center;
    padding: 3px;
}
.incidents{
    margin-top: 60px!important;
}
.incidents_header{
    padding-bottom: 26px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C2C2C266;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.incidents_h3{
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}
.incidents_date-header .active {
    border-bottom-style:none!important;
}
.incidents_date-header .active h3{
    color:#83B235;
}
.incidents_date.disabled h3{
    color:#C2C2C2!important;
}
.incidents_date{
    margin-top:32px;
}
.incident_item{
    margin-top: 20px;
    border-style: none;
    padding: 10px 0;
}
.incident_item_status4{
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 24px;
    border-left-color: #83B235;
}
.incident_item_status1{
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 24px;
    border-left-color: #4A85D5;
}
.incident_item_status3{
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 24px;
    border-left-color: #DFA22E;
}
.incident_item_status0{
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 24px;
    border-left-color: #D64F58;
}

.incidents_date .incidents_date-header button {
    color: #000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C2C2C266;
    background: transparent;
}
.incident_time{
    color: #C2C2C2;
    font-size: 14px;
    font-weight: 400;
}
.incident_update{
    margin-top: 16px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.incident_status{
    position: relative;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-width: 4px;
    border-color: #cadcb0;
    background: #83B235;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}
.incident_status.incident_status_4{
    border-color: #cadcb0;
    background: #83B235;
}
.incident_status.incident_status_1{
    background: #4A85D5;
    border-color: #b6ccea;
}
.incident_status.incident_status_3{
    background: #DFA22E;
    border-color: #ecd6ad;
}
.incident_status.incident_status_0{
    background: #D64F58;
    border-color: #e8b9bd;
}
.incidents_footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.incidents_footer a{
    display: flex;
    align-items: normal;
    padding: 10px 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    border-radius: 6px;
    gap: 10px;
    text-decoration: none;
}
.incidents_filter{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:20px;
    flex-wrap: wrap;
}
.incidents_filter input {
    border-style: solid;
    border-width: 1px;
    border-color: #C2C2C2;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    color:#292B37;
    font-family: Commissioner;
    width: 140px;
}
.incidents_filter input:not(:disabled):focus,  .incidents_filter input:not(:disabled):focus-visible, .incidents_filter input:not(:disabled):active{
    border-style: solid;
    border-width: 2px;
    border-color:#83B235;
    outline: none;
}
.update_status{
    display: block;
    width: 16px;
    height: 16px;
    margin-bottom: 5px;
}
.update_status_0{
    background: url('/images/incident_status/fatal.svg') no-repeat;
    background-position: center;
}
.update_status_1{
    background: url('/images/incident_status/explore.svg') no-repeat;
    background-position: center;
}
.update_status_2{
    background: url('/images/incident_status/plan.svg') no-repeat;
    background-position: center;
}
.update_status_3{
    background: url('/images/incident_status/part.svg') no-repeat;
    background-position: center;
}
.update_status_4{
    background: url('/images/incident_status/ok.svg') no-repeat;
    background-position: center;
}

.schedule_status{
    display: block;
    width: 16px;
    height: 16px;
    margin-bottom: 5px;
}
.schedule_status_0{
    background: url('/images/incident_status/fatal.svg') no-repeat;
    background-position: center;
}
.schedule_status_1{
    background: url('/images/incident_status/explore.svg') no-repeat;
    background-position: center;
}
.schedule_status_2{
    background: url('/images/incident_status/plan.svg') no-repeat;
    background-position: center;
}
.schedule_status_3{
    background: url('/images/incident_status/part.svg') no-repeat;
    background-position: center;
}
.schedule_status_4{
    background: url('/images/incident_status/ok.svg') no-repeat;
    background-position: center;
}

.incident_update_message{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    flex: 1;
}
.incident_update_date{
    font-weight: 400;
    font-size: 14px;
    line-height: 115%;
    color:#A8A8A8;
}
.incidents{
    padding: 20px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #e4e4e4;
}
.inclidents_list{
    margin-bottom: 32px;
}
.inclidents_list button{
    border-style: none;
}
.index_works{
    margin-bottom:50px;
}
.show_all_link{
    display: block;
    text-align: right;
    margin-top: 20px;
    color: #83B235;
}
.pagination{
    margin-top: 30px;
}
.pagination .sm\:hidden{
    display: flex!important;
}
nav ul.pagination{
    display: flex;
    gap:20px;
    align-items: center;
    justify-content: center;
}
nav ul.pagination .page-item{
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.padination_btn{
    border-style: solid !important;
    border-color: #e4e4e4 !important;
    border-width: 1px !important;
    border-radius: 6px;
    padding: 7px 25px;
    text-decoration: none;
}
 footer{
     background: #292B37;
     height: 54px;
 }
.footer_content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 15px 64px;
}
.footer_nav{
    display: flex;
    align-items: center;
    justify-content: end;
    gap:64px;
}
.footer_nav {
    gap:64px;
}
.footer_copy{
    color:#A8A8A8;
    font-size: 16px;
    font-weight: 600;
}
.footer_nav a{
    color:white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
svg.size-5{
    width: 20px;
    height: 20px;
}

@media screen and (max-width: 1200px){
    .component-group .component-group-header h3 {
        font-size: 14px;
    }
}
@media screen and (max-width: 600px) {
    .header-content {
        padding: 12px 24px;
    }
    .hidden_mobile{
        display: none;
    }
    .container{
        padding: 24px!important;
        width: 100%;
    }
    .status_top {
        margin-top: 24px !important;
        margin-bottom: 45px !important;
    }
    .incident_update {
        display: flex;
        align-items: flex-start;
    }
    .update_status {
        margin-top: 5px;
    }
    .incident_update_date {
        margin-top: 5px;
    }
    .status_label {
        font-size: 24px;
        margin-top: 10px;
    }
    .status_date {
        font-size: 18px;
    }
    .incidents_header {
        display: block;
    }
    .schedule-header {
        display: block;
    }
    footer {
        background: #292B37;
        height: auto;
    }
    .footer_content {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .component-tarif{
        display: block;
        padding-left: 0px;
        padding-right: 0;
        margin-top: 8px;
    }
    .component-tarif .component_all_tariff_button{
        display: block;
        width: 150px;
        text-align: center;
        margin-left:0;
        margin-top: 8px;
    }
    .component-tarif .legasy_tariff {
        position: absolute;
        left: 0;
        text-align: left;
    }
    .legasy_tariff_triangle {
        position: absolute;
        left: 50px;
    }
    .incidents_filter{
        display: flex;
        gap:10px;
    }
    .incidents_filter input {
        width: 110px;
        font-size: 14px;
        padding: 10px 5px;
    }
}
/* Стили для темной темы */
@media (prefers-color-scheme: dark) {
    input.fi-input {
        color: #091122;
    }
}