/* Default CSS Styles */
body {
    margin: 0 auto;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
}

body * {
    box-sizing: border-box;
}

img {
    border: 0;
}

button, input, select, textarea {
    outline: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

#showmenu {
    background: url("../../images/cms/leftnavbg.png") repeat-y top left;
}

#logo {
    position: relative;
    float: left;
    width: 100px;
    margin: 0;
    background-image: url("../../images/cms/logo.gif");
    background-color: #4c83c3;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    overflow: hidden;
    height: 0;
    padding: 44px 0 0 0;
    text-align: center;
    cursor: default;
}

#footertag {
    text-align: center;
    margin-top: 50px;
    font-size: 85%;
}

#quicksearch {
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 110%;
    text-align: right;
    width: 25%;
    width: calc(30% - 80px);
    position: absolute;
    right: 40px;
    top: 0;
    transition: all 0.3s;
}

#quicksearch select {
    z-index: 1001;
    position: absolute;
    top: 6px;
    left: 7px;
    font-size: 85%;
    width: 85px;
    border: 0;
    border-right: 1px solid #ccc;
    border-radius: 3px 15px 15px 3px;
    padding: 0 8px;
    height: 28px;
    background: #e9e9e9;
}

#quicksearch #quicksearchkeyword {
    padding: 3px 30px 3px 100px;
    position: absolute;
    top: 5px;
    left: 6px;
    width: 100%;
    width: calc(100% - 12px);
    min-width: 170px;
    z-index: 1000;
    border-radius: 3px;
    height: 30px;
    font-size: 100%;
    outline: none;
    transition: all 0.3s;
}

#quicksearch #quicksearchicon {
    background: none;
    border: 0;
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 0;
    min-width: auto;
    z-index: 1000;
}

#alert {
    position: fixed;
    top: 8px;
    right: 8px;
    opacity: 1 !important;
    width: 28px;
    height: 28px;
    border-radius: 16px;
    color: #fff;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1001;
    background-repeat: no-repeat;
    background-position: center;
    transition: background 1s;
}

#alert:hover {
    font-size: 120%;
}

/* pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* apply pulse to active badge */
#alert.active {
    background-color: #777;
    animation-name: pulse;
    animation-duration: 2s;
    animation-delay: 1s;
}

#alert.active.alert1 {
    background-color: #e0d12e;
}

#alert.active.alert2 {
    background-color: #eaa119;
}

#alert.active.alert3 {
    background-color: #e41e1e;
}

#alert.close {
    background-color: #fff !important;
    color: #333;
    height: 0;
    line-height: 0;
    font-size: 0;
    padding-top: 28px;
    background-image: url("/images/cms/close.png");
}

#alertpopout {
    right: -310px;
    overflow: auto;
    position: fixed;
    top: 0;
    height: 100%;
    width: 300px;
    background: #fff;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    z-index: 1000;
    transition: all 0.3s;
    color: #999;
}

#alertpopout::-webkit-scrollbar {
    display: none;
}

#alertpopout.visible {
    right: 0;
}

#alertpopout .alertwrap {
    margin: 15px 0 0 0;
    padding: 10px 40px 10px 15px;
    float: left;
    width: 100%;
    position: relative;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-left: 10px solid #f9f9f9;
}

#alertpopout .alertwrap h5 {
    font-size: 130%;
    margin: 0 0 5px 0;
}

#alertpopout .alertwrap .alertclose {
    font-size: 200%;
    position: absolute;
    color: #999;
    top: 5px;
    right: 15px;
    cursor: pointer;
}

#alertpopout .alertwrap .grey {
    font-size: 80%;
    float: left;
    margin-top: 5px;
}

#alertpopout .alertwrap.alert1 {
    border-left: 10px solid #eae268;
}

#alertpopout .alertwrap.alert1 h5 {
    color: #c9c140;
}

#alertpopout .alertwrap.alert2 {
    border-left: 10px solid #eaa119;
}

#alertpopout .alertwrap.alert2 h5 {
    color: #eaa119;
}

#alertpopout .alertwrap.alert3 {
    border-left: 10px solid #e41e1e;
}

#alertpopout .alertwrap.alert3 h5 {
    color: #e41e1e;
}

#alertpopout .alertwrap.alert4 {
    border-left: 10px solid #333;
}

#alertpopout .alertwrap.alert4 h5 {
    color: #555;
}

#headernav {
    height: 44px;
    min-width: 800px;
    width: 100%;
    background: #323232 url("../../images/cms/headernavbg.png") repeat-x top left;
    float: left;
    position: fixed;
    z-index: 998;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

#headernavinner {
    margin-left: 120px;
}

#headernavinner ul {
    display: flex;
    float: left;
    width: 70%;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 998;
    transition: all 0.3s;
}

#headernavinner ul li {
    float: left;
    margin: 0;
    padding: 0;
    flex-basis: 15%;
    z-index: 999;
}

#headernavinner ul li.smallnav {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
}

#headernavinner ul li.smallnav > a {
    height: 0;
    padding: 44px 0 0 0;
    background-position: center !important;
    filter: invert(100%);
}

#headernavinner ul li a {
    color: #ccc;
    font-size: 100%;
    font-weight: normal;
    height: 44px;
    line-height: 44px;
    padding: 0 10px 0 40px;
    background-repeat: no-repeat;
    background-position: 5px center;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#headernavinner > ul > li > a {
    background-image: none;
    padding: 0 10px;
    text-align: center;
}

#headernavinner > ul > li:hover {
    background: #fff;
}

#headernavinner ul li:hover a {
    color: #506f9b;
}

#headernavinner ul li ul {
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 44px;
    z-index: 999;
    width: 14%;
    min-width: 200px;
}

#headernavinner ul li:hover ul {
    display: block;
}

#headernavinner ul li ul li {
    width: 100%;
    border-top: 1px solid #fff;
}

#headernavinner ul li ul li:hover {
    background: #fff url("../../images/cms/headerdropmenuhover.png") repeat-x top left;
    border-top: 1px solid #f3f3f3;
}

#headernavinner ul li ul li .menukeyword {
    margin: 5px 8px;
    padding: 5px 25px 5px 5px;
    float: right;
    width: 75%;
    width: calc(100% - 16px);
}

#headernavinner ul li ul li .menusearchicon {
    position: absolute;
    right: 8px;
    top: 6px;
    border: 0;
    background: none;
}

#headernavinner ul li ul li a {
    height: 36px;
    line-height: 36px;
}

.sticky-header {
    position: sticky;
    top: 40px;
    background: #fff;
    z-index: 10;
}

.sticky-header-tabs {
    position: sticky;
    top: 32px;
    background: #fff;
    z-index: 10;
}

h1, h2, h3, h4, h5 {
    font-size: 160%;
    font-weight: normal;
    margin: 0.2em 0;
}

h4 {
    font-size: 150%;
}

h5 {
    font-size: 130%;
}

hr {
    height: 1px;
    border: 0;
    border-bottom: 1px dotted #aaa;
    padding: 0 0 15px 0;
    margin: 0 0 15px 0;
}

a {
    color: #4c83c3;
    text-decoration: none;
    outline: none;
}

a:hover {
    color: #4c83c3;
}

a.orderlink {
    text-decoration: underline;
}

a.orderlink:hover {
    text-decoration: none;
}

.ui-widget-content a {
    color: #4c83c3;
}

#login_outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#login_wrap {
    display: table-cell;
    vertical-align: middle;
}

#login {
    color: #505f7b;
    margin: 0 auto 100px auto;
    padding: 20px;
    width: 300px;
    box-shadow: 0 0 10px #ddd;
    border: 1px solid #ddd;
}

#login h3 {
    color: #4c83c3;
    margin: 0;
}

#login form {
    padding-top: 15px;
}

#login form .textbox {
    width: 100%;
    font-size: 150%;
}

#login form .inputbutton {
    font-size: 150%;
    padding: 5px 15px;
}

.loginuser {
    cursor: pointer;
    position: relative;
    display: block;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin: 10px 0 0 0;
    padding: 10px 15px;
}

.loginuser span {
    font-size: 30px;
    color: #ddd;
    position: absolute;
    right: 10px;
    top: 7px;
}

.loginuser span:hover {
    color: #333;
}

.quickuser {
    padding: 15px 15px 15px 50px;
    background-image: url("/images/cms/newicons/user.png");
    background-repeat: no-repeat;
    background-position: 5px center;
}

.loginuser:hover, .loginuser:active, .loginuser.active {
    border: 1px solid #4c83c3;
    color: #333;
}

.hide {
    display: none !important;
}

.confbox, .errbox, .noticebox {
    clear: both;
    margin: 5px auto !important;
    padding: 15px 0 !important;
    width: 100%;
    text-align: center;
}

.confbox {
    color: #090;
    border-top: 1px solid #090;
    border-bottom: 1px solid #090;
    background-color: #efe;
}

.errbox {
    color: #c00;
    border-top: 1px solid #c00;
    border-bottom: 1px solid #c00;
    background-color: #fee;
}

.noticebox {
    color: #333;
    border-top: 1px solid #cc0;
    border-bottom: 1px solid #cc0;
    background-color: #ffe;
}

#mainwrap {
    min-width: 760px;
    margin-top: 44px;
    position: relative;
    float: left;
    width: 100%;
}

#main {
    color: #505f7b;
    margin: 15px;
    padding: 0;
}

#showmenu #main {
    margin: 0 0 35px 100px;
    background: #fff;
    padding: 20px;
    position: relative;
    z-index: 2;
}

#maininner {
    padding: 5px 0;
    background: #fff;
}

#main p {
    padding: 6px 0;
    margin: 0;
}

.top h3 {
    color: #4c83c3;
    font-size: 220%;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

#leftnav {
    position: fixed;
    width: 100px;
    float: left;
    margin: 0;
    padding: 0;
    color: #999;
    font-size: 75%;
    text-align: center;
    list-style: none;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

#leftnav a {
    background-position: center top;
    background-repeat: no-repeat;
    clear: both;
    color: #999;
    display: block;
    float: left;
    margin: 8px 0;
    padding-top: 36px;
    width: 100px;
}

#leftnavinner {
    width: 118px;
    height: 100%;
    overflow-y: scroll;
    box-sizing: content-box;
    padding: 10px 17px 0 0;
}

#leftnav ul {
    margin: 0;
    padding: 0 0 0 0;
    list-style: none;
    width: 100%;
    float: left;
}

#leftnav li {
    display: inline;
    float: left;
    width: 100%;
}

#leftnav li.ui-sortable-helper {
    background: #fff;
    border: 1px solid #cca600;
}

#leftnav #leftnavspacer {
    height: 70px;
    float: left;
    clear: both;
    width: 100%;
}

#leftnav .navon {
    background: url("../../images/cms/leftnavon.png") no-repeat right 20px;
}

.menu_toplink {
    cursor: pointer;
}

#leftnav .menusearch, #leftnav .menu_toplink {
    display: none;
}

.navicon {
    float: left;
    margin-right: 5px;
    border: none;
}

.icon {
    border-radius: 4px;
}

.info {
    color: #999;
    line-height: 20px;
}

.odd {
    background-color: #f9f9fb;
}

.even {
    background-color: #fff;
}

.highlight {
    background-color: #f3f3f3;
}

.neworder {
    background-color: #fdfdde;
}

tr.odd.neworder {
    background-color: #fcfccd;
}

.redalert {
    background-color: #f8e8e8;
}

tr.odd.redalert {
    background-color: #f9e3e3;
}

.orangealert {
    background-color: #ffe1b5;
}

tr.odd.orangealert {
    background-color: #ffefd7;
}

td.text {
    color: #b6b3a9;
}

td.text1 {
    color: #999;
    font-weight: normal;
}

.readonly {
    border: none;
    background: #fff;
    cursor: default;
    text-align: center;
    margin: 0;
    padding: 0;
}

.pagination {

}

.pagination a, .pagination span {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    padding: 6px 12px;
}

.pagination span {
    border: 1px solid #eee;
    color: #ccc;
}

.pagination .curpage {
    background: #333;
    border: 1px solid #333;
    color: #fff;
    font-weight: bold;
}

/* Fading Tooltips */
#dhtmltooltip {
    position: absolute;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid #05438c;
    color: #05438c;
    visibility: hidden;
    z-index: 1000;
}

input, select, textarea {
    color: #666;
    border: 1px solid #bbb;
    border-radius: 3px;
    margin: 2px 0;
    padding: 4px 8px;
    background: #f9f9f9;
    background: -moz-linear-gradient(top, #e3e3e3 0%, #f9f9f9 15%, #f9f9f9 100%);
    background: -webkit-linear-gradient(top, #e3e3e3 0%, #f9f9f9 16%, #f9f9f9 100%);
    background: linear-gradient(to bottom, #e3e3e3 0%, #f9f9f9 16%, #f9f9f9 100%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 115%;
    max-width: 100%;
}

input[type="text"] {
    min-width: 40px;
}

input[type="text"]:read-only, input[type="number"]:read-only, textarea:read-only, select:disabled {
    opacity: 0.5;
    border-color: #eee;
    background: #f9f9f9;
}

.editstockpopup input[type="text"]:read-only,
.purchaseordertable input[type="text"]:read-only {
    opacity: 1;
    border: 0;
    background: none;
}

#pricemanagementform input[type="date"]:disabled {
    opacity: 0.5;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 115%;
}

.inputbutton, .cmsbutton {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background: #fff url("/images/cms/button-gradient.gif") repeat-x bottom left;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e9e9e9));
    box-shadow: 1px 1px 1px #ddd;
    cursor: pointer;
    color: #555;
    padding: 5px 10px;
    font-size: 115%;
}

.inputbutton:hover, .cmsbutton:hover {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    box-shadow: 1px 1px 1px #ccc;
    color: #000;
}

.inputbutton[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

a.inputbutton {
    display: inline-block;
    color: #555;
    font-weight: normal;
    font-size: 120%;
    padding: 5px 10px;
    margin: 2px 0;
}

.smallbutton, a.smallbutton {
    font-size: 90% !important;
    padding: 3px 6px;
}

.widebutton {
    width: 100%;
}

.ui-dialog-content .widebutton {
    margin-top: 10px;
    padding: 10px 20px;
}

.singlecheckbox {
    width: 16px;
    height: 16px;
}

.tinysinglecheckbox {
    width: 14px;
    height: 14px;
}

form.catupdate {
    margin: 0;
    padding: 0;
}

#alphabetnav {
    padding: 5px 0;
    float: right;
}

.toolbar {
    background: #f1f1f1;
    border-radius: 4px;
    padding: 3px 10px;
    box-shadow: 0 1px 0 #ccc;
    font-size: 100%;
    overflow: hidden;
    min-height: 34px;
}

.toolbar label {
    display: inline;
    font-size: 85%;
    color: #888;
}

.toolbar input, .toolbar select, .toolbar textarea, .toolbar button {
    padding: 3px;
    font-size: inherit;
}

.toolbar .inputbutton,
.toolbar .cmsbutton {
    padding: 3px 6px;
    margin: 2px 0;
    font-size: 95%;
}

.inputbutton.yes {
    color: white;
    font-weight: bold;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#71c455), to(#5c9b47));
}

.inputbutton.no {
    color: white;
    font-weight: bold;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d24949), to(#ad4040));
}

.draggable {
    cursor: move;
    background-image: url("/images/cms/icons/drag.gif");
    background-position: right 0 center;
    background-repeat: no-repeat;
}

label {
    cursor: pointer;
    text-wrap: nowrap;
}

label.postagecounty {
    width: 210px;
    display: inline-block;
    padding: 0 10px 0 0;
}

.boxwrap {
    background: #f9f9f9;
    padding: 5px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.big {
    font-size: 130%;
}

.xbig {
    font-size: 250%;
}

.bundlechild {
    margin-left: 25px;
}

.datepicker {
    background: #f9f9f9 url("/images/cms/icons/datepicker.gif") no-repeat center right;
    padding-right: 20px;
}

.columns-4 {
    column-count: 4;
}

/**** index/dashboard page ***/
.dashboard {
    float: left;
    width: 100%;
}

.dashsection {
    float: left;
    width: 100%;
    clear: both;
    position: relative;
}

.dashsection .hide {
    display: block !important;
    opacity: 0;
    position: absolute;
    top: 15px;
    right: 15px;
    transition: 1s opacity;
}

.dashsection:hover .hide {
    opacity: 1;
}

.dashboard h2 {
    font-size: 140%;
    padding: 0.6em 0 0 0;
    margin: 0;
    clear: both;
    cursor: move;
}

.dashboard .dashproduct {
    width: 12.5%;
    float: left;
    position: relative;
}

.dashboard .dashproduct img {
    max-width: 100%;
}

.dashboard .dashproduct span {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 6px 12px;
    border-radius: 20px;
    color: #4c83c3;
    border: 1px solid #4c83c3;
    text-align: center;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    background: #fff;
}

.dashboard .dashproduct a {
    display: block;
    text-align: center;
    padding: 10px;
    margin: 4px;
    border-radius: 4px;
    box-shadow: 0 0 2px #999;
}

.dashboard .dashitem {
    padding: 8px;
    margin: 4px;
    border-radius: 4px;
    box-shadow: 0 0 2px #999;
    color: #777;
    background: #fafafa;
    text-align: center;
    overflow: hidden;
    min-height: 60px;
    box-sizing: border-box;
}

.dashboard .dashitemxsmall {
    width: 25%;
    float: left;
}

.dashboard .dashitemsmall {
    width: 33.3%;
    float: left;
}

.dashboard .dashitemwide {
    width: 50%;
    float: left;
}

.dashboard .dashitemfull {
    width: 100%;
    float: left;
}

.dashboard .dashitemxhigh .dashitem {
    min-height: 138px;
}

.dashboard .dashitem.dashitemalert {
    background: #faf8ed;
    border: 5px solid #f9f2cc;
    padding: 3px;
}

.dashboard .dashitem .big {
    font-size: 200%;
    color: #333;
}

.dashboard .dashitemwide .big {
    font-size: 250%;
}

.dashboard .dashitemhigh .big {
    font-size: 350%;
    line-height: 70px;
}

.dashboard .dashitemfull .big {
    font-size: 450%;
    line-height: 100px;
}

.dashboard .dashitemxhigh .big {
    font-size: 500%;
    line-height: 100px;
}

.dashboard #piechart {
    height: 330px;
    margin: 4px 0;
    box-shadow: 0 0 2px #999;
    border-radius: 3px;
}

.bannerbox {
    margin: 5px 0;
    padding: 1%;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    width: 98%;
    float: left;
}

.bannerbox img {
    max-width: 300px;
    max-height: 100px;
}

.foldout, .cmsfoldout {
    clear: both;
    padding: 5px 0;
}

.foldouttoggle, .cmsfoldouttoggle {
    cursor: pointer;
    padding-left: 20px;
    background: url("/images/cms/icons/plus.svg") no-repeat center left / 16px;
}

.foldoutopen, .cmsfoldoutopen {
    background: url("/images/cms/icons/minus.svg") no-repeat center left / 16px;
}

.foldoutbox, .cmsfoldoutbox {
    display: none;
    margin-left: 20px;
}

.flashwrap {
    position: relative;
}

.flashcover {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
}

.flashcover a, .flashcover img {
    display: block;
    height: 100%;
    width: 100%;
    border: 0;
}

#quickaddavailable {
    border: 0;
    margin: 0;
    background: transparent;
}

/************** css for treeview plugin ***************/
.treeview, .treeview ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.treeview ul {
    margin-top: 4px;
}

.treeview .hitarea {
    background: url(/images/cms/treeview-default.gif) -64px -25px no-repeat;
    height: 16px;
    width: 16px;
    margin-left: -16px;
    float: left;
    cursor: pointer;
}

/* fix for IE6 */
* html .hitarea {
    display: inline;
    float: none;
}

.treeview li {
    margin: 0;
    padding: 2px 0 2px 16px;
}

.treeview a.selected {
    background-color: #eee;
}

#treecontrol {
    margin: 1em 0;
    display: none;
}

.treeview input {
    margin: 0 5px 0 0;
    background: none;
    border: none;
}

.treeview .hover {
    color: red;
    cursor: pointer;
}

.treeview li {
    background: url(/images/cms/treeview-default-line.gif) 0 0 no-repeat;
    font-weight: normal;
}

.treeview li.collapsable, .treeview li.expandable {
    background-position: 0 -176px;
}

.treeview li.collapsable {
    font-weight: bold;
}

.treeview .expandable-hitarea {
    background-position: -80px -3px;
}

.treeview li.last {
    background-position: 0 -1766px
}

.treeview li.lastCollapsable, .treeview li.lastExpandable {
    background-image: url(/images/cms/treeview-default.gif);
}

.treeview li.lastCollapsable {
    background-position: 0 -111px
}

.treeview li.lastExpandable {
    background-position: -32px -67px
}

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
    background-position: 0;
}

.ui-sortable-helper {
    background: #fff;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.ui-sortable-helper .variantform {
    display: none;
}

.variantform {
    border: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

.variantform .foldoutbox {
    margin-top: 15px;
}

.variantform .spacer {
    min-width: 60px;
}

.variantform table {
    margin-bottom: 10px;
}

.variantform table tr td {
    padding: 1px 10px;
}

.variantform table.mtovariantform tr td {
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}

.variantform table.mtovariantform tr td:first-child {
    padding-left: 10px;
}

.variantform:hover {
    border: 1px solid #999;
    box-shadow: 0 0 3px #bbb;
}

#product-inventory {
    position: relative;
}

#userinfo {
    position: absolute;
    right: 25px;
    top: 7px;
    color: #fff;
}

.tinyrow {
    font-size: 80%;
    margin-left: 10px;
}

.tinyrow input, .tinyrow select {
    font-size: 120% !important;
}

#graph {
    background: url("/images/cms/loading.gif") no-repeat center center;
}

.billingaddress {
    background: none repeat scroll 0 0 #fafafa;
    border: 1px solid #eee;
    margin: 2px 15px 3px 0;
    padding: 2px;
    height: 1em;
}

.red {
    color: #c00 !important;
}
.green {
    color: #090 !important;
}
.orange {
    color: #c90 !important;
}
.grey {
    color: #aaa !important;
}

.noteheader{
    line-height: 2em;
    background: rgba(0,0,0,0.02);
    padding: 3px 5px 5px 5px;
}
.note {
    border: 1px solid #dda;
    border-radius: 5px;
    background: #ffe;
    padding: 0;
    margin-bottom: 12px;
}
.note.admin {
    border: 1px solid #e8e0db;
    background: #fffcf9;
}
.note.task {
    border: 1px solid #ddaaaa;
    background: #ffeeee;
}
.note.completed {
    border: 1px solid #bbddaa;
    background: #f2ffee;
}
.note span {
    color: #999;
}
.note blockquote {
    padding: 0;
    margin: 20px 30px;
}
.note select {
    font-size: 85%;
}
.note .linkeditem {
    float: right;
    margin: 15px 15px 15px 0;
    background: #fff;
    color: #999;
    font-size: 85%;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 10px;
    line-height: 40px;
    box-shadow: 1px 1px rgba(0,0,0,0.1);
}
.note .linkeditem img {
    float: left;
    margin-right: 10px;
}
.note .linkeditem .delete {
    cursor: pointer;
    margin: 12px 0;
}
.note .subcomments {
    margin: 5px 12px 5px 30px;
    clear: both;
}
.note .subcomments .subcomment {
    background-color: rgba(255,255,255,0.5);
    padding: 15px 20px 5px 20px;
    margin: 5px 0 10px 20px;
    border-radius: 8px;
    border: 1px solid #EEE;
}
.note .subcomments .subcomment blockquote {
    margin: 10px 0;
}
.note .subcomments input[type=text] {
    width: 100%;
}

.checkboxtree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkboxtree ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 20px;
}

.ajaxload {
    padding-left: 25px;
    background-image: url("../../images/cms/ajax-loader.gif");
    background-repeat: no-repeat;
    background-position: left center;
}

.ajaxloading {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../images/cms/ajax-loader-grey.gif) no-repeat center center, rgba(0, 0, 0, 0.2);
    width: 99vw;
    height: 100vh;
    z-index: 1;
}

.absmiddle, .mid {
    vertical-align: middle;
    padding: 0;
    margin-top: -3px;
}

#ebaytab td {
    height: 25px;
}

.tablepadding td {
    padding: 3px 20px 3px 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.tinytext {
    padding: 2px 4px;
    font-size: 85%;
}

.numberfieldsmall {
    width: 100%;
    min-width: 30px;
    max-width: 55px;
    text-align: right;
}

.numberfieldmedium {
    width: 100%;
    max-width: 90px;
    text-align: right;
}

.numberfieldlarge {
    width: 100%;
    max-width: 105px;
    text-align: right;
}

.item_list .formblock {
    min-height: 150px;
}

.formblock .formblockinner {
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
    min-height: 65px;
    width: 100%;
    height: 100%;
}

.formblock .formblockinner:hover {
    border: 1px solid #ccc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.mceLayout {
    max-width: 100% !important;
}

.ui-widget-overlay {
    opacity: 0.3;
    filter: Alpha(Opacity=0.3);
}

.ui-dialog {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    max-width: 90%;
}

.ui-dialog .ui-dialog-content {
    overflow: auto;
}

.ui-dialog textarea, .ui-dialog input[type=text], .ui-dialog input[type=file] {
    width: 100%;
    box-sizing: border-box;
}

.sortable-placeholder {
    background: #fcfcfc;
    border: 2px dashed #ccc;
    margin: 0;
    padding: 0 !important;
    position: relative;
    float: left;
    z-index: 2;
}

.clear {
    clear: both;
}

/* jquery ui tweaks */
.ui-tabs-nav {
    font-size: 85%;
}

.ui-widget-header {
    border: none;
    border-bottom: 1px solid #ccc;
    background: #f6f6f6;
}

.ui-widget-header .ui-tabs-active {
    background: #fff;
    border: 1px solid #ccc;
}

.ui-widget-header .ui-tabs-active a {
    color: #000;
}

.shapeshift .featurebox, .shapeshift .uspbox {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-bottom: 10px;
}

.shapeshift .sortable-placeholder {
    margin-bottom: 16px;
}

.shapeshift .featurebox img {
    width: 100%;
    height: 100%;
}

.shapeshift .featurebox img.disabled {
    opacity: 0.1;
}

.shapeshift .uspbox {
    float: left;
    min-height: 50px;
}

.shapeshift .uspbox .uspboxtext {
    max-width: 678px;
    line-height: 30px;
    margin-left: 10px;
    float: left;
}

.shapeshift .featurebox .featureboxedit, .shapeshift .uspbox .uspboxedit {
    position: absolute;
    bottom: 8px;
    right: 20px;
    padding: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.7);
}

.form_edit {
    background: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 20px;
}

.dropzonestyle {
    background: #eee !important;
    border: 2px dashed #779fcd !important;
}

.dropzonestyle.dz-clickable .dz-message, .dropzonestyle.dz-clickable .dz-message * {
    font-size: 125%;
}

.dropzonestyle .dz-preview .dz-image {
    border-radius: 0 !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.numpad {
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
    float: left;
}

.numpad li {
    font-size: 26px;
    float: left;
    list-style: none;
    text-align: center;
    height: 50px;
    line-height: 50px;
    width: 31%;
    margin: 1%;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
}

.numpad li:hover {
    background: #f9f9fb;
    border: 1px solid #4c83c3;
}

.numpad li.numextra {
    font-size: 120%;
    background: #eee;
}

#input-number {
    width: 100%;
    font-size: 200%;
    text-align: right;
}

.relative {
    position: relative;
}
.returnrow {
    display: none;
}
.returnblock {
    display: none;
    position: absolute;
    text-align: left;
    background: #FFF;
    right: 0;
    border: 1px solid #CCC;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 5px;
    z-index: 2;
}
.returnblock .returntext {
    font-size: 85%;
    min-width: 70px;
    display: inline-block;
    line-height: 2.4em;
}
.returnblock .close {
    float: right;
    font-size: 200%;
    cursor: pointer;
    color: #666;
    transform: translateY(-6px);
}
strike, .strike {
    text-decoration: line-through;
    opacity: 0.6;
}

strike[title], span[title] {
    cursor: help;
}

.tag {
    display: inline-block;
    border-radius: 100px;
    border: 1px solid #eee;
    padding: 0.1em 1em;
    margin: 0.2em;
    background: #f9f9f9;
}

a.tag:hover {
    border: 1px solid #ccc;
    background: #f3f3f3;
}

.fullwidth {
    width: 100% !important;
}

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

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* Made to order/Variant selection popup */
.ui-dialog .product-variants-list {
    padding: 0;
    margin: 0;
}

.ui-dialog .product-variants-list label, .ui-dialog .product-options-list label {
    margin: 0;
    padding: 15px 5px;
    display: block;
    width: 100%;
    font-size: 107%;
    color: #505f7b;
    float: left;
}

.ui-dialog .product-variants-list label.supplierprods {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ui-dialog .product-variants-list form, .ui-dialog .product-options-list form label {
    border-bottom: 1px solid #eee;
    float: left;
    width: 100%;
}

.ui-dialog .product-variants-list form:last-child {
    border: 0;
}

.ui-dialog .product-variants-list label strong, .ui-dialog .product-options-list label strong {
    font-size: inherit;
}

.ui-dialog .product-options-list label input {
    position: absolute;
    right: 99999px;
    top: 0;
}

.ui-dialog .product-options-list label.selected:not(.buttonlabel) {
    background: #eee;
}

.ui-dialog .product-options-list p {
    margin: 0;
    font-size: 107%;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    position: relative;
}

.ui-dialog .product-options-list p a.option-back {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 85%;
}

.ui-dialog .product-options-list .optiongroup {
    display: none;
}

.ui-dialog .ui-dialog-content.dialog_prod-options {
    max-height: 600px !important;
    overflow: auto !important;
}

.ui-dialog .ui-dialog-content#dialog_adddata select {
    width: 100%;
}

.ui-dialog .product-options-list .custom-text-label {
    display: flex;
    flex-flow: row nowrap;
    float: left;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.ui-dialog .product-options-list .custom-text-label label.buttonlabel {
    padding: 0;
    width: auto;
    display: inline-block;
    border: 0;
}

.ui-dialog .product-options-list .custom-text-label input {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 5px;
}

.ui-dialog .product-options-list .custom-text-label .inputbutton {
    margin: 0;
}

.ui-dialog .product-options-list a.insert-custom-row {
    cursor: pointer;
    display: block;
    float: left;
    margin: 10px 0 0;
}

/* PO supplier product popup */
.ui-dialog .supplier-products-list {
    padding: 0;
    margin: 0;
    color: #505f7b;
}

.ui-dialog .supplier-products-list table tr td {
    border-bottom: 1px solid #eee;
    padding: 15px 5px;
    font-size: 107%;
    word-break: break-word;
}

.ui-dialog .supplier-products-list table tr td input[type=text] {
    width: auto;
    margin-right: 10px;
}

/* PO allocated orders popup */
.ui-dialog .allocated-orders-list {
    padding: 0;
    margin: 0;
}

.ui-dialog .allocated-orders-list table tr:first-child td {
    padding: 5px;
}

.ui-dialog .allocated-orders-list table tr td {
    border-bottom: 1px solid #eee;
    padding: 15px 5px;
    color: #505f7b;
    font-size: 107%;
}

.ui-dialog .allocated-orders-list table tr td input[type=text] {
    width: auto;
    margin-right: 10px;
}

.productimage-list {
    width: 100%;
    float: left;
}

.productimage-list .draggable {
    float: left;
    margin: 10px;
    padding: 0 10px 10px 10px;
    width: 200px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    height: 305px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.productimage-highlight {
    float: left;
    width: calc(100% + 20px);
    padding: 5px 10px;
    text-align: center;
    margin: 0 0 5px 0;
    position: relative;
    left: -10px;
}

.productimage-highlight-green {
    background: #55a74c;
    color: #fff;
}

.productimage-highlight-amber {
    background: #c45e2e;
    color: #fff;
}

.productimage-list img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
}

.productimage-uploaded {
    font-size: 120%;
    color: #505f7b;
}

span.character-count-ok, span.character-count-perfect, span.character-count-warning {
    display: inline;
    padding: .2em .6em .3em;
    font-weight: bold;
    font-size: 80%;
    line-height: 1;
    color: #666;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 1em;
    background-color: #fff;
    bottom: -10px;
    right: 0;
    position: absolute;
    border: 1px solid #bbb;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

span.character-count-warning {
    color: #b77;
    border: 1px solid #b77;
}

span.character-count-perfect {
    color: #7b7;
    border: 1px solid #7b7;
}

span.character-count-hidden {
    display: none;
}

.meta-panel label {
    display: block;
    position: relative;
}

/* SERP preview tool */
.serp-preview {
    margin: 30px 0;
    position: relative;
}

.serp-preview #serp-url .serp-arrow {
    border-bottom-color: rgb(0, 102, 33);
    border-bottom-style: solid;
    border-bottom-width: 0;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: solid;
    border-left-width: 4px;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: solid;
    border-right-width: 4px;
    border-top-color: rgb(0, 102, 33);
    border-top-style: solid;
    border-top-width: 5px;
    color: rgb(128, 128, 128);
    cursor: default;
    font-family: arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 0;
    position: absolute;
    line-height: 27px;
    margin-left: 3px;
    margin-top: 6px;
    text-align: center;
    user-select: none;
    visibility: visible;
    white-space: nowrap;
    width: 0;
}

.serp-preview #serp-title {
    color: rgb(26, 13, 171);
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 21.6px;
    text-align: left;
    text-decoration: none;
    visibility: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.serp-preview #serp-url {
    color: rgb(0, 102, 33);
    font-family: arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 16px;
    text-align: left;
    visibility: visible;
    white-space: nowrap;
}

#modulareditor .serp-preview #serp-url {
    white-space: normal;
}

.serp-preview #serp-description {
    color: rgb(84, 84, 84);
    font-family: arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 18.2px;
    text-align: left;
    visibility: visible;
    word-wrap: break-word;
}

.inputbutton.hideoptionvalues, .inputbutton.getoptionvalues {
    padding: 5px 20px;
}

.statusbanner {
    font-size: 142%;
    padding: 10px;
    margin-bottom: 15px;
    color: #fff !important;
}

.statusbanner.green {
    background: #47a947;
}

.statusbanner.blue {
    background: #678ec0;
}

.statusbanner.orange {
    background: #ed9520;
}

.statusbanner.red {
    background: #e85b1b;
}

.statusbanner.yellow {
    background: #fbdd1d;
}

.statusbanner.grey {
    background: #aaa;
}

.statusbanner.purple {
    background: #bb80cf;
}

.statusbanner.white {
    background: #f6f6f6;
    color: #ccc !important;
}

.label {
    display: inline;
    padding: .2em .6em;
    font-size: 85%;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    margin: 0 0.2em;
    background-color: #999;
}
a.label:hover {
    background-color: #333;
    color: #FFF !important;
}
.label.red {
    background-color: #dd5e5e;
}
.label.green {
    background-color: #74bb50;
}
.storeselect, .frontendselect {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
}

#maininner .frontendselect {
    position: relative;
    float: right;
    font-size: 80%;
    top: unset;
    right: unset;
    margin: 7px 15px !important;
}

.meta-panel {
    padding: 20px;
    border: 1px solid rgb(220, 220, 220);
    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px;
}

.inline-label {
    margin-right: 10px;
}

.tabs {
    opacity: 0;
    transition: opacity 0.2s;
}
.ui-tabs {
    opacity: 1;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ui-tabs-vertical {
    width: 100%;
    display: flex;
}

.ui-tabs-vertical > .ui-tabs-nav {
    padding-right: 0;
    flex-basis: 15%;
    border-right: 1px solid #ccc;
}

.ui-tabs-vertical > .ui-tabs-nav > li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    border-radius: 3px 0 0 3px !important;
}

.ui-tabs-vertical > .ui-tabs-nav > li a {
    display: block;
    width: 100%;
    padding: 1em !important;
}

.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
    padding: 0;
    margin: 0;
    right: -1px;
}

.ui-tabs-vertical > .ui-tabs-panel {
    flex-basis: 85%;
    padding: 0.5em 2em;
}

/* purchase order screen */
.po-product-list-container .po-table-row {
    display: flex;
    width: 100%;
    clear: both;
}

.po-product-list-container .po-table-row > div {
    padding: 4px;
    width: 5%;
    overflow: hidden;
}

.po-product-list-container .po-table-row div.medium {
    width: 10%;
}

.po-product-list-container .po-table-row div.large {
    width: 25%;
}

.po-product-list-container .po-table-row div.large span {
    display: contents;
}

.po-product-list-container .po-table-row div.align-center {
    text-align: center;
}

.po-product-list-container .po-table-row div.align-left {
    justify-content: flex-start;
}

.po-product-list-container .po-table-row div.align-right {
    justify-content: flex-end;
}

.delete-product-line {
    border: none;
    background: none;
    margin: 0 10px;
}

.ui-slider-range-min {
    background: #ddd;
}

.mini-table {
    width: 100%;
    font-size: 85%;
}

.mini-table tr:nth-child(even) {
    background: #f3f3f3;
}

.mini-table td, .mini-table th {
    padding: 5px;
}
.mini-table th {
    background: #FFF;
    border-bottom: 1px solid #CCC;
}

.reportindex {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reportindex ul {
    margin: 0;
    padding: 0;
}

.reportindex li {
    display: inline-block;
    padding: 0 0 1.2em 0;
    width: 20%;
    text-align: center;
}

.reportindex li a {
    display: block;
    padding: 65px 15px 15px 15px;
    background-repeat: no-repeat;
    background-position: 50% 30%;
    opacity: 0.4;
    -ms-filter: "alpha(opacity=40)";
    filter: alpha(opacity=40);
}

.reportindex li a:hover {
    opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    filter: alpha(opacity=100);
}

.groupheading {
    position: relative;
    padding: 50px 0 0 5px;
    font-weight: bold;
    font-size: 85%;
    border-bottom: 1px solid #ddd;
    background: rgb(249, 249, 249);
    background: linear-gradient(0deg, rgba(249, 249, 249, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

.groupheading span {
    background: #fff;
    padding: 5px 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    bottom: -1px;
    position: absolute;
    border-radius: 3px 3px 0 0;
}

.divTable {
    display: table;
    width: auto;
}

.divTable .divTableRow {
    display: table-row;
}

.divTable .divTableRow .divTableCell {
    border-bottom: 2px solid #eee;
}

.divTable .divTableRow:hover .divTableCell {
    background: #fdfdde;
}

.divTable .divTableRow.activerow .divTableCell {
    background: #fcfccd;
}

.divTableHead .divTableCell {
    cursor: pointer;
}

.divTableHead .divTableHead {
    text-align: center;
}

.divTableHead .divTableCell.ASC {
    background: url('/images/cms/icons/collapse.gif') no-repeat 5px center;
    padding: 8px 3px 8px 25px;
}

.divTableHead .divTableCell.DESC {
    background: url('/images/cms/icons/expand.gif') no-repeat 5px center;
    padding: 8px 3px 8px 25px;
}

.divTableHead .divTableCell .right-draggable {
    cursor: col-resize !important;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 5px;
    border-right: 1px solid #999;
}

.divTableCell {
    display: table-cell;
    padding: 3px;
    position: relative;
}

.divTableCell input {
    width: 100%;
}

.divTableHeading {
    display: table-header-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

#bulkUpdateFrame {
    width: 100%;
    height: 85vh;
    border: 2px solid #eee;
}

#ajax_bulkupdate_load {
    padding: 10px;
    border: none;
    box-shadow: none;
}

#ajax_bulkupdate_load input, #ajax_bulkupdate_load select, #ajax_bulkupdate_load textarea {
    margin: 0;
    vertical-align: middle;
}

#ajax_bulkupdate_load textarea {
    height: 1.8em;
}

#ajax_bulkupdate_load .tabList .tab {
    display: inline-block;
}

#ajax_bulkupdate_load #page_prev, #ajax_bulkupdate_load #page_next {
    display: inline-block;
    margin: 2px;
    padding: 4px;
    background: #eee;
    border: 1px solid #aaa;
    cursor: pointer;
}

#ajax_bulkupdate_load .tabList {
    background: #eee;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#ajax_bulkupdate_load .tabList .tab:hover {
    background: #ededed;
    font-weight: normal;
    color: #2b2b2b;
    cursor: pointer;
}

#ajax_bulkupdate_load .tabList .tab a:hover {
    color: #333;
}

#ajax_bulkupdate_load .download {
    display: block;
    margin: 8px 0;
}

#ajax_bulkupdate_load form.filter {
    display: block;
    width: 100%;
    margin: 11px 0;
}

#ajax_bulkupdate_load form.filter .filter {
    max-width: 200px;
    margin-right: 10px;
}

#ajax_bulkupdate_body {
    margin-top: 37px;
}

#ajax_bulkupdate_body .bulkdupdatedownload {
    display: inline-block;
}

#ajax_bulkupdate_body .bulkdupdatedownload.import {
    float: right;
}

#ajax_bulkupdate_body .importCommit {
    width: auto;
    display: inline-block;
    float: right;
    margin: 5px 0 10px 0;
}

.notes-container {
    width: 100%;
    clear: both;
}

.stocktakeqty, .goodsinqty, .newtransferqty {
    width: 80px;
    max-width: 100%;
    font-weight: bold;
    font-size: 130%;
    padding: 3px 8px;
    text-align: center;
}

.goodsincartons {
    width: 50px;
    color: #999999;
    border-color: #e3e3e3;
    background: #f7f7f7;
    text-align: center;
}

.stocktakeqty.focus, .goodsinqty.focus, .newtransferqty.focus, .goodsincartons.focus {
    color: #ca0;
    border-color: #ca0;
}

.stocktakeqty.error, .goodsinqty.error, .newtransferqty.error {
    color: #c00;
    border-color: #c00;
}
input[type="date"] {
    width: 150px;
    max-width: 100%;
}
input.tinytext[type="date"], .toolbar input[type="date"]{
    width: 115px;
    max-width: 100%;
}
a.reveal {
    cursor: pointer;
}

.error {
    border-color: #c00;
}
.requirederror {
    color: #c00;
    border-color: #c00;
}

.flash {
    background: #fffff4;
    animation: flash 0.5s 3;
}

.flash.odd {
    background: #fbfbee;
}
.authpin {
    text-align: center;
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
    width: 60px !important;
}
.hidden {
    display: none;
}
.visible {
    display: inherit;
}
.swatchimage-container {
    display: flex;
    flex-flow: row wrap;
}

.swatchimage {
    background-position: center 10px !important;
    background-repeat: no-repeat !important;
    background-size: 115px !important;
    float: left !important;
    width: 33% !important;
    text-align: center;
    margin-top: 8px !important;
    padding: 135px 0 10px 0 !important;
    font-size: 90% !important;
}

.swatchimage strong {
    width: calc(100% - 20px);
    display: block;
    margin: 0 10px;
}

.swatchassigncell {
    padding: 0;
}
.swatchassigncell label {
    display: inline-block;
    width: 100%;
    padding: 18px 12px;
}

#overlaypreview {
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px dashed #ccc;
}

.overlay {
    z-index: 1;
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 90%;
}

.overlay.overlay_topright {
    left: auto;
    right: 10px;
}

.overlay.overlay_bottomright {
    top: auto;
    bottom: 10px;
    left: auto;
    right: 10px;
}

.overlay.overlay_bottomleft {
    top: auto;
    bottom: 10px;
}

.overlay.overlay_belowproduct {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: auto;
    text-align: center;
}

.overlay .overlaytext {
    padding: 0.2em 0.9em;
    line-height: 1.2em;
    border-radius: 20px;
    text-align: center;
}

.overlay .overlaytext.overlaytextsvg {
    padding: 0;
}

.clipboard {
    cursor: pointer;
    background: #eee;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 75%;
    color: #888;
}

/* mini tabs */
.minitabs {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: none !important;
}
.minitabs .ui-tabs-nav {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
.minitabs .ui-tabs-panel {
    padding: 0 !important;
}
.minitabs .ui-tabs-panel > input {
    margin-top: 0;
}
.minitabs .ui-tabs-anchor {
    margin: 0 !important;
    padding: 5px 10px !important;
    font-size: 90% !important;
}
.minitabs .ui-tabs-anchor:hover {
    cursor: pointer;
}

#accessprivileges {
    column-count: 4;
}

select option:disabled {
    color: #ccc;
}

.growl-notification {
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
}

#showmenu .growl-notification {
    top: 60px !important;
}

.growl-notification__title {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
}

.growl-notification__body {
    padding-right: 45px;
}

.growl-notification__close-icon {
    fill: #fff;
    height: 20px;
    width: 20px;
    margin: 10px;
    background-image: url("/images/cms/close_alert.png");
}

/* tweaks to jquery ui */
.ui-front:not(.ui-widget-overlay) {
    z-index: 1001 !important;
}

.ui-state-active .grey {
    color: #ddd !important;
}

form.grey {
    background: #f9f9f9;
    float: left;
    width: 100%;
}
form.grey span {
    color: #aaa !important;
}

/* sortable */
table[data-sortable] {
    border-collapse: collapse;
    border-spacing: 0;
}

table[data-sortable] th {
    text-align: left;
    color: #b6b3a9;
    font-weight: normal;
}

table[data-sortable] th {
    text-align: left;
    color: #b6b3a9;
    font-weight: normal;
}

table[data-sortable] th:hover:not([data-sortable="false"]), table[data-sortable] th[data-sorted="true"] {
    color: #888;
}

table[data-sortable] th:not([data-sortable="false"]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    cursor: pointer;
}

table[data-sortable] th:after {
    content: "";
    visibility: hidden;
    display: inline-block;
    vertical-align: inherit;
    height: 0;
    width: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    margin-left: 5px;
}

table[data-sortable] th[data-sorted="true"]:after {
    visibility: visible;
}

table[data-sortable] th[data-sorted-direction="descending"]:after {
    border-top-color: inherit;
    margin-top: 4px;
}

table[data-sortable] th[data-sorted-direction="ascending"]:after {
    border-bottom-color: inherit;
    margin-top: -8px;
}

table[data-sortable] tbody tr:nth-child(2n) {
    background: #fff;
}

table[data-sortable] tbody tr:nth-child(2n+1) {
    background: #f9f9fb;
}

/* lorry loader scheduling calendar */
#journey-planner table {
    margin: 10px auto;
    table-layout: fixed;
    border: 1px solid #ccc;
}
#journey-planner td {
    width: 14%;
    border-collapse: collapse;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    vertical-align: top;
}
#journey-planner .days-header td {
    background-color: #f1f1f1;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 120%;
    font-weight: bold;
}
#journey-planner td ul {
    list-style: none;
    padding: 0;
}
#journey-planner td ul li {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
}
#journey-planner td ul li span:last-child {
    position: relative;
    white-space: nowrap;
}
#journey-planner td ul li span img {
    margin: 0 2px;
}
#journey-planner td ul li span img:last-child {
    margin-right: 0;
}
#journey-planner .dateToggles {
    display: flex;
    justify-content: space-between;
}
#journey-planner tr.days-detail td .date-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* lorry loader day detail popup */
#journey-detail {
    padding: 10px 0;
}
#journey-detail table {
    width: 100%;
    table-layout: fixed;
}
#journey-detail table td.timeslot {
    padding: 6px;
    background: #ccc;
}
#journey-detail table.timeslot-table {
    margin: 10px 0;
}
#journey-detail table.timeslot-table td[title] {
    cursor: pointer;
}
#journey-detail table.timeslot-table form {
    display: inline-block;
}
#journey-detail table.timeslot-table button {
    margin-right: 6px;
}
#journey-detail .journey-sortable-placeholder td {
    background: #fcfcfc;
    border: 2px dashed #ccc;
    border-left: 0;
    border-right: 0;
}
#journey-detail .journey-sortable-placeholder td:first-child {
    border-left: 2px dashed #ccc;
}
#journey-detail .journey-sortable-placeholder td:last-child {
    border-right: 2px dashed #ccc;
}
#journey-detail .lorry-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.indent {
    padding: 0 15px;
    margin: 5px 0;
    border-left: 1px dashed #CCC;
}
.aligntop {
    vertical-align: top;
}

.payment-status {
    height: 78px;
    font-size: 140%;
    margin: 0.2em 0;
    padding: 5px 15px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}
.payment-status.red {
    background-color: #e85b1b;
    color: #FFF !important;
}
.payment-status.orange {
    background-color: #ed9520;
    color: #FFF !important;
}
.payment-status.green {
    background-color: #47a947;
    color: #FFF !important;
}
.allocatestock.red {
    background-color: #eae1dd;
}
.allocatestock.green {
    background-color: #dfeadf;
}
.ui-dialog .ui-dialog-buttonpane, .ui-dialog-buttonset {
    padding: 0 5px;
    margin: 0;
    width: 100%;
    display: flex;
}
.ui-dialog .ui-dialog-buttonpane button {
    flex-basis: 50%;
    margin: 10px 5px;
}
.third {
    width: 33% !important;
}
.twothirds {
    width: 67% !important;
}
.variantlist {
    color: #999;
}
.tabs li.ui-tab.draggable a {
    cursor: ew-resize !important;
}
.tabs.ui-tabs-vertical li.ui-tab.draggable a {
    cursor: ns-resize !important;
}
.td-divider {
    border-right: 1px solid #DDD;
}

#pricemanagementform label.grey {
    pointer-events: none;
}

#pricemanagementform .pricemanagementform-container > div {
    display: none;
}

#pricemanagementform .pricemanagementform-container > div:first-child {
    display: block;
}

#pricemanagementform .pricemanagementform-container .btn-group {
    display: flex;
    justify-content: space-between;
}

.qtytoorder {
    min-width: 4em;
}
.directory {
	padding: 10px 10px 10px 35px;
	margin: 5px;
	display: inline-block;
	border: 1px solid #DDD;
	border-radius: 4px;
	background-color: #FFF;
	background-image: url("/images/cms/icons/nochild.gif");
	background-repeat: no-repeat;
	background-position: 10px center;
}
.directory.parent {
	background-image: url("/images/cms/icons/back.gif");
}
.directory.new {
	background-image: url("/images/cms/icons/add.gif");
}
.directory.delete {
	background-image: url("/images/cms/icons/delete.gif");
}
#filebrowser_wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
#filebrowser {
    background-color: #f8f8f8;
}
#filebrowser #view {
    text-align: right;
    float: right;
    padding: 8px 12px;
}
#filebrowser h1 {
    font-weight: bold;
    font-size: 12px;
    position: relative;
    color: #484848;
    padding: 12px 19px 12px 12px;
    background: #f8f8f8;
    letter-spacing: 0.3px;
}
#filebrowser .file {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    border: 1px solid #DDD;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333;
    font-size: 85%;
    transition: background-color 0.5s ease;
}
#filebrowser .file:hover {
    background-color: #EEE;
}
#filebrowser .file .name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#filebrowser.grid .file {
    width: calc(20% - 10px);
    text-align: center;
}
#filebrowser.grid .file .name {
    margin: 1em 0 0 0;
}
#filebrowser.grid .file .filesize {
    display: none;
}
#filebrowser.grid .file .date {
    display: none;
}
#filebrowser.list .file {
    clear: left;
    display: flex;
    align-items: center;
    margin-top: 0;
    width: 100%;
}
#filebrowser.list .file .thumb {
    float: left;
    width: 10%;
    margin-right: 2%;
    text-align: center;
}
#filebrowser.list .file .thumb img {
    width: auto;
    max-height: 40px;
    max-width: 100%;
}
#filebrowser.list .file .name {
    float: left;
    width: 60%;
}
#filebrowser.list .file .filesize {
    float: left;
    text-align: center;
    width: 8%;
}
#filebrowser.list .file .date {
    float: left;
    text-align: center;
    width: 20%;
}
#returncontentsform select[id^="stocklocation"] {
    min-width: 250px;
}

input[type="color"] {
    width: 100%;
    max-width: 50px;
    padding: revert;
}

.divideror {
	position: relative;
	display: block;
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #999;
	clear: both;
}

.divideror > span {
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	padding: 0 10px;
	background: #fff;
}

@keyframes flash {
    0% {
        background: #fff;
    }
    50% {
        background: #fcfccd;
    }
    100% {
        background: #fff;
    }
}

/* media queries */
@media only screen and (max-width: 1200px) {
    .po-product-list-container .po-table-row div {
        font-size: 85%;
        width: 0;
        flex-grow: 1;
        flex-basis: 0;
    }

    .po-product-list-container .po-table-row div input[type=text] {
        width: 100% !important;
    }

    .po-product-list-container .po-table-row .inputbutton {
        font-size: 85%;
    }

    #accessprivileges {
        column-count: 3;
    }

    #pricemanagementwrapper {
        overflow-x: scroll;
    }

    #pricemanagementtable td {
        min-width: 150px;
    }

    #journey-planner td ul li  {
        flex-wrap: wrap;
    }
    #journey-planner td ul li span:last-child {
        margin-top: 6px;
        display: block;
        text-align: right;
    }
}

@media only screen and (max-width: 1060px) {
    #leftnav {
        display: none;
    }

    #logo {
        width: 44px;
        padding: 44px 0 0 0;
        box-shadow: none;
    }

    #showmenu {
        background: #fff;
    }

    #showmenu #main, #main {
        margin: 20px;
    }

    #quicksearch {
        transition: all 0.3s;
        right: -500px;
    }

    #headernavinner {
        margin-left: 60px;
    }

    #headernavinner ul {
        width: 100%;
    }

    #headernavinner ul li {
        flex-basis: 10%;
    }

    #help, #helptoggle {
        display: none;
    }

    .menuright {
        right: 0;
    }

    .third {
        width: 100% !important;
    }
    .twothirds {
        width: 100% !important;
    }
    .dashboard .dashitemxsmall {
        width: 50%;
    }
    .dashboard .dashitemhigh .big {
        font-size: 250%;
    }
    .dashboard .dashitemxhigh .big {
        font-size: 350%;
    }
}

@media only screen and (min-width: 1060px) {
    #helptoggle {
        display: block;
        background-image: url("/images/cms/help.png");
        background-repeat: no-repeat;
        background-position: center;
        height: 32px;
        width: 32px;
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        cursor: help;
    }

    #helptoggle.close {
        background-image: url("/images/cms/close.png");
    }

    #help {
        width: 340px;
        padding: 20px 30px 30px 30px;
        margin: 0;
        color: #999;
        background: #fff;
        box-shadow: 0 2px 4px;
        border-radius: 5px;
        position: fixed;
        bottom: 20px;
        right: -360px;
        z-index: 998;
        transition: all 0.3s;
        max-height: 75vh;
        overflow: auto;
    }

    .ui-tooltip {
        color: #999;
        background: #fff;
        font-size: 120%;
        box-shadow: 0 2px 4px;
        border-radius: 5px;
    }

    #help .inner {
        padding-bottom: 15px;
    }

    #help label {
        font-size: 75%;
        margin-top: 5px;
        float: left;
        width: 100%;
    }

    #help input {
        width: 94%;
    }

    #help.visible {
        right: 20px;
    }

    #help h5 {
        margin: 0 0 10px 0;
        font-size: 160%;
        color: #777;
    }

    .help {
        position: absolute;
        background-image: url("/images/cms/help.png");
        background-repeat: no-repeat;
        background-position: center;
        width: 20px;
        height: 20px;
        background-size: 20px;
        z-index: 997;
        cursor: help;
        transform: translate(-10px, -10px);
    }
}

@media only print {
    #showmenu {
        background: #fff;
    }

    #showmenu #main, #main {
        margin: 10px;
    }

    #leftnav, #quicksearch, #headernav {
        display: none;
    }
}