/*------------------------------------*\
    # - RESET
\*------------------------------------*/

/**
* Eric Meyer's CSS Reset
* https://github.com/reefat/css-reset
*/

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table.interactive {
  margin: 30px 0;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  margin: 0;
  outline: 0;
  padding: 0;
}

main,
section,
article,
footer,
header {
  display: block;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: 0;
}

em {
  font-style: italic;
}


:root {
  --select-height: 2.5rem;
  --select-radius: 0.5rem;
  --select-pad-x: 0.875rem;         /* linkes Padding */
  --select-arrow-space: 2.25rem;    /* rechter Innenabstand für den Pfeil */
}


/*------------------------------------*\
    # - FANCYBOX
\*------------------------------------*/

#fancybox-loading,
.fancybox-close,
.fancybox-next span,
.fancybox-prev span {
  background: none;
}

.fancybox-inner {
  color: #7b7b7b;
}

.fb-wrap {
  padding: 30px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.fancybox-close {
  color: #7b7b7b;
  font-size: 16px;
  height: auto;
  right: 5px;
  top: 5px;
  width: auto;
}

.fancybox-inner h2 {
  color: #7b7b7b;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3em;
}

.fancybox-inner h3 {
  color: #7b7b7b;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3em;
  margin-bottom: 10px;
}

.fb-upload .fb-wrap {
  padding: 20px;
}

.fb-suspensions ul.standard li {
  margin-top: 0;
}

.fb-frame-all h2 small span,
.fb-suspensions .switch span {
  cursor: pointer;
  text-decoration: underline;
}

.fb-frame-all h2 small .active,
.fb-suspensions .switch .active {
  text-decoration: none;
}

.fb-frame-all .content-switch,
.fb-suspensions .content-switch {
  display: none;
}

.fb-suspensions .switch {
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 16px;
}

.fb-help-box p {
  color: #7b7b7b;
  font-size: 18px;
  line-height: 1.3em;
  margin-bottom: 0;
}

.fb-help-box .js-response {
  display: none;
}

.fb-help-box p strong {
  font-size: 28px;
  line-height: 1.3em;
}

.fb-help-box textarea {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  height: 170px;
  line-height: 1.3em;
  padding: 10px;
  resize: none;
  width: 100%;
  margin: 20px 0;
}





/*------------------------------------*\
    # - GENERAL
\*------------------------------------*/

body {
  color: #7b7b7b;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

body.no-scroll {
  overflow: hidden;
}

h1 {
  color: #82b338;
  margin-bottom: 30px;

  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(14px, 6vw, 24px);
  line-height: 1.3em;
  overflow: hidden;
}

@media (max-width: 768px) {
  h1 {
    font-weight: normal;
  }
}

h2 {
  color: #666666;
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 30px;
}

p {
  font-size: 14px;
  line-height: 1.3em;
  margin-bottom: 10px;
}

a,
.link {
  color: #bc3e1e;
  cursor: pointer;
  text-decoration: none;
}

a.btn {
  display: inline-block;
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  text-decoration: underline;
}

a.btn:hover,
a.btn:focus,
a.no-hover {
  text-decoration: none;
}

a.passive {
  color: #7b7b7b;
  text-decoration: underline;
}

strong {
  font-weight: bold;
}

small {
  font-size: smaller;
}

ul.standard {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ul.standard li {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 5px;
}

ul.standard li:first-child {
  margin-top: 0;
}

footer {
  color: #666666;
  margin-top: 50px;
  text-align: center;
}

.trustbar {
  background-color: #fff;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  padding: 0;
  width: 100%;
  text-align: center;
}

footer p {
  padding: 20px;
}

.wrap-full-grid {
  margin: 0 auto;
  width: 960px;
}

.red {
  color: #f00 !important;
}

.green {
  color: #82b338 !important;
}


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

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

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

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.btn {
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease;
}

.btn-wide {
  min-width: 200px;
}

.btn-small {
  font-size: 14px;
  padding: 5px 10px;
}

.btn-medium {
  font-size: 16px;
  line-height: 1.3em;
  padding: 10px 20px;
}

.btn-large {
  font-size: 24px;
  padding: 13px 22px;
}

.btn-orange {
  background-color: #ff9b00;
  color: #fff !important;
}

.btn-orange:hover {
  background-color: #ff6b00;
}

.btn-green {
  background-color: #82b338;
  color: #fff !important;
}

.btn-green:hover {
  background-color: #629318;
}

.btn-grey {
  background-color: #eee;
  color: #7b7b7b !important;
}

.btn-grey:hover {
  background-color: #ddd;
}

.btn .icon:before {
  margin-right: -0.2em;
}

.btn-blue,
.btn-blue:hover {
  background-color: #00b4ff;
  color: #fff;
}

.btn.disabled,
.btn.disabled:hover {
  background-color: #eee !important;
  color: #7b7b7b !important;
}

.b-bottom {
  border-bottom: 1px solid #dcdcdc;
}

.b-top {
  border-top: 1px solid #dcdcdc;
}

.input-wrap {
  display: inline-block;
  position: relative;
}

.input-wrap input[type="text"],
.input-wrap input[type="email"] {
  width: 100%;
}

input[type="text"],
input[type="email"] {
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  color: #7b7b7b;
  font-size: 14px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.3em;
  padding: 5px 8px 6px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border: 1px solid #ff9b00 !important;
  outline: 0 none;
}

.input-wrap:has(input[type="text"]:not(.error):user-valid)::after,
.input-wrap:has(input[type="email"]:not(.error):user-valid)::after {
  content: '\e801';
  font-size: 16px;
  line-height: 1em;
  color: #82b338;
  background-color: #fff;
  font-family: 'fontello';
  display: inline-block;
  width: auto;
  position: absolute;
  right: 7px;
  top: calc(50% - 8px);
  z-index: 1;
}

input.error,
textarea.error,
.select-wrap.error select {
  background-color: #ffe0e0;
  border-color: #f00;
}

input.error-text,
.select-wrap.error {
  margin-bottom: 30px !important;
}

span.error-text {
  color: #f00;
  font-size: 12px;
  position: absolute;
  bottom: 10px;
  left: 0;
}

.select-wrap .error-text.error-text {
  bottom: -20px;
}

.underline {
  text-decoration: underline;
}

.c-pointer {
  cursor: pointer;
}

.c-help {
  cursor: help;
}

.c-move-hori {
  cursor: e-resize;
}

.c-move-vert {
  cursor: n-resize;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

@media (min-width: 768px) {
  .d-hide {
    display: none;
  }
}

hr {
  background-color: #dddddd;
  border: 0 none;
  clear: both;
  display: block;
  font-size: 0;
  height: 1px;
  margin: 20px 0;
}

.divider-30 {
  margin: 30px 0;
}

.divider-40 {
  margin: 40px 0;
}

.divider-50 {
  margin: 50px 0;
}

*+.row {
  margin-top: 15px;
}

.row {
  margin-bottom: 15px;
}

* .row:last-child {
  margin-bottom: 0;
}

.col>img {
  max-width: 100%;
  height: auto;
}

.col>*:first-child {
  margin-top: 0;
}

.fancybox-wrap img {
  max-width: 100%;
  max-height: 100%;
}

.select-wrap {
  width: 190px;
  max-width: 100%;
  position: relative;
  display: inline-block;
}

.select-wrap:before {
  font-family: fontello;
  content: "\e814";
  font-size: 18px;
  position: absolute;
  right: 15px;
  top: 7px;
  color: #666;
  pointer-events: none;
}

.select-wrap select {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #ddd;
  width: 100%;
  height: 32px;
  padding: 0 30px 0 8px;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 32px;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}

.select-wrap select option {
  color: #666;
}






/*------------------------------------*\
    # - HEADER
\*------------------------------------*/

header {
  background-color: #82b338;
  margin-bottom: 30px;
  padding: 10px 20px;
}

.ref-fme header {}

.header-contact {
  background-color: #72a22c;
  border: 1px solid #629237;
  border-radius: 5px;
  float: right;
  margin-top: 4px;
  padding: 5px;
}

.header-contact .icon-phone {
  color: #fff;
  font-size: 28px;
  line-height: 1em;
}

.header-contact .icon-phone:before {
  margin-left: 0;
  width: auto;
}

.header-contact p {
  color: #dbff95;
  display: inline-block;
  line-height: 1em;
  margin-bottom: 0;
  vertical-align: top;
}

.header-contact .flag {
  margin: 0 5px;
}

.header-contact .flag+p strong {
  color: #fff;
}

.promotion-header {
  color: #fff;
  padding: 12px 0 14px 0;
  font-size: 21px;
  background-color: #ec2700;
  line-height: 1.3em;
}




/*------------------------------------*\
    # - BRANDING
\*------------------------------------*/

.ref-lwd .icon-ok-circled.green,
.ref-lwd .icon-ok.green,
.ref-lwd tr.discount .green,
.ref-agd .icon-ok-circled.green,
.ref-agd .icon-ok.green,
.ref-agd tr.discount .green {
  color: #82b338 !important;
}

.ref-agd .btn-green,
.ref-agd .btn-orange,
.ref-lwd .btn-green,
.ref-lwd .btn-orange {
  background-color: #e54d27;
  background: linear-gradient(to top, #a42210, #e24b26);
  background-size: 200% 100%;
  background-position: right bottom;
  color: #fff !important;
}

.ref-agd .btn-green:hover,
.ref-agd .btn-orange:hover,
.ref-lwd .btn-green:hover,
.ref-lwd .btn-orange:hover {
  background-color: #e54d27;
  background: linear-gradient(to top, #b43220, #f25b36);
  background-size: 200% 100%;
  background-position: right bottom;
}

.ref-lwfd .header-contact,
.ref-agfd .header-contact,
.ref-ldr .header-contact {
  display: none;
}

.ref-lwfd .green {
  color: #e43516 !important;
}

.ref-lwfd header {
  background-color: #e43516;
  padding: 0;
}

.ref-lwfd header a {
  display: inline-block;
  margin-top: 45px;
}

.ref-lwfd header .wrap-full-grid {
  background-image: url('/tunnel/images/lwfd-header-bg.jpg');
  background-repeat: no-repeat;
  min-height: 200px;
  padding: 10px 20px;
}

.ref-lwfd .process-street-new .active,
.ref-lwfd .process-street-new .active .dot,
.ref-lwfd h1,
.ref-lwfd .delivery-info strong {
  color: #e43516;
}

.ref-lwfd .table-selector .active td {
  background-color: #ffe5c6;
}

.ref-agfd .green {
  color: #3593DD !important;
}

.ref-agfd header {
  background-color: #3593DD;
  padding: 0;
}

.ref-agfd header a {
  display: inline-block;
  margin-top: 45px;
}

.ref-agfd header .wrap-full-grid {
  background-image: url('/tunnel/images/agfd-header-bg.jpg');
  background-repeat: no-repeat;
  min-height: 200px;
  padding: 10px 20px;
}

.ref-agfd .process-street-new .active,
.ref-agfd .process-street-new .active .dot,
.ref-agfd h1,
.ref-agfd .delivery-info strong {
  color: #3593DD;
}

.ref-agfd .table-selector .active td {
  background-color: #e5ffff;
}

.ref-ldr header {
  background-color: #82b338;
  padding: 0;
}

.ref-ldr header .wrap-full-grid {
  padding: 10px 0;
}

.ref-iris .table-selector .active td {
  background-color: #e5f3f1 !important;
}

.ref-iris .icon-ok-circled.green,
.ref-iris .icon-ok.green,
.ref-iris tr.discount .green,
.ref-iris h1,
.ref-iris .delivery-info strong,
.ref-iris .process-street li.active,
.ref-iris .process-street li.passed,
.ref-iris .green {
  color: #3dbaf4 !important;
}

.ref-iris .process-street .active .dot {
  background-color: #3dbaf4;
  border-color: #3dbaf4;
}

.ref-iris .process-street .passed .dot {
  color: #3dbaf4;
  background-color: #fff;
  border-color: #3dbaf4;
}

.ref-iris header,
.ref-iris .process-street .line .passed {
  background-color: #3dbaf4;
}

.ref-iris .header-contact {
  background-color: #3dbaf4;
  border-color: #fff;
  color: #fff;
  margin-top: 13px;
}

.ref-iris .header-contact p {
  color: #fff;
}

/*
	.ref-iris .header-contact .flag,
	.ref-iris .header-contact .flag + p small,
	.ref-iris .header-contact .flag + p br,
	.ref-iris .header-contact .icon-phone + p br {
		display: none;
	}
	.ref-iris .header-contact .icon-phone + p {
		font-weight: normal;
	}
	.ref-iris .header-contact .icon-phone + p strong {
		margin-right: 2px;
	}
	*/


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

.ref-lwd .header-contact,
.ref-agd .header-contact {
  display: none;
}

.ref-lwd .green {
  color: #e43516 !important;
}

.ref-lwd header {
  background-color: #e43516;
  padding: 0;
}

.ref-lwd header a {
  display: inline-block;
  margin-top: 45px;
}

.ref-lwd header .wrap-full-grid {
  background-image: url('/tunnel/images/lwfd-header-bg.jpg');
  background-repeat: no-repeat;
  min-height: 200px;
  padding: 10px 20px;
}

.ref-lwd .process-street-new .active,
.ref-lwd .process-street-new .active .dot,
.ref-lwd h1,
.ref-lwd .delivery-info strong {
  color: #e43516;
}

.ref-lwd .table-selector .active td {
  background-color: #ffe5c6;
}

.ref-agd .green {
  color: #3593DD !important;
}

.ref-agd header {
  background-color: #3593DD;
  padding: 0;
}

.ref-agd header a {
  display: inline-block;
  margin-top: 45px;
}

.ref-agd header .wrap-full-grid {
  background-image: url('/tunnel/images/agfd-header-bg.jpg');
  background-repeat: no-repeat;
  min-height: 200px;
  padding: 10px 20px;
}

.ref-agd .process-street-new .active,
.ref-agd .process-street-new .active .dot,
.ref-agd h1,
.ref-agd .delivery-info strong {
  color: #3593DD;
}

.ref-agd .table-selector .active td {
  background-color: #e5ffff;
}

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

.flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  background: url(/global/images/assets/flags.png) no-repeat
}

.flag.flag-at {
  background-position: -16px 0
}

.flag.flag-ch {
  background-position: -32px 0
}

.flag.flag-de {
  background-position: 0 -11px
}

.flag.flag-es {
  background-position: -16px -11px
}

.flag.flag-fr {
  background-position: -32px -11px
}

.flag.flag-en {
  background-position: 0 -22px
}

.flag.flag-it {
  background-position: -16px -22px
}

.flag.flag-nl {
  background-position: -32px -22px
}




/*------------------------------------*\
    # - CONTENT
\*------------------------------------*/

.process-street-new {
  width: 100%;
  text-align: center;
  position: relative;
  margin: -10px 0 25px 0;
}

.process-street-new li {
  color: #c0c0c0;
  display: inline-block;
  position: relative;
  padding: 0 10px;
}

.process-street-new li.passed {
  color: #8f8f8f;
  cursor: pointer;
}

.process-street-new .dot {
  color: #efefef;
  display: inline-block;
  font-size: 42px;
  height: 20px;
  left: 0;
  line-height: 0;
  vertical-align: top;
}

.process-street-new .active,
.process-street-new .active .dot {
  color: #82b338;
}

.process-street-new .passed .dot {
  color: #cbcbcb;
}

.process-street-new .line {
  background-color: #efefef;
  height: 1px;
  position: absolute;
  top: 27px;
}

.process-street-new .line .passed {
  background-color: #cbcbcb;
  display: block;
  height: 1px;
}

.process-street {
  width: 100%;
  max-width: 800px;
  text-align: center;
  position: relative;
  margin: -10px auto 25px auto;
}

.process-street li {
  color: #bbb;
  position: relative;
  padding: 0 10px;
  font-size: 12px;
  width: 33.3333%;
  float: left;
}

.process-street li.passed {
  color: #82b338;
}

.process-street li.active {
  color: #82b338;
}

.process-street .dot {
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  vertical-align: top;
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 100%;
  color: #bbb;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-right: 1px;
  box-sizing: border-box;
  border: 2px solid #bbb;
  margin-bottom: 7px;
  outline: 3px solid #fff;
}

.process-street .dot .icon {
  font-size: 14px;
}

.process-street .active .dot {
  border-color: #82b338;
  background-color: #82b338;
  color: #fff;
}

.process-street .passed .dot {
  border-color: #82b338;
  background-color: #fff;
  color: #82b338;
}

.process-street a {
  text-decoration: none;
  color: inherit;
}

.process-street .line {
  background-color: #bbb;
  height: 3px;
  position: absolute;
  top: 12px;
  left: 16.6666666666666666%;
  width: 66.6666666666666666%;
}

.process-street .line .passed {
  background-color: #82b338;
  display: block;
  height: 100%;
  width: 0;
}

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

.line-through span {
  color: #7b7b7b;
}

.table-selector {
  width: 100%;
}

.table-selector td,
.table-selector th {
  color: #666666;
  font-size: 14px;
  line-height: 1.3em;
  padding: 8px 5px;
  text-align: left;
}

.table-selector th {
  background-color: #efefef;
  font-weight: bold;
}

.table-selector tr:first-child td {
  border-top: 1px solid #dcdcdc;
}
.table-selector td {
  border-bottom: 1px solid #dcdcdc;
  cursor: pointer;
  position: relative;
}

.table-selector .highlight-new td {
  background-color: #f1faff;
}

.table-selector .active td {
  background-color: #e5f8ff;
}

.table-selector th:first-child+th,
.table-selector td:first-child+td {
  width: 220px;
}

.table-selector.properties th:first-child+th,
.table-selector.properties td:first-child+td {
  width: 280px;
}

.table-selector td:first-child,
.table-selector th:first-child {
  box-sizing: border-box;
  padding-left: 0;
  width: 28px;
}

.table-selector td:first-child+td+td,
.table-selector td:first-child+td+td+td,
.table-selector th:first-child+th+th {
  text-align: right;
}

.table-selector td:last-child,
.table-selector th:last-child {
  text-align: center !important;
  /*width: 40px;*/
  width: 0;
}
.table-selector td:last-child {
  padding: 0;
}

.table-selector label {
  cursor: pointer;
}

.table-selector td:last-child .icon,
.table-selector th:last-child .icon {
  opacity: 0;
}

.table-selector .active td .icon,
.table-selector .active th .icon {
  opacity: 1;
}

.table-selector td .icon-info-circled,
.table-selector th .icon-info-circled {
  font-size: 12px;
  vertical-align: top;
}

.table-selector td .flag-size,
.table-selector td .flag-tipp {
  display: inline-block;
}

.table-selector td .flag-size {
  background-color: #e3e3e3;
  color: #fff;
  font-weight: bold;
  margin: -5px 10px -5px -5px;
  padding: 5px 0;
  text-align: center;
  width: 40px;
}

.table-selector .active td .flag-size {
  background-color: #c4de9f;
}

.table-selector td .flag-fitting {
  float: right;
}

.table-selector td img {
  margin-left: 40px;
}

.step-1 h1 {
  margin-bottom: 20px;
}
.step-1.ref-fce .table-selector.properties[data-id="_1"],
.step-1.ref-fce .table-selector.properties[data-id="_2"],
.step-1.ref-fce .table-selector.properties[data-id="_5"] {
  display: none !important;
}
.step-1 .table-selector {
  margin-top: 30px;
}

.step-1 .table-selector:first-child {
  margin-top: 0;
}

.step-1 .table-selector+p {
  margin-top: 15px;
}

.step-1 .select-border-new {
  border-top: 1px solid #ddd;
  margin-top: 20px;
  padding-top: 5px;
  font-size: 12px;
  line-height: 1em;
}

.step-1.ref-fce [data-mode] .table-selector thead,
.step-1 [data-mode] [data-fb] {
  display: none;
}
.step-1 .select-border-new ul {
  display: inline-block;
}

.step-1 .select-border-new li {
  /*color: #bbb;*/
  color: #7b7b7b;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  border-right: 1px solid #7b7b7b;
}

.step-1 .select-border-new li:last-child {
  padding-right: 0;
  border-right: 0;
}

.step-1 .select-border-new li.active {
  text-decoration: none;
}
.step-1 .btn {
  width: 100%;
}
/*
.step-1 .extras > table:first-child {
  margin-top: 30px;
}
*/

.step-2 .empty-cart .icon {
  font-size: 78px;
  line-height: 1em;
}

.step-2 .empty-cart p {
  margin: 20px 0;
  font-size: 18px;
  line-height: 1.3em;
}

.ref-fce:has(.empty-cart) h1,
.ref-fce .empty-cart .js-upload-btn {
  display: none !important;
}

.delivery-info {
  background-color: #fff;
  display: inline-block;
  font-size: 13px;
}
  .delivery-info strong {
    color: #82b338;
  }

td .anchor {
  background: #00B4FF;
  border-radius: 5px;
  position: absolute;
  right: 10px;
  padding: 3px 5px;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  line-height: 1em;
  font-family: 'open sans', sans-serif;
  text-transform: uppercase
}

table .item img {
  max-width: 130px;
  max-height: 130px;
  vertical-align: top;
}

table td .js-zoom {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

table td .js-zoom:hover {
  background-color: #fff;
}

table td .js-zoom:hover img {
  opacity: 0.2;
}

table td .js-zoom .icon {
  /*color: #000;*/
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  margin-top: 0 !important;
}

table td .js-zoom:hover .icon {
  display: inline-block;
}

.coupon-wrap {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

.coupon-wrap .icon {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
}

.step-3 h2 {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.step-3 form {
  font-size: 0;
}
.step-3 form[name="alt-address"] {
  margin-top: 30px;
}

.step-3 form label,
.step-5-failed label,
.step-finish-payment label {
  font-size: 14px;
}

.step-3 form label,
.step-5-failed label,
.step-finish-payment label {
  display: inline-block;
  width: 35%;
}

.step-3 form .input-wrap+label,
.step-5-failed .input-wrap+label,
.step-finish-payment .input-wrap+label {
  margin-left: 10px;
  width: auto;
}

.step-3 form label+select,
.step-3 form label+.input-wrap,
.step-5-failed label+select,
.step-5-failed label+.input-wrap,
.step-finish-payment label+select,
.step-finish-payment label+.input-wrap {
  margin-top: 10px;
}

.step-3 form label+.input-wrap,
.step-5-failed label+.input-wrap,
.step-finish-payment label+.input-wrap {
  width: 65%;
}

.step-3 form label:first-child+.input-wrap,
.step-5-failed label:first-child+.input-wrap,
.step-finish-payment label:first-child+.input-wrap {
  margin-top: 0;
}

/* special 1 */
.step-3 form .input-wrap.special-1,
.step-5-failed .input-wrap.special-1,
.step-finish-payment .input-wrap.special-1 {
  width: 49%;
}

.step-3 form .input-wrap.special-1+.input-wrap,
.step-5-failed .input-wrap.special-1+.input-wrap,
.step-finish-payment .input-wrap.special-1+.input-wrap {
  width: 15%;
  margin-left: 1%;
}

.step-3 form .input-wrap.special-1+.input-wrap>span,
.step-5-failed .input-wrap.special-1+.input-wrap>span,
.step-finish-payment .input-wrap.special-1+.input-wrap>span {
  width: 16%;
  display: inline-block;
  font-size: 16px;
}

.step-3 form .input-wrap.special-1+.input-wrap>input,
.step-5-failed .input-wrap.special-1+.input-wrap>input,
.step-finish-payment .input-wrap.special-1+.input-wrap>input {
  width: 84%;
}

/* special 2 */
.step-3 form .input-wrap.special-2,
.step-5-failed .input-wrap.special-2,
.step-finish-payment .input-wrap.special-2 {
  width: 20%;
}

.step-3 form .input-wrap.special-2+.input-wrap,
.step-5-failed .input-wrap.special-2+.input-wrap,
.step-finish-payment .input-wrap.special-2+.input-wrap {
  width: 44%;
  margin-left: 1%;
}

.step-3 form .input-wrap.special-2+.input-wrap>span,
.step-5-failed .input-wrap.special-2+.input-wrap>span,
.step-finish-payment .input-wrap.special-2+.input-wrap>span {
  width: 5%;
  display: inline-block;
  font-size: 16px;
}

.step-3 form .input-wrap.special-2+.input-wrap>input,
.step-5-failed .input-wrap.special-2+.input-wrap>input,
.step-finish-payment .input-wrap.special-2+.input-wrap>input {
  width: 95%;
}

.step-3 form li,
.step-5-failed form li,
.step-finish-payment form li {
  padding: 10px 0;
}

.step-3 form+div {
  margin-top: 80px;
}

.step-3 form[name="payment"] li,
.step-5-failed form[name="payment"] li,
.step-finish-payment form[name="payment"] li {
  min-height: 42px;
  padding: 0;
}

.step-3 form[name="payment"] label,
.step-5-failed form[name="payment"] label,
.step-finish-payment form[name="payment"] label {
  padding: 10px 0;
}

.step-3 form[name="payment"] img,
.step-5-failed form[name="payment"] img,
.step-finish-payment form[name="payment"] img {
  vertical-align: middle;
  max-height: 31px;
}

.step-3 form[name="payment"] li.disabled {
  opacity: 0.5;
}

.step-3 .js-toggle-ups {
  max-width: 100%;
  display: inline-block;
  width: auto;
}

.step-3 .ups-wrapper,
.step-3 .ups-wrapper > div {
  display: flex;
  flex-flow: column;
}
.step-3 .ups-wrapper input {
  max-width: 150px;
}
.step-3 .ups-wrapper > div {
  max-width: none;
  gap: 10px;
  margin-top: 20px;
}
.step-3 .ups-wrapper div input {
  max-width: none;
}


.step-3 .ups-result {
  display: none;
}
.step-3 .ups-result .js-result {
  overflow: auto;
  max-height: 500px;
  overscroll-behavior: contain;
}

.step-3 .ups-result li {
  border-top: 1px solid #ddd;
  padding: 10px 10px 10px 0;
}

.step-3 .ups-result li.selected {
  border-left: 10px solid #ddd;
}

.step-3 .ups-result li.active {
  border-left: 10px solid #82b338;
}

.step-3 .ups-result li:first-child {
  border-top: 0;
}

.step-3 .ups-result li>label {
  width: 100%;
}

.step-3 .ups-result li>label>div:first-child {
  min-width: 45px;
  padding-left: 10px;
}

.step-3 .ups-result li>label>div {
  display: table-cell;
  vertical-align: middle;
}

.step-3 .ups-result li>label>div+div {
  width: 100%;
}

.step-3 .ups-result .hidden {
  padding-left: 45px;
}

.step-3 .ups-result td {
  line-height: 1.3em;
}

.step-3 .ups-result td:first-child {
  padding-right: 5px;
}

.step-3 #map {
  height: 300px;
  width: 100%;
  margin-bottom: 20px;
}

.step-3 .sub-label {
  margin-left: 5px;
  vertical-align: 1px;
  width: auto;
}

.step-3 label.optional {
  color: #ccc;
}

.step-3 input.optional {
  border-color: #eee;
}

.step-3 .new-tof label:nth-of-type(7)+.input-wrap,
.step-3 .new-tof-alt label:nth-of-type(4)+.input-wrap {
  width: 48%;
}

.step-3 .new-tof label:nth-of-type(7)+.input-wrap+span,
.step-3 .new-tof-alt label:nth-of-type(4)+.input-wrap+span {
  font-size: 14px;
  width: 4%;
  display: inline-block;
  text-align: center;
}

.step-3 .new-tof label:nth-of-type(7)+.input-wrap+span+.input-wrap,
.step-3 .new-tof-alt label:nth-of-type(4)+.input-wrap+span+.input-wrap {
  width: 13%;
}

.step-4 .box,
.step-rebuy .box,
.step-finish-payment .box {
  background-color: #f2f2f2;
  float: left;
  font-size: 14px;
  line-height: 1.3em;
  margin-left: 1.5%;
  margin-bottom: 1.5%;
  padding: 20px;
  width: 49.25%;
}

.step-4 .box input,
.step-rebuy .box input,
.step-finish-payment .box input {
  margin: 6px 3px 0 0;
}

.step-4 .box .btn,
.step-rebuy .box .btn,
.step-finish-payment .box .btn {
  margin-top: 10px;
}

.step-4 .box:first-child,
.step-rebuy .box:first-child,
.step-finish-payment .box:first-child {
  margin-left: 0;
}

.step-4 .agb-text {
  text-align: center;
}

@media (max-width: 768px) {
  .step-4 .btn {
    width: 100%;
    float: none;
  }

  .step-4 .d-hide {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

.step-4 [data-field] {
  display: block;
}
.step-4 [data-field*="firstname"],
.step-4 [data-field*="lastname"] {
  display: inline-block;
}
.step-4 [data-field]:empty {
  display: none;
}

.over-view {
  width: 100%;
}

.over-view td,
.over-view th {
  background-color: #f2f2f2;
  color: #666666;
  font-size: 16px;
  line-height: 1.3em;
  padding: 8px 5px;
  text-align: left;
  vertical-align: top;
}

.over-view th {
  background-color: #dddddd;
}

.over-view td {
  border-top: 1px solid #dcdcdc;
  padding: 15px 5px;
}

.over-view td:first-child,
.over-view th:first-child {
  padding-left: 20px !important;
}

.over-view td:last-child,
.over-view th:last-child {
  padding-right: 20px !important;
  text-align: right;
}

.over-view tr.delivery td:first-child,
.over-view tr.discount td:first-child,
.over-view tr:last-child td:first-child {
  border-top: none;
}

.step-4 input.error-text,
.step-rebuy input.error-text {
  margin-bottom: 50px !important;
}

.step-4 span.error-text,
.step-rebuy span.error-text {
  bottom: 10px;
}

.step-4 .bottom-btn {
  text-align: right;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .step-4 .bottom-btn {
    display: none;
  }

  .step-4 .over-view+.row {
    text-align: center;
  }

  .step-4 .over-view+.row .btn {
    float: none;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .step-4 h1+.row>.col:last-child {
    text-align: right;
  }

  .step-4 .bottom-btn .btn,
  .step-4 h1+.row .btn {
    float: none;
  }
}

.step-5 .bank-transfer {
  width: 100%;
}

.step-5 .bank-transfer td {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

.step-5 .bank-transfer tr:first-child td {
  border-top: 0;
}

.step-6 .order-number {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  line-height: 1em;
  padding: 10px 15px;
  vertical-align: top;
}

.step-6 .share-order {
  display: inline-block;
  margin-left: 5px;
  vertical-align: bottom;
}

.step-6 .share-order .icon {
  cursor: pointer;
  font-size: 42px;
}

.step-6 .share-order .icon:before {
  margin: 0;
}

.step-6 .share-order .icon-facebook-squared {
  color: #477bd1;
}

.step-6 .share-order .icon-gplus-squared {
  color: #ff7200;
}

.step-6 .share-order .icon-twitter {
  color: #68bfec;
}

.step-6 .share-order .icon-mail {
  color: #aaa;
}

.step-6 .warning {
  background-color: #ffe0e0;
  color: #f00;
  border-radius: 3px;
  border: 1px solid #f00;
  padding: 5px;
  text-align: center;
}

.step-6 .new {
  text-align: center;
}

.step-6 .new,
.step-6 .new h2,
.step-6 .new p {
  color: #7b7b7b;
}

.step-6 .new {
  font-size: 14px;
  line-height: 1.3em;
}

.step-6 .new h1+p {
  margin-bottom: 5px;
}

.step-6 .new h1 {
  line-height: 1.3em;
}

.step-6 .new .canvas-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.step-6 .new canvas {
  vertical-align: top;
  max-width: 100%;
}

.step-6 .new canvas.bg {
  position: absolute;
  top: 0;
  left: 0;
}

.step-6 .new canvas+p {
  font-size: 16px;
}

.step-6 .new ul {
  margin: 15px auto;
  display: table;
}

.step-6 .new li {
  text-align: left;
  margin: 5px 0;
}

.step-6 .icon-ok {
  color: #82B338;
}

.step-6 .icon-heart {
  color: #F76262;
}

.step-6 .new .order-number {
  font-size: 21px;
  background-color: transparent;
  padding: 15px 10px;
  font-weight: normal;
  color: inherit;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  width: 100%;
  margin: 10px 0;
}

.step-6 .new .order-number+h2 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 20px;
}

.step-6 .new ul+p+p {
  margin-top: 20px;
}

.step-6 .new .btn {
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease;
  font-size: 16px;
  padding: 13px 22px;
  background-color: #00B4FF;
  color: #fff !important;
}

.step-6 .new .btn .icon {
  color: #fff;
}

.step-6 .new .red {
  color: #BC3E1E !important;
}

.step-6 .new .share-order .icon {
  color: #666666 !important;
}

.step-6 .new .share-order .icon,
.step-6 .new .share-order img {
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
}

.tiktok-order-value {
  color: transparent;
}

.ecard-form textarea {
  font-family: 'Open Sans', Arial, sans-serif;
  padding: 5px;
}

.cc-form {}

.cc-form .block {
  margin-top: 20px;
}

.cc-form iframe {
  vertical-align: -12px;
}

.cc-form label {
  margin-right: 5px;
}

.step-fix-order form {
  max-width: 450px;
  text-align: left;
  margin: 0 auto;
}

.step-fix-order form .wrap {
  margin-bottom: 10px;
}

.step-fix-order form label,
.step-fix-order form .select-wrap,
.step-fix-order form .input-wrap {
  float: left;
}

.step-fix-order form label {
  width: 35%;
  margin-top: 8px;
}

.step-fix-order form .select-wrap,
.step-fix-order form .input-wrap {
  width: 65%;
}

.step-fix-order form label.optional {
  color: #ccc;
}

.fce-upsell td {
  background-color: #e5f3d0;
  border-top: none;
}

.fce-upsell img {
  vertical-align: baseline;
}

.fce-upsell.ver-a.warning {
  /*background-color: #ffcccc;*/
}
.item-upsell.warning div:nth-child(4) strong ~ strong {
  color: inherit !important;
}


.item-upsell > div:nth-child(1) img {
  filter: drop-shadow(0 0 1px #666) !important;
  border-radius: 5px;
}
.item-upsell.warning > div:nth-child(1) img {
  filter: grayscale(100%) drop-shadow(0 0 1px #666) !important;
}

.iperfect td {
  border-top: none;
}

.iperfect img {
  vertical-align: baseline;
}

.iperfect .tip {
  font-family: 'Open Sans', Arial, sans-serif;
  display: inline-block;
  background-color: #00b4ff;
  color: #fff;
  /*
  position: absolute;
  top: 0;
  right: -2px;
  */
  padding: 5px 5px;
  line-height: 1em;
  text-transform: uppercase;
  border-radius: 5px;
  font-size: 10px;
}
@media (max-width: 768px) {
  .iperfect .tip {
    margin-left: 7px;
  }
}

/* pimped */
.pimped .fce-upsell td,
.pimped .iperfect td {
  font-size: 12px;
}

.file-preview {
  background-image: url('/tunnel/images/file-tablet.png');
  display: inline-block;
  position: relative;
  width: 130px;
  height: 93px;
}

.file-preview span {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 116px;
  height: 87px;
  text-align: center;
}

.file-preview img {
  vertical-align: top;
  border: 1px solid #aaa;
  border-radius: 3px;
  max-width: 100% !important;
  max-height: 100% !important;
}

.file-preview.p img {
  width: auto;
  height: 100%;
}

.file-preview.l img {
  width: 100%;
  height: auto;
}




/*------------------------------------*\
    # - LANGUAGE
\*------------------------------------*/

.lang-en .table-selector td:first-child,
.lang-en .table-selector th:first-child {
  padding-left: 3px;
  width: 30px;
}

.lang-en .table-selector td:first-child input {
  margin-right: 0;
}

.lang-en .table-selector th:first-child+th,
.lang-en .table-selector td:first-child+td {
  width: 250px;
}

.lang-en .table-selector td:last-child,
.lang-en .table-selector th:last-child {
  width: 30px;
}

.lang-en .table-selector td img {
  margin-left: 10px;
}




/*------------------------------------*\
    # - UPLOAD
\*------------------------------------*/

.fb-upload {
  color: #7b7b7b;
  padding: 20px;
  position: relative;
}

.upload-preselect-bar {
  background-color: #eee;
  display: none;
  margin: -20px -20px 10px;
  padding: 10px;
  text-align: center;
}

.upload-preselect-bar.error {
  background-color: #f00;
  color: #fff;
}

.upload-step-2,
.upload-step-3,
.upload-error {
  display: none;
}

.upload-step-1 p {
  margin-bottom: 20px;
}

.upload-step-1 .headline {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3em;
  margin-bottom: 30px;
}

.upload-btn,
.upload-drop,
.upload-combi {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-table;
  height: 90px;
  padding: 5px;
  position: relative;
  vertical-align: top;
  width: 150px;
}

.upload-btn .icon {
  font-size: 36px;
}

.upload-btn p,
.upload-drop p,
.upload-combi p {
  display: table-cell;
  position: relative;
  vertical-align: middle;
}

.btn input,
.upload-btn input,
.upload-combi input {
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.upload-btn:hover,
.upload-combi:hover {
  background-color: #82b338;
  color: #fff;
}

.upload-drop,
.upload-combi {
  border: 1px dashed #ccc;
}

.upload-combi {
  width: 100%;
  height: 150px;
}

.upload-combi span {
  display: inline-block;
  font-size: 36px;
  margin-top: 20px;
}

.upload-btn+span {
  line-height: 90px;
  margin: 0 10px;
}

.upload-step-2 .headline,
.upload-step-3 .headline {
  font-size: 14px;
  line-height: 1.3em;
  position: relative;
  text-align: center;
}

.upload-step-2 form,
.upload-step-3 form {
  background-color: #eee;
  font-size: 0;
  margin: 15px 0;
  padding: 25px;
  max-width: 650px;
}

.upload-step-2.finished>.headline,
.finished+.upload-step-3>.headline {
  top: 15px;
}

.upload-step-2.finished .upload-progress,
.finished+.upload-step-3 .upload-progress {
  opacity: 0;
}

.upload-step-2 form .headline,
.upload-step-3 form .headline {
  font-size: 24px;
  line-height: 1.3em;
  margin-bottom: 30px;
}

.upload-step-2 form label {
  display: inline-block;
  font-size: 16px;
  line-height: 1.3em;
  width: 30%;
}

.upload-step-2 form input {
  border-color: #fff;
  border-radius: 0;
  line-height: 2em;
  display: inline-block;
  margin-bottom: 8px;
  width: 70%;
}

.upload-step-2 form small,
.upload-step-3 form small {
  display: block;
  font-size: 10px;
  line-height: 1em;
  margin-top: 30px;
}

.upload-step-3 form small {
  display: block;
  font-size: 10px;
  line-height: 1em;
  margin-top: 0;
}

.upload-step-2 form .btn {
  margin-top: 20px;
}

.upload-step-2 .buttons {
  font-size: 0;
}

.upload-step-2 .buttons p {
  font-size: 14px;
  display: inline-block;
  margin: 0;
  width: 50%;
}

.upload-progress {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f9f9f9);
  background-repeat: repeat-x;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  height: 20px;
  overflow: hidden;
}

.upload-progress.error {
  box-shadow: 0 0 0 2px #f00;
}

.upload-progress div {
  background-color: #82b338;
  border-radius: 5px;
  display: inline-block;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: width 0.3s;
}

.upload-progress div p {
  background: #82b338 url("/global/images/assets/progress_animation.gif") repeat-x scroll 0 0;
  display: block;
  height: 100%;
  opacity: 0.25;
}

.upload-progress div span {
  color: #fff;
  font-weight: 600;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 1;
}

.upload-step-3 .code {
  background-color: #fff;
  border: 1px solid #ccc;
  display: block;
  font-size: 28px;
  letter-spacing: 0.15em;
  margin: 30px 0 15px 0;
  padding: 20px 0;
  text-align: center;
}

/** black week **/
.upload-step-2 form,
.upload-step-2 .buttons {
  /*display: none !important;*/
}

/** black week **/

.help-box {
  background-color: #dddddd;
  cursor: pointer;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  bottom: 50%;
  color: #fff;
  display: none;
  left: 0;
  position: fixed;
  height: 52px;
  width: 58px;
  line-height: 52px;
  vertical-align: middle;
}

.help-box:hover {
  background-color: #bbb;
}

.help-box p {
  display: inline-block;
  vertical-align: middle;
  line-height: 14px;
  width: 100%;
}

.help-box strong {
  font-size: 26px;
  line-height: 1.2em;
}

.row.v-middle {
  display: flex;
  align-items: center;
}

.row.v-bottom {
  display: flex;
  align-items: end;
}






/*------------------------------------*\
    # - CROP TOOL
\*------------------------------------*/

.step-1 .overview {
  position: relative;
  position: sticky;
  top: 80px;
}

.step-1 .overview label {
  font-size: 16px;
  font-weight: bold;
}

.step-1 .overview input {
  text-align: center;
  width: 35px;
}

.step-1 .overview .quantity {
  margin-right: 20px;
}

.step-1 .overview .btn {
  margin-top: 15px;
}

.crop-wrapper {
  display: inline-block;
  /*max-width: 500px;*/
  position: relative;
  outline: 1px solid #ccc;
  overflow: hidden;
}

.preview[data-pg="1"] .crop-wrapper {
  outline: 1px dashed #ccc;
}

@media (max-width: 768px) {
  .step-1 .overview .btn {
    width: 100%;
  }
}

/*
.crop-wrapper.b-white {
    outline: 1px dashed #ccc;
}
*/
.crop-wrapper .image img {
  vertical-align: top;
}

.crop-wrapper .border {
  border: 0;
  position: absolute;
}

.crop-wrapper .border.b-motif {
  background-color: rgba(255, 255, 255, 0.5);
}

.crop-wrapper .border.b-white {
  background-color: #fff;
}

.crop-wrapper .border.b-black {
  background-color: #000;
}

.crop-wrapper .border .opacity {
  display: none;
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  position: absolute;
  width: 100%;
}

.crop-wrapper .b-top {
  left: 0;
  top: 0;
  height: 10px;
  width: 100%;
}

.crop-wrapper .b-right {
  right: 0;
  top: 0;
  height: 100%;
  width: 10px;
}

.crop-wrapper .b-bottom {
  left: 0;
  bottom: 0;
  height: 10px;
  width: 100%;
}

.crop-wrapper .b-left {
  left: 0;
  top: 0;
  height: 100%;
  width: 10px;
}

.crop-wrapper .b-top-left,
.crop-wrapper .b-top-right,
.crop-wrapper .b-bottom-left,
.crop-wrapper .b-bottom-right {
  background-color: #fff !important;
  z-index: 2;
}

.crop-wrapper .b-top-left {
  left: 0;
  top: 0;
}

.crop-wrapper .b-top-right {
  right: 0;
  top: 0;
}

.crop-wrapper .b-bottom-left {
  left: 0;
  bottom: 0;
}

.crop-wrapper .b-bottom-right {
  right: 0;
  bottom: 0;
}

.crop-wrapper-new .border {
  border: 0;
  position: absolute;
}

.crop-wrapper-new .border.b-motif {
  background-color: rgba(255, 255, 255, 0.5);
}

.crop-wrapper-new .border.b-white {
  background-color: #fff;
}

.crop-wrapper-new .border.b-black {
  background-color: #000;
}

.crop-wrapper-new .b-top {
  left: 0;
  top: 0;
  height: 10px;
  width: 100%;
}

.crop-wrapper-new .b-right {
  right: 0;
  top: 0;
  height: 100%;
  width: 10px;
}

.crop-wrapper-new .b-bottom {
  left: 0;
  bottom: 0;
  height: 10px;
  width: 100%;
}

.crop-wrapper-new .b-left {
  left: 0;
  top: 0;
  height: 100%;
  width: 10px;
}

.crop-wrapper-new .b-top-left,
.crop-wrapper-new .b-top-right,
.crop-wrapper-new .b-bottom-left,
.crop-wrapper-new .b-bottom-right {
  background-color: #fff !important;
  z-index: 2;
}

.crop-wrapper-new .b-top-left {
  left: 0;
  top: 0;
}

.crop-wrapper-new .b-top-right {
  right: 0;
  top: 0;
}

.crop-wrapper-new .b-bottom-left {
  left: 0;
  bottom: 0;
}

.crop-wrapper-new .b-bottom-right {
  right: 0;
  bottom: 0;
}

.arrow-wrapper {
  position: relative;
  display: inline-block;
}

.arrow-wrapper .arrow {
  position: absolute;
  z-index: 10;
}

.arrow-wrapper .arrow.top {
  left: 0;
  top: -37px;
  width: 100%;
}

.arrow-wrapper .arrow.top .line {
  background-color: #ddd;
  height: 1px;
  left: 0;
  position: absolute;
  top: 20px;
  width: 100%;
}

.arrow-wrapper .arrow.top .peak {
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  position: absolute;
  top: 16px;
}

.arrow-wrapper .arrow.top .peak-1 {
  border-right: 8px solid #ddd;
  left: 0;
}

.arrow-wrapper .arrow.top .peak-2 {
  border-left: 8px solid #ddd;
  right: 0;
}

.arrow-wrapper .arrow.right {
  height: 100%;
  top: 0;
  right: -30px;
}

.arrow-wrapper .arrow.right .line {
  background-color: #ddd;
  width: 1px;
  left: -10px;
  position: absolute;
  top: 0;
  height: 100%;
}

.arrow-wrapper .arrow.right .peak {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  left: -14px;
}

.arrow-wrapper .arrow.right .peak-1 {
  border-bottom: 8px solid #ddd;
  top: 0;
}

.arrow-wrapper .arrow.right .peak-2 {
  border-top: 8px solid #ddd;
  bottom: 0;
}

.arrow-wrapper .arrow.right .text {
  display: inline-block;
  left: 50%;
  margin-left: 10px;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  width: 100px;
}




/*------------------------------------*\
    # - NEW CROP TOOL
\*------------------------------------*/

.crop-wrap {
  margin-bottom: 10px;
  margin-top: 10px;
}

.crop-wrap.blackwhite img {
  filter: grayscale(100%);
}

.crop-wrap img {
  max-width: 100%;
}

.crop-tools {
  text-align: center;
}

.crop-tools label {
  font-size: 16px;
  margin-right: 10px;
}

.crop-tools ul {
  display: inline-block;
  margin-right: 50px;
}

.crop-tools li {
  display: inline-block;
  cursor: pointer;
  color: #7b7b7b;
  margin: 0 5px;
  font-size: 21px;
}

.crop-tools li:hover {
  color: #000;
}

.crop-warning {
  color: #f00;
  font-size: 12px;
  margin-bottom: 10px;
  opacity: 0;
}

.error-message-alt {
  border: 4px solid #00b4ff;
  padding: 20px;
  margin-bottom: 20px;
}

.error-message-alt,
.error-message-alt p {
  font-size: 16px;
  line-height: 1.3em;
}




/*------------------------------------*\
    # - JAVASCRIPT
\*------------------------------------*/

.js-area-loading {
  background-color: rgba(255, 255, 255, 0.9);
  left: 0;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999999;
}

.js-area-loading.white {
  background-color: #fff;
}

.js-area-loading.fixed {
  position: fixed;
}

.js-area-loading .table {
  display: table;
  width: 100%;
  height: 100%;
}

.js-area-loading .table-cell {
  display: table-cell;
  vertical-align: middle;
}

.js-area-loading .icon {
  font-size: 36px;
  line-height: 1.3em;
}

.js-coupon-applied {
  display: none;
}

.js-dropzone.in,
.js-dropzone.in.hover {
  background-color: #82b338;
  color: #fff;
}

.js-lead-refuse.error {
  box-shadow: 0 0 0 2px #f00;
}

.increaser {
  display: inline-flex;
}

.increaser .minus,
.increaser .plus {
  cursor: pointer;
  background-color: #ccc;
  color: #fff;
  text-align: center;
  line-height: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 20px;
  vertical-align: top;
}

.increaser .minus {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

.increaser .plus {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.increaser input {
  margin: 0 !important;
  line-height: 30px !important;
  height: 30px !important;
  padding: 0 5px !important;
  border-radius: 0 !important;
  width: 100%;
  max-width: 40px;
  text-align: center;
}



/*------------------------------------*\
    # - TABIFY
\*------------------------------------*/

.tabify-wrapper {}

.tabify-wrapper .navi {
  margin: 0;
  padding: 0;
  display: flex !important;
}

.tabify-wrapper.ghost .navi {
  display: flex !important;
  justify-content: space-between;
  text-align: center;
}

.tabify-wrapper .navi li {
  background-color: #f4f4f4;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  cursor: pointer;
  color: #bababa;
  font-size: 1em;
  font-weight: bold;
  line-height: 1em;
  padding: 15px;
  position: relative;
  text-align: center;
  top: 1px;
  width: 100%;
  margin-top: 0;
}

.tabify-wrapper.ghost .navi li {
  background-color: transparent;
  border: 0;
  color: #7b7b7b;
  float: none;
  font-weight: normal;
  width: auto;
  padding: 0 15px;
  text-decoration: underline;
}

.tabify-wrapper.v2 .navi li {
  background-color: #fff;
}

.tabify-wrapper .navi li.active {
  background-color: #fff;
  border: 1px solid #dddddd;
  border-bottom: 1px solid #fff;
  color: #7b7b7b;
  padding-top: 14px;
}

.tabify-wrapper.ghost .navi li.active {
  background-color: transparent;
  border: 0;
  color: inherit;
  padding: 0 15px;
  text-decoration: none;
}

.tabify-wrapper.v2 .navi li.active {
  background-color: #eee;
  border-bottom: 2px solid #eee;
}

.tabify-wrapper .content {
  border: 1px solid #dddddd;
  display: none;
  padding: 30px;
}

.tabify-wrapper.ghost .content {
  border: 0;
  display: none;
  padding: 30px 0 0 0;
}

.tabify-wrapper.v2 .content {
  background-color: #eee;
  border: 1px solid #dddddd;
  padding: 20px;
}

.tabify-wrapper .content>*:first-child {
  margin-top: 0;
}

.tabify-wrapper .content.active {
  display: block;
}

.tabify-wrapper .navi .icon {
  margin-right: 7px;
}

.tabify-wrapper.ghost p,
.tabify-wrapper.ghost * {
  font-size: 14px;
  line-height: 1.5em;
}

.tabify-wrapper.ghost a {
  color: #7b7b7b;
  text-decoration: underline;
}

.ecard-form h2 {
  font-weight: normal;
}

.ecard-form .col img {
  border: 1px solid #ddd;
}

.ecard-form .section {
  margin-bottom: 7px;
  font-weight: 600;
}

.ecard-form .section+.row {
  margin-top: 0;
}

.ecard-form input,
.ecard-form textarea {
  width: 100%;
}

.ecard-form textarea {
  min-height: 100px;
}

.ecard-form .col * {
  color: #bbb;
}

.ecard-form .js-result {
  position: relative;
  top: 0;
  right: 10px;
  color: #82b338;
  font-weight: bold;
  font-size: 20px;
}

.tip-box {
  border: 1px solid #a9c980;
  border-radius: 5px;
  padding: 3% 4%;
  margin: 50px 0;
}

.tip-box p {
  font-size: 21px;
  line-height: 1.3em;
  margin: 0;
}

.tip-box p>span:nth-child(1) {
  float: left;
}

.tip-box p>span:nth-child(2) {
  float: right;
  font-size: 40px;
  line-height: 1.3em;
  padding-left: 15px;
}

.rating-stars-widget {
  display: block;
  font-size: small;
  margin-top: 10px;
}

.rating-stars-widget>span:first-child {
  color: #ffd200;
  font-size: initial;
  vertical-align: -1px;
}

.rating-stars-widget>span:first-child span::before {
  margin-left: 1px;
  margin-right: 1px;
}

.rating-stars-widget+.btn {
  margin-top: 5px;
}

@media (min-width: 768px) {
  .rating-stars-widget.d-hide {
    display: none;
  }
}

.disturber-bar {
  background-color: #f2f2f2;
  color: #7b7b7b;
  font-weight: bold;
  padding: 10px;
  width: 100vw;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.disturber-bar.step-3 {
  background-color: #595959;
}





/*------------------------------------*\
    # - RESPONSIVE
\*------------------------------------*/

@media (max-width: 970px) {
  .content {
    padding: 0 10px;
  }

  .wrap-full-grid {
    width: 100%;
  }

  header a img {
    max-width: 100%;
    vertical-align: top;
  }

  .process-street-new .line {
    display: none;
  }

  .step-1 .preview {
    margin-top: 80px;
  }

  .step-1 .overview {
    text-align: center;
  }

  .col-xs-12+.col-xs-12 {
    margin-top: 20px;
  }

  .trustbar img {
    max-width: 100%;
  }

  .process-street-new li {
    background-color: #fafafa;
    padding: 5px 8px;
    margin: 2px;
  }

  .process-street-new li.passed {
    background-color: #f5f5f5;
  }

  .process-street-new li.active {
    background-color: #82b338;
    color: #fff;
  }

  .process-street-new .dot {
    display: none;
  }
}

@media (max-width: 750px) {

  .fb-upload .upload-drop,
  .fb-upload .upload-btn+span {
    display: none;
  }

  .upload-step-2 .headline,
  .upload-step-3 .headline {
    font-size: 20px;
  }

  .upload-step-2 form label {
    display: block;
  }

  .upload-step-2 form input {
    width: 100%;
  }

  .upload-step-2 .col-xs-12,
  .upload-step-3 .col-xs-12 {
    margin-top: 0;
  }

  .upload-step-2 .col:first-child,
  .upload-step-3 .col-xs-12 {
    text-align: center;
  }

  .step-1 .overview {
    margin-top: 50px;
  }

  .step-1 .overview>span:first-child {
    top: 10px !important;
  }

  .js-edit {
    margin-top: 20px;
    float: left;
  }

  .step-3 .content .col+.col {
    margin-top: 30px;
  }

  .step-3 form+.btn {
    margin-top: 20px;
  }


  .step-3 #toggle_alt_delivery+label {
    width: auto;
  }

  .step-3 form+div .btn {
    width: 100%;
  }

  .tabify-wrapper .navi {
    display: block !important;
  }

  .tabify-wrapper .navi li {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin-top: 0;
    font-size: 12px;
    width: auto;
  }

  .tabify-wrapper .navi li:first-child {
    border-top: 1px solid #ddd;
  }

  .tabify-wrapper.ghost .navi li:first-child {
    border-top: 0;
  }

  .tabify-wrapper .navi li.active {
    background-color: #7b7b7b;
    border: 0;
    color: #fff;
  }

  .customer-data {
    display: flex;
    flex-flow: column
  }

  .customer-data>.col {
    order: 1;
  }

  .customer-data>.col:nth-child(2) {
    order: 2;
  }

  .customer-data>.col:nth-child(3) {
    margin-top: 0 !important;
  }

  .customer-data .col:nth-child(1) form {
    margin-bottom: 20px !important;
  }

  .customer-data .alt-address .col:last-child {
    display: none;
  }
}

@media (max-width: 600px) {
  .crop-wrap img {
    max-width: 300px;
    max-height: 300px;
  }
}

@media (max-width: 570px) {
  header {
    padding: 10px;
  }

  header a img {
    transform: scale(0.8);
    transform-origin: 0;
  }

  .header-contact {
    display: none;
  }

  .help-box {
    bottom: 20px;
  }

  .step-1 .table-selector td img {
    margin-left: 0;
  }

  .table-selector.properties th:first-child+th,
  .table-selector.properties td:first-child+td {
    width: auto;
  }

  .js-help-box {
    display: none !important;
  }
}

/***************/
/* update 2025 */
/***************/

.step-1 .preview canvas {
  max-width: 100%;
}
.step-1.ref-fme [data-mode] th,
.step-1.ref-fme [data-mode] td {
  background-color: transparent;
  border-bottom: 0;
}
.step-1.ref-fme [data-mode] td input {
  opacity: 0;
}
@media (min-width: 768px) {
  .content.wrap-full-grid {
    min-height: calc(100vh - 75px - 265px);
  }
  .box-wrapper {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    gap: 10%;
  }
  .box-wrapper > div {
    width: 100%;
  }
  .box-wrapper > div:nth-child(1) {
    max-width: 60%;
    position: sticky;
    top: 0;
  }
  .box-wrapper > div:nth-child(2) {
    max-width: 40%;
  }
  /*
  .step-1 .box-wrapper {
    flex-flow: initial;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 6vw;
    grid-row-gap: 0px;
  }
  .step-1 .box-wrapper > div {
    max-width: none;
  }
  .step-1 .box-wrapper .preview-wrap { grid-area: 1 / 2 / 2 / 3; } 
  .step-1 .box-wrapper .settings { grid-area: 2 / 2 / 3 / 3; } 
  .step-1 .box-wrapper .product-config { grid-area: 1 / 1 / 3 / 2; } 

  .step-1 .preview-wrap {

  }
  */
  .step-1 .box-wrapper > .settings,
  .step-1 .box-wrapper > .button-wrap  {
    display: none !important;
  }
  .step-1 .box-wrapper {
    gap: 6vw;
  }
  .step-1 .box-wrapper > div {
    max-width: 50%;
  }

  .step-1 .preview-wrap {
    order: 1;
  }
    .step-1 .preview:has(.arrow-wrapper) {
      display: flex;
      flex-flow: wrap;
      align-items: center;
      text-align: center;
      justify-content: center;
      min-height: 520px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;
      padding-top: 50px;
      padding-bottom: 20px;
      margin-bottom: 20px;
    }
    .step-1 .preview-wrap:has(.arrow-wrapper) .settings,
    .step-1 .button-wrap {
      max-width: 350px;
      margin-left: auto;
      margin-right: auto;
    }
    .step-1 .preview-wrap:has(.arrow-wrapper) .text {
      margin-top: -10px;
      margin-bottom: 40px;
    }
    .step-1 .quantity-wrap {
      display: flex;
      flex-flow: row;
      justify-content: space-evenly;
      align-items: center;
      margin-bottom: 15px;
    }
    .step-1 .preview-wrap .button-wrap {
      margin-top: 20px;
    }
}

@media (max-width: 768px) {
  /* disable extras temp until sizes are only 3 */
    .step-1 .product-config .extras {
      display: none !important;
    }
  /* end */
  .disturber-bar {
    background-color: #f2f2f2 !important;
    color: #7b7b7b !important;
    border-top: 1px solid #ddd;
    line-height: 1.3em;
  }

  .step-1 .product-config .extras:not(.active) h1,
  .step-1:not(.ref-fce) .quantity-wrap,
  .step-1 .preview-wrap .button-wrap,
  .step-1 .box-wrapper > .settings {
    display: none;
  }
  .step-1 .product-config .extras.active table.hidden {
    display: table;
  }
  .step-1 .product-config .extras .js-toggle {
    display: block;
    text-align: center;
    margin: 20px 0;
    text-decoration: underline;
    cursor: pointer;
  }
  .step-1 .preview-wrap {
    margin-bottom: 20px;
  }
  .step-1:not(.ref-fce) .preview-wrap {
    margin-top: 60px;
  }
  .step-1 .preview {
    margin-top: 20px;
    text-align: center;
  }
  .step-1 .preview canvas {
    width: 100%;
  }
  .step-1:not(.ref-fce) .settings {
    margin-top: 10px;
  }
  .step-1.ref-fce .box-wrapper .settings {
    margin-top: 30px;
  }
    .step-1:not(.ref-fce) .settings .text {
      margin-bottom: 20px;
    }
    .step-1:not(.ref-fce) .settings * {
      float: none !important;
    }
  .step-1 select {
    margin-bottom: 10px;
  }
  .step-1 .box-wrapper > .button-wrap {
    margin-top: 30px;
  }

  .step-2 .continue-box {
    margin-top: 20px;
  }
}

.cart-view .item,
.cart-view .delivery {
  border: 1px solid #ddd;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
.cart-view .item ~ .item,
.cart-view .item ~ .delivery {
  border-top: 0;
}

.cart-view .item .js-zoom {
  display: inline-block;
}
.cart-view .item > div,
.cart-view .delivery > div {
  flex: 0 0 auto;
  line-height: 1.2em;
  position: relative;
}
.cart-view .item > div:nth-child(1),
.cart-view .delivery:has(select) > div:nth-child(1) {
  width: 100px;
}
.cart-view .item > div:nth-child(4) {
  width: 100%;
  flex-basis: 100%;
}
.cart-view .item > div:nth-child(4) strong ~ strong {
  color: #82b338;
}
.cart-view .item:not(.no-shadow):not(.item-upsell) > div:nth-child(1) img {
  box-shadow: 0px 1px 5px 0 rgba(0,0,0,0.5);
}
.cart-view .item > div:nth-child(2),
.cart-view .delivery > div:nth-child(2) {
  flex: 1;
}
.cart-view .item > div:nth-child(3),
.cart-view .delivery > div:nth-child(3) {
  text-align: right;
}
  .cart-view .item > div:nth-child(1) img {
    max-width: 100%;
  }
  .cart-view .item-upsell > div:nth-child(1) img {
    max-width: 55px;
  }
  .cart-view .item-upsell > div:nth-child(1) input {
    margin-left: 0;
  }
  @media (min-width: 768px) {
    .cart-view .item-upsell.iperfect > div:nth-child(2) {
      display: flex;
      flex-flow: wrap;
      align-items: start;
      gap: 10px;
    }
  }
  .cart-view .item .increaser {
    margin-top: 5px;
    font-weight: normal;
  }
    .cart-view .item .increaser input {
      max-width: 30px;
    }

.cart-view .delivery {
  flex-flow: wrap;
}
.cart-view .delivery > div:nth-child(4) {
  flex: 0 0 100%;
}

.cart-view .discount,
.cart-view .total {
  background-color: #e5f3d0;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px 10px;
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  margin-top: 10px;
}
.cart-view .discount > div:nth-child(2),
.cart-view .total > div:nth-child(2) {
  text-align: right;
  flex: 1;
}
.cart-view .discount {
  background-color: transparent;
}

.step-2 .submit {
  width: 100%;
}

.sticky {
  position: sticky;
  top: 0;
}

.divider:has(span) {
  border-top: 1px solid #ddd;
  margin: 20px 0;
  text-align: left;
  line-height: 0;
  height: 1px;
}
.divider span {
  background-color: #fff;
  padding: 5px 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  top: -0.5em;
}

form[name="express_form"] button {
  color: #052a85;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-style: Italic;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.step-2 .coupon:not(.active) {
  display: none;
}

.step-3 form + div {
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding-top: 20px;
}
.step-3 form {
  font-size: 0;
}
.step-3 form[name="address"] {
  padding-top: 0;
}
.step-3 .uap-wrapper {
  margin-top: 20px;
}
.step-3 .uap-wrapper .divider:has(span) {
  margin: 30px 0;
}
.step-3 .alt-address + p {
  /*display: none;*/
}
.ups-result > div:last-child {
  display: none;
}

.step-4 .process-street {
  display: none;
}

.over-view {
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-bottom: 30px;
}
  .over-view > div:not(.items) {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px 20px;
    position: relative;
  }
  .over-view .items {
    display: flex;
    flex-flow: column;
    gap: 10px;
  }
    .over-view .items > div {
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f2f2f2;
      display: flex;
      flex-flow: row;
      align-items: center;
      gap: 25px;
      padding: 15px 20px;
      font-size: 15px;
      line-height: 1.5em;
    }
    .over-view .items > div:not(.no-shadow) img {
      max-width: 80px;
      max-height: 80px;
      box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3);
    }
  .over-view > .total {
    display: flex;
    flex-flow: row;
  }
  .over-view > .total > div:nth-child(1) {
    flex: 1;
  }
  .over-view .edit {
    position: absolute;
    right: 15px;
    top: calc(50% - 17px);
  }
  .over-view .edit::before {
    content: "";
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M576.98 144.085q50.817-55.082 71.724-67.54 81.45-48.428 164.267-2.433 21.25 11.776 73.643 65.28l.043.043.043.042q52.35 53.462 63.828 75.094 44.544 83.713-2.39 166.102-12.117 21.248-66.005 73.173L480.896 840.277q-100.48 96.768-146.347 114.688-45.953 17.963-184.107 14.336l-11.947-.297q-54.06-1.408-71.04-20.694-16.725-18.987-12.5-73.302l1.15-14.805q9.387-120.278 26.497-159.66 17.11-39.38 98.176-127.23l.04-.044zM624 187.477L227.84 616.704q-73.728 79.872-86.528 109.355-12.843 29.524-21.376 139.135l-1.152 14.762q-1.323 16.81-1.408 24.064 7.04.6 22.784 1.025l11.947.3q125.226 3.284 159.146-9.985 34.006-13.27 125.227-101.163l401.237-386.432.043-.042q47.232-45.483 54.784-58.752 29.483-51.754 1.493-104.362-7.168-13.483-53.077-60.373l-.043-.043h-.042q-45.867-46.89-58.966-54.144-50.646-28.117-100.48 1.536-12.886 7.637-57.43 55.893zm-46.72-39.424L875.947 446.72l-45.227 45.227L532.053 193.28l45.227-45.227zm20.053 758.614h341.334q13.27 0 22.613 9.386 9.387 9.344 9.387 22.614 0 13.27-9.387 22.613-9.344 9.387-22.613 9.387H597.333q-13.27 0-22.613-9.387-9.387-9.344-9.387-22.613 0-13.27 9.387-22.614 9.344-9.386 22.613-9.386z"/></svg>');
    width: 25px;
    height: 25px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
  }
  .over-view > .last p {
    margin-bottom: 0;
  }

  .over-view .js-edit-address > form br {
    display: none;
  }
  .over-view .js-edit-address > form {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .over-view .js-edit-address > form,
  .over-view .js-edit-address .btn {
    width: calc(100% - 30px);
  }
  .over-view .js-edit-address .btn {
    margin-top: 10px;
  }

  .over-view .js-edit-address > form .input-wrap {
    flex: 1 1 calc(50% - 5px);
    box-sizing: border-box;
  }

  .over-view .js-edit-address > form .input-wrap:nth-child(3),
  .over-view .js-edit-address > form .input-wrap:nth-child(4),
  .over-view .js-edit-address > form .input-wrap:nth-child(7) {
    flex: 1 1 100%;
  }

.bank-transfer .js-copy {
  content: "";
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 15C9 12.1716 9 10.7574 9.87868 9.87868C10.7574 9 12.1716 9 15 9L16 9C18.8284 9 20.2426 9 21.1213 9.87868C22 10.7574 22 12.1716 22 15V16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15C12.1716 22 10.7574 22 9.87868 21.1213C9 20.2426 9 18.8284 9 16L9 15Z" stroke="%23141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.9999 9C16.9975 6.04291 16.9528 4.51121 16.092 3.46243C15.9258 3.25989 15.7401 3.07418 15.5376 2.90796C14.4312 2 12.7875 2 9.5 2C6.21252 2 4.56878 2 3.46243 2.90796C3.25989 3.07417 3.07418 3.25989 2.90796 3.46243C2 4.56878 2 6.21252 2 9.5C2 12.7875 2 14.4312 2.90796 15.5376C3.07417 15.7401 3.25989 15.9258 3.46243 16.092C4.51121 16.9528 6.04291 16.9975 9 16.9999" stroke="%23141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  width: 22px;
  height: 22px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 11px;
}
.step-5 .bank-transfer td {
  padding: 0;
  position: relative;
  font-size: 13px;
  line-height: 42px;
}
.step-5 .bank-transfer,
.step-5 .bank-transfer + div {
  max-width: 560px;
  margin: 0 auto;
}

.alert-box {
  position: fixed;
  bottom: 70px;
  left: 50%;
  background: #fff;
  padding: 15px 20px;
  border-radius: 5px;
  border: 1px solid #82b338;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-family: sans-serif;
  font-weight: bold;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
}

[class*="icon-alt"] {
  background-repeat: no-repeat;
  background-size: contain;
  width: 22px;
  height: 22px;
  display: inline-block;
}
.btn [class*="icon-alt"] {
  vertical-align: -5px;
  margin: 0 5px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7487%) hue-rotate(336deg) brightness(102%) contrast(105%);
}

.icon-alt-arrow-right {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M810.667 544h-640q-13.27 0-22.614-9.387-9.386-9.386-9.386-22.613 0-13.27 9.386-22.656Q157.397 480 170.667 480h640q13.27 0 22.613 9.344 9.387 9.387 9.387 22.656 0 13.227-9.387 22.613Q823.936 544 810.667 544zM662.613 276.053L845.78 459.18Q876.5 489.9 876.5 512t-30.72 52.78L662.614 747.946q-9.344 9.386-22.613 9.386-13.27 0-22.613-9.386Q608 738.603 608 725.333q0-13.27 9.387-22.613l183.168-183.168q4.394-4.437 7.424-7.552-3.03-3.115-7.425-7.552L617.387 321.28Q608 311.936 608 298.667q0-13.27 9.387-22.614 9.344-9.386 22.613-9.386 13.27 0 22.613 9.386z"/></svg>');
}

.step-2 .btn-orange,
.step-3 .btn-orange,
.step-4 .btn-orange {
  width: 100%;
}
.fancybox-container .btn-orange {
  width: auto;
}

/* select */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: var(--select-height);
  font: inherit;
  line-height: 1.3em;
  box-sizing: border-box;
  width: auto;
  cursor: pointer;
  color-scheme: light dark;
  background-color: #fff;
  color: #7b7b7b;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: var(--select-radius);
  background-clip: padding-box;
  padding: 0 calc(var(--select-pad-x) + var(--select-arrow-space)) 0 var(--select-pad-x);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23444444" d="M480 224C492.9 224 504.6 231.8 509.6 243.8C514.6 255.8 511.8 269.5 502.7 278.7L342.7 438.7C330.2 451.2 309.9 451.2 297.4 438.7L137.4 278.7C128.2 269.5 125.5 255.8 130.5 243.8C135.5 231.8 147.1 224 160 224L480 224z"/></svg>');
  background-repeat: no-repeat;
  background-size: 1rem auto;
  background-position: right 0.85rem center;
  -webkit-tap-highlight-color: transparent;
}
.select:focus-visible {
  outline: 2px solid Highlight;
  outline-offset: 2px;
  border-color: Highlight;
}
.select:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.select:required:invalid {
  color: GrayText;
}
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
  padding-right: var(--select-pad-x);
}

.step-1 select {
  --select-pad-x: 1rem;
  --select-arrow-space: 1.25rem;
  margin-bottom: 20px;
  border: 0;
}