a {
    cursor: pointer;
}

body,
html {
    height: 100%;
}

    /*jQueryUI start*/

    body .ui-widget {
        font-family: var(--main-font);
    }

.ui-dialog,
.ui-dialog-content {
    box-sizing: content-box;
}

.ui-widget-header {
    background: #fafafa !important;
    color: #000000 !important;
}

    .ui-widget-header .ui-icon {
        width: 16px;
        height: 16px;
        display: block;
        float: right;
    }

.ui-datepicker {
    z-index: 1000003 !important;
}

.ui-dialog-titlebar-close .ui-button-text {
    background: transparent !important;
}

.ui-dialog .ui-dialog-titlebar-pin {
    position: absolute;
    right: 1.8em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.ui-autocomplete {
    font-family: var(--main-font);
    font-size: 14px;
}

.ui-autocomplete-input {
    padding-right: 35px;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35 !important;
}

/* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon {
    background-color: inherit;
}

/* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon-triangle-1-s {
    background-position: -64px -16px;
}

/*jQueryUI end*/

.ist-dashboard-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.143" height="25" viewBox="0 0 32.143 25"><defs><style>.ist-1 {fill: rgb(136,136,136);}</style> </defs><path id="ist_dashboard_left_icon" class="ist-1" d="M16.071,38.7a1.339,1.339,0,1,0-1.339-1.339A1.339,1.339,0,0,0,16.071,38.7Zm-7.589.446a1.339,1.339,0,1,0,1.339,1.339A1.339,1.339,0,0,0,8.482,39.143Zm15.179,0A1.339,1.339,0,1,0,25,40.482,1.339,1.339,0,0,0,23.661,39.143Zm3.125,7.589a1.339,1.339,0,1,0,1.339,1.339A1.339,1.339,0,0,0,26.786,46.732ZM16.071,32A16.071,16.071,0,0,0,2.18,56.152,1.766,1.766,0,0,0,3.711,57H28.432a1.766,1.766,0,0,0,1.531-.848A16.071,16.071,0,0,0,16.071,32Zm12.36,23.214-24.71.038a14.286,14.286,0,1,1,26.635-7.181A14.128,14.128,0,0,1,28.432,55.214ZM5.357,46.732A1.339,1.339,0,1,0,6.7,48.071,1.339,1.339,0,0,0,5.357,46.732Zm15.023-9.326a.9.9,0,0,0-1.135.552l-2.892,8.356c-.094-.007-.185-.028-.281-.028a3.576,3.576,0,1,0,1.974.6l2.887-8.342a.894.894,0,0,0-.553-1.136ZM16.071,51.643a1.786,1.786,0,1,1,1.786-1.786A1.788,1.788,0,0,1,16.071,51.643Z" transform="translate(0 -32)"/></svg>') center center no-repeat;
}

    .ist-dashboard-icon:hover,
    .ist-dashboard-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.143" height="25" viewBox="0 0 32.143 25"><defs><style>.ist-1 {fill: rgb(255,255,255);}</style> </defs><path id="ist_dashboard_left_icon" class="ist-1" d="M16.071,38.7a1.339,1.339,0,1,0-1.339-1.339A1.339,1.339,0,0,0,16.071,38.7Zm-7.589.446a1.339,1.339,0,1,0,1.339,1.339A1.339,1.339,0,0,0,8.482,39.143Zm15.179,0A1.339,1.339,0,1,0,25,40.482,1.339,1.339,0,0,0,23.661,39.143Zm3.125,7.589a1.339,1.339,0,1,0,1.339,1.339A1.339,1.339,0,0,0,26.786,46.732ZM16.071,32A16.071,16.071,0,0,0,2.18,56.152,1.766,1.766,0,0,0,3.711,57H28.432a1.766,1.766,0,0,0,1.531-.848A16.071,16.071,0,0,0,16.071,32Zm12.36,23.214-24.71.038a14.286,14.286,0,1,1,26.635-7.181A14.128,14.128,0,0,1,28.432,55.214ZM5.357,46.732A1.339,1.339,0,1,0,6.7,48.071,1.339,1.339,0,0,0,5.357,46.732Zm15.023-9.326a.9.9,0,0,0-1.135.552l-2.892,8.356c-.094-.007-.185-.028-.281-.028a3.576,3.576,0,1,0,1.974.6l2.887-8.342a.894.894,0,0,0-.553-1.136ZM16.071,51.643a1.786,1.786,0,1,1,1.786-1.786A1.788,1.788,0,0,1,16.071,51.643Z" transform="translate(0 -32)"/></svg>') center center no-repeat !important;
    }

.ist-ppp-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="31.25" height="25" viewBox="0 0 31.25 25"><defs><style>.ist-1 {fill: rgb(136,136,136);}</style></defs><path id="ist_ppp_left_icon" data-name="3p" class="ist-1" d="M28.906,0H24.219a2.344,2.344,0,0,0-2.344,2.344V3.906H9.375V2.344A2.344,2.344,0,0,0,7.031,0H2.344A2.344,2.344,0,0,0,0,2.344V7.031A2.344,2.344,0,0,0,2.344,9.375H6.976l4.334,7.334a2.329,2.329,0,0,0-.373,1.259v4.688A2.344,2.344,0,0,0,13.281,25h4.687a2.344,2.344,0,0,0,2.344-2.344V17.969a2.344,2.344,0,0,0-2.344-2.344H13.281a2.317,2.317,0,0,0-.723.125L8.484,8.857a2.329,2.329,0,0,0,.891-1.826V5.469h12.5V7.031a2.344,2.344,0,0,0,2.344,2.344h4.688A2.344,2.344,0,0,0,31.25,7.031V2.344A2.344,2.344,0,0,0,28.906,0ZM1.563,7.031V2.344a.782.782,0,0,1,.781-.781H7.031a.782.782,0,0,1,.781.781V7.031a.782.782,0,0,1-.781.781H2.344A.782.782,0,0,1,1.563,7.031ZM17.969,17.188a.782.782,0,0,1,.781.781v4.688a.782.782,0,0,1-.781.781H13.281a.782.782,0,0,1-.781-.781V17.969a.782.782,0,0,1,.781-.781ZM29.688,7.031a.782.782,0,0,1-.781.781H24.219a.782.782,0,0,1-.781-.781V2.344a.782.782,0,0,1,.781-.781h4.688a.782.782,0,0,1,.781.781Z"/></svg>') center center no-repeat;
}

    .ist-ppp-icon:hover,
    .ist-ppp-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="31.25" height="25" viewBox="0 0 31.25 25"><defs><style>.ist-1 {fill: rgb(255,255,255);}</style></defs><path id="ist_ppp_left_icon" data-name="3p" class="ist-1" d="M28.906,0H24.219a2.344,2.344,0,0,0-2.344,2.344V3.906H9.375V2.344A2.344,2.344,0,0,0,7.031,0H2.344A2.344,2.344,0,0,0,0,2.344V7.031A2.344,2.344,0,0,0,2.344,9.375H6.976l4.334,7.334a2.329,2.329,0,0,0-.373,1.259v4.688A2.344,2.344,0,0,0,13.281,25h4.687a2.344,2.344,0,0,0,2.344-2.344V17.969a2.344,2.344,0,0,0-2.344-2.344H13.281a2.317,2.317,0,0,0-.723.125L8.484,8.857a2.329,2.329,0,0,0,.891-1.826V5.469h12.5V7.031a2.344,2.344,0,0,0,2.344,2.344h4.688A2.344,2.344,0,0,0,31.25,7.031V2.344A2.344,2.344,0,0,0,28.906,0ZM1.563,7.031V2.344a.782.782,0,0,1,.781-.781H7.031a.782.782,0,0,1,.781.781V7.031a.782.782,0,0,1-.781.781H2.344A.782.782,0,0,1,1.563,7.031ZM17.969,17.188a.782.782,0,0,1,.781.781v4.688a.782.782,0,0,1-.781.781H13.281a.782.782,0,0,1-.781-.781V17.969a.782.782,0,0,1,.781-.781ZM29.688,7.031a.782.782,0,0,1-.781.781H24.219a.782.782,0,0,1-.781-.781V2.344a.782.782,0,0,1,.781-.781h4.688a.782.782,0,0,1,.781.781Z"/></svg>') center center no-repeat !important;
    }

.ist-board-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.571" height="25" viewBox="0 0 28.571 25"><defs><style>.ist-1 {fill: rgb(136,136,136);}</style></defs><path id="ist_board__left_icon" class="ist-1" d="M0,34.679V54.321A2.679,2.679,0,0,0,2.679,57H25.893a2.679,2.679,0,0,0,2.679-2.679V34.679A2.679,2.679,0,0,0,25.893,32H2.679A2.679,2.679,0,0,0,0,34.679Zm13.393-.893v9.821H1.786V34.679a.893.893,0,0,1,.893-.893ZM1.786,54.321V45.393H13.393v9.821H2.679A.893.893,0,0,1,1.786,54.321Zm13.393.893V45.393H26.786v8.929a.893.893,0,0,1-.893.893ZM26.786,43.607H15.179V33.786H25.893a.893.893,0,0,1,.893.893Z" transform="translate(0 -32)"/></svg>') center center no-repeat;
}

    .ist-board-icon:hover,
    .ist-board-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.571" height="25" viewBox="0 0 28.571 25"><defs><style>.ist-1 {fill: rgb(255,255,255);}</style></defs><path id="ist_board__left_icon" class="ist-1" d="M0,34.679V54.321A2.679,2.679,0,0,0,2.679,57H25.893a2.679,2.679,0,0,0,2.679-2.679V34.679A2.679,2.679,0,0,0,25.893,32H2.679A2.679,2.679,0,0,0,0,34.679Zm13.393-.893v9.821H1.786V34.679a.893.893,0,0,1,.893-.893ZM1.786,54.321V45.393H13.393v9.821H2.679A.893.893,0,0,1,1.786,54.321Zm13.393.893V45.393H26.786v8.929a.893.893,0,0,1-.893.893ZM26.786,43.607H15.179V33.786H25.893a.893.893,0,0,1,.893.893Z" transform="translate(0 -32)"/></svg>') center center no-repeat;
    }

.ist-document-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18.746" height="25" viewBox="0 0 18.746 25"><defs><style>.ist-1 {fill:rgb(136,136,136);}</style></defs><path id="ist_document_left_icon" class="ist-1" d="M18.058,4.684l-4.1-4.1A2.343,2.343,0,0,0,12.307-.1H2.343A2.351,2.351,0,0,0,0,2.248V22.557A2.344,2.344,0,0,0,2.343,24.9H16.4a2.344,2.344,0,0,0,2.343-2.343V6.344a2.355,2.355,0,0,0-.688-1.66Zm-1.1,1.108a.768.768,0,0,1,.205.361H12.5V1.491a.768.768,0,0,1,.361.205ZM16.4,23.338H2.343a.783.783,0,0,1-.781-.781V2.248a.783.783,0,0,1,.781-.781h8.592V6.544a1.169,1.169,0,0,0,1.172,1.172h5.077V22.557A.783.783,0,0,1,16.4,23.338ZM14.06,11.426v.391a.588.588,0,0,1-.586.586h-8.2a.588.588,0,0,1-.586-.586v-.391a.588.588,0,0,1,.586-.586h8.2A.588.588,0,0,1,14.06,11.426Zm0,3.124v.391a.588.588,0,0,1-.586.586h-8.2a.588.588,0,0,1-.586-.586V14.55a.588.588,0,0,1,.586-.586h8.2A.588.588,0,0,1,14.06,14.55Zm0,3.124v.391a.588.588,0,0,1-.586.586h-8.2a.588.588,0,0,1-.586-.586v-.391a.588.588,0,0,1,.586-.586h8.2A.588.588,0,0,1,14.06,17.675Z" transform="translate(0 0.1)"/></svg>') center center no-repeat;
}

    .ist-document-icon:hover,
    .ist-document-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18.746" height="25" viewBox="0 0 18.746 25"><defs><style>.ist-1 {fill:rgb(255,255,255);}</style></defs><path id="ist_document_left_icon" class="ist-1" d="M18.058,4.684l-4.1-4.1A2.343,2.343,0,0,0,12.307-.1H2.343A2.351,2.351,0,0,0,0,2.248V22.557A2.344,2.344,0,0,0,2.343,24.9H16.4a2.344,2.344,0,0,0,2.343-2.343V6.344a2.355,2.355,0,0,0-.688-1.66Zm-1.1,1.108a.768.768,0,0,1,.205.361H12.5V1.491a.768.768,0,0,1,.361.205ZM16.4,23.338H2.343a.783.783,0,0,1-.781-.781V2.248a.783.783,0,0,1,.781-.781h8.592V6.544a1.169,1.169,0,0,0,1.172,1.172h5.077V22.557A.783.783,0,0,1,16.4,23.338ZM14.06,11.426v.391a.588.588,0,0,1-.586.586h-8.2a.588.588,0,0,1-.586-.586v-.391a.588.588,0,0,1,.586-.586h8.2A.588.588,0,0,1,14.06,11.426Zm0,3.124v.391a.588.588,0,0,1-.586.586h-8.2a.588.588,0,0,1-.586-.586V14.55a.588.588,0,0,1,.586-.586h8.2A.588.588,0,0,1,14.06,14.55Zm0,3.124v.391a.588.588,0,0,1-.586.586h-8.2a.588.588,0,0,1-.586-.586v-.391a.588.588,0,0,1,.586-.586h8.2A.588.588,0,0,1,14.06,17.675Z" transform="translate(0 0.1)"/></svg>') center center no-repeat;
    }

.ist-risk-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><defs><style>.ist-1 {fill:rgb(136,136,136);}</style></defs><path id="ist_risk_left_icon" class="ist-1" d="M22.321,32H2.679A2.679,2.679,0,0,0,0,34.679V54.321A2.679,2.679,0,0,0,2.679,57H22.321A2.679,2.679,0,0,0,25,54.321V34.679A2.679,2.679,0,0,0,22.321,32Zm.893,22.321a.894.894,0,0,1-.893.893H2.679a.894.894,0,0,1-.893-.893V34.679a.894.894,0,0,1,.893-.893H22.321a.894.894,0,0,1,.893.893ZM12.5,49.187a1.563,1.563,0,1,0,1.563,1.563A1.562,1.562,0,0,0,12.5,49.187Zm.428-1.339h-.893a.67.67,0,0,1-.67-.67v-.021c0-3.925,4.321-3.55,4.321-5.994,0-1.117-.991-2.244-3.205-2.244a3.688,3.688,0,0,0-3.3,1.6.668.668,0,0,1-.907.133l-.733-.511a.669.669,0,0,1-.148-.959,5.856,5.856,0,0,1,5.091-2.5c2.92,0,5.437,1.66,5.437,4.476,0,3.762-4.321,3.563-4.321,5.994v.021a.67.67,0,0,1-.67.67Z" transform="translate(0 -32)"/></svg>') center center no-repeat;
}

    .ist-risk-icon:hover,
    .ist-risk-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><defs><style>.ist-1 {fill:rgb(255,255,255);}</style></defs><path id="ist_risk_left_icon" class="ist-1" d="M22.321,32H2.679A2.679,2.679,0,0,0,0,34.679V54.321A2.679,2.679,0,0,0,2.679,57H22.321A2.679,2.679,0,0,0,25,54.321V34.679A2.679,2.679,0,0,0,22.321,32Zm.893,22.321a.894.894,0,0,1-.893.893H2.679a.894.894,0,0,1-.893-.893V34.679a.894.894,0,0,1,.893-.893H22.321a.894.894,0,0,1,.893.893ZM12.5,49.187a1.563,1.563,0,1,0,1.563,1.563A1.562,1.562,0,0,0,12.5,49.187Zm.428-1.339h-.893a.67.67,0,0,1-.67-.67v-.021c0-3.925,4.321-3.55,4.321-5.994,0-1.117-.991-2.244-3.205-2.244a3.688,3.688,0,0,0-3.3,1.6.668.668,0,0,1-.907.133l-.733-.511a.669.669,0,0,1-.148-.959,5.856,5.856,0,0,1,5.091-2.5c2.92,0,5.437,1.66,5.437,4.476,0,3.762-4.321,3.563-4.321,5.994v.021a.67.67,0,0,1-.67.67Z" transform="translate(0 -32)"/></svg>') center center no-repeat;
    }

.ist-issue-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18.75" height="25" viewBox="0 0 18.75 25"><defs><style>.ist-1 {fill:rgb(136,136,136);}</style> </defs><path id="ist_issue_left_icon" class="ist-1" d="M13.672,11.719H8.2a.392.392,0,0,0-.391.391v.781a.392.392,0,0,0,.391.391h5.469a.392.392,0,0,0,.391-.391v-.781A.392.392,0,0,0,13.672,11.719Zm0,4.688H8.2a.392.392,0,0,0-.391.391v.781a.392.392,0,0,0,.391.391h5.469a.392.392,0,0,0,.391-.391V16.8A.392.392,0,0,0,13.672,16.406Zm-8.2-5.078A1.172,1.172,0,1,0,6.641,12.5,1.169,1.169,0,0,0,5.469,11.328Zm0,4.688a1.172,1.172,0,1,0,1.172,1.172A1.169,1.169,0,0,0,5.469,16.016ZM16.406,3.125H12.08a2.582,2.582,0,0,0,.029-.391,2.734,2.734,0,0,0-5.469,0,2.581,2.581,0,0,0,.029.391H2.344A2.344,2.344,0,0,0,0,5.469V22.656A2.344,2.344,0,0,0,2.344,25H16.406a2.344,2.344,0,0,0,2.344-2.344V5.469A2.344,2.344,0,0,0,16.406,3.125ZM9.375,1.563A1.172,1.172,0,1,1,8.2,2.734,1.169,1.169,0,0,1,9.375,1.563Zm7.813,21.094a.784.784,0,0,1-.781.781H2.344a.784.784,0,0,1-.781-.781V5.469a.784.784,0,0,1,.781-.781H4.688v.977a.588.588,0,0,0,.586.586h8.2a.588.588,0,0,0,.586-.586V4.688h2.344a.784.784,0,0,1,.781.781Z"/></svg>') center center no-repeat;
}

    .ist-issue-icon:hover,
    .ist-issue-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18.75" height="25" viewBox="0 0 18.75 25"><defs><style>.ist-1 {fill:rgb(255,255,255);}</style> </defs><path id="ist_issue_left_icon" class="ist-1" d="M13.672,11.719H8.2a.392.392,0,0,0-.391.391v.781a.392.392,0,0,0,.391.391h5.469a.392.392,0,0,0,.391-.391v-.781A.392.392,0,0,0,13.672,11.719Zm0,4.688H8.2a.392.392,0,0,0-.391.391v.781a.392.392,0,0,0,.391.391h5.469a.392.392,0,0,0,.391-.391V16.8A.392.392,0,0,0,13.672,16.406Zm-8.2-5.078A1.172,1.172,0,1,0,6.641,12.5,1.169,1.169,0,0,0,5.469,11.328Zm0,4.688a1.172,1.172,0,1,0,1.172,1.172A1.169,1.169,0,0,0,5.469,16.016ZM16.406,3.125H12.08a2.582,2.582,0,0,0,.029-.391,2.734,2.734,0,0,0-5.469,0,2.581,2.581,0,0,0,.029.391H2.344A2.344,2.344,0,0,0,0,5.469V22.656A2.344,2.344,0,0,0,2.344,25H16.406a2.344,2.344,0,0,0,2.344-2.344V5.469A2.344,2.344,0,0,0,16.406,3.125ZM9.375,1.563A1.172,1.172,0,1,1,8.2,2.734,1.169,1.169,0,0,1,9.375,1.563Zm7.813,21.094a.784.784,0,0,1-.781.781H2.344a.784.784,0,0,1-.781-.781V5.469a.784.784,0,0,1,.781-.781H4.688v.977a.588.588,0,0,0,.586.586h8.2a.588.588,0,0,0,.586-.586V4.688h2.344a.784.784,0,0,1,.781.781Z"/></svg>') center center no-repeat;
    }

.ist-finance-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.121" height="25" viewBox="0 0 28.121 25"><defs><style>.ist-1 {fill:rgb(136,136,136);}</style></defs><path id="ist_finance_left_icon" class="ist-1" d="M12.532,6.625l2.753.786a1,1,0,0,1-.273,1.963h-1.8a1.883,1.883,0,0,1-1.1-.356.368.368,0,0,0-.478.059l-.557.557a.4.4,0,0,0,.049.6,3.431,3.431,0,0,0,2.094.708h.068v1.172a.392.392,0,0,0,.391.391h.781a.392.392,0,0,0,.391-.391V10.935h.068a2.643,2.643,0,0,0,2.524-1.718,2.575,2.575,0,0,0-1.714-3.31l-2.885-.825a1,1,0,0,1,.273-1.963h1.8a1.883,1.883,0,0,1,1.1.356.368.368,0,0,0,.478-.059l.557-.557a.4.4,0,0,0-.049-.6,3.457,3.457,0,0,0-2.094-.7h-.068V.391A.392.392,0,0,0,14.45,0h-.781a.392.392,0,0,0-.391.391V1.562h-.171a2.563,2.563,0,0,0-2.548,2.807A2.668,2.668,0,0,0,12.532,6.625Zm14.724,9.661a2.644,2.644,0,0,0-3.412-.059l-3.007,2.407a.521.521,0,0,1-.327.112H18.478a2.717,2.717,0,0,0,.234-1.577,2.813,2.813,0,0,0-2.822-2.329H8.851a4.67,4.67,0,0,0-2.812.937L4.164,17.184H.391A.392.392,0,0,0,0,17.575v.781a.392.392,0,0,0,.391.391h4.3l2.29-1.718A3.135,3.135,0,0,1,8.851,16.4h7.162a1.172,1.172,0,0,1,0,2.343h-4.3a.781.781,0,0,0,0,1.562h8.8a2.1,2.1,0,0,0,1.3-.454l3.007-2.4a1.083,1.083,0,0,1,1.386,0,1.038,1.038,0,0,1-.044,1.591l-4.921,3.94a2.075,2.075,0,0,1-1.3.454H.391A.392.392,0,0,0,0,23.828v.781A.392.392,0,0,0,.391,25H19.942a3.63,3.63,0,0,0,2.275-.8l4.926-3.94a2.606,2.606,0,0,0,.112-3.974Z"/></svg>') center center no-repeat;
}

    .ist-finance-icon:hover,
    .ist-finance-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.121" height="25" viewBox="0 0 28.121 25"><defs><style>.ist-1 {fill:rgb(255,255,255);}</style></defs><path id="ist_finance_left_icon" class="ist-1" d="M12.532,6.625l2.753.786a1,1,0,0,1-.273,1.963h-1.8a1.883,1.883,0,0,1-1.1-.356.368.368,0,0,0-.478.059l-.557.557a.4.4,0,0,0,.049.6,3.431,3.431,0,0,0,2.094.708h.068v1.172a.392.392,0,0,0,.391.391h.781a.392.392,0,0,0,.391-.391V10.935h.068a2.643,2.643,0,0,0,2.524-1.718,2.575,2.575,0,0,0-1.714-3.31l-2.885-.825a1,1,0,0,1,.273-1.963h1.8a1.883,1.883,0,0,1,1.1.356.368.368,0,0,0,.478-.059l.557-.557a.4.4,0,0,0-.049-.6,3.457,3.457,0,0,0-2.094-.7h-.068V.391A.392.392,0,0,0,14.45,0h-.781a.392.392,0,0,0-.391.391V1.562h-.171a2.563,2.563,0,0,0-2.548,2.807A2.668,2.668,0,0,0,12.532,6.625Zm14.724,9.661a2.644,2.644,0,0,0-3.412-.059l-3.007,2.407a.521.521,0,0,1-.327.112H18.478a2.717,2.717,0,0,0,.234-1.577,2.813,2.813,0,0,0-2.822-2.329H8.851a4.67,4.67,0,0,0-2.812.937L4.164,17.184H.391A.392.392,0,0,0,0,17.575v.781a.392.392,0,0,0,.391.391h4.3l2.29-1.718A3.135,3.135,0,0,1,8.851,16.4h7.162a1.172,1.172,0,0,1,0,2.343h-4.3a.781.781,0,0,0,0,1.562h8.8a2.1,2.1,0,0,0,1.3-.454l3.007-2.4a1.083,1.083,0,0,1,1.386,0,1.038,1.038,0,0,1-.044,1.591l-4.921,3.94a2.075,2.075,0,0,1-1.3.454H.391A.392.392,0,0,0,0,23.828v.781A.392.392,0,0,0,.391,25H19.942a3.63,3.63,0,0,0,2.275-.8l4.926-3.94a2.606,2.606,0,0,0,.112-3.974Z"/></svg>') center center no-repeat;
    }

.ist-cr-icon {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'><path fill='rgb(136,136,136)' d='M224 64c66.3 0 122.7 38.5 149.7 96H320c-13.3 0-24 10.7-24 24s10.7 24 24 24h104c13.3 0 24-10.7 24-24V80c0-13.3-10.7-24-24-24s-24 10.7-24 24v36.2C366.6 57.5 299.6 16 224 16 141.5 16 68.5 63.1 34.6 136.5c-5.5 11.9-.3 26.2 11.6 31.7s26.2.3 31.7-11.6C107.6 96.5 160.3 64 224 64zm0 320c-66.3 0-122.7-38.5-149.7-96H128c13.3 0 24-10.7 24-24s-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v104c0 13.3 10.7 24 24 24s24-10.7 24-24v-36.2C81.4 390.5 148.4 432 224 432c82.5 0 155.5-47.1 189.4-120.5 5.5-11.9.3-26.2-11.6-31.7s-26.2-.3-31.7 11.6C340.4 351.5 287.7 384 224 384z'/></svg>") center center no-repeat;
    background-size: 25px 25px;
}

    .ist-cr-icon:hover,
    .ist-cr-icon.active {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'><path fill='rgb(255,255,255)' d='M224 64c66.3 0 122.7 38.5 149.7 96H320c-13.3 0-24 10.7-24 24s10.7 24 24 24h104c13.3 0 24-10.7 24-24V80c0-13.3-10.7-24-24-24s-24 10.7-24 24v36.2C366.6 57.5 299.6 16 224 16 141.5 16 68.5 63.1 34.6 136.5c-5.5 11.9-.3 26.2 11.6 31.7s26.2.3 31.7-11.6C107.6 96.5 160.3 64 224 64zm0 320c-66.3 0-122.7-38.5-149.7-96H128c13.3 0 24-10.7 24-24s-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v104c0 13.3 10.7 24 24 24s24-10.7 24-24v-36.2C81.4 390.5 148.4 432 224 432c82.5 0 155.5-47.1 189.4-120.5 5.5-11.9.3-26.2-11.6-31.7s-26.2-.3-31.7 11.6C340.4 351.5 287.7 384 224 384z'/></svg>") center center no-repeat;
        background-size: 25px 25px;
    }

.ist-lesson-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21.875" height="25" viewBox="0 0 21.875 25"><defs><style>.ist-1 {fill: rgb(136,136,136);} </style></defs><path id="ist_lesson_left_icon" class="ist-1" d="M17.383,7.813H9.18a.588.588,0,0,1-.586-.586V6.836A.588.588,0,0,1,9.18,6.25h8.2a.588.588,0,0,1,.586.586v.391A.588.588,0,0,1,17.383,7.813Zm.586,2.539V9.961a.588.588,0,0,0-.586-.586H9.18a.588.588,0,0,0-.586.586v.391a.588.588,0,0,0,.586.586h8.2A.588.588,0,0,0,17.969,10.352Zm3.159,13.086h.161a.588.588,0,0,1,.586.586v.391a.588.588,0,0,1-.586.586H3.906A3.905,3.905,0,0,1,0,21.094V3.906A3.905,3.905,0,0,1,3.906,0H20.7a1.169,1.169,0,0,1,1.172,1.172V19.141a1.177,1.177,0,0,1-.728,1.084A9.293,9.293,0,0,0,21.128,23.438ZM6.25,18.75H20.313V1.563H6.25Zm-4.687.781a3.907,3.907,0,0,1,2.344-.781h.781V1.563H3.906A2.344,2.344,0,0,0,1.563,3.906Zm18.179,3.906a11.162,11.162,0,0,1,0-3.125H3.906c-3.125,0-3.125,3.125,0,3.125Z"/></svg>') center center no-repeat;
}

    .ist-lesson-icon:hover,
    .ist-lesson-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21.875" height="25" viewBox="0 0 21.875 25"><defs><style>.ist-1 {fill: rgb(255,255,255);} </style></defs><path id="ist_lesson_left_icon" class="ist-1" d="M17.383,7.813H9.18a.588.588,0,0,1-.586-.586V6.836A.588.588,0,0,1,9.18,6.25h8.2a.588.588,0,0,1,.586.586v.391A.588.588,0,0,1,17.383,7.813Zm.586,2.539V9.961a.588.588,0,0,0-.586-.586H9.18a.588.588,0,0,0-.586.586v.391a.588.588,0,0,0,.586.586h8.2A.588.588,0,0,0,17.969,10.352Zm3.159,13.086h.161a.588.588,0,0,1,.586.586v.391a.588.588,0,0,1-.586.586H3.906A3.905,3.905,0,0,1,0,21.094V3.906A3.905,3.905,0,0,1,3.906,0H20.7a1.169,1.169,0,0,1,1.172,1.172V19.141a1.177,1.177,0,0,1-.728,1.084A9.293,9.293,0,0,0,21.128,23.438ZM6.25,18.75H20.313V1.563H6.25Zm-4.687.781a3.907,3.907,0,0,1,2.344-.781h.781V1.563H3.906A2.344,2.344,0,0,0,1.563,3.906Zm18.179,3.906a11.162,11.162,0,0,1,0-3.125H3.906c-3.125,0-3.125,3.125,0,3.125Z"/></svg>') center center no-repeat;
    }

.ist-analytics-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.125" height="25" viewBox="0 0 28.125 25"> <path id="analytics" d="M3.906,17.188H.781A.781.781,0,0,0,0,17.969v6.25A.781.781,0,0,0,.781,25H3.906a.781.781,0,0,0,.781-.781v-6.25A.781.781,0,0,0,3.906,17.188Zm-.781,6.25H1.563V18.75H3.125ZM27.344,9.375H24.219a.781.781,0,0,0-.781.781V24.219a.781.781,0,0,0,.781.781h3.125a.781.781,0,0,0,.781-.781V10.156A.781.781,0,0,0,27.344,9.375Zm-.781,14.063H25v-12.5h1.563ZM24.549,4.33a2.339,2.339,0,1,0-1.112-1.986,2.318,2.318,0,0,0,.138.764L19.2,6.607a2.3,2.3,0,0,0-2.464,0l-4.375-3.5a2.316,2.316,0,0,0,.138-.764,2.344,2.344,0,1,0-4.453,1l-4.7,4.7a2.339,2.339,0,1,0,1.339,2.109,2.321,2.321,0,0,0-.234-1l4.7-4.7a2.287,2.287,0,0,0,2.237-.124l4.375,3.5a2.344,2.344,0,1,0,4.411,0l4.375-3.5Zm1.232-2.768A.781.781,0,1,1,25,2.344.782.782,0,0,1,25.781,1.563ZM2.344,10.938a.781.781,0,1,1,.781-.781A.782.782,0,0,1,2.344,10.938Zm7.813-7.812a.781.781,0,1,1,.781-.781A.782.782,0,0,1,10.156,3.125Zm7.813,6.25a.781.781,0,1,1,.781-.781A.782.782,0,0,1,17.969,9.375Zm-6.25,0H8.594a.781.781,0,0,0-.781.781V24.219A.781.781,0,0,0,8.594,25h3.125a.781.781,0,0,0,.781-.781V10.156A.781.781,0,0,0,11.719,9.375Zm-.781,14.063H9.375v-12.5h1.563Zm8.594-7.812H16.406a.781.781,0,0,0-.781.781v7.813a.781.781,0,0,0,.781.781h3.125a.781.781,0,0,0,.781-.781V16.406A.781.781,0,0,0,19.531,15.625Zm-.781,7.813H17.188v-6.25H18.75Z" fill="rgb(136,136,136)"/> </svg> ') center center no-repeat;
}

    .ist-analytics-icon:hover,
    .ist-analytics-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.125" height="25" viewBox="0 0 28.125 25"> <path id="analytics" d="M3.906,17.188H.781A.781.781,0,0,0,0,17.969v6.25A.781.781,0,0,0,.781,25H3.906a.781.781,0,0,0,.781-.781v-6.25A.781.781,0,0,0,3.906,17.188Zm-.781,6.25H1.563V18.75H3.125ZM27.344,9.375H24.219a.781.781,0,0,0-.781.781V24.219a.781.781,0,0,0,.781.781h3.125a.781.781,0,0,0,.781-.781V10.156A.781.781,0,0,0,27.344,9.375Zm-.781,14.063H25v-12.5h1.563ZM24.549,4.33a2.339,2.339,0,1,0-1.112-1.986,2.318,2.318,0,0,0,.138.764L19.2,6.607a2.3,2.3,0,0,0-2.464,0l-4.375-3.5a2.316,2.316,0,0,0,.138-.764,2.344,2.344,0,1,0-4.453,1l-4.7,4.7a2.339,2.339,0,1,0,1.339,2.109,2.321,2.321,0,0,0-.234-1l4.7-4.7a2.287,2.287,0,0,0,2.237-.124l4.375,3.5a2.344,2.344,0,1,0,4.411,0l4.375-3.5Zm1.232-2.768A.781.781,0,1,1,25,2.344.782.782,0,0,1,25.781,1.563ZM2.344,10.938a.781.781,0,1,1,.781-.781A.782.782,0,0,1,2.344,10.938Zm7.813-7.812a.781.781,0,1,1,.781-.781A.782.782,0,0,1,10.156,3.125Zm7.813,6.25a.781.781,0,1,1,.781-.781A.782.782,0,0,1,17.969,9.375Zm-6.25,0H8.594a.781.781,0,0,0-.781.781V24.219A.781.781,0,0,0,8.594,25h3.125a.781.781,0,0,0,.781-.781V10.156A.781.781,0,0,0,11.719,9.375Zm-.781,14.063H9.375v-12.5h1.563Zm8.594-7.812H16.406a.781.781,0,0,0-.781.781v7.813a.781.781,0,0,0,.781.781h3.125a.781.781,0,0,0,.781-.781V16.406A.781.781,0,0,0,19.531,15.625Zm-.781,7.813H17.188v-6.25H18.75Z" fill="rgb(255,255,255)"/> </svg> ') center center no-repeat;
    }

.ist-correspondence-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="33.333" height="25" viewBox="0 0 33.333 25"> <path id="correspondence" d="M30.208,64H3.125A3.126,3.126,0,0,0,0,67.125v18.75A3.126,3.126,0,0,0,3.125,89H30.208a3.126,3.126,0,0,0,3.125-3.125V67.125A3.126,3.126,0,0,0,30.208,64ZM3.125,66.083H30.208a1.045,1.045,0,0,1,1.042,1.042v2.7c-1.426,1.2-3.464,2.865-9.8,7.9-1.1.872-3.268,2.975-4.779,2.949-1.51.026-3.685-2.077-4.779-2.949-6.341-5.033-8.379-6.693-9.8-7.9v-2.7A1.045,1.045,0,0,1,3.125,66.083ZM30.208,86.917H3.125a1.045,1.045,0,0,1-1.042-1.042V72.529c1.484,1.217,3.828,3.1,8.509,6.816,1.335,1.068,3.691,3.418,6.074,3.4,2.37.02,4.707-2.311,6.074-3.4,4.681-3.717,7.025-5.6,8.509-6.816V85.875A1.045,1.045,0,0,1,30.208,86.917Z" transform="translate(0 -64)" fill="rgb(136,136,136)"/> </svg> ') center center no-repeat;
}

    .ist-correspondence-icon:hover,
    .ist-correspondence-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="33.333" height="25" viewBox="0 0 33.333 25"> <path id="correspondence" d="M30.208,64H3.125A3.126,3.126,0,0,0,0,67.125v18.75A3.126,3.126,0,0,0,3.125,89H30.208a3.126,3.126,0,0,0,3.125-3.125V67.125A3.126,3.126,0,0,0,30.208,64ZM3.125,66.083H30.208a1.045,1.045,0,0,1,1.042,1.042v2.7c-1.426,1.2-3.464,2.865-9.8,7.9-1.1.872-3.268,2.975-4.779,2.949-1.51.026-3.685-2.077-4.779-2.949-6.341-5.033-8.379-6.693-9.8-7.9v-2.7A1.045,1.045,0,0,1,3.125,66.083ZM30.208,86.917H3.125a1.045,1.045,0,0,1-1.042-1.042V72.529c1.484,1.217,3.828,3.1,8.509,6.816,1.335,1.068,3.691,3.418,6.074,3.4,2.37.02,4.707-2.311,6.074-3.4,4.681-3.717,7.025-5.6,8.509-6.816V85.875A1.045,1.045,0,0,1,30.208,86.917Z" transform="translate(0 -64)" fill="rgb(255,255,255)"/> </svg> ') center center no-repeat;
}

.ist-bim-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.192" height="25" viewBox="0 0 25.192 25"> <path id="bim" d="M11.538,2.135a3.139,3.139,0,0,1,2.121,0L23.106,5.51a3.15,3.15,0,0,1,2.086,2.967V20.423A3.152,3.152,0,0,1,23.1,23.39l-9.447,3.375a3.139,3.139,0,0,1-2.121,0L2.086,23.39A3.15,3.15,0,0,1,0,20.423V8.477A3.152,3.152,0,0,1,2.091,5.51l9.447-3.375ZM12.6,5.1,4.049,8.152,12.6,11.2l8.547-3.051ZM14.17,23.238l7.872-2.809v-9.25L14.17,13.987Z" transform="translate(0 -1.95)" fill="rgb(136,136,136)"/> </svg> ') center center no-repeat;
}

    .ist-bim-icon:hover,
    .ist-bim-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.192" height="25" viewBox="0 0 25.192 25"> <path id="bim" d="M11.538,2.135a3.139,3.139,0,0,1,2.121,0L23.106,5.51a3.15,3.15,0,0,1,2.086,2.967V20.423A3.152,3.152,0,0,1,23.1,23.39l-9.447,3.375a3.139,3.139,0,0,1-2.121,0L2.086,23.39A3.15,3.15,0,0,1,0,20.423V8.477A3.152,3.152,0,0,1,2.091,5.51l9.447-3.375ZM12.6,5.1,4.049,8.152,12.6,11.2l8.547-3.051ZM14.17,23.238l7.872-2.809v-9.25L14.17,13.987Z" transform="translate(0 -1.95)" fill="rgb(255,255,255)"/> </svg> ') center center no-repeat;
}

.ist-resource-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.192" height="25" viewBox="0 0 640 512"><path d="M144 160A80 80 0 1 0 144 0a80 80 0 1 0 0 160zm368 0A80 80 0 1 0 512 0a80 80 0 1 0 0 160zM0 298.7C0 310.4 9.6 320 21.3 320l213.3 0c.2 0 .4 0 .7 0c-26.6-23.5-43.3-57.8-43.3-96c0-7.6 .7-15 1.9-22.3c-13.6-6.3-28.7-9.7-44.6-9.7l-42.7 0C47.8 192 0 239.8 0 298.7zM320 320c24 0 45.9-8.8 62.7-23.3c2.5-3.7 5.2-7.3 8-10.7c2.7-3.3 5.7-6.1 9-8.3C410 262.3 416 243.9 416 224c0-53-43-96-96-96s-96 43-96 96s43 96 96 96zm65.4 60.2c-10.3-5.9-18.1-16.2-20.8-28.2l-103.2 0C187.7 352 128 411.7 128 485.3c0 14.7 11.9 26.7 26.7 26.7l300.6 0c-2.1-5.2-3.2-10.9-3.2-16.4l0-3c-1.3-.7-2.7-1.5-4-2.3l-2.6 1.5c-16.8 9.7-40.5 8-54.7-9.7c-4.5-5.6-8.6-11.5-12.4-17.6l-.1-.2-.1-.2-2.4-4.1-.1-.2-.1-.2c-3.4-6.2-6.4-12.6-9-19.3c-8.2-21.2 2.2-42.6 19-52.3l2.7-1.5c0-.8 0-1.5 0-2.3s0-1.5 0-2.3l-2.7-1.5zM533.3 192l-42.7 0c-15.9 0-31 3.5-44.6 9.7c1.3 7.2 1.9 14.7 1.9 22.3c0 17.4-3.5 33.9-9.7 49c2.5 .9 4.9 2 7.1 3.3l2.6 1.5c1.3-.8 2.6-1.6 4-2.3l0-3c0-19.4 13.3-39.1 35.8-42.6c7.9-1.2 16-1.9 24.2-1.9s16.3 .6 24.2 1.9c22.5 3.5 35.8 23.2 35.8 42.6l0 3c1.3 .7 2.7 1.5 4 2.3l2.6-1.5c16.8-9.7 40.5-8 54.7 9.7c2.3 2.8 4.5 5.8 6.6 8.7c-2.1-57.1-49-102.7-106.6-102.7zm91.3 163.9c6.3-3.6 9.5-11.1 6.8-18c-2.1-5.5-4.6-10.8-7.4-15.9l-2.3-4c-3.1-5.1-6.5-9.9-10.2-14.5c-4.6-5.7-12.7-6.7-19-3l-2.9 1.7c-9.2 5.3-20.4 4-29.6-1.3s-16.1-14.5-16.1-25.1l0-3.4c0-7.3-4.9-13.8-12.1-14.9c-6.5-1-13.1-1.5-19.9-1.5s-13.4 .5-19.9 1.5c-7.2 1.1-12.1 7.6-12.1 14.9l0 3.4c0 10.6-6.9 19.8-16.1 25.1s-20.4 6.6-29.6 1.3l-2.9-1.7c-6.3-3.6-14.4-2.6-19 3c-3.7 4.6-7.1 9.5-10.2 14.6l-2.3 3.9c-2.8 5.1-5.3 10.4-7.4 15.9c-2.6 6.8 .5 14.3 6.8 17.9l2.9 1.7c9.2 5.3 13.7 15.8 13.7 26.4s-4.5 21.1-13.7 26.4l-3 1.7c-6.3 3.6-9.5 11.1-6.8 17.9c2.1 5.5 4.6 10.7 7.4 15.8l2.4 4.1c3 5.1 6.4 9.9 10.1 14.5c4.6 5.7 12.7 6.7 19 3l2.9-1.7c9.2-5.3 20.4-4 29.6 1.3s16.1 14.5 16.1 25.1l0 3.4c0 7.3 4.9 13.8 12.1 14.9c6.5 1 13.1 1.5 19.9 1.5s13.4-.5 19.9-1.5c7.2-1.1 12.1-7.6 12.1-14.9l0-3.4c0-10.6 6.9-19.8 16.1-25.1s20.4-6.6 29.6-1.3l2.9 1.7c6.3 3.6 14.4 2.6 19-3c3.7-4.6 7.1-9.4 10.1-14.5l2.4-4.2c2.8-5.1 5.3-10.3 7.4-15.8c2.6-6.8-.5-14.3-6.8-17.9l-3-1.7c-9.2-5.3-13.7-15.8-13.7-26.4s4.5-21.1 13.7-26.4l3-1.7zM472 384a40 40 0 1 1 80 0 40 40 0 1 1 -80 0z" fill="rgb(136,136,136)" /></svg>') center center no-repeat;
}

    .ist-resource-icon:hover,
    .ist-resource-icon.active {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.192" height="25" viewBox="0 0 640 512"><path d="M144 160A80 80 0 1 0 144 0a80 80 0 1 0 0 160zm368 0A80 80 0 1 0 512 0a80 80 0 1 0 0 160zM0 298.7C0 310.4 9.6 320 21.3 320l213.3 0c.2 0 .4 0 .7 0c-26.6-23.5-43.3-57.8-43.3-96c0-7.6 .7-15 1.9-22.3c-13.6-6.3-28.7-9.7-44.6-9.7l-42.7 0C47.8 192 0 239.8 0 298.7zM320 320c24 0 45.9-8.8 62.7-23.3c2.5-3.7 5.2-7.3 8-10.7c2.7-3.3 5.7-6.1 9-8.3C410 262.3 416 243.9 416 224c0-53-43-96-96-96s-96 43-96 96s43 96 96 96zm65.4 60.2c-10.3-5.9-18.1-16.2-20.8-28.2l-103.2 0C187.7 352 128 411.7 128 485.3c0 14.7 11.9 26.7 26.7 26.7l300.6 0c-2.1-5.2-3.2-10.9-3.2-16.4l0-3c-1.3-.7-2.7-1.5-4-2.3l-2.6 1.5c-16.8 9.7-40.5 8-54.7-9.7c-4.5-5.6-8.6-11.5-12.4-17.6l-.1-.2-.1-.2-2.4-4.1-.1-.2-.1-.2c-3.4-6.2-6.4-12.6-9-19.3c-8.2-21.2 2.2-42.6 19-52.3l2.7-1.5c0-.8 0-1.5 0-2.3s0-1.5 0-2.3l-2.7-1.5zM533.3 192l-42.7 0c-15.9 0-31 3.5-44.6 9.7c1.3 7.2 1.9 14.7 1.9 22.3c0 17.4-3.5 33.9-9.7 49c2.5 .9 4.9 2 7.1 3.3l2.6 1.5c1.3-.8 2.6-1.6 4-2.3l0-3c0-19.4 13.3-39.1 35.8-42.6c7.9-1.2 16-1.9 24.2-1.9s16.3 .6 24.2 1.9c22.5 3.5 35.8 23.2 35.8 42.6l0 3c1.3 .7 2.7 1.5 4 2.3l2.6-1.5c16.8-9.7 40.5-8 54.7 9.7c2.3 2.8 4.5 5.8 6.6 8.7c-2.1-57.1-49-102.7-106.6-102.7zm91.3 163.9c6.3-3.6 9.5-11.1 6.8-18c-2.1-5.5-4.6-10.8-7.4-15.9l-2.3-4c-3.1-5.1-6.5-9.9-10.2-14.5c-4.6-5.7-12.7-6.7-19-3l-2.9 1.7c-9.2 5.3-20.4 4-29.6-1.3s-16.1-14.5-16.1-25.1l0-3.4c0-7.3-4.9-13.8-12.1-14.9c-6.5-1-13.1-1.5-19.9-1.5s-13.4 .5-19.9 1.5c-7.2 1.1-12.1 7.6-12.1 14.9l0 3.4c0 10.6-6.9 19.8-16.1 25.1s-20.4 6.6-29.6 1.3l-2.9-1.7c-6.3-3.6-14.4-2.6-19 3c-3.7 4.6-7.1 9.5-10.2 14.6l-2.3 3.9c-2.8 5.1-5.3 10.4-7.4 15.9c-2.6 6.8 .5 14.3 6.8 17.9l2.9 1.7c9.2 5.3 13.7 15.8 13.7 26.4s-4.5 21.1-13.7 26.4l-3 1.7c-6.3 3.6-9.5 11.1-6.8 17.9c2.1 5.5 4.6 10.7 7.4 15.8l2.4 4.1c3 5.1 6.4 9.9 10.1 14.5c4.6 5.7 12.7 6.7 19 3l2.9-1.7c9.2-5.3 20.4-4 29.6 1.3s16.1 14.5 16.1 25.1l0 3.4c0 7.3 4.9 13.8 12.1 14.9c6.5 1 13.1 1.5 19.9 1.5s13.4-.5 19.9-1.5c7.2-1.1 12.1-7.6 12.1-14.9l0-3.4c0-10.6 6.9-19.8 16.1-25.1s20.4-6.6 29.6-1.3l2.9 1.7c6.3 3.6 14.4 2.6 19-3c3.7-4.6 7.1-9.4 10.1-14.5l2.4-4.2c2.8-5.1 5.3-10.3 7.4-15.8c2.6-6.8-.5-14.3-6.8-17.9l-3-1.7c-9.2-5.3-13.7-15.8-13.7-26.4s4.5-21.1 13.7-26.4l3-1.7zM472 384a40 40 0 1 1 80 0 40 40 0 1 1 -80 0z" fill="rgb(255,255,255)" /></svg>') center center no-repeat;
}

.ist_font {
    font-family: var(--main-font);
}

.ist-min-h-40 {
    min-height: 40px;
    height: auto;
}

.ist-w-130 {
    width: 130px;
}

.ist-hidden {
    display: none !important;
}

.error {
    color: red;
}

.ist-label {
    line-height: 30px;
    margin-right: 5px;
    color: #888888;
    /*min-width:100px;*/
    text-align: right;
}

.ist-select {
    max-width: 160px !important;
    width: 130px !important;
    height: 30px !important;
}

/* Shared layout primitives — DESIGN-SYSTEM §5 */
.ist-page {
    padding: var(--ist-space-5) var(--ist-space-4);
}

.ist-settings-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.ist-card {
    background: var(--ist-surface);
    border: 1px solid var(--ist-border);
    border-radius: var(--ist-radius-lg);
    box-shadow: var(--ist-shadow-1);
}

.ist-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--ist-space-4);
}

/* Base = teal (an informational rule or note); .is-warning = amber for a setting whose change
   has a consequence. Carries no margin on purpose — most hosts place it in a flex-gap layout,
   so spacing comes from the container. See DESIGN-SYSTEM.md §5. */
.ist-notice {
    display: flex;
    align-items: center;
    gap: var(--ist-space-2);
    padding: var(--ist-space-2) var(--ist-space-3);
    font-size: var(--ist-font-size-sm);
    line-height: var(--ist-line-height-normal);
    color: var(--ist-text-muted);
    background: var(--ist-primary-50);
    border: 1px solid var(--ist-primary-100);
    border-radius: var(--ist-radius-md);
}

.ist-notice:has(.ist-notice-title),
.ist-notice:has(> div),
.ist-notice:has(> ul) {
    align-items: flex-start;
}

.ist-notice > i {
    flex: 0 0 auto;
    color: var(--ist-primary-700);
}

.ist-notice:has(.ist-notice-title) > i,
.ist-notice:has(> div) > i,
.ist-notice:has(> ul) > i {
    margin-top: 2px;
}

.ist-notice.is-warning {
    background: var(--ist-warning-bg);
    border-color: color-mix(in srgb, var(--ist-warning) 35%, white);
    color: var(--ist-neutral-700);
}

.ist-notice.is-warning > i {
    color: var(--ist-warning);
}

.ist-notice.is-danger {
    background: var(--ist-danger-bg);
    border-color: color-mix(in srgb, var(--ist-danger) 35%, white);
    color: var(--ist-neutral-700);
}

.ist-notice.is-danger > i {
    color: var(--ist-danger);
}

.ist-notice-title {
    margin: 0 0 var(--ist-space-1);
    font-weight: var(--ist-font-weight-semibold);
    color: var(--ist-text);
}

.ist-field-label {
    display: block;
    font-size: var(--ist-font-size-xs);
    font-weight: var(--ist-font-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ist-text-muted);
}

/* Stacked form field (label above control) — DESIGN-SYSTEM §5. Pair with .ist-fields for input branding. */
.ist-field {
    display: flex;
    flex-direction: column;
    gap: var(--ist-space-2);
    min-width: 0;
}

.ist-field .ist-field-label {
    margin-bottom: 0;
}

/* Transfer list (two lists with move buttons between them) — DESIGN-SYSTEM §5. */
.ist-transfer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--ist-space-3);
    min-width: 0;
}

.ist-transfer-side {
    display: flex;
    flex-direction: column;
    gap: var(--ist-space-2);
    min-width: 0;
}

.ist-transfer-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ist-space-1);
}

/* Branded form fields — DESIGN-SYSTEM §5. Apply to a form/container to style descendant Bootstrap inputs. */
.ist-fields .form-control,
.ist-fields .form-select {
    border-color: var(--ist-border-strong);
}

.ist-fields .form-control:focus,
.ist-fields .form-select:focus {
    border-color: var(--ist-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--ist-primary-rgb), .15);
}

/* Sub-page header (icon + title + actions) — DESIGN-SYSTEM §6 */
.ist-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ist-space-4);
    padding-bottom: var(--ist-space-4);
    margin-bottom: var(--ist-space-5);
    border-bottom: 1px solid var(--ist-border);
}

.ist-page-id {
    display: flex;
    align-items: center;
    gap: var(--ist-space-3);
    min-width: 0;
}

.ist-page-ic {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--ist-radius-md);
    display: grid;
    place-items: center;
    background: var(--ist-primary-50);
    color: var(--ist-primary-700);
    font-size: var(--ist-font-size-lg);
}

.ist-page-title {
    margin: 0;
    font-size: var(--ist-font-size-xl);
    font-weight: var(--ist-font-weight-semibold);
    color: var(--ist-neutral-900);
    line-height: var(--ist-line-height-tight);
}

.ist-page-actions {
    display: flex;
    align-items: stretch;
    gap: var(--ist-space-2);
    flex: 0 0 auto;
}

/* align-items: stretch lets icon-only buttons take a labeled button's height, so
   a mixed toolbar (icon Add/Delete + labeled Save) lines up without a magic pixel value. */
.ist-page-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ist-space-2);
}

@media (max-width: 640px) {
    .ist-page-head {
        flex-wrap: wrap;
    }
}

/* Tinted stage/status pill in the item's own (data-driven) colour. The tint / border /
   text colours come inline (see IstGlobal.Utilities.stagePillStyle); this carries only the
   shape. Long names ellipsize with the full name kept in the title. DESIGN-SYSTEM §5. */
.ist-stage-pill {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    padding: 1px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ist-stage-pill.is-neutral {
    background-color: var(--ist-surface-sunken);
    border-color: var(--ist-border);
    color: var(--ist-text-muted);
}

.ist-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 var(--ist-space-2);
    border-radius: var(--ist-radius-pill);
    background-color: var(--ist-count-pill-bg);
    border: 1px solid var(--ist-count-pill-border);
    color: var(--ist-count-pill-text);
    font-size: var(--ist-font-size-xs);
    font-weight: var(--ist-font-weight-semibold);
    line-height: 1.6;
}

/* Icon-only destructive action: neutral at rest, danger-tinted on hover/focus. Compose on an
   <icon-button> (or any .btn) so a row/toolbar delete reads the same everywhere. */
.btn.is-danger:hover,
.btn.is-danger:focus-visible {
    background-color: var(--ist-danger-bg);
    color: var(--ist-danger);
}

/* Interactive card tile (icon + label) — works as <a> or <button>. Compose: ist-card ist-tile */
.ist-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ist-space-3);
    width: 100%;
    padding: var(--ist-space-5) var(--ist-space-4);
    min-height: 118px;
    text-align: center;
    color: var(--ist-text);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--ist-duration-fast) var(--ist-ease-standard),
                box-shadow var(--ist-duration-fast) var(--ist-ease-standard),
                transform var(--ist-duration-fast) var(--ist-ease-standard);
}

.ist-tile:hover {
    border-color: var(--ist-primary-300);
    box-shadow: var(--ist-shadow-3);
    transform: translateY(-2px);
    color: var(--ist-text);
}

.ist-tile:focus-visible {
    outline: 2px solid var(--ist-primary-600);
    outline-offset: 2px;
}

.ist-tile-icon {
    font-size: var(--ist-font-size-2xl);
    color: var(--ist-text-muted);
    transition: color var(--ist-duration-fast) var(--ist-ease-standard);
}

.ist-tile:hover .ist-tile-icon {
    color: var(--ist-primary-700);
}

.ist-tile-label {
    font-size: var(--ist-font-size-sm);
    font-weight: var(--ist-font-weight-medium);
    color: var(--ist-text);
    line-height: var(--ist-line-height-tight);
}

@media (max-width: 480px) {
    .ist-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

.ist-readonly {
    background-color: #f5f6fd !important;
    color: #444 !important;
    cursor: not-allowed;
}

/* ============================================================
   Modern toggle look for ALL dxSwitch — applied system-wide so
   forms and every other screen stay consistent. Keeps DevExtreme's
   slide mechanism; only rounds the track, recolors it, hides the
   inner ON/OFF text, and makes the knob a white circle.
   !important is used to win over DevExtreme's many state rules
   (hover/focus/active) so the look holds in every state.
   ============================================================ */
.dx-switch-container {
    border-radius: 12px !important;
    border-color: transparent !important;
    background: #e9edf2 !important;
}

/* Hide the inner ON/OFF labels for a clean track. */
.dx-switch-on,
.dx-switch-off {
    color: transparent !important;
}

/* White circular knob with a soft shadow, in every state.
   Force a square box (14x14) so border-radius:50% renders a true circle —
   the handle is 14x18 by default, so height is pinned and vertically centered. */
.dx-switch-handle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    background-color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ON state: track turns green (active / yes). */
.dx-switch-on-value .dx-switch-container {
    background: rgb(37, 205, 176) !important;
    border-color: rgb(37, 205, 176) !important;
}

.ist-select-sm {
    max-width: 80px !important;
    width: 80px !important;
    height: 30px !important;
}

.ist-area-icon-3p {
    font-size: 40px !important;
    line-height: 0.5 !important;
}

.ist-area-icon-element {
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.ist-header {
    display: flex;
    z-index: 95;
    height: var(--ist-header-h);
    box-sizing: border-box;
    background-color: #F4F7FA; /* match the page background (body) so chrome is seamless */
    color: var(--ist-text);
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    position: fixed;
    top: 0;
    left: var(--ist-rail-w);
    right: 0;
}

.ist-top-toolbar {
    z-index: 90;
    background-color: #F4F7FA; /* match the page background (body) so chrome is seamless */
    padding: 4px 16px;
    position: fixed;
    top: var(--ist-header-h);
    left: var(--ist-rail-w);
    right: 0;
    box-sizing: border-box;
}

.ist-content {
    margin-top: var(--ist-header-h);
    padding: 6px 16px;
    flex-grow: 1;
    overflow-y: auto;
    margin-left: var(--ist-rail-w);
}

.ist-title {
    color: var(--ist-text);
    max-width: 40%;
    min-width: 0;
    font-size: var(--ist-font-size-lg);
    font-weight: var(--ist-font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .ist-title {
        max-width: 45%;
    }
}

.ist-breadcrumb-back {
    display: inline-flex;
    align-items: center;
    gap: var(--ist-space-2);
    color: var(--ist-text-muted);
    font-size: var(--ist-font-size-sm);
    font-weight: var(--ist-font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.ist-breadcrumb-back:hover {
    color: var(--ist-primary-700);
}

/* App shell: the static left navigation rail (fixed, --ist-rail-w wide). Content margin,
   the header/footer left offset and Common.js width math (which reads .ist-sidebar
   offsetWidth) all derive from this width. .ist-sidebar-panel is the coloured surface. */
.ist-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ist-rail-w);
    height: 100%;
    z-index: 99;
    overflow: visible;
    background: transparent;
}

.ist-sidebar-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ist-rail-w);
    display: flex;
    flex-direction: column;
    background: var(--ist-rail-bg);
    box-shadow: 4px 0 18px rgba(0, 0, 0, .38);
    overflow: hidden;
}

.ist-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 10px 6px 6px;
}

    .ist-logo a {
        display: inline-flex;
        align-items: center;
    }

    .ist-logo a img {
        max-height: 34px;
        max-width: 100%;
        vertical-align: middle;
    }

.ist-nav {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 0;
}

.ist-nav::-webkit-scrollbar {
    width: 7px;
}

.ist-nav::-webkit-scrollbar-track {
    background: transparent;
}

.ist-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
    border-radius: 5px;
}

/* Nav rows and the background-task row share this layout: a fixed-size glyph box on the
   left keeps every module icon the same visual size regardless of the source SVG's
   aspect ratio. */
.ist-sidebar .ist-sidebar-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    margin: 2px 0;
    /* 16px keeps the 24px glyph centered in the 56px rail (16 + 24 + 16) */
    padding: 0 0 0 16px;
    cursor: pointer;
    text-decoration: none;
    opacity: .72;
    transition: opacity var(--ist-duration-fast) var(--ist-ease-standard),
                background-color var(--ist-duration-fast) var(--ist-ease-standard);
}

    .ist-sidebar .ist-sidebar-icon:hover,
    .ist-sidebar .ist-sidebar-icon.active {
        opacity: 1;
        background-color: rgba(255, 255, 255, .12);
    }

    .ist-sidebar .ist-sidebar-icon.active {
        box-shadow: inset 3px 0 0 0 var(--ist-accent);
    }

/* The glyph carries the module .ist-*-icon background image, normalised to a uniform
   24×24 box (contain = identical footprint for every aspect ratio) and repainted white
   via the filter so the baked grey/white SVGs all read as one clean icon on the rail. */
.ist-sidebar .ist-sidebar-glyph {
    flex: 0 0 24px;
    height: 24px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: brightness(0) invert(1);
}

/* Background-task row pinned at the foot of the rail (never scrolls away). Same row
   styling as the nav; its icon is a font glyph coloured directly (no filter). The task
   list popup inside stays position:fixed so it is not clipped by the panel. */
.ist-sidebar-foot {
    flex: 0 0 auto;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.ist-sidebar-foot-btn {
    border: 0;
    background: transparent;
    font: inherit;
}

.ist-sidebar-foot-glyph {
    flex: 0 0 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.ist-sidebar-foot-badge {
    position: absolute;
    top: 5px;
    left: 30px;
    font-size: 9px;
    padding: 1px 5px;
    line-height: 1.1;
}

.ist-right-sidebar {
    width: 22px;
    background: #F4F7FA;
    position: fixed;
    right: 0px;
    text-align: center;
    height: 100%;
    z-index: 85;
    overflow: hidden;
    top: 0;
}

.ist-slick-slider-container {
    position: absolute;
    top: 110px;
    height: 320px;
    width: 20px;
    overflow: hidden;
}

.ist-slick-slider-dot {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path id="dot" d="M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Z" transform="translate(-8 -8)" fill="rgb(136,136,136)"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom: 8px;
    cursor: pointer;
    margin-bottom: 5px;
}

.ist-dot-pasive {
    opacity: 0.5;
}

.ist-dot-active {
    opacity: 1;
}

.ist-dot-small {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 8 8"><path id="dot" d="M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Z" transform="translate(-8 -8)" fill="rgb(136,136,136)"/></svg>');
    opacity: 0.5;
}

/* Header dropdown panels (downloads, notifications, announcements) — one floating-card family. */
.ist-announcement-outer,
.ist-notification-outer,
.ist-backgroundTask-outer {
    position: fixed;
    top: 35px;
    right: 20px;
    width: 35%;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--ist-surface);
    border: 1px solid var(--ist-border);
    box-shadow: var(--ist-shadow-4);
    z-index: var(--ist-z-modal);
    padding: var(--ist-space-4);
    border-radius: var(--ist-radius-lg);
    display: none;
    min-height: 220px;
}

@media (max-width: 768px) {
    .ist-announcement-outer,
    .ist-notification-outer,
    .ist-backgroundTask-outer {
        width: 75%;
    }
}

.ist-grid-link-cell a {
    color: #0dcaf0 !important;
}

    .ist-grid-link-cell a:focus,
    .ist-grid-link-cell a:hover {
        color: #3dd5f3 !important;
    }

.ist-progress-container {
    display: inline-block;
    visibility: hidden;
    border: 1px solid #0d8a51;
    width: 65%;
    height: 18px;
    margin-top: 2px;
    border-radius: 8px;
    overflow: hidden;
}

.ist-progress-title {
    font-size: 15px;
    color: black;
}

.ist-progress {
    height: 18px;
    width: 0%;
    margin-top: 18px;
    vertical-align: middle;
    background-color: rgb(4, 166, 0);
}

.ist-progress-info {
    font-size: 15px;
    margin: -20px 0 0 20px;
    color: #122b11;
}

progress {
    text-align: center;
    margin-left: 0;
}

    progress:after {
        content: attr(value)'%';
        position: relative;
        top: 9px;
        color: black;
    }

    progress[value] {
        height: 20px;
    }

        progress[value]::-moz-progress-bar {
            background-image: -moz-linear-gradient(135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left, #09c, #4f4);
            border-radius: 2px;
            background-size: 35px 20px, 100% 100%, 100% 100%;
        }

        progress[value]::-webkit-progress-value {
            background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44);
            border-radius: 2px;
            background-size: 35px 20px, 100% 100%, 100% 100%;
        }

.button_upload,
.button_clear {
    display: none;
}

.ist-footer {
    z-index: 95;
    padding: 0 16px;
    height: var(--ist-footer-h);
    box-sizing: border-box;
    background-color: #F4F7FA; /* match the page background (body) so chrome is seamless */
    color: var(--ist-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: var(--ist-rail-w);
    right: 0;
}

.ist-footer-status-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ist-footer-feedback-container,
.ist-footer-info-container {
    flex-grow: 1;
    max-width: 250px;
}

.ist-footer-info-container {
    flex-grow: 1;
    position: relative;
    z-index: 1;
    min-width: 250px;
    border-radius: 10px;
    overflow: hidden;
    display: none;
}

.ist-footer-info {
    height: 20px;
    width: 100%;
    background: #aaaaaa;
}

.ist-footer-info-label {
    position: absolute;
    margin-top: 1px;
    top: 50%;
    left: 10px;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

    .ist-footer-info-label .ist-footer-info-text {
        flex-shrink: 0;
        margin-right: 10px;
    }

    .ist-footer-info-label .ist-footer-info-description {
        font-size: 0.75rem;
        color: white;
        font-style: italic;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        max-width: 200px;
        cursor: pointer;
    }

.ist-footer-tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    display: none;
}

.ist-footer-description-btn {
    position: relative;
    cursor: pointer;
}

.ist-footer-operations-container {
    position: fixed;
    bottom: 40px;
    left: 100px;
    width: 400px;
    z-index: 1050;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px #dddddd solid;
    padding: 10px;
    background-color: #fff;
    display: none;
}

.ist-footer-toggle-button {
    z-index: 2;
}

.ist-session-timer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ist-timeout-title {
    font-size: var(--ist-font-size-xs);
    font-family: var(--main-font);
    color: var(--ist-text-muted);
    white-space: nowrap;
    line-height: 1;
}

.ist-timeout-title:empty {
    display: none;
}

.ist-timeout-progress-container {
    width: 88px;
    height: 6px;
    background-color: var(--ist-neutral-200);
    border-radius: var(--ist-radius-pill);
    cursor: pointer;
    overflow: hidden;
}

.ist-timeout-progress {
    border-radius: var(--ist-radius-pill);
    background-color: var(--ist-primary-600);
    width: 100%;
    height: 6px;
    position: relative;
}

.ist-toast-list {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1080
}

.ist-in-active-flow {
    color: red !important;
}

.ist-in-not-finished-flow {
    color: orange !important;
}

.ist-map-infobox-info {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    pointer-events: auto !important;
    overflow: hidden;
}

    .ist-map-infobox-info::after {
        content: "";
        position: absolute;
        height: 15px;
        width: 15px;
        bottom: -15px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

.ist-icon-grid {
    color: var(--ist-grid-icon-color);
}

.ist-icon-gray {
    color: var(--icon-gray-color);
}

.ist-icon-project {
    color: var(--ist-project-color);
}

.ist-icon-card {
    color: var(--ist-card-color);
}

.ist-icon-board {
    color: var(--ist-board-icon-color);
}

.ist-icon-cost {
    color: var(--ist-cost-icon-color);
}

.ist-icon-income {
    color: var(--ist-income-icon-color);
}

.ist-icon-resource {
    color: var(--ist-resource-icon-color);
}

.ist-icon-card-item {
    color: var(--ist-card-item-icon-color);
}

/* Generic grid group-header icon color (shared by all grid group icons) */
.ist-icon-grid-group {
    color: var(--ist-grid-group-color);
}

.ist-icon-shared {
    color: var(--ist-shared-icon-color);
}

.ist-icon-comment {
    color: var(--ist-comment-color);
}

.ist-icon-document {
    color: var(--ist-document-icon-color);
}

.ist-icon-document-status {
    color: var(--ist-document-status-color);
}

.ist-icon-folder {
    color: var(--ist-folder-icon-color);
}

.ist-icon-stamp {
    color: var(--ist-stamp-icon-color);
}

.ist-icon-markup {
    color: var(--ist-markup-icon-color);
}

.ist-icon-portfolio {
    color: var(--ist-portfolio-color);
}

.ist-icon-program {
    color: var(--ist-program-color);
}

.ist-icon-risk {
    color: var(--ist-risk-color);
}

.ist-icon-analytic {
    color: var(--ist-analytic-color);
}

.ist-icon-lock {
    color: var(--ist-lock-color);
}

.ist-icon-wbs {
    color: var(--ist-wbs-color);
}

.ist-icon-blue {
    color: var(--ist-blue-color);
}

.ist-icon-global-team {
    color: var(--ist-global-team-color);
}

.ist-icon-project-team {
    color: var(--ist-project-team-color);
}

.ist-icon-privilege-allow {
    color: var(--ist-privilege-allow-color);
}

.ist-icon-privilege-deny {
    color: var(--ist-privilege-deny-color);
}

.ist-icon-privilege-inherit {
    color: var(--ist-privilege-inherit-color);
}

/* Intent-decoupled icon colors — see matching vars in :root */
.ist-icon-lessons {
    color: var(--ist-lessons-color);
}

.ist-icon-dashboard {
    color: var(--ist-dashboard-color);
}

.ist-icon-code {
    color: var(--ist-code-color);
}

.ist-icon-user {
    color: var(--ist-user-color);
}

.ist-icon-actual-cost {
    color: var(--ist-actual-cost-color);
}

.ist-icon-actual-income {
    color: var(--ist-actual-income-color);
}

.ist-icon-ai {
    color: var(--ist-ai-color);
}

.ist-icon-send-via-mail {
    color: var(--ist-send-via-mail-color);
}

.ist-icon-flow {
    color: var(--ist-flow-color);
}

.ist-icon-team {
    color: var(--ist-team-color);
}

.ist-icon-role {
    color: var(--ist-role-color);
}

.ist-icon-bim-comment {
    color: var(--ist-bim-comment-color);
}

.ist-icon-bim-topic {
    color: var(--ist-bim-topic-color);
}

/* Field-type legend markers (colored squares) */
.ist-icon-field-standard {
    color: var(--ist-field-standard-color);
}

.ist-icon-field-udf {
    color: var(--ist-field-udf-color);
}

.ist-icon-field-context {
    color: var(--ist-field-context-color);
}

.ist-icon-issue {
    color: var(--ist-issue-color);
}

.ist-icon-form {
    color: var(--ist-form-color);
}

.ist-icon-viewer {
    color: var(--ist-viewer-color);
}

.ist-icon-spread-sheet {
    color: var(--ist-spread-sheet-color);
}

.ist-icon-attach {
    color: var(--ist-attach-color);
}

.ppp-privilege-icon {
    font-size: 15px;
    cursor: pointer;
}

/*Start Gantt*/
.gantt_container {
    position: absolute !important;
}

.ist-project-gantt-top-container a {
    color: #6c757d !important;
}

    .ist-project-gantt-top-container a:hover {
        color: #ffffff !important;
    }

.ist-gantt-user-container {
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}

.ist-gantt-img {
    margin-left: -9px;
    border-radius: 50%;
    float: left;
    width: 34px;
    height: 34px;
    border: 2px solid white;
}

.ist-gantt-lock-title {
    line-height: 40px;
    font-size: small;
}

.ist-gantt-weekend {
    background: #f4f7f4 !important;
}

ist-project-gantt-top-container::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background-color: #F5F5F5;
}

ist-project-gantt-top-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

ist-project-gantt-top-containers::-webkit-scrollbar-thumb {
    background-color: #1ab394;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}

.ist-gantt-icon {
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    width: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.ist-gantt-add-wbs-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"> <path id="add_wbs" d="M13.393,33.071a.537.537,0,0,1,.536.536V45.393a.537.537,0,0,1-.536.536H1.607a.537.537,0,0,1-.536-.536V33.607a.537.537,0,0,1,.536-.536H13.393m0-1.071H1.607A1.608,1.608,0,0,0,0,33.607V45.393A1.608,1.608,0,0,0,1.607,47H13.393A1.608,1.608,0,0,0,15,45.393V33.607A1.608,1.608,0,0,0,13.393,32Zm-2.009,6.9H8.1V35.616a.4.4,0,0,0-.4-.4H7.3a.4.4,0,0,0-.4.4V38.9H3.616a.4.4,0,0,0-.4.4v.4a.4.4,0,0,0,.4.4H6.9v3.281a.4.4,0,0,0,.4.4h.4a.4.4,0,0,0,.4-.4V40.1h3.281a.4.4,0,0,0,.4-.4v-.4a.4.4,0,0,0-.4-.4Z" transform="translate(0 -32)" fill="rgb(136,136,136)"/></svg>') center center no-repeat;
}

.ist-gantt-add-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"> <path id="add" d="M14.687,70.563H8.438v-6.25A.312.312,0,0,0,8.125,64H6.875a.312.312,0,0,0-.312.313v6.25H.313A.312.312,0,0,0,0,70.875v1.25a.312.312,0,0,0,.313.313h6.25v6.25A.312.312,0,0,0,6.875,79h1.25a.312.312,0,0,0,.313-.312v-6.25h6.25A.312.312,0,0,0,15,72.125v-1.25a.312.312,0,0,0-.313-.312Z" transform="translate(0 -64)" fill="rgb(136,136,136)"/></svg>') center center no-repeat;
}

.ist-gantt-delete-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.126" height="15" viewBox="0 0 13.126 15"> <path id="delete" d="M8.672,12.656h.469a.235.235,0,0,0,.235-.234V4.454a.235.235,0,0,0-.234-.234H8.673a.235.235,0,0,0-.234.235v7.968A.235.235,0,0,0,8.672,12.656Zm-4.688,0h.469a.235.235,0,0,0,.235-.234V4.454a.235.235,0,0,0-.234-.234h-.47a.235.235,0,0,0-.235.234v7.969a.235.235,0,0,0,.235.234ZM12.891,1.875H9.844L8.86.563A1.406,1.406,0,0,0,7.735,0H5.391A1.406,1.406,0,0,0,4.266.562L3.281,1.875H.235A.235.235,0,0,0,0,2.11v.469a.234.234,0,0,0,.235.235h.7v10.78A1.406,1.406,0,0,0,2.344,15h8.438a1.406,1.406,0,0,0,1.406-1.406V2.813h.7a.235.235,0,0,0,.235-.234V2.11A.235.235,0,0,0,12.891,1.875Zm-7.875-.75A.472.472,0,0,1,5.391.938H7.735a.472.472,0,0,1,.375.187l.562.75H4.453ZM11.25,13.594a.469.469,0,0,1-.469.469H2.344a.469.469,0,0,1-.469-.469V2.813H11.25Zm-4.922-.937H6.8a.235.235,0,0,0,.235-.234V4.454A.235.235,0,0,0,6.8,4.22H6.328a.235.235,0,0,0-.234.235v7.968A.235.235,0,0,0,6.328,12.656Z" fill="rgb(136,136,136)"/> </svg> ') center center no-repeat;
}

.gantt_task_progress {
    background: #299cb4 none repeat scroll 0 0;
    text-align: center;
    z-index: 0;
}

/*Todo*/
.gantt_task_line.gantt_todo {
    background-color: #A5E5FF;
    border: 1px solid #66D3FF;
}

    .gantt_task_line.gantt_todo .gantt_task_progress {
        box-shadow: 0 0 0 15px #30AADB inset;
        background-color: #30AADB;
    }

    /*Todo but critical path*/
    .gantt_task_line.gantt_todo.gantt_bar_task.gantt_critical_task {
        background-color: #eb2323;
        border: 1px solid #eb2323;
    }

        .gantt_task_line.gantt_todo.gantt_bar_task.gantt_critical_task .gantt_task_progress {
            box-shadow: 0 0 0 15px #c9302c inset;
            background-color: #c9302c;
        }

/*WBS*/
.gantt_task_line.gantt_wbs {
    background-color: #B158B3 !important;
    border: 1px solid #7E3E7F !important;
}

    .gantt_task_line.gantt_wbs .gantt_task_progress {
        box-shadow: 0 0 0 15px #7E3E7F inset !important;
        background-color: #7E3E7F !important;
    }

/*Task*/
.gantt_task_line.gantt_task {
    background-color: #e04a2e;
    border: 1px solid #AD3924;
}

    .gantt_task_line.gantt_task .gantt_task_progress {
        box-shadow: 0 0 0 15px #AD3924 inset;
        background-color: #AD3924;
    }

    /*Task but critical path*/
    .gantt_task_line.gantt_task.gantt_bar_task.gantt_critical_task {
        background-color: #eb2323;
        border: 1px solid #eb2323;
    }

        .gantt_task_line.gantt_task.gantt_bar_task.gantt_critical_task .gantt_task_progress {
            box-shadow: 0 0 0 15px #c9302c inset;
            background-color: #c9302c;
        }

.gantt_line_wrapper div {
    background-color: #ffa011
}

.gantt_tree_icon_wbs {
    width: 20px;
    height: 100%;
    min-width: 20px;
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.cls-1 {fill: %23b277b3;} </style> </defs> <circle id="Ellipse_1" data-name="Ellipse 1" class="cls-1" cx="7.5" cy="7.5" r="7.5"/></svg>');
    background-repeat: no-repeat;
    background-position: center center
}

.gantt_tree_icon_task {
    width: 20px;
    height: 100%;
    min-width: 20px;
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs> <style>.cls-1 {fill: %23e04a2e; } </style> </defs> <circle id="Ellipse_2" data-name="Ellipse 2" class="cls-1" cx="7.5" cy="7.5" r="7.5"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 5px;
}

.gantt_tree_icon_todo {
    width: 20px;
    height: 100%;
    min-width: 20px;
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path id="todo" d="M13.393,32H1.607A1.608,1.608,0,0,0,0,33.607V45.393A1.608,1.608,0,0,0,1.607,47H13.393A1.608,1.608,0,0,0,15,45.393V33.607A1.608,1.608,0,0,0,13.393,32Zm-.2,13.393H1.808a.2.2,0,0,1-.2-.2V33.808a.2.2,0,0,1,.2-.2H13.192a.2.2,0,0,1,.2.2V45.192A.2.2,0,0,1,13.192,45.393Z" transform="translate(0 -32)" fill="%2356cfff"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom: 5px;
}

.gantt_tree_icon_IBwbs {
    width: 20px;
    height: 100%;
    min-width: 20px;
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"> <defs> <style> .cls-1 {fill: %23deb525;} </style></defs> <g id="Group_1" data-name="Group 1" transform="translate(-241 -517)"> <rect id="Rectangle_311" data-name="Rectangle 311" class="cls-1" width="6.909" height="6.909" transform="translate(241 517)"/><rect id="Rectangle_312" data-name="Rectangle 312" class="cls-1" width="6.909" height="6.909" transform="translate(249.091 517)"/><rect id="Rectangle_313" data-name="Rectangle 313" class="cls-1" width="6.909" height="6.909" transform="translate(249.091 525.091)"/><rect id="Rectangle_314" data-name="Rectangle 314" class="cls-1" width="6.909" height="6.909" transform="translate(241 525.091)"/> </g></svg>');
    background-repeat: no-repeat;
    background-position: center center
}

.gantt_grid_scale .gantt_grid_head_cell {
    border-top: none !important;
    border-right: 1px solid #cecece !important;
}

.gantt_wbs {
    background-color: #B277B3;
    border: 1px solid black;
}

.critical_link {
    background-color: #eb2323;
}

.gantt_task_line.gantt_milestone {
    background-color: #007bff !important;
}

.gantt-start-line {
    background-color: rgba(12, 163, 10, .6) !important;
}

.gantt-today-line {
    background-color: rgba(255, 0, 0, .6) !important;
}

.ist-wbs-level-0 {
    color: var(--ist-wbs-level-0-color);
}

.ist-wbs-level-1 {
    color: var(--ist-wbs-level-1-color);
}

.ist-wbs-level-2 {
    color: var(--ist-wbs-level-2-color);
}

.ist-wbs-level-3 {
    color: var(--ist-wbs-level-3-color);
}

.ist-wbs-level-4 {
    color: var(--ist-wbs-level-4-color);
}

.ist-wbs-level-5 {
    color: var(--ist-wbs-level-5-color);
}

.ist-wbs-level-6 {
    color: var(--ist-wbs-level-6-color);
}

.ist-wbs-level-7 {
    color: var(--ist-wbs-level-7-color);
}

.ist-wbs-level-8 {
    color: var(--ist-wbs-level-8-color);
}

.ist-wbs-level-9 {
    color: var(--ist-wbs-level-9-color);
}

.ist-wbs-level-10 {
    color: var(--ist-wbs-level-10-color);
}

.ist-wbs-bar-level-0 {
    background-color: var(--ist-wbs-level-0-color) !important;
    border: var(--ist-wbs-dark-level-0-color) !important;
}

    .ist-wbs-bar-level-0 .gantt_task_progress {
        background-color: var(--ist-wbs-level-0-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-0-color) inset;
    }

.ist-wbs-bar-level-1 {
    background-color: var(--ist-wbs-level-1-color) !important;
    border: var(--ist-wbs-dark-level-1-color) !important;
}

    .ist-wbs-bar-level-1 .gantt_task_progress {
        background-color: var(--ist-wbs-level-1-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-1-color) inset;
    }

.ist-wbs-bar-level-2 {
    background-color: var(--ist-wbs-level-2-color) !important;
    border: var(--ist-wbs-dark-level-2-color) !important;
}

    .ist-wbs-bar-level-2 .gantt_task_progress {
        background-color: var(--ist-wbs-level-2-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-2-color) inset;
    }

.ist-wbs-bar-level-3 {
    background-color: var(--ist-wbs-level-3-color) !important;
    border: var(--ist-wbs-dark-level-3-color) !important;
}

    .ist-wbs-bar-level-3 .gantt_task_progress {
        background-color: var(--ist-wbs-level-3-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-3-color) inset;
    }

.ist-wbs-bar-level-4 {
    background-color: var(--ist-wbs-level-4-color) !important;
    border: var(--ist-wbs-dark-level-4-color) !important;
}

    .ist-wbs-bar-level-4 .gantt_task_progress {
        background-color: var(--ist-wbs-level-4-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-4-color) inset;
    }

.ist-wbs-bar-level-5 {
    background-color: var(--ist-wbs-level-5-color) !important;
    border: var(--ist-wbs-dark-level-5-color) !important;
}

    .ist-wbs-bar-level-5 .gantt_task_progress {
        background-color: var(--ist-wbs-level-5-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-5-color) inset;
    }

.ist-wbs-bar-level-6 {
    background-color: var(--ist-wbs-level-6-color) !important;
    border: var(--ist-wbs-dark-level-6-color) !important;
}

    .ist-wbs-bar-level-6 .gantt_task_progress {
        background-color: var(--ist-wbs-level-6-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-6-color) inset;
    }

.ist-wbs-bar-level-7 {
    background-color: var(--ist-wbs-level-7-color) !important;
    border: var(--ist-wbs-dark-level-7-color) !important;
}

    .ist-wbs-bar-level-7 .gantt_task_progress {
        background-color: var(--ist-wbs-level-7-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-7-color) inset;
    }

.ist-wbs-bar-level-8 {
    background-color: var(--ist-wbs-level-8-color) !important;
    border: var(--ist-wbs-dark-level-8-color) !important;
}

    .ist-wbs-bar-level-8 .gantt_task_progress {
        background-color: var(--ist-wbs-level-8-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-8-color) inset;
    }

.ist-wbs-bar-level-9 {
    background-color: var(--ist-wbs-level-9-color) !important;
    border: var(--ist-wbs-dark-level-9-color) !important;
}

    .ist-wbs-bar-level-9 .gantt_task_progress {
        background-color: var(--ist-wbs-level-9-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-9-color) inset;
    }

.ist-wbs-bar-level-10 {
    background-color: var(--ist-wbs-level-10-color) !important;
    border: var(--ist-wbs-dark-level-10-color) !important;
}

    .ist-wbs-bar-level-10 .gantt_task_progress {
        background-color: var(--ist-wbs-level-10-color) !important;
        box-shadow: 0 0 0 15px var(--ist-wbs-dark-level-10-color) inset;
    }

.gantt_task_line.ist-task-bar {
    background-color: #A5E5FF;
    border: 1px solid #66D3FF;
}

    .gantt_task_line.ist-task-bar .gantt_task_progress {
        box-shadow: 0 0 0 15px #30AADB inset;
        background-color: #30AADB;
    }

.gantt_task_line.ist-critical-task-bar {
    background-color: #eb2323 !important;
    border: 1px solid #eb2323 !important;
}

    .gantt_task_line.ist-critical-task-bar .gantt_task_progress {
        box-shadow: 0 0 0 15px #c9302c inset;
        background-color: #c9302c;
    }

.ist-gantt-cell {
    display: grid;
    place-items: center;
    height: 100%;
}

.ist-gantt-icon-container {
    display: grid;
    place-items: center;
    height: 100%;
    margin-right: 5px;
}

.ist-gantt-context-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1000;
    padding: 3px;
    border-radius: 5px;
}

/*End Gantt*/
.menu-item {
    display: flex;
    align-items: center;
    color: gray;
    cursor: pointer;
    padding: 1px 8px;
    /* Yüksekliği azaltmak için padding değerleri küçültüldü */
}

    .menu-item i {
        margin-right: 8px;
    }

    .menu-item:hover {
        color: black;
    }

        .menu-item:hover i {
            color: black;
        }

.ist-bold {
    font-weight: bold;
}

.ist-spin {
    --sp-size: 28px;
    --sp-stroke: 3px;
    --sp-track: var(--ist-primary-100);
    --sp-arc: var(--ist-brand);
    position: relative;
    width: var(--sp-size);
    height: var(--sp-size);
    flex: none;
}

    .ist-spin::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: var(--sp-stroke) solid var(--sp-track);
    }

    .ist-spin::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(transparent 0 15%, var(--sp-arc) 65% 100%);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--sp-stroke)), #000 calc(100% - var(--sp-stroke) + 0.5px));
        mask: radial-gradient(farthest-side, transparent calc(100% - var(--sp-stroke)), #000 calc(100% - var(--sp-stroke) + 0.5px));
        animation: ist-spin-rotate var(--ist-duration-spinner) linear infinite;
    }

    .ist-spin.is-sm {
        --sp-size: 16px;
        --sp-stroke: 2px;
    }

    .ist-spin.is-lg {
        --sp-size: 44px;
        --sp-stroke: 4px;
    }

    .ist-spin.is-xl {
        --sp-size: 56px;
        --sp-stroke: 4px;
    }

    .ist-spin.is-on-dark {
        --sp-track: rgba(255, 255, 255, .22);
        --sp-arc: var(--ist-accent);
    }

@keyframes ist-spin-rotate {
    to {
        transform: rotate(360deg);
    }
}

.ist-spin-content {
    width: 64px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: none;
}

    .ist-spin-content i {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: var(--ist-primary-50);
        position: relative;
        overflow: hidden;
    }

        .ist-spin-content i::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            transform: scaleX(0);
            transform-origin: left;
            animation: ist-spin-content-fill calc(var(--ist-duration-spinner) * 1.8) var(--ist-ease-standard) infinite;
        }

    .ist-spin-content i:nth-child(1) {
        width: 82%;
    }

        .ist-spin-content i:nth-child(1)::after {
            background: var(--ist-primary-500);
        }

    .ist-spin-content i:nth-child(2) {
        width: 62%;
        margin-left: 22%;
    }

        .ist-spin-content i:nth-child(2)::after {
            background: var(--ist-primary-700);
            animation-delay: .22s;
        }

    .ist-spin-content i:nth-child(3) {
        width: 46%;
        margin-left: 54%;
    }

        .ist-spin-content i:nth-child(3)::after {
            background: var(--ist-accent);
            animation-delay: .44s;
        }

@keyframes ist-spin-content-fill {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }

    55% {
        transform: scaleX(1);
        opacity: 1;
    }

    78%, 100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

.ist-spin-host {
    position: relative;
}

.ist-spin-reserve {
    min-height: 140px;
}

/* No backdrop-filter: the veil often sits over Konva/Forge/DHTMLX canvases where it forces costly compositing */
.ist-spinner-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--ist-z-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ist-space-3);
    background: rgba(255, 255, 255, .65);
    overflow: hidden;
    animation: ist-spinner-overlay-in var(--ist-duration-base) var(--ist-ease-standard);
}

.ist-spinner-label {
    font-size: var(--ist-font-size-sm);
    font-weight: var(--ist-font-weight-medium);
    color: var(--ist-text-muted);
    letter-spacing: .02em;
}

@keyframes ist-spinner-overlay-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ist-spin::after,
    .ist-spin-content i::after {
        animation: ist-spin-reduced-pulse 2s ease-in-out infinite;
    }

    .ist-spin::after {
        transform: rotate(120deg);
    }

    .ist-spin-content i::after {
        transform: none;
    }
}

@keyframes ist-spin-reduced-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.ist-img-selection-body {
    margin: 10px;
}

    .ist-img-selection-body img {
        margin-left: 10px;
        width: 75px;
        height: 50px;
        object-fit: cover;
    }

.nav-link.active {
    font-weight: 600;
    border-bottom: 2px solid rgb(113, 124, 145) !important;
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}

    .ol-popup:after,
    .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

    .ol-popup-closer:after {
        content: "✖";
    }

input.form-control:read-only:not([type="file"]):not([type="color"]),
textarea.form-control:read-only {
    background-color: #e9ecef;
    opacity: 1;
    transition: none;
    appearance: none;
}

.form-select-max-width {
    max-width: 300px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*ist_generic Start*/
body {
    font-family: var(--main-font);
    padding: 0;
    margin: 0;
    background-color: #F4F7FA;
}

script {
    display: none !important;
}

.ist-print-container {
    position: absolute;
    left: 0;
    display: none;
}

@media print {
    @page {
        size: auto;
    }

    body * {
        visibility: hidden;
        -webkit-print-color-adjust: exact;
    }

    .ist-print-container,
    .ist-print-container * {
        visibility: visible;
    }

    .ist-print-container {
        position: absolute;
        left: 0;
        top: 0;
        display: initial;
        z-index: 2500;
    }

    a:link {
        text-decoration: none !important;
    }

    .gantt_grid,
    .gantt_grid_data,
    .gantt_data_area {
        height: 100% !important;
    }

    .gantt_task {
        width: 100% !important;
        height: 100% !important;
    }

    .ist-todo-card-new-container {
        visibility: hidden;
    }
}

.ist-check-list-container {
    padding: 5px;
    height: 100%;
    border: solid 1px #D4D4D4;
    overflow: auto;
}

.ist-header-module {
    margin-top: 0px;
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: normal;
    padding-left: 12px;
    height: 35px;
    padding-top: 2px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.ist-list-container {
    border: 1px solid #dbdbdb;
    height: 100%;
}

/* ist_dialog_spinner Start */
.ui-spinner-input {
    outline: none;
}

/* ist_dialog_spinner End */

/*ist_generic End*/
/* ist_main_layout Start*/

/* ist dictionary Start*/
.ist-dictionary-left-container {
    border: 1px solid #dbdbdb;
    overflow: hidden;
    width: 37%;
    float: left;
}

.ist-dictionary-right-container {
    float: right;
    width: 62%;
    border: 1px solid #dbdbdb;
    overflow-x: hidden;
}

    .ist-dictionary-right-container .objbox {
        overflow-x: hidden !important;
    }

/* ist dictionary End*/

/* topToolbar Start*/
.ist-main-layout-top-menu-title {
    font-size: 14px;
    display: inline-block;
}

.ist-main-layout-top-menu-inner-container {
    display: block;
    white-space: nowrap;
    line-height: 40px;
    vertical-align: middle;
}

.ist-main-layout-top-input-text {
    height: 30px;
    min-width: 100px;
    max-width: 200px;
    border-radius: 5px;
    background: #fafafa;
    border: solid 1px #999999;
}

/* topToolbar End*/

.ist-main-layout-top-menu-inner-top-container {
    font-size: 14px;
    height: 40px;
}

.ist-main-layout-top-menu-inner-bottom-container {
    background: #F4F7FA;
    font-size: 14px;
    height: 40px;
    width: 100%;
}

.ist-main-layout-top-menu-inner-left-container,
.ist-main-layout-top-menu-inner-right-container {
    height: 40px;
    line-height: 40px;
}

.ist-main-layout-top-menu-inner-filter-container {
    height: 40px;
    line-height: 40px;
}

.ist-main-layout-top-menu-inner-menu-container {
    margin-left: 10px;
    width: 20px;
}

.ist-input-file-container {
    max-width: 500px
}

.ist-main-layout-gray-title-container {
    color: #888888;
    display: inline-flex;
    height: 40px !important;
    margin-right: 10px;
}

    .ist-main-layout-gray-title-container span {
        line-height: 40px;
        font-size: medium;
    }

.ist-main-layout-sub-title-container {
    color: #000000;
    display: inline-flex;
    height: 40px !important;
    float: left;
    width: 130px;
}

    .ist-main-layout-sub-title-container span {
        line-height: 40px;
        font-size: larger;
        font-weight: 900;
    }

/*icons Start*/

.ist-main-layout-top-icon {
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    width: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.ist-main-layout-delete-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.5" height="20" viewBox="0 0 17.5 20"><defs><style>.ist-1 {fill:rgb(136,136,136) }</style></defs> <path id="delete" class="ist-1" d="M11.563,16.875h.625a.313.313,0,0,0,.313-.312V5.938a.313.313,0,0,0-.312-.312h-.625a.313.313,0,0,0-.312.313V16.563A.313.313,0,0,0,11.563,16.875Zm-6.25,0h.625a.313.313,0,0,0,.313-.312V5.938a.313.313,0,0,0-.312-.312H5.313A.313.313,0,0,0,5,5.938V16.563A.313.313,0,0,0,5.313,16.875ZM17.188,2.5H13.125L11.813.75a1.875,1.875,0,0,0-1.5-.75H7.188a1.875,1.875,0,0,0-1.5.75L4.375,2.5H.313A.313.313,0,0,0,0,2.813v.625a.312.312,0,0,0,.313.313H1.25V18.125A1.875,1.875,0,0,0,3.125,20h11.25a1.875,1.875,0,0,0,1.875-1.875V3.75h.938a.313.313,0,0,0,.313-.312V2.813A.313.313,0,0,0,17.188,2.5Zm-10.5-1a.629.629,0,0,1,.5-.25h3.125a.629.629,0,0,1,.5.25l.75,1H5.938ZM15,18.125a.625.625,0,0,1-.625.625H3.125a.625.625,0,0,1-.625-.625V3.75H15Zm-6.562-1.25h.625a.313.313,0,0,0,.313-.312V5.938a.313.313,0,0,0-.312-.312H8.438a.313.313,0,0,0-.312.313V16.563A.313.313,0,0,0,8.438,16.875Z"/></svg>') center center no-repeat;
}

.ist-main-layout-search-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <defs><style>.ist-1 { fill:rgb(136,136,136);}</style></defs> <path id="ist_search_icon" class="ist-1" d="M19.862,18.812l-5.039-5.039a.464.464,0,0,0-.332-.137h-.4a8.043,8.043,0,1,0-.453.457v.4a.48.48,0,0,0,.137.332l5.039,5.039a.469.469,0,0,0,.664,0l.387-.387A.469.469,0,0,0,19.862,18.812ZM8.125,15A6.875,6.875,0,1,1,15,8.125,6.87,6.87,0,0,1,8.125,15Z"/></svg>') center center no-repeat;
}

.ist-spread-sheet-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="20" viewBox="0 0 15 20"> <path id="spread_sheet" d="M14.449,3.827,11.173.551A1.875,1.875,0,0,0,9.849,0H1.875A1.881,1.881,0,0,0,0,1.879V18.125A1.875,1.875,0,0,0,1.875,20H13.125A1.875,1.875,0,0,0,15,18.125V5.155a1.884,1.884,0,0,0-.551-1.328ZM10,1.273a.615.615,0,0,1,.289.164l3.277,3.277A.615.615,0,0,1,13.731,5H10ZM13.75,18.125a.627.627,0,0,1-.625.625H1.875a.627.627,0,0,1-.625-.625V1.879a.63.63,0,0,1,.625-.629H8.751V5.315a.933.933,0,0,0,.938.935H13.75ZM2.5,8.125v8.75a.625.625,0,0,0,.625.625h8.75a.625.625,0,0,0,.625-.625V8.125a.625.625,0,0,0-.625-.625H3.125A.625.625,0,0,0,2.5,8.125Zm8.75,8.125H8.125V14.375H11.25Zm0-3.125H8.125V11.25H11.25ZM3.75,8.75h7.5V10H3.75Zm0,2.5H6.875v1.875H3.75Zm0,3.125H6.875V16.25H3.75Z" fill="rgb(136,136,136)"/></svg>') left center no-repeat;
}

    .ist-spread-sheet-icon span {
        margin-left: 10px;
    }

.ist-database-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.5" height="20" viewBox="0 0 17.5 20"> <path id="data2" d="M8.75,1.25c4.141,0,7.5,1.123,7.5,2.5V5c0,1.377-3.359,2.5-7.5,2.5S1.25,6.377,1.25,5V3.75c0-1.377,3.359-2.5,7.5-2.5m7.5,5.84V8.75c0,1.377-3.359,2.5-7.5,2.5s-7.5-1.123-7.5-2.5V7.09c1.611,1.133,4.561,1.66,7.5,1.66s5.889-.527,7.5-1.66m0,3.75V12.5c0,1.377-3.359,2.5-7.5,2.5s-7.5-1.123-7.5-2.5V10.84c1.611,1.133,4.561,1.66,7.5,1.66s5.889-.527,7.5-1.66m0,3.75v1.66c0,1.377-3.359,2.5-7.5,2.5s-7.5-1.123-7.5-2.5V14.59c1.611,1.133,4.561,1.66,7.5,1.66s5.889-.527,7.5-1.66M8.75,0C5.7,0,0,.734,0,3.75v12.5C0,19.271,5.707,20,8.75,20s8.75-.734,8.75-3.75V3.75C17.5.729,11.793,0,8.75,0Z" fill="rgb(136,136,136)"/> </svg>') left center no-repeat;
}

    .ist-database-icon span {
        margin-left: 10px;
    }

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl td.sub_item_icon {
    width: 0px;
}

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl td {
    padding: 0px
}

/*icons End*/

/* ist_main_layout End*/

/* ist-main-list-menu Start */
/* ist_buttons Start*/
.ist-main-layout-filter-button {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    float: left;
    margin: 10px 5px 0 20px;
    /*search.svg*/
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <defs> <style>.ist-1 {fill: rgb(136,136,136);} </style></defs><path id="ist_search_icon" class="ist-1" d="M19.862,18.812l-5.039-5.039a.464.464,0,0,0-.332-.137h-.4a8.043,8.043,0,1,0-.453.457v.4a.48.48,0,0,0,.137.332l5.039,5.039a.469.469,0,0,0,.664,0l.387-.387A.469.469,0,0,0,19.862,18.812ZM8.125,15A6.875,6.875,0,1,1,15,8.125,6.87,6.87,0,0,1,8.125,15Z"/></svg>') center center no-repeat;
    width: 20px;
    height: 20px;
}

/* ist_buttons End*/

/* ist_board Start*/
.ist-board-stages-form-check-list-container {
    display: inline-block;
    margin: 5px;
    height: 300px;
    width: 250px;
}

.ist-board-form-check-list-container {
    display: inline-block;
    height: 110px;
    width: 100%;
}

    .ist-board-form-check-list-container span {
        height: 20px;
    }

    .ist-board-form-check-list-container input[type=checkbox],
    ist-board-stages-form-check-list-container input[type=checkbox] {
        clear: both;
        height: 13px;
        padding: 0px;
        margin: 3px 10px 0 0;
    }

.ist-board-header-icon {
    font-size: 0.95rem;
    color: #adb5bd;
}

.ist-board-left-stage-arrow-icon,
.ist-board-right-stage-arrow-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: #adb5bd;
    font-size: 18px;
    line-height: 1;
}

.ist-board-left-stage-arrow-icon::before {
    content: '\2039';
}

.ist-board-right-stage-arrow-icon::before {
    content: '\203A';
}

.ist-board-header {
    width: max-content;
    height: 30px;
    margin-top: 1px;
    z-index: 50;
}

.ist-board-header-container {
    display: inline-block;
    position: relative;
    float: left;
    width: 307px;
    overflow: visible;
    margin: 0px 1px 1px 1px;
    border-radius: 8px;
    background: var(--main-background-color, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 3px 0 0 var(--stage-color, #8a8f98), 0 6px 14px rgba(0, 0, 0, 0.10);
}

.ist-board-header-container-inner {
    width: 307px;
    display: flex;
    align-items: center;
    min-height: 30px;
}

.ist-stage-vertical-container {
    display: none; /* JS switches to flex when the stage is collapsed */
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0 12px;
    cursor: pointer;
    box-sizing: border-box;
    background: var(--main-background-color, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: inset 0 3px 0 0 var(--stage-color, #8a8f98), 0 6px 14px rgba(0, 0, 0, 0.10);
}

.ist-board-header-container.is-collapsed {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.ist-stage-vertical-count {
    flex: 0 0 auto;
    width: 22px;
    min-height: 22px;
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--stage-color, #888);
    background: color-mix(in srgb, var(--stage-color, #888) 14%, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--stage-color, #888) 32%, #fff);
}

.ist-stage-vertical {
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
}

.ist-stage-vertical-chevron {
    flex: 0 0 auto;
    color: #adb5bd;
    font-size: 18px;
    line-height: 1;
}

.ist-stage-duration-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--icon-gray-color);
    background: rgba(0, 0, 0, 0.06);
    vertical-align: middle;
}

.ist-stage-title {
    display: inline-block;
    max-width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.ist-board-header-item-container {
    line-height: 28px;
}

.ist-board-header-item-span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 215px;
}

/* ist_board End*/

/* stage option Start */
.ist-stage-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.ist-stage-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--main-background-color, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 3px 0 0 var(--stage-color), 0 3px 8px rgba(0, 0, 0, 0.08);
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.ist-stage-option-item:hover {
    box-shadow: inset 0 3px 0 0 var(--stage-color), 0 6px 14px rgba(0, 0, 0, 0.12);
}

.ist-stage-option-item.is-active {
    background: color-mix(in srgb, var(--stage-color) 8%, var(--main-background-color, #fff));
    box-shadow: inset 0 3px 0 0 var(--stage-color), 0 6px 14px rgba(0, 0, 0, 0.12);
}

.ist-stage-option-item-icon {
    color: var(--stage-color);
    font-size: 0.8rem;
}

.ist-stage-option-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* stage option End*/

/* todo Start */
.ist-todo-responsible {
    display: inline-block;
    width: 35px;
    height: 35px;
    position: relative;
    z-index: 1000;
    float: left;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
}

.ist-todo-responsible-name {
    display: none;
    height: 20px;
    width: 100%;
    font-size: 100%;
    white-space: nowrap;
    line-height: 20px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
}

.ist-todo-project-name {
    /*white-space: nowrap;*/
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* todo End */
/* dhtmlx start*/
/*grids Start*/
div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl div.sub_item_text {
    color: #888888 !important;
    font-family: var(--main-font);
}

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item_selected div.sub_item_text {
    color: #000000 !important;
}

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item_selected,
div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item_selected td {
    background-color: white !important;
}

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon {
    background: rgba(255, 255, 255, 1) !important;
    border: none !important;
    border-radius: 5px;
    box-shadow: 2px 3px 13px rgba(0, 0, 0, 0.6) !important;
    -moz-box-shadow: 2px 3px 13px rgba(0, 0, 0, 0.6) !important;
    -webkit-box-shadow: 2px 3px 13px rgba(0, 0, 0, 0.6) !important;
    -khtml-box-shadow: 2px 3px 13px rgba(0, 0, 0, 0.6) !important;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=135, strength=3) !important;
    -moz-user-select: none;
}

div.gridbox_dhx_web table.obj.row20px tr td a {
    text-decoration: none;
}

div.gridbox_dhx_web {
    border: none !important;
}

.dhtmlxcalendar_dhx_web,
.dhtmlxMenu_dhx_web_SubLevelArea_Polygon {
    z-index: 3000 !important;
}

.ist-uneditable-row td {
    color: gray !important;
}

.treegrid_cell img {
    margin-right: 2px;
}


/*grids End*/
/* uploder Start*/
.dhxform_obj_dhx_web,
.dhxform_obj_dhx_web .dhxform_base {
    width: 100% !important;
}

.dhxform_base fieldset {
    border: none !important;
}

.ist-document-top-uploader-container {
    width: 100%;
    margin: 2px;
    height: 65px;
    font-size: 12px;
    border: solid 1px #8b8b8b;
    overflow: hidden;
    border-radius: 5px;
    transition: all 0.4s ease;
}

    .ist-document-top-uploader-container.dragover {
        position: absolute;
        width: 100%;
        height: 400px;
        padding: 40px;
        background: linear-gradient(135deg, #e6f7ff, #ffffff);
        border: 2px dashed #1890ff;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(24, 144, 255, 0.15);
        transition: all 0.3s ease;
        align-items: center;
        justify-content: center;
        color: #1890ff;
        font-weight: 500;
        font-size: 16px;
    }

        .ist-document-top-uploader-container.dragover > div:first-child {
            height: 400px !important;
        }

            .ist-document-top-uploader-container.dragover > div:first-child .dhx_file_uploader {
                height: 400px;
            }


.dhx_file_uploader {
    margin-top: 10px;
}

.dhx_uploader_dis div.dhx_file_uploader_button.button_browse {
    opacity: 0.5;
}

.dhxform_obj_dhx_web .button_browse {
    width: 54px !important;
    height: 30px !important;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 30.004 30"> <path id="uploader_icon" d="M17.346,22.574H12.658a1.4,1.4,0,0,1-1.406-1.406V11.322H6.112a1.17,1.17,0,0,1-.826-2L14.2.4a1.135,1.135,0,0,1,1.6,0l8.919,8.919a1.17,1.17,0,0,1-.826,2H18.753v9.845A1.4,1.4,0,0,1,17.346,22.574ZM30,22.105v6.563A1.4,1.4,0,0,1,28.6,30.075H1.406A1.4,1.4,0,0,1,0,28.669V22.105A1.4,1.4,0,0,1,1.406,20.7h7.97v.469a3.284,3.284,0,0,0,3.282,3.282h4.688a3.284,3.284,0,0,0,3.282-3.282V20.7H28.6A1.4,1.4,0,0,1,30,22.105Zm-7.267,5.157a1.172,1.172,0,1,0-1.172,1.172A1.175,1.175,0,0,0,22.738,27.262Zm3.751,0a1.172,1.172,0,1,0-1.172,1.172A1.175,1.175,0,0,0,26.488,27.262Z" transform="translate(0 -0.075)" fill="rgb(139,139,139)"/> </svg>') center center no-repeat !important;
}

.ist-document-top-uploader-container div.dhx_upload_files,
.ist_uploader_container dhx_upload_files {
    width: 100% !important;
    height: 50px;
    top: -8px !important;
    font-weight: bold;
}

.ist-document-top-uploader-container div.dhx_file_uploader_button.button_clear,
.ist-document-top-uploader-container div.dhx_file_uploader_button.button_cancel,
.ist-form-uploader-container div.dhx_file_uploader_button.button_cancel {
    display: none !important;
}

.ist-form-uploader-container {
    width: 100%;
    height: 100%;
    /*   min-height:250px;*/
    float: none;
    border: solid 1px #8b8b8b;
    border-radius: 5px;
}

/* uploader End*/

/*Start ist_dashboard */

.ist-dashboard-portlet-header {
    display: inline-block;
    height: 40px;
    width: 75%;
    vertical-align: middle;
    line-height: 40px;
}

    .ist-dashboard-portlet-header a.fullscr {
        display: block;
        width: 15px;
        height: 10px;
        background-position: -32px -128px;
        float: right;
    }

.ist-dashboard-menu-icon {
    float: right;
    margin-right: 10px;
    cursor: pointer;
}

.ist-dashboard-menu-icon > a {
    color: var(--ist-text-muted);
}

.ist-dashboard-menu-icon > a:hover,
.ist-dashboard-menu-icon > a:focus-visible {
    color: var(--ist-text);
}

/* Widget shell on the live dashboard (built in js/Home/dashboard-item.js);
   contents load from other pages and are not styled here. */
.ist-dashboard-portlet {
    position: relative;
    min-height: 40px;
    padding: 4px;
    color: var(--ist-text);
    background: var(--ist-surface);
    border: 1px solid var(--ist-border);
    border-radius: var(--ist-radius-lg);
    box-shadow: var(--ist-shadow-1);
}

/* Head row (title + injected widget toolbars + kebab): hairline gives the card
   a head/body anatomy; keep added height small — the fullscreen content calc
   assumes a shallow header. */
.ist-dashboard-portlet-head {
    padding: var(--ist-space-1) var(--ist-space-2);
    border-bottom: 1px solid var(--ist-neutral-100);
    margin-bottom: var(--ist-space-1);
}

.ist-dashboard-portlet-title {
    font-weight: var(--ist-font-weight-semibold);
    color: var(--ist-neutral-900);
}

.ist_dashboard_content_container {
    /*ÖNEMLİ*/
    overflow: hidden;
}

.ist-dashboard-single-portlet {
    width: 100%;
    float: left;
    padding-bottom: var(--ist-space-4);
}

.ist-dashboard-double-portlet {
    width: 50%;
    float: left;
    padding-bottom: var(--ist-space-4);
}

    .ist-dashboard-double-portlet .ist-dashboard-portlet-header {
        line-height: 20px
    }

    .ist-dashboard-double-portlet .ist-dashboard-header-select-container select {
        height: 19px;
    }

    .ist-dashboard-double-portlet .ist-dashboard-header-select-container span {
        height: 19px;
        font-size: 14px;
    }

    .ist-dashboard-double-portlet .ist-dashboard-no-data_container h4 {
        height: 15px;
        line-height: 15px;
        margin: 0px 0px 0px 5px;
        color: #DBA0A0;
        font-size: 14px;
        font-weight: bold;
    }

.ist-dashboard-no-data_container {
    display: none;
}

    .ist-dashboard-no-data_container h4 {
        height: 15px;
        line-height: 15px;
        margin: 0px 0px 0px 20px;
        color: #DBA0A0;
        font-size: 20px;
        font-weight: bold;
    }

.ist-dashboard-header-select-container {
    display: inline-block;
}

/*End ist_dashboard */
/* Start ist_form */
.ist-tab-in-form,
.ist-tab-in-div {
    width: 100%;
    height: 100%;
    float: left;
}

.ist-form-switch-icon {
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    width: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.ist-form-change-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="20.313" viewBox="0 0 25 20.313"> <path id="change" d="M24.828,53.884l-4.9,4.883a.586.586,0,0,1-.829,0l-.958-.958a.586.586,0,0,1,.008-.837l2.5-2.33H.586A.586.586,0,0,1,0,54.055V52.883A.586.586,0,0,1,.586,52.3H20.65l-2.5-2.33a.586.586,0,0,1-.008-.837l.958-.958a.586.586,0,0,1,.829,0l4.9,4.883A.586.586,0,0,1,24.828,53.884ZM.171,63.259l4.9,4.883a.586.586,0,0,0,.829,0l.958-.958a.586.586,0,0,0-.008-.837l-2.5-2.33H24.414A.586.586,0,0,0,25,63.43V62.258a.586.586,0,0,0-.586-.586H4.349l2.5-2.33a.586.586,0,0,0,.008-.837L5.9,57.547a.586.586,0,0,0-.829,0L.171,62.43a.586.586,0,0,0,0,.829Z" transform="translate(0 -48)" fill="rgb(136,136,136)"/> </svg>') center center no-repeat;
}

/*End ist_form */
/* Start ist_panel*/

.ist-left-panel-filter {
    height: 35px;
    padding-top: 2px;
}

.ist-left-panel-span {
    color: black;
    font-weight: bolder;
    display: inline;
    padding-left: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-left: solid 5px #166A7B;
}

/* End ist_panel*/

/* Start ist_privilege*/
.ist-privilege-form-role-list-container {
    height: 300px;
    width: 250px;
}

/* End ist_privilege*/




/* Start ist_comment */

.comment-container {
    scroll-behavior: smooth;
    overflow: auto;
    min-height: 0;
    max-height: 90svh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.comment-input-container {
    background: #ffffff;
    border-top: 1px solid #e9ecef;
}

.user-avatar {
    object-fit: cover;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.message-own {
    background: #cde1ff;
}

.message-other {
    background: #F4F7FA;
}

.message-edit {
    background: #ffdc74;
    border: solid 1px;
    font-style: italic;
}

.message-group {
    margin-bottom: 1.5rem;
}

.message-content {
    width: fit-content;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    white-space: pre-wrap;
}

.timestamp {
    font-size: 0.75rem;
    color: #6c757d;
    opacity: 0.8;
}

.reply-indicator {
    border-left: 3px solid #cde1ff;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    margin-left: 0.5rem;
}

.action-menu-btn {
    opacity: 0;
    transition: opacity 0.15s;
}

.message-block:hover .action-menu-btn {
    opacity: 1;
}

.load-more-btn {
    background: white;
    border: 1px solid #dee2e6;
}

    .load-more-btn:hover {
        background: #f8f9fa;
        border-color: #0d6efd;
        color: #0d6efd;
    }

.send-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compose-area {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 12px;
}

    .compose-area:focus-within {
        border-color: #0d6efd;
        background: white;
    }

.compose-textarea {
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.9rem;
}

    .compose-textarea:focus {
        outline: none;
        box-shadow: none;
    }

/* End ist_comment */
/* Start ist_notification */

.ist-notification-item {
    margin: 2px 4px;
    border: 1px solid #e6ebef;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    .ist-notification-item:hover {
        border-color: #d3dbe2;
        box-shadow: 0 2px 10px rgba(20, 40, 60, 0.08);
    }

/* Card layout: [icon tile] [main content] */
.ist-notification-card {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    position: relative;
    border-left: 3px solid transparent;
}

/* Unread: light tint + concept-colored left accent bar */
.ist-notification-not-viewed {
    background-color: #f6fbfc;
    border-left-color: var(--ist-noti-color, #8aadb8);
}

/* Left icon tile, tinted with the concept color */
.ist-notification-tile {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ist-noti-color, #6c757d);
    background: color-mix(in srgb, var(--ist-noti-color, #6c757d) 14%, transparent);
}

.ist-notification-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Row 1: user avatar + name (left) and timestamp (right) */
.ist-notification-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ist-notification-user {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.82rem;
    color: #495057;
    overflow: hidden;
}

    .ist-notification-user strong {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Row 2: entity name (left) + inline actions (right) */
.ist-notification-objrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ist-notification-object {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--ist-noti-color, #2b5c74);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

a.ist-notification-object:hover {
    text-decoration: underline;
}

.ist-notification-img {
    border: rgba(255, 255, 255, 1) 1px solid;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Row 3: what happened — event text */
.ist-notification-eventrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #7a828a;
}

/* Row 4: detail bubble (left) + delete (right), sharing one row */
.ist-notification-detailrow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ist-notification-detail {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 5px 10px;
    background: #f1f3f5;
    border-radius: 8px;
    font-size: 0.83rem;
    color: #565f68;
    word-break: break-word;
}

    /* Clamp the message text so one long entry can't hijack the list */
    .ist-notification-detail > small {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .ist-notification-detail.is-expanded > small {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

/* Clickable [...] expand/collapse trigger — its own line at the bottom, inside the bubble */
.ist-notification-more {
    display: inline-block;
    margin-top: 3px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #7a828a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    cursor: pointer;
}

    .ist-notification-more:hover {
        color: #343a40;
    }

    /* Old -> New separator rendered as a small muted arrow */
    .ist-notification-arrow {
        margin: 0 4px;
        font-size: 0.72rem;
        color: #adb5bd;
        vertical-align: baseline;
    }

.ist-notification-delete {
    flex: 0 0 auto;
    margin-left: auto;
}

.ist-notification-time {
    font-size: 0.72rem;
    color: #9aa0a6;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Actions/delete faded by default, revealed on card hover */
.ist-notification-actions,
.ist-notification-delete {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.ist-notification-item:hover .ist-notification-actions,
.ist-notification-item:hover .ist-notification-delete {
    opacity: 1;
}

    .ist-notification-actions .btn,
    .ist-notification-delete.btn {
        padding: 4px 6px;
        line-height: 1;
    }

/* Variant-less .btn has no hover color of its own (the glyph goes invisible on hover);
   give delete the same muted-idle / danger-hover treatment as compact icon actions. */
.ist-notification-delete.btn {
    color: var(--ist-text-muted);
}

.ist-notification-delete.btn:hover,
.ist-notification-delete.btn:focus-visible {
    background: var(--ist-danger-bg);
    color: var(--ist-danger);
}

/* Responsive by the panel's own width (container query) — works in the page and the bell dropdown */
.ist-notification-list,
[id^="notification-list-div-"] {
    container-type: inline-size;
}

@container (max-width: 380px) {
    .ist-notification-card {
        padding: 10px;
        gap: 8px;
    }

    .ist-notification-tile {
        width: 30px;
        height: 30px;
        font-size: 14px;
        border-radius: 8px;
    }

    .ist-notification-detailrow {
        gap: 6px;
    }
}

/* Very narrow (small phones): drop the icon tile so the text spans the full card width. */
@container (max-width: 300px) {
    .ist-notification-card {
        padding: 8px;
        gap: 6px;
    }

    .ist-notification-tile {
        display: none;
    }
}

/* One variable per concept drives the tile tint, object link, icon and unread accent */
.ist-notification-comment { --ist-noti-color: var(--ist-comment-color); }
.ist-notification-todo { --ist-noti-color: var(--ist-card-color); }
.ist-notification-lesson { --ist-noti-color: var(--ist-lessons-color); }
.ist-notification-risk { --ist-noti-color: var(--ist-risk-color); }
.ist-notification-issue { --ist-noti-color: var(--ist-issue-color); }
.ist-notification-cost { --ist-noti-color: var(--ist-cost-icon-color); }
.ist-notification-income { --ist-noti-color: var(--ist-income-icon-color); }
.ist-notification-project { --ist-noti-color: var(--ist-project-color); }
.ist-notification-program { --ist-noti-color: var(--ist-program-color); }
.ist-notification-portfolio { --ist-noti-color: var(--ist-portfolio-color); }
.ist-notification-document { --ist-noti-color: var(--ist-document-icon-color); }
.ist-notification-markup { --ist-noti-color: var(--ist-markup-icon-color); }
.ist-notification-team { --ist-noti-color: var(--ist-team-color); }
.ist-notification-correspondence { --ist-noti-color: var(--ist-correspondence-color); }
.ist-notification-todoItem { --ist-noti-color: var(--ist-card-item-icon-color); }

/* Month group header — subtle uppercase label */
.ist-notification-month {
    padding: 12px 8px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa0a6;
}

/* Empty states — muted, centered, on-brand */
.ist-notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    text-align: center;
    color: #9aa0a6;
    font-size: 0.9rem;
}

    .ist-notification-empty i {
        font-size: 1.9rem;
        opacity: 0.5;
    }

.ist-notification-month-empty {
    padding: 10px 12px;
    color: #adb5bd;
    font-size: 0.83rem;
    font-style: italic;
}

/* Footer bar: previous-month link (left) + manage link (right) */
.ist-notification-footer {
    padding: 8px 6px 2px;
    margin-top: 8px;
    border-top: 1px solid #eef1f3;
}

.ist-notification-footer-link.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    font-size: 0.8rem;
    color: #7a828a;
    text-decoration: none;
}

    .ist-notification-footer-link.btn:hover {
        color: #495057;
        text-decoration: underline;
    }

    .ist-notification-footer-link.btn:disabled {
        opacity: 0.4;
        text-decoration: none;
        cursor: default;
    }

.ist-notification-footer-manage.btn {
    color: var(--bs-primary);
}

    .ist-notification-footer-manage.btn:hover {
        color: var(--bs-primary);
        filter: brightness(0.9);
    }

/* End ist_notification */


/* Comment list object header — keep badges on one line, truncate the long name with an ellipsis.
   Targeted both by the ist-comment-header class and structurally (the header is the border-bottom
   child of #...CommentOuter) so it works even before the Razor view is recompiled. */
.ist-comment-header,
[id$="CommentOuter"] > .border-bottom {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

    .ist-comment-header > .badge,
    [id$="CommentOuter"] > .border-bottom > .badge {
        flex: 0 0 auto;
    }

    /* The name is the last badge (info-colored); let it shrink and ellipsize. */
    .ist-comment-header > .ist-comment-header-name,
    [id$="CommentOuter"] > .border-bottom > .badge.text-info {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* jquery multivalue input - start */
.multipleInput-container {
    border: 1px #ccc solid;
    padding: 2px;
    padding-bottom: 0;
    cursor: text;
    font-size: 12px;
    width: 100%;
}

    .multipleInput-container input {
        font-size: 13px;
        clear: both;
        width: 100%;
        border: 0;
        margin-bottom: 1px;
    }

    .multipleInput-container ul {
        list-style-type: none;
        padding: 0;
        margin: 0 6px 0 0;
    }

li.multipleInput-email,
li.multipleInput-option {
    float: left;
    margin-right: 0;
    margin: 2px;
    border: 1px #BBD8FB solid;
    background: #F3F7FD;
    width: auto;
    padding: 0 5px;
}

    li.multipleInput-email span {
        line-height: 16px;
    }

.multipleInput-close {
    width: 16px;
    height: 16px;
    background: url("../../Images/jquery/ui-icons_888888_256x240.png");
    background-position: -96px -128px;
    display: block;
    float: right;
}

/* jquery multivalue input - end */
.btn-xs {
    padding: 0.15rem 0.35rem;
    font-size: 0.90rem;
    line-height: 1.4;
}

/* Tooltip */
.formula-tooltip-inner {
    font-size: 0.8rem;
    width: auto;
    max-width: 500px;
}

/* Tooltip on top */
.formula-tooltip > .tooltip-arrow {
    border-top: 5px solid green;
    background-color: white;
}

@keyframes pulse-yellow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
        opacity: 1;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
        opacity: 0.7;
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
        opacity: 0.4;
    }
}

.ist-status-animation {
    transform: scale(1);
    animation: pulse-yellow 2s infinite;
}

.correspondence-color {
    color: #6365f1;
}

.user-color {
    color: #166a7b;
}

.ist-grid-icon {
    font-size: 18px;
    color: #31aedc;
}

.ist-grid-action-icon {
    font-size: 16px;
    color: var(--ist-grid-icon-color);
    cursor: pointer;
}

.ist-action-icon-btn {
    text-decoration: none;
}

.active-correspondence {
    z-index: 2;
    background-color: #efefef;
    border-left: 3px solid #6365f1;
}

.active-todo {
    z-index: 2;
    background-color: #efefef;
    border-left: 3px solid var(--ist-card-color) !important;
}

.ist-additional-feature {
    padding: 0;
}

    .ist-additional-feature .ist-menu-item {
        display: block;
        padding: 0;
    }

    .ist-additional-feature .ist-menu-item-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        width: 42px;
        margin-top: 10px;
    }

/* Toolbar icon buttons (added via additional-features.js / form-uploader.js, wrapped in
   .ist-menu-item-inner): softer corners + light gray border. Overrides the per-variant Bootstrap
   border-color vars while keeping each button's fill/text color. */
.ist-menu-item-inner .btn {
    --bs-btn-border-color: #d8dde2;
    --bs-btn-hover-border-color: #c4cbd2;
    border-radius: 6px;
}

.ist-additional-feature-info {
    min-width: 500px;
    top: 50px;
    right: 10px;
    border-color: #c7c7c7;
}

/*dhx start*/

.dhx_combo_select {
    overflow-y: auto !important;
    height: 200px !important;
    z-index: 2000000000000;
}

body .dhx_clist {
    z-index: 1300;
}

.dhx_clist input[type=button] {
    display: none;
}

.dhx_tab_element div {
    height: 30px;
}

/*dhx end*/


.icon-hub:before {
    background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/apps-16.svg);
    /* or https://raw.githubusercontent.com/primer/octicons/main/icons/stack-16.svg */
    background-size: cover;
}

.icon-project:before {
    background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/project-16.svg);
    /* or https://raw.githubusercontent.com/primer/octicons/main/icons/organization-16.svg */
    background-size: cover;
}

.icon-my-folder:before {
    background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/file-directory-16.svg);
    background-size: cover;
}

.icon-item:before {
    background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/file-16.svg);
    background-size: cover;
}

.icon-version:before {
    background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/clock-16.svg);
    background-size: cover;
}

.preview-content.dx-htmleditor-content li {
    /* This style fixes DevExtreme preview list items */
    list-style: revert !important;
}

.ist-transparent-bg {
    background-image: linear-gradient(45deg, rgba(204, 204, 204, 0.3) 25%, transparent 25%), linear-gradient(-45deg, rgba(204, 204, 204, 0.3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(204, 204, 204, 0.3) 75%), linear-gradient(-45deg, transparent 75%, rgba(204, 204, 204, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.ist-stage-badge-text {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Hide elements with v-cloak until Vue has fully mounted the component.
   Prevents uncompiled template from flashing on screen. */
[v-cloak] {
    display: none;
}

/* Custom DevExtreme css*/
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td,
.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td {
    background-color: #dbeafe;
    color: unset;
}

.ist-form-textarea .dx-texteditor-input {
    resize: vertical;
    min-height: 90px;
    max-height: none;
}

.ist-ai-autofill-textarea {
    min-height: 90px;
    resize: vertical;
}

.ist-ai-filled .dx-texteditor {
    box-shadow: 0 0 0 2px var(--ist-ai-color);
    border-radius: 4px;
}

.ist-ai-status-text {
    white-space: pre-wrap;
    line-height: 1.5;
}

.ist-autodesk-menu, .ist-microsoft-sharepoint-menu, .ist-google-drive-menu, .ist-dropbox-menu {
    display: none;
    z-index: 10000000; /* legacy stacking above DHTMLX/DevExtreme overlays; do not copy elsewhere */
    width: 220px;
    font-size: 12px;
    background: var(--ist-surface);
    padding-bottom: 10px;
    position: absolute;
    right: 60px;
    top: 35px;
    box-shadow: var(--ist-shadow-4);
    border-radius: var(--ist-radius-lg);
    overflow: hidden;
    color: var(--ist-text-muted);
}

.ist-autodesk-menu ul, .ist-microsoft-sharepoint-menu ul, .ist-google-drive-menu ul, .ist-dropbox-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ist-autodesk-menu ul li, .ist-microsoft-sharepoint-menu ul li, .ist-google-drive-menu ul li, .ist-dropbox-menu ul li {
    margin: 10px;
}

.ist-autodesk-menu ul li:first-child, .ist-microsoft-sharepoint-menu ul li:first-child, .ist-google-drive-menu ul li:first-child, .ist-dropbox-menu ul li:first-child {
    margin: 0;
}

.ist-autodesk-menu ul li a, .ist-microsoft-sharepoint-menu ul li a, .ist-google-drive-menu ul li a, .ist-dropbox-menu ul li a {
    color: var(--ist-text-muted);
    text-decoration: none;
}

.ist-autodesk-menu ul li a:hover, .ist-microsoft-sharepoint-menu ul li a:hover, .ist-google-drive-menu ul li a:hover, .ist-dropbox-menu ul li a:hover {
    color: var(--ist-text);
}

.ist-autodesk-header, .ist-microsoft-sharepoint-header, .ist-google-drive-header, .ist-dropbox-header {
    background: #0696D7;
}

.cloud-menu-title {
    display: flex;
    align-items: center;
    gap: var(--ist-space-3);
    padding: var(--ist-space-3) var(--ist-space-4);
    background-color: var(--ist-surface);
    border-bottom: 1px solid var(--ist-border);
}

.menu-service-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    min-width: 0;
}

.menu-service-name {
    font-weight: var(--ist-font-weight-semibold);
    color: var(--ist-neutral-900);
    font-size: var(--ist-font-size-sm);
    line-height: var(--ist-line-height-tight);
}

.menu-account-name {
    font-size: var(--ist-font-size-xs);
    color: var(--ist-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.dropbox-logo, .google-drive-logo, .microsoft-sharepoint-logo, .autodesk-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.ist-autodesk-menu ul li:first-child i, .ist-microsoft-sharepoint-menu ul li:first-child i, .ist-google-drive-menu ul li:first-child i, .ist-dropbox-menu ul li:first-child i {
    color: var(--ist-neutral-0);
}

.ist-autodesk-menu ul li span, .ist-microsoft-sharepoint-menu ul li span, .ist-google-drive-menu ul li span, .ist-dropbox-menu ul li span {
    cursor: pointer;
    color: var(--ist-text-muted);
    font-weight: var(--ist-font-weight-semibold);
}

.ist-autodesk-menu ul li span:hover, .ist-microsoft-sharepoint-menu ul li span:hover, .ist-google-drive-menu ul li span:hover, .ist-dropbox-menu ul li span:hover {
    color: var(--ist-text);
}

.ist-dropbox-menu-divider, .ist-google-drive-menu-divider, .ist-microsoft-sharepoint-menu-divider, .ist-autodesk-menu-divider {
    padding: 0;
    margin: 0;
}

.ist-dropbox-menu-divider hr, .ist-google-drive-menu-divider hr, .ist-microsoft-sharepoint-menu-divider hr, .ist-autodesk-menu-divider hr {
    border-top: 1px solid var(--ist-border);
    margin: 0;
}

/* ===== Announcement Toast ===== */
#announcement-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.at-toast {
    --at-priority-color: #0d6efd;
    width: 380px;
    background: #fff;
    border-radius: 6px;
    border-left: 4px solid var(--at-priority-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.at-toast.at-visible {
    transform: translateY(0);
    opacity: 1;
}

.at-toast.at-hiding {
    transform: translateY(-100%);
    opacity: 0;
}

.at-toast:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.at-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #adb5bd;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s, background-color 0.15s;
    z-index: 1;
}

.at-close:hover {
    color: #495057;
    background-color: #f1f3f5;
}

.at-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 32px 12px 14px;
}

.at-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--at-priority-color);
    background: color-mix(in srgb, var(--at-priority-color) 10%, transparent);
    margin-top: 1px;
}

.at-content {
    flex: 1;
    min-width: 0;
}

.at-title {
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.at-desc {
    font-size: 12px;
    color: #6c757d;
    margin-top: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.at-meta {
    font-size: 11px;
    color: #adb5bd;
    margin-top: 4px;
}

.at-meta i {
    margin-right: 3px;
}

.at-progress {
    display: none;
}

@media (max-width: 480px) {
    #announcement-toast-container {
        left: 8px;
        right: 8px;
        transform: none;
    }
    .at-toast {
        width: auto;
    }
}

.purview-label-list {
    padding-left: 1.25rem;
}

.purview-label-list li {
    list-style: disc;
}

/* Custom Badge Styles - start */
.ist-notification-badge {
    bottom: -2px;
    left: -2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    padding: 0;
}

.ist-mobile-aggregated-badge {
    top: -2px;
    right: -2px;
    padding: 4px;
}
/* Custom Badge Styles - end */

@media (max-width: 991.98px) {
    .ist-mobile-wrap-title {
        white-space: normal !important;
        max-width: 90px !important;
        display: inline-block !important;
    }
}

.ist-message-list {
    margin: 0;
    padding-left: 1.2rem;
    max-height: 50vh;
    overflow-y: auto;
}

.ist-message-list li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ist-usage-intro {
    margin: 0 0 10px;
    font-weight: 600;
}

.ist-usage-scroll {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.ist-usage-group {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    background: #f4f7fa;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
}

.ist-usage-group-count {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    padding: 1px 8px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
}

.ist-usage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid #f1f3f5;
}

.ist-usage-item:last-child {
    border-bottom: 0;
}

.ist-usage-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.ist-usage-name-label {
    font-weight: 600;
    opacity: .7;
    margin-right: 2px;
}

.ist-usage-loc {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: 12px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
}

.ist-usage-loc-type {
    font-weight: 600;
    opacity: .7;
    margin-right: 2px;
}

.ist-usage-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.ist-usage-quarantine {
    white-space: nowrap;
    color: #dc2626;
    font-weight: 600;
    font-size: 12px;
}

.ist-usage-quarantine i {
    margin-right: 3px;
}

.ist-usage-note {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
}

.ist-sensitivity-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 16px;
    color: #fff;
    background: var(--ist-sensitivity-badge-color);
    white-space: nowrap;
}

/* Background-task panel — dark, matching the sidebar rail (--ist-rail-bg); docked to the
   task icon at the foot of the rail with a pointer caret. Markup stays light-themed; the
   .text-muted / .btn-outline-secondary overrides below re-tone it for the dark surface. */
.ist-task-panel {
    position: fixed;
    left: calc(var(--ist-rail-w) + 8px);
    bottom: 6px;
    width: 360px;
    max-width: calc(100vw - var(--ist-rail-w) - 24px);
    background: var(--ist-rail-bg);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--ist-radius-lg);
    box-shadow: var(--ist-shadow-5);
    color: #fff;
    z-index: var(--ist-z-modal);
}

    .ist-task-panel::before {
        content: "";
        position: absolute;
        left: -6px;
        bottom: 14px;
        width: 11px;
        height: 11px;
        background: var(--ist-neutral-900);
        border-left: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        transform: rotate(45deg);
    }

    .ist-task-panel .text-muted {
        color: rgba(255, 255, 255, .6) !important;
    }

    .ist-task-panel .btn-outline-secondary {
        color: rgba(255, 255, 255, .8);
        border-color: rgba(255, 255, 255, .3);
    }

.ist-task-panel-head {
    padding: var(--ist-space-2) var(--ist-space-3);
    font-weight: var(--ist-font-weight-semibold);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.ist-task-panel-body {
    padding: var(--ist-space-3);
    max-height: 60vh;
    overflow-y: auto;
}

.ist-task-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ist-space-2);
    padding: var(--ist-space-5) var(--ist-space-3);
    color: rgba(255, 255, 255, .6);
    text-align: center;
    font-size: var(--ist-font-size-sm);
}

    .ist-task-panel-empty i {
        font-size: 22px;
        color: rgba(255, 255, 255, .3);
    }

/* Task rows — dark theme (on the slate panel). */
.task-progress-container {
    height: 14px;
    border-radius: var(--ist-radius-pill);
    background-color: rgba(255, 255, 255, .14);
    overflow: visible;
}

.task-progress-bar {
    background: var(--ist-success);
    color: #fff;
    font-size: 0.7rem;
    border-radius: var(--ist-radius-pill);
    transition: width 0.4s ease;
}

.task-progress-text {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.task-alert-primary {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
}

    .task-alert-primary .spinner-border { color: var(--ist-primary-300); }
    .task-alert-primary .task-msg { color: #fff; font-size: 0.85rem; }
    .task-alert-primary .task-desc { color: rgba(255, 255, 255, .7); font-size: 0.85rem; }

/* Warning row: neutral fill + a crisp amber border/text so it reads clearly amber on the
   dark panel (a low-opacity amber fill over slate muddies to brown). */
.task-alert-warning {
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid var(--ist-warning);
}

    .task-alert-warning .task-desc { color: #fde68a; font-size: 0.85rem; }

.task-btn-edit {
    color: var(--ist-warning);
    background: rgba(255, 255, 255, .10);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

.task-btn-cancel {
    color: var(--ist-danger);
    background: rgba(255, 255, 255, .10);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
}