@charset "utf-8";
/* General Styles */
/* latin */
@font-face {
    font-family: 'CarolinaBar-UPC-2-18x101x720';
    src: local('CarolinaBar-UPC-2-18x101x720'),
    url(../font/CarolinaBarUPC_Normal.ttf) format('truetype'),
    url(../font/CarolinaBarUPC_Normal.woff) format('woff');
}

@font-face {
    font-family: 'Conv_code128';
    src: local('☺'), url('../font/code128.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Code39AzaleaFont';
    src: url(../font/Code39Azalea.woff) format('woff'), /* Modern Browsers */ url(../font/Code39Azalea.ttf) format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Free 3 of 9 Regular';
    src: url(../font/FREE3OF9.woff) format('woff'),
    url(../font/FREE3OF9.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --darkest-ruby: #9A2617;
    --alice: #1496BB;
    --darker-alice: #1287A8;
    --darkest-alice: #107896;
    --kelly: #a3b86c;
}

body {
    background: #093145;
    font-size: 11pt;
    color: #373D3F;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.45rem;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #da621e;
    font-weight: 300;
    line-height: 1.0;
}

h1, h2, h3, h4 {
    padding: .3em .4em;
    /*background: linear-gradient(to bottom, #dddddd 0%, #f8f8f8 10%, #f8f8f8 90%, #dddddd 100%);*/
    background: linear-gradient(5deg, #107896 0%, #1496BB 101%);
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
}

h1.ticket-title {
    background: #d5e2e5;
    color: #000;
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, .45);
    z-index: 5;
    position: relative;
}

h1.ticket-title.modal-title {
    background: #fff;
}

h1 {
    font-size: 250%;
}

h2 {
    font-size: 200%;
}

h2 img {
    vertical-align: middle;
    margin-right: 4px;
}

h3 {
    font-size: 175%;
}

h4 {
    font-size: 150%;
}

p {
    padding: .2em 1em;
    line-height: 1.5em;
}

b {
    font-weight: bold;
}

ul {
    padding: .5em 4em;
    list-style: outside;
}

th {
    text-align: left;
    padding: .33em .8em;
    color: #222266;
    text-transform: capitalize;
    font-weight: 400;
    vertical-align: top;
}

td {
    padding: 0 0.125em;
}

a {
    color: #2233aa;
}

a:focus {
    outline: 1px dotted black;
}

a.button {
    border: 1px solid #dddddd;
    color: #dddddd !important;
    border-radius: 3px;
    padding: .1rem .4rem;
    text-decoration: none;
}

a.button:hover, a.button:focus {
    border-color: #ffffff;
    color: #ffffff !important;
}

dl {
    margin: 1.5625em 1.5625em;
}

dt {
    color: #222266;
    margin: 0.3125em 1.5625em;
}

dd {
    padding: 0.3125em 2.1875em;
}

img {
    max-width: 100%;
}

code {
    display: inline-block;
    padding: .2em .5em;
    background: #fff;
    border: 1px solid #bbb;
    font-size: 109%;
    font-family: 'Roboto Mono', monospace;
}

hr {
    clear: both;
    border: 1px solid rgba(0, 0, 0, .06);
    margin: .3em;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.4em;
}

input[type='radio']:after {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    top: -1px;
    left: -1px;
    position: relative;
    background: linear-gradient(to bottom, #dddddd 0%, #f8f8f8 10%, #f8f8f8 90%, #dddddd 100%);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #0D3D56;
    transition: all .2s;
}

input[type='radio']:checked:after {
    background: #43ABC9;
    border: 2px solid #107896;
}

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: calc(100% - 2em);
    margin: .5em 1em;
    height: 2em;
}

progress[value]::-webkit-progress-bar {
    background-color: #c0c0d0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
    background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .05) 33%, rgba(0, 0, 0, .05) 66%, transparent 66%),
    -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(0, 0, 0, .1)),
    -webkit-linear-gradient(left, #478112, #dbf0b8);
    background-size: 3em 2em, 100% 100%, 100% 100%;
    -webkit-animation: animatestripes 5s linear infinite;
    animation: animatestripes 5s linear infinite;
}

progress[value]::-moz-progress-bar {
    background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .05) 33%, rgba(0, 0, 0, .05) 66%, transparent 66%),
    -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(0, 0, 0, .1)),
    -webkit-linear-gradient(left, #478112, #dbf0b8);
    background-size: 3em 2em, 100% 100%, 100% 100%;
}

@-webkit-keyframes animatestripes {
    100% {
        background-position: -40px 0;
    }
}

@keyframes animatestripes {
    100% {
        background-position: -40px 0;
    }
}

.page {
    width: 100%;
    margin: 0;
    position: relative;
}

.content, .ticket_view_module {
    width: 100%;
    min-height: 75vh;
    margin: 0 auto;
    padding: .1px 0;
    background: #d5e2e5;
    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, .3);
    z-index: 20;
}

.container-no-margin.container {
    margin: 0;
    width: 100%;
}

.container {
    margin: 1em;
    padding: 0;
    background: #f6f6f6;
    position: relative;
    box-shadow: 0 0 8px rgba(0, 0, 0, .45);
    transition: all ease-out .3s;
    width: calc(100% - 3em);
    break-inside: avoid;
}

.container:after {
    clear: both;
    content: "";
    display: table;
}

.container:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    background: #fbfbfb;
}

/* Style for generic Data Table */
.data-table th {
    position: relative;
    background: linear-gradient(35deg, #1496bb 0%, #1282a1 100%);
    color: white;
    border: .1em solid #1282a1;
}

.data-table th.current {
    font-weight: 700;
    background: #da621e;
}

.data-table th .ajax {
    color: #2222aa;
    text-decoration: underline;
    cursor: pointer;
}

.data-table th.last {
    border-right-width: 0;
}

.data-table th.sortable:hover {
    cursor: pointer;
    background-color: #da621e;
}

.data-table th.sortable:after {
    color: transparent;
    position: absolute;
    padding: .1em .4em;
    right: 1em;
    font-size: 60%;
    font-weight: 700;
    content: "\2197\00a0 A-Z";
}

.data-table th.sortable.integer:after, .data-table th.sortable.percent:after, .data-table th.sortable.currency:after, .data-table th.sortable.numeric:after {
    left: 1em;
    right: inherit;
}

.data-table th.sortable:not(.current):hover:after, .data-table th.ascending:after, .data-table th.descending:after {
    color: #003;
}

.data-table th.sortable.ascending:after {
    content: "\2197";
}

.data-table th.sortable.ascending:hover:after {
    content: "\2197\00a0 A-Z";
}

.data-table th.sortable.descending:after {
    content: "\2198";
}

.data-table th.sortable.descending:hover:after {
    content: "\2198\00a0 Z-A";
}

.data-table {
    table-layout: fixed;
}

.data-table tbody tr {
    position: relative;
}

.data-table tbody tr.divider {
    border-top: 2px solid #1496bb;
}

.data-table tbody tr:nth-child(2n+2) {
    background: #edfbff;
}

.data-table tbody tr:nth-child(2n+1) {
    background: #ffffff;
}

.data-table tbody tr:hover, .data-table tbody tr.bg-green:nth-child(2n+1):hover, .data-table tbody tr.bg-green:nth-child(2n+2):hover, .data-table tbody tr.bg-purple:nth-child(2n+1):hover, .data-table tbody tr.bg-purple:nth-child(2n+2):hover, .data-table tbody tr.bg-orange:nth-child(2n+1):hover, .data-table tbody tr.bg-orange:nth-child(2n+2):hover, .odd.bg-green:hover, .data-table tbody tr.odd.bg-green:nth-child(2n+1):hover, .bg-yellow:hover, .data-table tbody tr.bg-yellow:nth-child(2n+2):hover, .data-table tbody tr.bg-yellow:nth-child(2n+1):hover, .data-table tbody tr:hover .bg-purple, .data-table tbody tr:hover .bg-yellow {
    background: #f26d21;
    color: #ffffff;
}

.data-table tbody tr.disabled:hover, .data-table tbody tr.disabled:hover a {
    color: #333;
}

.data-table tbody tr:hover .bg-red, .data-table tbody tr:nth-child(2n+2):hover.bg-red, .data-table tbody tr:nth-child(2n+1):hover.bg-red {
    background: #c76060;
}

.data-table tbody tr:hover .bg-green, .data-table tbody tr:hover .bg-dark-green {
    background: #8dc78d;
}


.data-table tbody tr:hover a {
    color: #ffffff;
}

.data-table tbody tr:hover a:hover {
    color: #0d3d56;
}

.data-table tbody tr.disabled {
    opacity: .5;
}

.data-table tbody th {
    text-align: right;
    width: 39%;
}

.data-table tbody td {
    position: relative;
    padding: .2rem .5rem;
}

.data-table tbody tr:nth-child(2n+2) td {
    border-right: 1px solid #d5e2e5;
}

.data-table tbody tr:nth-child(2n+1) td {
    border-right: 1px solid #e5e5e5;
}

.data-table tbody tr:hover td {
    border-right: 1px solid #c2571a;
}

.data-table tbody td.last {
    border-right-width: 0;
}

.data-table tbody tr:nth-child(2n+2) td.first {
    border-left: 1px solid #d5e2e5;
}

.data-table tbody tr:nth-child(2n+1) td.first {
    border-left: 1px solid #e5e5e5;
}

.data-table tbody tr:hover td.first {
    border-left: 1px solid #c2571a;
}

.data-table tbody td[onclick] {
    cursor: pointer;
}

.data-table tbody td a:hover {
    color: #222;
    text-decoration: underline;
}

.data-table tbody td a {
    color: #330000;
    text-decoration: none;
}

.data-table tbody td a:before, a.show-link-icon:before {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    background: url(../img/external_link_icon.gif) no-repeat center;
    margin-right: .6em;
    content: "";
}

.show-link-icon + input[type="text"].invis, .link-icon-space + input[type="text"].invis {
    width: calc(100% - 16px) !important;
}

.link-icon-space {
    width: 16px;
    display: inline-block;
}

.number-space {
    padding-left: 11px;
}

.sublimation-note-icon {
    vertical-align: middle;
}

.pattern-column {
    padding-right: 20px !important;
}

.data-table tbody td select {
    width: 100%;
}

.table-title img {
    vertical-align: middle;
}

.table-title input[type="checkbox"], .table-title label {
    font-size: 12pt;
}

.table-title input[type="checkbox"] {
    margin-left: -2px;
    vertical-align: bottom;
    margin-top: 1em;
}

.numeric, .decimal, .integer, .percent, .file-size, .currency, .currency-precise, .currency-loose {
    text-align: right;
    font-family: 'Roboto Mono', monospace;
    font-variant: slashed-zero;
    -webkit-font-feature-settings: "zero";
    font-feature-settings: "zero";
}

.text, .a-left, .a-left.numeric {
    text-align: left;
}

.a-center {
    text-align: center !important;
}

.image {
    text-align: center;
    vertical-align: middle;
}

.image img {
    width: 142px;
    height: 100px;
}

.data-table .item-sellout, .data-table .item-delete, .data-table .item-disabled {
    text-decoration: line-through;
    opacity: 0.3;
}

.employee-mistakes thead th a {
    transform: rotate(-35deg);

}

/* Style for Messages Table */

.message-table {
    overflow-x: auto;
    table-layout: fixed;
}

.message-table tbody tr {
    position: relative;
    background: #f0f0f0;
    border-bottom: .1em solid #e8e8e8;
}

.message-table tbody td {
    padding: .33rem .8rem;
    font-family: 'Roboto', sans-serif;
}

.message-table tbody td.last {
    border-right-width: 0;
}

.message-table tbody td a:hover {
    color: #222;
    text-decoration: underline;
}

.message-table tbody td a {
    color: #330000;
    text-decoration: none;
}

.message-table .datetime, .message-table .date, .message-table .relative-date {
    text-align: right;
}

/* Style for Sewing Table */
.sewing-table th {
    background: #1496bb;
    color: white;
    border-right: .1em solid #0c374d;
}

.sewing-table th.current {
    font-weight: 700;
    position: relative;
}

.sewing-table th.ascending:after, .sewing-table th.descending:after {
    content: "";
    display: inline-block;
    border-left: .25em solid transparent;
    border-right: .25em solid transparent;
    border-top: .5em solid #444;
    margin-left: .5em;
}

.sewing-table {
    overflow-x: auto;
}

.sewing-table tbody tr {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

.sewing-table tbody tr:nth-child(2n+2) {
    background: #edfbff;
}

.sewing-table tbody tr:nth-child(2n+1) {
    background: #ffffff;
}

.sewing-table tbody tr:hover {
    background: #F3F315;
    color: #000;
}

.sewing-table tbody th {
    text-align: right;
}

.sewing-table tbody td {
    padding: 0;
    border-right: 2px solid #c0c0c0;
}

.sewing-table tbody td.first, .sewing-table tbody td.last {
    padding: .2rem .6rem;
}

.sewing-table tbody td.last {
    border-right-width: 0;
}

.sewing-table tbody td a:hover {
    color: #222;
    text-decoration: underline;
}

.sewing-table tbody td a {
    color: #330000;
    text-decoration: none;
}

.sewing-table tbody td a:before {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    background: url(../img/external_link_icon.gif) no-repeat center;
    margin-right: .6em;
    content: "";
}

.sewing-table .numeric, .sewing-table .currency {
    text-align: right;
}

.sewing-table .text {
    text-align: left;
}

.sewing-table .item-sellout, .sewing-table .item-delete {
    text-decoration: line-through;
    opacity: 0.3;
}

/* Style for Calendar Table */

.calendar th {
    background: #1496bb;
    color: white;
}

.calendar th a {
    color: #404040;
    text-decoration: none;
}

.calendar tbody td {
    height: 12vh;
    width: calc(12vw - 0.125em);
    background: #ffffff;
    border: 1px solid #1496bb;
    position: relative;
}

.calendar tbody td.today {
    background: #91d9ed;
    border: 0.125em solid #1496bb;
    width: calc(12vw - 0.25em);
}

.calendar .off-month {
    background: #f0f0f0;
    color: #808080;
}

.calendar .off-day {
    background: url(../img/calendar-weekend-background.png) repeat;
    color: #808080;
}

.calendar .entry {
    padding: .1em .5em;
    margin: 0.0625em 0;
    width: calc(100% - 1em);
    overflow: hidden;
    background: #ffffff;
}

.calendar .entry.good {
    background: #bbf8bb;
}

.calendar .entry.good:hover {
    background: #b0f0b0;
}

.calendar .entry.bad {
    background: #f8bbbb;
}

.calendar .entry.info {
    background: #bbbbf8;
}

.calendar .entry.bad:hover {
    background: #f0b0b0;
}

.calendar .entry.retail_revenue {
    color: blue;
}

.calendar .entry.fba_revenue {
    color: orange;
}

.calendar .entry.wholesale_revenue {
    color: green;
}

.calendar .entry.mistakes {
    color: red;
}

.table-wrapper.calendar.week table {
    min-height: 500px;
}

tr:hover .active {
    color: #fff;
}

.calendar a {
    text-decoration: none;
    color: #404040;
}

.calendar .day_of_month {
    padding: .1em .5em;
}

.calendar tbody td:hover {
    background: #fff6e0;
    color: #000;
}

.calendar .timeframe {
    font-size: 10pt;
    float: right;
}

/* Style for Horizontal table */
.horizontal {
    position: relative;
    text-align: center;
    color: #ffffff;
    margin-top: .6em;
    z-index: 800;
}

.horizontal tbody tr:hover {
    background: initial;
}

.horizontal h1, .horizontal h2, .horizontal h3, .horizontal h4 {
    color: #aaaaaa;
    background: none;
    padding: 0 .4em;
    margin: .4em 0;
}

.horizontal table {
    table-layout: fixed;
}

.horizontal td {
    position: relative;
    background: linear-gradient(to top, #517b87 0%, #335963 100%);
    width: 100%;
    border-radius: .8em .8em 0 0;
    cursor: pointer;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .2);
    transition: background .4s;
    z-index: 800;
}

.data-table .horizontal tbody tr td {
    border-left: .2em white solid !important;
    border-right: .2em white solid !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

.horizontal td:hover:not(.selected) {
    background: linear-gradient(to bottom, #f26d21 0%, #da621e 100%);
}

.horizontal td.selected {
    background: linear-gradient(to top, #1496BB 0%, #107896 100%);
    cursor: default;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
    z-index: 900;
}

.horizontal td:hover:not(.selected) h1, .horizontal td.selected h1,
.horizontal td:hover:not(.selected) h2, .horizontal td.selected h2,
.horizontal td:hover:not(.selected) h3, .horizontal td.selected h3,
.horizontal td:hover:not(.selected) h4, .horizontal td.selected h4 {
    color: #ffffff;
}

.form-line {
    display: inline-block;
    width: 85%;
    position: relative;
    border-bottom: 1px solid;
}

/* Style for File List Table */

.filelist {
    table-layout: fixed;
    background: #ffffff !important;
}

.filelist thead th {
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
}

.filelist tbody tr {
}

.filelist tbody td {
    position: relative;
    padding: 2px .8em;
    font-family: 'Roboto', sans-serif;
}

.filelist tbody td img {
    vertical-align: bottom;
}

.filelist tbody td.context-menu-container {
    position: relative;
    width: 0;
}

.filelist tbody tr:hover {
    background: #dfe0f7;
    cursor: pointer;
}

.filelist tbody tr.selected {
    background: #adafd9;
    color: #ffffff;
}

.filelist tbody tr.selected:hover {
    background: #8f91cc;
}

.dot {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border: 0.0625em solid #666666;
    margin: 0 0.5em 0 0;
}

.purple {
    background-color: #af36b3;
}

.red {
    background-color: #b33636;
    background: #b33636;
}

.blue {
    background-color: #3648b3;
}

.green {
    background-color: #3fb336;
}

.yellow, .calendar .entry.yellow {
    background-color: #fcff28;
}

.orange {
    background-color: #ffc528;
    background: #ffc528;
}

.popup {
    position: absolute;
    z-index: 9999;
    width: 13vw;
    height: 6rem;
    top: -6rem;
    box-sizing: border-box;
    padding: 1em;
    background: #ffffff;
    border: 0.125em solid #107896;
    box-shadow: 0.1em 0.2em 1em rgba(0, 0, 0, .2);
    color: #333;
}

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

.popup:after {
    z-index: 8888;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 0.625em;
    margin-left: -0.625em;
}

.popup:before {
    z-index: 8888;
    border-color: rgba(240, 240, 240, 0);
    border-top-color: #107896;
    border-width: 0.75em;
    margin-left: -0.75em;
}

.popleft {
    position: absolute;
    z-index: 9999;
    width: 13vw;
    height: 9vh;
    top: calc(-4.5vh + 1em);
    right: -12vw;
    box-sizing: border-box;
    padding: 1em;
    background: #ffffff;
    border: 0.125em solid #107896;
    box-shadow: .1em .2em 1em rgba(0, 0, 0, .2);
}

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

.popleft:after {
    z-index: 8888;
    top: calc(50% - 0.625em);
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 0.625em;
}

.popleft:before {
    z-index: 8888;
    top: calc(50% - 0.75em);
    border-color: rgba(240, 240, 240, 0);
    border-right-color: #107896;
    border-width: 0.75em;
}

.passwordpopup {
    position: relative;
    top: -3.5rem;
    right: -100%;
    width: 0;
    height: 0;
}

.passwordpopup .inner {
    position: absolute;
    z-index: 9999;
    width: 26rem;
    height: 10rem;
    top: calc(-5rem + 2em);
    right: -24.5rem;
    box-sizing: border-box;
    padding: 1em;
    background: #ffffff;
    border: 0.125em solid #107896;
    box-shadow: .1em .2em 1em rgba(0, 0, 0, .2);
}

.passwordpopup .inner:after, .passwordpopup .inner:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.passwordpopup .inner:after {
    z-index: 8888;
    top: calc(50% - 0.625em);
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 0.625em;
}

.passwordpopup .inner:before {
    z-index: 8888;
    top: calc(50% - 0.75em);
    border-color: rgba(240, 240, 240, 0);
    border-right-color: #107896;
    border-width: 0.75em;
}


.paginator {
    position: relative;
    background: #1496bb;
    text-align: center;
    padding: 0.2em;
    color: #eeeeee;
    z-index: 925;
}

.paginate {
    padding: 0.2em 0.5em;
    margin: 0 0.2em;
}

a.paginate {
    text-decoration: none;
}

a.paginate.active, a.paginate:hover {
    color: #fff;
    background-color: #da621e;
}

.table-wrapper .paginator select {
    width: auto;
}

.paginator select {
    padding: 0.2em 0.25em;
    margin: 0.2em 0.25em;
}

.paginator a {
    color: white;
}

ul.plain {
    list-style: none;
    padding: 0.3em;
}

ul.plain li {
    line-height: 1.5em
}

.wrap {
    overflow: visible;
    white-space: normal;
}

.masthead {
    position: relative;
    text-align: center;
    background: linear-gradient(0deg, #1287A8 0%, #107896 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.masthead .logo {
    display: inline-block;
    color: #f58b4c;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
    vertical-align: middle;
    font-size: 21pt;
    padding: 0 1rem;
}

.masthead nav {
    display: inline-block;
}

/* Style for Navigation Menu */
.nav {
    list-style: none;
    display: block;
    position: relative;
    margin: 0;
    z-index: 9999;
    color: #ffffff;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 2em;
}

.nav ul {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.4s, opacity 0.4s linear,
    background-color 0.4s linear;
}

.nav li {
    position: relative;
    z-index: 2200;
    display: inline-block;
    padding: 3px .75em;
    margin: 0;
    vertical-align: top;
}

ul.nav > li {
    border-right: 1px solid rgba(32, 32, 40, .1);
}

ul.nav > li:last-child {
    border-right: 0 !important;
}

.nav li:hover, .nav li:focus {
    background-color: #1496BB;
    border-color: #43ABC9;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    padding: 2px calc(.75em) 3px calc(.75em - 1px);
}

.nav li.lvl-0:hover:not(.parent), .nav li.lvl-0:focus:not(.parent) {
    border-width: 1px;
}

.nav li ul, .nav .nav li ul {
    position: absolute;
    visibility: hidden;
    overflow: hidden;
    background-color: #1496BB;
    padding: 3px 0;
    width: 15vw;
    max-height: 0;
    margin: 3px 0 0 -1em;
    border-color: #43ABC9;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, .3);
    transition: max-height .5s, overflow .5s;
}

.nav li:hover ul, .nav .nav li:hover ul, .nav li:focus ul, .nav .nav li:focus ul,
.nav li.exhover ul, .nav .nav li.exhover ul, .nav li.exhover ul, .nav .nav li.exhover ul {
    background-color: #1496BB;
    max-height: 100vh;
    height: auto;
    visibility: visible;
    overflow: visible;
    opacity: 1;
}

.nav .current {
    font-weight: 700;
    color: #000088;
}

.nav li ul li {
    display: block;
    text-align: left;
    padding: 3px calc(1em - 1px);
}

.nav li ul li.parent {
    background: url(../img/nav-parent.png) center right no-repeat;
}

.nav li ul li:hover, .nav li ul li:focus {
    border-width: 0;
    padding: 3px calc(1em - 1px);
    background-color: #db611e;
    color: white;
}

.nav li ul li:hover > a, .nav li ul li:focus > a {
    color: white;
}

.nav .nav li ul {
    visibility: hidden;
    opacity: 0;
    right: -14.9vw;
    top: -4px;
    z-index: 1;
    transition: visibility 0s linear 0.4s, opacity 0.4s linear,
    background-color 0.4s linear;
}

.nav .nav li:hover ul, .nav .nav li:focus ul {
    background-color: #1496BB;
    z-index: 2000;
    visibility: visible;
    opacity: 1;
    transition: none;
}

.nav a {
    color: #ffffff;
    text-decoration: none;
}

.nav a:hover, .nav a:focus {
    text-decoration: underline;
}

.nav img {
    margin-right: 4px;
    vertical-align: text-top;
}

.nav-page {
    cursor: pointer;
}

.debuginfo {
    text-align: right;
    padding: 5px;
    color: grey;
    font-size: smaller;
    clear: both;
    margin-bottom: 10em;
}

.debuginfo .debugcontent {
    display: none;
}

.debuginfo:hover .debugcontent {
    display: inline;
}

/* Style for Generic Image */
.img-prep {
    margin: 0.9375em;
}

/* Style for the Footer */
#foot {
    background: #eeeeee;
    text-align: center;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 1em 0;
    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, .3);
    font-size: 100%;
}

.column {
    box-sizing: border-box;
    width: calc(100% - 3em);
    float: left;
    vertical-align: top;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    padding: 0;
    position: relative;
}

.clear {
    clear: both;
}

.new-row {
    clear: both;
}

/* Form Columns */
.one-half {
    width: 50%
}

.one-third {
    width: 33.333%
}

.one-fourth {
    width: 25%
}

.three-fourth {
    width: 75%
}

.one-fifth {
    width: 20%
}

.two-fifth {
    width: 40%
}

.three-fifth {
    width: 60%
}

.four-fifth {
    width: 80%
}

.one-sixth {
    width: 16.666%
}

.one-eighth {
    width: 12.5%
}

.two-third {
    width: 66.666%
}

.one-whole {
    width: 100%
}

/* Container Columns */
.container.one-half {
    width: calc(50% - 2rem)
}

.container.one-third {
    width: calc(33.333% - 2rem)
}

.container.one-fourth {
    width: calc(25% - 2rem)
}

.container.three-fourth {
    width: calc(75% - 2rem)
}

.container.one-fifth {
    width: calc(20% - 2rem)
}

.container.two-fifth {
    width: calc(40% - 2rem)
}

.container.three-fifth {
    width: calc(60% - 2rem)
}

.container.four-fifth {
    width: calc(80% - 2rem)
}

.container.one-sixth {
    width: calc(16.666% - 2rem)
}

.container.one-eighth {
    width: calc(12.5% - 2rem)
}

.container.two-third {
    width: calc(66.666% - 2rem)
}

.container.one-whole {
    width: calc(100% - 2rem)
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.form-v-center form {
    display: flex;
    align-items: center;
}

.stdimage {
    text-align: center;
    padding: 0.625em;
}

textarea, select, input, label, label.input-wrapper {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 0.3em;
    margin: 0.4em 0.2em;
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    min-width: 1.375em;
    /*min-height: 1.375em;*/
}


select[multiple] {
    position: absolute;
    z-index: 926;
    height: 2rem;
}

select[multiple]:focus {
    height: 18rem;
}

textarea, select, input, label.input-wrapper {
    padding: 0.4em 0.5em
}

input[type="checkbox"] {
    vertical-align: middle;
}

.data-table td textarea, .data-table td select, .data-table td input, .data-table td label {
    margin: 0;
}

form input:focus:not([type=checkbox]):not([type=radio]):not([type="submit"]):not([type="clear"]):not([type="submit"]) {
    background: #fffbc0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) !important;
    transition: all .4s;
}

form select option:nth-child(2n+2) {
    background: #f4f5bc;
}

form select option, form select:focus {
    background: #feffc4;
    transition: all .4s;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="month"],
input[type="email"], input[type="tel"], input[type="file"], input[type="number"],
textarea, select, label.input-wrapper {
    width: 99%;
}

.container.one-fourth form .radio-option label {
    width: auto;
    display: inline-block;
    border: 2px solid #eeeeee;
    margin: 5px;
    padding: 12px;
}

.radio-option {
    position: relative;
    display: inline-block;
    width: 95%;
    box-sizing: border-box;
}


.radio-option input {
    position: absolute;
    right: 0;
    top: 10px;
}

form input.long {
    width: 99% !important;
}

input[type="hidden"] {
    visibility: hidden;
}

.container form label {
    width: calc(25% - 1em);
    text-align: right;
    vertical-align: middle;
}

.container form input[type="text"], .container form input[type="password"],
.container form input[type="date"], .container form input[type="datetime"], .container form input[type="month"],
.container form input[type="email"], .container form input[type="tel"],
.container form input[type="number"], .container form input[type="file"],
.container textarea, .container select, .container label.input-wrapper, .sublimation-form input[type="datetime-local"] {
    width: calc(75% - 2em);
    text-align: left;
    border: none;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .4);
}

.container form input[type="text"].short, .container form input[type="number"].short {
    width: calc(25% - 2em);
}

.container form label + .mce-tinymce.mce-container.mce-panel {
    width: calc(75% - 2em) !important;
    display: inline-block;
    text-align: left;
    border: 1px solid #bbb;
}

textarea {
    height: 20vh;
}

textarea.mini {
    height: 10vh;
}

form input[type="submit"].vertical, form input[type="reset"].vertical {
    float: none;
}

form label.vertical {
    width: auto;
    text-align: left;
}

form textarea.vertical {
    width: 90%;
}

input[type="text"].invis, input[type="number"].invis, select.invis {
    display: inline-block;
    border: 0;
    padding: .2rem .6rem;
    background: none;
    margin: 0;
    box-sizing: border-box;
    transition: none;
}

input[type="text"].invis:not(.width-auto), input[type="number"].invis:not(.width-auto), select.invis:not(.width-auto) {
    width: 100% !important;
}

input[type="submit"].invis, input[type="button"].invis {
    padding: .2rem 1rem;
    margin: .3em 0;
}

input[type="text"].invis:focus {
    border: 1px solid #b2b2b2;
    background: #ffc09c;
    padding: .2rem calc(.6rem - 2px);
}

tr:hover select.invis, tr:hover input[type="number"].invis {
    background: #fff;
}

.default {
    background: linear-gradient(to bottom, #1496bb 0%, #1496bb 39%, #107896 60%, #107896 100%) !important;
}

input[type="submit"], input[type="reset"], input[type="button"], button {
    float: right;
    padding: .5rem 1.5rem;
    margin: .5rem .75rem;
    background: linear-gradient(to bottom, #1496bb 0%, #1496bb 39%, #107896 60%, #107896 100%);
    color: white;
    border: 0;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    cursor: pointer;
}

input[type="submit"].danger, input[type="reset"].danger, input[type="button"].danger, button.danger {
    background: linear-gradient(to bottom, #c02e1d 0%, #c02e1d 39%, #9a2515 60%, #9a2515 100%);
    color: white;
}

input[type="submit"].major, input[type="reset"].major, input[type="button"].major, button.major {
    background: linear-gradient(to bottom, #F26D21 0%, #F26D21 39%, #C2571A 60%, #C2571A 100%);
    color: white;
}

input[type="submit"].minor, input[type="reset"].minor, input[type="button"].minor, button.minor {
    background: linear-gradient(to bottom, #c2c2c2 0%, #c2c2c2 39%, #b2b2b2 60%, #b2b2b2 100%);
    color: black;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover,
button:hover {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
    transform: scale(1.02);
}

input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active,
button:active, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus,
button:focus {
    box-shadow: inset 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, .2);
    transition: all 1ms;
    color: white;
    background: linear-gradient(to bottom, #f26d21 0%, #f26d21 39%, #c2571a 60%, #c2571a 100%);
    cursor: progress;
}

input[type="submit"].disabled, input[type="reset"].disabled, input[type="button"].disabled, button.disabled,
input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled, button:disabled {
    background: #e0e0e0;
    box-shadow: none;
    color: #aaa;
    cursor: default;
}

label.input-wrapper {
    background: #ffffff;
    position: relative;
}

label.input-wrapper:focus {
    background: #feffc4;
    transition: all .4s;
}

.container label.input-wrapper input {
    border: 0;
    padding: 0;
    margin: 0;
}

button.navigate {
    float: none;
    vertical-align: middle;
    margin: 1em .5em;
}

button.inline {
    vertical-align: middle;
    margin: .1em 1em;
    padding: .3em 1em;
}

.large-button {
    font-size: 22pt;
}

label.required:before {
    content: "*";
    color: #d3000f;
}

.file-container {
    display: inline-block;
    width: calc(75% - 2em);
    text-align: left;
}

.file-container input[type="button"] {
    float: none;
    margin: .4em .1em;
    padding: .4em 1em;
}

.file-container label {
    text-align: left !important;
}

.input-bar {
    width: 100%;
    background: #444444;
    color: #ffffff;
}

.input-bar * {
    display: inline-block;
    vertical-align: middle;
    margin-left: .2em
}

.input-bar a {
    color: #ffffff;
}

.input-bar select option {
    display: block;
}

.input-bar .mini {
    width: 20px;
    height: 20px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    background: #CCCCCC;
    margin-right: 4px;
}

#hs_code {
    width: calc(70% - 2em);
}

.mini-question {
    width: 20px;
    height: 20px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    background: #CCCCCC;
    margin-right: 4px;
    float: none;
}

.input-bar .mini img {
    margin: 0;
}

.input-wrapper > input, .input-wrapper > select, .input-wrapper > textarea, .input-wrapper > label,
.input-wrapper > div {
    width: auto !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.input-wrapper > label, .input-wrapper > a > button {
    margin-right: 0;
}

.input-wrapper > div {
    display: inline-block;
    vertical-align: middle;
}

.input-wrapper {
    display: inline-block;
    margin-left: 1.5em;
    vertical-align: top;
}

.container.checklist form label {
    text-align: left;
    display: inline-block;
    width: calc(98% - 1.375em - 1em);
    white-space: pre-line;
    vertical-align: top
}

.container.checklist form input {
    min-height: 1.375em;
    min-width: 1.375em;
    text-align: left;
    vertical-align: text-bottom;
    display: inline-block;
    margin-left: 1em
}

.address:not (.container ) {
    margin: .5em;
    padding: .5em;
    box-sizing: border-box;
    background: #ececec;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3)
}

/* Style for Generic Table Wrapper DIV */
.table-wrapper {
    font-size: 100%;
    background: #f8f8f8;
}


.table-wrapper table {
    white-space: nowrap;
    width: 100%;
}

.pre-wrap {
    white-space: pre-wrap;
}

.overflow-auto {
    overflow: auto;
}

.current-page {
    width: 200px;
    text-align: left;
    position: absolute;
    bottom: 0.25em;
    left: 0.5em;
}

.text-wrapper {
    font-size: 127%;
    line-height: 1.4em;
    margin: 1em 2em;
    padding: 1em 2em;
    background: #f8f8f8;
    border: 0.0625em solid #bbb;
    clear: both;
}

.chart-wrapper {
    margin: 0 auto;
    padding: 3rem;
    background: #1b1b1b;
}

.chart-wrapper h2 {
    color: #ffffff;
}

/* Style for Login Box */
.login {
    display: inline-block;
    font-size: 90%;
    padding: .15em 2%;
    color: #ffffff;
    z-index: 1000;
}

.login a {
    color: #ffffff;
}

.system-message-container {
    position: fixed;
    top: 0;
    left: calc(6rem);
    width: calc(100vw - 12rem);
    background: #aaa;
    box-shadow: .3em .3em .5em rgba(0, 0, 0, .4);
    cursor: pointer;
    z-index: 999999999;
}

.system-message {
    font-size: 120%;
    text-align: center;
    position: relative;
    border: 2px solid #666;
    padding: .6rem 0;
    width: 100%;
}

.success, .success a {
    border-color: #478112 !important;
    background: #dbf0b8 !important;
    color: #2c4f0b !important;
}

.error, .error a {
    border-color: #d3000f !important;
    background: #ffb3b3 !important;
    color: #a1000b !important;
}

.warning, .warning a {
    border-color: #EBC944 !important;
    background: #EFD469 !important;
    color: #574a19 !important;
}

.freeship {
    border-color: #ada !important;
    background: #dfd !important;
    color: #000 !important;
}

.question {
    border-color: #107896 !important;
    background: #1287A8 !important;
    color: #fff !important;
    text-shadow: 0.0625em 0.0625em 0.125em rgba(0, 0, 0, .3) !important;
}

.stamp {
    color: #d22;
    border: .1em solid #d22;
    display: inline-block;
    padding: .3em;
    font-weight: 500;
    font-size: 200%;
    transform: rotate(-15deg);
    margin: 1em 30vw;
    position: absolute;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .4), inset 4px 4px 4px rgba(0, 0, 0, .4);
    text-shadow: 4px 4px 4px rgba(0, 0, 0, .4);
    z-index: 8000;
    animation: stamp .4s ease-in-out 1
}

.active {
    color: #161 !important;
}

.close-button {
    display: block;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    transition: all ease-out .2s;
    cursor: pointer;
}

.close-button:hover {
    transform: rotate(90deg);
}

.hidden {
    display: none;
}

.container form label + .mce-tinymce.mce-container.mce-panel.hidden {
    display: none;
}

.stat-graph-wrapper {
    width: 980px;
}

.stat-graph-wrapper img {
    display: block;
    float: left;
    margin: 0.9375em;
}

.readonly {
    background: #e0e0e0;
}

.datePickerHighlight {
    border: none !important;
    padding: 1px 0 1px 1px !important;
    background: none !important;
    overflow: hidden;
}

.datePickerHighlight a {
    background: #99dd73 url(bg.png) 50% 50% repeat-x !important;
    border: 1px #88a276 solid !important;
}

.total {
    font-weight: 700;
}

.right-align-cells td, .right {
    text-align: right;
}

.inline-icon {
    vertical-align: middle;
    display: inline-block;
    margin: 0 0.3125em;
}

.tree {
    margin: 0 0.5em 1.2em 0.5em;
}

li li > .tree {
    margin-left: 1.5em;
}

li > .tree > li:before {
    content: ' ';
    width: 1em;
    display: inline-block;
    border-bottom: 1px dotted #444;
}

.tree li {
    position: relative;
    margin-bottom: 0.25em;
}

.collapsible, .selectable {
    display: none;
}

.tree label {
    padding: 0;
    margin: 0.0625em 0.125em;
    display: inline-block;
}

.collapsible + label {
    position: relative;
    top: 0.5em;
    padding-left: 1.125em;
    height: 1.1875em;
    background: url(../img/toggle-small-expand.png) left bottom no-repeat;
}

.collapsible ~ ol {
    display: none;
}

.collapsible:checked + label {
    background: url(../img/toggle-small.png) left bottom no-repeat;
}

.collapsible:checked ~ ol {
    display: block;
    min-height: 1.1875em;
    min-width: 2em;
}

.selectable + label {
    height: 1.1875em;
}

.selectable:checked + label {
    background-color: #ccf;
    border: 0.0625em solid #888;
    padding-right: 2em;
}

.tree .document {
    display: inline-block;
    padding-left: 1.1875em;
    background: url(../img/new-document.png) left center no-repeat;
}

.tree .folder {
    display: inline-block;
    padding-left: 1.1875em;
    background: url(../img/folder.png) left center no-repeat;
}

li > .tree {
    border-left: 1px dotted #444;
}

.sortable li {
    min-height: 1.5em;
    max-width: 50vw;
}

.sortable-placeholder {
    border: 1px dotted #666;
    min-height: 0.125em;
}

.sortable-dragging {
    min-height: 1.5em;
    display: block;
    background: #fff;
}

.height-container {
    border: 1px solid #666;
    padding: 1em;
    width: 48%;
    height: 70vh;
    overflow-y: scroll;
    display: inline-block;
}

.tagline {
    font-style: italic;
    color: #448;
    font-size: small;
    padding-left: 1em;
}

.busy-notification {
    display: none;
    position: absolute;
    left: calc(50vw - 2em);
    top: calc(50vh - 2em);
    width: 4em;
    height: 4em;
    background: url(../img/icon-busy.png) no-repeat center;
    cursor: wait;
    z-index: 99999;
    animation: clockwork 5s infinite;
}

.barcode {
    display: inline-block;
    background: #ffffff;
    color: #000000;
    padding: 1em;
    font-size: 218%;
    min-width: 1.8in;
    text-wrap: none;
}

.barcode.item-id {
    font-size: 120%;
}

.barcode.upc {
    width: 1.8in;
}

.barcode-wrapper {
    width: 2.4in;
}

.small-barcode {
    font-size: 150%;
    vertical-align: middle;
}

.picksheet-channel {
    display: inline-block;
    margin: 0 auto;
    width: auto;
    margin-left: 10%;
}

.onoffswitch * {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

.break-before {
    break-before: page;
}

.onoffswitch, .input-wrapper > div.onoffswitch {
    position: relative;
    width: 85px !important;
    display: inline-block;
    vertical-align: bottom;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: .4em .4em !important;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #bbb;
    width: auto !important;
    margin: 0 !important;
}

.onoffswitch-inner {
    display: block;
    width: 200% !important;
    margin-left: -100% !important;
    transition: margin 0.1s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50% !important;
    height: 29px !important;
    padding: 0 !important;
    line-height: 32px !important;
    font-size: 12px !important;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
}

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 20px !important;
    background-color: #6de551;
    color: #000000;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .15);
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 15px !important;
    background-color: #d8d8d8;
    color: #000000;
    text-align: right;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .15);
}

.onoffswitch-switch {
    display: block;
    width: 30px !important;
    height: 25px !important;
    margin: 3px !important;
    background: linear-gradient(to bottom, #1496bb 0%, #1496bb 39%, #107896 60%, #107896 100%);
    border: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50px !important;
    transition: all 0.1s ease-in 0s;
    border-radius: .25rem;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
    color: #1496bb;
    text-align: center;
    letter-spacing: -1.5px;
    line-height: 1.8em;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .3), -1px -1px 0 rgba(255, 255, 255, 0.3);
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0 !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px !important;
}

.onoffswitch[disabled] {
    opacity: .6;
}

.chart ul {
    list-style: none;
}

.chart span {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin-right: 1em;
}

.download-link {
    display: inline-block;
    margin: .2em .5em;
    text-decoration: none;
    scroll-margin-top: 200px;
}

.now-ticket-tab {
    background: linear-gradient(to top, hsl(345, 40%, 65%) 0%, hsl(345, 40%, 75%) 100%) !important;
}

.now-ticket-tab.selected,
.horizontal td.now-ticket-tab:hover:not(.selected) {
    background: linear-gradient(to top, hsl(345, 80%, 70%) 0%, hsl(345, 80%, 78%) 100%) !important;
}

.pink-table .paginator,
.pink-table h2.table-title {
    background: hsl(345, 80%, 70%);
}

.data-table.pink-table th {
    background: linear-gradient(to top, hsl(345, 80%, 65%) 0%, hsl(345, 80%, 75%) 100%);
    border: .1em solid #ec7aa9; /* Soft berry border */
}

.data-table.pink-table tbody tr:nth-child(2n+2) {
    background: #fff4f8;
}

.pink-table tbody tr:hover {
    background: hsl(345, 80%, 58%) !important;
    color: #ffffff !important;
}

.pink-table .input-bar {
    background: hsl(345, 70%, 40%);
}

.examples {
    list-style-type: none;
}

.examples li {
    font-family: 'Roboto Mono', 'Consolas', monospace;
}

.example-match:before {
    content: "";
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-right: 1em;
    background: url(../img/icon-okay.png);
}

.example-no-match:before {
    content: "";
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-right: 1em;
    background: url(../img/icon-stop.png);
}

.po-logo {
    width: 10vw;
    float: left;
    margin-right: .5em;
}

.report-logo {
    width: 10vw;
    margin: 1em 1em 0 0;
}

.report-logo + h2 {
    display: inline;
}

.detail {
    color: #733 !important;
}

.tab {
    display: inline-block;
    text-align: left;
    width: 48%;
    height: 1em;
}

.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999999999;
}

.blur {
}

.modal, .modal-php {
    position: absolute;
    width: 35vw;
    height: 35vh;
    min-height: 18rem;
    left: 32.5vw;
    top: 32.5vh;
    background: #eee;
    transition: all .5s;
    transform: translateY(-100vh);
    box-shadow: 0 0 64px rgba(0, 0, 0, .9)
}

.modal.medium {
    position: absolute;
    width: 50vw;
    height: 60vh;
    left: 25vw;
    top: 20vh;
    background: #eee;
    transition: all .5s;
    transform: translateY(-100vh);
    box-shadow: 0 0 32px rgba(0, 0, 0, .6)
}

.modal.large {
    width: 90vw;
    height: 90vh;
    left: 5vw;
    top: 5vh;
}

.modal h1 {
    /*padding-top:0;
	padding-bottom:0;*/
}

.modal.adjusted-inventory {
    z-index: 999999999;
}

.modal .data-table:not(.header-only ) {
    display: block;
    margin-top: 0;
    z-index: 999;
}

.ajaxtable .table-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(95vh - 16em);
}

.ajaxtable table th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

.ajaxtable div div.column {
    padding: 0;
}

.header-only {
    margin-bottom: 0;
}

.header-only {
    height: 1.6em;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.modal .buttonblock, .modal-php .buttonblock {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
}

.modal .buttonblock button, .modal-php .buttonblock button, .modal .buttonblock input, .modal-php .buttonblock input, .modal-php .buttonblock submit, .modal .buttonblock submit {
    float: none;
}

.modal p, .modal-php p {
    margin: 1em;
    font-size: 127%;
}

.dirty {
    background-color: #a44;
    width: 20em;
    border: 1px solid #822;
    position: absolute;
    top: -.3em;
    left: calc(50% - 10em);
    text-align: center;
    color: #fff;
    padding: .3em;
    box-shadow: 0 .3em 5px rgba(0, 0, 0, .2)
}

.icon, .icon::before, .icon::after {
    position: relative;
    padding: 0;
    margin: 0;
}

.icon {
    font-size: 218%;
    color: transparent;
    vertical-align: middle;
}

.icon.warning {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url(/media/default/warning-64.png) no-repeat !important;
    background-size: contain;
    margin-right: .5rem;
}

.icon.info {
    color: #fff;
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    overflow: hidden;
    margin-right: .5em;
    background-color: #F26D21;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.25em;
}

.icon.add {
    color: #fff;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(/media/2018/add-32x32.png) center no-repeat;
    text-align: center;
    vertical-align: middle;
    transition: all .2s;
    float: right;
}

.icon.download {
    display: inline-block;
    width: 52px;
    height: 52px;
    background-color: #d9d9e6;
    background-image: url(/media/default/download-32x32.png);
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: center;
    border-radius: 8px;
    margin-right: 8px;
}

.icon.add:hover {
    transform: rotate(10deg) scale(1.2);
    cursor: pointer;
}

.icon.add:active {
    transform: rotate(90deg) scale(0.95);
    transition: all .1s;
}

.icon.back {
    color: #ffffff;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    transition: all .2s;
    border: 3px solid rgba(255, 255, 208, 0);
    box-sizing: content-box;
    text-decoration: none;
    font-size: 190%;
    line-height: 30px;
    position: absolute;
    left: .5em;
    top: calc(50% - 18px);
    transform: rotate(180deg)
}

.icon.back:hover {
    cursor: pointer;
    border-color: #ffffff;
    color: #ffffff;
}

.icon.back:active {
    transform: rotate(180deg) scale(0.95);
    transition: all .1s;
}

input.cchide {
    color: rgba(0, 0, 0, 0);
    border: 1px dotted #ecc !important;
}

input.cchide:hover {
    color: rgba(255, 255, 255, 1);
    background: #c00;
    transition: all 1s;
}

.paymethods div {
    padding: .25em;
    clear: both;
}

.paymethods div.invalidcc:before {
    content: "Expired";
    display: block;
    font-size: 436%;
    color: #d33;
    position: relative;
    left: 2em;
    top: 2em;
    z-index: 1;
    transform: rotate(15deg);
}

.signature {
    font: 300 218% 'Herr Von Muellerhoff', cursive;
    margin-left: .5em;
    position: relative;
    top: .4em;
}

.signature > span {
    display: inline-block;
    margin-left: 1em;
    font-size: 145%;
}

.signature + div {
    border-top: 1px solid #666;
}

.loader {
    position: absolute;
    width: 160px;
    height: 160px;
    left: calc(50% - 80px);
    top: 40%;
}

.loader .circular {
    animation: rotate 2s linear infinite;
    height: 160px;
    position: relative;
    width: 160px;
}

.circular .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 5s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoom {
    100% {
        background-size: 70vw;
    }
    50% {
        background-size: 10vw;
    }
    0% {
        background-size: 70vw;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #c8c8d8;
    }
    50% {
        stroke: #6b6b73;
    }
}

@keyframes stamp {
    0% {
        transform: scale(8) rotate(-15deg);
    }
    100% {
        transform: scale(1) rotate(-15deg);
    }
}

.rollup {
    max-height: 30vh;
    overflow-y: scroll;
}

.rollup-full {
    max-height: 50vh;
    overflow-y: scroll;
}

.rollup-full table thead {
    inset-block-start: 0;
}

.rollup-full table tfoot {
    inset-block-end: 0;
}

.rollup-full table thead, .rollup-full table tfoot {
    position: sticky;
}

.mininotes, .minicontacts {
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: 5px;
}

.has-notes img {
    animation: full-bounce 7.5s ease-in-out 1
}

.bounce {
    animation: full-bounce 7.5s ease-in-out infinite;
    animation-play-state: running;
}

.bounce:hover {
    animation-play-state: paused;
}

@keyframes full-bounce {
    0% {
        transform: translateY(0);
    }
    1% {
        transform: translateY(-3px);
    }
    2% {
        transform: translateY(0);
    }
    3% {
        transform: translateY(-6px);
    }
    4% {
        transform: translateY(0);
    }
    5% {
        transform: translateY(-9px);
    }
    6% {
        transform: translateY(0);
    }
    7% {
        transform: translateY(-9px);
    }
    8% {
        transform: translateY(0);
    }
    9% {
        transform: translateY(-6px);
    }
    10% {
        transform: translateY(0);
    }
    11% {
        transform: translateY(-3px);
    }
    12% {
        transform: translateY(0);
    }
}

@keyframes slide-down {
    0% {
        transform: translateY(-100vh);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100vh);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes ghost-in {
    0% {
        opacity: 0;
        transform: translateY(3vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-down {
    animation: slide-down .4s ease-in-out forwards
}

.slide-up {
    animation: slide-up .4s ease-in-out forwards
}

.fade-in {
    animation: fade-in .4s ease-in-out forwards
}

.fade-in-fast {
    animation: fade-in .1s ease-in-out forwards
}

.fade-out {
    animation: fade-out .4s ease-in-out forwards
}

.fade-out-fast {
    animation: fade-out .1s ease-in-out forwards
}

.ghost-in {
    animation: ghost-in .3s ease-out forwards
}

@-webkit-keyframes flash {
    0% {
        background-color: Yellow;
        opacity: 1;
    }
    22% {
        background-color: Yellow;
    }
    77% {
        background-color: Red;
    }
    100% {
        background-color: #777;
    }
}

.flash {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

.product-label {
    box-sizing: border-box;
    overflow: hidden;
    font-family: Consolas;
    font-size: 7pt;
}

.rfid-label {
    box-sizing: border-box;
    font-family: Consolas;
    font-size: 9pt;
    max-width: 3.8in;
    max-height: 2in;
}

.rfid-label-1 {
    box-sizing: border-box;
    max-width: 3.8in;
    max-height: 2.40in;
    background: url(/media/default/badge-background.jpg);
    width: 3.8in;
    height: 2.14in;
    background-size: cover;
    vertical-align: middle;
    display: table-cell;
}

.rfid-label .rfid-name {
    text-align: center;
    -webkit-font-smoothing: antialiased;
    line-height: .9em;
    font-size: 45pt;
    background: #107896;
    color: #fff;
}


.rfid-label .rfid-number {
    text-align: center;
    color: #fff;
    font-size: 22pt;
    padding: .75em .5em;
    background: url(/media/default/badge-background.jpg);
    background-size: cover;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-weight: 600;
}

.rfid-label-1 .rfid-name {
    background: #107896;
    color: #fff;
    float: left;
    padding: .5em;
    width: 50%;
}

.rfid-label .barcode {
    text-align: center;
    display: block;
    padding: .5em .2em 1em .2em;
}

.rfid-label-1 img {
    max-width: 40%;
    max-height: 1.8in;
    width: auto;
    height: auto;
    float: left;
    margin: 1em 0 0 .5em;
}

.rfid-label-1 .logo {
    float: none;
    max-width: 35%;
    margin-top: 2.5em;
}

.img-border {
    border: 5px solid #fff;
}

.product-label.location {
    font-size: 24pt;
    overflow: hidden;
    text-align: center;
    width: 100%;
    background: #ffffff;
    padding-top: .5em;
}

.product-label.location .barcode {
    text-align: center;
    padding-top: .3em;
}

.product-label.location .description {
    height: 100px;
    margin-top: 5px;
}

.product-label .product-fnsku {
    text-align: center;
    -webkit-font-smoothing: antialiased;
    line-height: 1.2em;
}

.product-label .barcode {
    display: block;
    overflow: hidden;
    margin: 0 auto .2em auto;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.sku {
    white-space: nowrap;
}

.bg-red, .data-table tbody tr:nth-child(2n+2).bg-red, .data-table tbody tr:nth-child(2n+1).bg-red {
    background: #f7dfdf;
}

.odd .bg-red {
    background: #e6c2c2;
}

.odd .bg-green, .odd.bg-green, .data-table tbody tr.odd.bg-green:nth-child(2n+1) {
    background: #dff7df;
}

.bg-blue, .data-table tbody tr.bg-blue:nth-child(2n+1) {
    background: #dfe0f7;
}

.bg-orange, .data-table tbody tr.bg-orange:nth-child(2n+1), .data-table tbody tr.bg-orange:nth-child(2n+2) {
    background: #ffc07e;
}

.bg-orange.odd, .data-table tbody tr.bg-orange.odd:nth-child(2n+1), .data-table tbody tr.bg-orange.odd:nth-child(2n+2) {
    background: #ffc88e;
}


.bg-green, .data-table tbody tr.bg-green:nth-child(2n+1), .data-table tbody tr.bg-green:nth-child(2n+2), input.invis.bg-green {
    background: #cee6ce;
}

.bg-yellow, .data-table tbody tr.bg-yellow:nth-child(2n+2), .data-table tbody tr.bg-yellow:nth-child(2n+1) {
    background: #eff49a;
}

.even .bg-yellow, .even.bg-yellow, .data-table tbody tr.even.bg-yellow:nth-child(2n+2), .data-table tbody tr.even.bg-yellow:nth-child(2n+1) {
    background: #e2e795;
}

.bg-purple, .data-table tbody tr.bg-purple:nth-child(2n+1), .data-table tbody tr.bg-purple:nth-child(2n+2), input.invis.bg-purple {
    background: #dfe5f7;
}

.even .bg-purple, .data-table tbody tr.even.bg-purple:nth-child(2n+1), .data-table tbody tr.even.bg-purple:nth-child(2n+2), .even input.invis.bg-purple {
    background: #c9d4f5;
}

.bg-dark-green {
    background: #47a247;
    color: #fff;
}

.bg-dark-blue {
    background: #093145;
    color: #fff;
}

.disabled {
    background: #b2b2b2 !important;
}

.saving-display {
    padding: .8em 0 0 2em;
}

.attachments label {
    width: auto !important;
}

.documents {
    position: relative;
    padding: .5em 1em;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .3);
    background: #ffffff;
}

.documents.empty {
    padding: 1em;
    margin: .5em 2em;
    border: .3em dashed #cccccc;
    box-shadow: none;
    color: #aaaaaa;
    background: none;
    text-align: center;
    vertical-align: center;
    font-size: 150%;
}

.attached-document {
    display: inline-block;
    position: relative;
    padding: .5em .6em;
    width: calc(10em - 1.2em);
    word-break: break-all;
    text-align: center;
    vertical-align: top;
}

.attached-document:hover {
    background: #dfe0f7;
    transition: all .3s;
}

.attached-document.selected {
    background: #adafd9;
}

.attached-document.selected > a, .attached-document.selected > a:hover {
    color: #ffffff;
}

.attached-document.selected:hover {
    background: #8f91cc;
}

.attached-document img {
    display: block;
    margin: .1em auto;
}

.attached-document:hover img {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}

.attached-document a {
    text-decoration: none;
}

.attached-document a.del {
    position: absolute;
    top: 0;
    right: 1em;
    text-decoration: none;
    display: none;
}

.attached-document:hover a.del {
    display: inline;
}

.attached-document a:hover {
    color: #000000;
    transition: all .3s;
}

input[type="button"].filedialogtoggle {
    background: url(/media/default/filetype/new-64.png) center no-repeat, linear-gradient(to bottom, #f0f0f0 0%, #f0f0f0 39%, #e0e0e0 60%, #e0e0e0 100%);
    background-size: 60%, contain;
    width: 48px;
    height: 31.726px;
    vertical-align: middle;
}

input[type="button"].folderdialogtoggle {
    background: url(/media/default/filetype/folder-64.png) center no-repeat, linear-gradient(to bottom, #f0f0f0 0%, #f0f0f0 39%, #e0e0e0 60%, #e0e0e0 100%);
    background-size: 70%, contain;
    width: 48px;
    height: 31.726px;
    vertical-align: middle;
}

tr.unread {
    font-weight: 900;
}

.contextmenu {
    background: #ffffff;
    border: 1px solid #cccccc;
    display: none;
    position: absolute;
    list-style: none inside;
    text-align: left;
    padding: 0;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
    z-index: 999999;
    overflow: visible;
    color: #444444;
    font-size: 1rem;
    width: 10rem;
}

.contextmenu li {
    position: relative;
    padding: .1em 1em;
}

.contextmenu li a {
    color: #444444;
    display: block;
    width: 100;
    text-decoration: none;
}

.contextmenu li:hover {
    background: #cccccc;
    cursor: pointer;
}

.contextmenu ul {
    display: none;
}

.contextmenu li:hover ul {
    display: block;
    list-style: none inside;
    text-align: left;
    padding: 0;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
    z-index: 999999;
    overflow: visible;
    background: #ffffff;
    position: absolute;
    left: 10rem;
    top: 0;
    width: 10rem;
}

.hide {
    display: none;
}

.opacity-hide {
    opacity: 0;
    transition: all .2s;
}

.no-height {
    max-height: 0;
}

textarea.opacity-hide {
    width: 0;
    height: 0;
}

.label {
    display: inline-block;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
    color: #ffffff;
    padding: .15rem .4rem;
    margin: .5rem;
}

table .label, .minor .label {
    margin: 0 .5rem;
}

.label.clickable:hover {
    transition: all .3s;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
}

.labels-dropdown, .users-dropdown {
    position: absolute;
    top: 2em;
    right: 0;
    background: #ffffff;
    border: 1px solid #bbbbbb;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
    z-index: 999999;
    width: 100%;
    display: none;
}

.labels-dropdown.selected, .users-dropdown.selected {
    display: block;
}

.labels-dropdown h4, .users-dropdown h4 {
    background: #ffffff;
}

.labels-dropdown h4:after, .users-dropdown h4:after {
    bottom: 100%;
    right: 24px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(221, 221, 255, 0);
    border-top-color: #ffffff;
    border-width: 8px;
    margin-right: -8px;
}

.label-long {
    color: #666666;
    padding: .25em 1em;
    border-top: 1px solid #bbbbbb;
    text-shadow: none;
}

.label-long .check {
    display: inline-block;
    margin-right: 1em;
    visibility: hidden;
}

.label-long .check.selected {
    visibility: visible;
}

.ticket-title img {
    vertical-align: middle;
}

.ticket-status {
    display: inline-block;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
    color: white;
    padding: .25rem 1rem;
    margin-right: .75em;
    margin: 0 .5em;
}

.ticket-box {
    padding: 0;
    margin: .5rem 0;
}

.ticket-box:not(.column) {
    clear: both;
    margin: .5rem 1rem;
}

.ticket-box h4, .ticket-box h5, .ticket-header {
    background: #1496bb;
    padding: .5em 1em;
    color: white;
}

.ticket-box.column > div {
    margin: .5em 1em;
}

.ticket-box h4:after {
    right: 100%;
    top: 20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(221, 221, 255, 0);
    border-right-color: #1496bb;
    border-width: 8px;
    margin-top: -8px;
}

.ticket-box .container {
    display: inline-block;
    width: calc(100% - 64px - 1rem);
    margin: 0 0 1rem 1rem;
}

.ticket-box.column .container {
    width: calc(100% - 2em);
}

.ticket-box .message {
    padding: 1em 2em;
}

.ticket-box .message h3 {
    text-shadow: none;
}

.ticket-box .right {
    float: right;
}

.ticket-box p.minor {
    display: inline-block;
    width: calc(100% - 64px - 1em);
    margin-left: 64px;
    vertical-align: middle;
    text-align: left;
    padding: 0 1rem;
}

.ticket-box p.minor.tab-ticket {
    width: calc(100% - 217px - 1em);
}

.ticket-icon {
    display: inline-block;
    text-align: right;
    max-width: 64px;
    vertical-align: top;
}

.tab-ticket {
    margin-left: 217px !important;
}

.author-ticket {
    width: 113px;
    display: inline-block;
}

.action-of-ticket {
    width: 320px;
    display: inline-block;
}

.ticket-box .message {
    max-width: 60em;
}

img.mistake-gif {
    max-height: 200px;
}

.total-time {
    font-weight: 700;
    color: #da621e;
}

.ticket-timer, .ticket-timer-label {
    font-weight: 700;
    color: #1496bb;
}

.running-time .ticket-timer, .running-time .ticket-timer-label {
    border-color: #d3000f !important;
    background: #ffb3b3 !important;
    color: #a1000b !important;
}


.bg-timer-running {
    background: #1c768f !important;
    color: #fff;
}

.dept-swatch {
    display: inline-block;
    width: 9.6%;
    text-align: center;
    padding: .5em 0;
}

.hr_schedule_module tbody td.column-2, .hr_schedule_module tbody td.column-3, .hr_schedule_module tbody td.column-4, .hr_schedule_module tbody td.column-5, .hr_schedule_module tbody td.column-6 {
    padding: 0;
}

.hr_schedule_module tbody td div {
    padding: .2rem .5rem;
}

.hr_schedule_module tbody tr:hover td div, .hr_schedule_module tbody tr:hover td {
    background: #f26d21 !important;
    color: #ffffff;
}

.hr_schedule_module .data-table tbody tr:nth-child(2n+2) {
    background: #fff;
}

.complete-mode-active .content {
    background: #478112 !important;
}

.refund-mode-active .content {
    background-color: #da621e;
}

.refund-change .data-table tbody td {
    vertical-align: middle;
}

.refund-change textarea {
    min-width: 100px;
    height: 70px;
}

.avatar {
    display: inline-block;
    width: 128px;
    height: 128px;
    cursor: pointer;
    vertical-align: top;
}

.avatar img {
    width: 100%;
}

.small-avatar {
    max-width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: .1em .5em;
}

.clickable {
    cursor: pointer;
}

.hint {
    cursor: help;
}

.column-input input {
    min-width: 70px;
}

/* Style for Search Results Table */
.search.table-wrapper {
    background: #ffffff;
}

.search.table-wrapper .paginator {
    background: #e0e0f0;
}

.search.table-wrapper a {
    text-decoration: none;
}

.search.table-wrapper a:hover {
    text-decoration: underline;
}

.search.table-wrapper a h3 {
    padding: .5em 0 0 0;
}

.search.table-wrapper .url {
    color: #228822;
}

.search.table-wrapper p.snippet {
    padding: .2em 0 .2em 0;
}

button.inline, input.inline {
    vertical-align: middle;
    margin: .1em 1em;
    padding: .3em 1em;
}

.site-search {
    display: inline-block;
    width: calc(80vw - 4vw);
    padding: 0 2vw;
    text-align: right;
}

#doc_edit_txt {
    width: calc(100% - 0.8em);
    height: calc(90vh - 10em);
}

.priority.low {
    background-color: #fce8b2;
}

.priority.high {
    background-color: #dddd00;
}

.priority.urgent {
    background-color: #ff0000;
}

.priority.urgent.text, .priority.high.text, .priority.low.text {
    background: none;
}

.floating-button {
    margin: -50px 0 0 0 !important;
    padding: 1em !important;
    position: fixed;
    top: 0;
    left: calc(6rem);
    width: calc(100vw - 12rem);
    box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, .4);
    z-index: 999999999;
}

.floating-button:not([disabled]) {
    -webkit-animation: full-bounce 10s ease-in-out infinite;
    -webkit-animation-play-state: running;
    background: #b33636 !important;
    margin: 0 !important;
}

.priority .nav {
    position: absolute;
    background-color: #ffffff;
    visibility: visible;
    opacity: 1;
    z-index: 2000;
    transition: none;
    border-color: #bbb;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-radius: 0 1px 1px 1px;
    box-shadow: 0.25em 0.25em 0.375em 0 rgba(0, 0, 0, .3);
    color: #200000;
}

.product-photo {
    max-width: 50vw;
}

table th.resizing {
    cursor: col-resize;
}

h3.notification, .hr_timeclock_module .badge-box h2 {
    background: transparent;
    color: #107899;
    text-shadow: none;
}

.hr_timeclock_module .notice h2 {
    color: #fff;
}

.oldmail {
    opacity: 0.5;
    vertical-align: middle;
}

.newmail {
    animation: full-bounce 7.5s ease-in-out infinite;
    animation-play-state: running;
    vertical-align: middle;
}

.mail_not_important {
    opacity: .5;
    cursor: pointer;
}

.mail_not_important:hover {
    opacity: .9;
}

.mail_important {
    color: gold;
    text-shadow: 1px 1px 0 black;
    cursor: pointer;
}

.table.wrapper.data-table.input-table form[action="/util/mail/edit"] #action_search, .table.wrapper.data-table.input-table form[action="/util/mail/edit"] #action_daterange,
.table.wrapper.data-table.input-table form[action="/util/mail/edit"] #action_comboboxarray, .table.wrapper.data-table.input-table form[action="/sales/dashboard"], label[for="picker_id"], label[for="producer_id"] {
    display: none;
}

.accordion-content {
    overflow: hidden;
    max-height: 0;
    min-height: 0;
    padding: 0;
    transition: max-height ease .5s;
    -webkit-transition: max-height ease .5s;
    -moz-transition: max-height ease .5s;
}

.accordion input:checked + .accordion-content {
    max-height: none;
    padding: 1em;
}

.accordion input {
    vertical-align: middle;
}

.accordion label {
    padding-top: 2.7em;
}

.pattern-thumbnail {
    max-width: 150px;
    padding: 7px 0;
    vertical-align: middle;
    max-height: 70px;
}

tr.date-row {
    height: 3em;
    color: #808080;
}

.float-left {
    float: left;
}

input[type="button"].float-left {
    float: left !important;
}

.float-right {
    float: right;
}

.float-none {
    float: none;
}

h2.float-left {
    padding-top: 1.5em;
    color: #444;
    background: transparent;
}

.left-border {
    border-left: 5px solid #107896;
}

.margin-none {
    margin: 0 !important;
}

.width-auto {
    width: auto !important;
}

.display-inline-block {
    display: inline-block;
}

.labels-dropdown, .users-dropdown, .depts-dropdown {
    position: absolute;
    top: 2em;
    right: 0;
    background: #ffffff;
    border: 1px solid #bbbbbb;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
    z-index: 999999;
    width: 100%;
    display: none;
}

.dashbaord-settings b + span {
    background: #fff;
    padding: .5em;
    border: 1px solid #ddd;
    color: #444;
}

.input-bar.dashbaord-settings {
    background: #fff;
    color: #444;
}

.input-bar.dashbaord-settings * {
    margin-top: .2em;
}

.labels-dropdown.selected, .users-dropdown.selected, .depts-dropdown.selected, .button-block {
    display: block;
}

.inactive {
    opacity: .6;
}

.debug {
    color: #ffffff;
}

.verify-items-table {
    max-height: 65vh;
    min-height: 22vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
}

.pack-header {
    background: linear-gradient(45deg, #107896 0%, #1287A8 101%);
}

.pack-header.pack-and-hold {
    background: var(--darkest-ruby);
}

.pack-header.pack-saturday {
    background: #FF6110;
}

.pack-header.pack-saturday span {
    font-weight: 900;
    color: #4d0e8a;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
}

.pack-header.complete-mode-active {
    background: #478112 !important;
}

.pack-header h1, .pack-header h2, .pack-header h3 {
    background: none;
}

.wh-packing-screen-form input.scantarget {
    width: 1em;
    opacity: .1;
    position: fixed;
}

.wh-producer-input {
    display: inline-block;
}

.wh_admin_orders_edit_module .order-items-table td {
    vertical-align: middle;
}

ul.wh-pick-list {
    background: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.wh-pick-list li {
    clear: both;
}

ul.wh-pick-list ul {
    display: inline-block;
    background: #efd469;
    list-style-type: circle;
    list-style-position: inside;
    margin: .5rem;
    padding: .5rem 1rem;
    width: 12rem;
}

.wh-shipment-header {
    background: #093145;
}

.wh-shipment-member {
    border-left: 1rem solid #093145;
    border-right: 1rem solid #093145;
}

.wh-shipment-member hr {
    margin: 0;
}

.wh-pick-img {
    float: left;
    clear: both;
    width: 144px;
}

.wh-pack-qty {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 96px;
    height: 96px;
    float: right;
    font-size: 32pt;
    color: white;
    background: var(--darkest-ruby);
    margin: .25rem;
}

.wh-pack-qty span {
    display: block;
    font-size: 18pt;
    padding: 16px;

}

.verify-items-table .appbutton img {
    max-width: 72px;
}

.appbutton.left {
    float: left;
}

.wh-object {
    padding: .1em .4em;
    margin: 0 .4em;
    color: #660000;
    background: #ffeeee;
    background: #d7c0c0;
    font-style: italics;
    font-size: 75%;
    border-radius: 3px;
}

.wh-object[data-obj="row"] {
    color: #000000;
    background: #c0c1d7;
}

.wh-object[data-obj="zone"] {
    color: #000000;
    background: #b1dbbe;
}

.wh-object[data-obj="section"] {
    color: #000000;
    background: #dbd0b1;
}

.wh-object[data-obj="shelf"] {
    color: #000000;
    background: #b1dbdb;
}

.wh-object[data-obj="bin"] {
    color: #000000;
    background: #d8b1db;
}

.wh-pack-img {
    max-width: 100px;
}

.wh_inventory_pulllist_edit_module .text {
    color: #000;
}

.carrier-icon {
    margin-right: 1em;
    margin-bottom: 1em;
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, .45);
}

.sales_orders_invoice_module .one-whole.debug {
    background: #777777;
    padding: 1em;
    color: #fff !important;
    width: 98%;
    line-height: 1.5em;
}

.jstree-open ~ li {
    display: none !important;
}

.top-align {
    vertical-align: top;
}

.footer {
    page-break-after: always;
}

.grey-text {
    color: #777777;
}


@media screen and (max-width: 1600px) {
    body {
        overflow-x: auto;
    }
}

@media screen and (max-width: 1400px) {
    .container.data-table.one-third.table-wrapper {
        width: calc(100% - 2rem);
    }
}


@media screen and (max-width: 1024px) {
    body {
        font-size: 10pt;
    }

    ul {
        padding: .5em 2em;
    }

    .content {
        width: calc(100% - 1em);
    }

    .container form label {
        width: calc(35% - 1em);
    }

    .container form input[type="text"], .container form input[type="password"],
    .container form input[type="date"], .container form input[type="datetime"], .container form input[type="month"],
    .container form input[type="email"], .container form input[type="tel"],
    .container form input[type="number"], .container form input[type="file"],
    .container textarea, .container select, .container label.input-wrapper {
        width: calc(65% - 2em);
    }

    .page.secure_login .container.one-half.center {
        width: 100%;
        font-size: 28pt;
        margin-top: 0;
        background: none;
        box-shadow: none;
    }

    .page.secure_login .container.one-half.center form p {
        display: none;
    }

    .page.secure_login .content {
        background: #444;
        color: #FFF;
    }

    .page.secure_login .masthead {
        display: none;
    }

    .page.secure_login .container.one-half.center h2 {
        text-align: center;
        background: #0D3D56;
        padding: .5em;
    }

    .page.secure_login input[type="reset"], .page.secure_login input[type="submit"] {
        width: 31vw;
        height: 31vw;
    }
}