/* Colors */
body {
   --Yellow:#fde98a; --Rose:#fec8ac;
   --Link:#3366BB; --SubmitButton:#1977bd; --Button:#ddd;
   --Head:rgba(89,119,141,0.9); --SubHead:#658fae;
}

/* Basic styles */
html { height:100% }
body { min-height:100%; position:relative; margin:0 }
body.modal.scroll.touch { overflow-y:hidden }
body.agent .customersOnly { display:none !important }
body:not(.agent) .agentsOnly { display:none !important }
body.hidePvp .pvp { display:none !important }
body, dialog, header, footer, section, form, aside { box-sizing:border-box }
table { width:100% }
hr { clear:both }
img { -webkit-user-drag:none }
span.block, div.inline { display:inline-block }
[hidden] { display:none !important }
.float { float:right }

html:not(.ready) { display:none }
html.wait > body:not(.modal):before { content:""; position:absolute; z-index:100; left:0; right:0; top:0; height:100vh; background:rgba(255,255,255,0.67) url(../img/loading.gif) no-repeat center }
html.wait > body > dialog[open]:before { content:""; position:absolute; z-index:100; left:0; right:0; top:0; bottom:0; background:rgba(255,255,255,0.67) url(../img/loading.gif) no-repeat center }

body.touch :focus, [tabindex="-1"]:focus, summary:focus { outline:none }
summary { cursor:pointer; text-decoration:underline }
details > div { margin:0.75em 0 0 1em }

/* Styles when runnig as public (embedded in USA website) */
body.public { min-height:0; padding:0 }
body.public .private { display:none !important }

/* Base font style and line height */
html, input, textarea, button { font-family:sans-serif }
html { font-size:15.5px }
@media (max-width:550px), (max-height:550px) {
   html { font-size:15px }
}
@media (max-width:400px), (max-height:400px) {
   html { font-size:14.5px }
}
input.field, textarea { font-size:1rem }
input[type="checkbox"] { font-size:inherit }
output.control { display:inline-block }
button { font-size:0.94rem; white-space:nowrap; overflow:hidden }
h1, h2, h4, a.title, span.title { user-select:none; font-family:"Century Gothic","Lucida Sans Unicode",sans-serif; color:Black; font-weight:normal }

/* Translated content */
s { text-decoration:none }
[data-docid] a { color:#2380a6 }
[data-docid] a:hover { text-decoration:none !important; border-bottom:1px dotted }

/* Links, labels and form controls */
a, label, input, textarea { box-sizing:border-box }
a, label, button { user-select:none }
label { cursor:inherit }

a { color:Black; text-decoration:none }
a.disabled { opacity:0.5; pointer-events:none }
body.web a[href^="tel:"] { pointer-events:none }

b, .bold:not(button) { color:#444 }
.bold:not(button) { font-weight:bold }

.width-100 { width:100% !important }
.width-75 { width:75% !important }
.width-50 { width:50% !important }

fieldset { margin:0; padding:0; border:none }
fieldset:disabled label :not(input):not(select), label.disabled :not(input):not(select) { opacity:0.5 }
fieldset:disabled label[data-icon]:before, label.disabled[data-icon]:before { opacity:0.5 }
label input[type="checkbox"]:disabled + * { opacity:0.5 }
label.checkbox { display:inline-block; padding:5px 0; cursor:pointer }

button { background-color:var(--Button); border:2px outset #ddd; padding:0; /*padding:0 6px;*/ }
button:active { border-style:inset }
button:enabled, input[type="checkbox"]:enabled { cursor:pointer }
input[type="checkbox"], input[type="radio"] { width:1.1em; height:1.1em; margin:0 0.25em 0 0; vertical-align:middle }
input[type="date"] { text-align:center }
input.field, textarea { border:1px solid #a8a8a8 }
input.field:not([type="date"]) { padding:5px 0 5px 0.4em }
textarea { padding:4px 6px }
input[list] { padding-right:0 }
select { padding:4px; font-size:0.96rem; border:1px solid #a8a8a8 }
option[disabled] { display:none }
option.italic { font-style:italic }
textarea { resize:none }

/* Metal colors */
.color span[data-value] { display:inline-block; padding:0 5px }
.color [data-value="W"], .color [data-value="WH"], .color option[value="W"], .color option[value="WH"] { background-color:White }
.color [data-value="Y"], .color [data-value="YE"], .color option[value="Y"], .color option[value="YE"] { background-color:var(--Yellow) }
.color [data-value="P"], .color [data-value="RO"], .color option[value="P"], .color option[value="RO"] { background-color:var(--Rose) }

/* Material Icons styles */
@font-face {
   font-family: 'Material Icons';
   font-weight: bold;   /* bold selects filled icons */
   src: url(../fonts/MaterialIcons.woff2) format('woff2');
}
@font-face {  /* weight:bold for filled */
   font-family: 'Material Icons';
   font-weight: normal; /* normal selects outlined icons */
   src: url(../fonts/MaterialIcons-Outlined.woff2) format('woff2');
}

[data-icon]:before { content:attr(data-icon) }
[data-icon-after]:after { content:attr(data-icon-after) }
[data-icon]:before, [data-icon-after]:after {
   font-family: 'Material Icons';
   font-size: 24px;     /* preferred icon size */
   font-weight: bold;   /* filled icons by default */
   font-style: normal;
   text-transform: none;
   display: inline-block;
   line-height: 1;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased; /* support for all WebKit browsers */
   text-rendering: optimizeLegibility;  /* support for Safari and Chrome */
   -moz-osx-font-smoothing: grayscale;  /* support for Firefox */
   font-feature-settings: 'liga';       /* support for IE */
}

[data-icon]:before, [data-icon-after]:after { vertical-align:-25% }
[data-icon]:not(a):before { color:#444 }

[data-icon="more_horiz"]:before { background-color:rgba(0,0,0,0.1); border-radius:5px }
[data-icon="more_horiz"]:hover:before { background-color:rgba(0,0,0,0.15) }

/* Regular links and buttons with link appearance (with optional icon before) */
a.link[href], button.link { color:var(--Link) }
a.link[href].dark, button.link.dark { color:var(--Link) }
button.link { font-size:1rem; border:none; background-color:transparent }
.link.underline { text-decoration:underline }
a.link[href]:hover, button.link:enabled:hover { text-decoration:underline }
button.link:disabled { color:#333; opacity:0.5 }

/* Icons on paragraphs and links */
p[data-icon]:before, .link[data-icon]:before { margin-right:0.25em }
.link[data-icon]:before, .link[data-icon-after]:after { text-align:center; color:inherit }
a.link[data-icon]:not([href]):before, a.link[data-icon-after]:not([href]):after { color:#444 }

/* Icon-only buttons */
button.icon { padding:0; background-color:transparent; border:none }

/* Regular text buttons (with optional icon) */
button.button { height:39px; line-height:35px; padding:0 11px; vertical-align:top; border-radius:10px }
button.button:not(:empty) { min-width:140px }
button.button:disabled, button[data-icon]:disabled { opacity:0.5 }
button.button:not(.light):enabled:hover { opacity:0.9 }
button.button.normal { color:var(--SubmitButton); border:2px solid var(--SubmitButton); background-color:transparent }
button.button.light { color:#444; border:2px solid #777; background-color:White }
button.button.light[data-icon]:before { color:#555 }
button.button.light:enabled:hover { background-color:#eee }
button.button.red { color:#a22; border:2px solid #c55; background-color:White }
button.button.red:hover { background-color:#fdd }
button.button.red[data-icon]:before { color:#a22 }
button.button.bold { color:White; border:2px solid var(--SubmitButton); background-color:var(--SubmitButton) }
button.button[data-icon]:empty:before, button.button[data-icon-after]:empty:after { vertical-align:middle }
button.button[data-icon]:not(:empty) { padding-left:9px }
button.button[data-icon-after]:not(:empty) { padding-right:9px }
button.button[data-icon]:before, button.button[data-icon-after]:after { line-height:inherit; color:inherit }
button.button[data-icon]:not(:empty):before { float:left; margin-right:5px }
button.button[data-icon-after]:not(:empty):after { float:right; margin-left:5px }
button.button.small { height:32px; line-height:30px; border-width:1px; border-radius:8px; border-color:#666 }

button.show-more { width:350px; max-width:100%; height:39px; color:#333; background-color:transparent; border:1px solid #666 }
button.show-more:hover, button.show-more:active { background-color:#eee }

/* Toggle buttons */
button.checkbutton { width:30px; height:30px; padding:0; vertical-align:middle; margin-right:18px; border-width:1px; border-color:#ccc; border-radius:5px }
button.checkbutton[data-icon]:before { font-size:22px }
button.checkbutton.active[data-icon]:before { color:var(--Link) }
button.checkbutton:active, button.checkbutton.active { background-color:#dec }
button.checkbutton.active { border-style:inset }

section { position:relative; margin:0 auto; min-width:320px }
section h1 { display:none }
section h2 { font-size:1.3em }
section .buttons { text-align:center; padding:20px 0 }

/* Normal dialogs */
dialog { border:none !important; position: fixed; top: 50%; left: 50%; transform:translate(-50%, -50%); padding:0; margin: 0; max-width:100%; overflow:auto; color:Black; box-shadow:6px 6px 8px rgba(0,0,0,0.5) }
dialog::backdrop { background-color:rgba(0,0,0,0.5) } /* unknown pseudo-element makes Safari throw the rule */
dialog + .backdrop { background-color:rgba(0,0,0,0.5) }
dialog > a.close { position:absolute; top:15px; right:15px; z-index:1; width:40px; height:40px; text-align:center; border-radius:40px; color:#444; background-color:White }
dialog > a.close:hover { opacity:0.75 }
dialog > a.close[data-icon]:before { line-height:40px; font-size:36px }
dialog h2 { position:relative; margin:0; padding:35px 0 30px; text-align:center; font-size:1.48rem }
dialog header h2 { padding-bottom:7px; position:relative }
dialog header h3 { margin:0; padding-bottom:15px; text-align:center; font-size:1.1rem; font-weight:normal }
dialog h2[data-icon]:before { position:absolute; left:-5px; top:25px; font-size:42px; font-weight:normal; color:#999 }
dialog input.field, dialog select { height:32px }

dialog .buttons { margin:1em 0 1.25em; padding:12px 0; text-align:center }
dialog .buttons button { margin:4px 15px }
@media (max-width:549px) {
   dialog .buttons button { margin:10px }
   dialog .buttons button:not([data-icon]):not([data-icon-after]) { min-width:125px }
}

dialog > .scroll { box-sizing:border-box; overflow-x:auto; overflow-y:auto }
dialog > .scroll nav.buttons { position:sticky; position:-webkit-sticky; bottom:0; margin:0; background-color:White; border-top:1px solid #aaa }

dialog, dialog > .scroll { max-height:100vh }
@media (min-height:700px) {
   dialog, dialog > .scroll { max-height:95vh }
}

dialog .selection-table { border-spacing:0 }
dialog .selection-table thead td { position:sticky; position:-webkit-sticky; top:0 }
dialog .selection-table thead td { background-color:White; padding:2px 0; font-size:0.78rem; color:#666; text-transform:uppercase; border-bottom:1px solid #777 }
dialog .selection-table tbody tr:not(.disabled):not(.empty) { cursor:pointer }
dialog .selection-table tbody td { vertical-align:top; padding:0; font-size:0.96rem; border-bottom:1px solid #aaa }
dialog .selection-table tbody tr:hover { background-color:#f9f9f9 }
dialog .selection-table tbody tr.selected { background-color:#e3e3e3 }
dialog .selection-table tbody tr.disabled td { color:#888 }
dialog .selection-table td.price { text-align:right; padding-right:2%; white-space:nowrap }
dialog .selection-table td.value { text-align:center; white-space:nowrap }
dialog .selection-table td.short { width:8%; max-width:30px; overflow:hidden; text-overflow:ellipsis }
dialog .selection-table td.comment { width:45%; max-width:0 }
dialog .selection-table input[type="radio"] { margin:0 5px; vertical-align:middle }
dialog .selection-table label, dialog .selection-table td.radio, .selection-table td.link { padding:12px 0 }
dialog .selection-table label { display:block; width:100% }
dialog .selection-table a.link { width:100%; text-decoration:underline }
dialog .selection-table span[data-icon] { display:inline-block; padding-top:8px }

/* Menu and search panels */
dialog.panel { top:60px; max-height:calc(100vh - 60px); z-index:20; transform:none; width:280px; height:auto; user-select:none; background-color:#ececec; border:1px solid #aaa; box-shadow:3px 5px 4px rgba(0,0,0,0.25) }
dialog.panel:not([open]) { display:block; box-shadow:none } /* required for open/close animation to work */
dialog.panel::backdrop { background-color:transparent }
dialog.panel + .backdrop { background-color:transparent }
dialog.panel.left { left:-100%; right:auto; transition:left 0.3s }
dialog.panel.left[open] { left:0 }
dialog.panel.right { right:-100%; left:auto; transition:right 0.3s }
dialog.panel.right[open] { right:0; border-left:1px solid #ccc !important }

.block-fields { width:600px; max-width:100% }
.block-fields .control { width:260px }
.block-fields small { display:block; font-size:0.78em }
.block-fields label { display:block; margin:8px 0; font-size:0.96em; white-space:nowrap }
.block-fields label.tight { margin-top:0 }
.block-fields label:not(.checkbox) > :first-child:not(:empty):after { content:":" }
.block-fields label:not(.checkbox) > :first-child.required:before { content:"*\200A" }
.block-fields output { display:inline-block; white-space:nowrap; color:#444; font-weight:bold }
.block-fields output b, .block-fields output i { font-weight:normal }
.block-fields input.field, .block-fields textarea, .block-fields select { font-size:0.96em }
.block-fields textarea { height:3em; vertical-align:top }
.block-fields button { width:auto }
.block-fields i[data-icon] { display:inline-block; margin-left:5px }
.block-fields i[data-icon]:before { color:#555 }
.block-fields .input-with-options { position:relative; display:inline-block; vertical-align:top }
.block-fields .input-with-options input { position:absolute; top:0; left:0; width:210px; height:100%; border-right:0; border-top-right-radius:0; border-bottom-right-radius:0 }
.block-fields .input-with-options select { display:block; width:100% }
@media (max-width:549px) {
   .block-fields { padding-left:8%; padding-right:8% }
   .block-fields .control { width:100% }
   .block-fields small { margin-left:8px; width:240px }
   .block-fields label:not(.checkbox) > :first-child { display:block; width:auto; line-height:2; text-align:left }
}
@media (min-width:550px) {
   .block-fields label:not(.checkbox) > :first-child { display:inline-block; width:230px; line-height:32px; text-align:right; vertical-align:top }
   .block-fields output.control { padding-top:9px; width:300px }
   .block-fields small { margin-top:8px; padding-left:234px; width:270px }
}

.inline-fields label { display:inline-block }
.inline-fields label > :first-child { display:block }

section span > a.download { position:absolute; bottom:5px; right:12px; width:40px; height:40px; background:url(../img/buttons/vlg/download.png) no-repeat center }
body.mouse section span a.download, body.app section span a.download { display:none }
body.mouse section span:hover a.download { display:block }

div.gallery { padding-top:100px; padding-bottom:90px; text-align:center }
div.gallery.columns div { padding-left:24px; padding-right:24px; column-width:240px; column-gap:24px }
div.gallery.columns a.img img { width:100% }
div.gallery.flowed span { margin-left:12px; margin-right:12px }
div.gallery.flowed a.img img { width:272px }
div.gallery span { display:inline-block; position:relative; margin-bottom:24px }
div.gallery a.img { display:block; border-radius:10px; overflow:hidden; box-shadow:1px 1px 4px #999 }
div.gallery a.img img { display:block; cursor:zoom-in }
div.gallery a.img:hover { opacity:0.9; box-shadow:2px 2px 4px #888 }

div.gallery > a.download { display:block; position:relative; top:-35px; margin:0 auto; width:94px; height:35px; line-height:27px; padding:4px 12px; text-transform:uppercase; color:#333; border:1px solid #ccc; border-radius:9px }
div.gallery > a.download:hover { border-color:#666 }
body.app div.gallery > a.download { display:none }

/** App header */
body > header { position:sticky; position:-webkit-sticky; top:0; overflow:visible; z-index:10; text-align:center; box-shadow:0 1px 10px rgba(0,0,0,0.33) }
body > header > nav { height:60px; padding:0 10px; background:white; overflow:hidden }
body > header h1 { float:left; margin:0; width:0; white-space:nowrap; font:1.3rem/60px "Century Gothic",sans-serif }
body > header a.logo { display:inline-block; height:100%; padding:2px 0; }
body.closeout > header a.logo { pointer-events:none }
body > header a.logo img { height:100%; vertical-align:top }
body > header a.logo img { object-fit: contain }  /* fixes problem with automatic width in Safari */
body > header a.nav { position:relative; z-index:1; text-align:center; width:70px; height:100%; background-color:transparent; }
body > header a.nav[href]:hover { color:var(--Link) }
body > header a.nav.active { color:var(--Link); pointer-events:none; border-bottom:3px solid var(--Link) }
#menu-panel[open] ~ header a.nav.menu, #search-panel[open] ~ header a.nav.search, body > header a.nav.search.open { background-color:#ececec }
body > header a.left { float:left }
body > header a.right { float:right }
body > header a.left.sep { margin-left:2% }
body > header a.right.sep { margin-right:2% }
body > header a[data-icon] { color:#444 }
body > header a[data-icon]:before { font-size:30px; line-height:60px }
body > header a.menu[data-icon]:before { font-size:28px }
body > header a.back { width:50px }
body:not(.listing-page) > header a.back, body.closeout > header a.back { visibility:hidden }
body > header a.back[data-icon]:before { position:relative; left:6px; font-size:22px }
body:not(.agent) > header a[data-icon="group"] { display:none }
body.agent > header a[data-icon="pending_actions"], body.customer:not(.hasPendingOrders) > header a[data-icon="pending_actions"] { display:none }
body > header a.order span { position:absolute; top:2px; right:8px; min-width:16px; height:17px; padding:0 1px; font:11px/18px sans-serif; color:White; background-color:#06c; border-radius:12px; border:1px solid White }
body > header a.order span:empty:before { content:"0" }
body > header a.order span.disabled { background-color:#bbb }
body:not(.offline) > header a.offline { visibility:hidden }
body.web > header a.offline { visibility:hidden; width:2% }
body > header a.offline[data-icon]:before { font-size:24px; color:#c99859 }
@media (max-width:700px) {
   body > header a[data-icon="arrow_back_ios"] { display:none !important }
}
@media (max-width:550px) {
   body > header a.nav { width:45px }
   body.closeout > header a.back { display:none }
}
@media (min-width:551px) and (max-width:799px) {
   body > header a.nav { width:50px }
}
@media (max-width:1200px) {
   body > header h1 { display:none }
}
@media (max-width:799px) {
   body > header > nav { padding:0 }
   body > header h1 { font-size:18px }
   body > header a.logo { padding:12px 0 6px }
   body > header a.nav.sep { margin:0 }
   body > header a[data-icon]:before { font-size:28px }
   body > header a.order span { right:2px }
}
@media (min-width:1200px) {
   body > header > nav { padding:0 15px }
}

/** App footer */
body > footer { position:absolute; left:0; right:0; bottom:0; line-height:1.35; text-align:center; color:White; background-color:#555 }
body > footer a { white-space:nowrap }
body > footer a.link[href] { color:White }

body { padding-bottom:85px }
body > footer { height:85px; padding-top:23px; padding-left:10px; padding-right:10px }
@media (max-height:599px) {
   body { padding-bottom:60px }
   body > footer { height:60px; padding-top:20px }
   body.user-login-page { padding-bottom:0 }
   body.user-login-page footer { display:none }
}
body.app.user-login-page { padding-bottom:0 }
body.app.user-login-page footer { display:none }

/* Centers page content vertically (between header and footer) */
section.vcenter { position:absolute; left:0; right:0; top:48%; transform:translateY(-50%) }
section.vcenter:not([hidden]) { padding-bottom:inherit }

/* Styles for views (pages and dialogs) */

#menu-panel { padding-top:8px; font-size:15px }
#menu-panel [data-icon]:before { width:50px; text-align:center; font-size:21px; color:#555 }
#menu-panel .item { border-bottom:1px solid #ddd }
#menu-panel .item:first-child { border-top:1px solid #ddd }
#menu-panel a[href], #menu-panel summary { display:block; padding-left:10px }
#menu-panel > a, #menu-panel summary { line-height:56px }
#menu-panel details a { line-height:46px; text-transform:uppercase }
#menu-panel a:hover, #menu-panel summary:hover { background-color:rgba(0,0,0,0.05) }
#menu-panel summary { list-style:none; text-decoration:none }
#menu-panel summary::-webkit-details-marker { display:none }
#menu-panel details summary[data-icon-after] { position:relative }
#menu-panel details summary[data-icon-after]:after { content:"expand_more"; position:absolute; right:16px; top:0; line-height:60px; font-size:28px; color:#666 }
#menu-panel details[open] summary[data-icon-after]:after { content:"expand_less" }
#menu-panel a:not([data-icon]) { padding-left:60px }
#menu-panel > small { display:block; text-align:right; color:#555; padding:2px 15px; font-size:11px }

body.closeout #menu-panel > .item:not(.closeout) { display:none }
body:not(.closeout) #menu-panel > .item:not(.regular) { display:none }
body:not(.agent) #menu-panel > [data-icon="group"] { display:none }
body.agent #menu-panel > [data-icon="pending_actions"], body.customer:not(.hasPendingOrders) #menu-panel > [data-icon="pending_actions"] { display:none }

#settings-dialog { padding:0 35px; width:350px; max-width:100%; background-color:#ececec }
#settings-dialog label { display:block; white-space:nowrap }
#settings-dialog label, #settings-dialog summary { height:45px; line-height:45px }
#settings-dialog select { width:90px }
#settings-dialog input[type="number"] { width:80px }
#settings-dialog label:not(.checkbox) { padding-left:28px }

@media (max-width:549px) {
   #user-info-dialog .block-fields label { padding-bottom:10px; border-bottom:1px solid #ccc }
   #user-info-dialog .buttons button[name="back"] { display:none }
}
@media (min-width:550px) {
   #user-info-dialog .block-fields label > :first-child { width:200px }
}

body.user-login-page > header { display:none }
body.user-login-page > footer .links { display:none }
#user-login-page { text-align:center }
#user-login-page img, #user-login-page form { vertical-align:middle }
#user-login-page img { display:inline-block; width:250px; height:250px; object-fit:contain }
#user-login-page form { display:inline-block; box-sizing:border-box; width:320px; padding-left:60px; text-align:left }
#user-login-page h2 { margin:0 0 20px 0 }
#user-login-page input, #user-login-page button { margin:5px 10px 5px 0 }
#user-login-page input { width:150px }
#user-login-page button[name="login"] { width:32px; height:30px; padding:0; border:none; vertical-align:bottom; background-color:var(--SubmitButton); border-radius:7px }
#user-login-page button[name="login"][data-icon]:before { color:White }
#user-login-page button[name="sendPassword"] { display:block; margin:20px 0 0 }
body.wait #user-login-page button[name="sendPassword"] { visibility:hidden }
#user-login-page output { display:block; margin:5px 0; color:#f33 }
@media (max-width:500px), (max-height:767px) {
   #user-login-page img { width:210px; height:210px }
}

/*@media (min-height:700px) and (min-width:600px) {
   body.main-page > header > nav { height:100px }
   body.main-page > header a.logo { padding:20px 0 5px }
   body.main-page > header a.nav { margin-top:40px }
   body.main-page > dialog.panel { top:100px; max-height:calc(100vh - 100px) }
}*/
body.main-page > header a[data-icon="arrow_back_ios"] { opacity:0; pointer-events:none }
#main-page { text-align:center }
#listing-page { padding-bottom:40px }
#listing-page button#review-order { width:260px }
#listing-result-bar { margin:0; padding:20px 0; text-align:center; color:#555; border-bottom:1px solid #ccc }
#listing-result-bar a { margin-left:20px; font-size:0.96rem }
#listing-result-bar a[data-icon]:before { font-size:1em }
#listing-result-bar label { margin-left:40px }
#listing-result-bar input[type="checkbox"] { margin:0 2px 0 0; vertical-align:-3px }
#listing-packs label { display:block; position:relative; max-width:800px; margin:35px auto; line-height:1 }
#listing-packs label > input[type="checkbox"] { position:absolute; top:21px; width:22px; margin:0; height:22px }
#listing-packs label > span { display:block; border:1px solid #ccc; border-radius:12px }
#listing-packs label > span:hover { border-color:#aaa }
#listing-packs label > input[type="checkbox"]:checked + span { border-color:var(--Link) }
@media (max-width:767px) {
   #listing-packs { margin:0 5px }
   #listing-packs label > span { padding:20px 10px 20px 42px }
   #listing-packs label > input[type="checkbox"] { left:10px }
}
@media (min-width:768px) {
   #listing-packs { margin:0 30px }
   #listing-packs label > span { padding:20px 15px 20px 165px; white-space:nowrap; background-color:White; background-repeat:no-repeat; background-position:left top; background-size:auto 100% }
   #listing-packs label > input[type="checkbox"] { left:132px }
}
#listing-page h3, #listing-page h3 label { background:var(--SubHead) }
#listing-page h3 { margin:40px 30px 20px 30px; padding:8px 0 6px; text-align:center; color:White }
#listing-page h3 span { text-transform:uppercase; letter-spacing:4px; font:1.2rem/1 "Century Gothic","Lucida Sans Unicode",sans-serif }
#listing-page h3 label { float:right; padding:0 15px 5px 15px; border-radius:10px }
#listing-page h3 label s { font-size:0.96em; line-height:20px }
#listing-page h3 label input[type="checkbox"] { margin:0 0 0 5px; vertical-align:bottom }
#listing-page h3 + p.listing-intro { margin:-20px 30px 20px 30px }
#listing-page p.listing-intro { margin:0 0 2em; padding:15px 0; text-align:center; background-color:#e9e9e9 }
#listing-page p.listing-intro[data-icon]:before { margin-right:15px; font-size:28px }
#listing-page p.listing-intro[data-icon]:before { width:28px; height:28px; background-size:28px }
#listing-page p.listing-intro.plaingold[data-icon]:before { background-image:url(../img/buttons/facet/icon-recycle.png) }
#listing-page p.listing-intro a { white-space:nowrap }
#listing-page ul { margin:1em 0 2em }
#listing-page .subgroup-separator { height: 20px; background: var(--SubHead); margin: 0; text-align: center; color: white; line-height: 20px;}
#listing-page .subgroup-comment { padding: 10px 15px; }
@media (min-width:768px) {
   #listing-page .subgroup-separator {margin: 40px 30px 20px 30px; }
   #listing-page .subgroup-comment { padding: 0; }
}

body.mouse #listing-page li.item input[type="checkbox"]:not(:checked) { opacity:0.8 }
body.mouse #listing-page li.item label:hover input[type="checkbox"] { opacity:1 }

.listing-view del { text-decoration: none; position: relative; }
.listing-view del::before { top: 50%; background:red; opacity:.9; content: ''; width: 110%; position: absolute; height:.1em; border-radius:.1em; left: -5%; white-space:nowrap; display: block; transform: rotate(-15deg); }
.listing-view ul { list-style-type:none; padding:0; text-align:center }
.listing-view li.item { position:relative; display:inline-block; height:280px; margin:1px; text-align:center; vertical-align:middle; overflow:hidden }
.listing-view li.item.disabled { pointer-events:none; opacity:0.5 }
.listing-view li.item[data-icon]:before, .listing-view li.item[data-icon-after]:after { position:absolute; right:8% }
.listing-view li.item[data-icon]:before { top:15px; z-index:1; font-size:28px; color:var(--Link) }
.listing-view li.item[data-icon-after]:after { top:15px; color:#888 }
.listing-view li.item[data-icon][data-icon-after]:after { top:50px }
.listing-view li.item > a:after { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; border-radius:30px; pointer-events:none }
.listing-view li.item > a:hover:after { content:""; border:5px solid rgba(87,87,87,0.075) }
.listing-view li.item > a:focus { outline:none }
.listing-view li.item > a:focus:after { content:""; border:5px solid rgba(0,0,255,0.075) }
.listing-view li.item > a { position:absolute; top:0; left:0; right:0; bottom:0 }
.listing-view li.item > a:not([href]) { cursor:pointer }
.listing-view li.item img { height:225px; width:225px; max-width:100%; object-fit:cover; background-color:#f3f3f3 }
.listing-view li.item img:hover { height:231px; margin-top:-3px }
.listing-view li.item div { position:absolute; left:0; bottom:0; margin:0; width:100%; padding-bottom:30px; text-align:center; background-color:rgba(255,255,255,0.67) }
.listing-view li.item span.feature { display:none }
.listing-view li.item span.feature.icon { position:absolute; top:8px; left:20px; width:45px; height:46px }
.listing-view ul[data-category="300"] li.item span.feature.icon { position:absolute; top:150px; left:238px; width:42px; height:46px }
.listing-view li.item span.feature.ribbon { position:absolute; left:-30px; top:20px; width:120px; padding:1px 0 2px; font:12px sans-serif; color:White; transform:rotate(-45deg) }
.listing-view li.item span.feature.normal { height:24px; white-space:nowrap; font-size:0.9rem; line-height:1 }
.listing-view li.item span.feature.normal[data-icon]:before { color:inherit; font-size:18px; margin-right:4px }
.listing-view li.item span.name { display:block; font-size:0.90em; line-height:1.25 }
.listing-view li.item span.name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.listing-view li.item span.name:hover { position:relative; z-index:1; width:fit-content; min-width:100%; padding-right:5px; background:White }
.listing-view li.item span.detail { font-size:0.90em; color:#555 }
.listing-view li.item span.price:not(:empty) { margin-left:20px; font-size:1.03em; font-weight:bold; color:#333 }
body:not(.closeout) .listing-view li.item span.price { font-family:Georgia,serif }
body.closeout .listing-view li.item span.price { font-family:Verdana,sans-serif; font-size:0.90rem }
.listing-view li.item label { position:absolute; right:0 }
.listing-view li.item input[type="checkbox"] { width:22px; height:22px }
@media (max-width:767px) {
   .listing-view h3, .listing-view h3 + p.listing-intro { margin-left:0; margin-right:0 }
   .listing-view li.item { width:49%; box-sizing:border-box; border-right:1px solid #ccc; border-bottom:1px solid #ccc }
   .listing-view li.item label { top:0 }
   .listing-view li.item input[type="checkbox"] { margin:25px 10px }
}
@media (min-width:768px) {
   .listing-view li.item { width:294px; margin-left:1%; margin-right:1% }
   .listing-view li.item label { top:10px }
   .listing-view li.item input[type="checkbox"] { margin:25px }
}
@media (min-width:768px) and (max-width:1023px) {
   .listing-view li.item.compact { width:31% }
}
@media (min-width:1024px) /*and (max-width:1199px)*/ {
   .listing-view li.item.compact { width:23%; max-width:294px }
}

#search-panel { overflow-x:hidden; font-size:0.96rem }

#filters-form { text-align:center; }
header #filters-form:not(.open) { display:none; }
dialog #filters-form button { font-size:0.96rem }
dialog #filters-form nobr { display:block; white-space:normal }
#filters-form .filter { height:36px; vertical-align:middle }
dialog #filters-form .filter { margin:7px 0 }
header #filters-form .filter { margin:4px 0.5% }
#filters-form .active:enabled { border-color:var(--Link) }
dialog #filters-form select, dialog #filters-form label.checkbox, dialog #filters-form hr { width:200px }
#filters-form select { border-radius:6px; padding-left:0; padding-right:0; text-align-last:center }
dialog #filters-form select { padding-left:20px; text-align-last:left }
#filters-form select.active:enabled { color:var(--Link) }
#filters-form select:not(.active):enabled:hover { border-color:#777 }
#filters-form option { color:Black }
#filters-form option.literal { font-style:italic }
#filters-form select:not(.active) option.all { display:none }
#filters-form label { display:inline-block; position:relative }
#filters-form label select { height:100% }
#filters-form label[data-icon]:before { position:absolute; left:8px; top:10px; font-size:15px; color:#666; pointer-events:none }
#filters-form label.active[data-icon]:before { display:none }
header #filters-form label[data-icon] select:not(.active) { padding-left:20px; text-align-last:left }
#filters-form label[data-icon] select.active { position:relative }
dialog #filters-form nobr.checkbox { margin-top:4px }
#filters-form label.checkbox { line-height:34px }
dialog #filters-form label.checkbox { margin:3px 0 5px; text-align:left; white-space:nowrap }
header #filters-form label.checkbox s.long { display:none }
dialog #filters-form label.checkbox s.short { display:none }
header #filters-form label.checkbox { padding-left:0.5%; padding-top:2px; font-size:0.90rem }
header #filters-form label.checkbox input { margin:0 2px 0 0 }
#filters-form label.mini { font-weight:bold; color:#666 }
dialog #filters-form label.mini { width:16px }
header #filters-form label.mini { margin-left:16px }
#filters-form input[type="number"] { width:88px; padding:0 2px; text-align: left; padding-left: 7px; font-size:0.90em }
header #filters-form input.from { margin-right:0 }
header #filters-form input.to { margin-left:0 }
dialog #filters-form .refSearch { display:block; margin:14px 0 }
header #filters-form .refSearch { float:right; margin:0 1% }

header #filters-form .lastSearchesPanelContainer {background: white; border: 1px solid gray; position: absolute; right: 0; left: 0; display: none; box-sizing: border-box; z-index: 1;}
header #filters-form .lastSearchesPanelContainer.open {display: block;}
header #filters-form .lastSearchesPanelContainer .item { padding: 10px 3px; text-align: left; overflow: hidden;}
header #filters-form .lastSearchesPanelContainer .item:hover { background: rgb(226, 226, 226); cursor: pointer;}
header #filters-form .lastSearchesPanelContainer .item.selected { background: rgb(226, 226, 226); cursor: pointer;}

dialog #filters-form .lastSearchesPanelContainer {background: white; border: 1px solid gray; position: absolute; right: 0; left: 8px; display: none; z-index: 1; box-sizing: border-box;}
dialog #filters-form .lastSearchesPanelContainer.open {display: block;}
dialog #filters-form .lastSearchesPanelContainer .item { padding: 10px 3px; text-align: left; overflow: hidden;}
dialog #filters-form .lastSearchesPanelContainer .item:hover { background: rgb(226, 226, 226); cursor: pointer;}
dialog #filters-form .lastSearchesPanelContainer .item.selected { background: rgb(226, 226, 226); cursor: pointer;}

dialog #filters-form .searchInputContainer { position: relative;}
dialog #filters-form .filters { display:block; padding-top:10px; border-top:1px solid #ccc }
header #filters-form .filters { display:contents }
#filters-form input[name="ref"] { height:36px; font-size:0.90rem }
dialog #filters-form input[name="ref"] { width:150px; padding:0 8px; margin-left:8px }
dialog #filters-form button[name="barcode"][hidden] + label input[name="ref"] { width:200px; margin-left:0 }
header #filters-form input[name="ref"] { padding:0 18px 0 2px; text-align:center }
#filters-form input[name="ref"]:not(.active):focus { border-color:#777 }
#filters-form input[name="ref"]:disabled { font-style:italic }
body.touch #filters-form input[name="ref"]:focus { padding-right:2px }
body.touch #filters-form input[name="ref"]:focus + button { display:none }
#filters-form button[name="clearRef"] { position:absolute; top:0; right:0; width:28px; height:100% }
#filters-form button[name="clearRef"][data-icon]:before { font-size:22px }
#filters-form button[name="clearRef"][data-icon="search"]:before { opacity:0.5 }
#filters-form button[name="barcode"] { width:38px; border:1px solid #777; border-radius:6px; background:url(../img/buttons/icon-barcode.png) no-repeat center }
#filters-form button[name="barcode"]:disabled { opacity:0.4 }
header #filters-form button[name="barcode"] { margin-right:0 }
dialog #filters-form button[name="reset"] { display:block; margin:15px 0 25px; padding:0 10px 0 40px; text-align:left }
dialog #filters-form button[name="reset"][data-icon]:before { font-size:1em; width:1.6em }
dialog #filters-form button[name="search"] { width:100%; height:42px; line-height:40px; background-color:#e0e0e0; border:1px solid #ccc }
dialog #filters-form button[name="search"]:hover { background-color:#d9d9d9 }
dialog #filters-form button[name="search"][data-icon-after]:after { float:right; color:#444; line-height:inherit }
header #filters-form button[name="search"], header #filters-form button[name="reset"] { display:none }

#item-dialog { width:940px; font-size:0.96rem }
body.public #item-dialog { position:relative !important; top:0; width:100%; transform:none }
body.public #item-image { max-width:675px }

/* Prevent scrollbar in iframe because it's sometimes undersized by 1px */
body.public #item-dialog > .scroll { overflow-y:hidden }

#item-dialog a[href].link { text-decoration:underline }
#item-dialog a[href].link:after { font-size:1.2em }
#item-info-data a[href].link { color:#333 }
#item-dialog.icon .swipe:before { content:""; position:absolute; z-index:1 }
#item-dialog .scroll { overflow-x:hidden; padding-bottom:60px }
#item-dialog .swipe { position:relative; box-sizing:border-box; right:0; overflow:hidden; padding-bottom: 60px; }
#item-dialog .swipe.enableTransition { transition:right 0.5s }

#item-dialog span.ribbon { display:none; position:absolute; left:-40px; top:30px; width:160px; line-height:24px; text-align:center; font-size:0.95rem; color:White; transform:rotate(-45deg) }
#item-dialog.nuevo span.ribbon { display:block; background-color:#ebb134; text-transform:uppercase }
#item-dialog.bestSeller span.ribbon { display:block; background-color:var(--Link) }

#item-dialog .image { display:inline-block; position:relative; vertical-align:middle }
#item-dialog .image:before { content:""; display:block; padding-top:100% }
#item-dialog .image > img { position:absolute; top:0; left:0; width:100%; cursor:zoom-in }
#item-dialog .image.zoomed > img { object-fit:none; cursor:zoom-out }

#item-dialog aside { display:inline-block; margin-bottom:2em; vertical-align:middle; text-align:left; max-width:450px }
#item-dialog aside > label { position:relative; display:inline-block; padding:9px 10px; font-size:0.90rem; line-height:20px; border:1px solid #999; border-radius:9px }
#item-dialog aside > label.checked { border-color:var(--Link) }
#item-dialog aside > label.checked.withColor:after { content:""; pointer-events:none; position:absolute; right:-40px; top:7px; box-sizing:border-box; width:24px; height:24px; box-shadow:1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="W"]:after { background-color:White; box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="Y"]:after { background-color:var(--Yellow) }
#item-dialog aside > label.checked.withColor[data-color="P"]:after { background-color:var(--Rose) }
#item-dialog aside > label.checked.withColor[data-color="WY"]:after { background-image:linear-gradient(to right bottom, White 50%, var(--Yellow) 50%); box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="WP"]:after { background-image:linear-gradient(to right bottom, White 50%, var(--Rose) 50%); box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="WYP"]:after { background-image:linear-gradient(to right, White 33.3%, var(--Yellow) 33.3%, var(--Yellow) 66.6%, var(--Rose) 66.6%); box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label input { width:20px; height:20px; margin:0 3px 0 0; vertical-align:top }
.item-info-data { position:relative }
.item-info-data label { white-space:nowrap }
.item-info-data label > :first-child { font-size:0.78rem; color:#666; text-transform:uppercase }
.item-info-data label > :first-child:after { content:"\2009:"; font-size:0.78rem; font-weight:bold }
.item-info-data label > .capitalize { text-transform:capitalize }
.item-info-data button { float:right; margin-right:10px; position:relative; top:-8px }
#item-info-data { padding:9px 5px 9px 15px; background-color:#e9e9e9 }
#item-info-data h3 { margin:6px 0 1em 0; font-size:inherit; text-transform:capitalize }
#item-info-data label { display:block; margin:5px 0 }
#item-info-data label a:not([href]):after { content:none }
#item-info-data label.promo-price { display: none; position: relative; }
#item-info-data label.promo-price del { text-decoration: none; position: relative; }
#item-info-data label.promo-price del::before { top: 50%; background:red; opacity:.9; content: ''; width: 110%; position: absolute; height:.1em; border-radius:.1em; left: -5%; white-space:nowrap; display: block; transform: rotate(-15deg); }

#item-info-stock { text-align:center; padding-top:10px }
#item-info-ref { margin:12px 15px 20px; padding-top:1em; overflow:visible; border-top:1px solid #ddd }
#item-info-ref label { display:block }
#item-info-refs { width:100%; margin:1em 0 1.5em; border-spacing:0; color:#444; line-height:16px }
#item-info-refs thead.hide-ct-centro span { display:none }
#item-info-refs input[type="radio"] { margin:0; vertical-align:middle; height:1rem }
#item-info-refs tbody tr.selected { background-color:#e9e9e9; user-select:text }
#item-info-refs tbody tr:not(.selected) { cursor:pointer }
#item-info-refs tbody tr.selected:not(.unavailable) { color:Black }
#item-info-refs tbody tr:not(.unavailable):hover { color:Black }
#item-info-refs thead td { padding:7px 0; font-size:0.9rem; border-bottom:1px solid #777 }
#item-info-refs tbody td { padding:7px 5px 6px }
#item-info-refs td:not(:nth-child(2)) { text-align:center }
#item-info-refs tr.checked td[data-icon-after]:after { float:right; color:var(--Link); font-size:16px }
#item-info-refs tr.checked.muestrario td[data-icon-after]:after { margin-right:4px }
#item-info-refs tr:not(.checked) td[data-icon-after]:after { display:none }
#item-info-refs tr.muestrario td[data-icon]:before { float:right; color:#888; font-size:15px }
#item-info-refs tr:not(.muestrario) td[data-icon]:before { display:none }
#item-info-refs tr.consumida td[data-icon] { color:var(--Link); font-weight:bold }
#item-info-refs tr.unavailable { color:#c33 }
#item-metal img { vertical-align:-1px }
#item-extra { font-size:0.85rem; color:#555; margin:1em 0 0 }
#item-extra:empty { margin:0 }

body.app #item-sku, body.public #item-sku { display:none }
body.closeout #item-info-stock { display:none }
body.closeout #item-line { display:none }
body.closeout #item-subline { display:none }

#item-dialog nav { position:absolute; left:0; right:0; bottom:0; text-align:center; line-height:60px; font-size:0.96rem; border-top:1px solid rgba(0,0,0,0.2); background-color:rgba(255, 255,255,0.8) }
#item-dialog nav button { width:60px; height:60px }
#item-dialog nav button[data-icon]:before { font-size:44px }
#item-dialog nav button:hover { background:#f2f2f2 }
#item-dialog nav button.prev { float:left }
#item-dialog nav button.next { float:right }
#item-dialog:not(.prev) nav button.prev { visibility:hidden }
#item-dialog:not(.next) nav button.next { visibility:hidden }

#item-dialog ul.tabs { display:flex; margin:0; padding:0; list-style-type:none; color:#333 }
#item-dialog ul.tabs li { flex:0 1 50%; position:relative; padding:12px 0 6px; text-align:center; border-bottom:4px solid #bbb }
#item-dialog ul.tabs li:not(:last-child) { margin-right:2px }
#item-dialog ul.tabs li.active { border-color:var(--Link) }
#item-dialog ul.tabs li:not(.active) { cursor:pointer }
#item-dialog ul.tabs li.active,
#item-dialog ul.tabs li:hover { background-color:#ececec }
#item-dialog ul.tabs li.checked:before { position:absolute; right:5px; top:10px; color:var(--Link); font-size:16px }
#item-dialog ul.tabs li:not(.checked):before { display:none }
#item-dialog ul.tabs li.unavailable span.quality { color:#c33 }
#item-dialog ul.tabs span.quality { font-weight:bold; white-space:nowrap; margin-right:8px }
#item-dialog ul.tabs span.price { font-size:0.90rem }

#item-precio { float:right; text-align:right }
body:not(.closeout) #item-precio { font:bold 18px/15px Georgia,serif }
body.closeout #item-precio { font:16px/1 Verdana,sans-serif }
body.closeout #item-precio small { display:block; font-size:14px }
#item-order-options-button { float:right; margin:2px 4px 0 0; min-width:4em; text-align:right; padding:0 10px 0 0; line-height:34px }
body.closeout #item-order-options-button { font-size:16px; font-family:Verdana,sans-serif; text-shadow:1px 0 0 Black }
#item-order-options-button:disabled { opacity:1; color:Black; border-color:transparent; background-color:transparent }
#item-order-options-button[data-icon]:before { margin:0 7px; vertical-align:-25%; color:#444 }
#item-order-options-button:disabled[data-icon]:before { display:none }

@media (max-aspect-ratio:1/1) and (max-width:767px) { /* vertical and small */
   #item-dialog .swipe { text-align:center }
   #item-dialog aside { width:90%; text-align:left; margin-bottom:3em }
   #item-dialog nav { border-width:2px; background-color:White }
   #item-dialog .image { width:100%; max-width:55vh }
   #item-info-data label { margin:4px 0 }
   #item-info-ref { padding-top:0; border:none }
   #item-info-refs tbody td { padding-top:8px; padding-bottom:8px }
}
@media (min-aspect-ratio:1/1), (min-width:768px) { /* horizontal or big enough*/
   #item-dialog aside { width:40.5%; margin-top:60px }
   #item-dialog .image { width:57% }
}

#item-order-dialog { width:680px }
#item-order-dialog form { position:relative; padding:0 4%; text-align:center }
#item-order-dialog img { position:absolute; top:-5px; left:2%; width:100px; height:100px }
#item-order-dialog nav { position:relative; margin-bottom:1em; padding:15px; background:#eee; line-height:30px; border-radius:30px; box-shadow:1px 1px 0 #ccc }
#item-order-dialog nav button { margin:0 5px; width:32px; height:30px; padding:0; vertical-align:top; border-radius:6px }
#item-order-dialog nav button[data-icon]:before { vertical-align:baseline }
#item-order-dialog nav button[name="delete"][data-icon]:before { color:#a00 }
#item-order-dialog nav button[name="add"] { margin-left:15px }
#item-order-dialog nav button[name="add"][data-icon]:before { color:#333 }
#item-order-dialog nav output { display:inline-block }
#item-order-dialog nav output[name="ref"] { margin:0 20px; line-height:30px; font-size:16px }
#item-order-dialog nav output[name="pos"] { width:40px; font-size:15px }
#item-order-dialog .scroll { overflow-x:hidden }
#item-order-dialog .swipe { position:relative; box-sizing:border-box; right:0 }
#item-order-dialog .swipe.enableTransition { transition:right 0.5s }
#item-order-dialog .fieldset { font-size:0 }
#item-order-dialog .control { display:inline-block; box-sizing:border-box; width:25%; min-width:145px; padding:10px; font-size:1rem; white-space:nowrap }
#item-order-dialog .control span.label { line-height:32px; font-size:0.95rem; color:#333; white-space:nowrap; text-transform:uppercase }
#item-order-dialog input, #item-order-dialog select { width:100%; margin:0 }
#item-order-dialog input.center { text-align:center; padding:5px 0 }
#item-order-dialog input:disabled, #item-order-dialog input[readonly], #item-order-dialog span.input { color:Black; background-color:transparent; border-color:#a8a8a8 transparent transparent }
#item-order-dialog select { padding:5px 8px }
#item-order-dialog .units button { width:28px; height:28px; border:none; border-radius:5px }
#item-order-dialog .units button[data-icon]:before { font-size:15px }
#item-order-dialog input[name="units"] { width:38px; margin:0 5px }
#item-order-dialog span.input output { display:inline-block; width:100%; line-height:30px; border-top:1px solid #a8a8a8 }
#item-order-dialog span.input output[name="importe"] { font-weight:bold }
#item-order-dialog .control.comment { min-width:290px }
#item-order-dialog .control.comment input { text-align:left }

#order-page form { margin:0 auto; padding:30px 0 4em; text-align:center }
#customer-header { position:sticky; position:-webkit-sticky; top:60px; padding:13px 0 11px; line-height:22px; text-align:center; font-size:0.96em; background-color:rgba(229,229,229,0.9) }
#customer-header > button { margin-left:5px }
@media (max-width:599px) {
   #customer-header > span[data-icon]:before { display:none }
}
#order-page table { margin:0 auto; border-collapse:collapse }
/* #order-page table.hide-discount td.dto { display:none } */
#order-page thead, #order-page td.label { font-size:1rem }
#order-page tbody td { font-size:0.96rem; background:White }
#order-page tr { transition:opacity 0.25s linear }
#order-page tr.unlisted td.calidad, #order-page tr.unlisted td.metal { color:#888 }
#order-page tr.warning { background-color:#ff7f00 }
#order-page tr.warning td { opacity:0.9 }
#order-page td { padding:0; text-align:center }
#order-page td.label { text-align:right; color:#444 }
#order-page td.numeric button { height:28px; padding:0 6px; border-radius:5px }
#order-page td.numeric button.active { color:#006a6a; font-weight:bold }
#order-page thead td { padding-top:10px; padding-bottom:8px; color:White; background-color:var(--Head) }
#order-page tbody tr.title td { background-color:var(--SubHead) }
#order-page tbody:nth-of-type(-n+2) tr.title td { border-top:1px solid rgba(0,0,0,0.15) }
#order-page tbody tr.title td { padding:8px 0 7px; color:White; text-transform:uppercase; letter-spacing:4px }
#order-page tfoot td { height:50px; border-top:2px solid #999 }
#order-page tbody.piezas tr.first:not(:first-child) td { border-top:1px solid #ddd }
#order-page tbody.piezas tr.pieza:not(.first) td.pieza { padding-bottom:30px }
#order-page tbody.piezas tr.pieza td:not(.img):not(.pieza) { padding-bottom:30px; vertical-align:bottom; line-height:33px; white-space:nowrap }
#order-page td.pieza a { color:Black }
#order-page td.pieza i.ref { display:block; line-height:1.5; font-size:0.93rem; font-style:normal; color:#666 }
#order-page td.img { width:140px; min-width:140px }
#order-page td.img img { display:block; width:100%; height:110px; object-fit:cover }
#order-page td.img:hover + td.pieza a { text-decoration:underline }
#order-page td.price { text-align:right; padding-right:10px; white-space:nowrap }
#order-page td.price.total { font-weight:bold; color:#444 }
#order-page td.price.total i { font-weight:normal }
#order-page td.percent { text-align:right; padding-right:10px }
#order-page td button.icon { height:33px }
#order-page td button.icon:enabled:hover { background-color:#eee }
#order-page td button.icon.active[data-icon]:before { color:var(--Link) }
#order-page td .action-button { display:inline-block; width:33px; vertical-align:middle }
#order-page td.units { padding-left:10px; padding-right:10px; white-space:nowrap }
#order-page td.units .action-button { width:25px; height:25px; border:none; border-radius:5px }
#order-page td.units .action-button[data-icon]:before { font-size:15px }
#order-page td.units span.units { display:inline-block; vertical-align:middle; width:30px; line-height:29px }
#order-page td.talla select { min-width:40px; margin:0 5px }
#order-page td.color select { margin:0 5px }
#order-page tbody.piezas-empty td { background-color:#f3f3f3; border-top:1px solid #999 }
#order-page tbody.piezas-empty td.img[data-icon]:before { color:#aaa; font-size:28px }
#order-page table.empty tbody.piezas-empty td.img { display:none }
#order-page table.empty tbody.piezas-empty td { padding:15px 0 }
#order-page table:not(.empty) tbody.piezas-empty p { display:none }
#order-page table:not(.empty) thead + tbody.piezas-empty { display:none }
#order-page tr.piezas-empty td { font-size:0.90rem }
#order-page tr.piezas-empty p { font-size:1rem; color:#666 }
#order-page tr.piezas-empty button { border-style:dotted; background-color:transparent }
#order-page tr.piezas-empty button:not(:disabled):hover { background-color:White }
#order-page td.detail button[data-icon]:before { padding:2px }
#order-page tfoot td.delete button[data-icon]:before { color:#A00 }
#order-page tfoot td.remarks { text-align:left }
#order-page tfoot td.remarks button { color:#444; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#order-page tfoot td.remarks button.active { color:var(--Link) }
#order-page table.empty tfoot td.remarks button { display:none }
#order-page tfoot td.remarks button[data-icon]:before { vertical-align:-7px; width:36px }
#order-page tbody.packs tr.pack { background-color:#f6f6f6 }
#order-page tbody.packs tr.pack td { border-bottom:1px solid #ddd }
#order-page tbody.packs tr.pack td.pieza { position:relative }
#order-page tbody.packs tr.pack td.pieza a { position:absolute; left:0; bottom:5px; width:100%; font-size:0.84em; line-height:16px; color:#0097c8 }
#order-page tbody.packs tr.pack td.pieza a:hover { text-decoration:underline }
#order-page tbody.packs tr.pack-items { background-color:#eee; box-shadow:inset 0 2px 6px #999 }
#order-page tbody.packs tr.pack-items:not(.open) { display:none }
#order-page tbody.packs tr.pack-items td { padding-top:10px; padding-bottom:10px; font-size:0.96em; line-height:1 }
#order-page tbody.packs tr.pack-items td span { display:block; margin:8px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#order-page tbody.packs tr.pack-items td:not(.pieza) span { border-bottom: 1px solid transparent }
#order-page tbody.packs tr.pack-items td.pieza span { text-align:left; padding-left:20px }
#order-page tbody.packs tr.pack-items td.pieza span a { display:inline-block; text-decoration:none; border-bottom:1px dotted }
#order-page tbody.packs tr.pack-items td.pieza span a:hover { border-bottom-style:solid }
#order-page tbody.piezas-total td { padding-top:10px; padding-bottom:20px; border-top:1px solid #999 }
#order-page .button { min-width:180px }
#order-page .buttons button { margin:8px 15px }
#order-page form .message { margin:10px 0; padding:15px 5%; font-size:0.95em; text-align:center; background-color:#caeaf5 }
#order-page form .message.warn { background-color:#fff0c0 }
#order-page form .message[data-icon]:before { margin-right:12px; font-size:28px }
#order-page form .message[data-icon]:before { width:28px; height:28px; background-size:28px }
#order-page form .message.plaingold[data-icon]:before { background-image:url(../img/buttons/facet/icon-recycle.png) }

#order-page form > details span { display:inline-block; margin-top:0.75em }
@media (min-height:700px) {
   #order-page thead td { position:sticky; position:-webkit-sticky; top:60px }
   #order-page header:not([hidden]) ~ form thead td { top:108px }
}
@media (max-width:1024px) {
   #order-page td.img { width:80px }
}
@media (max-width:767px) {
   #order-page thead, #order-page td.label { font-size:1rem; font-weight:normal }
   #order-page td.pieza a { font-size:0.94em }
   #order-page td.pieza i { font-size:0.90em }
   #order-page td.numeric button { padding:0 3px }
   #order-page td.color select { margin:0 }
   #order-page td.comment { max-width:0; overflow:hidden }
   #order-page td.units { padding-left:0; padding-right:0 }
   #order-page td.units span.units { width:22px }
   #order-page td.price { padding-right:0; text-align:center }
}
@media (min-width:768px) {
   #order-page td.numeric.price button { margin-right:-5px }
}
@media (min-width:1200px) {
   #order-page form { width:95% }
}

.order-send-dialog { width:650px }
.order-send-dialog form { padding:0 8% }
.order-send-dialog.send h2[data-icon]:before { content:"shopping_cart" }
.order-send-dialog.sendCopy h2[data-icon]:before { content:"mail" }
.order-send-dialog.send .sendCopy-only { display:none }
.order-send-dialog.sendCopy .send-only { display:none }
.order-send-dialog p { clear:both }
.order-send-dialog p.customer { margin-top:6px; padding:0.5em; line-height:1.3; background:#e5e5e5 }
.order-send-dialog p.customer span.nombre { font-weight:bold }
.order-send-dialog .control { margin:7px 0 3px }
.order-send-dialog textarea { height:60px }
.order-send-dialog input[type="email"] { line-height:22px }
.order-send-dialog select[name="isQuotation"] { margin:7px 0; width:130px; text-transform:uppercase }
.order-send-dialog output[name="formaPago"] { text-align:center; line-height:32px; background-color:#e5e5e5 }
.order-send-dialog .draft-text { margin-bottom: 15px;}
#order-sign-button, #order-signature { float:right }
#order-sign-button { margin:7px 0 }
#order-signature { display:block; position:relative; padding-right:5px }
#order-signature img { display:block; height:60px }
#order-signature button { position:absolute; top:0; right:0; width:20px; height:25px }
#order-signature button[data-icon]:before { font-size:20px }
#order-signature button:hover { opacity:0.8 }

#order-sign-dialog { width:650px }
#order-sign-dialog canvas { width:100%; height:250px }
#order-sign-dialog .label { text-align:center; line-height:20px; font-size:0.90em; color:#888; border-top:1px solid #d3d3d3 }

#order-GIA-dialog { width: 500px; height: 400px }
#order-GIA-dialog  .label { text-align: center;  line-height: 20px;  font-size: 0.90em;  color: #888;   border-top: 1px solid #d3d3d3 }

#customers-page { padding:0 3% 50px }
#customers-page > div { position:relative }
#customers-page h2 { margin:0 0 20px 0; padding:40px 0 4px 0; border-bottom:1px solid #777 }
#customers-page label { padding:5px 0; font-size:0.96em }
#customers-page label > s:after { content:" :" }
@media (max-width:600px) {
   #customers-page { padding-left:10px; padding-right:10px }
}
@media (max-width:900px) {
   #customers-page label > s:after { content:":" }
}

#section-order-actions p .link { display:inline-block; margin-right:3rem; line-height:26px }
#section-order-actions button[name="info"] { margin-left:4px; position:relative; left:-3rem }

#section-customers form label { display:inline-block; white-space:nowrap }
#section-customers form label.pais { margin-right:3% }
#section-customers form select { max-width:10em; height:27px }
#section-customers form label.filter span { display:inline-block; width:2.25em; overflow:visible }
#section-customers form input[name="filter"] { width:8em; font-size:0.96rem }
#section-customers form input[name="filter"]::placeholder { font-size:0.9rem }
#section-customers form button[name="filterButton"] { margin-right:18px; width:22px; height:27px; vertical-align:middle }
#section-customers form button[name="filterButton"][data-icon]:before { font-size:22px }
#section-customers form a.link { position:relative; display:inline-block; margin-left:2.5%; line-height:37px }
#section-customers table { border-spacing:4px 8px; margin:1em 0; line-height:1 }
#section-customers td { position:relative; padding-left:8px; vertical-align:middle }
#section-customers td .float { white-space:nowrap }
#section-customers td .float span { display:inline-block; width:9rem; color:Black }
#section-customers thead td .float span { text-align:center }
#section-customers tbody td .float span { text-align:right; padding-right:1rem; box-sizing:border-box; border-left:1px solid White }
#section-customers thead { font-size:0.96em }
#section-customers thead td { height:21px; line-height:23px; border-top:4px solid #ddc; padding-top:9px }
#section-customers thead .float { float:none; position:absolute; top:9px; right:0; background-color:White }
#section-customers table.withAction thead .float { right:40px }
#section-customers thead .float [data-icon]:before { font-size:18px; color:#555 }
#section-customers tbody { font-size:0.90em; background-color:#ddc }
#section-customers tr.current { font-weight:bold }
#section-customers tr.highlight { background-color:#dfdfa0 }
#section-customers tr.inactive { color:#555 }
#section-customers td.nombre { line-height:1.3 }
#section-customers table.withAction td.nombre { padding-right:40px }
#section-customers td.nombre a.link { color:inherit; border-bottom:1px dotted }
#section-customers td.nombre.notice { color:#a10 }
#section-customers td.nombre.cexpress { color:var(--Link) }
#section-customers td.nombre span.consign:empty,
   #section-customers td.nombre span.consign:empty + span.balance:empty,
      #section-customers td.nombre span.consign:empty + span.balance:empty + span.purchased:empty { width:0; padding:0 }
#section-customers td.action { padding:0; width:44px; text-align:center; background:White }
#section-customers td.action button { margin-left:4px }
#section-customers td.action button.action { border-radius:5px; padding:0 }
#section-customers button.action { position:relative; width:38px; height:38px; vertical-align:middle }
#section-customers button.action.lamp:after { content:""; position:absolute; top:4px; right:1px; width:6px; height:6px; border-radius:6px }
#section-customers button.action.lamp.green:after { background-color:#0c0 }
#section-customers button.action.lamp.red:after { background-color:Red }
#section-customers button.action.add, #section-customers button.action.load { border-width:1px; border-color:#ccc }
#section-customers button.action.view { border-style:inset; background-color:White }
#section-customers button.action.side { position:absolute; top:0; right:7px }
#section-customers select option.active { font-weight:bold }
#section-customers select optgroup + optgroup { background-color:#eee }
#section-customers .buttons { text-align:center }
@media (max-width:399px) {
   #section-customers button.action.side { right:0 }
   #section-customers table.withAction thead .float { right:28px }
   #section-customers table.withAction td.nombre { padding-right:28px }
}
@media (max-width:599px) {
   #section-customers table { border-spacing:0 4px }
   #section-customers td.poblacion { display:none }
}
@media (max-width:767px) {
   #section-customers thead .float [data-icon]:before { display:none }
   #section-customers td .float span { width:7rem }
   #section-customers tbody td .float span { padding-right:0.5rem }
   #section-customers form select { max-width:11em }
   #section-customers form input[name="filter"] { width:7em }
}

#customer-create-dialog input.field, #customer-create-dialog select { height:30px }
#customer-create-dialog .block-fields label  > :first-child { line-height:30px }
#customer-create-dialog input[type="email"] { text-transform:lowercase }
#customer-create-dialog input.toUpper { text-transform:uppercase }
@media (max-width:549px) {
   #customer-create-dialog .block-fields { padding-right:40px }
}
@media (min-width:551px) {
   #customer-create-dialog label[for="legalType"] { display:inline-block; margin:0 }
}

.customer-info-dialog { width:900px; min-height:50% }
.customer-info-dialog.table { height:100vh }
.customer-info-dialog .scroll { padding:0 5% 40px }
@media (max-width:720px) {
   .customer-info-dialog .scroll { padding:0 0 40px }
   .customer-info-dialog .scroll p { padding:0 2% }
}
.customer-info-dialog nobr[data-icon]:before { margin-right:5px }
.customer-info-dialog nobr { display:inline-block; margin:7px 0 }
.customer-info-dialog nobr small { color:#444 }
.customer-info-dialog button.float { margin:5px 0 10px 10px; padding:2px 0; width:160px; min-height:31px; border-radius:7px }
.customer-info-dialog .warning { color:#d00 }
.customer-info-dialog .sep { margin-left:1.5em }
.customer-info-dialog .sep.block { display:block }
.customer-info-dialog label.search.field { position:relative; padding-right:24px }
.customer-info-dialog label.search.field[data-icon-after]:after { position:absolute; right:0; top:0; bottom:0; font-size:21px; color:#666 }
.customer-info-dialog input[name="ref"] { margin-top:5px; width:125px; height:28px; font-size:0.90rem; text-align:center }

.customer-info-table { margin:2em 0 1em; border-collapse:collapse; background-color:#f3f3f3 }
.customer-info-table thead.sticky td { position:sticky; position:-webkit-sticky; top:0 }
.customer-info-table thead td { vertical-align:middle; padding:8px 0; font-size:95%; font-weight:bold; color:White; background:var(--Head) }
.customer-info-table thead td[data-icon]:before { color:White; font-weight:normal }
.customer-info-table td { vertical-align:top; text-align:center }
.customer-info-table tbody td { padding:8px 4px 0 }
.customer-info-table tbody > tr > td { white-space:nowrap }
.customer-info-table tbody > tr:last-child > td { padding-bottom:16px }
.customer-info-table tbody td.ref, .customer-info-table tbody span { font-size:0.95rem }
.customer-info-table tbody td.price { text-align:right; padding-right:8px }
.customer-info-table td.text { text-align:left }
.customer-info-table tbody td.text { white-space:normal; font-size:95%; min-width:200px; max-width:350px }
.customer-info-table tbody td.checkbox input { width:20px; height:20px }
.customer-info-table tbody td.img { padding:0; width:1px }

#customer-info-dialog a:not([href]), #customer-info-dialog i { color:#666 }
#customer-info-dialog a:not([href]) { font-style:italic }
#customer-info-dialog .scroll { padding:40px 7% }
#customer-info-dialog button[name="catalogSent"] { margin-top:1em; position:relative; overflow:visible }
#customer-info-dialog button[name="catalogSent"]:disabled { margin-bottom:2em }
#customer-info-dialog button[name="catalogSent"] span { position:absolute; left:0; bottom:-1.5em; width:100%; color:#333 }
@media (max-width:720px) {
   #customer-info-dialog .scroll { padding-left:3%; padding-right:3% }
}
#customer-info-dialog .scroll > span { display:inline-block; vertical-align:top; text-align:left }
#customer-info-dialog p[hidden] + hr { display:none }
#customer-name-wrapper { position:relative }
#customer-name-wrapper #customer-logo { position:absolute; top:0; right:5px; height:55px }
#customer-rate { font-family:monospace }
#customer-info-block { margin:0.5em 6% 0.5em 0 }
#customer-info-block details { margin:1em 0 0.5em }
#customer-info-block small { display:inline-block; margin-top:1em }
#customer-address-block { margin:0.5em 0; padding-left:32px; min-width:220px; position:relative }
#customer-address-block[data-icon]:before { position:absolute; top:0; left:0 }
#customer-address-map-link { display:block; font-size:14px; margin-top:0.5em }
#customer-address.empty { font-style:italic }
#customer-address.empty + #customer-address-map-link { display:none }
#customer-last-visit-text { display:block; font-style:italic }
#customer-last-note-texto { display:block; font-style:italic }

#customer-consumed-dialog table { background-color:#ccc }
#customer-consumed-dialog table tbody td { vertical-align:middle; height:4em; padding-top:0; padding-bottom:0; background-color:White; border-bottom:1px solid #ccc }
#customer-consumed-dialog tbody td.img img { display:block; height:100%; width:3.5em; object-fit:cover }
#customer-consumed-dialog tbody td.img img.broken { visibility:hidden }
#customer-consumed-dialog tbody td.unlisted { color:#888 }
#customer-consumed-dialog tbody td.tipo { padding:0 }
#customer-consumed-dialog tbody td.grupo { white-space:normal; padding:0 }

.customer-ordered-table > tbody > tr:nth-child(odd) { background-color:#ddd }
.customer-ordered-table tbody > tr > td { padding-bottom:8px }
.customer-ordered-table { border-bottom:1px solid #aaa}
.customer-ordered-table td.expand { padding-left:0 }
.customer-ordered-table tr.pedido > td { border-top:1px solid #aaa }
.customer-ordered-table tr.pedido > td.expired { color:#d22 }
.customer-ordered-table tr.pedido > td.delivered { color:#090 }
.customer-ordered-table tr.lineas:not(.open) { display:none }
.customer-ordered-table tr.lineas > td { padding:8px 0 }
body.customer .customer-ordered-table table.lineas th.taller { display: none; }
body.customer .customer-ordered-table table.lineas th.orden { display: none; }
.customer-ordered-table table.lineas th, #customer-ordered-dialog table.lineas tr.observaciones td { border-bottom:1px solid #ccc }
.customer-ordered-table table.lineas th { padding-bottom:8px; font-weight:normal }
.customer-ordered-table table.lineas img { width:90px; height:90px; filter:brightness(0.953) }
.customer-ordered-table table.lineas tr.entregado td { background-color:#e9fcdf}
.customer-ordered-table table.lineas tr.entregado img { filter:brightness(0.89) sepia(40%) hue-rotate(50deg) }
.customer-ordered-table table.lineas tr.entregado td.cantidades > :not(.cantidad) { display:none }
.customer-ordered-table .pieza { max-width:220px; text-align:left; padding-left:0; white-space:normal }
.customer-ordered-table td.cantidades span.stockWrapper.green { color:#0b0; font-weight:bold }
.customer-ordered-table .orden { text-align:left }
.customer-ordered-table tr.observaciones td { padding-bottom:16px }
.customer-ordered-table td.observaciones { padding:0; text-align:left; white-space:normal }
.customer-ordered-table td.observaciones i { display:block }
.customer-ordered-table td.observaciones i:not(:empty) { margin-bottom:0.75em }
.customer-ordered-table td.tracking { font-size:0.94rem }
body.customer .customer-ordered-table table.lineas td.taller { display: none; }
body.customer .customer-ordered-table table.lineas td.orden { display: none; }
body.customer .customer-ordered-table table.lineas tr.observaciones { display: none; }

#customer-repairs-dialog table.lineas td { vertical-align:middle }
#customer-repairs-dialog table.lineas .descripcion { text-align:left }
#customer-repairs-dialog table.lineas td.descripcion { white-space:normal; font-size:0.94rem }

#customer-orders-dialog { width:800px }
#customer-orders-dialog table { margin:45px 0 30px; padding:0 2% }
@media (max-width:599px) {
   #customer-orders-dialog table { padding:0 }
}

#dialog-alert-vencido .content { min-width: 320px; }
#dialog-alert-vencido .content .banner-container { padding-top: 10%; text-align: center; }
#dialog-alert-vencido .content .banner-container .blockButton { padding-top: 10%; padding-bottom: 10%; }

#customer-visit-dialog { width:500px }
#customer-visit-dialog .scroll { padding:0 10% }
#customer-visit-dialog input, #customer-visit-dialog  select, #customer-visit-dialog textarea { width:100%; margin:7px 0 }
#customer-visit-dialog textarea { height:60px }

#customer-notes-dialog { width:600px }
#customer-notes-dialog .block-fields textarea { box-sizing:content-box; height:2.5em }
#customer-notes-dialog .block-fields button { float:right; margin-top:8px }
#customer-notes-dialog .customer-note { margin:0; padding:1em; background-color:#eee }
#customer-notes-dialog .customer-note i { display:block; margin:0.5em 0 }
#customer-notes-dialog .customer-note button { float:right }
@media (max-width:549px) {
   #customer-notes-dialog [name="nombreAgente"], #customer-notes-dialog [name="departamento"] { width:80% }
}
@media (min-width:550px) {
   #customer-notes-dialog .block-fields label:not(.checkbox) s { width:150px }
   #customer-notes-dialog .block-fields label.checkbox { margin-left:150px }
}

#customer-message-type-dialog { width:600px }

#customer-message-send-dialog textarea { height:150px }
#customer-message-send-dialog a.link { display:block; text-align:center; margin:20px 0 }
@media (min-width:550px) {
   #customer-message-send-dialog textarea, #customer-message-send-dialog input[name="subject"] { width:320px }
   #customer-message-send-dialog .block-fields label > :first-child { width:200px }
}

#customer-seller-info-dialog { width:600px; line-height:1.5 }
#customer-seller-info-dialog .scroll { padding:0 8% 45px }
#customer-seller-info-dialog p.address { position:relative; padding-left:30px }
#customer-seller-info-dialog p.address:before { position:absolute; left:0 }

/* Dialog box styles (alert, confirm, prompt) */
dialog.box { position:fixed; padding:0; border:none }
dialog.box:not(.image) { top:50%; transform:translate(-50%, -50%); width:540px; max-width:100%; color:Black; font-size:1em; line-height:normal; white-space:normal; box-shadow:6px 6px 12px rgba(0,0,0,0.6) }
dialog.box h4 { margin:0 0 2em; height:40px; line-height:45px; text-align:center; font-size:1.10em; text-transform:uppercase; background-color:#eee }
dialog.box form { margin-top:3.5em; padding:0 35px }
dialog.box h4 ~ form { margin-top:0 }
dialog.box p { margin:1em 0; line-height:1.3 }
dialog.box input, dialog.box textarea { width:100% }
dialog.box input { margin:0.5em 0 }
dialog.box textarea { margin-top:0.5em }
dialog.box input, dialog.box select { height:32px }
dialog.box input[type="date"] { width:40% }
dialog.box p.buttons { margin:1.5em 0; padding:0 }
dialog.box .buttons button { padding:0; width:120px; max-width:45%; height:38px; color:White; border:none; border-radius:10px }
dialog.box .buttons button:hover { opacity:0.9 }
dialog.box .buttons button:disabled { opacity:0.5 }
dialog.box button[name="ok"], dialog.box button[name="alt"] { margin-left:5% }
dialog.box button[name="ok"] { background-color:var(--SubmitButton) }
dialog.box button[name="alt"] { background-color:#7f7f7f }
dialog.box button[name="cancel"] { background-color:#999 }
dialog.box button[name="close"] { position:absolute; top:2px; right:2px; width:36px; height:36px; padding:0; z-index:1; background-color:#ccc; color:#333; border:none }
dialog.box button[name="close"]:before { content:"close"; font:bold 32px "Material Icons"; line-height:36px }
dialog.box button[name="close"]:hover { color:#666 }

dialog.box.image { background:transparent }
dialog.box.image img { max-width:100vw; max-height:100vh; object-fit:contain; vertical-align:middle }
dialog.box.image button[name="close"] { position:fixed; top:10px; right:10px; width:40px; height:40px; color:White; border:none; background:none }
dialog.box.image button[name="close"]:before { text-shadow:1px 1px 2px Black, 1px -1px 2px Black, -1px 1px 2px Black, -1px -1px 2px Black }
dialog.box.image button[name="close"]:hover { color:#eee }

dialog.box.icon form { position:relative; padding-left:100px }
dialog.box.icon form:after { position:absolute; left:25px; top:-10px; font:bold 60px "Material Icons" }
dialog.box.icon.success form:after { content:"check"; color:#89d289 }
dialog.box.icon.info form:after { content:"info"; color:#699dca }
dialog.box.icon.question form:after { content:"help_outline"; color:#699dca }
dialog.box.icon.offline form:after { content:"cloud_off"; color:#eab46d }
dialog.box.icon.warning form:after { content:"error_outline"; color:#eab46d }
dialog.box.icon.error form:after { content:"warning"; color:#eab46d }

/* VISITS LIST PAGE */
#visits-list-page {padding-top: 30px; max-width: 1200px; margin: 0 auto;}
#visits-list-page .filters { margin-bottom: 30px;}
#visits-list-page .data-table-container table {border-spacing: 0; border-collapse: collapse;}
#visits-list-page .data-table-container table tr:hover { background-color: #efefef;}
#visits-list-page .data-table-container tr td, #visits-list-page .data-table-container tr th {padding: 10px 20px; border-bottom: 1px solid rgb(192, 192, 192);}
#visits-list-page .data-table-container tr td.cliente {min-width: 200px;}
#visits-list-page .data-table-container tr td.importancia { text-align: center; }
#visits-list-page .data-table-container tr td.importancia.baja .chip {background-color: #4caf50;}
#visits-list-page .data-table-container tr td.importancia.media .chip {background-color: #ff9800;}
#visits-list-page .data-table-container tr td.importancia.alta .chip {background-color: #f44336; color: white;}

/* VISITS LIST PAGE */
#visit-actions-list-page {padding-top: 30px; max-width: 1200px; margin: 0 auto;}
#visit-actions-list-page .filters { margin-bottom: 30px;}
#visit-actions-list-page .data-table-container table {border-spacing: 0; border-collapse: collapse;}
#visit-actions-list-page .data-table-container table tr:hover { background-color: #efefef;}
#visit-actions-list-page .data-table-container tr td, #visit-actions-list-page .data-table-container tr th {padding: 10px 20px; border-bottom: 1px solid rgb(192, 192, 192);}
#visit-actions-list-page .data-table-container tr td { cursor: pointer; }
#visit-actions-list-page .data-table-container tr td.cliente {min-width: 200px;}
#visit-actions-list-page .data-table-container tr td.importancia { text-align: center; }
#visit-actions-list-page .data-table-container tr td.importancia.baja .chip {background-color: #4caf50;}
#visit-actions-list-page .data-table-container tr td.importancia.media .chip {background-color: #ff9800;}
#visit-actions-list-page .data-table-container tr td.importancia.alta .chip {background-color: #f44336; color: white;}

/* VISIT ACTIONS DIALOG */
#visit-actions-list-dialog .scroll { padding: 20px; width: 100%;}
@media (min-width: 800px) {
   #visit-actions-list-dialog .scroll { width: 900px; max-width: 900px;}
}
#visit-actions-list-dialog .info-container { padding: 10px 20px; }
#visit-actions-list-dialog .info-container div { padding-bottom: 5px; }
#visit-actions-list-dialog #visit-actions-detail-table tr td { padding: 5px 0; }

/* CHIP COMPONENT */
.chip { height: 32px; outline: 0; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 16px; text-decoration: none; background-color: #616161;}
.label-chip { overflow: hidden; padding-left: 12px; padding-right: 12px; color: white;}

/** Forms */
.form-container.horizontal-form {
   display: flex;
   flex-direction: row;
}
.form-control {
   display: flex;
   flex-direction: column;
}
.form-control.col-2 {
   width: calc((100% / 12) * 2);
   margin-right: 30px;
}
/** Material select */
.material-select-container {
   position: relative;
}
.material-select-container label {
   font-size: 1em;
   position: relative;
   display: block;
   transform: translate(5px, 26px);
   color: #444;
   -webkit-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -moz-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -o-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transform-origin: top left;
}
.material-select-container label.shrink {
   transform: translate(0, 0) scale(0.9);
}
.material-select-container label.focused {
   color: #1976d2;
}
.material-select-control {
   position: relative;
}
select.material-select {
   background: transparent;
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   color: #444;
   line-height: 1.3;
   padding: .4em 1.4em .2em 0;
   width: 100%;
   max-width: 100%; /* useful when width is set to anything other than 100% */
   box-sizing: border-box;
   margin: 0;
   border: none;
   border-bottom: 1px solid #aaa;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   outline: none;
   transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
select.material-select.focused {
   border-bottom-color: #1976d2;
}
/* Hide arrow icon in IE browsers */
select.material-select::-ms-expand {
   display: none;
}
/* Hover style */
select.material-select:hover {
   border-color: #888;
   outline: none;
}
/* Set options to normal weight */
select.material-select option {
   font-weight:normal;
}
/* Disabled styles */
select.material-select:disabled, select.material-select[aria-disabled=true] {
   color: #888;
}
select.material-select:disabled:hover, select.material-select[aria-disabled=true] {
   border-color: #aaa;
}
.material-select-icon {
   top: calc(50% - 12px);
   color: #fff;
   right: 0;
   position: absolute;
   pointer-events: none;
   fill: #666;
   width: 1em;
   height: 1em;
   display: inline-block;
   font-size: 1.5rem;
   transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   flex-shrink: 0;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
/** Material select */

/** Material input */
.material-input-container {
   position: relative;
}
.material-input-container label {
   font-size: 1em;
   position: relative;
   display: block;
   transform: translate(5px, 26px);
   color: #444;
   -webkit-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -moz-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -o-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transform-origin: top left;
}
.material-input-container label.shrink {
   transform: translate(0, 0) scale(0.9);
}
.material-input-container label.focused {
   color: #1976d2;
}
.material-input-control {
   position: relative;
}
input.material-input {
   background: transparent;
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   color: #444;
   line-height: 1.3;
   padding: .4em 1.4em .2em 0;
   width: 100%;
   max-width: 100%; /* useful when width is set to anything other than 100% */
   box-sizing: border-box;
   margin: 0;
   border: none;
   border-bottom: 1px solid #aaa;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   outline: none;
   transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
input.material-input.focused {
   border-bottom-color: #1976d2;
}
/* Hide arrow icon in IE browsers */
input.material-input::-ms-expand {
   display: none;
}
/* Hover style */
input.material-input:hover {
   border-color: #888;
   outline: none;
}
/* Disabled styles */
input.material-input:disabled, input.material-input[aria-disabled=true] {
   color: #888;
}
input.material-input:disabled:hover, input.material-input[aria-disabled=true] {
   border-color: #aaa;
}
/** Material input */
.ModeNoShowPrice { display: none;}
.ModeShowPrice { position: relative !important; margin-top: -17px !important; font-size: 10px !important; margin-right: 1px !important; font-weight: bold !important; }