body { min-width: 0 !important; height: 100% !important; }
#container { min-height: 100%; display: flex; flex-direction: column; width: 100%; overflow: hidden; }
#container:before { content: none !important; }
#content { flex-grow: 1; background: #edeff1; margin: 0 0 0 220px !important; display: flex; flex-direction: column; }
#header-logo::before { content: ''; position: absolute; left: 220px; width: calc(100% - 220px); transition: left .3s ease-in-out; background: var(--color-brand-accessible); border: 0; z-index: 1; height: 60px; }
#mobile-menu { display: block; position: absolute; top: 14px; left: 1rem; z-index: 2; color: #fff; width: 32px; height: 32px; transition: all 0s ease-in-out 0s; opacity: 0; visibility: hidden; }
#theme { position: absolute; top: 14px; right: 7rem; z-index: 2; color: #fff; width: 32px; height: 32px; transition: all .3s ease-in-out 0s; }
#main, .open-nav #main { transition: margin .3s ease-in-out; margin-left: 0 !important; flex-grow: 1; }
#footer { transition: margin .3s ease-in-out; }
body::before { position: fixed; background: rgba(0,0,0,.5); top: 60px; left: 220px; right: 0; bottom: 0; content: ''; z-index: 2; transition: all 0s ease-in-out 0s; opacity: 0; visibility: hidden; }
.table-box { overflow: auto; border-radius: 3px; }
.open-nav { overflow: hidden; }
.open-nav #footer { margin-left: 0 !important; }
.open-nav #header-logo::before { left: 220px; }
#nav { bottom: 0 !important; top: 0 !important; padding-top: 90px !important; background: #0f1e2c !important; box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.2) !important; }
table tr.odd td { background: #f7f9fa !important; }
div.filter .body { width: 340px !important; display: none; }
div.filter .body.show { display: block; }

/* Dark mode */
.dark { color: #fff; }
.dark ::-webkit-input-placeholder { color: #4D4D4D !important; }
.dark #nav, .dark #logo { background: #121212 !important; }
.dark #nav strong a:link, .dark #nav strong a:active, .dark #nav strong a:visited { background: rgba(255, 255, 255, .05); }
.dark #main { background: #202020; }
.dark .widget, .dark h1, .dark #footer { background: #2C2C2C !important; border-top: 0 !important; color: #fff; box-shadow: none; }
.dark #footer, .dark .fields div.label, .dark table.form .label, .dark .fields label, .dark table.form tr.section th.desc { color: #BFBFBF !important; }
.dark h2, .dark h4, .dark .btn.secondary, .dark .positive, .dark .pagination a, .dark .table-footer a, .dark #file-format-details, .dark #dropzone-table { color: #BFBFBF !important; }
.dark #enviro .btn, .dark .errorMessage, .dark .warnMessage, .dark .infoMessage { background: #393939 !important; border-top: 0 !important; color: #fff; }
.dark input:not([type=submit]):not([type=radio]):not([type=checkbox]), .dark select { background-color: #393939 !important; border: 1px solid #4D4D4D !important; color: #fff !important; }
.dark .val { color: #fff; }
.dark #enviroTable li { border-bottom: 1px solid #393939; color: #BFBFBF; }
.dark .smallText, .dark .help-block, .dark table.web-print-jobs #status .info { color: #BFBFBF !important; }
.dark .table-box .table-footer{ border: 0 !important; }
.dark table.results tr { box-shadow: none; background: none; }
.dark table.results tr td { background: #2C2C2C !important; border-bottom: 1px solid #393939 !important; color: #BFBFBF; }
.dark .table-box .results td:not(.spinnerColumnValue)::before { color: #fff; }
.dark table.results tr td td { bacground: none !important; border: 0 !important; }
.dark table.form td.fields, .dark table.form tr.section th.desc { border-bottom: 1px solid #393939 !important; }
.dark .wizard div.buttons { border-top: 1px solid #393939 !important; }
.dark .wizard-steps:before { background: #393939; }
.dark .wizard-steps ul li:before, .dark .wizard-steps ul li.complete:before { background-color: #393939; border: 0; }
.dark table.results th, .dark table.results th td { background-color: #393939 !important; }
.dark .wizard-steps ul li.complete { color: #BFBFBF !important; }
.dark div.filter { color: #fff; }
.dark input.secondary, .dark .btn.secondary, button.secondary, .dark .code-editor .buttons a.secondary, .dark .code-editor .buttons a.help, .dark .link-print-queues-modal .btn-cancel { background: #393939 !important; border: 0 !important; color: #fff !important; }
.dark div.filter .body, .dark div.filter .body .header, .dark div.filter .body:before, .dark .filtered { background: #393939 !important; border: 0 !important; }
.dark .dropzone-div { background: none; border: 2px dashed #393939; }

@media screen and (max-width: 48em) {
  .open-nav::before { opacity: 1; visibility: visible; transition: all .15s ease-in-out .3s; }
  .wizard-steps { top: -64px !important; right: -1rem; }
  #header-logo::before { left: 0; width: 100%; }
  #mobile-menu { opacity: 1; visibility: visible; transition: all .3s ease-in-out 0s, opacity .15s ease-in-out .3s; }
  .open-nav #mobile-menu { left: 240px; }
  .open-nav #theme { right: calc(7rem - 220px); }
  h1 { padding: 1rem !important; margin: 0 -1rem 1rem !important; }
  #info .info-content .user { right: 1rem !important; transition: all .3s ease-in-out; }
  .open-nav #info .info-content .user { right: calc(1rem - 220px) !important; }
  #footer { padding: 1rem !important; }
  #content { margin: 0 0 0 0 !important; }
  #main { margin-left: -220px !important; left: 220px; width: 100%; padding: 0 1rem 1rem 1rem !important; }
  #footer { margin-left: -220px !important; left: 220px; width: 100%; }
  .errorMessage, .warnMessage, .infoMessage { margin: 0 -1rem !important; }
  .flex.row > * { width: 100% !important; margin: 0 1rem 1rem !important; }
  .col { padding: 0 1rem 1rem !important; }
  .table-box { overflow: initial; }
  .table-box .results { box-shadow: none !important; }
  .table-box .results th { display: none; }
  .table-box .results tr { margin-bottom: 1rem; display: block; box-shadow: 0 1px 1px rgba(146, 160, 160, 0.2); border-radius: 4px; }
  .table-box .results td { display: flex; text-align: left; width: 100% !important; background: #fff !important; }
  .table-box .results.web-print-jobs td:not(.spinnerColumnValue), #printer-list .table-box .results td { border-bottom: 1px solid #F6F7F8 !important; }
  .table-box .results td.statusColumnValue td { display: initial; }
  .table-box .results td.statusColumnValue tr { box-shadow: none; }
  .table-box .results td.attributesColumnValue div { font-size: 1rem !important; height: auto !important; }
  .table-box .results td.attributesColumnValue > div:after { content: ''; }
  .table-box .results td:first-child { border-radius: 4px 4px 0 0 !important; }
  .table-box .results:not(.web-print-jobs) td:last-child { border-bottom: 0 !important; border-radius: 0 0 4px 4px; }
  .table-box .results td .responsive-label { display: block; width: 140px; flex-shrink: 0; font-weight: bold; }
  #printer-list .table-box .results td.displayNameColumnValue .responsive-label { content: none; }
  .table-box .table-footer { border-top: 0 !important; }
  .table-box td .smallText { font-size: 1rem !important; }
  .table-box .right { text-align: left; }
  .table-box .results .usageDateColumnValue { color: inherit !important; }
  .popupBG { max-width: 300px; overflow: auto; }
  div.buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .wizard div.buttons input[type="submit"] { margin: 10px 0 0 10px !important; }
  .wizard div.buttons input[type="submit"].right { order: 2; }
  .section, .footer { display: block; width: 100%; }
  .footer td { display: block; }
  table.form, table.form tbody { display: block; width: 100% !important; }
  #main table.form tr.section th.desc, table.form td.fields { display: block; width: 100%  !important; border-bottom: 0 !important; }
  table.form td.fields { display: block; width: 100%; }
  .dark table.form td.fields, .dark table.form tr.section th.desc, .dark .table-box .results.web-print-jobs td:not(.spinnerColumnValue), .dark #printer-list .table-box .results td { border-bottom: 1px solid #4D4D4D !important;  }
}