.modal-main, .modal-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-offcanvas-padding, 12px);
}

.modal-tabs {
    gap: var(--spacing-tab-grid-gap, 4px);
}

.nav-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: var(--spacing-tab-grid-gap, 4px);
    padding-bottom: 10px;
    border: none;
}

.nav-tabs::-webkit-scrollbar {
    -webkit-appearance: none;
}


.nav-fill .nav-item {
    justify-content: center;
    flex: 1 0 0;
}
.nav-item {
    display: flex;
    padding: 8px var(--spacing-tab-padding, 16px);
    align-items: center;
    gap: var(--spacing-tab-icon-gap, 4px);
    align-self: stretch;

    border-radius: var(--radius-tab, 9999px);

    cursor: pointer;

    border: 1px solid var(--tab-default, rgba(3, 15, 19, 0.30));
    background: var(--HitBox, rgba(255, 255, 255, 0.00));
    color: var(--tab-label-dafault, rgba(3, 15, 19, 0.30));

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/old Edge */
    user-select: none;
}
.nav-item .icon {
    margin: 0;
    width: 18px;
    height: 18px;
}

.nav-item.active {
    border: 1px solid var(--tab-active, #02778E);
    background: var(--tab-active, #02778E);
    color: var(--tab-label-active, #FFF);

}
.nav-item.inactive {
    border: 1px solid var(--tab-inactive, rgba(2, 119, 142, 0.30));
    background: var(--tab-inactive, rgba(2, 119, 142, 0.30));
    color: var(--tab-inactive, rgba(2, 119, 142, 0.30));
}

.item-container {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-list-item-grid-gap, 8px);
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-list-item-padding, 12px);
    border-radius: var(--radius-list-item, 16px);
    border: 1px solid var(--stroke-grey, #F0F0F0);
}
.item .content {
    display: flex;
    align-items: center;
    gap: var(--spacing-list-item-gap, 12px);

}
.item .titles {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1, 4px);
    max-width: 100%;
}
.item .description  {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.item .subtitle {
    display: flex;
    align-items: center;
    gap: var(--spacing-list-item-padding, 12px);
}
.modal-main .title {
    color: var(--text-body, #030F13);
}
.modal-main .subtitle {
    color: var(--text-muted, #969B9C);
}
.modal-main .percentage {
    color: var(--text-muted, #969B9C);
}

.header .subtitle {
    color: var(--text-muted, #969B9C);
}


.nav-vertical {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-tab-grid-gap, 4px);
    align-self: stretch;
}
.nav-vertical .nav-item {
    padding: var(--spacing-tab-padding-sm, 12px);
    justify-content: center;
    flex: 1 0 0;
    border-radius: var(--radius-tab-vertical, 16px);
    flex-direction: column;
}


.modal-area, .modal-detail, .tab-area {
    display: none;
}
.modal-area.active, .modal-detail.active, .tab-area.active {
    display: flex;
}

.modal-area.active.card-container {
    display: grid;
}
.modal-subtitle {
    color: var(--text-muted, #969B9C);
}


.modal-main .card.control {
    border: 1px solid var(--stroke-grey, #F0F0F0);
}


#areaModal .modal-body,  #areaModal .modal-main {
    overflow: hidden;
}
#areaModal .modal-area {
    overflow: auto;
}

#area-light .card.control {
    height: 130px;
}


.state-remote-offline .card.area .btn {
    background: var(--button-secondary-bg-disabled, rgba(3, 15, 19, 0.15));
    color: var(--button-secondary-label-disabled, rgba(3, 15, 19, 0.20));
}