.userMenu {
    position: absolute;
    width: min-content;
    display: grid;
    grid-template-rows: repeat(2, min-content);
    background: var(--main-bg-color);
    border: 1px solid var(--main-border-color);
    z-index: 1000;
}

    .userMenu.show {
        opacity: 1;
        transform: translateY(0);
    }

.userMenu .userMenuItem {
    display                 : grid;
    grid-template-columns   : 24px 1fr;
    grid-column-gap         : 1rem;
    cursor                  : pointer;
    padding                 : 0.5rem;
}
    .userMenu .userMenuItem:hover {
    background-color        : var(--main-accent-color);
    color                   : var(--main-accent-not-color);
    }

#dropzone-external {
    width: 100px;
    height: 100px;
    background-color: rgba(183, 183, 183, 0.1);
    border-width: 2px;
    border-style: dashed;
    padding: 10px;
    border-radius: 50%;
}

    #dropzone-external > * {
        pointer-events: none;
    }

    #dropzone-external.dropzone-active {
        border-style: solid;
    }

.widget-container > span {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

#dropzone-image {
    max-width: 100%;
    max-height: 100%;
}

#dropzone-text > span {
    font-weight: 100;
    opacity: 0.5;
}

#upload-progress {
    display: flex;
    margin-top: 10px;
}

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#profile-picture-input {
    display: none;
}

#profile-picture-circle {
    width: 75%;
    height: 75%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#profile-picture {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.userMenuItems {
    width: 70%;
    margin-left: 15%;
    border-radius: 20px;
    height: 30px;
    background-color: transparent;
    margin-top: 20px;
    transition: background-color 0.1s;
    border-width: 1px;
}

    .userMenuItems:hover {
        background-color: #ff5722;
        color: white;
        border-width: 1px;
    }


.userMenu .userMenuItem .icon {
    display: grid;
    place-items: center;
}

.userMenu .userMenuItem .text {
    display                 : grid;
    place-items             : center start;
    white-space             : nowrap;
}


.system-designer {
    width                   : 100%;
    height                  : 100%;
    display                 : grid;
    grid-template-columns   : min-content 1fr;
    gap                     : 1rem;

    & .system-library {
        transition          : all 0.5s;  -webkit-transition: all 0.5s;  -o-transition: all 0.5s;  -moz-transition: all 0.5s;
        width               : 350px;
        display             : grid;
        grid-template-rows  : min-content 1fr;

        & .system-library-toolbar {

            & span {
                float       : right;
                transition  : all 0.5s;  -webkit-transition: all 0.5s;  -o-transition: all 0.5s;  -moz-transition: all 0.5s;
                color       : var(--main-accent-color);
                cursor      : pointer;
                transform   : rotate(0deg);
                font-weight : 500;
                font-size   : 32px;
            }
        }

        & .system-library-grid {
            transition  : all 0.5s;  -webkit-transition: all 0.5s;  -o-transition: all 0.5s;  -moz-transition: all 0.5s;
            opacity     : 1;
        }

    }
}

.system-designer[collapsed] {
    & .system-library {
        transition          : all 0.5s;  -webkit-transition: all 0.5s;  -o-transition: all 0.5s;  -moz-transition: all 0.5s;
        width               : 32px;

        & .system-library-toolbar {
            & span {
                transform   : rotate(180deg);
            }
        }

        & .system-library-grid {
            transition  : all 0.5s;  -webkit-transition: all 0.5s;  -o-transition: all 0.5s;  -moz-transition: all 0.5s;
            opacity     : 0;
        }

    }
}

.system-designer-errors {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.datagrid-header {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    gap: 0 !important;
    padding: 8px 16px !important;
}

.datagrid-header .header-item {
    padding: 8px !important;
}

.systems-body-cell-component {
        & .dx-datagrid .dx-row > td, .dx-datagrid .dx-row > tr > td {
            padding: 0px !important;
            vertical-align: top !important;
        }
        & .dx-datagrid .dx-row > td:first-child {
            width: 50% !important;
            padding: 8px 16px !important;
        }
        & .dx-datagrid .dx-row > td:last-child {
            width: 50% !important;
        }
        /* DevExtreme grid header cell'leri için eşit genişlik */
        & .dx-datagrid-headers .dx-header-row > td:first-child {
            width: 50% !important;
        }
        & .dx-datagrid-headers .dx-header-row > td:last-child {
            width: 50% !important;
        }
        & .system-diagnoses-section {
            padding: 8px 16px !important;
            display: flex !important;
            flex-direction: row !important;
            gap: 16px !important;
            min-height: 100% !important;
            width: 100% !important;
            align-items: flex-start !important;
        }
        & .system-info-cell-last-diagnose {
            min-height: 80px !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            flex: 1 1 0 !important;
            min-width: 0 !important;
        }
        & .system-info-cell-last-diagnose:empty {
            display: none !important;
        }
        & .system-info-cell-last-diagnose.last-diagnose {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
            min-height: 80px !important;
        }
        & .system-info-cell-last-diagnose.last-diagnose .last-diagnose-column {
            height: auto !important;
            min-height: 80px !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 8px !important;
        }
        & .system-info-cell-last-diagnose.last-diagnose .last-diagnose-cell.last-diagnose-label {
            font-size: 0.875rem !important;
            text-align: center !important;
            color: var(--main-text-color) !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            font-weight: 500 !important;
        }
        & .system-info-cell-last-diagnose.last-diagnose .last-diagnose-cell.last-diagnose-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            fill: var(--main-text-color);
        }
        & .system-info-cell-last-diagnose.last-diagnose .last-diagnose-cell.last-diagnose-level {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            flex-shrink: 0 !important;
        }
        & .system-info-cell-last-diagnose.last-diagnose .last-diagnose-cell.last-diagnose-level svg {
            width: 24px !important;
            height: 24px !important;
        }
        & tbody.dx-row-alt {
            & tr {
                    & td {
                            background-color: var(--row-alt-bg) !important;
                        }
                    }
            }

        & .dx-datagrid-rowsview .dx-row {
            border: none !important;
        }

        & .dx-gridbase-container > .dx-datagrid-rowsview.dx-scrollable {
            border: none !important;
        }
    }

.custom-grid-body {
    & tr:nth-child(even) {
        border-bottom: 1px solid var(--main-border-color);
    }

    & td {
        text-align: center;
    }

}

.system-grid-body svg.pin {
    display:none;
}
.system-grid-body .dx-svg-icon svg {
    fill: var(--main-text-color) !important;
}

.dashboard-grid-body,
.common-alternating-grid {
    & tr {
        border-bottom: 1px solid var(--main-border-color);
    }

    & .dx-datagrid-rowsview {
        border: none;
    }

}

.noselect {
    user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.mapContainer {
    border      : 1px solid var(--main-border-color);
    padding     : 5px;
}

/*
g.icon path {
    fill : var(--system-stroke-color);
}
    */

span.locked
{
    color : var(--danger-color);
}
span.unlocked {
    color: var(--success-color);
}

.grid-system {
}

.grid-system-container {
    position                : relative;
    left                    : 0;
    top                     : 0;
    width                   : 100%;
    height                  : 100%;
}

.grid-system-alarm {
    position                : absolute;
    z-index                 : 101;
    width                   : 30px;
    height                  : 30px;
    top                     : 0;
    left                    : 0;
    background-color        : var(--danger-color);
    color                   : #FFFFFF;
    overflow                : hidden;
    border-radius           : 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
    display                 : grid;
    place-items             : center;

    & span {
        font-weight         : 600;
    }
}

.grid-system-asset {
    position                : absolute;
    overflow                : hidden;
    z-index                 : 100;
}

.system-grid-icon-cell {
    width                   : 100%;
    height                  : 100px;
    overflow                : hidden;
}


.system-grid-info-cell
{
    width                   : 50px;
    display                 : grid;
    grid-template-rows      : min-content 1fr;
}

.system-grid-info-cell span {
    width                   : 50px;
    height                  : 24px;
}

.system-grid-info-cell div.health-score {
    display             : grid;
    place-items         : center;
    height              : 50px;
}

.donut-gauge {
    width               : var(--width);
    height              : calc(var(--height) / 2);
    position            : relative;
    font-size           : var(--font-size);
    font-weight         : var(--font-weight);
    overflow            : hidden;
    color               : var(--fore-color);
    display             : flex;
    align-items         : var(--vert-align);
    justify-content     : center;
    box-sizing          : border-box;
}

.donut-gauge[noalign]
{
    align-items         : baseline;
}

.donut-gauge:after {
    content             : '';
    width               : var(--width);
    height              : var(--height);
    border              : var(--stroke-width) solid;
    border-color        : var(--back-color) var(--back-color) var(--fore-color) var(--fore-color);
    position            : absolute;
    border-radius       : 50%;
    left                : 0;
    top                 : 0;
    box-sizing          : border-box;
    transform           : rotate( calc( 1deg * ( -45 + var(--value) * 1.8 ) ) );
    animation           : gaugeFillAnimation 1s ease-in;
}

@keyframes gaugeFillAnimation{
  0%    { transform: rotate(-45deg);    }
  50%   { transform: rotate(135deg);    }
}

.system-grid-header {
    height                      : 30px;
    display                     : grid;
    grid-template-columns       : 300px 250px 150px 150px 300px;
    place-items                 : center;
    border-bottom               : 1px solid var(--main-border-color);
    background-color            : var(--main-bg-color);
}


svg.pin[flash] {

}

.alarm-icon-max {
    color       : var(--danger-color);
    font-size   : 5rem;
}

.no-alarm-icon-max {
    color       : var(--success-color);
    font-size   : 5rem;

}

.passwordChangeButton {
    position: absolute;
    top: 50%;
    left: 22%;
    transform: translate(-50%, 0%);
    bottom:2px;
    margin-top:2%;
}

.timeZoneChangeButton {
    position: absolute;
    top: 50%;
    left: 34%;
    transform: translate(-50%, 0%);
    bottom: 2px;
    margin-top: 2%;
}

/* Theme switcher */
.theme-switch {
    display             : flex;
    flex                : 0 0 56px; -webkit-flex: 0 0 56px; -ms-flex: 0 0 56px;
    width               : 56px;
    height              : 28px;
    border              : 1px solid;
    box-sizing          : border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
    border-radius       : 50px;
    padding             : 1px;
    overflow            : hidden;
    cursor              : pointer;
    border-color        : var(--theme-switch-border-color);
}
.theme-switch-wrapper {
    display         : inline-flex;
    align-items     : center; -webkit-align-items: center;
    width           : 52px;
    height          : 24px;
}
.theme-toogle {
    flex            : 0 0 20px; -webkit-flex: 0 0 20px; -ms-flex: 0 0 20px;
    padding         : 2px;
    display         : flex;
    justify-content : center; -webkit-justify-content: center;
    align-items     : center; -webkit-align-items: center;
    margin-right    : 4px;
}
.theme-toogle svg {
    width           : 20px;
    height          : 20px;
    border-radius   : 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}
.theme-toogle.light
{
    transition      : 0.4s;
}
.theme-toogle.dark
{
    width           : 0;
}
.theme-input
{
    width               : 20px;
    height              : 20px;
    border-radius       : 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
    background-color    : var(--main-accent-color);
}
.theme-switch[dark] .theme-toogle.light
{
    margin-right        : -24px
}


.system-icon-displayer {

    display             : grid;
    grid-template-rows  : min-content min-content;

    & .system-icon-displayer-cell {
        display         : grid;
        place-items     : center start;
    }

    & .system-icon-displayer-cell:first-of-type {
        height          : 100px;
        padding-bottom  : 10px;
    }

    & .system-icon-displayer-cell:not(:first-of-type) {
        place-items     : center;
        height          : 32px;
        border-top      : 1px solid var(--main-border-color);
        font-size       : 0.8rem;
        font-weight     : 400;
    }

}

.plotly-point-selector {
    fill            : none;
    stroke-width    : 4px;
    stroke          : var(--main-accent-color);
}

span.dx-checkbox-text {
    white-space: nowrap !important;
}

/*
g.annotation text.annotation-text
{
    font-family: 'Roboto', sans-serif !important;
    font-weight     : 600 !important;
    font-size       : 1rem !important;
    color           : var(--main-accent-color) !important;
    fill            : var(--main-accent-color) !important;
    fill-opacity    : 1 !important;
}
*/

.deleteButton {
    margin: 15px;
    width: 3%;
    height: 5%;
    font-size: 23px;
}


.detailed-alarm-chart-container {
    display                 : flex !important;
    gap                     : 1rem;

    & .detailed-alarm-chart {
        height  : 150px;
    }
}

.standard-display-no-alarm {
    display             : flex !important;
    flex-direction      : column !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important;
    justify-content     : center !important; -webkit-justify-content: center !important;
    align-items         : center !important; -webkit-align-items: center !important;

    & .standard-display-no-alarm-cell:not(:first-of-type) {
        font-size       : 0.7rem;
        font-family: 'Roboto', sans-serif;
        text-align      : center;
    }

    & .standard-display-no-alarm-cell:first-of-type {
        font-size   : 4rem;
        color       : var(--success-color);
    }
}

.detailed-diagnose-chart-container {
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
    gap                     : 1rem;

    & .detailed-diagnose-chart {
        height  : 150px;
    }
}


.standard-display-no-diagnose {
    display             : flex !important;
    flex-direction      : column !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important;
    justify-content     : center !important; -webkit-justify-content: center !important;
    align-items         : center !important; -webkit-align-items: center !important;

    & .standard-display-no-diagnose-cell:not(:first-of-type) {
        font-size       : 10px;
        font-family: 'Roboto', sans-serif;
    }

    & .standard-display-no-diagnose-cell:first-of-type {
        font-size   : 4rem;
        color       : var(--success-color);
    }
}

    .info-popup-container {
        width : 100%;
        height : 100%;
        font-family: 'Roboto', sans-serif;

        & .info-popup-body-container {
            display         : flex;
            flex-direction  : column;

            & .info-popup-body-container-row:nth-child(2) {

                & .info-popup-diagnosis-name {
                    margin-top: 1rem;
                }
            }

            & .info-popup-body-container-row{
                display         : flex;
                flex-direction  : column;
                margin-bottom   : 1rem;

                & .diagnosis-header {
                    display         : flex;
                    flex-direction  : row;
                    justify-content : space-between;
                    align-items     : center;

                    & .diagnosis-name {
                        font-size   : 1.2rem;
                        font-weight : bold;
                        color       : var(--main-accent-color);
                    }

                    & .diagnosis-level-container {
                        display     : flex;
                        gap         : 0.5rem;
                        position    : relative;
                        top         : 70px;

                        & .signal-group {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                            justify-content: center;
                            align-items: center;

                            & .level-name {
                                font-size : 0.8rem;
                            }
                            & .signal {
                                width: 50px;
                                height: 50px;
                            }
                        }

                    }
                }

                & .summary-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    gap:0.5rem;

                    & .diagnosis-line {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        gap: 1rem;

                        & .text {
                            font-size: 0.8rem;
                            width: 120px;
                        }

                        & .value {
                            font-size: 0.8rem;
                            max-width: 600px;
                        }

                        & .value[date] {
                            font-weight: bold;
                        }

                        & .value[date][rawdata] {

                            & .value.clickable {
                                cursor: pointer;
                            }
                            & div {
                                display: inline;
                                border: 1px solid var(--main-accent-color);
                                color: var(--main-accent-color);
                                padding: 2px 4px;
                                border-radius: 5px;
                                font-size: 0.8rem;
                                font-weight: normal;
                                margin-left:5px;

                                & span
                                {
                                    font-size: 0.8rem;
                                    vertical-align: middle;
                                }
                            }

                            & div:hover{
                                background-color : rgba(44, 180, 255, .08);
                            }
                        }
                    }
                }

                & .recommendation-title {
                    font-size: 1.2rem;
                    font-weight: bold;
                    margin-top: 0.5rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 0.2rem;
                    color: var(--main-accent-color);
                }

                & .diagnosis-recommendation {
                    display: flex;
                    flex-direction: column;
                    margin-top: 0.5rem;


                    & .recommendation-text {
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.5s ease-out;
                    }

                    & .recommendation-text[open] {
                        max-height: 500px;
                        transition: max-height 0.5s ease-in;
                        word-wrap: break-word;
                        text-wrap: wrap;
                    }

                }

                & .info-popup-diagnosis-name {
                    font-size : 1.2rem;
                    font-weight : bold;
                }
                & .property-field{
                    text-align  : justify;

                    & .property-label,
                    & label {
                        font-size   : 0.95rem;
                        font-weight : 600;
                        margin-bottom : 0.35rem;
                        color       : var(--main-text-color);
                        display     : block;
                    }

                    p {
                        font-size   : 0.925rem;
                        font-weight : normal;
                        font-family : 'Roboto', sans-serif;
                        line-height : 1.5;
                        margin      : 0 0 0.5rem 0;
                    }

                    div:first-of-type{
                        font-size   : 0.925rem;
                        font-weight : normal;
                        font-family : 'Roboto', sans-serif;
                    }

                    div:first-of-type:not(:only-of-type){
                        font-size   : 0.95rem;
                        font-weight : 600;
                        margin-bottom : 0.25rem;
                    }

                    div:not(:first-of-type){
                        font-size   : 0.925rem;
                        font-weight : normal;
                        font-family : 'Roboto', sans-serif;
                        line-height : 1.5;
                    }
                }
            }
        }
    }

    .system-info-popup-container {
        width   : 100%;
        height  : 100%;
        font-family: 'Roboto', sans-serif;

        & .system-info-popup-body-container {
            display         : flex;
            flex-direction  : column;

            & .system-info-popup-body-container-row:nth-child(2) {

                & .system-info-popup-system-name {
                    margin-top: 1rem;
                }
            }

            & .system-info-popup-body-container-row{
                display         : flex;
                flex-direction  : column;
                margin-bottom   : 1rem;

                & .system-header {
                    display         : flex;
                    flex-direction  : row;
                    margin-bottom   : 1rem;
                    justify-content : space-between;
                    align-items     : center;

                    & .system-name {
                        font-size   : 1.2rem;
                        font-weight : bold;
                        color       : var(--main-accent-color);
                    }

                }

                & .system-summary-container {
                    display                 : grid;
                    grid-template-columns   : repeat(auto-fill, minmax(340px, 1fr));
                    justify-content         : flex-start;
                    align-items             : start;
                    gap                     :0.5rem;

                    & .device {
                        display         : grid;
                        justify-content : space-between;
                        gap             : 0.5rem;
                        padding         : 1rem;
                        border-bottom   : 1px solid;
                        width           : 100%;

                        & .device-order {
                            justify-self    : start;
                            min-width       : 1.5rem;
                            padding         : 0.1rem 0.4rem;
                            border-radius   : 999px;
                            background      : var(--main-accent-color);
                            color           : #fff;
                            font-size       : 0.75rem;
                            font-weight     : 600;
                            text-align      : center;
                        }

                        & .device-line {
                            display         : flex;
                            flex-direction  : row;
                            justify-content : space-between;
                            gap             : 1rem;
                            width           : 100%;

                            & .text {
                                font-size   : 0.8rem;
                                width       : 200px;
                            }

                            & .value {
                                font-size   : 0.8rem;
                                text-align  : center;
                            }

                            & .value[date] {
                                font-weight : bold;
                            }

                        }
                    }

                }

                & .system-info-note-title {
                    font-size       : 1.2rem;
                    font-weight     : bold;
                    margin-top      : 1rem;
                    display         : flex;
                    margin-bottom   : 1rem;
                    align-items     : center;
                    gap             : 0.2rem;
                    color           : var(--main-accent-color);
                }

                & .system-info-note {
                    display         : flex;
                    flex-direction  : column;
                    margin-top      : 0.5rem;


                    & .system-ino-note-text {
                        max-height  : 500px;
                        transition  : max-height 0.5s ease-in;
                        word-wrap   : break-word;
                        text-wrap   : wrap;
                    }

                }

                & .system-info-popup-system-name {
                    font-size   : 1.2rem;
                    font-weight : bold;
                }
                & .property-field{
                    text-align  : justify;

                    & .property-label,
                    & label {
                        font-size   : 0.95rem;
                        font-weight : 600;
                        margin-bottom : 0.35rem;
                        color       : var(--main-text-color);
                        display     : block;
                    }

                    p {
                        font-size   : 0.925rem;
                        font-weight : normal;
                        font-family : 'Roboto', sans-serif;
                        line-height : 1.5;
                        margin      : 0 0 0.5rem 0;
                    }

                    div:first-of-type{
                        font-size   : 0.925rem;
                        font-weight : normal;
                        font-family : 'Roboto', sans-serif;
                    }

                    div:first-of-type:not(:only-of-type){
                        font-size   : 0.95rem;
                        font-weight : 600;
                        margin-bottom : 0.25rem;
                    }

                    div:not(:first-of-type){
                        font-size   : 0.925rem;
                        font-weight : normal;
                        font-family : 'Roboto', sans-serif;
                        line-height : 1.5;
                    }
                }

                &.system-info-overview {
                    align-items     : center;
                    text-align      : center;
                    gap             : 0.5rem;

                    & .system-info-symbol svg {
                        max-width   : 100%;
                        height      : auto;
                    }
                }

                & .asset-card-container {
                    display                 : grid;
                    grid-template-columns   : repeat(auto-fill, minmax(260px, 1fr));
                    gap                     : 1rem;
                    align-items             : start;
                }

                & .asset-card {
                    border          : 1px solid var(--main-border-color, #e0e0e0);
                    border-radius   : 4px;
                    padding         : 0.75rem;

                    & .asset-card-title {
                        font-size       : 0.95rem;
                        font-weight     : 600;
                        margin-bottom   : 0.5rem;
                    }

                    & .asset-property-group {

                        & > summary {
                            font-size   : 0.85rem;
                            font-weight : 600;
                            cursor      : pointer;
                            padding     : 0.25rem 0;
                            color       : var(--main-accent-color);
                        }

                        & .asset-property {
                            display         : flex;
                            flex-direction  : row;
                            justify-content : space-between;
                            gap             : 1rem;
                            padding         : 0.2rem 0;

                            & .text {
                                font-size   : 0.8rem;
                            }

                            & .value {
                                font-size   : 0.8rem;
                                font-weight : 600;
                                text-align  : right;
                                word-break  : break-word;
                            }
                        }
                    }
                }

                & .bearing-container {
                    display         : flex;
                    flex-direction  : column;
                    gap             : 1rem;

                    & .bearing-group-title {
                        font-size       : 0.95rem;
                        font-weight     : 600;
                        margin-bottom   : 0.5rem;
                    }

                    & .bearing-list {
                        display                 : grid;
                        grid-template-columns   : repeat(auto-fill, minmax(260px, 1fr));
                        gap                     : 0.75rem;
                    }

                    & .bearing {
                        border          : 1px solid var(--main-border-color, #e0e0e0);
                        border-radius   : 4px;
                        padding         : 0.75rem;

                        & .bearing-name {
                            font-size       : 0.85rem;
                            font-weight     : 600;
                            color           : var(--main-accent-color);
                            margin-bottom   : 0.35rem;
                        }

                        & .bearing-line {
                            display         : flex;
                            flex-direction  : row;
                            justify-content : space-between;
                            gap             : 1rem;

                            & .text,
                            & .value {
                                font-size   : 0.8rem;
                            }

                            & .value {
                                font-weight : 600;
                                text-align  : right;
                                word-break  : break-word;
                            }
                        }

                        & .bearing-frequencies {
                            display                 : grid;
                            grid-template-columns   : repeat(2, 1fr);
                            gap                     : 0.35rem 1rem;
                            margin-top              : 0.5rem;

                            & .bearing-frequency {
                                display         : flex;
                                flex-direction  : column;

                                & .text {
                                    font-size   : 0.75rem;
                                }

                                & .value {
                                    font-size   : 0.8rem;
                                    font-weight : 600;
                                }
                            }
                        }
                    }
                }

                & .device-panels {
                    display         : flex;
                    flex-direction  : column;
                    gap             : 0.25rem;
                    width           : 100%;
                    margin-top      : 0.5rem;
                    border-top      : 1px solid var(--main-border-color, #e0e0e0);
                    padding-top     : 0.5rem;
                }

                & .device-details {
                    width       : 100%;

                    & > summary {
                        font-size   : 0.8rem;
                        font-weight : 600;
                        cursor      : pointer;
                        padding     : 0.25rem 0;
                        color       : var(--main-accent-color);
                    }
                }
            }
        }
    }

    .timeline-cell {
    width                   : 100%;
    min-height              : 180px;
    max-height              : 400px;
    height                  : auto;
    margin                  : 20px 0;

    & .timeline-cell-wrapper {

        & .timeline-cell-date {
			position        : absolute;
            left            : 0;
			top 		    : 0;
			width 			: 100px;
			height 			: 100%;
			z-index			: 100;
            display         : grid;
            place-items     : center end;
            word-wrap       : break-word;
            color           : var(--timeline-item-date-color);
            text-shadow     : 1px 1px 2px var(--timeline-line-shadow-color);
            font-size       : 1rem;
            text-align      : center;
        }

        & .timeline-cell-connector {
			position        	: absolute;
            left            	: 107px;
			top 		    	: -20%;
			width 				: 2px;
			height 				: 200%;
			background-color 	: var(--main-border-color);
			z-index				: 100;
        }

		& .timeline-cell-dot {
			position        	: absolute;
            left            	: 100px;
			top 		    	: calc(50% - 8px);
			width 				: 16px;
			height 				: 16px;
			border				: 2px solid var(--main-border-color);
			background-color 	: #FFFFFF;
			z-index				: 101;
			border-radius 		: 8px;
        }

        & .timeline-cell-right-connector {
			position        	: absolute;
            left            	: 116px;
			top 		    	: 50%;
			width 				: 45px;
			height 				: 2px;
			background-color 	: var(--main-border-color);
			z-index				: 102;
        }

        & .timeline-cell-icon {
			position        	: absolute;
            left            	: 160px;
			top 		    	: calc(50% - 20px);
			width 				: 40px;
			height 				: 40px;
			border              : 2px solid var(--main-border-color);
            border-radius       : 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
			z-index				: 102;
            background-color    : var(--main-bg-color);
            display             : grid;
            place-items         : center;
        }

        .dark & .timeline-cell-body{
            background-color    : var(--row-alt-bg);
        }

        & .time-line-cell-body-info {
            position        	: absolute;
            left            	: 136px;
			top 		    	: calc(50% - 80px);
			width 				: calc(100% - 181px);
			height 				: calc(100% - 20px);
			z-index				: 100;
            background-color    : red;
        }

        & .timeline-cell-body {
            float               : right;
            margin-right        : 30px;
            margin-bottom       : 3px;
			width 				: calc(100% - 170px);
			z-index				: 100;
            background-color    : rgba(245, 245, 245, 0.6);

            & .time-line-cell-body-wrapper {
                margin-left     : 65px;
                width           : calc(100% - 65px);
                height          : 100%;
                padding         : 1rem;


                & div[info] {

                     & .infoCloseButton{
                        position    : absolute;
                        right       : 0;
                        top         : 0;
                        cursor      : pointer;
                     }
                }

                & .time-line-cell-body-container {
                    width               : 100%;
                    height              : auto;
                    overflow            : hidden;
                    display             : grid;
                    grid-template-rows  : min-content 1fr;

                    & .time-line-cell-body-container-header {
                        display         : flex;
                        justify-content : space-between;
                        align-items     : center;
                        font-size       : 1rem;
                        height          : 26px;

                        div:first-of-type {
                            color           : var(--timeline-item-date-color);
                            text-shadow     : 1px 1px 2px var(--timeline-line-shadow-color);
                        }

                        & .diagnosis-section {
                            display         : flex;
                            justify-content : flex-end;
                            gap             : 1rem;
                            height          : 100%;

                            div[signal] {
                                width   : 20px;
                                height  : 30px;
                            }

                            & .diagnosis-icon *
                            {
                                width   : 26px !important;
                                height  : 26px !important;
                                fill    : var(--main-text-color);
                            }
                        }
                    }

                    & .time-line-cell-body-content{
                        display             : flex;
                        flex-direction      : column;
                        width               : 100%;
                        height              : 100%;
                        gap                 : 0.5rem;
                        padding             : 0.8rem 0;

                        & .propertyField{
                            display                 : grid;
                            grid-template-columns   : 0.5fr 1fr;

                            div:first-of-type {
                                font-size           : 0.8rem;
                            }
                            div:not(:first-of-type){
                                font-size           : 0.8rem;
                                font-family: 'Roboto', sans-serif;
                                text-align          : justify;
                            }
                        }

                        & .passive-section {
                            display                 : grid;
                            padding-top             : 1rem;
                            grid-template-columns   : 0.5fr 1fr;

                            & .passive-info-column {
                                display             : flex;
                                flex-direction      : column;
                                gap                 : 1rem;

                                & .passive-info-row {
                                    display         : flex;
                                    gap             : 1rem;
                                }
                            }

                        }
                    }

                    & .time-line-cell-body-container-footer {
                        display             : flex;
                        justify-content     : space-between; -webkit-justify-content: space-between;
                        border-radius       : 16px;

                        & .time-line-cell-button {
                            width           : 32px;
                            height          : 32px;
                            display         : grid;
                            cursor          : pointer;
                        }

                        & .time-line-cell-ack-button {
                            place-items     : center end;
                            margin-right    : 5px;
                            margin-bottom   : 3px;
                        }

                        & .time-line-cell-info-button {
                            place-items     : center start;
                        }
                    }
                }
            }

        }

    }
}



text[data-unformatted="notification_important"] {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.standard-label {
    color       : var(--main-disabled-color);
    font-size   : 12px;
    line-height : 10px;
    height      : 10px;
}
.standard-data {
    display     : grid;
    place-items : end center;
}

.assetComponentCell {
    display         : flex;
    flex-direction  : row; -webkit-flex-direction: row; -ms-flex-direction: row;
    gap             : 0.5rem;

    & .assetComponentCellElement {
        display     : grid;
        place-items : center;
    }

    & .assetComponentCellElement[active] {
        color       : var(--success-color);
    }

    & .assetComponentCellElement:first-of-type {
        cursor      : pointer;

        & .assetComponentCellElementIcon {
            font-size   : 1rem !important;
        }

    }


    & .assetComponentCellElement:not(:first-of-type) {
        order       : 0;
        flex-grow   : 1; -webkit-flex-grow: 1;
        place-items : center start;
    }

}

/* DevExpress 25.1.7: width kaldirildi - her seviye i�in ayri empty-space div'i ekleniyor */
.dx-treelist-icon-container {
    /* width : 20px !important; */
}

svg.symbol {
    fill: var(--svg-symbol-color);
}
svg.point[empty="false"] {
    fill    : var(--svg-point-not-empty-color) !important;
    stroke  : none;
}
svg.point:not([empty]), svg.point[empty="true"] {
    fill    : var(--svg-point-empty-color) !important;
    stroke  : none !important;
}
/*
* {
    -webkit-user-select: none;
    user-select: none;
}
*/
svg.signal {

}

svg.signal, svg.signal:not([level]), svg.signal[level="none"], svg.signal[level="0"] {
    & rect          { stroke: var(--main-disabled-color); fill: none; stroke-width: 1; }
}

svg.confidence, svg.confidence:not([level]), svg.confidence[level="none"], svg.confidence[level="0"] {
    & rect          { stroke: var(--main-disabled-color); fill: none; stroke-width: 1; }
}

svg.signal[level="low"], svg.signal[level="1"] {
    & rect[low]     { fill: #d10b0b !important; stroke: #d10b0b !important; }
}

svg.signal[level="low"], svg.signal[level="2"] {
    & rect[low]     { fill: #d10b0b !important; stroke: #d10b0b !important; }
    & rect[mid]     { fill: #d10b0b !important; stroke: #d10b0b !important; }
}

svg.signal[level="high"], svg.signal[level="3"] {
    & rect          { fill: #d10b0b !important; stroke: #d10b0b !important; }
}

svg.signal, svg.signal:not([level]), svg.signal[level="none"], svg.signal[level="0"] {
    & rect          { stroke: var(--main-disabled-color); fill: none; stroke-width: 1; }
}

svg.confidence[level="low"], svg.confidence[level="1"] {
    & rect[low]     { fill: #8bc34a !important; stroke: #8bc34a !important; }
}

svg.confidence[level="low"], svg.confidence[level="2"] {
    & rect[low]     { fill: #8bc34a !important; stroke: #8bc34a !important; }
    & rect[mid]     { fill: #8bc34a !important; stroke: #8bc34a !important; }
}

svg.confidence[level="high"], svg.confidence[level="3"] {
    & rect          { fill: #8bc34a !important; stroke: #8bc34a !important; }
}


.last-diagnose {
    display                 : flex;
    flex-direction          : column; -webkit-flex-direction: column; -ms-flex-direction: column;
    justify-content         : space-around; -webkit-justify-content: space-around;
    align-items             : center; -webkit-align-items: center;
    min-height              : 100px;

    & .last-diagnose-column {
        display             : grid;
        place-items         : center;
        height              : 143px;

        & .last-diagnose-cell:nth-child(2) {
            font-size           : 0.7rem;
            text-align          : center;
        }

        & .last-diagnose-cell:nth-child(3) {
            margin-top : 1rem;
            width      : 40px;
        }
    }
}

.report-cell-body{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 10px;
}

.report-cell-body .report-cell-body-makeup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.report-cell-body span {
    cursor: pointer;
    color: var(--main-accent-color);
}


.waterfall-window {
    position            : absolute;
    width               : 850px;
    height              : 650px;
    min-height          : 650px;
    min-width           : 850px;
    border              : 1px solid var(--main-border-color);
    z-index             : 1250;
    display             : grid;
    grid-template-rows  : min-content 1fr;
    resize              : both;
    overflow            : hidden;

    & .waterfall-window-header {
        height                  : 40px;
        display                 : grid;
        grid-template-columns   : 1fr min-content;
        padding-left            : 1rem;
        padding-right           : 1rem;
        border-bottom           : 1px solid var(--main-border-color);
        cursor                  : move;

        & .waterfall-window-header-cell {
            display             : grid;
            place-items         : center start;
            cursor              : move;
        }

        & .waterfall-window-header-cell:not(:first-of-type) {
            place-items         : center;
            cursor              : pointer;
        }

    }

    & .waterfall-window-body {
        width                   : 100%;
        padding                 : 0;
        display                 : grid;
        overflow                : hidden;
        grid-template-columns   : min-content 1fr;

        & .waterfall-window-graph-filters {
            width               : 210px;
            display             : grid;
            grid-template-rows  : min-content min-content 1fr;
            border-right        : 1px solid var(--main-border-color);
            gap                 : 1rem;
            padding-bottom      : 1rem;
            overflow-y          : auto;

            & .waterfall-window-graph-type {
                height          : 60px;
                padding-left    : 1rem;
                padding-right   : 1rem;

                & .waterfall-window-graph-type-selector {
                    width   : 100%;
                    height  : 100%;
                }

            }

            & .waterfall-window-graph-axis-type {
                padding-left    : 1rem;
                padding-right   : 1rem;
                display         : grid;
                place-items     : center;

                & .waterfall-window-graph-axis-type-selector {
                    height  : 100%;
                }

            }

            & .waterfall-window-graph-dates {
                border-top          : 1px solid var(--main-border-color);

                & .dx-list-item-before-bag.dx-list-select-checkbox-container {
                    width           : 40px !important;
                    padding-top     : 0px !important;
                }

                & .dx-item-content.dx-list-item-content {
                    padding-left    : 4px !important;
                }

            }

        }

        & .waterfall-window-graph-body {
            width       : 100%;
            height      : 100%;
            display     : grid;
            place-items : center;
        }

    }

}

.orbit-window {
    position            : absolute;
    width               : 850px;
    height              : 650px;
    min-height          : 650px;
    min-width           : 850px;
    border              : 1px solid var(--main-border-color);
    z-index             : 1250;
    display             : grid;
    grid-template-rows  : min-content 1fr;
    resize              : both;
    overflow            : hidden;

    & .orbit-window-header {
        height                  : 40px;
        display                 : grid;
        grid-template-columns   : 1fr min-content;
        padding-left            : 1rem;
        padding-right           : 1rem;
        border-bottom           : 1px solid var(--main-border-color);
        cursor                  : move;

        & .orbit-window-header-cell {
            display             : grid;
            place-items         : center start;
            cursor              : move;
        }

        & .orbit-window-header-cell:not(:first-of-type) {
            place-items         : center;
            cursor              : pointer;
        }

    }

    & .orbit-window-body {
        width                   : 100%;
        padding                 : 0;
        display                 : grid;
        overflow                : hidden;

        & .orbit-window-graph-body {
            width       : 100%;
            height      : 100%;
            display     : grid;
            place-items : center;
        }

    }

}

@keyframes marquee {
  0%,  25% { transform : translateX(0%); left: 0%;      }
  75%,100% { transform: translateX(-100%); left: 100%;  }
}

span.marquee {
    position            : relative;
    font-size           : 1rem;
    display             : inline-block;
    animation           : 3s linear 0s infinite alternate marquee;
}

/* Device information popup (wwwroot/js/DeviceConfiguration/DeviceInfoViewer.js).
   Multi-column rather than a two-column grid of two fixed lists: the fields are grouped into
   sections of unequal length now, and columns let those sections flow instead of leaving a gap
   under every short one. break-inside keeps a section whole. */
.device-info-body {
    width                   : 100%;
    column-count            : 2;
    column-gap              : 32px;

    & .device-info-section {
        break-inside            : avoid;
        display                 : block;
        margin-bottom           : 1.1rem;
    }

    /* Sentence case, not uppercase. The page is served with a hardcoded lang="en", so the browser
       uppercases with English rules and Turkish loses its dotted letters — "Kimlik" came out as
       "KIMLIK", "Son İletişim" as "SON ILETIŞIM". The resx values are already correctly cased, so
       the heading reads them as written and the weight, size and rule under it carry the hierarchy
       instead. */
    & .device-info-section-title {
        margin                  : 0 0 .35rem;
        padding-bottom          : .3rem;
        font-size               : 0.78rem;
        font-weight             : 600;
        color                   : var(--main-text-color-muted);
        border-bottom           : 1px solid var(--list-item-border);
    }

    & .device-info-body-line {
        width                   : 100%;
        display                 : grid;
        grid-template-columns   : minmax(75px, 160px) 1fr;
        gap                     : 8px;
        padding                 : 3px 0;
    }

    & .device-info-body-cell {
        display             : grid;
        place-items         : center start;
        white-space         : nowrap;
        overflow            : hidden;
        text-overflow       : ellipsis;
    }

    & .device-info-body-cell[key] {
        color               : var(--main-disabled-color);
        font-size           : 0.8rem;
    }

    /* A field the device did not report. Dimmed so the values that ARE there carry the eye; still
       drawn, so "empty" stays distinguishable from "not a field on this model". */
    & .device-info-body-cell-empty {
        color               : var(--main-disabled-color);
        opacity             : 0.55;
    }
}

.device-command-body {
    width                   : 100%;
    height                  : 100%;
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
    gap                     : 1rem;

    & .device-common-info-container {
        display         : flex;
        flex-direction  : column; -webkit-flex-direction: column; -ms-flex-direction: column;
        border-right    : 1px solid var(--main-border-color);

        & .device-common-info-line {
            position            : relative;
            height              : 40px;
            width               : 100%;

            & .device-common-info-line-label {
                position    : absolute;
                font-size   : 10px;
                font-weight : 400;
            }

            & .device-common-info-line-data {
                position    : absolute;
                height      : 40px;
                width       : 100%;
                display     : grid;
                place-items : center start;
            }
        }
    }

    & .device-common-command-container {
        display             : flex;
        flex-direction      : column; -webkit-flex-direction: column; -ms-flex-direction: column;
        align-items         : center; -webkit-align-items: center;
        gap                 : 2rem;

        & .device-common-command-selector {
            display                 : grid;
            grid-template-columns   : 1fr min-content;
            gap                     : 1rem;
            width                   : 100%;

            & .device-common-command-selector-combo {
                flex-grow: 1; -webkit-flex-grow: 1;
            }

            & .device-common-command-selector-button {
                width       : 100px;
                margin-top  : 10px;
            }

        }

        & .device-common-command-gauge {
            width   : calc(100% - 40px);
            height  : 30px;
        }
    }

    & .device-common-command-container[state="idle"] {
        & .device-common-command-gauge {
            display : none;
        }
    }

    & .device-common-command-container[state="active"] {
        & .device-common-command-gauge {
            display : initial;
        }
    }

}

.device-configuration-body {
    width                   : 100%;
    height                  : 100%;
    display                 : grid;
    grid-template-columns   : 250px 1fr;
    gap                     : 1rem;

    & .device-common-info {

        & .device-common-commands {
            padding-top     : 20px;

            & .device-common-command-element {

                & .device-common-command-button {
                    height  : 40px;
                    width   : 170px;
                    margin  : 10px 0;
                }

                & .device-common-command-gauge-container  {
                    display : grid;
                    & .device-common-command-gauge  {
                        width   : 150px;
                        height  : 30px;
                    }
                }
            }

            & .device-common-command-element[state="idle"] {
                & .device-common-command-button             { display : flex;   }
                & .device-common-command-gauge-container    { display : none;   }
            }

            & .device-common-command-element[state="active"] {
                & .device-common-command-button             { display : none;   }
                & .device-common-command-gauge-container    { display : grid;   }
            }

        }

        & .device-common-info-container {
            display         : flex;
            flex-direction  : column; -webkit-flex-direction: column; -ms-flex-direction: column;

            & .device-common-info-line {
                position            : relative;
                height              : 40px;
                width               : 100%;

                & .device-common-info-line-label {
                    position    : absolute;
                    font-size   : 10px;
                    font-weight : 400;
                }

                & .device-common-info-line-data {
                    position    : absolute;
                    height      : 40px;
                    width       : 100%;
                    display     : grid;
                    place-items : center start;
                }

            }

        }

    }

    & .device-properties {
    }

    & .device-command-selector {
    }

}

.roleContainer {
    display: flex;
    width   : 100%;
    height  : 100%;

    & .userRoleContainer {
        width: 30%;
    }

    & .actionsContainer {
        width       : 70%;
        border-left : 1px solid var(--main-border-color);
    }
}

.system-selector-grid {
    width: 300px !important;

    & .system-selector {
        width: 300px !important;


        & .system-selector-body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-bottom: 1px solid var(--main-border-color);
            margin-right: 1rem;
        }
    }
}

.device-info-cell[systemAnalyser] {
    border-right    : 1px solid var(--main-border-color);
    display         : flex;
    flex-direction  : column;
    text-align      : center;
}

.device-info-cell[detailedAnalyser]{
    display         : flex;
    flex-direction  : column;
    text-align      : center;
}

.device-info-cell[telemetryWindow] {
    border-left     : 1px solid var(--main-border-color);
    display         : flex;
    flex-direction  : column;
    text-align      : center;
}

.device-info-body-title {
    font-weight     : bold;
    text-align      : center;
    margin-bottom   : 10px;
    margin-top      : 10px;
}

.device-info-cell[systemAnalyser] .device-info-body-cell {
    height  : 140px;
    width   : 250px;
}

.device-info-cell[telemetryWindow] .device-info-body-cell {
    width   : 250px;
}

.telemetry-body[comparing] .device-info-cell[telemetryWindow] .device-info-body-cell {
    max-height : 300px;
    overflow-y : auto;
}

/* Grid related */
.grid-columns {
    display         : grid;
    grid-auto-flow  : column;
}
.grid-columns-gapped {
    display         : grid;
    grid-auto-flow  : column;
    gap             : 1rem;
}
/* Button related */
.dx-button-text {
    text-transform: none !important;
}
.dx-svg-icon svg {
    fill: var(--main-accent-color) !important;
}
.dx-svg-disabled {
    fill: gray;
    opacity: 0.5;
}
/* Toolbar related */
.dx-toolbar-spacer {
    width : 10px;
}

/* Notification Manager Related */
.global-notification-manager {
    position            : absolute;
    overflow            : visible;
    bottom              : 2rem;
    right               : 2rem;
    z-index             : 3000;
    display             : flex;
    flex-direction      : column;
    gap                 : 1rem;
}
.global-notification-element {
    width: 400px;
    border: 1px solid var(--main-border-color);
    /*box-shadow          : 0 3px 20px rgb(0 0 0 / 12%), 0 3px 20px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 3px 20px rgb(0 0 0 / 12%), 0 3px 20px rgb(0 0 0 / 24%); -moz-box-shadow: 0 3px 20px rgb(0 0 0 / 12%), 0 3px 20px rgb(0 0 0 / 24%);*/
    box-shadow: var(--glass-shadow-card);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    /*background-color    : var(--main-bg-color);*/
    background: var(--glass-bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.global-notification-element-container {
    position            : relative;
    width               : 100%;
    height              : 100%;
    background          : transparent !important;
}
.global-notification-close-button {
    position            : absolute;
    width               : 24px;
    height              : 24px;
    background          : var(--glass-bg-card);
    border              : 1px solid var(--main-accent-color);
    border-radius       : 50%;
    right               : 12px;
    top                 : -12px;
    cursor              : pointer;
    z-index             : 1;
    display             : grid;
    place-items         : center;
}
.global-notification-close-button span {
    font-size           : 1rem;
    font-weight         : 700;
    color               : var(--main-accent-color);
}
.global-notification-body-container {
    position            : absolute;
    width               : 100%;
    height              : 100%;
    padding             : 1rem;
}
.global-notification-body {
    width               : 100%;
    height              : 100%;
    overflow            : hidden;
    cursor              : pointer;
}
.global-notification-body[alarm] {
    display             : flex;
    flex-direction      : column;
    gap                 : 0.45rem;
    overflow-y          : visible;
    overflow-x          : hidden;
    font-family         : 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.global-notification-element--alarm-tight {
    height              : auto;
}
.global-notification-element--alarm-tight .global-notification-element-container {
    height              : auto;
}
.global-notification-element--alarm-tight .global-notification-body-container {
    position            : relative;
    height              : auto;
    padding             : 0.75rem 0.85rem 0.8rem;
    box-sizing          : border-box;
}
.global-notification-element--alarm-tight .global-notification-body {
    height              : auto;
    overflow            : visible;
}
.alarm-notification-popup {
    display             : flex;
    flex-direction      : column;
    gap                 : 0.4rem;
    min-width           : 0;
    color               : var(--main-text-color);
}
.alarm-notification-header {
    display             : flex;
    flex-wrap           : wrap;
    align-items         : flex-start;
    justify-content     : space-between;
    gap                 : 0.35rem 0.75rem;
    padding-bottom      : 0.45rem;
    margin-bottom       : 0.35rem;
    border-bottom       : 1px solid var(--main-border-color);
}
.alarm-notification-title {
    font-weight         : 600;
    font-size           : 0.9rem;
    line-height         : 1.35;
    flex                : 1 1 auto;
    min-width           : 0;
    word-break          : break-word;
}
.alarm-notification-stage {
    font-weight         : 600;
    font-size           : 0.85rem;
    line-height         : 1.35;
    flex-shrink         : 0;
    white-space         : nowrap;
}
.alarm-notification-system {
    display             : flex;
    flex-direction      : column;
    gap                 : 0.4rem;
}
.alarm-notification-meta {
    display             : flex;
    flex-direction      : column;
    gap                 : 0.4rem;
    min-width           : 0;
}
.alarm-notification-field {
    display             : flex;
    flex-direction      : column;
    gap                 : 0.15rem;
    min-width           : 0;
}
.alarm-notification-label {
    font-size           : 0.72rem;
    font-weight         : 600;
    letter-spacing      : 0.01em;
    text-transform      : none;
    opacity             : 0.78;
    line-height         : 1.25;
}
.alarm-notification-value {
    font-size           : 0.88rem;
    font-weight         : 500;
    line-height         : 1.45;
    word-break          : break-word;
}
.alarm-notification-value-date {
    font-variant-numeric: tabular-nums;
}
.alarm-notification-date-value-row {
    display             : flex;
    flex-wrap           : wrap;
    justify-content     : space-between;
    align-items         : baseline;
    gap                 : 0.35rem 1rem;
    width               : 100%;
    min-width           : 0;
}
.alarm-notification-date-value-row--headed {
    align-items         : flex-start;
    justify-content     : space-between;
    gap                 : 0.75rem 1.25rem;
}
.alarm-notification-date-value-col {
    display             : flex;
    flex-direction      : column;
    gap                 : 0.15rem;
    min-width           : 0;
    flex                : 1 1 auto;
}
.alarm-notification-date-value-col--amount {
    flex                : 0 1 auto;
    align-items         : flex-end;
    text-align          : right;
}
.alarm-notification-date-value-col--amount .alarm-notification-label {
    align-self          : flex-end;
}
.alarm-notification-date-value-amount {
    font-size           : 0.88rem;
    font-weight         : 500;
    line-height         : 1.45;
    font-variant-numeric: tabular-nums;
    flex-shrink         : 0;
    text-align          : right;
}
.global-notification-body[alarm] > .global-notification-body-row {
}
.global-notification-body[alarm] > .global-notification-body-row[expertDiagnose] {
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
}
.global-notification-body[alarm] > .global-notification-body-row[expertDiagnose] > .global-notification-body-cell {
    display                 : grid;
    place-items             : center;
}

.global-notification-body[alarm] > .global-notification-body-row > table {
    width                   : 100%;
}
.global-notification-body[alarm] > .global-notification-body-row > table.diagnose {
    font-size : 10px;
}


.global-notification-body[alarm] > .global-notification-body-row td.systemName {
    font-size               : 0.9rem !important;
    font-weight             : 500 !important;
    padding-bottom          : 7px;
}

.global-notification-body-row svg {
    fill: var(--main-text-color)
}

.global-notification-body[alarm] > .global-notification-body-row:nth-child(1) {
    display                : grid;
    grid-template-columns  : 1fr min-content min-content;
    gap                    : 5px;
    border-bottom          : 1px solid var(--main-border-color);
    min-height             : 40px;
}
.global-notification-body[alarm] > .global-notification-body-row > div:nth-child(1) {
    display                 : grid;
    place-items             : center start;
}
.global-notification-body[alarm] > .global-notification-body-row > div:not(:nth-child(1)) {
    display                 : grid;
    place-items             : center;
}
.global-notification-body[alarm] > .global-notification-body-row:nth-child(2) {
    font-size               : 0.8rem;
}
.global-notification-body[alarm] > .global-notification-body-row:nth-child(2) td.caption {
    font-weight             : 500;
}
.global-notification-body[alarm] > .global-notification-body-row:nth-child(2) td {
    white-space             : nowrap;
}

.global-notification-body[deviceConnection] {
    overflow                : hidden;
    display                 : flex;
    flex-direction          : column;
}

.global-notification-body[deviceConnection] > .global-notification-body-row {
    display                 : flex;
    flex-direction          : column;
}

.global-notification-body[deviceConnection] > .global-notification-body-row > table {
    font-size               : 0.9rem;
    overflow                : hidden;
}

.global-notification-body[deviceConnection] > .global-notification-body-row > table td {
    padding                  : 0.5rem;
    text-align               : left;
    overflow                 : hidden;
    text-overflow            : ellipsis;
    white-space              : nowrap;
    max-width                : 200px;
}

.global-notification-body[deviceConnection] > .global-notification-body-row > table td.caption {
    font-weight              : 600;
    color                    : var(--main-accent-color);
    white-space              : nowrap;
}

.global-notification-body[deviceConnection] > .global-notification-body-row:nth-child(1) {
    padding-bottom           : 1rem;
    border-bottom            : 1px solid var(--main-border-color);
}

.global-notification-body[deviceConnection] > .global-notification-body-row:nth-child(1) > div {
    font-size                : 1.1rem;
    font-weight              : 500;
    color                    : var(--main-text-color-secondary);
}

.global-notification-body[deviceConnection] > .global-notification-body-row:nth-child(2) {
    margin-top              : 1rem;
}

.icon-button {
    display                  : grid;
    place-items              : center;
    cursor                   : pointer;
    color                    : var(--main-accent-color);
    visibility               : hidden;
}

.icon-button[medium] span { font-size: 2rem; }
.icon-button[large] span { font-size: 2.5rem; }

.icon-button span:first-of-type             { display: block    }
.icon-button span:not(:first-of-type)       { display: none     }

.icon-button:hover span:first-of-type        { display: none    }
.icon-button:hover span:not(:first-of-type)  { display: block   }

.common-menu-item {
    display                 : grid;
    grid-template-columns   : min-content 1fr;
    grid-column-gap         : 10px;
    cursor                  : pointer;

    & .common-menu-item-icon {
        display             : grid;
        place-items         : center;
        width               : 24px;
        height              : 24px;

        & svg {
            fill: var(--main-accent-color);
        }
    }

    & .common-menu-item-text {
        display             : grid;
        place-items         : center start;
        height              : 24px;
    }
}

.pmhReport .report-container .systems-list {

    & .dx-list-item {
        display         : inline-block;
        width           : calc(33.33% - 10px);
        margin          : 5px;
        vertical-align  : top;
        box-sizing      : border-box;

        & .remove-selection-button {
            position        : absolute;
            top             : 0;
            right           : 0;
            background      : var(--danger-color);
            color           : var(--widget-fill-color);
            border-radius   : 50%;
        }
    }
}


.alarm-limit-container {
    height          : 300px;
    padding         : 1rem;
    border-left     : 1px solid var(--main-border-color);
    gap             : 0.5rem;

    flex-direction  : column; -webkit-flex-direction: column; -ms-flex-direction: column;
    justify-content : center; -webkit-justify-content: center;
    align-items     : center; -webkit-align-items: center;

    & .alarm-limit-row-container {
        display                 : grid;
        grid-template-columns   : min-content 1fr;
        width                   : 100%;
        gap                     : 0.5rem;

        & .alarm-limit-label {
            width       : 50px;
            font-size   : 0.8rem;
            display     : grid;
            place-items : center start;
            width       : 100px;
        }

        & .alarm-limit-data {
            height      : 40px;
            width       : 40px;
        }
    }

    & .alarm-limit-save {
        display         : grid;
        place-items     : center;
        margin-top      : 10px;
    }
}

.form-group-separated {
    margin-top      : 2rem;
    padding-bottom  : 0 !important;
}
.form-group-separated-highlighted {
    margin-top      : 2rem;
    border-left     : 3px solid var(--main-border-color);
    padding-left    : 20px !important;
    padding-bottom  : 0 !important;
}
.form-group-highlighted {
    border-left     : 3px solid var(--main-border-color);
    padding-left    : 20px !important;
    padding-bottom  : 0 !important;
}
*[connectionState="1"] {
    color           : var(--wifi-on-color);
}
*[connectionState="0"],
*[connectionState="-1"]
{
    color           : var(--main-disabled-color);
}
.device-connection-state {
    font-size       : 1.2rem;
    display         : grid;
    place-items     : center;
}
.device-state {
    display         : flex;
    justify-content : center; -webkit-justify-content: center;
    align-items     : center; -webkit-align-items: center;
    gap             : 4px;

    & .device-state-element {
        display     : grid;
        place-items : center;
        font-size   : 1.2rem;
    }
}
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear {
    display         : none;
}

/** Periodic Report Related Design */

.periodic-report-container {
    width: 100%;

    & .periodic-report-body-container {
        display         : flex;
        flex-direction  : column;
        height          : 100%;
        gap             : 1rem;
        overflow        : hidden;

        & .left-container {
            display         : flex;
            flex-direction  : column;
            gap             : 1rem;
            flex            : 1;

            & .system-selector-container {
                display: flex;
                flex-direction: row;
                gap: 0.5rem;

                & .system-selector {
                    flex        : 1;
                    border-top  : 1px solid var(--main-border-color);
                    border-left : 1px solid var(--main-border-color);
                    border-bottom: 1px solid var(--main-border-color);
                    margin-top  : 0.5rem;
                    height      : 200px;
                }

                & .system-select-box {
                    flex        : 1;
                    height      : 100px;
                }
            }

        }

        & .right-container {
            border-left     : 1px solid var(--main-border-color);
            display         : flex;
            flex-direction  : column;
            gap             : 1rem;
            flex            : 1;
            transition      : all 0.5s;  -webkit-transition: all 0.5s;  -o-transition: all 0.5s;  -moz-transition: all 0.5s;
        }
    }
}

.start-date-selector, .period-selector, .recurrence-details {
    margin-bottom: 15px;
}

.daily-container {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    margin-bottom   : 15px;
}

.every-label, .days-label {
    color       : var(--main-text-color);
    font-size   : 1rem;
}

.daily-container .dx-numberbox {
    display : inline-block;
    width   : 50px !important;
}

.weekly-interval, .weekly-days, .monthly-type, .monthly-details {
    margin-bottom: 15px;
}

.recurrence-footer-text {
    margin-top: 15px;
    color: var(--main-text-color);
    font-size: 18px;
    background-color: var(--primary-workspace-color);
    padding: 10px;
    border-radius: 4px;
}

.report-form-footer-text {
    margin-top: 15px;
    color: var(--main-text-color);
    font-size: 18px;
    background-color: var(--primary-workspace-color);
    padding: 10px;
    border-radius: 4px;
}

/** Periodic Report Related Design End */
.about-wrapper {
    font-size       : 14px;
    text-align      : center;
    padding         : 15px 0 0 0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    gap             : 1rem;

    & .fizix-link {
        color           : inherit;
        text-decoration : none;
    }
}

/* Failure types other section design start */
.failuresContainer {
    width               : 100%;
}
.failuresHeader {
    display             : flex;
    justify-content     : space-between;
    align-items         : center;
    cursor              : pointer;
    transition          : background-color 0.3s ease;
    padding             : 0.5rem;
    border-bottom       : 1px solid var(--main-border-color);
}

.failuresHeader .title {
    font-size           : 18px;
    color               : var(--main-text-color)
}

.failuresHeader .material-symbols-outlined {
    font-size           : 24px;
    color               : var(--main-accent-color);
    transition          : transform 0.3s ease;
}
/* Failure types other section design end */

.system-metric-cell {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 5px;
    min-height      : 50px;
}

td:has(> .system-metric-cell[selected]) {
    border          : 2px dashed var(--danger-color) !important;
}

.system-metric-cell .system-metric-cell-data:nth-of-type(2) {
    display                         : grid;
    place-items                     : center;
    font-family                     : 'Material Symbols Outlined';
    font-weight                     : normal;
    font-style                      : normal;
    font-size                       : 24px;
    line-height                     : 1;
    letter-spacing                  : normal;
    text-transform                  : none;
    white-space                     : nowrap;
    word-wrap                       : normal;
    direction                       : ltr;
    -webkit-font-feature-settings   : 'liga';
    -webkit-font-smoothing          : antialiased;
}

.system-metric-cell .system-metric-cell-data:nth-of-type(1),
.system-metric-cell .system-metric-cell-data:nth-of-type(3) {
    flex-grow       : 1;
    font-size       : 1.3rem;
    font-weight     : 500;
    display         : grid;
    place-items     : center end;
    color           : var(--main-disabled-color);
}
.system-metric-cell .system-metric-cell-data:nth-of-type(1) {
    font-size       : 1rem;
}
.system-metric-cell .system-metric-cell-data:nth-of-type(3) {
    place-items     : center start;
    color           : var(--main-accent-color);
}
.system-metric-cell .system-metric-cell-data:nth-of-type(2) {
    font-size       : 1.1rem;
}
.system-metric-name {
    display         : flex;
    flex-direction  : column;
	justify-content : center;
    gap             : 5px;
    min-height      : 50px;
}

.system-metric-name .system-metric-cell-data {

}
td[role='gridcell'][bordered] {
    border-left     : 1px solid var(--main-border-color);
}
td[role='gridcell'][metric] {
    vertical-align  : middle !important;
}

/* A -50px bottom margin used to sit here. The popup is flex-height, so the negative margin came
   straight off the box the browser paints while the list inside kept its full height: every
   dropDownButton menu was cut short by roughly one item, with the clipped entry still in the DOM
   and still clickable where nothing was drawn. That is what hid "System Analyser" behind the
   systems list row menu. */

.loader-container {
    width           : 100%;
    height          : 100%;
    display         : flex;
    flex-direction  : column;

    & .loader-container-text,
    & .loader-container-status {
        display     : grid;
        place-items : center start;
        padding     : 1rem 0 1rem 0;
    }

    & .loader-container-progress {
        display                 : grid;
        grid-template-columns   : 1fr min-content;
        gap                     : 1rem;

        & .loader-container-progress-bar {
            display             : grid;
            place-items         : center;
            margin-top          : -15px;
        }

        & .loader-container-progress-cancel {
            cursor              : pointer;
            display             : grid;
            place-items         : center;
        }
    }
}

/* Notification Settings Styles */
.notification-settings {
    width               : 100%;
    height              : 100%;
    display             : flex;
    justify-content     : center;
    align-items         : center;
    padding             : 2rem;

    & .notification-settings-form {
        width               : 100%;
        max-width           : 800px;
        display             : flex;
        flex-direction      : column;
        gap                 : 1rem;
        background-color    : var(--main-bg-color);
        padding             : 2rem;
        border-radius       : 8px;
        box-shadow          : 0 4px 6px rgba(0, 0, 0, 0.1), 0 -4px 6px rgba(0, 0, 0, 0.1);
    }

    & .notification-settings-header {
        font-size           : 1.5rem;
        font-weight         : 600;
        color               : var(--main-text-color);
        text-align          : center;
        margin-bottom       : 1rem;
    }

    & .email-field-container, & .language-selector-container {
        margin-bottom       : 1.5rem;
    }

    & .email-notifications-group {
        margin-top          : 1rem;
        padding             : 1rem;
        border-radius       : 4px;
    }

    & .group-caption {
        font-size           : 1rem;
        font-weight         : 600;
        color               : var(--main-text-color);
        margin-bottom       : 1rem;
        padding-bottom      : 0.5rem;
        border-bottom       : 1px solid var(--main-border-color);
    }

    & .checkboxes-container {
        display             : flex;
        flex-direction      : row;
        gap                 : 1.5rem;
        flex-wrap           : wrap;
        margin-top          : 1.5rem;
    }

    & .checkbox-item {
        display             : block;
        flex                : 1;
        min-width           : 200px;
    }

    & .button-wrapper {
        margin-top          : 2rem;
        display             : flex;
        justify-content     : flex-end;
    }
}

@keyframes dx-datagrid-highlight-change-handler {
    from {
        background-color: var(--node-border-color);
    }
    50% {
        background-color: var(--node-border-color);
    }
}

.signal-monitor-window .signal-monitor-grid-wrapper.loading .dx-data-row.dx-datagrid-row-inserted-animation {
    animation:  dx-datagrid-highlight-change-handler  1s;
}

.devices .dx-datagrid-total-footer td:first-child, .organization .dx-datagrid-total-footer td:first-child {
  display: none;
}

.dx-tab-text {
    text-transform: none !important;
}

/** Visit Notes Related Design */

.visit-section {
    margin-bottom   : 20px;
    padding         : 15px;
    border          : 1px solid var(--main-border-color);
    border-radius   : 4px;
    background-color: var(--glass-bg-card);
}

.section-title {
    font-size     : 16px;
    font-weight   : bold;
    color         : var(--main-text-color);
}

.question-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--glass-bg-card);
    border-radius: 4px;
}

.question-text {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--main-text-color);
}

.file-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.file-preview-card {
    position: relative;
    width: 150px;
    min-height: 180px;
    border: 1px solid var(--main-border-color);
    border-radius: 8px;
    background: var(--glass-bg-card);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.file-preview-area {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

.image-loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
}

.file-name {
    width: 100%;
    font-size: 11px;
    color: var(--main-text-color);
    text-align: center;
    word-break: break-word;
    margin-bottom: 5px;
    max-height: 40px;
    overflow: hidden;
}

.file-size {
    font-size: 10px;
    color: #666;
    margin-bottom: 5px;
}

.file-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.image-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.image-fullscreen-container {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.image-fullscreen-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.image-fullscreen-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 90%;
    text-align: center;
    word-break: break-word;
}
/** Visit Notes Related Design End */


/* ===================================================== */

.import-summary-container {
    display             : flex;
    justify-content     : space-between;
    gap                 : 15px;
    margin-bottom       : 15px;
    font-size           : 16px;
    padding             : 20px 150px;

     & .summary-box {
        flex            : 1;
        text-align      : center;
        border-radius   : 8px;
        padding         : 15px 0;
        color           : #fff;
        font-weight     : bold;

        & .count {
            font-size       : 1.5rem;
            font-family: 'Roboto', sans-serif;
            font-weight     : 700;
        }
    }

    & .summary-box.info {
        background: var(--main-accent-color);
    }

    & .summary-box.success {
        background: var(--success-color);
    }

    & .summary-box.danger {
        background: var(--danger-color);
    }

    & .summary-box.warning {
        background: var(--designer-accent-color);
    }
}

/* Scrollable container i�in �zel scrollbar */
.dx-scrollable-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dx-scrollable-container::-webkit-scrollbar-track {
    background: var(--primary-workspace-color);
    border-radius: 4px;
}

.dx-scrollable-container::-webkit-scrollbar-thumb {
    background-color: var(--main-accent-color);
    opacity: 0.1;
    border-radius: 4px;
}

.dx-scrollable-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--main-accent-color);
    opacity: 1;
}


/**
Alarm Limit displayer start
*/
/* Ana içerik alanının grid'i tam sığdırması için */
.main-content {
    flex-grow      : 1;
    overflow-y     : auto;
    display        : flex;
    flex-direction : column;
}

/* The two id-based rules that used to live here belonged to the standalone alarm-limit page.
   Its hosts are now the analyser tab and the Systems List panel, which both supply their own
   containers (.alarm-limits-grid-container / .alarm-limits-graphs-container). */

/* DataGrid içindeki buton için özel bir görünüm */
.custom-grid-btn {
    color           : var(--main-accent-color) !important;
    font-size       : 11px !important;
    padding         : 4px 8px !important;
    border-radius   : 4px !important;
    font-weight     : bold;
    border          : 1px solid var(--main-border-color) !important;
    transition      : background-color 0.2s;
}

/* Toolbar'daki dinamik başlık tasarımı */
#mainToolbarTitle {
    font-weight     : 600;
    color           : var(--main-text-color);
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}

/* ── Time range selector ── */
.time-range-selector {
    display         : flex;
    align-items     : center;
    gap             : 4px;
    margin-left     : auto;
    flex-shrink     : 0;
}

#advDateRange {
    min-width       : 280px;
}

.range-btn {
    padding         : 4px 12px;
    border-radius   : 4px;
    border          : 1px solid var(--main-border-color);
    cursor          : pointer;
    font-size       : 0.8rem;
    font-weight     : 500;
    color           : var(--main-text-color);
    background      : transparent;
    transition      : background 0.15s, color 0.15s, border-color 0.15s;
    user-select     : none;
}

.range-btn:hover {
    background      : var(--main-accent-color);
    color           : var(--main-accent-not-color);
    border-color    : var(--main-accent-color);
}

.range-btn.active {
    background      : var(--main-accent-color);
    color           : var(--main-accent-not-color);
    border-color    : var(--main-accent-color);
}

/* ── New Plot button inside grid ── */
.btn-new-plot {
    color           : var(--main-accent-color) !important;
    font-size       : 0.75rem !important;
    font-weight     : 600 !important;
}

/* ── AlarmLimitChart card ── */
.alarm-limit-chart-card {
    border          : 1px solid var(--main-border-color);
    border-radius   : 6px;
    display         : flex;
    flex-direction  : column;
    overflow        : hidden;
    box-shadow      : var(--glass-shadow-card, 0 2px 8px rgba(0,0,0,0.08));
}

.chart-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 8px 12px;
    border-bottom   : 1px solid var(--main-border-color);
    flex-shrink     : 0;
}

.chart-title {
    font-size       : 0.9rem;
    font-weight     : 600;
    color           : var(--main-text-color);
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.chart-close-btn {
    background      : transparent;
    border          : none;
    cursor          : pointer;
    font-size       : 1rem;
    color           : var(--main-disabled-color);
    display         : grid;
    place-items     : center;
    width           : 24px;
    height          : 24px;
    border-radius   : 50%;
    flex-shrink     : 0;
    transition      : color 0.15s, background 0.15s;
}

.chart-close-btn:hover {
    color           : var(--danger-color);
    background      : rgba(209, 11, 11, 0.08);
}

/* Row that holds chart (left) + filter panel (right) */
.chart-content-row {
    display         : flex;
    flex-direction  : row;
    min-height      : 360px;
}

.chart-body-area {
    flex            : 0 0 78%;
    min-width       : 0;
    border-right    : 1px solid var(--main-border-color);
}

.plotly-container {
    width           : 100%;
    height          : 360px;
}

/* No-data placeholder */
.chart-no-data {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 80px;
    font-size       : 0.875rem;
    color           : var(--main-disabled-color);
    font-style      : italic;
}

/* Right-side filter panel */
.chart-toolbar {
    flex            : 1 1 0;
    display         : flex;
    flex-direction  : column;
    gap             : 12px;
    padding         : 14px 16px;
    overflow-y      : auto;
}

/* Visually grouped set of inputs inside the toolbar */
.chart-toolbar-group {
    display         : flex;
    flex-direction  : column;
    gap             : 10px;
    padding         : 10px;
    border-radius   : 6px;
}


/* Flash green on successful row save (grid or chart) */
.row-save-highlight > td {
    background-color : rgba(76, 175, 80, 0.18) !important;
    transition       : background-color 1.8s ease-out;
}
/* ── Suggest popup ── */
.suggest-popup-content {
    display        : flex;
    flex-direction : column;
    gap            : 14px;
    padding        : 4px 0;
    overflow-x     : hidden;
}

.suggest-params-row {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 10px;
    align-items : flex-end;
}

.suggest-params-row > div {
    flex: 1 1 140px;
    min-width: 120px;
}

.suggest-result-grid {
    min-height: 180px;
}

.suggest-apply-row {
    display         : flex;
    justify-content : flex-end;
}

/* ── Chart suggest popover ── */
.chart-suggest-popover {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    padding        : 4px 0;
}

.chart-toolbar-action-row {
    display        : flex;
    flex-direction : row;
    gap            : 8px;
    align-items    : center;
}

.chart-toolbar-suggest,
.chart-toolbar-save {
    align-self: flex-start;
}

.suggest-result-box {
    min-height  : 48px;
    padding     : 8px 10px;
    border      : 1px solid var(--main-border-color);
    border-radius: 4px;
    background  : var(--main-bg-color, #f9f9f9);
    font-size   : 13px;
}

.suggest-result-line {
    display         : flex;
    justify-content : space-between;
    gap             : 8px;
    padding         : 2px 0;
}

.suggest-result-sigma {
    margin-top : 4px;
    font-size  : 11px;
    opacity    : 0.6;
}

.suggest-no-data {
    opacity   : 0.5;
    font-style: italic;
}

/* ── Add Alarm Limit popup ── */
.add-alarm-limit-content {
    display        : flex;
    flex-direction : column;
    gap            : 14px;
    padding        : 8px 4px;
}

.add-alarm-selectors-row {
    display    : flex;
    gap        : 12px;
    flex-wrap  : wrap;
}

.add-alarm-selector {
    flex: 1 1 220px;
}

.add-alarm-grid {
    min-height: 160px;
    flex      : 1;
}

.add-alarm-save-row {
    display        : flex;
    justify-content: flex-end;
    gap            : 8px;
    padding-top    : 4px;
}

/* ── Alarm Limits Tab (inside SystemAnalyserTabView) ── */
.alarm-limits-tab-content {
    display        : flex;
    flex-direction : column;
    height         : 100%;
    overflow-y     : auto;
    padding        : 10px;
}

.alarm-limits-date-bar {
    display     : flex;
    gap         : 6px;
    margin-bottom: 10px;
    align-items : center;
    flex-shrink : 0;
}

.alarm-limits-date-bar .range-btn {
    padding       : 6px 14px;
    border        : 1px solid var(--main-border-color);
    border-radius : 4px;
    cursor        : pointer;
    font-size     : 13px;
    user-select   : none;
    transition    : background-color 0.15s;
}

.alarm-limits-date-bar .range-btn:hover {
    background-color: var(--main-hover-bg-color, rgba(0,0,0,0.04));
}

.alarm-limits-date-bar .range-btn.active {
    background-color: var(--main-accent-color, #2196F3);
    color           : #fff;
    border-color    : var(--main-accent-color, #2196F3);
}

.alarm-limits-grid-container {
    flex-shrink : 0;
    width       : 100%;
}

.alarm-limits-graphs-container {
    margin-top : 10px;
}

.alarm-limits-empty-state {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    height          : 100%;
    gap             : 12px;
    opacity         : 0.5;
}

.alarm-limits-empty-state .material-symbols-outlined {
    font-size : 48px;
}

/**
Alarm Limit displayer end
*/