html { min-height: 100%; }
body { color: #666666; padding: 0 15px 0 0px; }
div.margin { margin-top: 5%; }
div.content_login {  padding: 1%; background: #f1f1f1; border-radius: 2% }
a { color: inherit; text-decoration: none; }
br.cleaner { clear: both; line-height: 0}

th.actions { width: 150px; text-align: center;}

span.passchanger { margin-top: 10px; display: block;}
span.gauthentiactor { text-align: center;}

div#sidebar { background: #f5f5f5; padding-right: 0; min-height: 100% }
div#sidebar div.logo {  margin: 20px 0; text-align: center; font-size: 24px; text-shadow: 2px 2px 3px #fff; font-weight: bold;}

div#sidebar div.buttons { border-top: solid 1px #ebebeb;  }
div#sidebar div.buttons a { border-top: solid 1px white; border-bottom: solid 1px #ebebeb;  height: 40px; padding-left: 20px;  font-size: 14px; line-height: 40px; display: block; border-left: solid 4px #f7f7f7; text-decoration: none; position: relative;  }


div#sidebar div.buttons a span.glyphicon { position: absolute; right: 10px; top: 12px; }

div#sidebar div.buttons a.active { background: white; border-left: solid 4px #ea533f; border-right: solid 1px white !important; color: black;  }

div#sidebar div.buttons a:hover { border-left: solid 4px #ea533f; background: white; color: black;  }

div#sidebar div.buttons a span.icon { position: absolute; right: 10px; }


div#sidebar ul { list-style: none; margin: 0; padding: 0; }


.smallnote { font-size: 9px !important; font-style: italic; font-weight: normal !important;}


div.controls { border-bottom: solid 1px #ebebeb; padding: 1% ;}

div#main div.content { margin: 10px; padding-bottom: 50px; }


tr.draggable td, tr.draggable th { cursor: ns-resize; }
tr.dragging td, tr.dragging th, tr.dragging:hover td, tr.dragging:hover th { background: #feffa8; cursor: ns-resize}
th.top, td.top { vertical-align: top}
th.mid, td.mid { vertical-align: middle}

div.group span.h4 { display: inline-block; width: 200px !important;}


select#phonenav { margin-bottom: 20px; }

.none { display: none !important; }



.importer { max-height: 300px; overflow: auto}


div.autocomplete_results { position: absolute; max-height: 300px; border: solid 1px lightgray; overflow: auto; background: white; font-size: 1em; border-radius: 3px; z-index: 9999 }
div.autocomplete_results tr { cursor: pointer; }
div.autocomplete_results strong { color: red !important; }
div.autocomplete_results table { margin-bottom: 0;}
.red { color: red}

.lang_divider { background: yellow; opacity: 0.2; line-height: 8px !important; overflow: hidden; padding: 2px !important;}
th { text-wrap: no-wrap;}
.tooltip-inner {
    max-width: 350px;
    white-space:pre-wrap;
    /* If max-width does not work, try using width instead */
}


.modal.modal-wide .modal-dialog {
width: 70%;
min-height: 550px;

    @media (max-width: 768px) {
        width: 95%;
    }
}
.modal-wide .modal-body {
overflow-y: auto;
}

div.toggles { text-align: right; margin-bottom: 0.5em }
a#compact { padding: 0.5em 0; text-align: right;}
* { transition: all 0.4s ease; }
.btn, .jsoneditor, .jsoneditor * { transition: none}
.logo_compact { display: none !important }
@media (min-width: 1000px)
{
    #sidebar.compact_mode { width: 5%;}
    #sidebar.compact_mode div.buttons span { display: none }
    #sidebar.compact_mode div.buttons span.icon { position: relative; font-size: 1.5em; display: inline; }
    #sidebar.compact_mode div.logo, #sidebar.compact_mode div.user { display: none; }
	#sidebar.compact_mode .logo_compact { display: block !important; margin-bottom: 1em; }
    #main.compact_mode { width: 95%;}
}

div.user {
    margin-bottom: 2em;
    ul { padding-left: 2em !important; display: flex; flex-direction: column; }
    ul li:first-child { color: darkred; font-weight: 500;}
    @media (max-width: 1000px) {
        & {
            text-align: center;
            margin-bottom: 0;
        }
        ul { padding-left; none !Important; flex-direction: row; gap: 1em; justify-content: center;}
        ul li:first-child { display: none; }
    }
}

#sidebar.compact_mode a { text-align: center}

.popover-title { tex-align: center; }
.popover-content { font-size: 0.8em;}

table.table-stocks td, table.table-stocks td, table.table-stocks th, table.table-stocks th { border-right: 1px solid grey !important; }

table.table-stocks td.marked-cell { background: red !important; color: white !important; }



.valign { vertical-align: middle !important; }

td.balance { white-space: nowrap; }
td.balance span.balance { font-size: 1.3em; padding: 0.2em; vertical-align: middle}
td.balance div.badges { white-space: nowrap; font-size: 0.8em;  display: inline-block; vertical-align: middle }

.clipboard { cursor: pointer}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: -90%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.table-nonfluid {
   width: auto !important;
}

html.dark {
    filter: invert(87%);
}

html.dark body.login, {
	background: #151515;
}

html.dark button, html.dark .btn, html.dark .label, html.dark .alert, html.dark code, html.dark .json-editor-blackbord {
    filter: invert(100%);
}

html.dark .alert .btn, html.dark .alert .label, html.dark .alert .alert, html.dark i, html.dark span.caret {
	filter: invert(0) !important;
}

html.dark input.alert-warning, html.dark input.alert-danger, html.dark input.alert-warning, html.dark input.alert-info,
html.dark select.alert-warning, html.dark select.alert-danger, html.dark select.alert-warning, html.dark select.alert-info {
	filter: invert(100%);
}




.aftership_status_row {

}

.valign-middle { vertical-align: middle !important}

.aftership_status_cell { vertical-align: middle !important; white-space: nowrap;}
.aftership_status_cell img { width: 20px;}
.aftership_filters { white-space: nowrap}
.aftership_filters img { max-width: 20px; }

.text-nowrap {
    white-space: nowrap !improtant;
}
.table-inactive td, .table-inactive th {
    opacity: 0.7;
    background-color: #ececec;
    color: #b9b9b9;
}

.aftership_row_delayed { border: solid 2px crimson}


/* PICK N PACK STYLES */
.pnp-holder { border: solid 1px black; padding: 30px; margin: 0 30px; 0 }
.pnp-text { color: black; font-size: 16px; }
.pnp-blue { color: #385391 }
.pnp-red { color: #af2418 }
.pnp-green { color: #4a7543 }
.pnp-big2 { font-size: 48px; }
.pnp-client { font-size: 24px; color: black }
.pnp-client span { font-size: 48px; font-weight: bold; text-decoration: underline; }
.nogap { margin: 0 !important; padding: 0 !important; }
.pnp-address { font-size: 22px; font-weight: bold; }
.pnp-address div { padding: 0.3em 0}
.pnp-big1 { font-size: 52px; }
.pnp-sku { font-size: 24px; color: black; }
.pnp-ref { font-size: 24px; }
.strong { font-weight: bold; }
.relative { position: relative; }
.table-fixed-col, .table-fixed-row {
	position: -webkit-sticky;
	position: sticky;
}

ninja-keys {
  --ninja-z-index: 9999999;
  --ninja-modal-shadow:	0px 0px 30px 10px rgb(0 0 0 / 50%);
}

ninja-keys div.modal-footer.small  {
	display: flex;
}
ninja-keys div.modal-footer.small div {
	font-size: 1em;
	margin: auto;
}
ninja-keys div.modal-footer.small div span {
	font-size: 1.3em;
	vertical-align: middle;
}

#command_palette_help ul li {
	margin: 1em 2em;
	list-style-type: disc;
}
#command_palette_help div.modal-body code span {
	font-size: 1.3em;
	vertical-align: middle;
}

.cursor-pointer { cursor: pointer}
.cursor-help { cursor: help }
span.dot { border-radius: 50%; display: inline-block; width: 0.3em; height: 0.3em; vertical-align: middle }
span.dot-big { width: 0.8em; height: 0.8em }
span.dot-red { background-color: red;}

img.sales-form-image-thumb { aspect-ratio: 1/1; object-fit: contain; width: 7em; }
code.code-dd { display: block; background: #f9f9f9; border: solid 1px darkgray; margin: 1em; padding: 1em }


.json-container { position: relative; }
.json-container a.json_collapse { display: none; }
.json-container aside { position: absolute; top: 1em; right: 1em; text-align: right;}
.json-parent-expanded { display: block; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: darkgray; z-index: 9999999}
.json-parent-expanded pre { width: 100vw; max-height: 100vh !important; height: 100vh !important; z-index: 999999999; }
.json-parent-expanded a.json_expand { display: none; }
.json-parent-expanded a.json_collapse { display: block; }