html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,
pre,a, input, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small,
strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label,
legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.resetStyle {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    font: inherit;
    vertical-align: baseline;
}

/* Navigation (top bar) )in admin area */
.navigation2 {
    display: flex;
    position: fixed;
    top: 0;
    background-color: #333;
    width: 100%;
    height: 58px;
    justify-content: flex-start;
    align-items: center;
    border-top: 3px solid #4484ce;
    box-sizing: content-box;
}

.navigation2 .logo {
    display: flex;
    justify-content: center;
    width: 220px;
}

.navigation2 .logo img {
    max-height: 58px;
}

.navigation2 .menu {
    display: flex;
    justify-content: space-between;
    flex: 1; /* Use whol space available*/
}

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
    display: none;
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
    content: "";
    display: table;
}
.ui-helper-clearfix:after {
    clear: both;
}
.ui-helper-clearfix {
    zoom: 1;
}
.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter:Alpha(Opacity=0);
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-resizable {
    position: relative;
}
.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
    display: none;
}
.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}
.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}
.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}
.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}
.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}
.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border:1px dotted black;
}
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    zoom: 1;
}
.ui-accordion .ui-accordion-icons {
    padding-left: 2em;
}
.ui-accordion .ui-accordion-noicons {
    padding-left: .5em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
    padding-left: 2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
    overflow: auto;
    zoom: 1;
}
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

/* workarounds */
* html .ui-autocomplete {
    width:1px;
} /* without this, the menu expands to 100% in IE6 */
.ui-button {
    display: inline-block;
    position: relative;
    padding: 4px 10px;
    margin-right: .1em;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible;
} /* the overflow property removes extra width in IE */
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active {
    text-decoration: none;
}
.ui-button-icon-only {
    width: 2.2em;
} /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only {
    width: 2.4em;
} /* button elements seem to need a little more width */
.ui-button-icons-only {
    width: 3.4em;
}
button.ui-button-icons-only {
    width: 3.7em;
}

/*button text element */
.ui-button .ui-button-text {
    display: block;
    line-height: 1.4;
}
.ui-button-text-only .ui-button-text {
    padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
    padding: .4em 1em;
}

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
    left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

/*button sets*/
.ui-buttonset {
    margin-right: 7px;
}
.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -.3em;
    border-radius: 0px;
}
.ui-buttonset .ui-button.ui-state-active {
    background: rgb(122,188,255);
    background: -moz-linear-gradient(top,   rgba(0,129,255,1) 0%,rgba(0,117,255,1) 44%,rgba(0,78,169,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,129,255,1,1)), color-stop(44%,rgba(0,117,255,1)), color-stop(100%,rgba(0,78,169,1)));
    background: -webkit-linear-gradient(top,   rgba(0,129,255,1) 0%,rgba(0,117,255,1) 44%,rgba(0,78,169,1) 100%);
    background: -o-linear-gradient(top,   rgba(0,129,255,1) 0%,rgba(0,117,255,1) 44%,rgba(0,78,169,1) 100%);
    background: -ms-linear-gradient(top,   rgba(0,129,255,1) 0%,rgba(0,117,255,1) 44%,rgba(0,78,169,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,129,255,1) 0%,rgba(0,117,255,1) 44%,rgba(0,78,169,1) 100%);
    border-color: rgba(0,78,169,1);
    color: white;
}
.ui-buttonset .ui-button:first-of-type {
    border-top-left-radius: 5px;
}
.ui-buttonset .ui-button:last-of-type {
    border-top-right-radius: 5px;
}

/* workarounds */
button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
} /* reset extra padding in Firefox */
.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}
.ui-datepicker .ui-datepicker-header {
    position:relative;
    padding:.2em 0;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position:absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
    left:2px;
}
.ui-datepicker .ui-datepicker-next {
    right:2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
    left:1px;
}
.ui-datepicker .ui-datepicker-next-hover {
    right:1px;
}
.ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -8px;
}
.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}
.ui-datepicker .ui-datepicker-next span.ui-icon {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid black;
}
.ui-datepicker .ui-datepicker-next-hover span.ui-icon {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid white;
}
.ui-datepicker .ui-datepicker-prev span.ui-icon {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid black;
}
.ui-datepicker .ui-datepicker-prev-hover span.ui-icon {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid white;
}
.ui-dialog .ui-dialog-titlebar-close span.ui-icon {
    font-family: 'printjob-icons';
    display: inline;
}
.ui-dialog .ui-dialog-titlebar-close span.ui-icon:before {
    content: "\e609\00a0\00a0";
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
}
.ui-datepicker select.ui-datepicker-month-year {
    width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%;
}
.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin:0 0 .4em;
}
.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    border: 0;
}
.ui-datepicker td {
    border: 0;
    padding: 1px;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding:0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width:auto;
    overflow:visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float:left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width:auto;
}
.ui-datepicker-multi .ui-datepicker-group {
    float:left;
}
.ui-datepicker-multi .ui-datepicker-group table {
    width:95%;
    margin:0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
    width:50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width:33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width:25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width:0;
}
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width:0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear:left;
}
.ui-datepicker-row-break {
    clear:both;
    width:100%;
    font-size:0em;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear:right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
    float:right;
}
.ui-datepicker-rtl .ui-datepicker-group {
    float:right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
    border-right-width:0;
    border-left-width:1px;
}
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width:0;
    border-left-width:1px;
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}
.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    width: 300px;
    overflow: hidden;
    background-color: white;
}
.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
}
.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 16px .1em 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: #555;
    text-decoration: none;
    border-radius: 12px 12px 12px 12px;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 20px;
    margin-top: -10px;
    top: 30px;
    height: 21px;
    width: 21px;
}

.ui-dialog .ui-dialog-titlebar-close span {
    display: block;
    margin: 0px;
    background: none !important ;
}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
    color: #777
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: 1rem;
    background: none;
    overflow: auto;
    zoom: 1;
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}
.ui-dialog .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: 3px;
    bottom: 3px;
}
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    outline: none;
}
.ui-menu .ui-menu {
    margin-top: -3px;
    position: absolute;
}
.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom: 1;
    width: 100%;
}
.ui-menu .ui-menu-divider {
    margin: 5px -2px 5px -2px;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    zoom: 1;
    font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

.ui-menu .ui-state-disabled {
    font-weight: normal;
    margin: .4em 0 .2em;
    line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
    cursor: default;
}

/* icon support */
.ui-menu-icons {
    position: relative;
}
.ui-menu-icons .ui-menu-item a {
    position: relative;
    padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
    position: absolute;
    top: .2em;
    left: .2em;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
    position: static;
    float: right;
}
.ui-progressbar {
    height:2em;
    text-align: left;
    overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height:100%;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 8px;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-slider-horizontal {
    height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.25em;
    margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
    left: -.25em;
    margin-left: 0;
    margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}
.ui-spinner {
    position:relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}
.ui-spinner-input {
    border: none;
    background: none;
    padding: 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 22px;
}
.ui-spinner-button {
    width: 16px;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0;
}
.ui-spinner a.ui-spinner-button {
    border-top: none;
    border-bottom: none;
    border-right: none;
} /* more specificity required here to overide default borders */
.ui-spinner .ui-icon {
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0;
} /* vertical centre icon */
.ui-spinner-up {
    top: 0;
}
.ui-spinner-down {
    bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
    /* need to fix icons sprite */
    background-position:-65px -16px;
}
.ui-tabs {
    position: relative;
    padding: 0;
    zoom: 1;
} /* overflow: hidden; - no button submenus visible when it is enabled */
.ui-tabs .ui-tabs-nav {
    overflow: hidden;
    z-index: 1;
    resize: none;
    white-space: nowrap;
    background: none;
    margin: 0px;
    margin-bottom: -1px;
    padding: 0 10px;
    border: none;
}
.ui-tabs .ui-tabs-nav li {
    border-radius: 3px 3px 0px 0px;
    background: none;
    border: none;
    float: left;
    font-weight: normal;
    line-height: 170%;
    border-bottom: 0;
    list-style: none;
    margin: 1px;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li:hover {
    background: #f8f8f8;
    border: 1px solid #ddd;
    color: #444;
    border-bottom: 0;
    padding-bottom: 1px;
    margin: 0;
}
.ui-tabs .ui-tabs-nav li a:hover {
    color: inherit;
}
.ui-tabs .ui-tabs-nav li a img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    /*background: #fff;*/
    background: #ddd;
    border: 1px solid #ccc;
    color: #444;
    border-bottom: 0;
    padding-bottom: 3px;
    margin: 0;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: default;
    color: #4484ce;
    font-weight: bold;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    padding: 0px;
}
.dialog .ui-tabs .ui-tabs-panel {
    border-color: #ddd;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.ui-tooltip {
    padding: 4px 8px;
    font-size: 80% !important;
    color: #444;
    background: #fffff0;
    border: 1px solid #ccccbb;
    border-radius: 5px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, .6);
    box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, .6);
}
/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
    background-image: none;
}


/* Component containers
----------------------------------*/
.ui-widget {
    font-size: 1em;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
}
.ui-widget-content {
    color: #444;
}
.ui-widget-content a {
}
.ui-widget-header {
}

.ui-widget-header a {
}

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    text-decoration: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
}
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {
    color: #4484ce;
    text-decoration: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: repeating-linear-gradient(-45deg,#808dbc,#808dbc 2px,#999 2px,#999 4px);
    border: 1px solid #bbb;
    color: #555;
    font-weight: bold;
}
.ui-datepicker .ui-state-hover, .ui-datepicker .ui-state-active {
    background-color: #4484ce;
    color: #fff;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #555;
    text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {
    border: 1px solid #cccccc;
    color: #444;
}
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a {
    color: #444444;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    border: 1px solid #ff0084;
    background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
    color: #222222;
}
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
    color: #222222;
}
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter:Alpha(Opacity=70);
    font-weight: normal;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter:Alpha(Opacity=35);
    background-image: none;
}
.ui-state-disabled .ui-icon {
    filter:Alpha(Opacity=35);
} /* For IE8 - See #6059 */

/* Overlays */
.ui-widget-overlay {
    background: #000;
    opacity: .5;
    filter:Alpha(Opacity=50);
}
.ui-widget-shadow {
    margin: -4px 0 0 -4px;
    padding: 4px;
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .6;
    filter:Alpha(Opacity=60);
    -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

/***************/
/*** GENERAL ***/
/***************/

strong, b {
    font-weight: bold;
}

.clearFix {
    height: 1%;
    overflow: visible;
}

.clearFix {
    min-height: 1%;
}

.clearFix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

html, body, div, fieldset, input, select, textarea, legend, span, ul, li, ol, p, a, h1, h2, h3, h4, h5, iframe {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*body {
    zoom: 90%;
    -moz-transform: scale(0.9);
}*/

html {
    background: none repeat scroll 0% 0% #111;
    background-color: #888;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    color: #444;
    font-family: Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.3;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

hr {
    border-top: 1px solid #d0d0d0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 10px 0;
    display: block;
    clear: both;
}

hr.dark {
    border-top: 1px solid #505050;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 10px 0;
}


/*******************/
/*** TEXT STYLES ***/

/*** Headings ***/

h1, h2, h3, h4, h5, h6, h7, h8 {
    font-weight: normal;
    color: #4484ce;
    line-height: 1;
}

h1 {
    font-size: 160%;
    margin-top: 0px;
    margin-bottom: 20px;
}

h2 {
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 130%;
    color: #777;
}

h3 {
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 115%;
}

ul {
    margin: 0;
    padding: 0;
    padding-left: 1.5em;
    list-style-type: square;
}


/*** Lists ***/

ul > li {
    margin: 8px 0px;
}

ul.labelList {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 150%;
    margin: 15px 0;
}

ul.labelList > li {
    margin: 0;
}

ul.labelList > li > span {
    display: table-cell;
    width: 80px;
    float: left;
    color: #8c8a8f;

}


/*** Paragraphs ***/

p {
    margin: 8px 0;
}

p:last-child {
    margin-bottom: 0;
}

.large {
    font-size: 130%;
}

.small {

}


/*** Links ***/

a {
    color: #4484ce;
    outline: medium none;
}

a.disabled:hover, a.disabled2:hover {
    cursor: default;
}

a:hover {
    color: #403c44;
}

a > img {
    border: none;
}

a.large {
    text-decoration: none;
    color: #666;
    padding: 3px;
    margin-top: 0;
    font-size: 120%;
}

a.large img {
    margin-right: 5px;
    padding: 3px;
    background: #fff;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    top: -1px;
    position: relative;
    border-radius: 3px;
}

a.large.primary img, a.large.primary:hover img, a.large.accented img, a.large.accented:hover img {
    background: none;
    border: none;
}

a.large.primary.arrowDown, a.large.accented.arrowDown {
    padding: 11px 20px;
    top: 1px;
    position: relative;
    margin-left: -1px;
}

a.large:hover {
    color: #666;
}

a.large:hover img {
    color: #666;
    background: #666;
    border: 1px solid #666;
}

a.helpLink {
    color: #4484ce !important;
    text-decoration: none;
    border-bottom: 1px dashed #ccc;
}


/************/
/*** TABS ***/

.tabs {
    position: relative;
}

.tabs ul {
    position: relative;
}

.tabs .tab {
    border: 1px solid #ddd;
    background: #fff;
    -moz-border-radius: 2px 2px 5px 5px !important;
    border-radius: 2px 2px 5px 5px !important;
    padding: 15px !important;
    position: relative;
}

.ui-tabs-anchor, :focus, *:focus, * {
    outline: 0 none !important;
}

/*** Boxes, Frames & Banner ***/

.whiteBox {
    border: 1px solid #bbb;
    border-radius: 5px;
    background: #fff;
    margin-top: 25px;
    display: none;
}

.whiteBox > div {
    padding: 15px;
}

.whiteBox > div > h2 {
    font-size: 120%;
    margin-top: 0px;
    margin-bottom: 5px;
}

.whiteBox > div > p {
    margin-top: 5px;
    margin-bottom: 0;
}

.quickViewBox {
    min-width: 40%;
    width: 40%;
    left: 30%;
    border-radius: 0px 0px 8px 8px;
    display: none;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, .3);
    background: #333;
    color: #fff;
    position: fixed;
    top: 97px;
}

.quickViewBox > div {
    padding: 10px 20px;
    -webkit-box-shadow: inset 0px 8px 8px -8px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 8px 8px -8px rgba(0, 0, 0, .3);
    padding-bottom: 15px;
}

.quickViewBox > h2 {
    border-bottom: 1px solid #2266aa;
    position: relative;
    font-size: 110%;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    padding-left: 20px;
    line-height: 32px;
    background: rgb(102,170,255);
    background: -moz-linear-gradient(top,  rgba(102,170,255,1) 0%, rgba(68,153,221,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,170,255,1)), color-stop(100%,rgba(68,153,221,1)));
    background: -webkit-linear-gradient(top,  rgba(102,170,255,1) 0%,rgba(68,153,221,1) 100%);
    background: -o-linear-gradient(top,  rgba(102,170,255,1) 0%,rgba(68,153,221,1) 100%);
    background: -ms-linear-gradient(top,  rgba(102,170,255,1) 0%,rgba(68,153,221,1) 100%);
    background: linear-gradient(to bottom,  rgba(102,170,255,1) 0%,rgba(68,153,221,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fa5ff', endColorstr='#4499dd',GradientType=0 );
    -webkit-box-shadow: inset 0px 8px 8px -8px rgba(0, 0, 0, 1);
    box-shadow: inset 0px 8px 8px -8px rgba(0, 0, 0, 1);
}

.propertiesBox {
    min-width: 630px;
    width: 50%;
    left: 25%;
    border-radius: 5px;
    background: #efefef;
    display: none;
    position: fixed;
    top: 80px;
    -webkit-box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, .8);
    box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, .8);
}

.propertiesBox.wide {
    min-width: 720px;
    width: 70%;
    left: 15%;
}

.propertiesBox.full, .ui-dialog.full {
    min-width: 98%;
    width: 98%;
    left: 1%;
}

.propertiesBox > div, .ui-dialog > div {
    padding: 10px;
}

.propertiesBox h2, .ui-dialog h2, .ui-dialog h1, .propertiesBox h1 {
    font-size: 160%;
    letter-spacing: -0.02em;
    color: #666;
    padding: 0;
    margin: 0;
    line-height: 38px;
}

.propertiesBox > div > p, .ui-dialog > div > p {
    margin-top: 5px;
    margin-bottom: 0;
}

.propertiesBox .tab {
    background: #fff;
}


/*** jQuery Dailog Windows ***/

.ui-dialog {
    padding: 0 !important;
    border-radius: 2px !important;
    background: #fff !important;
    -webkit-box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, .8);
    box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, .8);
    max-width: 75%;
}

.ui-dialog-titlebar {
    font-size: 160%;
    letter-spacing: -0.02em;
    color: #666;
    padding: 0;
    margin: 0;
    line-height: 38px;
    border-bottom: 1px solid #ddd;
}

.dialog {
    padding: 22px;
}


/* Replace this with jQuery dialog (this is used only in catalogue.php - From here: -> */

.floatContainer {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: none;
    z-index: 100;
}

.contentBox {
    width: 900px;
    border-radius: 5px;
    background: #fff;
    position: relative;
    margin: 0 auto;
    -webkit-box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, .8);
    box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, .8);
}

.contentBox > div {
    padding: 25px;
}

.contentBox h2 {
    font-size: 180%;
    margin-top: 0;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.contentBox h3 {
    font-size: 150%;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.contentBox > div > p {
    margin-top: 5px;
    margin-bottom: 0;
}

.contentBox h3 {
    margin-bottom: 15px;
}

.contentBox > div > p {
    margin-top: 5px;
    margin-bottom: 0;
}

a.inlineIconItem {
    text-decoration: none;
    display: block;
    margin: 10px;
    float: left;
    width: 300px;
    line-height: 120%;
    font-size: 120%;
    font-weight: bold;
    padding: 15px;
    border: 1px solid #fff;
    border-radius: 5px;
}

a.inlineIconItem:hover {
    border: 1px solid #ddd;
}

a.inlineIconItem > img, a.inlineIconItem > i {
    display: inline-block;
    float: left;
    position: relative;
    margin-right: 10px;
    border-radius: 5px;
}

a.inlineIconItem > span {
    font-size: 75%;
    color: #777;
    font-weight: normal;
    line-height: 120%;
    display: block;
}

/* <-- to here ------------------------------------- */
/*** Fieldset ***/

fieldset, div.fieldset {
    margin-bottom: 25px;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 15px;
    background-color: #fff;
    position: relative;
}

fieldset.legend {
    padding-top: 48px;
}

fieldset.nl {
    padding-top: 15px;
}

fieldset.grey legend, fieldset.grey h3, fieldset.grey label {
    color: #eee;
}

fieldset.grey div {
    color: #fff;
}

fieldset.grey hr {
    border-color: #606066;
}

fieldset.grey h3 {
    margin-top: 0;
}

.tabs fieldset, .ui-dialog fieldset {
    margin-bottom: 10px;
}

.tabs fieldset:last-child {
    margin: 0;
}

.ui-dialog fieldset.noborder {
    padding: 10px;
    margin: 0;
    background: none;
    border: none;
}

fieldset>div {
    clear: both;
    vertical-align: center;
    line-height: 150%;
    padding: 4px 0;
}

fieldset div.row, div.fieldset div.row {
    clear: both;
    vertical-align: center;
    line-height: 150%;
    padding: 4px 0;
    /* min-height: 37px; /* to match line height when input field is not rendered */
}

fieldset div.item {
    padding: 3px 0;
    display: inline-block;
    position: relative;
}

fieldset span.item {
    font-size: 80%;
    border-right: 1px solid #bbb;
    padding-right: 10px;
    margin-right: 10px;
}

fieldset span.item:last-child {
    border-right: none;
}

fieldset.dark {
    margin-bottom: 25px;
    border: 1px solid #bbb;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 15px;
    padding-top: 47px;
    background-color: #fafafa;
    position: relative;
}

fieldset .section {
    padding: 10px;
}

.collapsible legend {
    background-image: url(/images/arrows/9px-semiblack-up.png);
    background-position: 95% center;
    background-repeat: no-repeat;
}

.collapsible legend:hover:not(.disabled):not(.disabled2) {
    background-image: url(/images/arrows/9px-semiblack-down.png);
    background-position: 95% center;
    background-repeat: no-repeat;
    cursor: pointer;
}

legend, .boldHeader {
    color: #777;
    font-size: 150%;
    font-weight: bold;
    letter-spacing: -0.002em;
    padding: 10px 14px;
    text-align: left;
    width: 100%;
}

legend {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

legend > img {
    display: inline-block;
    top: 1px;
    position: relative;
    margin-right: 8px;
    padding-right: 9px;
    border-right: 1px dotted #ccc;
    display: none !important;
}

.verticalLabels .note {
    padding-left: 0;
}

.nice-table td {
    font-size: 120%;
    padding: 10px;
}

.note {
    margin-top: 0;
    margin-bottom: 20px;

    line-height: 130%;
    padding-left: 19px;
    white-space: normal !important;
}

.note > img {
    float: left;
    margin-left: -22px;
}

ul.dynamicList  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-top: 1px solid #ddd;
}

fieldset > ul {
    margin: 0;
    padding: 0;
    padding-left: 1em;
    list-style-type: square;
}

fieldset > ul > li > a {
    text-decoration: none;
}

fieldset > ul > li > a:hover {
    text-decoration: underline;
}

label.dark {
    display: inline-block;
    width: 220px;
    min-width: 220px;
    white-space: nowrap;
    color: #555;
    font-weight: bold;

}

label.wide {
    display: inline-block;
    width: 200px;
    min-width: 200px;
    font-weight: normal;

}

label.extrawide {
    display: inline-block;
    width: 300px;
    min-width: 300px;
    font-weight: normal;

}

/*
* This works well if a input field is after a label but works bad when before
*/
label {
    /* color: #888; */
    display: block;
    float: left;
    margin-right: 15px;
    padding: 3px 0;
    line-height: 120%;
    width: fit-content;
    min-width: 140px;
}

/**
* Default styles for label makes labels display: block; and float: left;
* which doesn't work for radio button labels where radio button is on the left and label on the right
* Example https://admin-printjob.virtualbox/client/contents/2
* echo $form->radioButtonList($model, 'address_source', array(...), array(
*     'template'     => '<div class="radio-button-list-template-1">{input} {label}</div>',
* ));    
*/
div.radio-button-list-template-1 label {
    display: inline;
    float: none;
}

.verticalLabels label {
    color: #888;
    display: block;
    margin-right: 15px;
    padding: 3px 0;
    line-height: 120%;
    width: 35%;
    min-width: 140px;
    float: none;

}

label.inline {
    display: inline;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    color: #777;
    padding: 0;
    line-height: 120%;
    float: none;
    position: relative;
    font-size: 100%;
}

.collapsible label {
    min-width: 100px;
}

fieldset > div > span > label, fieldset div.item > span > label {
    display: inline;
    margin: 0;
    margin-right: 15px;
    padding: 0;
    width: auto;
    min-width: 0;
    clear: after;
    color: #444;
    vertical-align: center;
    float: none;
}

div#self_registration label {
    color: #444;
}

fieldset > div.rowMulti > span > label {
    display: inline;
    margin: 0;
    margin-right: 15px;
    padding: 0;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    color: #777;
    vertical-align: center;
    float: none;
}

fieldset > div.rowMulti > span {
    margin-left: 165px;
    display: block;
}

fieldset > div.rowMulti span.small {
    display: block;
    margin: 0;
    font-size: 9px;
}

label.top {
    display: block;
    white-space: nowrap;
    float: left;
    margin-bottom: 3px;
    color: #4484ce;
    font-size: 14px;
}

fieldset.statistics label {
    padding-top: 8px;
    padding-bottom: 4px;
    font-weight: bold;
}

#datepicker {
    display: none;
    position: absolute;
    padding: 5px;
    border: 1px solid #bbb;
    background: #fff;
    -moz-border-radius: 5px;
    border-radius: 5px;
    left: 520px;
    margin-top: 2px;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, .3);
}

/*** Grid View / Zii / modified CSS ***/

.grid-view {
    padding: 0;
    overflow: auto;
    z-index: 1001;
}

.grid-view .link-column img {
    border: 0;
}

.grid-view .button-column {
    text-align: center;
    white-space: nowrap;
}

.grid-view .button-column img {
    border: 0;
}

.grid-view .checkbox-column {
    width: 15px;
}

.grid-view .summary {
    margin-top: 10px;

    text-align: left;
    font-weight: bold;
    display: inline-block;
    color: #777;
    clear: right;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    border-bottom: 1px solid #bbb;
    background: #efefef;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f0f0f0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#f0f0f0));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 );
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    float: left;
}

.grid-view .pager {
    margin: 5px 0 0 0;
    text-align: right;
}

.grid-view .empty {
    font-style: italic;
    padding: 20px;
}

/**
* By default filters has to be not visible
*/
.grid-view .filters {
    display: none;
    background-color: #ea5b0c;
}

.grid-view .filters input, .grid-view .filters select {
    width: calc(100% - 20px);
    margin: 10px 0;
}
.grid-view .filters td {
    text-align: center;
}

.list-view .summary {
    margin-bottom: 10px;

    text-align: left;
    font-weight: bold;
    display: inline-block;
    color: #777;
    clear: right;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    border-bottom: 1px solid #bbb;
    background: #efefef;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f0f0f0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#f0f0f0));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 );
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.grey {
    color: #aaa;
}

.black {
    color: #555;
}

.grid-view .paginator:first-child {
    margin-top: 0px;
}

.paginator {
    margin: 15px auto;

    text-align: left;
    font-weight: normal;
    display: block;
    color: #777;
    clear: right;
    padding: 4px 14px;
    border-bottom: 2px solid #ccc;
    vertical-align: center;
    margin-bottom: 25px;
}

.paginator.bottom {
    border-bottom: none !important;
    border-top: 2px solid #ccc;
    margin-top: 25px;
}

.paginator select {
    padding: 2px;
    margin: 2px 2px;
    vertical-align: middle;
}

.paginator span {
    display: inline-block;
    vertical-align: middle;
}

.paginator .iconButton {
    width: 26px;
    height: 26px;
    padding: 0;
}

.disabled, .disabled2, .disabled td, .disabled2 td, .grey {
    color: #bbb !important;
}

img.disabled, img.disabled2 {
    opacity: 0.3;
}

.nonEditable {
    background: none !important;
    border: none !important;
}

.nonEditable:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.normal {
    font-weight: normal;
}

.fixed150 {
    display: inline-block;
    width: 150px;
}

tr.suspended td {
    color: #999 !important;
}

tr.suspended td > a {
    color: #999 !important;
}

.iconSeparator {
    width: 1px;
    border-left: 1px dotted #aaa;
    display: inline;
    position: relative;
    height: 20px;
    margin: 0 3px;
    padding: 0;
    display: inline-block;
}

.count {
    position: relative;
    top: -5px;
    right: -2px;
    background: none;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: 1px;
    line-height: 15px;
    display: inline-block;
    font-size: 11px;
    background: #bbbcbf;
    min-width: 16px;
    height: 16px;
    padding: 0px 5px;
    border-radius: 20px;
}

span.unseen {
    background: #5fa5ff;
    color: #fff;
}

.countRed {
    color: rgb(255,64,64);
}

.countGreen {
    color: rgb(32,192,64);
}

.countBlue {
    color: rgb(64,128,255);
}

/*** Smooth DIV Scroll ***/

div.scrollingHotSpotLeft {
    min-width: 24px;
    width: 24px;
    height: 36px;
    border-radius: 4px 0px 0px 0px;
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    left: 0;
    cursor: pointer;
}

div.scrollingHotSpotLeftVisible {
    border: 1px solid #ccc;
    background-color: #fff;
    background-image: url(/images/arrows/11px-grey-left.png);
    background-repeat: no-repeat;
    zoom: 1;
}

div.scrollingHotSpotRight {
    min-width: 24px;
    width: 24px;
    height: 36px;
    border-radius: 0px 4px 0px 0px;
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    right: 0;
    cursor: pointer;
}

div.scrollingHotSpotRightVisible {
    border: 1px solid #ccc;
    background-color: #fff;
    background-image: url(/images/arrows/11px-grey-right.png);
    background-repeat: no-repeat;
    zoom: 1;
}

div.scrollWrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

div.scrollableArea {
    position: relative;
    width: auto;
    height: 100%;
}

.VIP {
    margin: 20px;
    padding: 20px;
    font-size: 300%;
    border-radius: 8px;
    letter-spacing: 10px;
    background: #555 url(/images/backgrounds/diagonal.png);
    border: 2px solid #4eaeff;
    color: #fff;
    text-align: center;
}

#new_status_id label{
    float: none;
    display: inline;
    position: relative;
    top: -2px;
    color: inherit;
    padding-left: 10px;
}

#new_status_id br{
    margin-bottom: 5px;
}

.modal {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    background: #000;
    opacity: 0.5;
}

/*Status setup*/

#statusTable .statusid-2-roweven>span{
    background-color: rgb(105, 165, 131);
    background-color: rgba(105, 165, 131, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-2-rowodd>span{
    background-color: rgb(105, 165, 131);
    background-color: rgba(105, 165, 131, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-3-roweven>span{
    background-color: rgb(51, 102, 153);
    background-color: rgba(51, 102, 153, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-3-rowodd>span{
    background-color: rgb(51, 102, 153);
    background-color: rgba(51, 102, 153, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-4-roweven>span{
    background-color: rgb(236, 121, 154);
    background-color: rgba(236, 121, 154, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-4-rowodd>span{
    background-color: rgb(236, 121, 154);
    background-color: rgba(236, 121, 154, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-5-roweven>span{
    background-color: rgb(1, 145, 200);
    background-color: rgba(1, 145, 200, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-5-rowodd>span{
    background-color: rgb(1, 145, 200);
    background-color: rgba(1, 145, 200, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-6-roweven>span{
    background-color: rgb(255, 204, 0);
    background-color: rgba(255, 204, 0, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-6-rowodd>span{
    background-color: rgb(255, 204, 0);
    background-color: rgba(255, 204, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-7-roweven>span{
    background-color: rgb(146, 205, 0);
    background-color: rgba(146, 205, 0, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-7-rowodd>span{
    background-color: rgb(146, 205, 0);
    background-color: rgba(146, 205, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-8-roweven>span{
    background-color: rgb(255, 153, 0);
    background-color: rgba(255, 153, 0, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#statusTable .statusid-8-rowodd>span{
    background-color: rgb(255, 153, 0);
    background-color: rgba(255, 153, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

/*xxx*/
div.items {
    background-color: #ccc;
    width: 100%;
    text-align: left;
    border: 1px solid #ccc;
    overflow: auto;
    display: table;
    padding: 0;
}

div.items .header-ul {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-weight: bold;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 100%;
    display: table-header-group;
    background-color: #efefef;
    background: -moz-linear-gradient(top,  #f0f0f0 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #f0f0f0 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #f0f0f0 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #f0f0f0 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #f0f0f0 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 );
}

div.items .header {
    border-right: 1px solid #ccc;
    display: table-cell;
    padding: 10px;
}

div.items ul {
    margin: 0px;
    padding: 0px;
}

div.items li {
    display: table-row;
    float: left;
    color: #333;
    padding: 0;
    border-bottom: 1px dotted #ccc;
    font-size: 0.9em;
    text-decoration: none;
    list-style-type: none;
    margin: 0px;
}

div.items .iconButton {
    xpadding: 0;
}

div.items li>span {
    display: table-cell;
    padding: 5px 10px;
    height: 45px;
    vertical-align: middle;
}

div.items li>span:nth-child(2) {
    text-indent: -999px;
}
div.items li:first-child>span:nth-child(2) {
    text-indent: 0;
}
div.items li>span:first-child img {
    visibility: hidden;
}
div.items li:first-child>span:first-child img {
    visibility: visible;
}

div.items li>span input[type="text"]{
    width: 400px;
}

div.items ul.odd li {
    background-color: #f6f6fa;
}

div.items .icon {
    width: 22px;
    vertical-align: middle;
    text-align: center;
}

div.items input[type="checkbox"] {
    vertical-align: baseline;
}

#active_languages label, #client_languages label {
    padding: 3px 0px;
}

#client-settings-form #default_language label {
    width: 0px;
    min-width: 0px;
}

/* inlineNotice */

.inlineNotice {
    background: url("/images/icons/64px/info.png") no-repeat scroll 10px 10px #666666;
    background-size: 38px;
    border-radius: 23px;
    color: #fff;

    margin: 0 0 20px 0;
    opacity: 1;
    padding: 15px 15px 15px 60px;
    position: relative;
    text-align: left;
    width: auto;
}

.inlineNotice p {
    margin: 5px 0;
}

.inlineNotice a {
    color: #fff;
    text-decoration: underline !important;
}

/* popup Notice*/

.popupNotice {
    background: #333333;
    border-radius: 0px 0px 3px 3px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.65);
    color: #FFFFFF;
    opacity: 0.9;
    padding: 6px 10px 10px 10px;
    position: fixed;
    width: 400px;
    right: 15%;
    top: 62px;
    text-align: left;
    display: none;
    z-index: 14000;
}
.popupNotice table {
    width: 100%;
}
.popupNotice table td {
    vertical-align: middle;
    padding: 10px;
    font-size: 120%;
}
.popupNotice table td:first-child {
    width: 32px;
    height: 32px;
}
.popupNotice table td:first-child span {
    font-size: 32px;
    color: white;
}
.popupNotice div#messages {
    display: table-cell;
    vertical-align: middle;
    height: 32px;
}

.inlineNotice a.dismiss, .popupNotice a.dismiss {
    background: url("/images/icons/x.png") no-repeat scroll center center #EEEEEE;
    border-radius: 12px 12px 12px 12px;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
    float: right;
    height: 21px;
    width: 21px;
}

.popupNotice a {
    color: #FFFFFF;
}

.popupNotice p {

    margin: 0;
    margin-right: 30px;
    margin-bottom: 3px;
}

.popupNotice.mini {
    margin: 10px 0;
    padding: 10px;
}

.popupNotice.mini p {
    margin: 0;
    font-size: 100%;
    line-height: 140%;
}

.popupNotice-error {
    background: #702020;
    background-size: 32px;
}

.popupNotice-loading {
    background: url("/images/icons/ajax-loader.gif") no-repeat scroll 4px 4px #333333;
    font-weight: bold;
    line-height: 90%;
    width: 140px;
    padding: 12px 12px 15px 50px;
}

.popupNotice-loading #messages {
    display: block;
    vertical-align: middle;
    height: auto !important;
}

.popupNotice-loading a.dismiss {
    display: none;
}

.dialog .ui-tabs .ui-tabs-panel {
    border-color: #ddd;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

fieldset .CMYKMixer {
    position: relative;
}

.CMYKMixerPreview {
    position: absolute;
    right: 10px;
    width: 150px;
    height: 150px;
    text-align: center;
}

#color_preview, #cp{
    width: 100px;
    height: 100px;
    margin: auto;
}

.slider {
    width: 200px;
    background: #333;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 8px 0;
}

.CMYKMixer .slider {
    display: block;
    float: left;
    margin-left: 20px;
}

input.sliderInput {
    float: left;
    width: 50px;
    text-align: center;
}

.sliderC {
    background: linear-gradient(to right, #FFFFFF 0%, #00C0FF 100%) repeat scroll 0 0 transparent;
}

.sliderC .ui-slider-handle {
    background-color: #00C0FF !important;
}

.sliderM {
    background: linear-gradient(to right, #FFFFFF 0%, #E22DE2 100%) repeat scroll 0 0 transparent;
}

.sliderM .ui-slider-handle {
    background-color: #E22DE2 !important;
}

.sliderY {
    background: linear-gradient(to right, #FFFFFF 0%, #F5FF00 100%) repeat scroll 0 0 transparent;
}

.sliderY .ui-slider-handle {
    background-color: #F5FF00 !important;
}

.sliderK, .sliderI {
    background: linear-gradient(to right, #FFFFFF 0%, #000000 100%) repeat scroll 0 0 transparent;
}

.sliderK .ui-slider-handle {
    background-color: #000 !important;
}

/*Table stylings for price matrix*/

.items .readOnly{
    background: #eee;
}

.items thead tr th.lastTh {
    border-right: 1px solid #CCCCCC;
}

title {
    background: yellow;
}

.settingsNotice {
    color: #ddd;

    background: #444;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 10px;
}

.settingsNotice a {
    color: #aaddff;
}

.dd-options li {
    display: table;
    width: 100%;
}

.dd-options li a{
    display: table-row;
}

.dd-options li a img, .dd-options li a label {
    display: table-cell;
    vertical-align: middle;
    height: auto;
}

.value_filter {
    float: left;
    margin-right: 5px;
}

.dd-selected-text {
}

.dd-option-text {
    line-height: 20px;
    padding: 5px;
    margin: 0;
}

.hanging {
    xtext-indent: -23px;
    margin-left: 23px;
}

.hanging.level1 {
    margin-left: 43px;
}

.hanging.level2 {
    margin-left: 63px;
}


.ui-accordion-content {
    background: none;
    padding: 5px;
    padding-left: 30px;
    border: 1px solid #ddd;
}

.ui-accordion-content a {
    display: block;
    padding: 5px;
    padding-left: 30px;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

.ui-accordion-header {
    background: none !important;
    padding: 5px;
    border-radius: 0px !important;
    border: none !important;
    line-height: 35px !important;
    height: 35px !important;
}

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

.form div.left {
    float: left;
    width:49%;
}

.form div.right {
    float: right;
    width:49%;
}

img.zoomPreview {
    cursor: url(/images/icons/loupe.png),pointer;
    border: 1px solid #888;
    display: block;
}

img.zoomPreview:hover {
    border: 1px solid #555;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

.hidden {
    display: none;
}

.subsettings {
    padding-left: 25px;
}



/*** EXTRAS ***/

/*** Common helpers with limited functionality but universal ***/

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

.float-right {
    float: right;
}

.bold {
    font-weight: bold;
}

sup {
    font-size: 55%;
}

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

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

.iconLeft > img {
    float: left;
    margin-right: 30px;
}

.iconRight > img {
    float: right;
    margin-left: 30px;
}


/*** Colours ***/

.dgf {
    color: #403c44;
}

.mgf {
    color: #8c8a8f;
}

.lgf {
    color: #d9d8da;
}

.dgb {
    background-color: #403c44;
}

.mgb {
    background-color: #8c8a8f;
}

.lgb {
    background-color: #d9d8da;
}

.blue {
    color: #4484ce;
}

.grey {
    color: #777;
}

.ltgrey {
    color: #999;
}

.red {
    color: #dd0000;
}

.red a {
    color: #dd0000;
    text-decoration: underline;
}

.green {
    color: #009900;
}

.thumbnail_preview {
    cursor: pointer;
    /*border: 1px solid #DDDDDD;
    border-radius: 5px;
    width: 174px;
    height: 174px;*/
}

.ui-menu {
    background: #fff;
    border: 1px solid #cccccc;
    padding: 10px;
}

.ui-menu a {
    padding: 6px !important;
}

.ui-menu a:hover {
    padding: 6px !important;
    color: #fff;
    background: #8c8a8f;
}

.ui-datepicker {
    background: #fff;
    border: 1px solid #cccccc;
    padding: 10px;
}

.ui-datepicker .ui-state-hover {
    background-color: #4484ce;
    color: #fff;
}

.ui-progressbar  {
    border: 1px solid rgb(153,192,207);
    background: rgb(183,222,237);
    background: -moz-linear-gradient(top,  rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,222,237,1)), color-stop(50%,rgba(113,206,239,1)), color-stop(51%,rgba(33,180,226,1)), color-stop(100%,rgba(183,222,237,1)));
    background: -webkit-linear-gradient(top,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
    background: -o-linear-gradient(top,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
    background: -ms-linear-gradient(top,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
    background: linear-gradient(to bottom,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );

    color: #333;
    font-weight: bold;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 28px;
    height: 28px;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

.progress-label {
    width: 552px !important;
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    padding: 0 !important;
    height: 28px !important;
    text-align: center !important;
    color: #fff !important;
    line-height: 28px !important;
}


/*** Timeline / Chat Widget ***/

.timelineWindow {
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
}

.timelineContent {
    margin: 0;
    padding: 0;
    min-height: 450px;
    max-height: 450px;
    padding-right: 10px;
}

.timelineSubmit {
    margin: 0;
    padding: 0;
    margin-top: 15px;
}

.timelineSubmit textarea {
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    border: 1px solid #ddd;
}

.timelineSubmit textarea:focus {
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    border: 1px solid #bbb;
    margin-bottom: 10px;
}

.timelineItem {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 8px;
    float: left;
    width: 100%;
}

.timelineItem:last-child {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.timelineMessage {
    margin: 0;
    padding: 0;
    text-indent: -12px;
    margin-left: 24px;
    line-height: 130%;
}

.timelineIcon {
    margin-right: 5px;
}

.timelineTime {
    float: right;
    color: #808084;
    font-size: 11px;
    line-height: 17px;
}

.timelineIcon img {
    vertical-align: bottom;
}

.timelineSender {
    font-weight: bold;
    margin-right: 5px;
}

.timelineSummary {
    margin: 0;
    padding: 0;
    display: block;
    color: #808084;

    text-indent: 0;
    margin-top: 5px;
}

.timelineFilter {
    text-align: right;
    position: relative;
    top: -45px;
    margin-bottom: -30px;
}

.messageTargetSelector {
    margin-bottom:5px;
    margin-top: -20px;
}

.jobDispatched {
    background: url(/images/icons/dispatched.png) left center no-repeat;
    padding-left: 22px;
}

.jobNotDispatched {
    background: url(/images/icons/not-dispatched.png) left center no-repeat;
    padding-left: 22px;
}

.jobPartiallyDispatched {
    background: url(/images/icons/partially-dispatched.png) left center no-repeat;
    padding-left: 22px;
}

.jobNormal {
    padding-left: 22px;
}

.jobLink img, .jobActive img {
    position: relative;
    margin-right: 3px;
    vertical-align: baseline;
    top: 3px;
}

fieldset .leftSet {
    float: left;
    width: 30%;
    display: table-cell;
    clear: none;
    min-height: 600px;
}

fieldset .rightSet {
    float: left;
    padding-left: 30px;
    width: 750px;
    display: table-cell;
    clear: none;
}

img.zoomPreview {
    cursor: url(/images/icons/loupe.png),pointer;
}

.imagePreview {
    cursor: url(/images/icons/loupe.png),pointer;
    text-align: center;
    width: 100%;
    border: 2px solid #ccc;
    background: #888;
    text-align: center;
    padding: 10px;
}

.stepCount {
    background: rgb(122,188,255);
    text-align: center;
    font-size: 180%;
    line-height: 120% !important;
    color: #fff;
    width: 40px;
    height: 40px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    line-height: 32px;
    outline: none;
    white-space: nowrap;
    font-weight: bold;
    float: left;
}

.order-options-wrapper {
    float: left;
    width: 740px;
    clear: none;
    margin-left: 10px;
}

.order-options-wrapper h3 {
    margin-top: 8px;
}

#adminRfqForm fieldset {
    width: 810px;
}
#adminRfqForm #buttonsContainer {
    width: 810px;
    padding: 0px;
    overflow: auto;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

a.iconButton.active {
    border: 1px solid rgb(54,140,228);
    background: rgb(122,188,255);
    color: #fff;
}


.ui-autocomplete {
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

a.buttonGreen, a.update {
    border: 1px solid #2b2;
    background: #6d6;
    padding: 6px 16px;
    font-size: 110%;
    font-weight: bold;
    color: #fff;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 20px;
    outline: none;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
a.button.update {
    text-align: center;
    padding: 10px;
}

a.buttonGreen:hover {
    border: 1px solid #2b2;
    background: #4b4;
}

a.buttonBlue {
    border: 1px solid rgb(54,140,228);
    background: rgb(122,188,255);
    padding: 6px 16px;

    color: #fff;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

a.buttonBlue:hover {
    border: 1px solid rgb(54,140,228);
    background: rgb(22,88,200);
    color: #fff;
}

.frame {
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 8px;
    width: 100%;
    margin: 0;
    margin: 10px 0;
}

.box {
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 15px;
    background: #fff;
    width: 100%;
    margin: 0;
}

.form .row:not(.select2row) span {
    display: inline-block;
}

.underline {
    border-bottom: 1px solid #ddd;
}


/* Yii Log */

table.yiiLog {
    border: 2px solid #777;
    background: none;
    width: 100%;
    position: relative;
    display: none !important;
}

table.yiiLog td {
    padding: 3px;
    font-family: monospace;
}

table.yiiLog th {
    padding: 3px;
    font-size: 110%;
    font-weigth: bold;
    border-bottom: 1px solid #777;
}

.tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px Arial;
    z-index: 1000;
    pointer-events: none; /* prevents flickering when tooltip is displayed in first row of the table */
}

.catCount {
    background: none repeat scroll 0 0 #8ecfff;
    border-radius: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    height: 18px;
    line-height: 17px;
    min-width: 18px;
    padding: 0 6px;
    position: absolute;
    right: -9px;
    text-align: center;
    top: -9px;
    z-index: 1;
}

.detailsBox:hover:not(.disabled):not(.disabled2) .catCount {
    background-color: orange;
}

.shippingOptionsWrapper label {
    width: 200px;
}

/* Xero */
.xeroWizzard {
    line-height: 150%;
    margin: 50px auto auto;
    padding: 60px 30px 30px;
    max-width: 1150px;
    min-width: 600px;
}
.xeroWizzard li {
    margin-bottom: 10px;
}
.xeroWizzard hr {
    margin: 30px 0;
}
.xeroWizzard ol {
    list-style: upper-roman outside;
    padding: 10px 50px;
}
.xeroWizzard ol textarea {
    width: 100%;
    height: 150px;
    margin: auto;
}
.xeroWizzard td {
    padding: 4px;
}
.xeroWizzard input, .xeroWizzard select {
    width: 500px;
}

.xeroWizzard input[type=radio] {
    width: auto;
}
.xeroWizzard label {
    float: none;
    display: inline;
    width: auto;
    color: #444;
    position: relative;
    top: -2px;
}

.xeroWizzard table tr td:first-of-type {
    text-align: right;
    padding-right: 20px;
}


/*** Setup Progress Bar ***/

div.setupProgress {
    color: #333;
    border-radius: 5px;
    white-space: nowrap;
    line-height: 40px;
    margin: 20px auto;
    border: 1px solid #ddd;
    display: table;
    overflow: hidden;
    width: 80%;
    background: #fff;
}

div.setupProgress a, div.setupProgress span {
    display: table-cell;
    text-decoration: none;
    padding: 0;
    margin: 0;
    width: 25%;
    text-align: center;
}

div.setupProgress span.active {
    font-weight: bold;
    color: #333;
}

div.setupProgress a:hover {
    background: #eee;
}

.flash-error {
    background: #f8f8f8 url("/images/icons/exclamation.png") no-repeat scroll 10px 10px;
    border: 2px solid #faa;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    margin: auto;
    padding: 10px 35px;
    width: 60%;
}

.full-width {
    width: 100%;
}

/*
 * NEW STUFF 
 */
#jobDetailsContainer fieldset {
    border: solid 1px #d9d9d9;
}
#jobDetailsContainer .productSummary {
    display: none;
}
#orderDetailsContainer .tab {
    border: 1px solid #d9d9d9;
    padding: 10px;
}
#orderDetailsContainer fieldset {
    border: none;
    padding: 0;
    margin-bottom: 0;
}
#orderDetailsContainer fieldset .row:not(:first-of-type) {
    padding-top: 5px;
}
#orderDetailsContainer fieldset label {
    white-space: normal;
}

#jobDetailsContainer {
    display: table-cell;
    padding: 0 10px;
    vertical-align: top;
    width: auto;
    height: 100%;
}

#jobDetailsContainer .form-layout {
    word-break: break-all;
}

.buttons-row a.controllButton {
    margin: 2px;
}

/* Buttons displayed over an image. Used by addImageControls addon */
a.iwcControllButton {
    background-color: #0079c4;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    opacity: 0.9;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 5px;
}

a.iwcControllButton:hover {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.downloadImage {
    color: red;
}
table.vertical-middle td {
    vertical-align: middle;
}
table.vertical-top td, table tr.vertical-top td {
    vertical-align: top;
}
table.form-layout {
    width: 100%;
    display: table;
    table-layout: fixed;
}
table.form-layout tr {
    display: table-row;
}
table.form-layout tr.bottom-border {
    border-bottom: 1px solid #d9d9d9;
}
table.form-layout tr.bottom-border.spacer-border td {
    font-size: 1px !important;
    padding: 5px;
}
table.form-layout tr.bottom-border td {
    padding-bottom: 10px;
}
table.form-layout tr.bottom-border + tr td {
    padding-top: 10px;
}
table.form-layout tr.top-border {
    border-top: 1px solid #d9d9d9;
    padding-top: 19px;
}
table.form-layout tr.vertical-middle td {
    vertical-align: middle;
}
table.form-layout tr.vertical-middle td .icon-info {
    vertical-align: middle;
}
table.form-layout tr td {
    display: table-cell;
    font-size: 13px;
    padding: 5px;
}
table.form-layout tr td:first-of-type:not(.not-a-label) {
    color: #7b7b7b;
}
table.form-layout tr td .icon-info {
    vertical-align: bottom;
}
table.form-layout tr td span.note {
    font-weight: normal;
    padding-left: 0;
}
table.form-layout.labels-middle tr td {
    vertical-align: middle;
}
table.form-layout.even>tbody>tr td:first-of-type {
    width: 40%;
}
table.form-layout.wide-labels>tbody>tr td:first-of-type {
    width: 70%;
}
table.form-layout.narrow-labels>tbody>tr td:first-of-type {
    /*width: 30%;*/
}
table.form-layout.labels_150>tbody>tr td:first-of-type {
    width: 150px;
}
table.form-layout.content-right-aligned tr td:nth-of-type(2) {
    text-align: right;
}

.processing {
    position: relative;
}

.container-left {
    width: 59%;
    float: left;
}

.container-left fieldset, .container-right fieldset {
    min-width: 245px;
}

.container-right {
    width: 39%;
    float: right;
}

#date-range-dialog {
    padding: 0 5px 5px 5px;
}

#date-range-popup {
    padding: 5px;
    float: left;
}
#date-range-popup>div {
    float: left;
    padding: 0 5px 5px 5px;
    margin: 0 5px 5px 5px;
    text-align: left;
}

.size-selector {
    position: relative;
    height: 30px;
    outline: none;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    overflow: hidden;
    font-weight: bold;
    float: right;
    margin: 4px;
    background: #FFFFFF;
    color: #555555;
}
.size-selector input[type="radio"] {
    display: none;
    outline: none;
}
.size-selector label {
    width: 28px !important;
    min-width: 0px !important;
    padding: 6px;
    line-height: 16px;
    font-size: 16px;
    color: #555555;
    position: relative;
}
.size-selector label:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
}
.size-selector label:last-child {
    border-right: none;
}
.size-selector input[type="radio"]:checked + label {
    outline: none;
    background-color: #cccccc;
    color: #222222;
}

.productSearchItem {
    width: 200px;
}
.productSearchItem table {
    width: 100%;
    height: 100%;
}
.productSearchItem table tr:first-of-type td:first-of-type {
    width: 40px;
    vertical-align: middle;
    padding: 2px;
}
.productSearchItem table tr:first-of-type td:nth-of-type(2) {
    line-height: 100%;
    white-space: normal;
    color: #2f2f2f;
}
.productSearchItem table tr:first-of-type td:first-of-type img {
    width: 36px;
    height: 36px;
    margin: 2px;
    border: 1px #d9d9d9 solid;
}
.productSearchItem table td {
    font-size: 13px;
    font-family: Roboto,Arial,sans-serif;
    vertical-align: middle;
}
.productSearchItem table tr:nth-of-type(2) td {
    color: #2f2f2f;
    font-size: 12px;
}

.productSearchForm {
    display: inline;
    float: right;
    width: 250px;
    position: relative;
    top: 5px;
}
.productSearchForm select {
    width: inherit;
}

.select2-container.select2-container--default .select2-selection--single {
    background-color: #fff;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #555555;
}
.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #66A8EB;
    color: white;
}
.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] .productSearchItem table tr:first-of-type td:nth-of-type(2), .select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] .productSearchItem table tr:nth-of-type(2) td {
    color: white;
}

.select2-search--dropdown {
    background-color: #fff;
}

.select2-results {
    padding: 2px;
    background-color: #fff;
}
.select2-results > .select2-results__options {
    background-color: #fff;
}

.qtip-default {
    background-color: #555555;
    color: #ededed;
    border-color: #d9d9d9;
    border-radius: 5px;
    font-size: 14px;
    line-height: 14px;
}

.user_input_pages .form {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    height: 600px;
    overflow: auto;
    padding: 10px;
}

.form-layout td h2 {
    margin: 0;
}

.user_input_pages {
    display: none;
}

/*
.product-order-preview-wrapper {
    height:600px; 
    overflow-x: hidden; 
    padding: 0;
}
*/

.hide {
    display: none;
}

/*******************************/
/*** LAYOUT from layout.css ***/
/*****************************/

#pageContainer {
    min-height: 100%;
    width: 100%;
    position: relative;
    min-width: 960px;
    background: #f5f5f5;
    margin: 0 auto;
    box-shadow: none;
    border-radius: 0px;
    padding-top: 60px;
    overflow: hidden;
}

#siteTop {
    position: fixed;
    height: 60px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    min-width: 960px;
}

#sidebar {
    position: relative;
    float: left;
    width: 219px;
    margin-bottom: -50000px;
    padding-bottom: 50000px;
    height: 100%;
    -webkit-box-shadow: 1px 0px 3px 0px rgba(0, 0, 0, .35);
    box-shadow: 1px 0px 3px 0px rgba(0, 0, 0, .35);
    z-index: 5;
}

#main {
    min-height: 80vh; /* This must be set as vh as 100% height will hide action submenu. */
    height: 100%;
    position: relative;
}

#main:after {
    content: "";
    clear: both;
    display: table;
}

#main.indented {
    margin-left: 220px;
}

#main > .mainContent {
    padding: 25px;
    /*float: left;
    width: 100%;
    overflow: visible !important;*/
}

#main > .mainContent:after {
    content: "";
    clear: both;
    display: table;
}

#compactBar {
    display: none;
    font-size: 18px;
    font-weight: bold;
    color: #ddd;
    border-bottom: 1px solid #555;
}

#compactBar a {
    display: block;
}

#compactBar a:hover {
    background: #505055;
}

#compactBar a > img {
    display: block;
    padding: 5px;
}

.contentContainer {
    padding: 30px;
}



/*** Two Column Layout ***/

div.twoColumns {
    margin-top: 20px;
    margin-bottom: 20px;
}

div.twoColumns > div.left {
    float: left;
    width: 600px;
}

div.twoColumns > div.right {
    float: right;
    width: 320px;
}

/*** Footer ***/

#footer {
    width: 100%;
    bottom: 0;

    color: #888;
    text-align: right;
    padding: 10px;
    white-space: nowrap;
    pointer-events: none;
}

#footer p {
    text-align: right;
}

#footer a {
    text-decoration: none;
}

#footer > a:hover {
    text-decoration: underline;
}

#footer img.pjLogo {
    display: block;
    max-width: 160px;
    float: right;
    /* opacity: 0.50; */
    margin-right: 70px;
}


/***************/
/*** SIDEBAR ***/

.sideMenu {
    white-space: nowrap;
    color: #fff;
    padding-top: 0;
}

.sideMenu h2 {
    font-size: 100%;
    font-weight: bold;
    padding: 0 10px;
    margin: 10px 0;
    color: #fff;
    position: relative;
}

.sideMenu .title {
    font-size: 110%;
    font-weight: bold;
    padding: 8px 12px;
    display: block;
    color: #ddd;
}

.sideMenu a {
    color: #fff;

    font-weight: 500;
    line-height: 18px;
    padding: 8px 12px;
    display: block;
    margin: 0px;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    opacity: 0.8;
    background: rgba(255,255,255,0);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

.sideMenu a .item-name {
    padding: 0 10px;
}

.sideMenu a:hover {
    background: #999999;
    cursor: pointer;
    opacity: 1;
}

.sideSection {
    border-top: 1px solid #444;
    padding-bottom: 15px;
}

.sideMenu a.active {
    background: #4484ce;
    color: #fff;
    opacity: 1;
}

.sideMenu a.active:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #f5f5f5;
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 12px;
}

.sideMenu a.favourites {
    padding: 4px 0px;
    margin: 0px;
    float: right;
    font-size: 18px;
    line-height: 18px;
}

.sideMenu a.favourites > span {
    font-size: 18px;
    line-height: 18px;
}

.sideMenu a.favourites:hover {
    background: none;
}

/*** Sidebar Folder List ***/

.sideMenu #tree {
    padding: 0 10px;
}

.sideMenu #tree a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    display: inline;
    line-height: 1;
}


/*** Toolbar ***/

div.toolbarButtons {
    white-space: nowrap;
    padding: 20px 25px 0 25px;
    vertical-align: middle;
}

div.toolbarLocked {
    padding: 12px;
    vertical-align: middle !important;
    color: #fff;
    background: #702020;
    background-size: 32px;
}

div.toolbarLocked p {

    line-height: 120%;
    color: #fff;
    margin: 0;
    display: inline;
}

div.toolbarLocked p > a {
    color: #fff;
}

.toolbar-icon {
    display: inline-block;
    float: left;
    font-size: 32px;
    padding: 0 20px;
}

.detached {
    margin: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

div.toolbarButtons div.item {
    display: inline-block;
    position: relative;
    float: left;
    margin-right: 10px;
    margin-left: 0;
}

div.toolbarButtons div.item.right {
    float: right;
    margin-left: 10px;
    margin-right: 0;
    position: relative;
}

div.toolbarButtons div.item > div.label {
    margin: 2px;
    padding: 0;
    float: left;
    line-height: 32px;
    font-size: 70%;
    font-weight: bold;
    color: #555;
    position: relative;
}

div.toolbarButtons div.actionItem {
    float: left;
    margin-right: 5px;
    padding: 0 5px;
    height: 40px;
    border-right: 1px dotted #ccc;
    position: relative;
}


div.toolbarButtons #toggleColumns {
    position: relative;
}

/*** Button Bar (for template editor) ***/

.buttonBar {
    position: relative;
}

/*** Tile Size Toolbar ***/

.size-selector {
    position: relative;
    height: 28px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    font-weight: bold;
}

.size-selector input[type="radio"] {
    display: none;
    outline: none;
}

.size-selector label {
    width: 20px !important;
    min-width: 0px !important;
    display: inline;
    padding: 5px 4px;
    margin: 0;
    cursor: pointer;
    line-height: 17px;
    font-size: 10px;
    color: #888;
    text-align: center;
}

.size-selector label:last-child {
    border-right: none;
}

.size-selector img {
    display: block;
    margin: 0 auto;
    padding: 0;
}

.size-selector input[type="radio"]:checked+label{
    outline: none;
    background-color: #e0e0e0;
    color: #444;
}

.size-selector label:hover {
    background: #e0e0e0 rgba(0,0,0,0.25);
}

.size-selector label:active {
    background: #e0e0e0 rgba(0,0,0,0.5);
}


/*** Large Page Header (dashboard etc) / Styling for HeaderWidget (headerWidget.php) ***/

.mainHeader {
    padding: 20px;
    padding-bottom: 0;
}

.mainHeader .button, #toolbar .button {
    line-height: 26px;
}

.mainButtons {
    float: right;
}

.mainButtons .button {
    margin: 4px 2px;
    line-height: 26px;
}

.pageTitle {
    font-size: 150%;
    line-height: 100%;
    font-weight: 300;
    margin: 0px 20px;
    margin-top: 15px;
    text-align: left;
    letter-spacing: -.05em;
    color: #666;
    min-height: 44px;   /* When action buttons are set but a title is then 'header' height is smaller then expected. */
}

.largeTitle {
    font-size: 200%;
    vertical-align: middle;
    font-weight: 300;
    line-height: 36px;
    color: #999;
    letter-spacing: -1px;
    margin-top: 5px;
    margin-bottom: 0px;
}

.largeTitle span {
    margin-right: 10px;
    vertical-align: middle;
    font-size: 180% !important;
}

.mainHeader > p.large {
    margin: 0px;
    margin-top: 3px;
    color: #888;
    display: none;
}

.titleImage {
    display: inline-block;
    float: left;
    margin-right: 30px;
    border-radius: 5px;
}

.titleImage {
    width: 50px;
    height: 50px;
}


/*** Standard Page Header inc. Toolbar ***/

/*** Client Sidebar Panel ***/

.clientBox {
    position: relative;
}

.clientBox a {
    text-decoration: none;
}

.clientBoxMenu {
    display: none;
}

.clientBoxLink {
    width: 100%;
    padding: 10px;
    display: block;
    clear: both;
    background-color: #999999;
}

.clientBoxLink > .clientName {

    font-weight: bold;
    line-height: 110%;
    color: #fff;
    padding: 0px 8px;
    vertical-align: middle;
    display: table-cell;
    width: 145px;
    height: 32px;
    max-width: 145px !important;
    white-space: normal;
}

.clientBoxLink > a.avatar {
    padding: 0;
    background: #555;
    border-radius: 5px;
    line-height: 30px;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    float: left;
    font-weight: bold;
    color: #fff;
    opacity: 1;
    text-decoration: none;
    cursor: default;
}

.clientBoxLink img {
    display: block;
    width: 100%;
    height: 100%;
}

.clientSelectMenu {
    position: absolute;
    width: 250px;
    top: 62px;
    bottom: 0px;
    left: -250px;
    background: #404040;
    padding: 10px;
    z-index: 4;
    -webkit-box-shadow: 1px 0px 3px 0px rgba(0, 0, 0, .35);
    box-shadow: 1px 0px 3px 0px rgba(0, 0, 0, .35);
    display: none;
}

.clientSelectMenu .title {
    line-height: 120%;
    font-size: 110%;
    font-weight: bold;
    display: block;
    color: #ddd;
    margin-top: 0px;
    margin-bottom: 10px;
}

.clientSelectMenu div.list {
    max-height: 500px;
    min-height: 100px;
    overflow: auto;
    border: 1px solid #666;
    background: #404040;
    border-radius: 3px;
    margin: 0;
    padding: 5px;
}

.clientSelectMenu div p {

    line-height: 120%;
    color: #ddd;
    margin: 0;
    padding: 5px;
}

.clientSelectMenu a {
    font-size: 100%;
    line-height: 100%;
    width: 100%;
    height: 36px;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    padding-right: 25px;
    vertical-align: middle;
    text-decoration: none;
    display: table-cell;
}

.clientSelectMenu a:hover {
    background: #555;
}

.clientSelectMenu a img {
    margin-right: 10px;
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

div.clientBoxWidget {
    position: absolute;
    display: block;
    background: #333;
    width: 250px;
    border-bottom: 1px solid #555;
    display: none;
}

div.clientBoxWidget .clientBoxLink a {
    padding: 7px;
    background: url(/images/arrows/11px-white-down.png) 96% center no-repeat;
}

div.clientBoxWidget .clientBoxLink a:hover {
    background: #555 url(/images/arrows/arrow-updown-white.png) 96% center no-repeat;
}


/*** Page Header ***/

.pageHeader {
    width: 100%;
    display: table;
}

.pageHeaderRow {
    display: table-row;
}

.pageButtons {
    float: right;
}

.footerContent {
    text-align: left;
    overflow: auto;
}

.floatingMenu {
    position: absolute !important;
    background: #333;
    border-left: 2px solid #111;
    width: 220px;
    left: 42px;
    top: 0px !important;
    display: none;
    z-index: 100;
}

.floatingMenu .title {
    margin-top: 0;
    border-top: none;
}

/*** Job View Vertical Column Layout ***/
/*
#orderDetailsContainer {
    display: table-cell;
    vertical-align: top;
    width: 35%;
    height: 100%;
    max-width: 400px;
}
*/
#OrderLeftColumnContainer {
    display: table-cell;
    padding-right: 10px;
    vertical-align: top;
    /* width: 33%; */
    height: 100%;
    max-width: 400px;
}

#jobDetailsContainer {
    display: table-cell;
    padding: 0 10px;
    vertical-align: top;
    width: 38%;
    height: 100%;
}

#jobTimelineContainer {
    display: table-cell;
    padding-left: 10px;
    vertical-align: top;
    width: auto;
    height: 100%;
    max-width: 400px;
}


/*** CONTRACTED LAYOUT (must be at end of file) ***/

/*** For contracted layout ***/

#pageContainer.contracted {
    padding-top: 60px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
    border-radius: 2px;
}

#siteTop.contracted {
    position: absolute;
    height: 60px;
    z-index: 100;
}


/*** For contracted sidebar ***/

#main.contracted {
    margin-left: 42px;
}

#sidebar.contracted {
    width: auto;
}

#sidebar.contracted .title {
    display: none;
}

#sidebar.contracted .item-name {
    display: none;
}

#sidebar.contracted .clientBox {
    border: none;
}

#sidebar.contracted .clientBoxMenu {
    display: block;
}

#sidebar.contracted .clientBoxLink {
    padding: 0;
}

#sidebar.contracted .clientName {
    display: none;
}

#sidebar.contracted .favourites {
    display: block;
    float: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
}

#sidebar.contracted .favourites > span {
    display: none;
}

#sidebar.contracted a.avatar {
    padding: 0;
    background: none;
    border-radius: 0;
    float: none;
    width: 42px;
    height: 42px;
    line-height: 40px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#sidebar .icon-toggle-sidebar:before {
    content: "\e664";
}

#sidebar.contracted .icon-toggle-sidebar:before {
    content: "\e665";
}

/*** Submenus, drop-down menus etc ***/

.accMenu {
    position: absolute;
    /*    background: #222;*/
    background: #636363;
    color: #fff;
    line-height: 120%;
    border-radius: 0px 0px 3px 3px;
    width: auto;
    display: none;
    margin: 0;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, .35);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, .35);
    top: 58px;
    right: 0;
    font-weight: 500;
}

.accMenu:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #222;
    position: absolute;
    z-index: 1000;
    right: 14px;
    top: -8px;
}

.accMenu > div {
    padding: 0px;
    width: auto;
}

.accMenu div.title {
    font-size: 110%;
    font-weight: bold;
    padding: 12px 12px;
    border-bottom: 1px solid #444;
    display: block;
    color: #ddd;
    margin-bottom: 10px;
}

.accMenu div.title:first-child {
    margin-top: 0 !important;
}

.accMenu a {
    color: #fff;
    font-weight: 500;
    line-height: 17px;
    padding: 6px 6px;
    display: block;
    margin: 0px;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    opacity: 0.8;
    background: rgba(255,255,255,0);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

.accMenu a.active {
    background: #4484ce;
}

.accMenu a:hover {
    background: #999999;
    cursor: pointer;
    opacity: 1;
}

.accMenu hr {
    margin: 0;
    height: 1px;
    border-color: #444;
}

div.links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

div.mainLink .pullDownMenu {
    position: absolute;
    rigth: 0;
    border-left: 1px solid #555;
    display: inline-block;
    height: 56px;
    width: 25px;
    margin-left: 25px;
    text-align: center;
}

div.mainLink .pullDownMenu:hover {
    background: rgba(255,255,255,0.25);
}

.menu, .links, .mainLink  {
    height: 100%;
}

div.mainLink > a {
    color: #fff;
    display: block;
    font-weight: 700;
    padding: 0 20px 0px 15px;
    white-space: nowrap;
    text-transform: uppercase;
    background: rgba(255,255,255,0);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Style for settings button */
/*.settingsLink {
    color: #ffcc00 !important;  Yellow color for settings button 
}*/

div.mainLink > a:hover:not(.disabled):not(.disabled2):not(.active)
{
    background: #999999;
    cursor: pointer;
    opacity: 1;
}
.mainLink > a.active {
    background: #4484ce;
}

div.mainLink > a:active {
    background: rgba(0,0,0,0.25);
}

div.mainLink.active {
    background: rgba(0,0,0,0.25);
    border-left: 1px solid #111;
    border-right: 1px solid #555;
    -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 1);
    box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 1);
    border-radius: 3px;
}


div.mainLinkSSButton {
    background: #636363;
}

div.mainLinkSSButton .pullDownMenu {
    position: absolute;
    rigth: 0;
    border-left: 1px solid #555;
    display: inline-block;
    height: 56px;
    width: 25px;
    margin-left: 25px;
    text-align: center;
}

div.mainLinkSSButton .pullDownMenu:hover {
    background: rgba(255,255,255,0.25);
}

.menu, .links, .mainLinkSSButton  {
    height: 100%;
}

div.mainLinkSSButton > a {
    color: #fff;
    display: block;
    font-weight: 700;
    padding: 0 20px 0px 15px;
    white-space: nowrap;
    text-transform: uppercase;
    background: rgba(255,255,255,0);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
}

div.mainLinkSSButton > a:hover:not(.disabled):not(.disabled2):not(.active)
{
    background: #999999;
    cursor: pointer;
    opacity: 1;
}
.mainLinkSSButton > a.active {
    background: #4484ce;
}

div.mainLinkSSButton > a:active {
    background: rgba(0,0,0,0.25);
}

div.mainLinkSSButton.active {
    background: rgba(0,0,0,0.25);
    border-left: 1px solid #111;
    border-right: 1px solid #555;
    -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 1);
    box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 1);
    border-radius: 3px;
}


/*** Breadcrumbs ***/

div.breadcrumbs {

    color: #777;
    background: #fff;
    color: #333;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
    line-height: 32px;
}

div.breadcrumbs a {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    padding-right: 25px;
    padding-left: 25px;
    position: relative;
    margin-left: -17px;
    background: url(/images/arrows/breadcrumb-off.png) right center no-repeat;
}

div.breadcrumbs a:hover {
    background: url(/images/arrows/breadcrumb-on.png) right center no-repeat;
    color: #333;
}

div.breadcrumbs a:first-child {
    padding-left: 15px;
    margin-left: 0px;
    border-left: none;
}

div.breadcrumbs span, div.breadcrumbs h1 {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    margin: 0 10px;
    font-size: 110%;
    line-height: 30px;
    position: relative;
}


/*** Drop-down menus ***/

.popMenu {
    border-radius: 3px;
    min-width: 350px;
    position: absolute;
    background: #333;
    -webkit-box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, .6);
    box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, .6);
    color: #fff;
    line-height: 120%;
    padding: 15px;
    left: -190px;
    z-index: 200;
}

.popMenu.right {
    right: 0px;
}

.popMenu p {

}

.popMenu label, .popMenu label.top {
    color: #4484ce;
    float: none;
    font-size: 14px;
}

.popMenu a {
    display: block;
    text-decoration: none;
    padding: 5px;

    color: #ddd;
    margin-top: 2px;
    margin-bottom: 2px;
}

.popMenu a:hover:not(.disabled):not(.disabled2) {
    display: block;
    text-decoration: none;
    padding: 5px;

    cursor: pointer;
    color: #fff;
}

.popMenu a > img {
    float: left;
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-right: 8px;
    padding-right: 9px;
    border-right: 1px dotted #777;
}

.inlineMenu {
    border: 1px solid #dddddd;
    border-radius: 3px;
    position: relative;
    background: #fff;
    padding: 0;
}

.dropdownMenu {
    border: 1px solid #dddddd;
    border-radius: 0px 0px 5px 5px;
    min-width: 200px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #fff;
    -webkit-box-shadow:  0px 4px 12px 0px rgba(0, 0, 0, .30);
    box-shadow:  0px 4px 12px 0px rgba(0, 0, 0, .30);
    z-index: 100;
}

.dropdownMenuLibrary {
    left: auto;
    right: 0;
}


.dropdownMenu > div {
    padding: 5px 8px;
}

.dropdownMenu .row {
    padding: 8px;
}

.dropdownMenu *:first-child, .inlineMenu *:first-child {
    margin-top: 0;
}

.dropdownMenu *:last-child, .inlineMenu *:last-child {
    margin-bottom: 0;
}

.dropdownMenu label {
    line-height: 100%;
}

.dropdownMenu hr {
    margin: 3px 0;
}

.dropdownMenu a, .inlineMenu a {
    display: block;
    text-decoration: none;
    padding: 8px;

    line-height: 100%;
    /*color: #444 !important;*/ /* Cant be !important as toggle form can override this color*/
    color: #444;
    font-weight: normal !important;
}

.dropdownMenu a:hover:not(.disabled):not(.disabled2), .inlineMenu a:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
    background-color: #f5f5f5;
}


.dropdownMenu a > img, .inlineMenu a > img {
    float: left;
    display: block;
    padding-top: 1px;
    padding-bottom: 3px;
    margin-right: 5px;
    padding-right: 6px;
    border-right: 1px dotted #bbb;
}

div.slideDownMenu {
    position: relative;

    display: none;
    color: #fff;
    padding: 5px;
}

div.slideDownMenu a {
    display: block;
    color: #fff;
    text-decoration: none;
    line-height: 28px;
    font-size: 100%;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 3px;
}

div.slideDownMenu a:hover {
    background: #555;
}

div.slideDownMenu a > img {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

#globalConfig a > img {
    width: 24px !important;
    height: 24px !important;
}

div.dropDownMenus {
    position: fixed;
    top: 64px;
    width: 100%;
}

#compactBar a {
    text-decoration: none;
    color: #fff;
    text-align: center;
    padding: 5px;
}

/*********************************/
/*** BUTTONS from buttons.css ***/
/*******************************/

div.buttons {
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 0;
}

.ui-dialog div.buttons .button {
    min-width: 80px;
    text-align: center;
}

div.buttons a.button {
    margin-left: 8px;
}

.button, .uiButton, .ui-button, xinput.button {
    border-radius: 3px;
    margin: 1px;
    color: #444444;
    display: inline-block;
    font-weight: bold;
    line-height: 23px;
    outline: none;
    padding: 5px 16px;
    padding-bottom: 4px;
    text-decoration: none;
    white-space: nowrap;
    background-color: #ffffff;
    border: none;
    position: relative;
    text-align: center;
    border: 1px solid #d0d0d0;
    box-shadow: 0px 3px 5px -3px #888;
}

.button.buttonSmall {
    padding: 2px 6px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    display: inline;
    font-weight: normal;
}

.buttonSmall [class^="icon-"] {
    position: relative;
    top: 1px;
    margin-left: -3px;
}

.button:hover:not(.disabled):not(.disabled2), .uiButton:hover:not(.disabled):not(.disabled2), .ui-button:hover:not(.disabled):not(.disabled2), input.button:hover:not(.disabled):not(.disabled2) {
    color: #ffffff;
    background: rgba(0,0,0,0.5);
    border-color: transparent;
    cursor: pointer;
}

.button.active {
    background: rgba(0,0,0,0.75);
    color: #ffffff;
    border-color: transparent;
}

.button.primary {
    color: #ffffff;
    background-color: #617ea8;
    border-color: transparent;
}
.button.primary.disabled2 {
    opacity: 0.5;
}
.button.secondary {
    color: #aaaaaa;
    background-color: #f0f0f4;
}

.button.secondary:hover {
    color: #aaaaaa;
    background-color: #f0f0f4;
    background-image: none;
}

.button.secondary.autoSave:hover {
    color: #aaaaaa;
    background-color: #f0f0f4;
    cursor: default;
}

.button.amber {
    color: #ffffff;
    background-color: #606066;
    border-color: transparent;
}

.button.amber:hover {
    color: #ffffff;
    background: rgba(0,0,0,0.5);
}

.button.highlight {
    color: #ffffff;
    background-color: #5fa5ff;
    border: 1px #5fa5ff solid;
    box-shadow: 0 3px 5px -3px #5fa5ff;
}

.button.highlight:hover {
    color: #ffffff;
    background: rgba(0,0,0,0.5);
}

.button img, .uiButton img, .ui-button img, input.button img {
    float: left;
    margin-right: 8px;
    top: 4px;
    left: -4px;
    position: relative;
    display: inline-block;
}

.button.iconRight img {
    float: right;
    margin-left: 8px;
    top: 4px;
    left: 12px;
    position: relative;
    display: inline-block;
}

a.button-right, input.button-right {
    float: right;
    margin-left: 5px;
}

/*
* To make all header button bigger use this style
* .button.medium, .mainHeader .button, .pageHeader .button {
*/

.button.medium {
    padding: 7px 20px;
    padding-bottom: 8px;
    font-size: 110%;
}

.button.large {
    padding: 10px 26px;
    font-size: 120%;
}

.saveButton {
    foat: right;
}

a.button.arrowDown span:last-child {
    background-image: url(/images/arrows/9px-semiblack-down.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
}

/* Table Butttons */

.buttonContainer a {
    min-width: 30px;
}

.items a.iconButton {
    color: #444444;
}

.buttonContainer a, .button-column a, td a.button {
    border-radius: 3px;
    margin: 1px;
    font-size: inherit;
    color: #444444;
    display: inline-block;
    font-weight: bold;
    line-height: 20px;
    outline: none;
    padding: 4px 8px;
    text-decoration: none;
    white-space: nowrap;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    position: relative;
    text-align: center;
    box-shadow: 0px 3px 5px -3px #888;
}

.buttonContainer a.amber {
    background-color: #ea5b0c;
    border: none;
    color: white;
}

.button-column a.primary {
    color: #ffffff;
    background-color: #0079c4;
    border-color: transparent;
}
.button-column a.primary:hover {
    background: #606066;
    border-color: transparent;
    color: #fff;
}

.buttonContainer a:hover, .button-column a:hover, td a.button:hover {
    background: rgba(0,0,0,0.5);
    border-color: transparent;
    color: #fff;
}

.buttonContainer a img, .button-column a img, td a.button img {
    vertical-align: middle;
    margin-top: -3px;
}

/* Buttons which contain icons only */

a.iconButton {
    border-radius: 3px;
    margin: 0 1px;
    font-size: inherit;
    /* color: #444444; */
    display: inline-block;
    line-height: 20px;
    outline: none;
    padding: 2px 5px;
    text-decoration: none;
    white-space: nowrap;
    background-color: #ffffff;
    border: none;
    position: relative;
    text-align: center;
    border: 1px solid #d0d0d0;
    box-shadow: 0px 3px 5px -3px #888;
}

a.iconButton.urgent {
    background-color: #fa2e2e;
    color: #fff;
}
a.iconButton:hover:not(.disabled):not(.disabled2):not(.grey) {
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    border-color: transparent;
    color: #fff;
}

a.iconButton img {
    vertical-align: middle;
    margin-top: -3px;
}

a.iconButton > span {
}

a.iconWidget {
    border-radius: 3px;
    margin: 1px;
    font-size: inherit;
    color: #fff;
    display: inline-block;
    line-height: 20px;
    padding: 2px;
    width: 24px;
    height: 24px;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
    background-color: #666;
    border: none;
    position: relative;
    text-align: center;
}

a.iconWidget:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
    background-color: #444;
}


/* Fieldset buttons */

/*
fieldset .button {
    padding: 2px 14px;
}
*/
/* Other */

.detailsBox.boxList .buttons {
    position: absolute;
    right: 10px;
    top: 0;
    white-space: nowrap;
    width: 150px;
}

.popupNotice a.button {
    color: #444444;
}


.boxSmall a.iconButton>span {
    /*display:none; https://admin-printjob.virtualbox/damsFolder/view Icons are not visible when its enabled. Ask Mario. */
}

.infoButton {
    padding: 4px;
    position: inline-block;
}

.infoButton > img {
    float: none;
    margin: 0;
}

.pageSwitch {

    color: #666666;
    display: inline-block;
    font-weight: bold;
    line-height: 16px;
    outline: none;
    padding: 10px 0;
    padding-bottom: 14px;
    text-decoration: none;
    white-space: nowrap;
    text-align: left;
    margin-right: 25px;
}

.pageSwitch img {
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
}

.pageSwitch.active {
    color: #444444;
    background: url(/images/arrows/11px-grey-down.png) bottom center no-repeat;
}

.pageSwitch:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
    color: #4484ce;
}

.timelineMessage .button {
    text-indent: 0px;
}


/*FROM pj-theme.css*/
.button.amber, .background-amber {
    background-color: #ea5b0c;
    color: white;
}

.button.amber:hover:not(.disabled):not(.disabled2) {
    background-color: #ea5b0c;
}

/* a.thumb_link is used as a wrapper in product catalogue */
a.thumb_link {
    color: #2a9bef;
    font-weight: bold;
    font-family: Roboto;
    font-size: 100%;
    height: 45px;
    line-height: 110%;
    margin: 8px 0 0;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
}


/*******************************/
/*** TABLES from tables.css ***/
/*****************************/

table {
    border-collapse: collapse;
}

th.center, td.center {
    text-align: center;
}

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

table.items {
    background: none;
    width: 100%;
    text-align: left;
    /* border: 1px solid #ccc; */
    border: none;
}

.tabs > div > table.items {
    border-top: 0;
}

table.items thead tr th, table.items tfoot tr th {
    text-align: left;
    padding: 10px 10px;
    vertical-align: middle;
    /*    background-color: #ffffff;
        background: rgb(255,255,255);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
    */
    background: #ddd;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
    color: #777;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 100%;
    font-size: 100%;
}

table.items tbody {
    overflow: scroll;
}

table.items tbody tr.not-viewed td:first-child {
    padding-left: 9px;
}

table.items thead tr th.number, table.items tfoot tr th.number {
    width: 1%;
}

table.items.topalign td {
    vertical-align: top;
}

table.items td.small {

}

table.items thead tr .header {
    border-right: 1px solid #eee;
}

table.items thead tr .header:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
}

table.items thead tr .header:last-child {
    border-right: 1px solid #ccc;
}

table.items tbody td {
    color: #444;
    padding: 8px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eaeaea;
}

table.items tbody tr {
    background-color: #fff;
}

table.items tbody tr:last-child > td {
    /* border-bottom: 1px solid #ccc; */
    border-bottom: none;
}

table.items tbody td .comment {
    padding: 4px 8px;
    padding-bottom: 6px;
    line-height: 130%;
    margin-top: 8px;
    margin-bottom: 4px;
    border-radius: 5px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    margin-left: 35px;
    font-style: italic;
}

table.items tbody td .comment img {
    margin-left: -40px;
    margin-right: 15px;
}

table.items tbody tr.odd {
    background-color: #fafafa;
}

table.items thead tr {
    background-color: #efefef;
}

table.items th.icon {
    width: 16px;
    vertical-align: top;
    text-align: left;
}

table.items input[type="checkbox"] {
    vertical-align: baseline;
}

table.items td.orderStatus {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

table.items td.orderStatus > img {
    display: block;
}

table.items td.orderStatus.quote {
    background-color: rgb(255,144,96) !important;
}

table.items td.orderStatus.product {
    background-color: rgb(64,220,160) !important;
}

table.items td.orderStatus.stock {
    background-color: rgb(128,192,255) !important;
}

table.items tr.new {
    border-left: 3px solid #4484ce;
}

table.items tr.new > td {
    background-color: #ffffdd !important;
    font-weight: bold;
}

table.items td a.secondary {
    color: #555;
    text-decoration: none;
}

table.items td a.secondary:hover {
    color: #4484ce;
    text-decoration: underline;
}

table.items tbody tr:hover {
    background-color: #f0f0f0;
}

/**
    Tablesorter (items) customized by Mario until Peter will use Yii's elements
    The reason of this customisation is that we have different html structure for header links

    In CGridview by default only <a> located in <th> gets class .asc .desc
    in pj.js after every ajax call the class is added to the <th> element
    to make it looks like in Peter's 'design - copy_asc_desc() function
**/

/* Ask Mario about it */

table.items thead tr th.asc a {
    background-image: url(/images/arrows/9px-semiblack-up.png);
}

/* Ask Mario about it */
table.items thead tr th.desc a {
    background-image: url(/images/arrows/9px-semiblack-down.png);
}

/* Ask Mario about it */
table.items thead tr th a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    color: #777;
    padding: 2px 0;
    padding-right: 12px;
    background-image: url(/images/arrows/9px-semiblack-outline-updown.png);
    background-position: 100% center;
    background-repeat: no-repeat;
}

table.items thead tr th a:hover {
    color: #3e8eca;
}

/* Ask Mario about it */
table.items thead tr th a.asc, table.items thead tr th a.desc {
    color: #4484ce;
}

table.items tbody tr.rowSelected td{
    background: #ffffe1 !important;
}

.compact tbody tr:hover {
    background-color: #f0f0f0 !important;
}

.compact tbody td {
    padding: 6px 4px !important;
    vertical-align: middle;
}

.compact tbody td input {

    line-height: 150%;
    padding: 3px;
    width: 100%;
}

.compact tbody td select {

    line-height: 150%;
    padding: 3px;
    width: 100%;
}

/* Ask Mario about it */
.popupGridView table.items tr:hover {
    -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
}

/* Ask Mario about it */
.popupGridView table.items tr td:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
}

/* Ask Mario about it */
.popupGridView table.items tr.selected {
    -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 255, 0, .6);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 255, 0, .6);
}



/*** Detail View / Zii / modified CSS ***/

table.detail-view .null {
    color: silver;
}

table.detail-view {
    background: #fff;
    border-collapse: collapse;
    width: 100%;
    border: 1px #bbb solid;
}

table.detail-view th, table.detail-view td {
    font-size: 100%;
    border: none;
    padding: 8px 12px;
}

table.detail-view th {
    text-align: right;
    width: 150px;
    min-width: 150px;
    white-space: nowrap;
    color: #777;
    background: #fff;
    border: none;
    border-right: 1px #ddd solid;
}

table.detail-view tr.odd {
    background: #fafafe;
}

table.detail-view tr.even {
    background: #ffffff;
}

table.detail-view tr.odd th {
}

table.detail-view tr.even th {
}

/*Order Manager*/

table.items tbody tr.not-viewed {
    font-weight: bold;
    border-left: 3px solid #4484ce;
}

table.items tbody tr.not-viewed td {
    background-color: #ffffcc;
}

.grid-view table.items .not-viewed td a {
    color: #003E7A;
}

table .inactiveProduct {
    background-image: url("/images/backgrounds/diagonal-light.png");
    color: #666;
    opacity: 0.5;
}
table .inactiveProduct:hover {
    background-image: url("/images/backgrounds/diagonal-light.png") !important;
    color: #999;
    opacity: 0.7;
}

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

/****************************/
/*** FORMS from forms.css***/
/**************************/

form {
    margin: 0;
    padding: 0;
}

input, select, textarea {
    outline: none;
    font-family: Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
}

input[type="checkbox"] {
    padding: 0;
    margin: 0;
    vertical-align: baseline;
    margin: 4px 2px;
    margin-right: 4px;
}

input[type="radio"] {
    padding: 0;
    margin: 0;
    vertical-align: baseline;
    margin: 2px;
    margin-right: 4px;
}

input.right[type="text"] {
    text-align: right;
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 4px;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus  {
    border: 1px solid #aaa;
    background: #f8f8f8;
    -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
}

textarea {
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 4px;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

textarea:focus {
    border: 1px solid #aaa;
    background: #f8f8f8;
    -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
}

select {
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 3px;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

select:focus {
    border: 1px solid #aaa;
    background: #f8f8f8;
    -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
}

.leftPanel, form > div.left {
    float: left;
    width:49%;
    clear: none;
}

.rightPanel, form > div.right {
    float: right;
    width:49%;
    clear: none;
}

div.form .hint {
    margin: 0;
    padding: 0;
    color: #999;
}

div.form span.required {
    color: red;
}

div.form div.error label:first-child,
div.form label.error,
div.form span.error,
.form .error,
input.error {
    color: #C00;
}

div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error,
input.error {
    background-color: #ffcfc9;
    border-color: #fc978e;
    -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, .2);
    background: #ffdfdf url(/images/icons/exclamation-red.png) 96% center no-repeat;
}

div.form .errorSummary {
    border: 2px solid #C00;
    padding: 7px 7px 12px 7px;
    margin: 0 0 20px 0;
    background: #FEE;
}

div.form .errorMessage {
    margin: 15px 0;
    padding-top: 9px;
    padding-bottom: 8px;
    padding-left: 35px;
    padding-right: 10px;
    text-align: left;
    color: #dd0000;
    background: #f8f8f8 url(/images/icons/exclamation.png) 10px 10px no-repeat;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: bold;
}

div.form .errorSummary p {
    margin: 0;
    padding: 5px;
}

div.form .errorSummary ul {
    margin: 0;
    padding: 0 0 0 20px;
}

div.wide.form label {
    float: left;
    margin-right: 10px;
    position: relative;
    text-align: right;
    width: 100px;
}

div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage {
    clear: left;
}

.value_filter {
    width: 19px;
    height: 19px;
    text-align: center;
    vertical-align: top;
    border-radius: 16px;
    line-height: 16px;
}

.value_filter:hover {
    background: #bbb;
}

.unit_designator {
    color: #888;
    margin-left: 5px;
    line-height: 120%;

}

/***********************************************/
/*** COMMON ELEMENTS from commonElements.css***/
/*********************************************/
.optionsBar {
    margin: 20px 0;
    position: relative;
    width: fit-content;
}

.dropdown {
    position: relative;
    margin: 0 2px;
    padding: 0;
    display: inline-block;
}

a.dropdown .selected {
    display: block;
}

.dropdown a.handle {
    border: 1px solid #ccc;
    background: #f5f5f5 url(/images/arrows/11px-grey-down.png) 96% center no-repeat;
    padding: 4px 14px;
    padding-right: 32px;

    color: #444;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 20px;
    outline: none;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
}

.dropdown a.handle:hover:not(.disabled):not(.disabled2) {
    background: #f0f0f0 url(/images/arrows/arrow-updown.png) 96% center no-repeat;
    padding: 4px 14px;
    padding-right: 32px;

    color: #444;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 20px;
    outline: none;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.dropdown a.handle.active {
    border: 1px solid rgb(54,140,228);
    background: rgb(122,188,255) url(/images/arrows/11px-grey-up.png) 96% center no-repeat;
    color: #fff;
}

.selectImageOptions {
    padding: 3px;

    white-space: nowrap;
}

.dropdownBox {
    border: 1px solid #ccc;
    background: #f9f9f9;
    padding: 3px;

    color: #444;
    -moz-border-radius: 3px;
    border-radius: 0px 3px 3px 3px;
    line-height: 20px;
    outline: none;
    white-space: nowrap;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    display: none;
}

.dropdownBox:hover:not(.disabled):not(.disabled2), .selectImageOptions:hover:not(.disabled):not(.disabled2) {
    cursor: pointer;
}

.dropdownBox a.option, .selectImageOptions  a.option {
    font-weight: normal;
    display: block;
    color: #555;
    padding: 3px 8px;
    padding-right: 32px;
    text-decoration: none;
    margin: 2px;
    border-radius: 1px;
    min-width: 120px;
}

.dropdownBox a.option:hover, .selectImageOptions a.option:hover {
    color: #fff;
    background: rgb(122,188,255);
}

.dropdownBox a.option.active, .selectImageOptions a.option.active {
    background: #fff;
    color: #4484ce;
}

.dropdownBox a.option img, .selectImageOptions a.option img {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    vertical-align: baseline;
    top: 3px;
}

.dropdownBox span.option, .selectImageOptions span.option {
    font-weight: normal;
    display: block;
    color: #555;
    padding: 3px 6px;
    padding-right: 32px;
    margin: 2px;
    min-width: 120px;
}

.dropdownBox hr, .selectImageOptions hr {
    margin: 0;
}

.product_field_data_input.nonEditableField {
    border: 1px solid transparent;
    background: transparent;
}

fieldset div.jobActive {
    position: relative;
    background: #3a454c url(/images/arrows/11px-white-right.png) 99% center no-repeat;
    color: white;
    padding-right: 3px;
    border-radius: 3px;
}

table.job_list tr.jobActive {
    color: white;
    background-color: #3a454c;
}

fieldset div.jobLink {
    position: relative;
    cursor: pointer;
    padding-right: 3px;
}

table.job_list tr.jobLink:hover, fieldset div.jobLink:hover {
    position: relative;
    background: url(/images/arrows/11px-grey-right.png) 99% center no-repeat;
    border-radius: 4px;
    padding-right: 3px;
    color: #777;
    cursor: pointer;
}

/* Arrow in the last column */
table.job_list tr.jobActive td:last-child {
    background: url(/images/arrows/11px-white-right.png) right 4px center no-repeat;
    color: white;
}

table.job_list tr.jobLink:hover td:last-child {
    background: url(/images/arrows/11px-grey-right.png) right 4px center no-repeat;
}

.mark_to_delete * {
    color: lightgrey !important;
}

div.blockMsg {
    width: 20%;
    top: 30%;
    left: 40%;
    text-align: center;
    color: #444440;
    background-color: rgba(255,255,255,1);
    border: none;
    padding: 25px;
    color: #fff;
    cursor: wait;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.55);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.55);
    border-radius: 3px;
    overflow: hidden;
}

.please_wait {
    color: #444440;
    font-size: 130%;
}

a.pageNumbers {
    min-width: 28px;
}

fieldset.basic {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.processing {
    background: url("/images/processing.gif") no-repeat center center;
}

/***********************************************/
/*** IMAGE CONTROLLS from imageControlls.css***/
/*********************************************/
.aap_logo_img_prev {
    position: relative;
}

.iwcImageWrapper img, .aap_logo_img_prev img {
    display: inline-block;
    border-radius: 5px;
    background: #fff url(/images/backgrounds/diagonal-light.png);
    border: 1px solid #ccc;
    padding: 1px;
    position: relative;
    box-sizing: border-box;
}

/***************************************************/
/*** PRODUCT CATALOGUE from productCatalogue.css***/
/*************************************************/
/* General */

.productList {
    width: 100%;
}

.detailsBox {
    float: left;
    position: relative;
    border: #ddd solid 1px;
    border-radius: 5px;
    background: #eee;
    margin: 6px;
}

.detailsBox:hover:not(.disabled):not(.disabled2) {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    border-color: orange;
}

.detailsBox.selected {
    border: #30e090 solid 2px;
    padding: 13px;
    background: #f0fffa;
}

.detailsBox.selected:hover {
    border: #30e090 solid 2px;
    padding: 13px;
}

.detailsBox h2 {
    font-size: 100%;
    line-height: 110%;
    margin: 0px;
    margin-top: 8px;
    text-align: center;
    font-weight: normal;
    height: 45px;
    overflow: hidden;
    color: #555;
}

.detailsBox .thumb {
    border-radius: 2px;
}

.detailsBox .thumb img{
    border-radius: 2px;
    display: block;
    margin: auto;
}

.boxSmall .thumb img {
    max-height: 118px;
    max-width: 118px;
}

.boxMedium .thumb img {
    max-height: 183px;
    max-width: 183px;
}

.boxLarge .thumb img {
    max-height: 234px;
    max-width: 234px;
}

.detailsBox:hover h2 {
    color: #4484ce;
}


/* Icons */

.detailsBox .buttons {
    display: none;
    border: none;
    margin: 0;
    padding: 2px;

    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: left;
    border-top: 1px solid #e5e5e5;
    background: #f2f2f2;
}

.detailsBox .iconButton {
    background: none;
    margin: 1px;
    padding: 3px 6px;
    border: none;
    min-width: 30px;
}

.detailsBox .dropdownMenu .iconButton {
    display: block;
    text-align: left;

}


.detailsBox .iconButton span.label /*[class^="icon-"]*/ {
    margin-left: 5px;
}

.detailsBox .infoView {
    background: none;
    margin: 0;
    padding: 3px 6px;
    text-decoration: none;
    font-weight: bold;
}



/* Large Tile */

.detailsBox.boxLarge {
    width: 260px;
    padding: 12px;
    height: 350px;
}

.detailsBox.boxLarge .out-of-stock-text{
    width: 260px;
    position: absolute;
    top: 7px;
    left: -12px;
}

.detailsBox.boxLarge.category {
    padding: 11px;
}

.detailsBox.boxLarge .thumb {
    display: table-cell;
    height: 234px;
    max-width: 234px;
    vertical-align: middle;
    width: 234px;
}


/* Medium Tile */

.detailsBox.boxMedium {
    width: 205px;
    padding: 10px;
    height: 300px;
}

.detailsBox.boxMedium .out-of-stock-text {
    width: 205px;
    position: absolute;
    top: 7px;
    left: -12px;
}

.detailsBox.boxMedium.category {
    padding: 9px;
}

.detailsBox.boxMedium .thumb {
    display: table-cell;
    height: 183px;
    max-width: 183px;
    vertical-align: middle;
    width: 183px;
}

/* Small Tile */

.detailsBox.boxSmall {
    width: 136px;
    padding: 8px;
    height: 220px;
}

.detailsBox.boxSmall .out-of-stock-text {
    width: 136px;
    position: absolute;
    top: 7px;
    left: -10px;
}

.detailsBox.boxSmall.category {
    padding: 7px;
}

.detailsBox.boxSmall .thumb {
    display: table-cell;
    height: 118px;
    max-width: 118px;
    vertical-align: middle;
    width: 118px;
}

.detailsBox.boxSmall h2 {
    font-size: 80%;
    height: 40px;
}

.detailsBox.boxSmall .product-stock {
    font-size: 80%;
}

.detailsBox.boxSmall .product-id {
    font-size: 80%;
}

.boxSmall a.iconButton > span.label {
    display: none;
}

.boxSmall .dropdownMenu a.iconButton > span.label {
    display: inline;
    font-size: 80%;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}


/* List */

.detailsBox.boxList {
    float: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #bbb !important;
    display: table !important;
    height: 40px !important;
}

.detailsBox.boxList:hover {
    background: #f2f2f2;
}

.detailsBox.boxList:first-child {
    border-top: 1px solid #bbb !important;
}

.detailsBox.boxList .thumb {
    width: 48px;
    height: 48px;
    padding: 3px;
    box-shadow: none;
    display: table-cell;
}

.detailsBox.boxList .thumb img {
    height: 48px;
    width: 48px;
    display: block;
}

.detailsBox.boxList h2 {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    font-size: 95%;
    height: 40px !important;
    padding: 0 !important;
    padding: 3px !important;
    padding-left: 10px !important;
    margin: 0 !important;
    width: 80%;
}

.detailsBox.boxList .buttons {
    padding: 3px !important;
    margin: 0 !important;
    position: relative !important;
    display: table-cell !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    height: 40px !important;
    text-align: right !important;
    background: none !important;
    border: none !important;
}

.detailsBox.boxList .buttons a {
    float: none !important;
    margin: 0;
    height: auto;
    margin: 0 3px;
}

.category {
    border: 2px solid #8ecfff;
    background-color: #e9e9ff;
}

.category h3 {
    font-weight: bold;
    color: #2a9bef;
}

.sortablePlaceholder {
    float: left;
    position: relative;
    border: #ddd solid 1px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow:inset 0 0 12px 0px rgba(0,0,0,0.1);
    box-shadow:inset 0 0 12px 0px rgba(0,0,0,0.1);
    margin: 6px;
}

.sortablePlaceholder:hover {
    background: #999;
    border-color: red;
}

.productList .detailsBox.boxSmall .dropdownMenu,
.productList .detailsBox.boxMedium .dropdownMenu,
.productList .detailsBox.boxLarge .dropdownMenu {
    display: none;
    width: auto;
    min-width: auto;
    left: 0;
    right: 0;
    top: auto;
    bottom: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0px 0px 0px 0px;
}

.productList .detailsBox.boxSmall .dropdownMenu a ,
.productList .detailsBox.boxMedium .dropdownMenu a,
.productList .detailsBox.boxLarge .dropdownMenu a {

}

.productList .detailsBox.boxList .dropdownMenu {
    display: none;
    left: auto;
    right: 40px;
    top: 40px;
}

.detailsBox.hiddenItem {
    display: block;
    /* background-image: url(/images/backgrounds/diagonal-light.png); */
    background: repeating-linear-gradient(-45deg,#fff,#fff 1.414px,#888 2.828px,#888 1.414px);
}

.detailsBox.hiddenItem .thumb img {
    opacity: 0.60;
}

.detailsBox.hiddenItem h2 {
    color: #888;
}

.overlayInfo {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    color: #fff;
    padding: 10px;
    display: none;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 100%;
    overflow: hidden;
}

.detailsBox.boxSmall .overlayInfo {

}

.overlayInfo .description {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 100%;
}

.overlayInfo .specs {
    margin-top: 10px;
}

.overlayInfo .specs > div {

    line-height: 120%;
    padding: 2px 0;
}

.overlayInfo span.label {
    display: block;
    margin-bottom: 3px;
    color: #ddd;
}

.detailsBox.boxList .overlayInfo .specs {
    display: none;
}

/*
* SEARCH FORM FOR PRODUCTS
*/
.productSearchItem td {
    font-size: 13px;
    font-family: Roboto,Arial,sans-serif
}
.productSearchForm {
    display: inline;
    float: right;
    width: 250px;
    position: relative;
    top: 5px;
}
.productSearchForm>div {
    width: 250px;
}
.productSearchItem {
    width: 200px;
}
.productSearchItem table {
    width: 100%;
    height: 100%;
}
.productSearchItem table td {
    vertical-align: middle;
}
.productSearchItem table tr:first-of-type td:first-of-type{
    width: 40px;
    vertical-align: middle;
    padding: 2px;
}
.productSearchItem table tr:first-of-type td:first-of-type img{
    width: 36px;
    height: 36px;
    margin: 2px;
}
.productSearchItem table tr:first-of-type td:nth-of-type(2){
    line-height: 100%;
    white-space: normal;
    color: #555;
}
.productSearchItem table tr:nth-of-type(2) td {
    color: #555;
    font-size: 12px;
}

/**********************************/
/*** LOGIN PAGE from login.css ***/
/********************************/

body.login {
    background: none;
    background-color: #000;
}

body.login .ui-tooltip {
    display: none !important;
}

#loginBackground {
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.8;
}

.loginFrame {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.loginFrameTop {
    display: table-row;
    width: 100%;
    height: 99%;
}

.loginFrameTop > div {
    width: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 40px;
}

.loginFrameBottom {
    display: table-row;
    width: 100%;
    height: 1%;
}

.loginFrameBottom > div {
    width: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
}

.loginBox {
    width: 440px;
    display: block;
    margin: 0 auto;
    background: #f0f0f0;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.55);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.55);
    border-radius: 3px;
    overflow: hidden;
    text-align: left;
}

.loginTitle {
    position: relative;
    font-size: 110%;
    line-height: 100%;
    vertical-align: middle;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.loginHeader {
    position: relative;
    background: #fff;
    color: #444440;
    text-align: center;
    font-size: 32px;
    line-height: 34px;
    font-weight: bold;
    vertical-align: middle;
    border-bottom: 1px solid #ccccc0;
}

.loginContent {
    padding: 25px;
}

.loginHeader a {
    color: #fff;
}

.loginHeader a:hover {
    color: #fff;
}

.loginBox input[type="text"], .loginBox  input[type="password"], .loginBox select {
    font-size: 100%;
    padding: 7px;
    width: 100%;
}

.loginBox input[type="text"]:focus, .loginBox  input[type="password"]:focus {
    border-color: #bbbbb0;
}

.loginBox input[type="submit"] {
    border: transparent;
}

div.loginBox label {
    float: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-bottom: 8px;
    line-height: 100%;
    color: #444440;
    font-size: 110%;
    width: auto;
}

div.loginBox .row {
    margin-bottom: 15px;
}

.login_button {
    width: 100%;
    padding: 6px !important;
    text-align: center !important;
    border-color: transparent !important;
    background: #4484ce;
    color: white;
}

div.loginBox #stay_signed_in {

}

.loginBox a {

    text-decoration: none;
}

.loginBox a:hover {
}

body.login .footer {
    text-align: center;
    color: #fff;
    width: 100%;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.35);
    font-size: 80%;
}

body.login .footer a {
    color: #999;
}

body.login .footer a:hover {
    color: #ddd;
}

body.login .footer img {
    display: block;
    margin: 0 auto;
    max-width: 160px;
}

.frame {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 25px;
    width: 100%;
    margin: 0;
    margin: 10px 0;
    background: #fff;
}

.frame2 {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
    width: 100%;
    margin: 0;
    margin: 10px 0;
    background: #fff;
}

#strength_indicator {
    line-height: 28px;
}

#strength_indicator #slider {
    border-radius: 3px;
    padding: 2px 8px;
    line-height: 24px;
    color: #444;
}

hr {
    margin: 20px 0;
}

.float-fieldset {
    float: left;
    width: 48%;
    height: 300px;
    overflow-y: auto;
    margin: 10px;
}

.basket-form .buttons a {
    margin: 0 5px;
}

.html_header textarea , .html_footer textarea {
    width: 100%;
    height: 200px;
}

#orderDetailsContainer .tabs li {
    max-width: 33%;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.addressBox {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    width: 200px;
    margin: 10px;
    height: 220px;
    overflow: hidden;
    float: left;
    clear: none;
    position: relative;
}

.addressBox .adressBoxFooter {
    position: absolute;
    width: 180px;
    bottom: 10px;
}

.addressBox .addressBoxFitting {
    margin-top: 10px;
    width: 200px;
    height: 140px;
}

.address-pickup-marker {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 80%;
    font-weight: bold;
    color: gray;
}

.addNewBox {
    width: 160px;
    height: 140px;
    margin: 10px;
}

.addNewBox>div {
    width: inherit;
    height: inherit;
    margin: 10px auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.search_address {
    width: 100%;
    padding: 0 10px;
    text-align: left;
}

.search_address input {
    width: 200px;
}

.floatThird {
    float: left;
    width: 33%;
    clear: none;
}

.consignment-buttons-menu {
    display: none;
    position: absolute;
    z-index: 2;
    left: 38px;
    background-color: #e6e6e6;
    border: solid 1px #d9d9d9;
    border-radius: 5px;
    padding: 5px;
}

.qtip-content {
    line-height: 20px;
    padding: 8px 12px;
}

/* Makes table transparent (shaded) during refreshing process */
.grid-view-loading table tbody {
    opacity: 0.2;
}

tr.not-available td, tr.not-available2 td {
    background-image: url("/images/backgrounds/diagonal-light.png");
    opacity: 0.5;
}

tr.not-available2 td input {
    display: none;
}

/* Validation rules manager */
.validationRulesManager .leftPanel {
    width: 270px;
    padding: 10px;
}
.validationRulesManager .rightPanel {
    width: 600px;
    padding: 10px;
}

.validationRulesManager .rulesList {
    height: 500px;
    width: 250px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    border-radius: 3px;
    margin: 1px;
    padding: 5px 10px;
    overflow-x: hidden;
    overflow-y: auto;
}

.validationRulesManager .rulesList .validation-rule {
    margin: 2px 0;
    padding: 2px 4px;
    width: 100%;
    text-overflow: ellipsis;
    overflow-x: hidden;
    color: gray;
}

.validationRulesManager .rulesList .active-rule {
    background: #0079c4 url("/images/arrows/11px-white-right.png") no-repeat scroll 99% center;
    color: white;
}
.validationRulesManager .rulesList .validation-rule.active-rule:hover {
    background: #0059a4 url("/images/arrows/11px-white-right.png") no-repeat scroll 99% center;
}

.validationRulesManager .rulesList .validation-rule:hover {
    background: #e3e3e3;
    cursor: pointer;
}

.validationRulesManager .ruleForm {
    height: 500px;
    width: 580px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    border-radius: 3px;
    margin: 1px;
    padding: 5px 10px;
    overflow-x: hidden;
    overflow-y: auto;
}

.iwcImageWrapper  {
    clear: none;
    position: relative;
    display: inline-block;
}

.iwcImageWrapper img {
    padding: 10px;
    display: block;
}

.iwcImageWrapper .iwcImageWrapper-buttons {
    clear: none;
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: none;
    width: 120px; /* Display icons in a line for small images */
}

.iwcImageWrapper .iwcImageWrapper-delete {
    display: none;
    background: repeating-linear-gradient(45deg, white, white 2px, bisque 2px, bisque 5px) bisque;
    border: thin dashed orange;
    text-align: center;
}

.iwcImageWrapper .iwcImageWrapper-buttons .button{
    padding: 4px 8px;
}

.iwcImageWrapper-image:hover .iwcImageWrapper-buttons {
    display: block;
}

.selection ul>li {
    margin: 0;
}

/*.approverSearch+.select2-container {
    margin-top: 6px;
}*/

.collapsible {
    font-size: 150%;
    font-weight: bold;
    color: #777;
    padding: 20px 20px 15px 20px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-radius: 3px;
    background: white;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
}

.collapsible:not(:first-of-type) {
    margin-top: 10px;
}

.collapsible-closed {
    border-bottom: 1px solid #ddd;
}

.collapsible .chevron-plus {
    font-size: 30px;
    position: relative;
    top: -8px;
    left: -10px;
    cursor: pointer;
    width: 0px;
}

.collapsible table {
    font-weight: normal;
    font-size: 13px;
}

.collapsible-panel {
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    background: white;
}
.collapsible .button, fieldset legend .button {
    line-height: 23px;
    font-size: 12px;
    margin-left:  15px;
    font-weight: inherit;
    position: relative;
    top: -2px;
    padding: 5px 16px 4px;
}

table.items tr.expired {
    background-image: url("/images/backgrounds/diagonal-light.png");
}
table.items tr.expired td {
    color: #999;
}

.estimates_table {
    border: 1px solid #aaa;
    width: 100%;
}

.estimates_table td, .estimates_table th {
    border:  1px solid #aaa;
    vertical-align: middle;
    padding: 5px;
    text-align: center;
}

.scroll2container {
    overflow: hidden;
}

td.invisible input {
    display: none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #aaa;
    outline: 0 none;
}

.small-rfq-title {
    font-size: 65%;
    padding-left: 10px;
}

table.form-layout td.description-wrapper {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-combobox {
    position: relative;
    display: inline-block;
    width: 100%;
}
.custom-combobox-toggle {
    position: absolute;
    top: -1px;
    bottom: 0;
    margin-left: -1px;
    padding: 1px;
    border-left: transparent;
    border-radius: 0 3px 3px 0;
    height: 33px;
    box-shadow: none;
    width: 5%;
}
.custom-combobox-toggle .ui-icon {
    text-indent: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
    border: solid 1px rgb(208,208,208);
    border-radius: 3px 0 0 3px;
    border-right: transparent;
    height: 33px;
    width: 95%;
}

a.type-icon {
    color: #666;
}
a:hover.type-icon {
    color: #4484ce;
}
a.type-icon.active {
    color: #4484ce;
    cursor: default;
}

.type-icon.active span {
    color: #4484ce;
    cursor: default;
}
a.specialIconButton {
    padding-right: 10px;
}

.info ol {
    list-style: decimal outside;
    padding: 10px 50px;
}

.info ol ol {
    list-style: lower-alpha outside;
    padding: 10px 50px;
}

.mt-3 {
    margin-top: 1rem;
}

.job-rejected {
    text-decoration: line-through;
}

.amber {
    color: #ea5b0c;
}

/* Those styles or for font awesome icons located in front of any text in buttons */
.button .fa, .button .fab, .button .fal, .button .far, .button .fas {
    line-height: 20px;
    font-size: 16px;
}

/* 
Side menu has mixed icons from Peter and font awesome 
Font awesome icons are thinner then Peter's icon so we need to adjust it here'
*/
div.sideMenu i {
    width: 20px;
}

/* Make font-awesome size 18px in grid-view tables */
div.grid-view i[class*=" fa-"] {
    font-size: 14px;
}

table.items tbody .inactive td, table.items tbody .inactive .buttonContainer a, table.items tbody .inactive td .button {
    color: lightgray;
}

/* Speech bubbles used in timeline */
.speech {
    padding: 10px;
    border-radius: 5px;
    text-indent: 0;
    margin: 4px 0;
    width: fit-content;
    word-break: break-word;
}

.speech-less {
    padding-left: 11px;
}

.speech-private {
    background-color: #e1dfdb;
}

.speech-to-others {
    background-color: #5e95ce;
    color: white;
}

.speech-from-others {
    background-color: #85a981;
    color: white;
}

/* Colors */
select.urgent {
    background-color: #fa2e2e;
    color: white;
}

.urgent {
    color: #fa2e2e;
    font-weight: bold;
}

/* Notes to be displayed below input fields */
form .form-note {
    font-size: smaller;
    color: grey;
    line-height: 130%;
    margin: 0;
}

.uniProd {
    border-left: 6px solid #8e8eca;
}

/* This custom class is defined for use by qtip in pj.js */
.qtip_width {
    max-width: 560px;
}

/* In order to position clear filter icon properly in cgrid view table we need to set td as relative*/
tr.filters td {
    position: relative;
}
/* Position a cross icon to be displayed at the end of the input in cgrid view table */
tr.filters i {
    position: absolute;
    right: 14px;
    top: 18px;
    cursor: pointer;
}

/* PriceChange */
.cards {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding-top: 10vh;
}

.cards-card {
    width: 20vw;
    text-align: center;
    border: 1px solid grey;
    border-radius: 3px;
    box-sizing: content-box;
    cursor: pointer;
}


.cards-image,
.cards-image img,
.cards-image i {
    width: 20vw;
    font-size: 10vw;
    background-color: lightgray;
}

.cards-card:hover .cards-image,
.cards-card:hover .cards-image img,
.cards-card:hover .cards-image i {
    background-color: paleturquoise;
}

.cards-success .cards-image,
.cards-success .cards-image img,
.cards-success .cards-image i {
    background-color: palegreen;
}

.cards-title {
    font-size: 20px;
    padding: 1rem;
}

.cards-description {
    padding: 1rem;
    text-justify: justify;
}

.cards-status {
    padding: 1rem;
    text-justify: justify;
}

#settingsMenu a i, #settingsMenu a span[class^="icon-"] {
    width: 20px;
    display: inline-block;
}