{% assign host = '//shopify.concierge.com' %} {% case settings.checkout_body_font %} {% when "Helvetica Neue" %} {% assign body_font = "Helvetica Neue, sans-serif" %} {% when "Open Sans" %} {% assign body_font = "Open Sans, sans-serif" %} {% when "Lato" %} {% assign body_font = "Lato, sans-serif" %} {% when "Oswald" %} {% assign body_font = "Oswald, sans-serif" %} {% when "Roboto" %} {% assign body_font = "Roboto, sans-serif" %} {% when "Raleway" %} {% assign body_font = "Raleway, sans-serif" %} {% when "Fjalla One" %} {% assign body_font = "Fjalla One, sans-serif" %} {% when "Abel" %} {% assign body_font = "Abel, sans-serif" %} {% when "Lobster Two" %} {% assign body_font = "Lobster Two, sans-serif" %} {% when "Playball" %} {% assign body_font = "Playball, sans-serif" %} {% when "Source Sans Pro" %} {% assign body_font = "Source Sans Pro, sans-serif" %} {% when "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'" %} {% assign body_font = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif' %} {% when "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman'" %} {% assign body_font = "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', sans-serif" %} {% when "PT Serif" %} {% assign body_font = "PT Serif, sans-serif" %} {% when "Lora" %} {% assign body_font = "Lora, sans-serif" %} {% when "Arvo" %} {% assign body_font = "Arvo, sans-serif" %} {% when "Slabo 13px" %} {% assign body_font = "Slabo 13px, sans-serif" %} {% when "Playfair Display" %} {% assign body_font = "Playfair Display, sans-serif" %} {% when "Vidaloka" %} {% assign body_font = "Vidaloka, sans-serif" %} {% when "Glegoo" %} {% assign body_font = "Glegoo, sans-serif" %} {% endcase %} {% case settings.checkout_heading_font %} {% when "Helvetica Neue" %} {% assign head_font = "Helvetica Neue, sans-serif" %} {% when "Open Sans" %} {% assign head_font = "Open Sans, sans-serif" %} {% when "Lato" %} {% assign head_font = "Lato, sans-serif" %} {% when "Oswald" %} {% assign head_font = "Oswald, sans-serif" %} {% when "Roboto" %} {% assign head_font = "Roboto, sans-serif" %} {% when "Raleway" %} {% assign head_font = "Raleway, sans-serif" %} {% when "Fjalla One" %} {% assign head_font = "Fjalla One, sans-serif" %} {% when "Abel" %} {% assign head_font = "Abel, sans-serif" %} {% when "Lobster Two" %} {% assign head_font = "Lobster Two, sans-serif" %} {% when "Playball" %} {% assign head_font = "Playball, sans-serif" %} {% when "Source Sans Pro" %} {% assign head_font = "Source Sans Pro, sans-serif" %} {% when "apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'" %} {% assign head_font = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif' %} {% when "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman'" %} {% assign head_font = "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', sans-serif" %} {% when "PT Serif" %} {% assign head_font = "PT Serif, sans-serif" %} {% when "Lora" %} {% assign head_font = "Lora, sans-serif" %} {% when "Arvo" %} {% assign head_font = "Arvo, sans-serif" %} {% when "Slabo 13px" %} {% assign head_font = "Slabo 13px, sans-serif" %} {% when "Playfair Display" %} {% assign head_font = "Playfair Display, sans-serif" %} {% when "Vidaloka" %} {% assign head_font = "Vidaloka, sans-serif" %} {% when "Glegoo" %} {% assign head_font = "Glegoo, sans-serif" %} {% endcase %} {% case settings.checkout_input_background_color_mode %} {% when 'white' %} {% assign input_bg_color = "white" %} {% when 'transparent' %} {% assign input_bg_color = "transparent" %} {% endcase %} @-webkit-keyframes fade-in { 0% { opacity:0; visibility:hidden } 100% { opacity:1; visibility:visible } } @keyframes fade-in { 0% { opacity:0; visibility:hidden } 100% { opacity:1; visibility:visible } } @-webkit-keyframes fade-out { 0% { opacity:1; visibility:visible } 100% { opacity:0; visibility:hidden } } @keyframes fade-out { 0% { opacity:1; visibility:visible } 100% { opacity:0; visibility:hidden } } @-webkit-keyframes rotate { 0% { -webkit-transform:rotate(0); transform:rotate(0) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } } @keyframes rotate { 0% { -webkit-transform:rotate(0); transform:rotate(0) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } } @-webkit-keyframes draw-stroke { 100% { stroke-dashoffset:0 } } @keyframes draw-stroke { 100% { stroke-dashoffset:0 } } @-webkit-keyframes bump { 0%, 100% { -webkit-transform:none; transform:none } 50% { -webkit-transform:scale3d(1.1, 1.1, 1); transform:scale3d(1.1, 1.1, 1) } } @keyframes bump { 0%, 100% { -webkit-transform:none; transform:none } 50% { -webkit-transform:scale3d(1.1, 1.1, 1); transform:scale3d(1.1, 1.1, 1) } } @-webkit-keyframes checkmark-fill { 100% { -webkit-box-shadow:inset 0px 0px 0px 30px #e06571; box-shadow:inset 0px 0px 0px 30px #e06571 } } @keyframes checkmark-fill { 100% { -webkit-box-shadow:inset 0px 0px 0px 30px #e06571; box-shadow:inset 0px 0px 0px 30px #e06571 } } @-webkit-keyframes scale-up-bounce { 0% { opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5) } 40% { -webkit-transform:scale(1.1); transform:scale(1.1) } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1) } } @keyframes scale-up-bounce { 0% { opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5) } 40% { -webkit-transform:scale(1.1); transform:scale(1.1) } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1) } } @-webkit-keyframes scale-up-bounce-spring { 0% { opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5) } 20% { -webkit-transform:scale(1.15); transform:scale(1.15) } 50% { opacity:1; -webkit-transform:scale(0.95); transform:scale(0.95) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @keyframes scale-up-bounce-spring { 0% { opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5) } 20% { -webkit-transform:scale(1.15); transform:scale(1.15) } 50% { opacity:1; -webkit-transform:scale(0.95); transform:scale(0.95) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @-webkit-keyframes scale-down-bounce { 0% { opacity:1; -webkit-transform:scale(1); transform:scale(1) } 20% { -webkit-transform:scale(1.05); transform:scale(1.05) } 100% { opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5) } } @keyframes scale-down-bounce { 0% { opacity:1; -webkit-transform:scale(1); transform:scale(1) } 20% { -webkit-transform:scale(1.05); transform:scale(1.05) } 100% { opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5) } } @-webkit-keyframes scale-up { 0% { -webkit-transform:scale(0); transform:scale(0) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @keyframes scale-up { 0% { -webkit-transform:scale(0); transform:scale(0) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @-webkit-keyframes pulse { 0% { -webkit-box-shadow:0 0 0 0 rgba(224,101,113,0.5); box-shadow:0 0 0 0 rgba(224,101,113,0.5) } 50% { -webkit-box-shadow:0 0 0 15px rgba(224,101,113,0); box-shadow:0 0 0 15px rgba(224,101,113,0) } } @keyframes pulse { 0% { -webkit-box-shadow:0 0 0 0 rgba(224,101,113,0.5); box-shadow:0 0 0 0 rgba(224,101,113,0.5) } 50% { -webkit-box-shadow:0 0 0 15px rgba(224,101,113,0); box-shadow:0 0 0 15px rgba(224,101,113,0) } } @-webkit-keyframes wobble { 0%, 100% { -webkit-transform:rotate(10deg); transform:rotate(10deg) } 50% { -webkit-transform:rotate(-10deg); transform:rotate(-10deg) } } @keyframes wobble { 0%, 100% { -webkit-transform:rotate(10deg); transform:rotate(10deg) } 50% { -webkit-transform:rotate(-10deg); transform:rotate(-10deg) } } @-webkit-keyframes modal-open { 0% { opacity:0; -webkit-transform:translateY(20%); transform:translateY(20%) } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); visibility:visible } } @keyframes modal-open { 0% { opacity:0; -webkit-transform:translateY(20%); transform:translateY(20%) } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); visibility:visible } } @-webkit-keyframes modal-close { 0% { opacity:1; visibility:visible } 100% { opacity:0; -webkit-transform:translateY(20%); transform:translateY(20%) } } @keyframes modal-close { 0% { opacity:1; visibility:visible } 100% { opacity:0; -webkit-transform:translateY(20%); transform:translateY(20%) } } html, body { margin: 0; width: 100%; height: 100% } html { font-family: {{body_font}}; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { overflow-x: hidden } b, strong { font-weight: 500 } small { font-size: .875em } h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; line-height: 1em } sub, sup { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } ul { margin: 0; padding: 0; list-style-type: none } img { border: 0; max-width: 100% } form { margin: 0 } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; padding: 0; -webkit-appearance: none; -webkit-font-smoothing: inherit; border: none; background: transparent; line-height: normal } button { overflow: visible } button, select { -moz-appearance: none; text-transform: none } button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer } button[disabled], input[disabled] { cursor: default } button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0 } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height:auto } input[type="search"] { -webkit-box-sizing: content-box; box-sizing: content-box } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance:none } fieldset { margin: 0; padding: 0; border: 0 } textarea { overflow: auto } table { border-collapse: collapse; border-spacing: 0; font-size: 1em } td, th { padding: 0; font-weight: normal } body { font-size: 14px; font-family: {{body_font}}; line-height: 1.3em; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; -webkit-font-smoothing: subpixel-antialiased } a, .link { text-decoration: none; /* color: #e06571; */ color:{{settings.checkout_accent_color}}; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out } a:hover, .link:hover { color: #da4756 } .link--muted { color: inherit; text-decoration: underline } h1, .heading-1 { font-family: {{head_font}}; font-size: 1.71429em; line-height: 1.3em } @media only screen and (min-width: 750px) { h1, .heading-1 { font-size: 2em } } h2 { font-family: {{head_font}}; font-size: 1.28571em; line-height: 1.3em } .main h2 { color: #333333 } .sidebar h2 { color: #323232 } .content-box h2 { color: #333333 } .default-background h2 { color: #333333 } h3 { font-family: {{head_font}}; font-size: 1em; font-weight: 500; line-height: 1.3em; margin-bottom: 0.57143em } .main h3 { color: #333333 } .sidebar h3 { color: #323232 } .content-box h3 { color: #333333 } .default-background h3 { color: #333333 } h3:not(:first-child) { margin-top: 1.5em } p { margin: 0; line-height: 1.5em } p+p { margin-top: 1.5em } .icon-svg { display: inline-block; vertical-align: middle; fill: currentColor; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out } .icon-svg--size-10 { width: 10px; height: 10px } .icon-svg--size-18 { width: 18px; height: 18px } .icon-svg--spinner-button { width: 20px; height: 20px } .icon-svg--spinner { -webkit-animation: fade-in 0.5s ease-in-out, rotate 0.5s linear infinite; animation: fade-in 0.5s ease-in-out, rotate 0.5s linear infinite } .logo { display: block; vertical-align: middle } .logo__image { display: inline-block } .logo--right { text-align: right } .logo--center { text-align: center } .logo__image--small { max-height: 2.14286em } .logo__image--medium { max-height: 2.85714em } .logo__image--large { max-height: 3.57143em } @media only screen and (min-width: 1000px) { .logo__image--small { max-height: 2.85714em } .logo__image--medium { max-height: 4.28571em } .logo__image--large { max-height: 5.71429em } } body { color: #545454; } .content { overflow: hidden } .wrap { display: block; margin: 0 auto; max-width: 40em; zoom: 1 } .wrap:after, .wrap:before { content: ""; display: table } .wrap:after { clear: both } @media only screen and (max-width: 999px) { .wrap { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 1em } } @media only screen and (min-width: 1000px) { .wrap { padding: 0 5%; width: 90%; max-width: 78.57143em } } @media only screen and (max-width: 999px) { .no-js .content .wrap { display: table } .no-js .content .wrap .main { display: table-footer-group } .no-js .content .wrap .sidebar { display: table-header-group } .no-js .content .wrap .sidebar::after { display: none } } @media only screen and (min-width: 1000px) { .main { width: 52%; width: 52%; padding-right: 6%; float: left } } .main .logo { display: none } @media only screen and (min-width: 1000px) { .page--logo-main .main .logo { display: block; text-align: center; } } .sidebar { position: relative; color: #535353 } @media only screen and (min-width: 1000px) { .sidebar { width: 38%; padding-left: 4%; background-position: left top; float: right } } .sidebar::after { content: ""; display: block; width: 300%; position: absolute; top: 0; left: -100%; bottom: 0; background: #fafafa; z-index: -1; -webkit-box-shadow: 0 -1px 0 #e1e1e1 inset; box-shadow: 0 -1px 0 #e1e1e1 inset } @media only screen and (min-width: 1000px) { .sidebar::after { left: 0; background-position: left top; -webkit-box-shadow: 1px 0 0 #e1e1e1 inset; box-shadow: 1px 0 0 #e1e1e1 inset } } .sidebar__header { margin-bottom: 2.5em; display: none; } @media only screen and (min-width: 1000px) { .page--logo-sidebar .sidebar__header { display: block } } .anyflexbox body, .anyflexbox .content, .anyflexbox .content .wrap, .anyflexbox .main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .anyflexbox .content .wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } .anyflexbox .main__content { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .anyflexbox .banner { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } @media only screen and (min-width: 1000px) { .anyflexbox .content .wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } } @media only screen and (max-width: 749px) { .main { padding-top: 1.5em } .main__content { padding-bottom: 1.5em } } @media only screen and (min-width: 750px) { .main { padding-top: 1.5em } .main__content { padding-bottom: 4em } } @media only screen and (min-width: 1000px) { .page--no-banner .main, .page--no-banner .sidebar { padding-top: 4em } .page--banner .main, .page--banner .sidebar { padding-top: 2em } .main__header { padding-bottom: 2em } .sidebar__logo { margin-bottom: 2em } .page--logo-main .breadcrumb { margin-top: 1em; text-align: center; } } table { width: 100% } td, th { padding-left: 1em } td:first-child, th:first-child { padding-left: 0; text-align: left } td:last-child, th:last-child { text-align: right } .banner { padding: 1.5em 0; background: transparent; background-size: cover; display: none } @media only screen and (max-width: 999px) { .banner { display: block } } .btn { cursor: pointer; display: inline-block; background-color: #a70405; background-color:{{settings.checkout_button_color}}; background-clip: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px transparent solid; border-radius: 5px; color: white; font-weight: 500; padding: 1.4em 1.7em; text-align: center; position: relative; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out } .btn:hover { background-color: #135e90; color: white; } .btn:active { outline: none } .btn--size-small { padding: 0.92857em } .btn__content { -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out } .btn__icon { margin-top: -0.28571em; margin-bottom: -0.07143em } .btn__spinner { position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; opacity: 0 } .step__footer { z-index: 2; position: relative; margin-top: 1em } .no-js .step__footer, .no-anyflexbox .step__footer { zoom: 1 } .no-js .step__footer:after, .no-js .step__footer:before, .no-anyflexbox .step__footer:after, .no-anyflexbox .step__footer:before { content: ""; display: table } .no-js .step__footer:after, .no-anyflexbox .step__footer:after { clear: both } @media only screen and (min-width: 750px) { .step__footer { margin-top: 1.5em } } @media only screen and (min-width: 750px) { .step__footer__continue-btn { float: right } } @media only screen and (min-width: 750px) { .anyflexbox .step__footer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: end; -ms-flex-pack: justify; justify-content: end; } } .step__sections+form { padding-top: 2em } @media only screen and (min-width: 1000px) { .step__sections+form { padding-top: 0 } } .section { position: relative; padding-top: 2em } @media only screen and (min-width: 750px) { .section { padding-top: 3em } } .section:first-child { padding-top: 0 } .section__header { position: relative; margin-bottom: 1em } @media only screen and (min-width: 750px) { .section__header { margin-bottom: 1.5em } } .section__title { color: #333333 } .section__text { margin-top: 0.25em } .section__content { zoom: 1 } .section__content:after, .section__content:before { content: ""; display: table } .section__content:after { clear: both } @media only screen and (min-width: 750px) and (max-width: 999px) { .section--page-title { margin-top: 1em } } .fieldset { margin: -0.42857em; zoom: 1 } .fieldset:after, .fieldset:before { content: ""; display: table } .fieldset:after { clear: both } .field { width: 100%; float: left; padding: 0.42857em; -webkit-box-sizing: border-box; box-sizing: border-box } @media only screen and (min-width: 750px) { .floating-labels .field--two-thirds { width: 66.66667% } /* .floating-labels .field--half { width: 50% } */ /* .floating-labels .field--three-eights { width: 37.5% } */ .floating-labels .field--third { width: 33.33333% } /* .floating-labels .field--quarter { width: 25% } */ } .field__message { line-height: 1.3em; margin: 0.57143em 0 0.28571em } .field__message--error { display: none; color: #ff6d6d } .field--error .field__message--error { display: block } .field__message__icon { margin-right: 0.25em; vertical-align: -3px } .field__label { font-weight: 500; margin: 0.5em 0; display: none; } .main .field__label { color: #333333 } .floating-labels .main .field__label { color: #737373; margin-bottom: 12px; } .sidebar .field__label { color: #323232 } .floating-labels .sidebar .field__label { color: #737373 } .main .field--active .field__label { color: #545454 } .sidebar .field--active .field__label { color: #545454 } .no-js .field__label { display: block } .floating-labels .field__label { font-weight: normal; top: 0; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateY(3px); transform: translateY(3px); pointer-events: none; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; } .floating-labels .field--show-floating-label .field__label { -webkit-transform: none; transform: none; opacity: 1 } .floating-labels .field__input-wrapper--icon-left .field__label { padding-left: 2.85714rem } .floating-labels .field__input-wrapper--icon-right .field__label { padding-right: 2.85714rem } .animate-floating-labels .field__label { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out } .field__label--visible { display: block } .field__input-wrapper { position: relative } .field__input { border: 1px transparent solid; background-clip: padding-box; border-radius: 5px; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 0.92857em 0.78571em; word-break: normal } .main .field__input { background-color: {{input_bg_color }}; color: #333333; border-color: #d9d9d9 } .main .field__input::-webkit-input-placeholder { color:#737373 } .main .field__input:-moz-placeholder { color:#737373 } .main .field__input::-moz-placeholder { color:#737373 } .main .field__input:-ms-input-placeholder { color:#737373 } .sidebar .field__input { background-color: white; color: #333333; border-color: #d5d5d5 } .sidebar .field__input::-webkit-input-placeholder { color:#737373 } .sidebar .field__input:-moz-placeholder { color:#737373 } .sidebar .field__input::-moz-placeholder { color:#737373 } .sidebar .field__input:-ms-input-placeholder { color:#737373 } .floating-labels .field--show-floating-label .field__input { padding-top: 1.499999em; padding-bottom: 0.35714em } .floating-labels .field--show-floating-label .field__input::-webkit-input-placeholder { color:transparent } .floating-labels .field--show-floating-label .field__input:-moz-placeholder { color:transparent } .floating-labels .field--show-floating-label .field__input::-moz-placeholder { color:transparent } .floating-labels .field--show-floating-label .field__input:-ms-input-placeholder { color:transparent } .field__input:focus, .field__input-wrapper--flag-focus .field__input { outline: none; border-color: {{settings.checkout_accent_color}}; -webkit-box-shadow: 0 0 0 1px {{settings.checkout_accent_color}}; box-shadow: 0 0 0 1px {{settings.checkout_accent_color}}; } .field--error .field__input { border-color: #ff6d6d; -webkit-box-shadow: 0 0 0 1px #ff6d6d; box-shadow: 0 0 0 1px #ff6d6d } .field__input--select::-ms-expand { display:none } .no-js .field__input--select, .no-csspointerevents .field__input--select { background-position: 95% center; background-position: right 1em center; background-repeat: no-repeat } .no-js .sidebar .field__input--select, .no-csspointerevents .sidebar .field__input--select { background-image: url({{host | append:'/store/Assets/dropdown-arrow-down-dark.png'}}); background-image: url({{host | append:'/store/Assets/dropdown-arrow-down-dark.svg'}}), none } .field__input--select option { background-color: #fff; color: #000 } .csspointerevents .field__input-wrapper--select::before { content: ''; position: absolute; right: 0; top: 24px; bottom: 0; width: 50px; background-position: center center; background-repeat: no-repeat; pointer-events: none } .csspointerevents .main .field__input-wrapper--select::before { background-image: url({{host | append:'/store/Assets/dropdown-arrow-down-dark.png'}}); background-image: url({{host | append:'/store/Assets/dropdown-arrow-down-dark.svg'}}), none } .csspointerevents .sidebar .field__input-wrapper--select::before { background-image: url({{host | append:'/store/Assets/dropdown-arrow-down-dark.png'}}); background-image: url({{host | append:'/store/Assets/dropdown-arrow-down-dark.svg'}}), none } .content-box { background: #fff; background-clip: padding-box; border: 1px #d9d9d9 solid; border-radius: 5px; color: #545454 } @media only screen and (max-width: 999px) { .order-summary--transition, .order-summary--is-collapsed { overflow: hidden } } @media only screen and (max-width: 999px) { .js .order-summary--is-collapsed { height: 0; visibility: hidden } } .order-summary--transition { -webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1); transition: all 0.3s cubic-bezier(0.3, 0, 0, 1) } .order-summary__section { padding-top: 1.5em; padding-bottom: 1.5em } .order-summary__section ~ .order-summary__section { border-top: 1px solid rgba(175,175,175,0.34) } @media only screen and (min-width: 1000px) { .order-summary__section { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .order-summary__section:first-child { padding-top: 0 } } @media only screen and (min-width: 1000px) { .order-summary__sections { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: calc(100vh - 8em); width: 100% } .no-js .order-summary__sections, .no-anyflexbox .order-summary__sections { height: auto } .order-summary__section--product-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; min-height: 7em; overflow: hidden; padding: 0; position: relative } .order-summary__section--product-list+.order-summary__section { border: 0 } .order-summary__section--product-list::before, .order-summary__section--product-list::after { content: ''; display: block; height: 1px; left: 0; position: absolute; -webkit-transition: background-color 0.3s cubic-bezier(0.3, 0, 0, 1); transition: background-color 0.3s cubic-bezier(0.3, 0, 0, 1); width: 100%; z-index: 4 } .order-summary__section--product-list::before { background-color: transparent; top: 0 } .order-summary__section--product-list::after { background-color: rgba(175,175,175,0.34); bottom: 0 } .order-summary__section--product-list .product-table { margin-top: 0.75em; margin-bottom: 1.5em; position: relative; z-index: 1 } .order-summary__section--has-scroll::before { background-color: rgba(175,175,175,0.34) } .order-summary__section__content { min-width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch } .no-js .order-summary__section__content, .no-touchevents .order-summary__section__content { overflow: hidden } .no-js .order-summary__section__content:hover, .no-touchevents .order-summary__section__content:hover { overflow-y: auto } } .order-summary__scroll-indicator { background-color: rgba(50,50,50,0.85); border-radius: 2em; bottom: 1.5em; color: #fafafa; font-size: 0.85714em; left: 50%; opacity: 0; padding: 0.6em 1.2em; position: absolute; -webkit-transform: translateX(-50%) translateY(100%) rotateZ(360deg); transform: translateX(-50%) translateY(100%) rotateZ(360deg); -webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1); transition: all 0.3s cubic-bezier(0.3, 0, 0, 1); white-space: nowrap; z-index: 2 } .order-summary__section--is-scrollable .order-summary__scroll-indicator { opacity: 1; -webkit-transform: translateX(-50%) translateY(0) rotateZ(360deg); transform: translateX(-50%) translateY(0) rotateZ(360deg) } .order-summary__section--has-scroll .order-summary__scroll-indicator { -webkit-transform: translateX(-50%) translateY(-100%) rotateZ(360deg); transform: translateX(-50%) translateY(-100%) rotateZ(360deg) } .order-summary__scroll-indicator svg { fill: currentColor; margin-left: 0.21429em; margin-top: -0.21429em; vertical-align: middle } .order-summary__emphasis { font-weight: 500 } .sidebar .order-summary__emphasis { color: #323232 } .order-summary__small-text { font-size: 0.85714em } .sidebar .order-summary__small-text { color: #717171 } .total-line th, .total-line td { padding-top: 0.75em } .total-line:first-child th, .total-line:first-child td { padding-top: 0 } .total-line--loading th, .total-line--loading td { width: 100% } .total-line__price { padding-left: 1.5em; text-align: right; white-space: nowrap } .total-line-table__tbody+.total-line-table__footer .total-line th, .total-line-table__tbody+.total-line-table__footer .total-line td { padding-top: 3em; position: relative } .total-line-table__tbody+.total-line-table__footer .total-line th::before, .total-line-table__tbody+.total-line-table__footer .total-line td::before { content: ''; position: absolute; top: 1.5em; left: 0; width: 100%; height: 1px } .sidebar .total-line-table__tbody+.total-line-table__footer .total-line th::before, .sidebar .total-line-table__tbody+.total-line-table__footer .total-line td::before { background-color: rgba(175,175,175,0.34) } @media only screen and (max-width: 999px) { .breadcrumb { display: none } } .breadcrumb__item { display: inline; font-size: 0.85714em; color: #737373 } .breadcrumb__item--current { font-weight: 500; color: #333333 } .breadcrumb__chevron-icon { color: #737373; margin: 0 0.4em } .breadcrumb__text, .breadcrumb__link, .breadcrumb__chevron-icon { vertical-align: middle } .breadcrumb--center { text-align: center } .main__footer { padding: 1em 0; border-top: 1px solid #e6e6e6 } .copyright-text { font-size: 0.85714em; color: #737373 } .product td { padding-top: 1em } .product:first-child td { padding-top: 0 } .product:not(.product--loading)+.product--loading td { padding-top: 0 } .product-thumbnail { width: 4.6em; height: 4.6em; border-radius: 8px; background: #fff; position: relative } .product-thumbnail::after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 8px; border: 1px rgba(0,0,0,0.1) solid; z-index: 2 } .product--loading .product-thumbnail::after { -webkit-box-shadow: none; box-shadow: none } .product-thumbnail__wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 8px; z-index: 1 } .product-thumbnail__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto } .product-thumbnail__quantity { font-size: 0.85714em; font-weight: 500; line-height: 1.75em; white-space: nowrap; text-align: center; border-radius: 1.75em; background-color: rgba(114,114,114,0.9); color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 1.75em; height: 1.75em; padding: 0 0.58333em; position: absolute; right: -0.75em; top: -0.75em; z-index: 3 } .product__price { white-space: nowrap } .product__description__name, .product__description__variant, .product__description__property { display: block } .product__description { width: 100% } .product__description__name { width: 1em; *width:100%; min-width: 100% } .product__status { position: relative; white-space: nowrap } .product__status--sold-out { color: #ff6d6d } .product__status__icon { vertical-align: -0.15em } .display-table .logged-in-customer-information__avatar-wrapper { display: table-cell } .display-table .logged-in-customer-information__paragraph { display: table-cell; width: 100% } .hidden { display: none !important } .visually-hidden { border: 0; clip: rect(0, 0, 0, 0); clip: rect(0 0 0 0); width: 2px; height: 2px; margin: -2px; overflow: hidden; padding: 0; position: absolute } @media only screen and (max-width: 749px) { .visually-hidden-on-mobile { border: 0; clip: rect(0, 0, 0, 0); clip: rect(0 0 0 0); width: 2px; height: 2px; margin: -2px; overflow: hidden; padding: 0; position: absolute } } @media only screen and (min-width: 1000px) { .visually-hidden-on-desktop { border: 0; clip: rect(0, 0, 0, 0); clip: rect(0 0 0 0); width: 2px; height: 2px; margin: -2px; overflow: hidden; padding: 0; position: absolute } } .visible-on-focus { border: 0; clip: rect(0, 0, 0, 0); clip: rect(0 0 0 0); width: 2px; height: 2px; margin: -2px; overflow: hidden; padding: 0; position: absolute } .visible-on-focus:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .no-js .shown-if-js { display: none } .js .hidden-if-js { display: none } .js .visually-hidden-if-js { border: 0; clip: rect(0, 0, 0, 0); clip: rect(0 0 0 0); width: 2px; height: 2px; margin: -2px; overflow: hidden; padding: 0; position: absolute } @media only screen and (max-width: 749px) { .hidden-on-mobile { display: none } } @media only screen and (min-width: 750px) { .shown-on-mobile { display: none } } @media (min-width: 750px) and (max-width: 999px) { .hidden-on-tablet { display: none } } @media (max-width: 749px) and (min-width: 1000px) { .shown-on-tablet { display: none } } @media (min-width: 1000px) { .hidden-on-desktop { display: none } } @media only screen and (max-width: 999px) { .shown-on-desktop { display: none } } .order-summary-toggle { background: #fafafa; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 1.25em 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; text-align: left; width: 100% } @media only screen and (min-width: 1000px) { .order-summary-toggle { display: none } } .order-summary-toggle__inner { zoom: 1 } .order-summary-toggle__inner:after, .order-summary-toggle__inner:before { content: ""; display: table } .order-summary-toggle__inner:after { clear: both } .display-table .order-summary-toggle__inner { display: table; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100% } .order-summary-toggle__icon-wrapper { vertical-align: middle; padding-right: 0.75em; white-space: nowrap } .display-table .order-summary-toggle__icon-wrapper { display: table-cell } .no-js .order-summary-toggle__icon-wrapper, .no-display-table .order-summary-toggle__icon-wrapper { float: left } .order-summary-toggle__icon { fill: #e06571; -webkit-transition: fill 0.2s ease-in-out; transition: fill 0.2s ease-in-out } .order-summary-toggle:hover .order-summary-toggle__icon, .order-summary-toggle:focus .order-summary-toggle__icon { fill: #d73b4a } .order-summary-toggle__text { color: #e06571; vertical-align: middle; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; display: none } .order-summary-toggle:hover .order-summary-toggle__text, .order-summary-toggle:focus .order-summary-toggle__text { color: #d73b4a } .order-summary-toggle--show .order-summary-toggle__text--show, .order-summary-toggle--hide .order-summary-toggle__text--hide { display: block } .display-table .order-summary-toggle--show .order-summary-toggle__text--show, .display-table .order-summary-toggle--hide .order-summary-toggle__text--hide { display: table-cell; width: 100% } .no-js .order-summary-toggle--show .order-summary-toggle__text--show, .no-display-table .order-summary-toggle--show .order-summary-toggle__text--show, .no-js .order-summary-toggle--hide .order-summary-toggle__text--hide, .no-display-table .order-summary-toggle--hide .order-summary-toggle__text--hide { float: left } .order-summary-toggle__total-recap { vertical-align: middle; text-align: right; padding-left: 0.75em; white-space: nowrap } .display-table .order-summary-toggle__total-recap { display: table-cell } .no-js .order-summary-toggle__total-recap, .no-display-table .order-summary-toggle__total-recap { float: right } .total-recap__original-price { font-size: 0.85714em; color: #737373; display: block } .total-recap__final-price { font-size: 1.28571em; line-height: 1em; color: #333333 } .order-summary-toggle__dropdown { vertical-align: middle; -webkit-transition: fill 0.2s ease-in-out; transition: fill 0.2s ease-in-out; fill: #e06571 } .order-summary-toggle:hover .order-summary-toggle__dropdown, .order-summary-toggle:focus .order-summary-toggle__dropdown { fill: #d73b4a } .skip-to-content { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: white; text-align: center; border: 0; clip: rect(1px, 1px, 1px, 1px); clip: rect(1px 1px 1px 1px); width: 1px; height: 1px; position: absolute; overflow: hidden; margin: -1px } .skip-to-content:focus { margin: 0; padding: 1em; clip: auto; width: 100%; height: auto; overflow: visible } *{ outline: none; } /* =========== new ============ */ .breadcrumb li:last-child svg{ display: none; } .section__header .for-label{ margin-top: 10px; color: #737373; display: inline-block; text-transform: initial; } .header-border{ border-bottom: 1px #d9d9d9 solid; } .table-header { padding: 10px; display: flex; align-items: center; justify-content: space-between; } .table-header h3 { margin-bottom: 0; font-weight: bold; } .payment-method ul{ display: inline-flex; align-items: center; } .payment-method ul li { margin-left: 5px; } .payment-method ul li a { line-height: normal; display: inline-block; vertical-align: top; width: 40px; } .payment-method ul li a img{ display: block; } .no-padding{ padding: 0; } .card-details{ padding:10px; } .for-background{ background: #fafafa; } /* ============= Left Checkout ============== */ @media only screen and (min-width: 1000px){ .left-checkout{ left: 0%; position: relative; transition: all 0.1s ease-in-out; width: 400px; } .left-checkout .main__header{ display: none !important; } .left-checkout .banner, .left-checkout .order-summary-toggle{ display: block !important; } .left-checkout .page--logo-main .main .logo, .left-checkout .page--logo-main .breadcrumb{ display: none !important; } .left-checkout .order-summary--transition, .order-summary--is-collapsed { overflow: hidden; } .left-checkout .order-summary--is-collapsed { height: 0; visibility: hidden; } .left-checkout.open{ left: 0%; transition: all 0.1s ease-in-out; } .anyflexbox .left-checkout .content .wrap{ flex-wrap: wrap; } .anyflexbox .left-checkout .main{ width: 100%; order: 2; padding: 0; padding-top: 2em; } .left-checkout .order-summary__sections{ height:100%; } .left-checkout .sidebar{ width: 100%; order: 1; display: none; } .left-checkout .sidebar.active{ display: block; padding: 0; padding-top: 1em; } .left-checkout .sidebar::after{ content: ""; display: block; width: 300%; position: absolute; top: 0; left: -100%; bottom: 0; background: #fafafa; z-index: -1; -webkit-box-shadow: 0 -1px 0 #e1e1e1 inset; box-shadow: 0 -1px 0 #e1e1e1 inset; } } /* ============= right Checkout ============== */ @media only screen and (min-width: 1000px){ .right-checkout{ right: 0%; position: absolute; transition: all 0.1s ease-in-out; width: 400px; } .right-checkout .main__header{ display: none !important; } .right-checkout .banner, .right-checkout .order-summary-toggle{ display: block !important; } .right-checkout .page--logo-main .main .logo, .right-checkout .page--logo-main .breadcrumb{ display: none !important; } .right-checkout .order-summary--transition, .order-summary--is-collapsed { overflow: hidden; } .right-checkout .order-summary--is-collapsed { height: 0; visibility: hidden; } .right-checkout.open{ right: 0%; transition: all 0.1s ease-in-out; } .anyflexbox .right-checkout .content .wrap{ flex-wrap: wrap; } .anyflexbox .right-checkout .main{ width: 100%; order: 2; padding: 0; padding-top: 2em; } .right-checkout .order-summary__sections{ height:100%; } .right-checkout .sidebar{ width: 100%; order: 1; display: none; } .right-checkout .sidebar.active{ display: block; padding: 0; padding-top: 1em; } .right-checkout .sidebar::after{ content: ""; display: block; width: 300%; position: absolute; top: 0; right: -100%; bottom: 0; background: #fafafa; z-index: -1; -webkit-box-shadow: 0 -1px 0 #e1e1e1 inset; box-shadow: 0 -1px 0 #e1e1e1 inset; } } .field__input-wrapper textarea{ resize:none; } .multiple_edit_wrapper:before{ display:none; } .multiple_edit_wrapper select{ height: 70px; padding: 12px 0.78571em; -webkit-appearance: none !imporatnt; } .field__input-wrapper input[type="checkbox"]{ -webkit-appearance: checkbox; } .field__input-wrapper input[type="radio"]{ -webkit-appearance: radio; } .field__input-wrapper--radio .field__label, .multiple_edit_wrapper .field__label, .field__input-wrapper--select .field__label, .field__input-wrapper--checkbox .field__label{ display:block !important; } .fieldset .field__input.activeFocus{ outline: none; border-color: {{settings.checkout_error_color}}; -webkit-box-shadow: 0 0 0 1px {{settings.checkout_error_color}}; box-shadow: 0 0 0 1px {{settings.checkout_error_color}}; } .field--full{ width:100%; } .field--three-quarter{ width:75%; } .field--two-thirds{ width:66%; } .field--half{ width:50%; } .field--third{ width:33%; } .field--quarter{ width:25%; } /* ================ new ===================== */ .floating-labels .with-label .field__label { font-size: 0.85714em; font-weight: normal; position: absolute; top: 0; width: 100%; margin-top: 0.42857em; margin-left: 1px; padding: 0 0.91667em; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateY(3px); transform: translateY(3px); pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } .floating-labels .with-label.field--show-floating-label .field__label{ -webkit-transform: none; transform: none; opacity: 1; } .field__input-wrapper--select:before{ display:none; } .logo--right{ text-align:right !important; } .logo--left, .breadcrumb--left,.breadcrumb--right{ text-align:left !important; } .logo--center, .breadcrumb--center{ text-align:center !important; } .sidebar__header .logo--left{ text-align:center !important; } .no-js .main .multiple_edit_wrapper select{ background-image: none; } @media only screen and (min-width: 999px){ .anyflexbox .banner{ display:none; } } @media only screen and (max-width: 999px){ .no-js .order-summary-toggle--show .order-summary-toggle__text--show{ float:none; } .no-js .shown-if-js { display: block; } .anyflexbox .banner{ padding: 1.5em 0 !important; } .anyflexbox .banner{ display:block; } } .multiple_edit_wrapper select{ padding-top: 0 !important; padding-bottom: 0 !important; } .errorMsg{ color:#e32c2b; /* font-size: 12px; */ line-height: 1.3em; margin: 0.57143em 0 0.28571em; } .opt_in .field__input-wrapper--checkbox, .opt_in .field__input-wrapper--radio{ display: flex; align-items: center; } .opt_in .field__label { width: 30%; margin: 0 !important; white-space: normal; } .opt_in .checkbox-inner-wrap{ flex: 1%; margin: 0 !important; } .payment-due__price { font-size: 1.71429em; font-weight: 500; letter-spacing: -0.04em; line-height: 1em; } .sidebar .payment-due__price { color: #323232; } .payment-due__currency { font-size: 0.85714em; vertical-align: 0.2em; margin-right: 0.5em; } .sidebar .payment-due__currency { color: #717171; } .payment-due-label__total { font-size: 1.14286em; } .sidebar .payment-due-label__total { color: #323232; } .floating-labels input.field__input, .floating-labels select{ height:47px; } /* new checkout css */ .exclamation-mark { color: #737373; fill: currentColor; stroke: currentColor; } @media (min-width: 1300px){ .section__hanging-icon { position: absolute; right: 100%; top: -0.4em; margin-right: 1.5em; } } @media (max-width: 999px) and (min-width: 750px){ .section__hanging-icon { position: absolute; right: 100%; top: -0.4em; margin-right: 1.5em; } } .section__hanging-icon { margin-bottom: 1em; } .icon-svg--size-48 { width: 48px; height: 48px; } .exclamation-mark__circle { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; } .cssanimations .exclamation-mark__circle { stroke-dasharray: 151; stroke-dashoffset: 151; -webkit-animation: draw-stroke 0.6s 0.4s cubic-bezier(0.3, 0, 0, 1) forwards; animation: draw-stroke 0.6s 0.4s cubic-bezier(0.3, 0, 0, 1) forwards; } .cssanimations .exclamation-mark__line { stroke-dasharray: 18; stroke-dashoffset: 18; -webkit-animation: draw-stroke 0.3s 0.8s cubic-bezier(0.3, 0, 0, 1) forwards; animation: draw-stroke 0.3s 0.8s cubic-bezier(0.3, 0, 0, 1) forwards; } .stock-problem-table__header th{ border-bottom: 1px solid #e6e6e6; padding-bottom: 1.5em; white-space: nowrap; font-weight: 500; color: #333333; } .stock-problems-table td { padding-top: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #e6e6e6; } .stock-problem-table__header th { border-bottom: 1px solid #e6e6e6; padding-bottom: 1.5em; white-space: nowrap; font-weight: 500; color: #333333; } .icon-svg--inline-before { margin-right: 0.5em; } .icon-svg--size-14 { width: 14px; height: 14px; } .product__status--sold-out { color: #e32c2b; } .no-js .content .wrap .cart-main { display: flex; } /* ========== */ .radio__input, .checkbox__input { padding-right: 0.75em; white-space: nowrap; } .input-checkbox, .input-radio { width: 18px; height: 18px; -webkit-box-shadow: 0 0 0 0 #197bbd inset; box-shadow: 0 0 0 0 #197bbd inset; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; cursor: pointer; vertical-align: -4px; border: 1px solid; border-radius: 4px; padding:0; border-color: #d9d9d9; } .input-checkbox:after, .input-radio:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: scale(0.2); transform: scale(0.2); -webkit-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s; opacity: 0; } .input-checkbox:after { width: 10px; height: 8px; margin-left: -5px; margin-top: -4px; background-image: url(//cdn.shopify.com/s/files/1/0029/5872/1135/files/tick.svg?11871834449281753950),none; } .input-radio:after { width: 16px; height: 16px; margin-left: -5px; margin-top: -4px; } .input-checkbox:checked:after, .input-radio:checked:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .input-checkbox:checked { border: none; -webkit-box-shadow: 0 0 0 10px #197bbd inset; box-shadow: 0 0 0 10px #197bbd inset; } .input-radio:checked { border: none; -webkit-box-shadow: 0 0 0 6px #197bbd inset; box-shadow: 0 0 0 6px #197bbd inset; } .checkbox-wrapper, .radio-wrapper{ display: flex; align-items: center; margin-bottom: 8px; } .field__input-wrapper .checkbox-wrapper input[type="checkbox"], .field__input-wrapper .radio-wrapper input[type="radio"] { -webkit-appearance: none; } .checkbox-wrapper .checkbox__input, .checkbox-wrapper label, .radio-wrapper .radio__input, .radio-wrapper label{ cursor:pointer; } .input-checkbox{ border-radius: 4px; } .input-radio { border-radius: 50%; } .field__input--select { padding-right: 2.87143em; white-space: nowrap; } .main .field__caret { border-left: 1px rgba(179,179,179,0.5) solid; } .field__caret { display: block; width: 2.14286em; height: 43%; pointer-events: none; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); /* background-image: url(//conde-staging.wlfpt.co/store/Assets/dropdown-arrow-down-dark.svg), none; */ } .main .field__icon .icon-svg--color-adaptive-lighter, .main .field__caret .icon-svg--color-adaptive-lighter { color: #919191; fill: currentColor; } .field__caret-svg { position: absolute; margin-left: -2px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .icon-svg--size-10 { width: 10px; height: 10px; }