::-moz-selection { background: #39f; color: white }
::selection { background: #39f; color: white }
:focus { outline: none }

a { color: black; text-decoration: none }
a:hover { background: #39f; color: white }
a:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
a.ui-tabs-anchor .picIcon { margin-left:5px; display:none; }

body {
    font-family: Helvetica, sans-serif;
    line-height: 110%;
    background: white;
    color: black;
    padding: 0
}

img.shadow {
    -webkit-box-shadow: 1px 1px 0em black;
    -moz-box-shadow: 1px 1px 0em black;
    box-shadow: 1px 1px 0em black
}

.floatLeft, .svgWrapper, #topBarTitle,
.adminTablePageHeader .adminTablePageHeaderLeft {
    float: left
}

.floatRight, #topBarMenu, .right input[type="checkbox"],
.adminTablePageHeader .adminTablePageHeaderRight {
    float: right
}

.marginTop { margin-top: .3em }
.red { color: red }
.yellow { color: #ff0 }
.green { color: lime }
.light { color:#fff; }
.dark { color:#000; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.centered { text-align: center !important; }
.errorMessage { color: #c00 }
.nowrap { white-space: pre-line }
.nopadding { padding: 0 !important; }
.noborder { border: none !important; }
.clear { clear: both; width: 100%; height: 1em }
.right input[type="checkbox"] { width: auto !important }
.right img { margin-right: 0.3em; margin-top: 0.3em }
td.left { padding-right: .18em }
td.right { padding-left: .18em }
.fa-lock { margin-right: 1em }
/*.expandButton { width: 30px; }*/
.shadow:not(input):not(textarea):not(select) { text-shadow: 1px 1px 0em black }

#contextMenu, .blackLineBorder, .preview,
.seriesRow, .seriesRow td:not(:first-child),
.mass-qty-input, .qtyInput, .jobPoInput {
    border: 1px solid black
}




/**************************** CURSOR STYLES ***********************************/
.cursorHelp { cursor: help }
.cursorMove, .draggable { cursor: move }
.clickable:not(.disabled) { cursor: pointer; }
.cursorPointer, .button:hover, .button2:hover, .topBarDropdownLink:hover, .adminCompanyNameLink:hover,
#topBar a:hover, #topBarDropdownButton:hover, a:hover,
textarea[type="submit"]:hover, textarea[type="reset"]:hover,
input[type="submit"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input):hover,
input[type="reset"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input):hover,
select[type="submit"]:hover, select[type="reset"]:hover,
#mainPageTable tr.clickable:hover>td, .formTable tr.clickable:hover>td, .adminTable tr.editable:hover>td, .head.sortable td:hover,
#mainPageTable td.clickable:hover,
#patternList .patternName:not(.disabled), .layoutPane:hover,
img.insertableLogo {
    cursor: pointer
}

.cursorDefault, .left:hover, .expandButton:hover, .nonClickable:hover,
textarea.disabled[type="submit"], textarea.disabled[type="submit"]:hover, textarea.disabled[type="submit"]:active,
textarea.disabled[type="reset"], textarea.disabled[type="reset"]:hover, textarea.disabled[type="reset"]:active,
input.disabled[type="submit"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input.disabled[type="reset"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select.disabled[type="submit"], select.disabled[type="submit"]:hover, select.disabled[type="submit"]:active,
select.disabled[type="reset"], select.disabled[type="reset"]:hover, select.disabled[type="reset"]:active,
.button.disabled, .button.disabled:hover, .button.disabled:active,
.button2.disabled, .button2.disabled:hover, .button2.disabled:active,
#mainPageTable tr.seriesRow:not(.clickable):hover,
#mainPageTable tr.patternRow:not(.clickable):hover,
#mainPageTable tr.colorRow:not(.clickable):hover {
    cursor: default
}

/****************************** FONT STYLES ***********************************/
@font-face {
    font-family: "actSymbols";
    src: url("/fonts/FuturaAct.woff") format("woff")
}
@font-face {
    font-family: "maharamRegular";
    src: url("/fonts/MaharamRegular.woff") format("woff")
}
@font-face {
    font-family: "maharamNeueRegular";
    src: url("/fonts/MaharamNeueBETA-Regular.woff") format("woff")
}
@font-face {
    font-family: "maharamNeueMedium";
    src: url("/fonts/MaharamNeueBETA-Medium.woff") format("woff")
}
@media only screen and (max-width: 800px) {
    body { font-size: .85em }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
    body { font-size: .9em }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    body { font-size: .95em }
}
@media only screen and (min-width: 1281px) {
    body { font-size: 1em }
}

.fontItalic { font-style: italic }
.fontNotBold { font-weight: normal }
.fontAllCaps { text-transform: uppercase }
.fontSmallCaps { font-variant: small-caps }
.fontBlue { color: #0F518D; }

.fontSmall, textarea[name="companySelect"], select[name="companySelect"],
input[name="companySelect"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
.customLayoutSearchPanel,
.customLayoutSearchPanel select[name="captionHeight"],
.customLayoutSearchPanel select[name="patternVignette"] {
    font-size: smaller
}

.fontUnderline, .head, .dz-filename,
#adminMenuBar .adminMenuBarMenuTitle,
#patternList .adminMenuBarMenuTitle,
#notificationBox #notificationBoxContents a:hover {
    text-decoration: underline
}

.fontBold, .errorMessage, .head, #notificationBox, .dz-filename,
.ui-datepicker th, .ui-widget-header, .ui-priority-primary,
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary,
#adminMenuBar .adminMenuBarMenuTitle, #patternList .adminMenuBarMenuTitle,
.seriesRow, .patternRow, .programOrderNumber,
#patternList .patternName:not(.disabled) {
    font-weight: bold
}

.fontLarge,
#adminMenuBar .adminMenuBarMenuTitle,
#patternList .adminMenuBarMenuTitle {
    font-size: larger
}


#mainPage {
    margin-left: auto;
    margin-right: auto;
    padding-left: .9em;
    padding-right: .9em;
    margin-top: 2.4em;
    display: table-cell;
    width: 100%
}


input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
textarea, select {
    font-family: "Open Sans", sans-serif;
    /*-webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;*/
    padding: .18em;
    color: black;
    background: #ddd;
    border: 0;
    font-size: inherit
}

input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input).disabled,
input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input):disabled,
textarea.disabled, textarea:disabled, 
select.disabled, select:disabled {
    opacity: .5 !important
}

input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input):focus,
textarea:focus, select:focus {
    background: black;
    color: white
}

input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input)[name="companySelect"],
textarea[name="companySelect"],
select[name="companySelect"] {
    width: auto
}

textarea[type="submit"]:hover, textarea[type="reset"]:hover,
input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input)[type="submit"]:hover,
input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input)[type="reset"]:hover,
select[type="submit"]:hover, select[type="reset"]:hover {
    background: #39f;
    color: white
}

textarea[type="submit"]:active, textarea[type="reset"]:active,
input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input)[type="submit"]:active,
input:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input)[type="reset"]:active,
select[type="submit"]:active, select[type="reset"]:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}

/****************************** TABLE STYLES **********************************/

.odd,  .striped:not(.small) tr:not(.head):not(.spacer):nth-child(odd)>td  { background: #f0f0f0 }
.even, .striped:not(.small) tr:not(.head):not(.spacer):nth-child(even)>td { background: #e6e6e6 }
td.collapse { width:1%; white-space: nowrap; }
tr.imprintRow { color: #363636; font-style: italic }
tr.imprintRow td:nth-child(n+4) { padding:5px 10px !important; }
tr.imprintRow td:nth-child(3) { text-indent: 1.4em }
tr.imprintRow td:first-child,
tr.imprintRow td:nth-child(3),
tr.imprintRow td:nth-child(2) { background: #fff !important; border: none !important; }
tr.imprintRow td:nth-child(3) { width:1px; } 
tr.presentationRow td { padding:5px 10px !important; }
tr.presentationRow td.expandButton { padding-left: 18px !important; padding-right: 5px !important; }
tr.presentationRow td:nth-last-child(1) { width: 50px; }
tr.presentationRow td:nth-last-child(2) { width: 150px; }
tr.presentationRow td:nth-last-child(3) { width: 100px; }
tr.pattern-row td:nth-child(2),
tr.presentationRow td:nth-child(1),
tr.presentationRow td:nth-child(2) { background-color:#fff !important; border:none !important;  }
tr.presentationRow td:nth-child(3) { padding: 0 !important; }
tr.presentationRow td:nth-child(3) i:first-child { margin-left:3px; }
tr.photoRow.even td,
tr.pattern-row.even td:not(:first-child):not(:nth-child(2)),
tr.presentationRow.even td:not(:first-child):not(:nth-child(2)) { background: #D2DEEB !important; }
tr.photoRow.odd td,
tr.pattern-row.odd td:not(:first-child):not(:nth-child(2)),
tr.presentationRow.odd td:not(:first-child):not(:nth-child(2)) { background: #EAEFF6 !important; }

tr.pattern-row td:first-child { background: #fff !important; border:none !important; }
tr.pattern-row td:nth-child(2) { width:8px; padding: 0 !important; }

tr.patternRow td:not(:first-child):not(:nth-child(2)),
tr.patternRow2 td:not(:first-child):not(:nth-child(2)):not(:nth-child(3))
{
    padding: 5px !important;
}
tr.patternRow2 td:nth-child(3) { padding: 0 10px !important; font-size:12px; }
tr.patternRow2 td:not(:first-child):not(:nth-child(2)) {
    background-color: #8CA8C8 !important;
}
tr.pattern-row td.expandButton,
tr.patternRow td.expandButton { 
    /* text-indent: .5em */ 
    background-color:#fff !important; 
    border:none !important; 
    width: 15px; 
    padding: 0 !important;
}
tr.patternRow2 td:nth-child(2){ border: none !important; }

tr.programRow td:not(:first-child){background-color: #8CA8C8;}
tr.programRow td.expandButton { text-align:center; width: 30px; }

tr.seriesRow td.expandButton { width: 30px; background: #fff !important; }
tr.seriesRow td { text-indent: .35em;  }
tr.seriesRow td:not(:first-child) { 
    color: #0F518D;
    background: white !important; 
    /*border-top: none !important;*/ 
    border-right: none !important; 
    padding:5px !important; 
}
.colorRow td { text-indent: 1.08em }
/*.patternRow td:not(:first-child):not(:nth-child(1)) {
    background-image: linear-gradient(to right, transparent 0.35em, #aaa 0.36em) !important
}*/

table.columnLayout {
    width:100%;
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
}
table.columnLayout td {
    padding: 0;
    vertical-align: top;
}

#mainPageTable { 
    width: 100%;
    border-spacing: 0;  
    border-right: 1px solid #000;
}
#mainPageTable table { width: 100%; border-spacing: 0; }
#mainPageTable tr:not(.head) td:not(:first-child){ 
    border-bottom:1px solid #000;
}
#mainPageTable td { vertical-align: middle; }
#mainPageTable td:not(:first-child) {
    padding: 10px;
    border-top:1px solid #000;
    border-left: 1px solid #000;    
}
#mainPageTable tr.spacer:last-child { display: none; }
#mainPageTable tr.spacer td, 
#patternTable tr.spacer td {
    /*height:5px;*/
    padding:0 0 5px 5px;
    background-color: #fff;
}
#patternTable { margin-bottom: 200px; }
#mainPageTable tr:last-child td:first-child {
    -webkit-border-bottom-left-radius: .12em;
    -moz-border-bottom-left-radius: .12em;
    -ms-border-bottom-left-radius: .12em;
    -o-border-bottom-left-radius: .12em;
    border-bottom-left-radius: .12em
}
#mainPageTable tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: .12em;
    -moz-border-bottom-right-radius: .12em;
    -ms-border-bottom-right-radius: .12em;
    -o-border-bottom-right-radius: .12em;
    border-bottom-right-radius: .12em
}
#mainPageTable tr.clickable:hover>td {
/*    
    background: #39f !important;
    color: white;
    overflow: hidden
*/
}
#mainPageTable tr.clickable:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
#mainPageTable tr:nth-child(2) td:first-child {
    -webkit-border-top-left-radius: .12em;
    -moz-border-top-left-radius: .12em;
    -ms-border-top-left-radius: .12em;
    -o-border-top-left-radius: .12em;
    border-top-left-radius: .12em
}
#mainPageTable tr:nth-child(2) td:last-child {
    -webkit-border-top-right-radius: .12em;
    -moz-border-top-right-radius: .12em;
    -ms-border-top-right-radius: .12em;
    -o-border-top-right-radius: .12em;
    border-top-right-radius: .12em
}
#patternTable .expandButton { padding: 5px; }
#patternTable tr:not(.spacer) td { border-right: 1px solid #000; }
#patternTable td:not(:first-child) {
    border-top:1px solid #000;
    padding:2px;
}

.formTable .fa { color: black; padding:5px; }
.formTable { border-spacing: 0; width: 100% }
.formTable td { padding: .18em }
.formTable.right { width: 100% }
.formTable.centered { margin-left: auto; margin-right: auto }
.formTable tr:last-child td:first-child {
    -webkit-border-bottom-left-radius: .12em;
    -moz-border-bottom-left-radius: .12em;
    -ms-border-bottom-left-radius: .12em;
    -o-border-bottom-left-radius: .12em;
    border-bottom-left-radius: .12em
}
.formTable tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: .12em;
    -moz-border-bottom-right-radius: .12em;
    -ms-border-bottom-right-radius: .12em;
    -o-border-bottom-right-radius: .12em;
    border-bottom-right-radius: .12em
}
.formTable tr:first-child td:first-child {
    -webkit-border-top-left-radius: .12em;
    -moz-border-top-left-radius: .12em;
    -ms-border-top-left-radius: .12em;
    -o-border-top-left-radius: .12em;
    border-top-left-radius: .12em
}
.formTable tr:first-child td:last-child {
    -webkit-border-top-right-radius: .12em;
    -moz-border-top-right-radius: .12em;
    -ms-border-top-right-radius: .12em;
    -o-border-top-right-radius: .12em;
    border-top-right-radius: .12em
}
.formTable input:not([type='radio']):not([type='submit']),
.formTable select, .formTable option {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
.formTable input:not([type='radio'])[type="checkbox"],
.formTable select[type="checkbox"],
.formTable option[type="checkbox"] {
    width: auto !important
}

.formTable tr.head td { background-color: #8CA8C8; padding:8px; }
.formTable tr.spacer td { background-color: #fff; padding: 3px; }
.formTable tr.clickable:hover>td {
    background: #39f !important;
    color: white
}
.formTable tr.clickable:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}

.adminTable {
    border-spacing: 0;
    width: 100%;
    clear: both;
    overflow: hidden;
    white-space: pre-line
}
.adminTable td { padding: .18em }
.adminTable tr:last-child td:first-child {
    -webkit-border-bottom-left-radius: .12em;
    -moz-border-bottom-left-radius: .12em;
    -ms-border-bottom-left-radius: .12em;
    -o-border-bottom-left-radius: .12em;
    border-bottom-left-radius: .12em
}
.adminTable tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: .12em;
    -moz-border-bottom-right-radius: .12em;
    -ms-border-bottom-right-radius: .12em;
    -o-border-bottom-right-radius: .12em;
    border-bottom-right-radius: .12em
}
.adminTable tr.editable:hover>td {
    background: #39f !important;
    color: white
}
.adminTable tr.editable:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
.adminTable tr:nth-child(2) td:first-child {
    -webkit-border-top-left-radius: .12em;
    -moz-border-top-left-radius: .12em;
    -ms-border-top-left-radius: .12em;
    -o-border-top-left-radius: .12em;
    border-top-left-radius: .12em
}
.adminTable tr:nth-child(2) td:last-child {
    -webkit-border-top-right-radius: .12em;
    -moz-border-top-right-radius: .12em;
    -ms-border-top-right-radius: .12em;
    -o-border-top-right-radius: .12em;
    border-top-right-radius: .12em
}

.head { background: white }
.head td { padding-bottom: .18em }
.head.sortable td:hover {
    color: #39f;
    text-decoration-color: #39f
}
.head.sortable td:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
.adminTablePageHeader { width: 100%; padding: .18em }
.adminTablePageHeader .adminTablePageHeaderRight { text-align: right }
#leftMenuPane, #patternList, #presentationLayout { display: table-cell }

#adminMenuBar, #patternList {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    background: #fff;
    padding: .5em;
    display: table-cell;
    vertical-align: top
}
#adminMenuBar a, 
#patternList a {
    white-space: pre;
    line-height: 130%;
    font-weight: normal;
    padding: 0em 0.23em
}
#adminMenuBar a:hover,
#patternList a:hover {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    background: #39f;
    color: white
}
#adminMenuBar a:active,
#patternList a:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
#patternList .patternListSection {
    background-color: #8CA8C8;
    margin-bottom: 5px;
    padding: 5px;
}
/****************************** INPUT STYLES **********************************/

#selectAllTd, .tdCheckBox { width: 1.2em }
input::-moz-focus-inner { border: 0; padding: 0 }
textarea.autosize { height: 1.4em }

.dialog textarea { width: 30em; height: 6em }
.dialog textarea[type="submit"]:not(.deleteColorButton), .dialog textarea[type="reset"]:not(.deleteColorButton),
.dialog input[type="submit"]:not(.deleteColorButton):not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
.dialog input[type="reset"]:not(.deleteColorButton):not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
.dialog select[type="submit"]:not(.deleteColorButton), .dialog select[type="reset"]:not(.deleteColorButton),
.dialog .button:not(.deleteColorButton), .dialog input[type="submit"], .dialog input[type="reset"] {
    margin-right: 0.3em;
    margin-bottom: 0.3em
}
.passwordStrength {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    width: 100%;
    height: 0.3em
}
.adminWrapperTable { vertical-align: top }
.adminWrapperTable #adminWrapperTableRight { width: 100% }

.button,
textarea[type="submit"], textarea[type="reset"],
input[type="submit"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input[type="reset"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select[type="submit"], select[type="reset"] {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #ccc;
    text-align: center;
    color: black;
    padding: 0.18em 0.46em;
    display: inline-block;
    line-height: normal;
    vertical-align: middle
}
.button:hover,
textarea[type="submit"]:hover,textarea[type="reset"]:hover,
input[type="submit"]:hover:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input[type="reset"]:hover:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select[type="submit"]:hover, select[type="reset"]:hover {
    background: #39f;
    color: white
}
.button:active,
textarea[type="submit"]:active, textarea[type="reset"]:active,
input[type="submit"]:active:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input[type="reset"]:active:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select[type="submit"]:active, select[type="reset"]:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
.button.disabled, .button.disabled:hover, .button.disabled:active,
textarea.disabled[type="submit"], textarea.disabled[type="reset"],
input.disabled[type="submit"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input.disabled[type="reset"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select.disabled[type="submit"], select.disabled[type="reset"],
textarea.disabled[type="submit"]:hover, textarea.disabled[type="reset"]:hover,
input.disabled[type="submit"]:hover:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input.disabled[type="reset"]:hover:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select.disabled[type="submit"]:hover, select.disabled[type="reset"]:hover,
textarea.disabled[type="submit"]:active, textarea.disabled[type="reset"]:active,
input.disabled[type="submit"]:active:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
input.disabled[type="reset"]:active:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
select.disabled[type="submit"]:active, select.disabled[type="reset"]:active {
    color: #888;
    transform: none;
    background: #ccc
}
.button2.disabled {     
    color: #888 !important;
    transform: none;
    background: #ccc !important;
    border-color: #5f9ea0;
}

.mass-qty-input,
.qtyInput, .jobPoInput {
/*    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;*/
    background: white;
    color: black;
    margin-right: .3em;
    text-align: center;
}
.mass-qty-input::-webkit-inner-spin-button,
.mass-qty-input::-webkit-outer-spin-button,
.qtyInput::-webkit-inner-spin-button,
.qtyInput::-webkit-outer-spin-button,
.jobPoInput::-webkit-inner-spin-button,
.jobPoInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}
.jobPoInput { width:100px; text-align:center; }
input[type="number"].mass-qty-input, 
input[type="number"].qtyInput {
    width: 3.5em
}
input.txtbtn { width:calc(100% - 32px) !important; }

/******************************************************************************/

.twenty {
    text-align: center;
    max-width: 1.44em;
    width: 1.44em
}

.hidden,
#uploadBox img,
.dz-error,
.dz-success-mark,
.dz-error-mark,
.dz-error-message,
.dz-progress {
    display: none
}
.programOrderNumber {
    white-space: pre
}
.presentationJobNumber,
.presentationPONumber {
    font-weight: normal !important;
    text-align: center;
}
#notificationBox {
    -webkit-box-shadow: 0.18em 0.18em 0.6em black;
    -moz-box-shadow: 0.18em 0.18em 0.6em black;
    box-shadow: 0.18em 0.18em 0.6em black;
    display: none;
    background: #ff6;
    color: black;
    border-radius: .18em;
    padding: 0.3em;
    width: 50%;
    margin: 0 0 0 -25%;
    left: 50%;
    top: .9em;
    position: fixed;
    z-index: 999;
    text-align: center
}
#notificationBox #notificationBoxContents {
    margin: 0 auto;
    width: calc(100% - 3em);
    max-width: calc(100% - 3em);
    display: block
}
#notificationBox #notificationBoxContents a {
    color: #39f
}
#notificationBox #notificationBoxContents a:hover {
    background: #ff6 !important
}
#notificationBox #notificationBoxContents a:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
#notificationBox #notificationBoxClose {
    position: absolute;
    top: .3em;
    right: .35em;
    cursor: pointer
}
#notificationBox #notificationBoxClose:hover {
    color: #39f
}
#patternList,
#presentationLayout {
    padding: 0 .9em .9em .9em;
    min-height: 30em;
    overflow-y: auto;
    max-height: calc(100vh - 10em);
    float: left
}
#presentationLayout .svgWrapper {
    box-shadow: -5px 5px 10px rgba(0, 0, 0, .5);
}
#patternList {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    padding-top: .9em;
    vertical-align: top
}
#patternList .patternName {
    margin-bottom: .3em
}
#presentationLayout {
    overflow-x: hidden
}
#viewTools {
    /*float:right;*/
    margin-top:10px;
    color:#3D69A1;
}

.tablePreviewImage {
    height: 3em
}
#uploadBox {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    margin: 0.6em auto;
    border: none;
    background: #888;
    max-height: 30em;
    min-height: 12em;
    width: 15em;
    overflow: auto
}
.dz-preview {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    width: calc(100% - 1.2em);
    text-align: center;
    padding: 0.3em
}
.dz-preview:nth-child(odd) {
    background: #f0f0f0
}
.dz-preview:nth-child(even) {
    background: #e6e6e6
}
.dz-filename {
    overflow: hidden;
    text-overflow: ellipsis
}
.dz-filename span[data-dz-name] {
    white-space: nowrap
}

.colorName {
    text-indent: .9em;
    line-height: 1.3em
}
.colorName td:first-child {
    background: #fff !important;
}
.colorName.even td:not(:first-child) {
    background: #D2DEEB !important;
}
.colorName.odd td:not(:first-child) {
    background: #EAEFF6 !important;
}
.colorName.draggable {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    background: #ccc;
}
.colorName.draggable.ui-draggable-dragging {
    background: #39f;
    color: white;
    text-indent: initial;
    padding: 0.18em 0.46em;
    display: inline-block
}
.colorName.draggable.ui-draggable-dragging.notAllowed {
    color:#f00;
    background: #f00;
}
.colorName.draggable label { cursor: move; }
.colorName .fa-check { float:right; }


#contextMenu {

    -webkit-box-shadow: 0.18em 0.18em 0.6em black;
    -moz-box-shadow: 0.18em 0.18em 0.6em black;
    box-shadow: 0.18em 0.18em 0.6em black;
    position: fixed;
    background: white;
    padding: .3em;
    z-index: 999
}
#contextMenu .button2,
#contextMenu textarea[type="submit"],
#contextMenu textarea[type="reset"],
#contextMenu input[type="submit"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
#contextMenu input[type="reset"]:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
#contextMenu select[type="submit"],
#contextMenu select[type="reset"] {
    width: calc(100% - 40px);
    margin-bottom: 10px
}
#contextMenu .button:last-child,
#contextMenu textarea[type="submit"]:last-child,
#contextMenu textarea[type="reset"]:last-child,
#contextMenu input[type="submit"]:last-child:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
#contextMenu input[type="reset"]:last-child:not([type='radio']):not(.qtyInput):not(.jobPoInput):not(.mass-qty-input),
#contextMenu select[type="submit"]:last-child,
#contextMenu select[type="reset"]:last-child {
    margin-bottom: 0
}

svg { display: block; height: 100% }
.svgWrapper {
    display: inline-block;
    overflow-x: hidden;
    margin-right: .9em
}
.layoutPane {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    display: inline-block;
    width: calc(100% - 1.8em);
    clear: both;
    padding: .9em
}
.layoutPane:hover {
    background: #39f;
    color: white
}
.layoutPane:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}


.fa.disabled { opacity:.4; }
.fa.clickable { padding: 4px; border-radius: 5px; }
.fa.clickable.selected { box-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.fa.selected { font-weight:bold; text-shadow:0 0 2px rgba(136,136,255,0.5); }


.loadingSpinner .fa-circle-o-notch.fa-5x.fa-spin {
    margin: .5em
}
.preview {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    padding: .3em;
    background: white;
    color: black;
    text-align: left;
    width: calc(100% - 0.6em)
}
img.insertableLogo {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    max-width: 12em;
    margin: 1em
}
img.insertableLogo:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}
img.insertableLogo:hover:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
.customLayoutSearchPanel {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    text-align: left;
    background: #f0f0f0;
    padding: .3em
}
.customLayoutSearchPanel input[name="swatchMin"],
.customLayoutSearchPanel input[name="swatchMax"] {
    width: 4em !important;
    margin-bottom: .3em
}
.customLayoutSearchPanel select[name="captionHeight"],
.customLayoutSearchPanel select[name="patternVignette"] {
    width: 7em !important;
    margin-bottom: .3em
}
.photo-info.fa-trash {
    float: right;
    padding: .3em
}
.photo-info.fa-trash:hover {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    cursor: pointer;
    background: #39f;
    color: white
}
.photo-info.fa-trash:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}


/******************************* HEADER ***************************************/

#topBar {
    -webkit-box-shadow: 0em 1px 0.18em black;
    -moz-box-shadow: 0em 1px 0.18em black;
    box-shadow: 0em 1px 0.18em black;
    padding-top: .3em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 10;
    display: inline-block
}
/*#topBar a {
    padding: 0.18em 0.46em
}*/
/*#topBar td:nth-child(2) { box-shadow: -3px 1px 2px rgba(0, 0, 0, .5); }*/
#topBar>span:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
.topBarDropdownLink {
    padding: 0 .6em;
    /*text-align: right*/
}
.topBarDropdownLink:hover {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    background: #39f;
    color: white
}
.topBarDropdownLink:active {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
}
.topBarDropdownLink:last-child {
    margin-bottom: .3em
}
.adminCompanyNameLink,
#topBar a {
    font-weight: normal
}
.adminCompanyNameLink:hover {
    -webkit-border-radius: .12em;
    -moz-border-radius: .12em;
    -ms-border-radius: .12em;
    -o-border-radius: .12em;
    border-radius: .12em;
    background: #39f;
    color: white;
    /*padding: 0.18em 0.46em*/
}
#topBarDropdownButton {
    padding: 8px 12px;
    display: inline-block;
    margin: -4px 8px;
    border: 1px outset #cCc;
    border-radius: 8px;
    background-color: #eee;
    background-image: linear-gradient(to bottom, #fff, #eee);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
}
#topBarDropdownButton:hover {
    background-image: linear-gradient(to bottom, #6cf, #17e);
    background-color: #39f;
    color: white
}
#topBarTitle {
    max-width: calc(100% - 300px);
    padding: 5px 0 0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*margin: 0.1em 0em 0.4em 0em*/
}
#topBarMenu {
    padding-right: .3em;
    /*margin: 0.1em 0em 0.4em 0em*/
}
#topBarDropdown {
    -webkit-box-shadow: -1px 1px 0.18em black;
    -moz-box-shadow: -1px 1px 0.18em black;
    box-shadow: -1px 1px 0.18em black;
    display: none;
    border-bottom-left-radius: 8px;
    /*border-bottom-right-radius: .12em;*/
    overflow: hidden;
    padding-top: .3em;
    background: #6085B2;
    z-index: 10;
    position: fixed;
    right: 0;
    top: 120px;
}

#logo { width:265px; text-align:center; vertical-align: middle; }
#logo img { min-width:140px; max-width:250px; min-height:40px; max-height:55px; }
#infoBar { background-color: #6085B2; padding:10px 20px; height:25px; box-shadow: 0em -1px 0.18em rgba(0,0,0,.2); z-index:10; }
#topBarDropdownTitle { border-bottom: 1px solid #000; padding: 0 0 2px 8px; margin: 0 0 5px; font-style: italic; }
#topBarDropdown i.fa { margin-right: 5px; }
#topBarUser select { background-color: #000; color: #fff;  }
ul.tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.tabs li {
    float: left;
    margin: 8px .5em 0 0;
}
ul.tabs .current {
    margin-top: 0 !important;
}

ul.tabs a {
    position: relative;
    background: #ddd;
    background-image: linear-gradient(to bottom, #fff, #ddd);  
    padding: 10px 3.5em;
    float: left;
    text-decoration: none;
    color: #888;
    text-shadow: -1px -1px 1px rgba(255,255,255,.8);
    border-radius: 8px 0 0 0;
    border-top:2px solid #3D69A1;
    border-left:2px solid #3D69A1;
    /*box-shadow: 0 2px 2px rgba(0,0,0,.4);*/
}

ul.tabs a:hover,
ul.tabs a:hover::after,
ul.tabs a:focus,
ul.tabs a:focus::after {
    _background: #fff;
}

ul.tabs a:focus {
    outline: 0;
}

ul.tabs a::after {
    content:'';
    position:absolute;
    z-index: 1;
    top: -2px;
    right: -1.2em;  
    bottom: 0;
    width: 2em;
    /*background: #ddd;*/
    background-image: linear-gradient(to bottom, #fff, #ddd);  
    /*box-shadow: 2px 2px 2px rgba(0,0,0,.4);*/
    transform: skew(30deg);
    border-radius: 0 8px 0 0;  
    border-top: 2px solid #3D69A1;
    border-right: 3px solid #3D69A1;
}

ul.tabs .current a,
ul.tabs .current a::after {
    z-index: 3;
    color: #fff;
    background: #3D69A1;
    padding-bottom: 18px;
    text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}

#tabBar {
  background: #3D69A1;
  height: 20px;
  position: relative;
  z-index: -1; 
  border-radius: 0 8px 0 0;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); 
}
#tabBarEmpty {
  background: #3D69A1;
  color:#fff;
  height:70px;
  font-size: 25px;
  padding:0 20px;
}

/******************************************************************************/

#pageFooter{
    background:#3D69A1;
    position:fixed;
    width:100%;
    height: 48px;
    bottom:0;
    left:0;
    z-index:10;
    -webkit-box-shadow: 0em -1px 0.18em black;
    -moz-box-shadow: 0em -1px 0.18em black;
    box-shadow: 0 -1px 0.18em black;    
}

#pageTopMenu { 
    float: left;
    max-width: 190px;
    padding: 10px;
    /*margin: 0 10px;*/
    border: 2px solid #3D69A1;
    border-radius: 8px;
}

.button2 { 
    display: inline-block; 
    padding: 10px 20px !important; 
    border:2px solid #3D69A1;
    border-radius:5px !important; 
    text-align: center; 
    margin:10px;
}
.button2.small {
    margin:5px;
    padding: 5px 10px !important;
    font-size: small;
}
.button2.selected {
    text-shadow:1px 0 #888, 0 1px #888;
    box-shadow: -1px -1px 1px rgba(0,0,0,.25), 1px 1px 1px #fff;
    background-color:#8AA7C4 !important;
}

#pageTopMenu .button {
    display:table;
    width: 160px;
    min-height:45px;
    margin: 15px;    
    border-radius: 8px;
}

#pageTopMenu .button, .button2 {
    color:#fff !important;
    background-color: #3D69A1 !important;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
}

#pageTopMenu .button span {
    display:table-cell;
    vertical-align: middle;
    padding:10px;
}

.formTable:not(.small) { border-right:1px solid #000; border-bottom: 1px solid #000; }
.formTable:not(.small) td { border-top:1px solid #000; border-left:1px solid #000; }

.input2,
.formTable:not(.small) input[type=text], 
.formTable:not(.small) input[type=number],
.formTable:not(.small) input[type=email], 
.formTable:not(.small) input[type=password], 
.formTable:not(.small) textarea
{
    padding:2px 8px; /* !important; <-- removed for icons on pattern editor */
    margin:5px 0;
    border:1px solid #888 !important;
    background: white !important;
    color: black;    
}

.input2:focus,
.formTable input[type=text]:focus, 
.formTable input[type=number]:focus, 
.formTable input[type=email]:focus,
.formTable input[type=password]:focus, 
.formTable textarea:focus,
.formTable select:focus
{
    color:inherit !important;
}

input[type=text].shadow, 
input[type=number].shadow,
input[type=email].shadow, 
input[type=password].shadow,
textarea.shadow, select.shadow,
.formTable.small input[type=text], 
.formTable.small input[type=number],
.formTable.small input[type=email], 
.formTable.small input[type=password]
{
    margin:5px 0;
    padding:8px !important;
    background: #ddd !important;
    border-radius: 3px !important;
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, .25);
}

.formTable select {
    background: #ccc !important;
    border-radius: 5px !important;
}

div.iconTextBox input{
    color:#000 !important;
    background:#eee !important;
    border-radius: 5px !important;
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, .25);
    padding:10px 0 10px 40px !important;
    margin-bottom: 20px;
    width:80%;
}
div.iconTextBox .fa {
    position:absolute;
    color: #6085B2;
    margin-top:14px;
    left:48px;
}
#forgotPasswordLink {
    color:#3D69A1;
    text-decoration: underline;
}
#forgotPasswordLink:hover {
    background: none;
}

li.ui-tabs-active { border:1px solid #8AA7C4; }
#patternEditTabs { background: #8CA8C8; border:1px solid #000; }
#patternEditTabs li  a:hover { background:none; }
#patternEditTabs li.ui-tabs-active { background: none; padding:5px; font-size: inherit; }
#patternEditTabs li:not(.ui-tabs-active) a { color: #3D69A1; }
#patternEditTabs li:not(.ui-tabs-active) { 
    background:#EAEFF6;
    border: 2px solid #3D69A1;
    border-radius: 5px;
    box-shadow:3px 3px 3px rgba(0,0,0,0.25);
}
#pattern_edit_info{
    color:#3D69A1;
    border:1px solid #000;
    padding:10px;
}

#pattern_edit_info #patternInfoTable,
#pattern_edit_info #colorTable,
#specTable, #fabricTable
{ border-right:1px solid #000; border-bottom:1px solid #000; }

#pattern_edit_info #patternInfoTable td,
#pattern_edit_info #colorTable td,
#specTable td, #fabricTable td
{ border-left:1px solid #000; border-top:1px solid #000; }

#pattern_edit_info #patternInfoTable tr:nth-child(even) td,
#pattern_edit_info #colorTable tr:nth-child(even) td,
#specTable tr:nth-child(even) td, 
#fabricTable tr:nth-child(even) td,
.formTable.striped:not(.small) tr:nth-child(even):not(.head):not(.spacer) td
{ background: #D2DEEB; }

#pattern_edit_info #patternInfoTable tr:nth-child(odd) td,
#pattern_edit_info #colorTable tr:nth-child(odd) td,
#specTable tr:nth-child(odd) td, 
#fabricTable tr:nth-child(odd) td,
.formTable.striped:not(.small) tr:nth-child(odd):not(.head):not(.spacer) td
{ background: #EAEFF6; }

#pattern_edit_info #patternInfoTable tr:first-child td,
#pattern_edit_info #colorTable tr:first-child td
{
    background: #8CA8C8;
    color:#000;
    padding:10px;
}
#system_message{
    color:white;
    background-color:red;
    text-align:center;
    border-top: 1px solid #365680;
    font-size: small;
    font-weight: bold;
}