* {
    outline: 0 none;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html {
    font-family: 'Roboto',sans-serif;
    font-style: normal;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Roboto',sans-serif;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 20px;
    color: #050E16;
}

html, body {width:100%;height:100%}

.circle {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    text-align: center;
}

img {
    border: 0;
    height: auto;
    max-width: 100%
}

.tdinput {width:3em;padding:7px;border: 1px solid #aaa;border-radius: 5px;}
td[field=comment] .tdinput {width:100%}
.th-small {font-size:0.9em}

table td {padding:5px}
table th {font-family:'Roboto Condensed'}

table#wine, table.fixedHeader-floating {border-collapse:separate;border-spacing:5px 15px;border:none;contain: strict;}
.dtfh-floatingparenthead {height:85px !important}
table#wine tbody tr, table#wine tbody tr td {height:64px;border:none}
table#wine thead tr th, table.fixedHeader-floating thead tr th {height:32px;border:none;background-color:#a1c5ee}
table#wine tbody tr[exists='0'] td.td-title {background-color:#cc4040;color:#fff}
_table#wine tbody tr[kvv_exists='1'] td.td-price-kvv {background-color:#20cc20}
_table#wine tbody tr[kvv_exists='0'] td.td-price-kvv, _table#wine tbody tr[kvv_exists_target='red'] td.td-price-kvv-target {background-color:#cc4040;color:#fff}
_table#wine tbody tr[kvv_exists_target='green'] td.td-price-kvv-target {background-color:#20cc20}
table#wine tbody tr[error='1'] td.td-title, table#wine tbody tr[self_calc_red='1'] td.td-self-calc, table#wine tbody tr[self_target_red='1'] td.td-self-target {background-color:#aa0000;color:#fff}
table#wine tbody tr[manuf_discount='1'] td.td-manuf {background-color:#c1f5e1}
table#wine tbody td, table#wine thead th, table.fixedHeader-floating thead tr th {position:relative}
_table#wine tbody td span.not-exists {position:absolute;top:2px;left:2px;background-color:#cc4040;border-radius:12px;width:24px;height:24px;}
_table#wine tbody td span.is-exists {position:absolute;top:2px;left:2px;background-color:#10cc10;border-radius:12px;width:24px;height:24px;}
table#wine tbody td span.not-exists {position:absolute;top:-2px;left:-2px;background-color:#aa0000;border-radius:12px;width:24px;height:24px;box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.33);}
table#wine tbody td span.is-exists {position:absolute;top:-2px;left:-2px;background-color:#109910;border-radius:12px;width:24px;height:24px;box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.33);}
table#wine tbody td span.diff, table#wine tbody td span.suppl {position:absolute;bottom:2px;right:3px;font-size:12px;font-weight:700}
table#wine tbody td span.suppl {font-size:10px;font-weight:300;line-height:10px}
table#wine tbody td a {display:flex;align-items:center;width:100%;height:100%;font:inherit;color:inherit;text-decoration:inherit;}
.price a {justify-content:center;flex-direction: column;}
table#wine tbody td.td-price-kvv, table#wine tbody td.td-price-kvv-target, table#wine tbody td.td-self-calc, table#wine tbody td.td-self-target, table#wine tbody td.td-markup {text-align:center}
table#wine tbody td.td-price-kvv-target, table#wine tbody td.td-self-target {cursor:pointer}
table#wine tbody td.td-markup {font-size:18px}
.target-arrow {position:absolute;font-size:28px;top:26px;left:-16px;opacity:0.7;display:none}
.target-arrow.active, table#wine tbody td.td-price-kvv-target:hover .target-arrow, table#wine tbody td.td-self-target:hover .target-arrow {position:absolute;font-size:28px;top:26px;left:-16px;opacity:0.7;display:block;color: #000}

span.price-old {text-decoration: line-through}

.supp-red, .supp-green, .supp-yellow {border-radius:3px;padding:0px 2px;line-height:1.2em;font-size:0.9em}

table#wine tbody td.td-price-vivino span.not-exists, table#wine tbody td.td-price-vivino span.is-exists {display:none}
table#wine tbody td span.comp-extra {position:absolute;top:0px;right:0px;font-size:11px;width:100%;line-height:11px;background-color:#ccc;padding:2px;border-radius:3px}
table#wine tbody td span.vivino-extra {position:absolute;bottom:22px;right:2px;font-size:16px;}
table#wine tbody td span.comp-link {position:absolute;bottom:2px;left:2px;opacity:0.2;cursor:pointer}
table#wine tbody td span.comp-link.big {position:absolute;top:2px;right:2px;font-size:32px;text-align:center;top: calc(100%/2 - 16px);}
table#wine tbody td:hover span.comp-link {opacity:1}

.th-filters {position:absolute;top:2px;left:2px;}
.th-filters.small {top:-10px;left:2px;}
.th-filter {display:inline-block;background-color:#aa0000;color:#fff;line-height:35px;border-radius:15px;width:30px;height:30px;box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.33);cursor:pointer;}
.th-filters.small .th-filter {line-height:25px;border-radius:12px;width:24px;height:24px;box-shadow:none;margin-right:3px;font-size:12.9px}
.th-filter[filter=troubles], .th-filter[filter=not-exists] {background-color:#aa0000;}
.th-filter[filter=is-exists] {background-color:#109910;}
.th-filter[filter=troubles].active {box-shadow:none;margin:1px}
.th-filter svg.fa-filter-fill {display:none}
.th-filter.active svg.fa-filter-fill {display:inline}
.th-filter.active svg.fa-filter {display:none}

.exists-circle {color:#fff;line-height:45px;border-radius:20px;width:40px;height:40px;cursor:pointer;font-size:24px;text-align:center;opacity:.7}
.exists-circle svg.fa-check {display:none}
.exists-circle[is-exists='0'] {background-color: #aa0000}
.exists-circle[is-exists='1'] {background-color: #109910}
.exists-circle.active svg.fa-check {display:inline}
.exists-circle.active {opacity:1}

table#wine tbody td.red, .supp-red, td.td-markup.pink {background-color:#ffa0a0 !important}
table#wine tbody td.td-markup.red {background-color:#aa0000 !important;color:#fff}
table#wine tbody td.green, .supp-green, td.td-markup.green {background-color:#a0ffa0 !important}
table#wine tbody td.yellow, .supp-yellow, td.td-markup.yellow {background-color:#ffffa0 !important}
table#wine tbody td.td-self-target.different, table#wine tbody td.td-price-kvv-target.different {background-color:#FF5403;color:#fff}
table#wine tbody tr:hover td {background-color:#e1f5fe}

.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}

h3, h4, #self-markup, #target-markup {font-weight:500;font-family:'Roboto Condensed'}
#self-markup, #target-markup {font-size:32px}

.custom-field {
  display:block;
  margin:10px 0;
  position: relative;
  font-size: 16px;
  border-top: 15px solid transparent;
  --field-padding: 12px;
}

.custom-field input {
  border: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--field-padding);
  border-radius: 3px;
  width: 220px;
  outline: none;
  font-size: 16px;
  background: none;
  border: 2px solid #888;
  transition: border-color 0.3s ease;
}

.custom-field .placeholder {
  position: absolute;
  left: var(--field-padding);
  width: calc(100% - (var(--field-padding) * 2));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  top: 24px;
  line-height: 100%;
  transform: translateY(-50%);
  color: #666;
  transition:
    top 0.3s ease,
    color 0.3s ease,
    font-size 0.3s ease;
}

.custom-field input + .placeholder {
  left: 8px;
  padding: 0 5px;
}

.custom-field input.dirty + .placeholder,
.custom-field input:focus + .placeholder,
.custom-field input:not(:placeholder-shown) + .placeholder {
  top: -2px;
  font-size: 14px;
  color: #222;
  background: #fff;
  width: auto
}

.custom-field input.dirty,
.custom-field input:not(:placeholder-shown),
.custom-field input:focus {
  border-color: #222;
  transition-delay: 0.1s
}

.custom-field .from-price, .from-site {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  margin-top:4px;
  font-size: 14px;
  color: #222;
  height: 24px;
  user-select: none;
  cursor: pointer;
}

.custom-field .error-message {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  background: #d30909;
  color: #fff;
  height: 24px;
}

.custom-field .error-message:empty {
  opacity: 0;
}
.modal {width:420px;max-width:100%}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.475rem 0.95rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

#help-modal li {padding:5px 0}

.vivino {display:flex}
.vivino .vintage {margin:5px;display:flex;flex-direction:column}
.vivino .vintage .year {background-color:#ccc;font-size:18px;font-family:'Roboto Condensed';text-align:center;padding:10px;order:-1;}
.vivino .merchant {margin:5px 0;background-color:#eee;padding:5px;order:10;min-height:65px}
.vivino .merchant.kvv {order:5;background-color:#efe !important;}
.vivino .merchant .name {font-family:'Roboto Condensed';}
.vivino .price {margin:5px 0;display: flex;justify-content: space-between;}
.vivino .price a {color:inherit;text-decoration:none;border-bottom:1px dotted #000}
.vivino .vintage.light .year {background-color:#cce;}
.vivino .vintage.light .merchant {background-color:#eef;}

.lds-dual-ring {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #888;
  border-color: #888 transparent #888 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.nodisplay {display:none;}
.noshow {visibility:hidden;}