/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */

@font-face {
    font-family: YanoneKaffeesatz;
    src: url(YanoneKaffeesatz-VariableFont_wght.ttf);
}


body, html {
    font-family: YanoneKaffeesatz !important;
    font-size: 17px; /* this is default font-size */
    font-weight: normal;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    line-height: normal;
}

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: rgb(64, 64, 64);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(96, 96, 96);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgb(112, 112, 112);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: rgb(128, 128, 128);
    }

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: rgb(64, 64, 64);
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

    /* Up */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
        height: 12px;
        width: 16px;
        background-position: center 4px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
    }

        ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
        }

        ::-webkit-scrollbar-button:single-button:vertical:decrement:active {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
        }

    /* Down */
    ::-webkit-scrollbar-button:single-button:vertical:increment {
        height: 12px;
        width: 16px;
        background-position: center 2px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
    }

        ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
        }

        ::-webkit-scrollbar-button:single-button:vertical:increment:active {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
        }

    /* Left */
    ::-webkit-scrollbar-button:single-button:horizontal:decrement {
        height: 12px;
        width: 12px;
        background-position: 3px 3px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
    }

        ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
        }

        ::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
        }

    /* Right */
    ::-webkit-scrollbar-button:single-button:horizontal:increment {
        height: 12px;
        width: 12px;
        background-position: 3px 3px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
    }

        ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
        }

        ::-webkit-scrollbar-button:single-button:horizontal:increment:active {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
        }

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 10px;
    padding-right: 0px;
    height: 100%;
}

.row {
    margin: 0 50px;
}

.site-container {
    width: 98%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    /* margin-left: auto;*/
}

.navbar { /* overrides bootstart navbar */
    border: none;
}

    .navbar p {
        margin: 0px;
    }

.navbar-brand {
    padding: 0px;
}

.navbar-logo .navbar-brand > img {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


.navbar-brand > img {
    height: 100%;
    padding: 10px;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
}


.navbar-nav > li > a {
    padding-top: 8px;
    padding-bottom: 0px;
    line-height: normal;
    text-align: end;
    font-size: 17px;
}


.menuheader,
.dropdown-menu.special {
    background: -moz-linear-gradient(to right, var(--confirmcolor) 40%, red, transparent); /* FF3.6-15 */
    background: -webkit-linear-gradient(to right, var(--confirmcolor) 40%, red, transparent); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, var(--confirmcolor) 40%, red, transparent); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: center top;
    background-size: auto 5px;
    background-repeat: no-repeat;
}


.dropdown-menu {
    text-align: end;
    font-size: 17px;
    font-weight: normal !important;
    padding: 10px 1px;
    padding-inline-start: 50px;
    padding-right: 15px;
    right: auto;
}

    .dropdown-menu > li > a {
        color: var(--menu-normalcolor);
        padding-right: 5px;
    }

    .dropdown-menu > li a:hover,
    .dropdown-menu > li a:focus {
        color: var(--confirmcolor);
        text-decoration: none;
        background-color: transparent;
    }


#nav-profile {
    height: 50px;
}


    .navmenu-selected,
    #navicon-actionbar1 .navbar-brand > img:hover,
    #navicon-actionbar2 .navbar-brand > img:hover,
    #nav-profile:hover {
        /*padding-bottom: 100px;*/
        background: -moz-linear-gradient(to right, var(--confirmcolor), var(--confirmcolor)); /* FF3.6-15 */
        background: -webkit-linear-gradient(to right, var(--confirmcolor), var(--confirmcolor)); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, var(--confirmcolor), var(--confirmcolor)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        background-position: center bottom;
        background-size: auto 2px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

.navbar-collapse:hover #navuser {
    color: #FFF;
}


@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        float: right;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: var(--menu-normalcolor-collapsed);
    }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
            color: var(--menu-color-hover-collapsed);
        }

    .dropdown-menu,
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 10px 1px;
        padding-inline-start: 0px;
        padding-right: 5px;
        right: 0px;
    }


    .site-container {
        width: 100%;
        padding-right: 0px;
    }
}

@media (min-width: 767px) {
    .navbar-right .dropdown-menu {
        left: auto;
        right: -53px;
        top: 49px;
        float: right !important;
        margin-right: -20px;
    }
}


@media screen and (max-width: 768px) {
    #myavatar > img {
        display: none;
    }
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    /*color: unset !important;*/
    background-color: unset !important;
}

.noselect {
    /*-webkit-touch-callout: none; iOS Safari */
    -webkit-user-select: none; /* Safari */
    /* -khtml-user-select: none;  Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

input[readonly].form-control {
    /*background-color: transparent;*/
    cursor: pointer;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    font-family: YanoneKaffeesatz !important;
    font-size: 17px !important;
    transition: background-color 600000s 0s, color 600000s 0s;
}


.homelogo {
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: 8px;
}

.form-group { /* override bootstrap*/
    margin-bottom: 0px;
    width: 290px;
    font-size: 20px;
    font-weight: normal !important;
}

.btn {
    font-size: 17px;
    border-radius: 0px;
    /*    border: none;*/
    padding: 5px 12px;
    /*margin-bottom: 10px;*/
}


/* Solid border */
hr.solid {
    border-top: 1px solid; 
    color: var(--normaltextcolor);
}


.instance-title {
    color: var(--normaltextcolor);
    font-size: 25px;
    text-align:center;
}

.logo-line {
    /*max-width: 940px;*/
    color: var(--textcolor);
}

.text-danger {
    color: #a94442;
    font-size: 17px;
    font-weight: normal;
}

    .text-danger > ul {
        padding-inline-start: 0px;
    }

label {
    font-weight: normal;
}


.fontsize-bodytext {
    font-family: YanoneKaffeesatz;
    font-size: 17px !important;
    font-weight: normal;
}


.fontsize-titletext {
    font-family: YanoneKaffeesatz;
    font-size: 20px !important;
    font-weight: normal;
}



h4, .h4 {
    font-size: 20px;
}

.pagetitle {
    font-size: 25px;
    font-weight: bold;
    vertical-align: text-top;
}


.hometitle {
    font-size: 25px;
    font-weight: normal;
}


.modal-content {
    padding: 15px;
}

.modal-title {
    padding-left: 15px;
    color: var(--normaltextcolor);
}

.modal-header {
    padding: 15px 15px 0px 15px;
}

.modal-body {
    position: relative;
    padding: 0 15px;
    color: var(--textcolor);
}

.modal-footer {
    border: none !important;
    padding: 15px 30px 15px 30px;
}



/*.glyphicon-pencil:hover,
.glyphicon-trash:hover,*/
.function-pencil:hover img,
.function-trash:hover img,
.querylist-pencil:hover img,
.querylist-trash:hover img,
.sourcelist-pencil:hover img,
.sourcelist-trash:hover img,
.displayist-pencil:hover img,
.displaylist-trash:hover img,
.condition-pencil:hover img,
.condition-trash:hover img,
.awesomegrid-pencil:hover img,
.awesomegrid-trash:hover img,
.dataformgrid-pencil:hover img,
.dataformgrid-trash:hover img,
.dataformgrid-eye:hover img,
.glyphicon-new-window:hover,
.glyphicon-list-alt:hover,
.glyphicon-stats:hover,
.dashboardlist-lock:hover img,
.dashboardlist-eye-open:hover img,
.glyphicon-edit:hover,
.dashboardlist-pencil:hover img,
.dashboardlist-trash:hover img,
.dashboardlist-run:hover img,
.fileimportlist-pencil:hover img,
.fileimportlist-trash:hover img,
.fileimportlist-eye:hover img {
    -webkit-box-shadow: 0 0 10px yellow;
    border-radius: 100px;
}





/* ------------------ Menu Maintenance Styles --------------------*/

#listbrowse,
#fileimportbrowse {
    /*border: 1px solid #ccc;*/
    /*margin: 0 50px;*/
    min-height: 250px;
    max-height: 75vh;
    width: 100%;
    overflow: auto;
}

#menumaintenance {
    min-height: 250px;
    max-height: 75vh;
    width: 100%;
    background-color: var(--menucolor);
    overflow: hidden;
}

#listbrowse {
    background-color: var(--menucolor);
    height: 680px;
}

#menumaintenanceframe {
    margin-top: 30px;
    overflow: auto;
}

.menumaintenance-container {
    min-width: 400px;
    overflow-x: auto;
}

.menumaintenancecolor-1 {
    color: var(--normaltextcolor);
}

.menumaintenancecolor-2 {
    color: var(--textcolor);
}

.parent-li,
.menusub-li {
    cursor: pointer;
    color: var(--textcolor);
}

/* ------------------ Permissions Styles --------------------*/
.permissions-container {
    margin: 0 30px;
    flex-flow: row;
    min-width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 700px;
}

    .permissions-container .header-row {
        height: 10%;
        padding: 10px 20px 5px 20px;
    }

.permissions-row {
    /* display: flex;
    flex-flow: row;*/
    display: grid;
    grid-template-areas:
        'users permissions-tree accesstypes';
    grid-template-columns: 32fr 40fr 28fr;
    column-gap: 20px;
    padding: 20px;
    min-width: 1000px;
    min-height: 100%;
    width: 100%;
    height: 75vh;
    grid-auto-flow: row;
}


#tabusers-button,
#tabusergroups-button {
    background-color: var(--menucolor);
}

#debugwidth {
    position: absolute;
    top: 15px;
    right: 0px;
    color: var(--normaltextcolor);
}

#permissions-img {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

#savedone-span {
    float: right;
    margin-right: 10px;
    padding-top: 10px;
}

.permissions-tab {
    color: var(--textcolor);
}

.one {
    margin: 10px 10px;
    /*width: 35fr;*/
    grid-area: users;
    background-color: var(--menucolor);
}


.two {
    margin: 10px 10px;
    /* width: 40fr;*/
    grid-area: permissions-tree;
    display: block;
    background-color: var(--menucolor);
}

.two-content,
.three-content {
    display: none;
}

.three {
    margin: 10px 10px;
    /*width: 25%;*/
    grid-area: accesstypes;
    display: block;
    background-color: var(--menucolor);
}

.permissions-header #checkboxArea {
    padding-left: 10px;
    padding-top: 2px;
    padding-right: 10px;
}

.permissions-row fieldset {
    /*border: 1px solid #ccc;*/
    padding: 20px 20px 20px 37px;
}

.permissions-row .tab1 {
    overflow: hidden;
    border: none;
    background-color: transparent;
    padding: 0 37px;
}

    /* Style the buttons inside the tab */
    .permissions-row .tab1 button {
        /*background-color: inherit;*/
        float: left;
        /*border: 1px solid #ccc;*/
        border: none;
        outline: none;
        cursor: pointer;
        padding: 4px 6px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .permissions-row .tab1 button:hover {
            /*background: -moz-linear-gradient(to right, var(--confirmcolor), var(--confirmcolor));*/ /* FF3.6-15 */
            /*background: -webkit-linear-gradient(to right, var(--confirmcolor), var(--confirmcolor));*/ /* Chrome10-25,Safari5.1-6 */
            /*background: linear-gradient(to right, var(--confirmcolor), var(--confirmcolor));*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            /*background-position: center bottom;
    background-size: auto 2px;
    background-repeat: no-repeat;*/
            border-bottom: 2px solid var(--confirmcolor);
            cursor: pointer;
        }

        /* Create an active/current tablink class */
        .permissions-row .tab1 button.active {
            /* background-color: #ccc; */
            color: var(--normaltextcolor);
            /*background: -moz-linear-gradient(to right, var(--confirmcolor), var(--confirmcolor));*/ /* FF3.6-15 */
            /*background: -webkit-linear-gradient(to right, var(--confirmcolor), var(--confirmcolor));*/ /* Chrome10-25,Safari5.1-6 */
            /*background: linear-gradient(to right, var(--confirmcolor), var(--confirmcolor));*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            /*background-position: center bottom;
    background-size: auto 2px;
    background-repeat: no-repeat; */
            border-bottom: 3px solid var(--confirmcolor);
        }

.permissions-row .tabcontent1 {
    display: none;
    padding: 6px 37px;
    /*border: 1px solid #ccc;*/
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    min-height: 400px;
    max-height: 70vh;
    overflow-y: auto;
}


.permissions-row .tab2 {
    overflow: hidden;
    border: none;
    background-color: transparent;
    padding: 7px 27px;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

#permissionstreeArea {
    height: 200px;
}

/*
#Placeholder {
    display: flex;
    height:100%;
}
*/

.permissions-row .tab3 {
    overflow: hidden;
    border: none;
    background-color: transparent;
    padding: 10px 10px 41px 0px;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

/* Style the buttons inside the tab */
.permissions-row .tab2 button {
    background-color: inherit;
    /*float: left;*/
    border: none;
    outline: none;
    cursor: default;
    padding: 24px 6px;
    transition: 0.3s;
}

    /* Change background color of buttons on hover */
    .permissions-row .tab2 button:hover {
        background-color: transparent;
    }

    /* Create an active/current tablink class */
    .permissions-row .tab2 button.active {
        background-color: transparent;
        /* Style the tab content */
    }


.permissions-row .tabcontent2 {
    display: none;
    padding: 6px 20px;
    /*border: 1px solid #ccc;*/
    /* border-top: 1px solid #ccc;*/
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    min-height: 450px;
    max-height: 70vh;
    overflow: auto;
}

#usergroupsTable tr:hover,
#usersTable tr:hover {
    color: var(--confirmcolor) !important;
    cursor: pointer;
}

@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.tree, .tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tree img {
        width: 16px;
        display: inline;
        padding-top: 0;
        margin-right: 10px;
    }

    .tree ul {
        margin-left: 1em;
        position: relative
    }

        .tree ul ul {
            margin-left: .5em
        }

        .tree ul:before {
            /*content: "";*/
            display: block;
            width: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            border-left: 1px solid
        }

    .tree li {
        margin: 0;
        padding: 0 1em;
        line-height: 2em;
        position: relative;
    }

    .tree ul li:before {
        /*content: "";*/
        display: block;
        width: 10px;
        height: 0;
        border-top: 1px solid;
        margin-top: -1px;
        position: absolute;
        top: 1em;
        left: 0
    }

    .tree ul li:last-child:before {
        background: #fff;
        height: auto;
        top: 1em;
        bottom: 0
    }

.indicator {
    margin-right: 5px;
}

.tree a {
    display: block;
    /*  color:black;*/
    margin: 0;
    padding: 0 1em;
    line-height: 2em;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

    .tree a:hover,
    .decorator:hover {
        color: var(--confirmcolor) !important;
    }



.tree ul a:before {
    /*content: "";*/
    display: block;
    width: 10px;
    height: 0;
    border-top: 1px solid;
    margin-top: -1px;
    position: absolute;
    top: 1em;
    left: 0
}

.tree ul a:last-child:before {
    background: #fff;
    height: auto;
    top: 1em;
    bottom: 0
}

.dummy {
    margin-left: 1em;
    position: relative;
    padding: 0 1em;
}

    .dummy.dummy-a {
        display: none;
        color: var(--textcolor);
        padding: 0;
    }

.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    border: none;
    background: transparent;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    outline: 0;
}

#singlepermission {
    padding-top: 7px;
    color: var(--normaltextcolor);
}

#accesstypesArea {
    padding-left: 20px;
    padding-bottom: 14px;
    color: var(--normaltextcolor);
}

.tab3 #checkboxArea {
    padding-bottom: 15px;
    color: var(--normaltextcolor);
}

.accesslistgroup-visible,
.accessrightgroup-visible {
    display: block;
}

.accesslistgroup-notvisible,
.accessrightgroup-notvisible {
    display: none;
}

.menusubitem-notvisible,
.permssions-li {
    color: var(--textcolor);
}


.menusubitem-visible,
.usergroups-row,
.user-row.active-user-row {
    color: var(--nomaltextcolor);
}

.user-row {
    color: var(--textcolor);
}


/* ----------------- Custom Styles follow -----------------*/
.avatar {
    margin-top: 5px;
    height: 100%;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    /*-webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);*/
}


/* ----------------- Custom Styles for Resizable Side Panel  -----------------*/
.splitter {
    position: absolute;
    top: 50px;
    /*left: 70px;*/
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

/*
.left-seperator-overlay  {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
}
*/

.right-seperator-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
}


#left-separator {
    cursor: col-resize;
    /*background-color: #aaa;*/
    /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
    background-repeat: no-repeat;
    background-position: center;*/
    width: 5px;
    height: 100%;
    /* prevent browser's built-in drag from interfering */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*
#left-separator:hover .left-seperator-overlay {
    opacity: 1;
}


#left-separator > img {
    width: 35px;
    position: relative;
    height: auto;
    cursor: pointer;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-60%);
    padding-top: 20px;
}
    */

#right-separator {
    cursor: col-resize;
    background-color: #aaa;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    width: 10px;
    height: 100%;
    /* prevent browser's built-in drag from interfering */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    #right-separator:hover .right-seperator-overlay {
        opacity: 1;
    }


    #right-separator > img {
        width: 35px;
        position: relative;
        height: auto;
        cursor: pointer;
        max-width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        padding-top: 20px;
    }

.first {
    width: 0;
    height: 100%;
    min-width: 0px;
    /*margin-left:10px;*/
    overflow: auto;
}

.second {
    /*position: relative;*/
    /*background-color: #fff;*/
    height: 100%;
    min-width: 10px;
    overflow: auto;
    flex: 1;
}

/*#debug-message {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;*/ /* Optional: add some padding around the message */
/*color: var(--normaltextcolor);*/ /* Optional: for visibility */
/*}*/

.third {
    /* background-color: #dde;  original color */
    background-color: snow;
    /* background-color: transparent; */
    width: 0;
    height: 100%;
    min-width: 0px; /* make this 10px if 3rd panel is visible */
    overflow: auto;
}


/* -----------------  Custom Styles for the Left side menu  ----------------- */

#menuArea {
    padding-left: 10px;
    padding-bottom: 25px;
}

.menuheader {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 15px;
}

/* Remove default bullets */
.first ul li {
    color: black;
    list-style: none;
    padding: 2px 5px;
    list-style-type: none;
    white-space: nowrap;
    /*padding-inline-start: 22px;*/
    padding-inline-start: 10px;
}

.first ul {
    padding-inline-start: 0px;
}


.first a {
    color: black;
    list-style: none;
    padding: 2px 5px;
    list-style-type: none;
    white-space: nowrap;
    display: block;
    /*margin-left: -30px;*/
    padding-left: 20px;
    cursor: pointer;
    padding-top: 5px;
    padding-inline-start: 24px;
}

    .first a:hover {
        /* background-color: #8383C0;  Add a hover color */
        /* color: var(--td-hover-color);*/
        text-decoration: none;
        /*color: #F4F4F4*/
    }


/* Remove margins and padding from the parent ul */
.first .myUL {
    margin: 0;
    padding: 0;
    padding-top: 15px;
}

.myUL-notvisible {
    display: none;
}

.caret {
    font-size: 17px;
    font-weight: 400;
}

.menuaction {
    font-size: 17px;
    font-weight: normal;
    color: var(--normaltextcolor) !important;
}

    .menuaction:hover,
    .menuaction:focus {
        color: var(--td-hover-color) !important;
    }

/* Style the caret/arrow */
.first .caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    /*content: url("/images/MenuArrowRight.png");*/
    /* content: "\e080";*/
    /* background: url("/images/ALogo-Dark-TopBar.png") no-repeat;*/
    /*color: black;*/
    /*display: inline-block;
    margin-top: 2px;
    margin-right: 6px;
    width: 20px;
    height: 20px;*/

    background-image: url("../images/MenuArrowRight.png");
    background-repeat: no-repeat;
    background-position: 0px 3px;
    background-size: 16px 16px;
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "";
    margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret.active::before {
    transform: rotate(90deg);
    background-position: 4px;
}

/* Hide the nested list */
.first .nested {
    display: none;
}

    /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
    .first .nested.displayactive {
        display: block;
    }

/* ------------------ Global Search Styles --------------------*/
#global-search {
    /* display: block;*/
    display: none;
    text-align: center;
}

.badge-notify {
    position: relative;
    top: -27px;
    left: 32px;
    background-color: red;
}



/* Hide/rearrange for smaller screens */
@media screen and (max-width: 700px) {
    /* layout the action bar horizontally */
    /*.icon-actionbar {
        width: 100%;
        height: 58px;
    }
        
    .icon-actionbar img {
        display: inline-grid;
    }


    .icon-actionbar a {
        width: 60px;
        text-align: center;
        padding: 3px 11px;
    }

    #bottom-home {
        position: absolute;
        right: 160px;*/ /* former value 210px */
    /*bottom:4px;
    }

    #bottom-bell {
        position: absolute;
        right: 110px;
        bottom: 4px;
    }*/

    /*#bottom-message {
        position: absolute;
        right: 110px;
        bottom: 4px;
    }*/

    /*#bottom-question {
        position: absolute;
        right: 60px;
        bottom: 4px;
    }

    #bottom-logout {
        position: absolute;
        right: 10px;
        bottom: 4px;
    }*/


    body {
        padding-top: 58px;
    }

    .body-content {
        padding-left: 0px;
    }


    .splitter {
        position: absolute;
        /*top: 108px;*/
        left: 0;
    }
}