body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.md-button.md-primary.md-raised {
    color: #f5f5f5;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

.input-group {
    max-width: 500px;
}

.input-group-label-min-width {
    min-width: 164px;
}
/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

.vertical-align {
    display: flex;
    align-items: center;
}

/** Saw Spinner Classes **/

.Aligner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Aligner-item {
    max-width: 50%;
}

.Aligner-item--top {
    align-self: flex-start;
}

.Aligner-item--bottom {
    align-self: flex-end;
}

.no-gutter {
    margin: 0 0 0 0;
}

/****************************/

.panel.panel-primary {
    border-radius: 4px;
}

h2 > i {
    padding-right: 5px;
}

.btn-sm {
    border-radius: 3px;
}

:not(td) > .input-group {
    margin-bottom: 10px;
}

div.h3 {
    font-size: 20px;
}

.contains-notes {
    color: #ec8531;
}

.add-element-icon {
    color: #0067b1;
    z-index: 101;
    text-shadow: 3px 3px 3px #ccc;
}

.add-element-wrapper a:hover {
    color: #0067b1;
}

.item-modal-exit-element-wrapper a:hover {
    color: black;
}

.item-modal-exit-element-wrapper a {
    color: #333333;
    opacity: .4;
    text-shadow: 3px 3px 3px #ccc;
}

.app-modal-window .modal-dialog {
    width: 84%;
}

.md-backdrop.md-opaque.md-default-theme,
.md-dialog-container {
    top: 0 !important;
    position: fixed;
    z-index: 1001;
}

.close-x-button i, .grey-icon i {
    color: #333333;
    opacity: .4;
    text-shadow: 3px 3px 3px #ccc;
}

    .close-x-button i:hover, .grey-icon i:hover {
        color: black;
    }

.category-element {
    max-height: 305px;
    min-height: 200px;
}

    .category-element img, .category-img img {
        max-height: 110px;
    }

.item-modal-body-wrapper .modal-body {
    overflow-y: auto;
}

@media (max-height:425px) {
    .item-modal-body-wrapper .modal-body {
        height: 51vh;
    }
}

@media (max-height:460px) {
    .item-modal-body-wrapper .modal-body {
        height: 55vh;
    }
}

@media (min-height:460px) {
    .item-modal-body-wrapper .modal-body {
        height: 60vh;
    }
}

@media (min-height:600px) {
    .item-modal-body-wrapper .modal-body {
        height: 71vh;
    }
}

@media (min-height:750px) {
    .item-modal-body-wrapper .modal-body {
        height: 75vh;
    }
}

.category-thumbnail a:focus {
    outline: none !important;
}

.mark-red {
    color: #e60000;
    /*color:red;*/
}

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

    .mark-bold td div {
        font-weight: bold;
    }

.locationDetail .wj-control[disabled] {
    opacity: 1;
    border-top-color: rgb(204, 204, 204);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgb(204, 204, 204);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.input-with-check-box {
    min-height: 38px;
}

.input-group {
    max-width: 100%;
}

.my-input-width {
    width: 100%;
}

/* search clear button*/
.search-clear-button {
    background-color: #eee;
    cursor: pointer;
}

    .search-clear-button:active {
        background-color: #ccc;
    }

.locationDetail .wj-dropdown {
    width: 260px;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

.locationDetail .wjcomboFocus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid #66afe9;
}

/* Navigation Panels */

.panel-for-hover:hover .panel-heading {
    background-color: #2d6a9f;
}

.panel-for-hover .panel-heading {
    background-color: #0067b1;
    color: white;
}

.item-lookup-header a:hover {
    text-decoration: none !important;
}

.fademe.ng-hide {
    opacity: 0;
}

.fademe.ng-hide-remove,
.fademe.ng-hide-add {
    display: block !important;
}

.fademe.ng-hide-remove {
    transition: all linear 1000ms;
}

.fademe.ng-hide-add {
    transition: all linear 500ms;
}

.account-nav .nav .dropdown-menu {
    width: 100%;
    min-width: inherit;
}

.item-import-back-button {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/********************** Loading Spinner ******************************/

.dizzy-gillespie {
    filter: saturate(3);
    width: 0.1px;
    height: 0.1px;
    border: 40px solid transparent;
    border-radius: 5px;
    animation: loader 3s ease-in infinite, spin 1s linear infinite;
}

    .dizzy-gillespie::before {
        filter: saturate(0.3);
        display: block;
        position: absolute;
        z-index: -1;
        margin-left: -40px;
        margin-top: -40px;
        content: '';
        height: 0.1;
        width: 0.1;
        border: 40px solid transparent;
        border-radius: 5px;
        animation: loader 2s ease-in infinite reverse, spin 0.8s linear infinite reverse;
    }

    .dizzy-gillespie::after {
        display: block;
        position: absolute;
        z-index: 2;
        margin-left: -10px;
        margin-top: -10px;
        content: '';
        height: 20px;
        width: 20px;
        border-radius: 20px;
        background-color: white;
    }

@keyframes loader {
    0% {
        border-bottom-color: transparent;
        border-top-color: #114357
    }

    25% {
        border-left-color: transparent;
        border-right-color: #826C75
    }

    50% {
        border-top-color: transparent;
        border-bottom-color: #F29492
    }

    75% {
        border-right-color: transparent;
        border-left-color: #826C75
    }

    100% {
        border-bottom-color: transparent;
        border-top-color: #114357
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

/********************** Holy Grail ***********************************/

.HolyGrail {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.HolyGrail-body {
    display: flex;
    flex: 1;
}

.HolyGrail-content {
    flex: 1;
    margin: 0;
}

.HolyGrail-nav, .HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
}

.HolyGrail-nav {
    /* put the nav on the left */
    order: -1;
}

.HolyGrail,
.HolyGrail-body {
    display: flex;
    flex-direction: column;
}

.HolyGrail-nav {
    order: -1;
}

@media (min-width: 768px) {
    .HolyGrail-body {
        flex-direction: row;
        flex: 1;
    }

    .HolyGrail-content {
        flex: 1;
    }

    .HolyGrail-nav, .HolyGrail-ads {
        /* 12em is the width of the columns */
        flex: 0 0 14em;
    }
}

/****************** Holy Grail Usage ***************/
/*
<body class="HolyGrail">
  <header>…</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">…</main>
    <nav class="HolyGrail-nav">…</nav>
    <aside class="HolyGrail-ads">…</aside>
  </div>
  <footer>…</footer>
</body>

*/

/******************* Side Bar ***********************/

.nav-side-menu i {
    padding-left: 10px;
}

.nav-side-menu {
    overflow: auto;
    background-color: #eee;
    position: fixed;
    top: 0;
    left: 0px;
    width: 200px;
    height: 100%;
    color: #337ab7;
    z-index: 55;
}

    .nav-side-menu .brand {
        /*background-color: #23282e;*/
        background-color: #eee;
        line-height: 50px;
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        /*border-bottom: 2px solid #ddd;*/
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .nav-side-menu .toggle-btn {
        display: none;
    }

    .nav-side-menu ul,
    .nav-side-menu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        line-height: 39px;
        cursor: pointer;
    }

        .nav-side-menu ul :not(collapsed) .arrow:before,
        .nav-side-menu li :not(collapsed) .arrow:before {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }
        /*.nav-side-menu ul .active,*/
        .nav-side-menu li .active {
            /*border-left: 3px solid #d19b3d;*/
            /* background-color: #4f5b69;*/
            background-color: #ddd;
        }

        .nav-side-menu ul .sub-menu li.active,
        .nav-side-menu li .sub-menu li.active {
            color: #d19b3d;
        }

            .nav-side-menu ul .sub-menu li.active a,
            .nav-side-menu li .sub-menu li.active a {
                color: #d19b3d;
            }

        .nav-side-menu ul .sub-menu li,
        .nav-side-menu li .sub-menu li {
            /*background-color: #181c20;*/
            background-color: white;
            border: none;
            line-height: 28px;
            border-bottom: 1px solid #23282e;
            margin-left: 0;
        }

            .nav-side-menu ul .sub-menu li:hover,
            .nav-side-menu li .sub-menu li:hover {
                /*background-color:#020203;*/
                background-color: #ddd;
            }

            .nav-side-menu ul .sub-menu li:before,
            .nav-side-menu li .sub-menu li:before {
                font-family: FontAwesome;
                content: "\f105";
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: middle;
            }

    .nav-side-menu li {
        padding-left: 0;
        /*border-left: 3px solid #2e353d;*/
        /*border-bottom: 1px solid #23282e;*/
        border-bottom: 1px solid #ddd;
        /*border-top: 1px solid #e6e6e6;*/
        /*added */ /*background-color:#2e353d;*/
        background-color: #eee;
    }
    /* edit: added for missing border of first list item */
    .nav-side-menu .menu-content > li:first-child {
        border-top: 1px solid #ddd;
    }

    .nav-side-menu li a {
        text-decoration: none;
        /*color: #e1ffff;*/
        color: #337ab7;
    }

        .nav-side-menu li a i {
            padding-left: 10px;
            width: 20px;
            padding-right: 20px;
        }

.nav-side-menu-item-active {
    background-color: #ddd;
}

.nav-side-menu li:hover {
    /*border-left: 3px solid #d19b3d;*/
    /* background-color: #4f5b69;*/
    /* added */ background-color: #ddd;
    /*
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    */
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.nav-side-menu li:focus {
    background-color: #ddd; /*should be the same as hover*/
}

@media (max-width: 767px) {
    .nav-side-menu {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
    }

        .nav-side-menu .toggle-btn {
            display: block;
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 19px;
            z-index: 10 !important;
            padding: 3px;
            background-color: #ffffff;
            /*color: #337ab7; desktop navbar color*/
            color: #000;
            width: 40px;
            text-align: center;
        }

    .brand {
        text-align: left !important;
        font-size: 22px;
        padding-left: 20px;
        line-height: 50px !important;
    }
}

@media (min-width: 767px) {
    .nav-side-menu .menu-list .menu-content {
        display: block;
    }
}

/**************************************/

/* displays top navbar in upper right cornver*/
.navbar-fixed-top {
    left: unset;
}

/** table stylings */

.my_md_styles .table > thead > tr > th {
    border-bottom: 1px solid #ddd;
}

.my_md_styles .table > tbody + tbody {
    border-top: 1px solid #ddd;
}

.my_md_styles .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.my_md_styles .table > tbody > tr > td, .my_md_styles .table > tbody > tr > th, .my_md_styles .table > tfoot > tr > td, .my_md_styles .table > tfoot > tr > th, .my_md_styles .table > thead > tr > td, .my_md_styles .table > thead > tr > th {
    padding: 18px 8px 12px 8px;
}

.hover-background-color:hover {
    background-color: transparent !important;
}

.md-tooltip {
    height: auto !important;
    white-space: normal;
    line-height: normal;
    padding-bottom: 4px;
    padding-top: 4px;
}

@media (min-width: 959px) {
    .md-tooltip {
        font-size: 12px;
    }
}

.md-input-focused .lower-tooltip, .md-input-has-value .lower-tooltip {
    display: none;
}

.upper-tooltip {
    display: none;
}

.md-input-focused .upper-tooltip, .md-input-has-value .upper-tooltip {
    display: initial;
}

.tooltip {
}

.tooltip-inner {
    background-color: #494949 !important;
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
    text-align: left;
    max-width: 500px;
    color: #fff;
    white-space: pre-line;
    width: max-content;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #000000;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #494949;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #000000;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #000000;
}

/* list table styles */
table.my-table tr td {
    background-color: white;
}

.my-table .md-button.md-default-theme:not([disabled]).md-focused, .md-button:not([disabled]).md-focused, .md-button.md-default-theme:not([disabled]):hover, .md-button:not([disabled]):hover {
    background-color: rgba(158,158,158,0);
}

.my-table td .md-button.md-no-style {
    padding: 15px !important;
}

.my-table td {
    padding: 0px !important;
}

table.my-table tr:hover td {
    background-color: #eee;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

table.my-table2 tr td {
    background-color: white;
}

.my-table2 .md-button.md-default-theme:not([disabled]).md-focused, .md-button:not([disabled]).md-focused, .md-button.md-default-theme:not([disabled]):hover, .md-button:not([disabled]):hover {
    background-color: rgba(158,158,158,0);
}

.my-table2 td .md-button.md-no-style {
    padding: 15px !important;
}

.my-table2 td {
    padding: 0px !important;
}

table.my-table2 tr:hover td:not(:last-child) {
    background-color: #eee;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.my-md-dialog {
    width: 80%;
}

/************************************/

/* style.css */
/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.page {
    bottom: 0;
    padding-top: 100px;
    position: absolute;
    /*text-align:center;*/
    top: 0;
    width: 100%;
}

/*.page h1    { font-size:60px; }
.page a     { margin-top:50px; }*/

/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
    0% {
        transform: rotateZ(0deg);
    }

    20% {
        transform: rotateZ(10deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: rotateZ(17deg);
    }

    60% {
        transform: rotateZ(16deg);
    }

    100% {
        transform: translateY(100%) rotateZ(17deg);
    }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideOutRight {
    to {
        transform: translateX(100%);
    }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to {
        transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from {
        opacity: 0.3;
        -webkit-transform: scale(0.8);
    }
}

/* slide in from the right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}


/* slide in from the bottom */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.ng-enter {
    z-index: 8888;
}

.ng-leave {
    z-index: 9999;
}

/* page specific animations ------------------------ */

/* home -------------------------- */
/*/.page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
/*.page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }*/

.page-home.ng-enter {
    animation: slideInLeft 1s both ease-in;
}

.page-home.ng-leave {
    animation: slideOutLeft 1s both ease-in;
}


/* about ------------------------ */
.page-about.ng-enter {
    animation: slideInRight 1s both ease-in;
}

.page-about.ng-leave {
    animation: slideOutRight 1s both ease-in;
}

/* contact ---------------------- */
.page-contact.ng-leave {
    transform-origin: 50% 50%;
    animation: rotateOutNewspaper .5s both ease-in;
}

.page-contact.ng-enter {
    animation: slideInUp 0.5s both ease-in;
}

html.md-default-theme, html {
    background-color: white;
}

@media (min-width:1200px) {
    .wijmo-grid-options div:last-child .export-button {
        /*position:relative;
            float:right;
            right:100px*/
    }
}

.wijmo-grid-options {
    max-width: 1200px;
    overflow: auto;
}


#editImage {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

.westtool-spinner {
    display: inline-block;
    animation-name: spin;
    animation-duration: 2500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/**Keyword Exact Slider*/
.switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 24px;
    top: 12px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0067b1;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #0067b1;
}

input:focus + .slider {
    box-shadow: 0 0 1px #0067b1;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.slider-labels {
}

.show-required {
    border-color: #d9534f;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(224, 14, 14, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(210, 25, 25, 0.6);
}

.object-fields a.lower-tooltip {
    position: absolute;
    top: 0;
    right: 0;
}

    .object-fields a.lower-tooltip img {
        padding: 2px 5px 20px 10px;
        max-height: 36px !important;
    }

.object-fields .input-group-addon {
    position: relative;
}

.remove-button {
    opacity: .9;
    color: #e82d2a;
    text-shadow: 0 0 1em grey;
}

/* removes focus of ng-click */
.nofocus:focus, .nofocus a:focus {
    outline: none;
    /*text-decoration: none;*/
}

.view-model-errors-in-modal {
    margin-top: 10px;
}


.item-info-box {
    height: 114px;
    position: absolute;
    right: -3px;
    width: 200px;
}

.item-info-box {
    top: -118px;
}

.arrow_box {
    position: relative;
    background: #d5d5d5;
    border: 3px solid #0067b1;
    border-color: #0067b1;
    border-radius: 5px;
    background: whitesmoke;
    z-index: 5;
}

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

    .arrow_box:after {
        border-color: rgba(213, 213, 213, 0);
        border-top-color: whitesmoke;
        border-width: 10px;
        margin-left: -24px;
    }

    .arrow_box:before {
        border-color: rgba(245, 245, 245, 0);
        border-top-color: #0067b1;
        border-width: 14px;
        margin-left: -28px;
    }

.report-filter-action-buttons {
    float: right;
    margin-bottom: 0px;
    margin-left: 2px;
}

/************ GUI CABINET *****************/

.cabinet_side {
    padding: 10px 0 0 34px;
    display: inline-block;
    background: linear-gradient(to right, #0067b1 0%,#ffffff 11%,#ffffff 24%);
    position: relative;
    margin-top: 5px;
}

.cabinet_top {
    background: linear-gradient(to bottom,#0067b1 0%,#fff 99%);
    top: 0;
    left: 22px;
    height: 10px;
    transform: skew(77deg);
    position: absolute;
    z-index: 1;
    right: 0;
    margin-right: 15px;
}

.cabinet {
    border: 1px solid #0067b1;
    border-spacing: .6em;
    color: #0067b1;
    width: 250px;
}

.matrixcabinet {
    border: 1px solid #0067b1;
    color: #0067b1;
    line-height: .25em;
}

.cabinet-m .cabinet {
    width: 200px;
}

.cabinet-s .cabinet {
    width: 150px;
}

.cabinet_corner {
    position: absolute;
    background: white;
    width: 265px;
    height: 10px;
    transform: skew(77deg);
    bottom: 0px;
    left: -254px;
}

.drawer .filled,
.matrixdrawerrow span.matrixdrawerrowbin.filled {
    box-shadow: inset 0px 0px 0 4px #0067b163;
    font-weight: bold;
}

.filled:hover > img,
.matrixdrawerrow .matrixdrawerrowbin.filled:hover > img {
    display: none;
}

.cabinet-max .filled:hover > img {
    display: initial;
}

.cabinet-vendstock .filled {
    background-color: #0067b163;
}

.filled .item_detail:hover img, .filled:hover .item_detail img, .id_focus .item_detail img {
    display: initial;
}

.drawer_face {
    padding: .5em 0;
    color: #0067b1;
    border: 1px solid #0067b1;
}

    .drawer_face:hover {
        border-top: 2px solid #0067b1;
        border-left: 4px solid #0067b1;
        background-color: white;
        margin-right: -4px;
        background: white;
        margin-bottom: -1px;
    }

.cabinet-m .drawer_face, .cabinet-ms .drawer_face, .cabinet-s .drawer_face {
    margin-bottom: 2px;
}

.cabinet td, .cabinet th {
    text-align: center;
    padding: 0 5% 1em 5%;
}

    .cabinet td a {
        text-decoration: none;
    }

.drawer_face_open {
    border-top: 3px solid #0067b1;
    border-left: 6px solid #0067b1;
    margin-right: -6px;
    margin-bottom: -3px;
}

.cabinet-m .drawer_face_open, .cabinet-ms .drawer_face_open, .cabinet-s .drawer_face_open {
    margin: 0;
    border: 1px solid #0067b1;
    background-color: #0067b173;
}

.drawer_wrap_open div {
    color: #0067b1;
    border-radius: 3px;
}

.drawer_wrap_open .drawer_face {
    position: absolute;
    left: -3px;
    top: -1px;
    width: 105%;
    height: 18px;
    border: 1px solid #0067b1;
    background-color: white;
}

    .drawer_wrap_open .drawer_face:hover {
        color: #0067b1;
    }

.drawer_window {
    text-align: center;
    padding: 1px 1px 3px 1px;
    color: #0067b1;
    width: 600px;
    height: 600px;
}

.cabinet-m .drawer_window {
    width: 380px;
    height: 380px;
    font-size: 12px;
}

.cabinet-ms .drawer_window {
    width: 255px;
    height: 255px;
    font-size: 12px;
}

.cabinet-s .drawer_window {
    width: 180px;
    height: 180px;
    margin-bottom: 1px;
}

.cabinet-s .drawer {
    width: 103.1%;
}

.cabinet-s.cbinaet-vendstock .drawer {
    max-width: 100%;
}

.cabinet-s .drawer > div:last-child, .cabinet-s .drawer_add > div:last-child {
    display: none;
}

.cabinet .drawer_label, .cabinet .drawer_label:hover {
    text-align: center;
    padding: .5em 0;
    color: #0067b1;
    border-radius: 0;
    border-top: 1px solid #0067b1;
}

.drawer_wrap {
    display: none;
}

.drawer_wrap_open {
    position: absolute;
    left: 305px;
    z-index: 1;
    display: block;
    top: 0px;
    border: 2px solid #0067b1;
    border-radius: .25em;
    background-color: white;
}

.cabinet-m .drawer_wrap_open {
    left: 255px;
}

.cabinet-s .drawer_wrap_open {
    left: 205px;
}

.drawer {
    border-bottom: none;
    display: flex;
    height: 100%;
}

.cabinet .drawer div {
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
    float: left;
    margin: 0 0 0 0.5%;
    justify-content: flex-end;
    height: 100%;
}

.cabinet-max .drawer {
    height: unset;
    width: auto;
}

    .cabinet-max .drawer div {
        height: unset;
    }

    .cabinet-max .drawer:before {
        content: '';
        position: fixed;
        width: inherit;
        height: inherit;
    }

.cabinet-max.cabinet-m .drawer div {
    max-height: 363px;
}

.cabinet-max.cabinet-s .drawer div {
    max-height: 180px;
}

.cabinet-s .drawer div, .cabinet-s .drawer_add div {
    margin: 0 .45%;
}

.cabinet .drawer div div {
    margin: 2% 0;
    border: 2px solid #0067b1;
    padding: 0;
    overflow: hidden;
}

.matrixcabinet .matrixdrawer div div span.matrixdrawerrow span.matrixdrawerrowbin {
    border: 2px solid #0067b1;
    padding: 0;
    overflow: hidden;
}

.cabinet .drawer div div:hover, .cabinet .drawer div .id_focus,
.matrixcabinet .matrixdrawer div div span.matrixdrawerrow span.matrixdrawerrowbin {
    overflow: visible;
}

.drawer div, .drawer_add div {
    border: 1px solid white;
    width: 5.71%;
    min-width: 32px;
}

.drawer_add div {
    float: left;
    margin: 0 0 0 0.5%;
}

.drawer_add .add {
    float: none;
    width: auto;
}

.cabinet-m .drawer div, .cabinet-m .drawer_add div {
    min-width: 16px;
}

.cabinet-s .drawer div, .cabinet-s .drawer_add div {
    min-width: 5.3px;
}

.drawer div:first-child:nth-last-child(15),
.drawer div:first-child:nth-last-child(15) ~ div,
.drawer_add div:first-child:nth-last-child(15),
.drawer_add div:first-child:nth-last-child(15) ~ div {
    width: 6.12%;
}

.drawer div:first-child:nth-last-child(14),
.drawer div:first-child:nth-last-child(14) ~ div,
.drawer_add div:first-child:nth-last-child(14),
.drawer_add div:first-child:nth-last-child(14) ~ div {
    width: 6.6%;
}

.drawer div:first-child:nth-last-child(13),
.drawer div:first-child:nth-last-child(13) ~ div,
.drawer_add div:first-child:nth-last-child(13),
.drawer_add div:first-child:nth-last-child(13) ~ div {
    width: 7.14%;
}

.drawer div:first-child:nth-last-child(12),
.drawer div:first-child:nth-last-child(12) ~ div,
.drawer_add div:first-child:nth-last-child(12),
.drawer_add div:first-child:nth-last-child(12) ~ div {
    width: 7.78%;
}

.drawer div:first-child:nth-last-child(11),
.drawer div:first-child:nth-last-child(11) ~ div,
.drawer_add div:first-child:nth-last-child(11),
.drawer_add div:first-child:nth-last-child(11) ~ div {
    width: 8.53%;
}

.drawer div:first-child:nth-last-child(10),
.drawer div:first-child:nth-last-child(10) ~ div,
.drawer_add div:first-child:nth-last-child(10),
.drawer_add div:first-child:nth-last-child(10) ~ div {
    width: 9.43%;
}

.drawer div:first-child:nth-last-child(9),
.drawer div:first-child:nth-last-child(9) ~ div,
.drawer_add div:first-child:nth-last-child(9),
.drawer_add div:first-child:nth-last-child(9) ~ div {
    width: 10.54%;
}

.drawer div:first-child:nth-last-child(8),
.drawer div:first-child:nth-last-child(8) ~ div,
.drawer_add div:first-child:nth-last-child(8),
.drawer_add div:first-child:nth-last-child(8) ~ div {
    width: 11.92%;
}

.drawer div:first-child:nth-last-child(7),
.drawer div:first-child:nth-last-child(7) ~ div,
.drawer_add div:first-child:nth-last-child(7),
.drawer_add div:first-child:nth-last-child(7) ~ div {
    width: 13.69%;
}

.drawer div:first-child:nth-last-child(6),
.drawer div:first-child:nth-last-child(6) ~ div,
.drawer_add div:first-child:nth-last-child(6),
.drawer_add div:first-child:nth-last-child(6) ~ div {
    width: 16.06%;
}

.drawer div:first-child:nth-last-child(5),
.drawer div:first-child:nth-last-child(5) ~ div,
.drawer_add div:first-child:nth-last-child(5),
.drawer_add div:first-child:nth-last-child(5) ~ div {
    width: 19.37%;
}

.drawer div:first-child:nth-last-child(4),
.drawer div:first-child:nth-last-child(4) ~ div,
.drawer_add div:first-child:nth-last-child(4),
.drawer_add div:first-child:nth-last-child(4) ~ div {
    width: 24.34%;
}

.drawer div:first-child:nth-last-child(3),
.drawer div:first-child:nth-last-child(3) ~ div,
.drawer_add div:first-child:nth-last-child(3),
.drawer_add div:first-child:nth-last-child(3) ~ div {
    width: 32.62%;
}

.drawer div:first-child:nth-last-child(2),
.drawer div:first-child:nth-last-child(2) ~ div,
.drawer_add div:first-child:nth-last-child(2),
.drawer_add div:first-child:nth-last-child(2) ~ div {
    width: 49.19%;
}

.drawer div:first-child:nth-last-child(1), .drawer div:first-child:nth-last-child(1) ~ div, .drawer_add div:first-child:nth-last-child(1), .drawer_add div:first-child:nth-last-child(1) ~ div {
    height: 100%;
}

    .drawer div:first-child:nth-last-child(1) div, .drawer_add div:first-child:nth-last-child(1) div {
        margin: .5% .5% .5% 0;
    }

.drawer div div {
    height: 5.79%;
    min-height: 32px;
    min-height: 32.2px;
}

.cabinet-s .drawer div div {
    min-height: 4px;
    min-height: 4.6px;
}

.cabinet-m .drawer div div {
    min-height: 14px;
    min-height: 14.1px;
}

.cabinet_side .cabinet .drawer div div,
.cabinet_side .matrixcabinet .matrixdrawer div div {
    width: auto;
    float: none;
    position: relative;
}

.item_detail img {
    display: none;
}

.div:hover .item_detail item, .item_detail:hover item,
.matrixdrawer .matrixdrawerrow span:hover .item_detail item, .matrixdrawer .matrixdrawerrow .matrixdrawerrowbin .item_detail:hover item {
    display: inline-block;
}

.drawer img,
.matrixdrawerrow img {
    max-height: 50%;
    max-width: 75%;
    margin: auto;
}

.drawer div div:hover, .drawer_add div:hover,
.matrixdrawerrow span:hover {
    cursor: pointer;
    color: white;
}

.drawer div div:hover,
.matrixdrawerrow span:hover {
    background-color: #0067b1;
}

.drawer_add div .drawer_close:hover {
    background-color: red;
    color: white;
}

.drawer_add .add, .cabinet .drawer div > .add {
    color: gray;
    border: 1px dashed gray;
    background-color: lightgray;
}

    .drawer_add .add:hover, .cabinet .drawer div > .add:hover {
        color: white;
        border-color: gray;
        background-color: darkgray;
    }

.cabinet .drawer_add {
    padding: 3px 1px 0px 1px;
    display: flex;
}

.cabinet-max .drawer_add {
    max-width: 583px;
    overflow-x: scroll;
    margin-right: 17px;
}

.drawer_add .add, .drawer_add .drawer_close {
    padding: 1.5em 0;
    font-size: .8em;
    font-weight: bold;
    justify-content: center;
}

.cabinet-s .drawer_add {
    display: none;
}

.drawer_close {
    border: 1px solid white;
}

.drawer_add div .drawer_close {
    color: red;
    padding: 13.6px 0;
}

.cabinet .drawer_add .drawer_close:last-child {
    background-color: white;
    width: 100%;
}

    .cabinet .drawer_add .drawer_close:last-child:hover {
        background-color: red;
        color: white;
    }

.cabinet-s .drawer_add .drawer_close:last-child, .cabinet-s .drawer_add .drawer_close:last-child:hover {
    font-size: 1em;
    transform: rotate(90deg);
    background: none;
}

.drawer_add .drawer_close a:hover, .drawer_add .drawer_close:hover a {
    color: white;
}

.cabinet .drawer div:last-child, .cabinet .drawer_add div:last-child {
    flex: 1;
    margin-right: .5%;
    justify-content: center;
}

.cabinet-max .drawer div:last-child, .cabinet .drawer_add div:last-child {
    flex: unset;
}

.cabinet .drawer div div:last-child, .cabinet-s .drawer_add div .add:last-child, .cabinet-s .drawer div div:last-child, .cabinet-max .cabinet .drawer div:last-child, .cabinet-max .cabinet .drawer_add div:last-child {
    margin-right: 0;
}

.cabinet .drawer div div:last-child, .cabinet-s .drawer_add div .add:last-child, .cabinet-s .drawer div div:last-child {
    flex: unset;
}

.cabinet .drawer_add .add:last-child, .cabinet .drawer_add .drawer_close:last-child {
    flex: unset;
    margin: 0;
}


.cabinet .drawer div div div.item_detail {
    height: 0px;
    width: 0px;
    position: relative;
    font-size: 0;
    background-color: white;
    padding: .25em;
    opacity: 0;
    min-height: unset;
    border-color: #0062b7;
    box-shadow: inset 0px 0px 0 6px #0067b180, 0px 0px 0 6px #0062b7;
    filter: drop-shadow(.1em .1em .25em rgba(0,0,0,.7));
}

.matrixcabinet .matrixdrawer div div span.matrixdrawerrow span div.item_detail {
    height: 0px;
    width: 0px;
    position: relative;
    font-size: 0;
    background-color: white;
    padding: .5em;
    opacity: 0;
    min-height: unset;
    border-color: #0062b7;
    box-shadow: inset 0px 0px 0 6px #0067b180, 0px 0px 0 6px #0062b7;
    filter: drop-shadow(.1em .1em .25em rgba(0,0,0,.7));
}

/* Fix for hover block's blue highlighted background on cursoe over item desc text*/
.matrixcabinet .matrixdrawer div div span.matrixdrawerrow span.matrixdrawerrowbin:hover div.item_detail span.item_title {
    background-color: transparent;
    font-size: 14px;
    color: #0067b1;
    text-decoration-color: white;
}

.cabinet .drawer div div div:hover, .cabinet .drawer div div:hover div, .cabinet .drawer_wrap_open .drawer div .id_focus div {
    border-radius: 8px;
    z-index: 1;
    opacity: 1;
    color: #0062b7;
    position: absolute;
    top: 50%;
    right: 50%;
    transition: 175ms ease-out all;
    min-height: 200px;
    width: 160px;
    font-size: 22px;
    margin: -99px -80px 0 0;
}

.matrixcabinet .matrixdrawer div div span.matrixdrawerrow span.matrixdrawerrowbin:hover div {
    border-radius: 8px;
    z-index: 1;
    opacity: 1;
    color: #0062b7;
    position: absolute;
    top: 50%;
    right: 50%;
    transition: 175ms ease-out all;
    min-height: 200px;
    width: 160px;
    font-size: 22px;
    margin: -99px -80px 0 0;
    background-color: white;
}

.item_title {
    overflow: hidden;
    font-size: 75%;
    height: 3.5em;
    line-height: 1.25em;
}

.cabinet-s .item_title, .cabinet-m .item_title {
    height: 2.5em;
}

.drawer .filled:hover > .item_title,
.matrixdrawerrow span.matrixdrawerrowbin:hover > .item_title,
.matrixdrawer .matrixdrawerrow span.matrixdrawerrowbin.filled:hover > .item_title {
    display: block;
    font-size: 50%;
}

.drawer div div:nth-last-child(8):hover div, .drawer div div:nth-last-child(8) ~ div > div:hover, .drawer div div:nth-last-child(8) ~ div:hover > div,
.drawer div div:nth-last-child(9):hover div, .drawer div div:nth-last-child(9) ~ div > div:hover, .drawer div div:nth-last-child(9) ~ div:hover > div,
.drawer div:nth-last-child(9) div:hover div, .drawer div:nth-last-child(9) ~ div > div:hover > div, .drawer div:nth-last-child(9) ~ div > div > div:hover,
.drawer div:nth-last-child(10) div:hover div, .drawer div:nth-last-child(10) ~ div > div:hover > div, .drawer div:nth-last-child(10) ~ div > div > div:hover,
.drawer div:nth-last-child(11) div:hover div, .drawer div:nth-last-child(11) ~ div > div:hover > div, .drawer div:nth-last-child(11) ~ div > div > div:hover,
.cabinet-m .drawer div div:nth-last-child(-n+9):hover div, .cabinet-m .drawer div div:nth-last-child(-n+9) ~ div:hover > div, .cabinet-m .drawer div:nth-last-child(-n+9) ~ div > div > div:hover,
.cabinet-m .drawer div:nth-last-child(-n+9) div:hover div, .cabinet-m .drawer div:nth-last-child(-n+9) ~ div > div:hover > div, .cabinet-m .drawer div:nth-last-child(-n+9) ~ div > div > div:hover,
.cabinet .drawer_wrap_open .drawer_window .drawer div:nth-last-child(-n+9) .id_focus:nth-child(n) div, .cabinet .drawer_wrap_open .drawer_window .drawer div:nth-child(n) .id_focus:nth-last-child(-n+9) div {
    min-height: 132px;
    width: 100px;
    font-size: 18px;
    font-weight: 400;
    margin: -67px -50px 0 0;
    box-shadow: inset 0px 0px 0 5px #0067b180, 0px 0px 0 6px #0062b7;
}

.drawer div div:nth-last-child(n+10):hover div, .drawer div div:nth-last-child(n+10) ~ div > div:hover, .drawer div div:nth-last-child(n+10) ~ div:hover > div,
.drawer div:nth-last-child(n+14) div:hover div, .drawer div:nth-last-child(n+14) ~ div > div:hover > div, .drawer div:nth-last-child(n+14) ~ div > div > div:hover,
.cabinet-m .drawer_wrap_open .drawer div div:nth-last-child(n+10):hover div, .cabinet-m .drawer_wrap_open .drawer div div:nth-last-child(n+10) ~ div:hover > div, .cabinet-m .drawer_wrap_open .drawer div:nth-last-child(n+10) ~ div > div > div:hover,
.cabinet-m .drawer_wrap_open .drawer div:nth-last-child(n+10) div:hover div, .cabinet-m .drawer_wrap_open .drawer div:nth-last-child(n+10) ~ div > div:hover > div, .cabinet-m .drawer_wrap_open .drawer div:nth-last-child(n+10) ~ div > div > div:hover {
    min-height: 80px;
    width: 47px;
    margin: -41px -24px 0 0;
    font-size: 14px;
    font-weight: 400;
    box-shadow: inset 0px 0px 0 4px #0067b180, 0px 0px 0 6px #0062b7;
}


.cabinet-max .drawer div:first-child div:nth-child(n) ~ div > div, .cabinet-max .drawer div:first-child div:first-child > div {
    right: unset;
    left: 0;
}

.cabinet-max .cabinet .drawer_wrap_open .drawer div div {
    flex: 1;
}


.cabinet-max .drawer div:nth-child(n) div:first-child > div {
    top: unset;
    bottom: 0;
}

.cabinet-max .drawer_wrap_open .drawer div:nth-child(n) div:last-child > div, .cabinet-max .drawer_wrap_open .drawer div:nth-child(n) div:nth-last-child(2) > div {
    top: 0;
    margin-top: 0;
}

.cabinet-max .cabinet .drawer_wrap_open .drawer div:nth-child(n) div:first-child:nth-last-child(1) > div:nth-child(n) {
    top: 50%;
    margin-top: -67px;
}

.cabinet-s .drawer div div div:hover, .cabinet-s .drawer div div:hover div {
    display: none;
}

.cabinet-s .drawer div, .cabinet-s .drawer_add div {
    border-width: 0;
}

    .cabinet-s .drawer div div {
        border-width: 2px;
    }

    .cabinet-s .drawer_add div div {
        border-width: 1px;
    }


    .cabinet-s .drawer, .cabinet-s .drawer div:hover {
        font-size: 12px;
    }

.cabinet-s .drawer_add .add, .cabinet-s .drawer_add .drawer_close {
    padding: 0.5em 0;
}

.cabinet-s .drawer_add .add, .cabinet-s .drawer_add .drawer_close {
    padding: 0.125em 0 0.25em 0;
}

.cabinet-vendstock .add:hover {
    color: gray;
    background-color: lightgray;
    cursor: default;
}

.cabinet-vendstock .drawer div div, .cabinet-vendstock .drawer div div:hover {
    font-size: 0;
}

    .cabinet-vendstock .drawer div div > item_detail {
        font-size: 0;
    }

.cabinet-s img {
    display: none;
}


.cabinet:focus, .cabinet tr:focus, .cabinet td:focus, .cabinet div:focus {
    outline: none;
}

.cabinet-vendstock .drawer_wrap_open {
    display: flex;
    flex-direction: column-reverse;
    border: none;
}

.cabinet-vendstock .drawer_add, .cabinet-vendstock .drawer {
    border: none;
}

.cabinet-vendstock .drawer_add {
    padding: 0px 1px;
}

.cabinet-vendstock .drawer_label {
    display: none;
}

.cabinet-vendstock .drawer div div div:hover, .cabinet-vendstock .drawer div div:hover div {
    width: auto;
    height: auto;
    margin: 0;
    font-size: 12px;
    position: unset;
    border: none;
}

.cabinet-vendstock .drawer div div .item_detail:hover, .cabinet-vendstock .drawer div div:hover .item_detail {
    display: none;
}

.cabinet-vendstock .drawer div div:hover {
    overflow: hidden;
}

.cabinet-vendstock .drawer div:last-child, .cabinet-vendstock .drawer_add div:last-child {
    flex: unset;
}

.cabinet-vendstock .drawer_add .add {
    border: 2px solid gray;
}

.cabinet-vendstock img {
    display: none;
}

.no-drawer .drawer_wrap_open {
    display: none;
}

.no-cabinet {
    visibility: hidden;
    margin: 0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
    width: 625px;
    height: 735px;
}

.cabinet .drawer, .cabinet .drawer_add, .cabinet .drawer_label {
    visibility: visible;
}

.no-cabinet .drawer_wrap_open {
    left: 10px;
    top: 5px;
}

.no-cabinet.cabinet-vendstock.cabinet-s {
    width: 205px;
    height: 240px;
}

.no-cabinet.cabinet-s {
    width: 205px;
    height: 215px;
    margin-top: -30px;
}

    .no-cabinet.cabinet-s .drawer_wrap_open {
        top: 30px;
    }

.cabinet-s .drawer_label, .cabinet-s .drawer_label:hover {
    padding: .25em;
}

.no-cabinet.cabinet-vendstock.cabinet-m {
    width: 405px;
    height: 450px;
}

.no-cabinet.cabinet-m {
    width: 405px;
    height: 515px;
}

.no-cabinet.cabinet-vendstock {
    width: 625px;
    height: 666px;
}

.cabinet-max .drawer_window {
    overflow-x: auto;
    overflow-y: scroll;
}


.cabinet-max.cabinet-m .drawer {
    height: 385px;
    padding: 61px;
    margin: -60px;
}

.cabinet-max.cabinet-s .drawer {
    height: 220px;
}

.cabinet-mobile .cabinet {
    width: auto;
    max-width: 100%;
    border-spacing: 5px;
    min-height: 50px;
    overflow-y: auto;
    display: block;
}

.cabinet-mobile tr {
    display: inline-block;
}

.cabinet-mobile td {
    padding-bottom: 0;
    min-width: 50px;
}

.cabinet-mobile.cabinet_side {
    background: linear-gradient(to right, #0067b1 0%,#ffffff 5%,#ffffff 24%);
}

.cabinet-mobile .drawer_wrap_open {
    top: 70px;
    left: 10px;
}

/** Cabinet GUI Switch **/

.cabinet_gui_show.cabinet_switch_inline {
    display: inline-block;
}
/*
@media (max-width:1152px) {
	.cabinet_gui_show.cabinet_switch_inline {
		display: none;
	}

	.cabinet_gui_show {
		display: none;
	}
}
*/

/* Location Detail */
.drawer div .currentLocation {
    background-color: #0067b1;
    color: white;
}

.removeItem {
    opacity: .8;
}

/******End GUI Cabinet **********/


.btn.btn-primary {
    background-color: #0067b1;
    border-color: #0067b1;
}

.btn.btn-danger {
    background-color: #e1251b;
    border-color: #e1251b;
}

.readonlyStyle {
    background-color: #eee;
}

/* === Backdrop & Panel ===================================================== */
.helpbot-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0,0,0,0.25);
    z-index: 9998;
}

    .helpbot-backdrop.helpbot-open {
        display: block;
    }

.helpbot-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 50vw; /* about half screen on desktop */
    max-width: 640px;
    min-width: 360px;
    /* slide-in baseline */
    transform: translateY(120%);
    transition: transform .18s ease;
    z-index: 9999;
    /* look & feel */
    background: #fff; 
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    /* layout: fixed working height, flex column */
    display: flex;
    flex-direction: column;
    height: 70vh; /* guarantees usable height */
    max-height: 80vh; /* ceiling */
    overflow: visible;
}

    .helpbot-panel.helpbot-open {
        transform: translateY(0);
    }

@media (max-width: 767px) {
    .helpbot-panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Header fixed; body fills remainder */
.helpbot-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}

    .helpbot-header .avatar-small {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: -4px;
    }

.helpbot-body {
    flex: 1 1 auto;
    position: relative; /* container for absolute fill below */
    padding: 0;
    min-height: 0; /* allow inner flex children to shrink for scroll */
}

/* === Chat Layout (fills body) ============================================ */
.helpbot-chat-layout {
    position: relative; /* so Chippy can be absolutely anchored inside */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /*background: #fff;*/
}

/* Floating Chippy at bottom-left (independent of scroll) */
.chippy-pop {
    position: absolute;
    left: -140px; /* NEW: put Chippy outside the box (tweak width below) */
    bottom: 8px;
    width: 120px; /* adjust 100–160px to taste */
    pointer-events: none;
    z-index: 10000;
    background: transparent; /* explicitly transparent (png already is) */
}

.chippy-pop-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.chippy-pop-bubble {
    position: absolute;
    left: 100%; /* to the right of image */
    bottom: 247px; /* raise near mouth */
    min-width: 180px; /* NEW: prevents bubble from collapsing too skinny */
    max-width: 260px;
    margin-left: 10px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
    font-size: 13px;
    color: #333;
    line-height: 1.35;
    pointer-events: none;
    word-wrap: break-word; /* ensure long words wrap instead of stretching */
    white-space: normal; /* allow wrapping */
}


    .chippy-pop-bubble:after {
        content: "";
        position: absolute;
        left: -8px;
        bottom: 12px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
    }

    .chippy-pop-bubble:before {
        content: "";
        position: absolute;
        left: -9px;
        bottom: 12px;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-right: 9px solid #e6e6e6;
    }

.chat-column {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%; /* fill the available width of helpbot-panel */
    min-height: 0; /* allows flex children like .chat-thread to shrink properly */
    padding: 0 12px; /* optional: keeps bubbles off the panel edges */
    box-sizing: border-box;
}

/* Scrolling thread area */
.chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    background: #fafafa;
}

/* Composer stays docked at bottom */
.composer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #eee;
    padding: 8px 12px;
    background: #fff;
}

    .composer .form-control {
        flex: 1 1 auto;
    }

/* === Messages & Bubbles =================================================== */
.msg {
    display: flex;
    margin: 8px 0;
}

.msg-user {
    justify-content: flex-end;
}

.msg-assistant {
    align-items: flex-start;
}

/* ===== Bubble ===== */
.bubble {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 14px;
    white-space: normal; /* don't preserve template newlines */
    overflow-wrap: break-word; /* was: word-wrap */
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

    /* Only the message text preserves line breaks */
    .bubble .msg-text {
        display: block;
        white-space: pre-line; /* use pre-wrap if you truly need it */
    }

/* Assistant bubbles explicitly normal (belts & suspenders) */
.msg-assistant .bubble {
    white-space: normal;
}

/* Optional color for user bubbles (keep if you use it) */
.msg-user .bubble {
    background: #337ab7;
    color: #fff;
}

/* ===== Citations (chips) ===== */
.citations {
    margin-top: 10px; /* space from answer text to chips */
    margin-bottom: 0;
    font-size: 12px;
}

    /* Tighten chips → feedback spacing */
    .citations + .feedback {
        margin-top: 2px;
    }

/* Chip layout */
.helpbot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .helpbot-chips .chip {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 16px;
        background: #f1f3f4;
        color: #333;
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
        max-width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .helpbot-chips .chip:hover {
            background: #e0e0e0;
        }

/* ===== Feedback ===== */
.feedback {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}


    .feedback button {
        padding: 2px 6px;
        font-size: 12px;
        line-height: 1;
        border-radius: 4px;
        background: #f7f7f7;
        border: 1px solid #ddd;
        cursor: pointer;
    }

        .feedback button:hover:not(:disabled) {
            background: #eee;
        }

        .feedback button:disabled {
            opacity: 0.5;
            cursor: default;
        }

    .feedback span {
        font-size: 12px;
        color: #28a745; /* green "Thanks!" */
    }



/* === Mobile adjustments =================================================== */
@media (max-width: 767px) {
    .chippy-pop {
        display: none;
    }
    .chat-column {
        width: 100%;
    }
    .chat-column.with-chippy {
        padding-left: 0;
    }
}


/* Dark Mode, always place last in CSS file*/
@media (prefers-color-scheme: dark) {
    html {
        background-color: #202124;
    }

    body {
        color: #b0b0b0;
        background-color: #202124;
    }

    .my_md_styles .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #2f3136;
    }

    .my_md_styles .table-striped > tbody > tr:nth-of-type(even) {
        background-color: #202124;
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #2f3136;
    }

    .table-striped > tbody > tr:nth-of-type(even) {
        background-color: #202124;
    }

    .table .table {
        background-color: #202124;
    }

    .modal-content {
        background-color: #202124;
    }

    .nav-side-menu {
        background-color: #202124;
    }

        .nav-side-menu .brand {
            background-color: #202124;
        }

        .nav-side-menu li {
            background-color: #202124;
        }

    .nav-side-menu-item-active {
        background-color: #2F3136;
    }

    .nav-side-menu li:hover {
        background-color: #2F3136;
    }

    .nav-side-menu li:focus {
        background-color: #2F3136;
    }

    .add-element-icon {
        text-shadow: none;
    }

    /* bootstrap v3.3.7 dark mode css */

    .modal-content {
        background-color: #303030 !important;
        border: 1px solid #444 !important;
    }

    .modal-header {
        border-bottom: 1px solid #444 !important;
    }

    .modal-footer {
        border-top: 1px solid #444 !important;
    }

    .panel {
        background-color: #303030;
    }

    .panel-body {
        background-color: #303030 !important;
    }

    .panel-heading {
        border-bottom: 1px solid transparent;
    }

        .panel-heading > .dropdown .dropdown-toggle {
            color: inherit;
        }

    .panel-title {
        color: inherit;
    }

    .panel-footer {
        background-color: #464545;
        border-top: 1px solid #464545;
    }

    .panel-default {
        border-color: #464545;
    }

        .panel-default > .panel-heading {
            color: #d5d5d5;
            background-color: #303030;
            border-color: #464545;
        }

            .panel-default > .panel-heading + .panel-collapse > .panel-body {
                border-top-color: #464545;
            }

            .panel-default > .panel-heading .badge {
                color: #d5d5d5;
                background-color: #474a52;
            }

        .panel-default > .panel-footer + .panel-collapse > .panel-body {
            border-bottom-color: #464545;
        }

    .well {
        background-color: #303030;
        border: 1px solid transparent;
    }

        .well blockquote {
            border-color: #ddd;
            border-color: rgba(0, 0, 0, 0.15);
        }

    caption {
        color: #999999;
    }

    .btn:hover,
    .btn:focus,
    .btn.focus {
        color: #d5d5d5;
        text-decoration: none;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        cursor: not-allowed;
        filter: alpha(opacity=65);
        opacity: 0.65;
        box-shadow: none;
    }

    a.btn.disabled,
    fieldset[disabled] a.btn {
        pointer-events: none;
    }

    .btn-default {
        color: #d5d5d5;
        background-color: #464545;
        border-color: #464545;
    }

        .btn-default:focus,
        .btn-default.focus {
            color: #d5d5d5;
            background-color: #2c2c2c;
            border-color: #060606;
        }

        .btn-default:hover {
            color: #d5d5d5;
            background-color: #2c2c2c;
            border-color: #272727;
        }

        .btn-default:active,
        .btn-default.active,
        .open > .dropdown-toggle.btn-default {
            color: #d5d5d5;
            background-color: #2c2c2c;
            background-image: none;
            border-color: #272727;
        }

            .btn-default:active:hover,
            .btn-default.active:hover,
            .open > .dropdown-toggle.btn-default:hover,
            .btn-default:active:focus,
            .btn-default.active:focus,
            .open > .dropdown-toggle.btn-default:focus,
            .btn-default:active.focus,
            .btn-default.active.focus,
            .open > .dropdown-toggle.btn-default.focus {
                color: #d5d5d5;
                background-color: #1a1a1a;
                border-color: #060606;
            }

        .btn-default.disabled:hover,
        .btn-default[disabled]:hover,
        fieldset[disabled] .btn-default:hover,
        .btn-default.disabled:focus,
        .btn-default[disabled]:focus,
        fieldset[disabled] .btn-default:focus,
        .btn-default.disabled.focus,
        .btn-default[disabled].focus,
        fieldset[disabled] .btn-default.focus {
            background-color: #464545;
            border-color: #464545;
        }

        .btn-default .badge {
            color: #464545;
            background-color: #ffffff;
        }

    .btn-primary {
        color: #ffffff;
        background-color: #375a7f;
        border-color: #375a7f;
    }

        .btn-primary:focus,
        .btn-primary.focus {
            color: #ffffff;
            background-color: #28415b;
            border-color: #101b26;
        }

        .btn-primary:hover {
            color: #ffffff;
            background-color: #28415b;
            border-color: #253c54;
        }

        .btn-primary:active,
        .btn-primary.active,
        .open > .dropdown-toggle.btn-primary {
            color: #ffffff;
            background-color: #28415b;
            background-image: none;
            border-color: #253c54;
        }

            .btn-primary:active:hover,
            .btn-primary.active:hover,
            .open > .dropdown-toggle.btn-primary:hover,
            .btn-primary:active:focus,
            .btn-primary.active:focus,
            .open > .dropdown-toggle.btn-primary:focus,
            .btn-primary:active.focus,
            .btn-primary.active.focus,
            .open > .dropdown-toggle.btn-primary.focus {
                color: #ffffff;
                background-color: #1d2f43;
                border-color: #101b26;
            }

        .btn-primary.disabled:hover,
        .btn-primary[disabled]:hover,
        fieldset[disabled] .btn-primary:hover,
        .btn-primary.disabled:focus,
        .btn-primary[disabled]:focus,
        fieldset[disabled] .btn-primary:focus,
        .btn-primary.disabled.focus,
        .btn-primary[disabled].focus,
        fieldset[disabled] .btn-primary.focus {
            background-color: #375a7f;
            border-color: #375a7f;
        }

        .btn-primary .badge {
            color: #375a7f;
            background-color: #ffffff;
        }

    .btn-success {
        color: #ffffff;
        background-color: #00bc8c;
        border-color: #00bc8c;
    }

        .btn-success:focus,
        .btn-success.focus {
            color: #ffffff;
            background-color: #008966;
            border-color: #003d2d;
        }

        .btn-success:hover {
            color: #ffffff;
            background-color: #008966;
            border-color: #007f5e;
        }

        .btn-success:active,
        .btn-success.active,
        .open > .dropdown-toggle.btn-success {
            color: #ffffff;
            background-color: #008966;
            background-image: none;
            border-color: #007f5e;
        }

            .btn-success:active:hover,
            .btn-success.active:hover,
            .open > .dropdown-toggle.btn-success:hover,
            .btn-success:active:focus,
            .btn-success.active:focus,
            .open > .dropdown-toggle.btn-success:focus,
            .btn-success:active.focus,
            .btn-success.active.focus,
            .open > .dropdown-toggle.btn-success.focus {
                color: #ffffff;
                background-color: #00654b;
                border-color: #003d2d;
            }

        .btn-success.disabled:hover,
        .btn-success[disabled]:hover,
        fieldset[disabled] .btn-success:hover,
        .btn-success.disabled:focus,
        .btn-success[disabled]:focus,
        fieldset[disabled] .btn-success:focus,
        .btn-success.disabled.focus,
        .btn-success[disabled].focus,
        fieldset[disabled] .btn-success.focus {
            background-color: #00bc8c;
            border-color: #00bc8c;
        }

        .btn-success .badge {
            color: #00bc8c;
            background-color: #ffffff;
        }

    .btn-info {
        color: #ffffff;
        background-color: #3498db;
        border-color: #3498db;
    }

        .btn-info:focus,
        .btn-info.focus {
            color: #ffffff;
            background-color: #217dbb;
            border-color: #16527a;
        }

        .btn-info:hover {
            color: #ffffff;
            background-color: #217dbb;
            border-color: #2077b2;
        }

        .btn-info:active,
        .btn-info.active,
        .open > .dropdown-toggle.btn-info {
            color: #ffffff;
            background-color: #217dbb;
            background-image: none;
            border-color: #2077b2;
        }

            .btn-info:active:hover,
            .btn-info.active:hover,
            .open > .dropdown-toggle.btn-info:hover,
            .btn-info:active:focus,
            .btn-info.active:focus,
            .open > .dropdown-toggle.btn-info:focus,
            .btn-info:active.focus,
            .btn-info.active.focus,
            .open > .dropdown-toggle.btn-info.focus {
                color: #ffffff;
                background-color: #1c699d;
                border-color: #16527a;
            }

        .btn-info.disabled:hover,
        .btn-info[disabled]:hover,
        fieldset[disabled] .btn-info:hover,
        .btn-info.disabled:focus,
        .btn-info[disabled]:focus,
        fieldset[disabled] .btn-info:focus,
        .btn-info.disabled.focus,
        .btn-info[disabled].focus,
        fieldset[disabled] .btn-info.focus {
            background-color: #3498db;
            border-color: #3498db;
        }

        .btn-info .badge {
            color: #3498db;
            background-color: #ffffff;
        }

    .btn-warning {
        color: #ffffff;
        background-color: #f39c12;
        border-color: #f39c12;
    }

        .btn-warning:focus,
        .btn-warning.focus {
            color: #ffffff;
            background-color: #c87f0a;
            border-color: #7f5006;
        }

        .btn-warning:hover {
            color: #ffffff;
            background-color: #c87f0a;
            border-color: #be780a;
        }

        .btn-warning:active,
        .btn-warning.active,
        .open > .dropdown-toggle.btn-warning {
            color: #ffffff;
            background-color: #c87f0a;
            background-image: none;
            border-color: #be780a;
        }

            .btn-warning:active:hover,
            .btn-warning.active:hover,
            .open > .dropdown-toggle.btn-warning:hover,
            .btn-warning:active:focus,
            .btn-warning.active:focus,
            .open > .dropdown-toggle.btn-warning:focus,
            .btn-warning:active.focus,
            .btn-warning.active.focus,
            .open > .dropdown-toggle.btn-warning.focus {
                color: #ffffff;
                background-color: #a66908;
                border-color: #7f5006;
            }

        .btn-warning.disabled:hover,
        .btn-warning[disabled]:hover,
        fieldset[disabled] .btn-warning:hover,
        .btn-warning.disabled:focus,
        .btn-warning[disabled]:focus,
        fieldset[disabled] .btn-warning:focus,
        .btn-warning.disabled.focus,
        .btn-warning[disabled].focus,
        fieldset[disabled] .btn-warning.focus {
            background-color: #f39c12;
            border-color: #f39c12;
        }

        .btn-warning .badge {
            color: #f39c12;
            background-color: #ffffff;
        }

    .btn-danger {
        color: #ffffff;
        background-color: #e74c3c;
        border-color: #e74c3c;
    }

        .btn-danger:focus,
        .btn-danger.focus {
            color: #ffffff;
            background-color: #d62c1a;
            border-color: #921e12;
        }

        .btn-danger:hover {
            color: #ffffff;
            background-color: #d62c1a;
            border-color: #cd2a19;
        }

        .btn-danger:active,
        .btn-danger.active,
        .open > .dropdown-toggle.btn-danger {
            color: #ffffff;
            background-color: #d62c1a;
            background-image: none;
            border-color: #cd2a19;
        }

            .btn-danger:active:hover,
            .btn-danger.active:hover,
            .open > .dropdown-toggle.btn-danger:hover,
            .btn-danger:active:focus,
            .btn-danger.active:focus,
            .open > .dropdown-toggle.btn-danger:focus,
            .btn-danger:active.focus,
            .btn-danger.active.focus,
            .open > .dropdown-toggle.btn-danger.focus {
                color: #ffffff;
                background-color: #b62516;
                border-color: #921e12;
            }

        .btn-danger.disabled:hover,
        .btn-danger[disabled]:hover,
        fieldset[disabled] .btn-danger:hover,
        .btn-danger.disabled:focus,
        .btn-danger[disabled]:focus,
        fieldset[disabled] .btn-danger:focus,
        .btn-danger.disabled.focus,
        .btn-danger[disabled].focus,
        fieldset[disabled] .btn-danger.focus {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }

        .btn-danger .badge {
            color: #e74c3c;
            background-color: #ffffff;
        }

    .btn-link {
        font-weight: 400;
    }

        .btn-link,
        .btn-link:active,
        .btn-link.active,
        .btn-link[disabled],
        fieldset[disabled] .btn-link {
            background-color: transparent;
            box-shadow: none;
        }

            .btn-link,
            .btn-link:hover,
            .btn-link:focus,
            .btn-link:active {
                border-color: transparent;
            }

                .btn-link:hover,
                .btn-link:focus {
                    text-decoration: underline;
                    background-color: transparent;
                }

                .btn-link[disabled]:hover,
                fieldset[disabled] .btn-link:hover,
                .btn-link[disabled]:focus,
                fieldset[disabled] .btn-link:focus {
                    color: #999999;
                    text-decoration: none;
                }

    /* custom dark mode css */

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus,
    .nav-tabs > li.active > a:hover {
        color: #fff;
        background-color: #2F3136;
    }

    .input-group-label-min-width {
        border: 1px solid #5a5a5a !important;
    }

    .form-control {
        color: #d5d5d5;
        background-color: #2F3136;
        background-image: none;
        border: 1px solid #5a5a5a;
        border-radius: 4px;
    }

        .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
            background-color: #2F3136;
            opacity: 1;
        }

    #dashboard .panel > .panel-footer, #report .panel > .panel-footer {
        background-color: #a6a6a6;
        border-top: 1px solid #464545;
    }

    #dashboard .panel .pull-left, #report .panel .pull-left {
        font-weight: bold;
    }

    .item-modal-exit-element-wrapper a {
        color: #d5d5d5;
        opacity: .4;
        text-shadow: none;
    }

    .nav > li > a:focus, .nav > li > a:hover {
        text-decoration: none;
        background-color: #b3b3b3;
    }

    .input-group > input[type="checkbox"] .form-control {
        border: 1px solid #5a5a5a !important;
    }

    .list-group .list-group-item {
        background-color: #2F3136;
    }

    .input-group-addon {
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: #d5d5d5;
        background-color: #202124 !important;
        border: 1px solid #5a5a5a;
        border-radius: 4px;
    }

    #mytable > tbody {
        background-color: #2F3136 !important;
        border: 1px solid #5a5a5a;
    }

        #mytable > tbody > tr, #mytable > tbody > tr > td {
            background-color: #2F3136 !important;
        }

            #mytable > tbody > tr > td:hover {
                background-color: #202124 !important;
            }

    .wj-control {
        background-color: #2F3136 !important;
        border: 1px solid #5a5a5a !important;
    }

    .wj-listbox-item {
        color: #d5d5d5 !important;
    }

        .wj-listbox-item .wj-state-selected, .wj-listbox-item:hover {
            background-color: #0085c7 !important;
        }

    .wj-content.wj-dropdown, .wj-content.wj-inputnumber, .wj-content.wj-inputmask, .wj-content.wj-calendar-outer, .wj-content.wj-pager {
        color: #d5d5d5 !important;
        background-color: #2f3136 !important;
    }

    .helpbot-panel {
        background: #2f3136;
    }

    .chat-thread {
        background: #202124;
    }

    .composer {
        background: #2f3136;
    }

    .bubble.assistant {
        background: #2f3136;
    }

    .helpbot-chips .chip {
        background: #999;
    }

    .feedback button {
        background: #999;
        border-color: #999
    }
}

@media print {
    .helpbot-chat-layout {
        display: none !important;
    }
}