@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */

    #wrap {
        display: -ms-grid;
        /* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
        -ms-grid-columns: 125px minmax(min-content, 1fr);
        -ms-grid-rows: 50px minmax(min-content, 1fr) 0px;
    }
    header {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }
    nav {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }
    #main {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        text-align: left;
    }
    footer {
        display: none;
        -ms-grid-column: 1;
        -ms-grid-row: 3;
        -ms-grid-column-span: 2;
    }
    body.home #main {
        -ms-grid-column-align: center;
        -ms-grid-row-align: stretch;
    }
    body.home #content {
        display: -ms-grid;
        -ms-grid-columns: 1;
        -ms-grid-rows: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr);
    }
    body.home #content div.warning {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-row-align: start;
    }
    body.home #favourite_links {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-align: center;
    }

    #wrap.nav_hidden {
        -ms-grid-columns: 40px minmax(min-content, 1fr);
    }

    .bi_filter label {
        vertical-align: top;
    }

    #datasource_list .datasource_actions ul {
        display: -ms-grid;
        -ms-grid-columns: 4em 4em 9em;
        -ms-grid-rows: 2.25em 2.25em;
    }
    #datasource_list .datasource_actions.has_extra_actions ul {
        -ms-grid-rows: 2.25em 2.25em 2.25em;
    }
    #datasource_list .datasource_actions li:nth-child(1) {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }
    #datasource_list .datasource_actions li:nth-child(2) {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
    #datasource_list .datasource_actions li:nth-child(3) {
        -ms-grid-column: 3;
        -ms-grid-row: 1;
    }
    #datasource_list .datasource_actions li:nth-child(4) {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }
    #datasource_list .datasource_actions li:nth-child(5) {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }
    #datasource_list .datasource_actions li:nth-child(6) {
        -ms-grid-column: 3;
        -ms-grid-row: 2;
    }
    #datasource_list .datasource_actions li:nth-child(7) {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    /* data rule CRUD */
    /* BUGFIX https://stackoverflow.com/questions/31022747/flexbox-ie11-flex-wrap-wrap-does-not-wrap-images-codepen-inside */
    #frameconfigform .types_with_radio_and_image,
    #dataruleform .types_with_radio_and_image {
        width: 800px;
    }
    /* BUGFIX https://snook.ca/archives/javascript/using_images_as */
    #frameconfigform .types_with_radio_and_image img,
    #dataruleform .types_with_radio_and_image img,
    #viewindetailform .types_with_radio_and_image img {
        pointer-events: none;
    }

    /* FIX chosen bug. border appears if there is a sibling chosen disabled
    Redmine: #18763 */
    .bi_filter .chosen-disabled {
        opacity: 1 !important;
    }
    #customsearchfilter .chosen-disabled {
        opacity: 1 !important;
    }

    .colorlist {
        display: block;
        min-width: 8em;
    }
    .colorlist dt {
        width: 60%;
        float: left;
    }
    .colorlist dd {
        width: 30%;
        float: right;
    }
    .colorlist::after {
        content: "";
        display: table;
        clear: both; /* clean floats */
    }

    #viewindetailform .modifiers_container {
        display: -ms-grid;
        -ms-grid-columns: 50% 50%;
        -ms-grid-rows: 50% 50%;
    }
    #viewindetailform #snapshot_mode_modifiers {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
    }
    #viewindetailform #video_mode_modifiers {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
    #viewindetailform #indoor_tracking_mode_modifiers {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .panel_type {
        display: inline!important;
    }
    figure.graphs div.user-select-none, .svg-container {
        -ms-user-select: text!important;
    }

    /* Colors for custom dashboard, because IE does not support var CSS on Angular */
    th.mat-header-cell {
        background: var(--main-color);
    }

    /* Custom style form */
    #customstyle_config {
        display: -ms-grid;
        -ms-grid-rows: 60px minmax(min-content, 1fr);
        -ms-grid-columns: 60% 40%;
    }
    #customstyle_config .reset {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }
    #customstyle_config .config {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }
    #customstyle_config #customstyle_preview {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    #customstyle_preview .cs_example {
        display: -ms-grid;
        -ms-grid-rows: 30px minmax(min-content, 1fr);
        -ms-grid-columns: 75px minmax(min-content, 1fr);
    }
    #customstyle_preview header {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }
    #customstyle_preview nav {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }
    #customstyle_preview .cs_main {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    canvas.plan {
        border: 2px solid var(--main-color);
        border-radius: 7px;
    }

    .ng-select.ng-select-single .ng-select-container {
        min-height: 33px !important;
        height: 33px !important;
    }

    p.tag-alias-color, p.time-range-color {
        color: var(--main-color) !important;
      }
}