:root {
    --switchColumn: 3;
    --switchRow: 8;
    --nozoom: 100%
}

/*QUICK VIEW SELECTOR*/
.quickViewSelector_L {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-12%,-36%);
}

.quickViewSelector_R {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-93%,-36%);
}

/*TASTO PER CONFERMARE GLI ALLARMI*/
.alarm_check {
}

@media (max-width: 1100px) {

    .alarm_check {
        font-size: 3rem;
    }
}

/*ALARM WIDGET*/
.alarmWidget-panel-menu {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 14% 71% 15%;
    background-color: #fafafa;
    padding: 1.2rem;
    border: 0.1rem solid #e2e2e2;
}

.alarmWidget-panel-menu-icon {
    width: fit-content;
    grid-area: 1/3;
    margin-left: auto;
    margin-right: auto;
}

.alarmWidget-panel-menu-title {
    grid-area: 1/2;
    font-size: 1.8rem;
    font-weight: 600 !important;
    text-align: center;
}

@media (max-width: 1100px) {
    .alarmWidget-panel-menu-title {
        text-transform: uppercase;
        margin-left: auto;
        margin-right: auto;
        font-size: 3rem;
    }

    .alarmWidget-panel-menu-btn {
        margin-left: auto;
        margin-right: auto;
    }
}

.alarmWidget-panel-menu-btn {
    grid-area: 1/1;
}

.alarmWidget-panel-body {
    height: 100%;
    max-height: 51rem;
    overflow-y: auto;
    padding: initial;
    display: grid;
}

.alarmWidget-panel-body-timeline-item {
    width: auto;
    display: grid;
    position: relative;
    padding: 1rem;
    grid-auto-flow: column;
    grid-template-columns: 15% 70% 15%;
}

.alarmWidget-panel-body-timeline-item-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    margin-bottom: auto;
    margin-right: auto;
}

.alarmWidget-panel-body-timeline-desc {
    padding: 0.5rem;
}

.alarmWidget-panel-body-timeline-desc-message {
    font-size: 1.6rem;
    color: #3498db;
    text-decoration: none;
    background: transparent;
}

.alarmWidget-panel-body-timeline-desc-info {
    width: 100%;
    font-size: 1.2rem;
    color: black;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .alarmWidget-panel-body-timeline-desc-info {
        display: inline-block;
        font-size: 1.6rem;
        width: fit-content;
        margin-left: 2rem;
    }

    .alarmWidget-panel-body-timeline-desc-message {
        font-size: 2rem;
        display: inline-block;
    }

    .alarmWidget-panel-body-timeline-item-date {
        margin-left: auto;
        margin-right: auto;
    }
}

.alarmWidget-panel-body-timeline-item-date {
    font-size: 1.5rem;
    margin-right: 0rem
}

.alarmWidget-panel-body-timeline-item-date-btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 1rem;
}

.alarm_info-col {
    display: grid;
    grid-template-columns: 40% 1fr;
}

/*SWITCHBOARD WIDGET*/

.switchWidget_header {
    display: grid;
    font-size: 3rem;
    grid-auto-flow: column;
    grid-template-columns: 3% 97%;
    padding: 1.2rem;
}

.switchWidget_header_icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    font-size: 1.6rem;
}

.switchWidget_header_title {
    grid-area: 1/2;
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600 !important;
    margin-right: auto;
    margin-left: auto;
}

.switchWidget_body {
    min-height: 12rem;
    padding: initial;
    display: grid;
    grid-template-columns: 50% 50%;
    border: .1rem solid #e2e2e2;
    overflow-y: scroll;
    height: 42.5rem;
    background-color: white;
}

.switchWidget_body_item {
    width: auto;
    display: grid;
    position: relative;
    padding: 1rem;
    grid-auto-flow: column;
    grid-template-columns: 15% 70% 15%;
    min-width: max-content;
}

.switchWidget_body_item_border {
    border-right: 0.1rem solid;
}

/*.switchWidget_body_item:nth-child(n+17) {
    border:none;
}*/

.switchWidget_body_item_icon {
    width: 2rem;
    height: 2rem;
    border-radius: 1.5rem;
    margin: auto;
}

.switchWidget_body_item_desc {
    display: grid;
    color: black;
    padding-left: 0.5rem;
    padding-right: .5rem;
    font-size: 1.3rem;
}

.switchWidget_body_item_square {
    height: 1rem;
    width: 1rem;
    float: left;
    border: solid 0.1rem black;
}


/*ADD VIEW*/
.viewGroupWidget {
    width: 100%;
    height: 95%;
    position: relative;
}

.viewGroupWidget_btn {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 5rem;
    width: 5rem;
    font-size: 3.5rem;
    border-radius: 100%;
}

.viewGroupWidget_list {
    display: grid;
    grid-template-rows: 3% 91% 6%;
    padding: 1REM;
    overflow-y: auto;
    height: inherit;
    width: 100%;
}

.viewGroupWidget_list_header {
    display: grid;
    width: 100%;
    font-size: 2rem;
    color: black;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.viewGroupWidget_list_element {
    position: relative;
    height: auto;
    padding: 1rem;
    display: grid;
    overflow-y: auto;
}

.viewGroupWidget_list_element_title {
    display: grid;
    grid-template-columns: 4% 46% 38% 6% 6%;
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
    align-items: center;
}

.viewGroupWidget_list_footer {
    display: grid;
    height: auto;
    padding: 1rem;
    width: auto;
}

.viewGroupWidget_list_element_btn_add {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(90deg);
    transition: 0.5s;
    height: 1.8rem;
    width: 1.4rem;
}

.viewGroupWidget_list_element_btn_remove {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(180deg);
    transition: 0.5s;
    width: 1.4rem;
    height: 1.8rem;
}

/*VIEWLIST*/

.preferito {
    border-color: yellow;
    color: yellow;
}

.default_label {
    margin: 0 auto;
    color: whitesmoke;
    text-align: center;
    background-color: rgba(27,27,27,0.5);
    z-index: 2;
    border-top-right-radius: 6%;
    border-bottom-right-radius: 6%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.no_zoom {
    zoom: var(--nozoom)
}

.default_button {
    margin: 0 auto;
    color: whitesmoke;
    text-align: center;
    background-color: rgba(27,27,27,0.5);
    z-index: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    max-height: 2rem;
}

    .default_button:hover {
        background-color: rgba(30, 142, 251, 0.51)
    }

.conf_panel_button[ng-disabled="true"] {
    pointer-events: none; /* blocca i click */
    opacity: 0.5; /* aspetto disabilitato */
    cursor: not-allowed; /* cursore "vietato" */
}

.white_label {
    margin: 0 auto;
    color: whitesmoke;
    text-align: center;
    background-color: rgba(223,223,223,0.5);
    z-index: 2;
    border-top-right-radius: 6%;
    border-bottom-right-radius: 6%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.compumat_label_green {
    background: black;
    width: 99%;
    height: 100%;
    margin: 0 auto;
    color: green;
    text-align: center;
    font-size: 3rem;
    border-style: groove;
}

.compumat_label {
    background: #ebebebf0;
    width: 99%;
    height: 100%;
    margin: 0 auto;
    color: black;
    text-align: center;
    font-size: 3rem;
    border-style: groove;
}


/* Common styles */
.belt-popup, .hopper-popup {
    background: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.hopper-info.industrial-theme {
    width: 380px;
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: 15px;
}

.hopper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

    .hopper-header h3 {
        margin: 0;
        color: #f0f0f0;
    }

.status-indicator {
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
}

.status-critical {
    background-color: #ff4d4d;
    color: white;
}

.status-warning {
    background-color: #ffa500;
    color: black;
}

.status-normal {
    background-color: #4caf50;
    color: white;
}

.metrics-section {
    flex: 1;
    margin-right: 15px;
}

.metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

    .metric label {
        color: #888;
        display: flex;
        align-items: center;
    }

.alarm-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.alarm-chip {
    border: 1px solid #dc2626;
    color: #dc2626;
    background: #fff5f5;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600
}

.ok-chip {
    border: 1px solid #16a34a;
    color: #16a34a;
    background: #f4fff6;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600
}

.belt-preview {
    flex: 1;
}

.belt-visualization {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    height: 200px;
}

.belt-diagram {
    position: relative;
    height: 100%;
}

.signal-point {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #555;
    border: 2px solid #444;
    z-index: 10;
}

    .signal-point.motor {
        top: 20px;
        left: 20px;
    }

    .signal-point.sensor1 {
        top: 20px;
        right: 20px;
    }

    .signal-point.sensor2 {
        bottom: 20px;
        right: 20px;
    }

    .signal-point::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: #333;
        border-radius: 50%;
    }

    .signal-point.active::before {
        background-color: #4caf50;
    }

    .signal-point.triggered::before {
        background-color: #ff9800;
    }


.belt-line {
    position: absolute;
    width: calc(100% - 40px);
    height: 10px;
    background-color: #444;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

    .belt-line.moving {
        animation: belt-movement 1s linear infinite;
    }

@keyframes belt-movement {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 30px 0;
    }
}

.belt-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.editable-value {
    cursor: pointer;
    transition: color 0.3s;
}

    .editable-value:hover {
        color: #4caf50;
    }

.level-indicator {
    display: flex;
    align-items: center;
}

.level-bar-container {
    width: 50px;
    height: 100px;
    background-color: #333;
    border-radius: 25px;
    margin-right: 10px;
    overflow: hidden;
    position: relative; /* Keep this for proper positioning */
}

.level-bar {
    width: 100%;
    height: 0; /* Start at 0 height */
    bottom: 0;
    left: 0;
    position: absolute;
    transition: height 0.5s ease;
}

.capacity-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.capacity-percentage {
    color: #888;
    font-size: 0.8em;
}

.additional-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #333;
}

    .additional-metrics .metric {
        flex-direction: column;
        align-items: flex-start;
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.hopper-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #333;
}

    .hopper-actions .btn {
        flex: 1;
        margin: 0 5px;
        padding: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

.btn-refill {
    background-color: #4caf50;
    color: white;
}

.btn-start-stop {
    color: white;
}

.btn-start {
    background-color: #4caf50;
}

.btn-stop {
    background-color: #ff4d4d;
}

.btn-details {
    background-color: #2196f3;
    color: white;
}

.belt-info.industrial-theme {
    width: 400px;
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: 15px;
}

.belt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.status-indicator {
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
}

.status-running {
    background-color: #4caf50;
    color: white;
}

.status-stopped {
    background-color: #ff4d4d;
    color: white;
}

.belt-content {
    display: flex;
}

/* Placeholder icons - replace with actual icon font or SVG */
.icon-rotation::before,
.icon-weight::before,
.icon-power::before,
.icon-power-toggle::before,
.icon-details::before,
.icon-alert::before,
.icon-material::before,
.icon-level::before,
.icon-capacity::before,
.icon-edit::before,
.icon-refill::before,
.icon-report::before {
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-style: normal;
}

.icon-rotation::before {
    content: '🔄' !important;
}

.icon-weight::before {
    content: '⚖️' !important;
}

.icon-power::before {
    content: '⚡' !important;
}

.icon-power-toggle::before {
    content: '🔌' !important;
}

.icon-details::before {
    content: '📋' !important;
}

.icon-alert::before {
    content: '⚠️' !important;
}

.icon-material::before {
    content: '🧱' !important;
}

.icon-level::before {
    content: '📊' !important;
}

.icon-capacity::before {
    content: '⚖️' !important;
}

.icon-edit::before {
    content: '✏️' !important;
    margin-left: 5px;
}

.icon-refill::before {
    content: '🔄' !important;
}

.icon-report::before {
    content: '📋' !important;
}