') */
.dropup .btn-group,
.dropright .btn-group,
.dropdown .btn-group,
.dropleft .btn-group {
display: flex;
}
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative;
}
/* The dropdown menu */
.dropdown-menu {
box-shadow: none;
border-bottom-left-radius: var(--ux-1xhjj5z, var(--ux-2jubes, 2px));
border-bottom-right-radius: var(--ux-1xhjj5z, var(--ux-2jubes, 2px));
font-family: var(--ux-1bkwcwm, var(--ux-1067ph9, sans-serif));
font-size: var(--ux-mdvzj9, var(--ux-vvspv2, 1rem)); /* Redeclare because nesting can cause inheritance issues */
line-height: var(--ux-1reo4w2, var(--ux-1w31hux, 1.5));
color: var(--ux-w7rmwl, var(--ux-1leynsm, black));
background-color: var(--ux-ct86w0, var(--ux-cao06b, white));
border: 1px solid var(--ux-jqgd0i, var(--ux-10jlyin, blue));
border-top: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none; /* none by default, but block on "open" of the menu */
float: left;
min-width: 100%;
padding: 0;
margin: 0;
text-align: left; /* Ensures proper alignment if parent has it changed (e.g., modal footer) */
text-transform: none;
list-style: none;
background-clip: padding-box;
/* They need to be rendered but hidden so that they can be measured, */
}
/* Not mobile first because it is only on XS */
@media (max-width: 767px) {
.dropdown-menu.full-screen {
border: 0;
background-color: transparent; /* This should always be transparent no need for intents */
position: fixed;
display: block;
visibility: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000010; /* Has to be insanely high due to the checkout 'Complete Purchase' button */
}
.dropdown-menu.full-screen > .dropdown-overlay {
background: var(--ux-1gm3rf3, var(--ux-wxwyd1, black));
width: 100vw;
height: 100vh;
z-index: 1005;
display: block;
opacity: 0;
position: relative;
transition: all .6s;
}
.dropdown-menu.full-screen > .dropdown-menu-background {
box-shadow: 0 6px 8px rgba(17, 17, 17, 0.07);
background: var(--ux-ct86w0, var(--ux-cao06b, white));
color: var(--ux-w7rmwl, var(--ux-1leynsm, black));
transform: translateY(120%);
position: fixed;
z-index: 1010;
transition: all .6s;
display: flex;
flex-direction: column;
align-items: stretch;
max-height: 95vh;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
padding-bottom: 2vh;
border-radius: var(--ux-1xhjj5z, var(--ux-2jubes, 2px)) var(--ux-1xhjj5z, var(--ux-2jubes, 2px)) 0 0;
}
.dropdown-menu.full-screen > .dropdown-menu-background .dropdown-list {
max-height: 85vh;
overflow: auto;
align-self: stretch;
min-height: 3rem;
}
.dropdown-menu.full-screen > .dropdown-menu-background .dropdown-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
cursor: pointer;
}
.dropdown-menu.full-screen > .dropdown-menu-background > .dropdown-close {
color: inherit;
display: block;
font-size: 1.5rem;
padding: calc(var(--ux-1sbfig8, .25rem) * 2);
align-self: flex-end;
cursor: pointer;
}
}
.dropdown-menu .dropdown-menu.show {
display: block;
}
/* for full screen */
.dropdown-menu > .dropdown-menu-background > .dropdown-close {
display: none;
}
/* so we can determine if they should be right or left aligned */
.dropdown-menu.dropdown-menu-autoalign {
opacity: 0;
display: block;
visibility: hidden;
}
.dropdown:not(.ux-select-dropdown) {
display: inline-block;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
@media (max-width: 519px) {
.dropdown.full-screen,
.dropup.full-screen {
position: unset;
}
}
.dropdown .form-control,
.dropup .form-control {
padding-top: calc(var(--ux-1sbfig8, .25rem) * 2);
padding-bottom: calc(var(--ux-1sbfig8, .25rem) * 1.5);
}
.dropdown.dropdown-disabled,
.dropup.dropdown-disabled {
cursor: not-allowed;
}
.dropdown.dropdown-disabled .form-control,
.dropdown.dropdown-disabled .form-control:focus,
.dropup.dropdown-disabled .form-control,
.dropup.dropdown-disabled .form-control:focus {
opacity: .4;
box-shadow: none;
}
.dropdown.open > .btn-dropdown + .dropdown-menu,
.dropdown.open > .btn-group + .dropdown-menu {
margin-top: calc(var(--ux-1sbfig8, .25rem) * 1);
border-top: 1px solid var(--ux-jqgd0i, var(--ux-10jlyin, blue));
}
/* Show the menu */
.dropdown.open > .form-control {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: var(--ux-pdb1vi, var(--ux-by6mab, lightgray));
position: relative;
z-index: 1001;
}
/* Allow bottom border of dropdown to cover up top border of menu */
@media (max-width: 519px) {
.dropdown.open > .form-control {
position: relative;
border-color: var(--ux-pdb1vi, var(--ux-by6mab, lightgray));
}
}
.dropdown.open > .form-control .dropdown-toggle svg {
transform: rotate(180deg);
padding-top: 0;
}
/* For time picker only */
.dropdown.open > .form-control .timepicker {
right: 7px;
top: 9px;
}
.dropdown.open > .dropdown-menu {
box-shadow: 0 6px 8px rgba(17, 17, 17, 0.07);
display: block;
border-width: 1px;
margin-top: -1px;
width: 100%;
max-height: 315px;
overflow-y: auto;
top: 100%;
bottom: auto;
width: auto;
}
@media (max-width: 767px) {
.dropdown.open > .dropdown-menu.full-screen {
border-radius: 0;
visibility: visible;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height: none;
}
.dropdown.open > .dropdown-menu.full-screen > .form-control {
border-width: 1px;
}
.dropdown.open > .dropdown-menu.full-screen > .dropdown-overlay {
opacity: .5;
}
.dropdown.open > .dropdown-menu.full-screen > .dropdown-menu-background {
transform: translateY(0%);
}
}
.dropdown.open > .dropdown-menu.full-screen.dropdown-menu-autoalign {
opacity: 1;
visibility: visible;
}
/* more intents for this */
.dropdown.open.menu-up > .form-control {
border-radius: 0;
border-color: var(--ux-jqgd0i, var(--ux-10jlyin, blue));
border-width: 1px;
}
.dropdown.open.menu-up > .dropdown-menu {
border-radius: 0;
top: auto;
bottom: calc(100% + .75rem);
border-width: 1px;
}
.dropdown.open.menu-up.has-label > .dropdown-menu {
bottom: calc(60% + .75rem);
}
.dropdown.open.menu-up > .btn-dropdown + .dropdown-menu {
bottom: calc(100% + .25rem);
}
/* Dividers (basically an '
') within the dropdown */
.dropdown-divider {
height: 1px;
background-color: var(--ux-7j9lri, var(--ux-97h3vl, lightgray));
overflow: hidden;
border: 0;
margin: 0;
}
label.dropdown-item {
margin: 0;
}
label.dropdown-item input[type=checkbox] {
margin-right: calc(var(--ux-1sbfig8, .25rem) * 2);
margin-top: -3px;
}
.dropdown-item,
a.dropdown-item {
/* intents */
font-family: var(--ux-14k1s1a, var(--ux-gfnupv, sans-serif));
font-size: var(--ux-j6heil, var(--ux-cxbe8g, 1rem));
font-weight: var(--ux-11du3iw, var(--ux-j40yyd, 400));
line-height: var(--ux-d22wxm, var(--ux-jw5s9j, 1.5));
color: var(--ux-1xzzhyl, var(--ux-ut3xrx, black));
background-color: var(--ux-giowrc, var(--ux-1owc8nc, transparent));
display: flex;
flex-grow: 1;
clear: both;
align-items: center;
min-height: 2.75rem;
padding: 0 calc(var(--ux-1sbfig8, .25rem) * 4);
text-decoration: none;
text-align: inherit;
margin-bottom: 0;
white-space: nowrap;
cursor: pointer;
border: 0;
}
.dropdown-item:hover,
a.dropdown-item:hover {
background-color: var(--ux-afrmcf, var(--ux-1m7qrkf, blue));
color: var(--ux-18vqnuy, var(--ux-unx9i2, white));
border-bottom: 0;
text-decoration: none;
}
.dropdown-item:focus,
a.dropdown-item:focus {
color: var(--ux-1xzzhyl, var(--ux-ut3xrx, black));
background: none;
text-decoration: none;
}
.dropdown-item.disabled,
.dropdown-item:disabled,
a.dropdown-item.disabled,
a.dropdown-item:disabled {
opacity: .4;
}
.dropdown-item.disabled:focus,
a.dropdown-item.disabled:focus {
outline: 0;
}
.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover,
.dropdown-item:active,
.dropdown-item:active:focus,
.dropdown-item:active:hover,
a.dropdown-item.active,
a.dropdown-item.active:focus,
a.dropdown-item.active:hover,
a.dropdown-item:active,
a.dropdown-item:active:focus,
a.dropdown-item:active:hover {
background-color: var(--ux-afrmcf, var(--ux-1m7qrkf, blue));
color: var(--ux-18vqnuy, var(--ux-unx9i2, white));
text-decoration: none;
outline: 0;
}
/* Allow for dropdowns to go bottom up (aka, dropup-menu)
Just add .dropup after the standard .dropdown class and you're set. */
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 0;
}
.dropup .dropdown-toggle:after {
border: 0;
}
/* Might be able to be deprecated && || deleted since we don't support left or right menus */
.dropright .dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: calc(var(--ux-1sbfig8, .25rem) * .5);
}
.dropleft .dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: calc(var(--ux-1sbfig8, .25rem) * .5);
}
/* When enabled Popper.js, reset basic dropdown position
stylelint-disable no-duplicate-selectors */
.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
right: auto;
bottom: auto;
}
.dropdown-header {
position: relative;
font-family: var(--ux-otm6ij, var(--ux-15ks663, sans-serif));
font-size: var(--ux-1q1acnc, var(--ux-16aixzc, 1rem));
font-weight: var(--ux-19gfeod, var(--ux-aarlu5, 400));
line-height: var(--ux-e9hv5b, var(--ux-h93mi7, 1.5));
color: var(--ux-1v7sr65, var(--ux-cao06b, white));
background-color: var(--ux-1v7sr65, var(--ux-cao06b, white));
display: flex;
min-height: 2rem;
align-items: center;
flex-grow: 1;
padding: calc(var(--ux-1sbfig8, .25rem) * 4);
margin: 0;
white-space: nowrap;
}
/* as with > li > a */
.dropdown-header.title {
margin-bottom: 0;
}
/* Bringing back .dropdown-split as change doesn't work for input-group */
.dropdown-split {
min-width: 0;
}
.dropdown-split + .dropdown-toggle,
.btn + .dropdown-toggle-split {
width: auto;
min-width: 0;
max-width: none;
padding-right: calc(var(--ux-1sbfig8, .25rem) * 4);
padding-left: calc(var(--ux-1sbfig8, .25rem) * 4);
border-left: 1px solid;
}
.dropdown-split + .dropdown-toggle:after,
.btn + .dropdown-toggle-split:after {
margin: 0;
}
/* Tripledot Dropdown */
.triple-dot-dropdown {
cursor: pointer;
padding: 0;
}
.triple-dot-dropdown .tripledot {
padding: 10px 12px;
line-height: .6rem;
}
.triple-dot-dropdown:active,
.triple-dot-dropdown:focus {
outline: 0;
}
.triple-dot-dropdown.open .tripledot {
color: var(--ux-aen6zt, var(--ux-1no0ng9, white)) !important;
background-color: var(--ux-1u6aw8s, var(--ux-f7kpiw, blue)) !important;
}
.triple-dot-dropdown.open > .dropdown-menu {
margin-top: 5px;
right: 0;
left: auto;
border-top: 1px solid var(--ux-jqgd0i, var(--ux-10jlyin, blue));
}
.triple-dot-dropdown.open > .dropdown-menu.dropdown-menu-left {
right: auto;
left: 0;
}
.triple-dot-dropdown> .form-control {
padding: 0 !important;
box-shadow: none !important;
border: 0 !important;
background-color: transparent !important;
}
div[class^="col-"].dropdown .dropdown-menu-left {
left: calc(var(--ux-1sbfig8, .25rem) * 2);
}
div[class^="col-"].dropdown .dropdown-menu-right {
right: calc(var(--ux-1sbfig8, .25rem) * 2);
}
/* UX select dropdown */
.ux-select-dropdown .form-control,
.ux-select-dropdown .form-control-lg {
cursor: pointer;
min-height: 2.75rem;
height: auto;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.ux-select-dropdown .form-control .dropdown-text,
.ux-select-dropdown .form-control-lg .dropdown-text {
justify-content: flex-start;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ux-select-dropdown .form-control.form-control-sm,
.ux-select-dropdown .form-control-lg.form-control-sm {
min-height: 2rem;
}
.ux-select-dropdown .form-control.form-control-sm .dropdown-text,
.ux-select-dropdown .form-control-lg.form-control-sm .dropdown-text {
line-height: 1.125rem;
height: 1.125rem;
}
.ux-select-dropdown .form-control.placeholder,
.ux-select-dropdown .form-control-lg.placeholder {
color: var(--ux-1hcqdwb, var(--ux-1nk9qds, black));
}
.ux-select-dropdown .form-control .dropdown-toggle,
.ux-select-dropdown .form-control-lg .dropdown-toggle {
display: inline-flex;
flex-grow: 0;
}
.ux-select-dropdown .form-control.form-control-merch,
.ux-select-dropdown .form-control-lg.form-control-merch {
height: 3.25rem;
}
.ux-select-dropdown .form-control.form-control-merch.form-control-lg,
.ux-select-dropdown .form-control-lg.form-control-merch.form-control-lg {
height: 4rem;
}
.ux-select-dropdown .form-control.form-control-merch.form-control-lg .dropdown-toggle:after,
.ux-select-dropdown .form-control-lg.form-control-merch.form-control-lg .dropdown-toggle:after {
font-size: 1.375rem;
}
.ux-select-dropdown .form-control.form-control-merch.form-control-sm,
.ux-select-dropdown .form-control-lg.form-control-merch.form-control-sm {
height: 2.5rem;
}
.ux-select-dropdown .timepicker { /* specific to timepicker */
position: absolute;
right: .5rem;
top: .625rem;
}
.ux-select-dropdown.error .form-control {
border-color: var(--ux-1ap6ofp, var(--ux-1fhc073, red));
}
/* Time picker only styles */
.ux-select-dropdown:hover .timepicker {
color: inherit;
}
*{--uxp-icon-delete:url("data:image/svg+xml;utf-8,
");}
.uxicon-delete:before{content:var(--uxp-icon-delete)}
*{--uxp-icon-minus:url("data:image/svg+xml;utf-8,
");}
.uxicon-minus:before{content:var(--uxp-icon-minus)}
*{--uxp-icon-search:url("data:image/svg+xml;utf-8,
");}
.uxicon-search:before{content:var(--uxp-icon-search)}
*{--uxp-icon-plus:url("data:image/svg+xml;utf-8,
");}
.uxicon-plus:before{content:var(--uxp-icon-plus)}
*{--uxp-icon-refresh:url("data:image/svg+xml;utf-8,
");}
.uxicon-refresh:before{content:var(--uxp-icon-refresh)}
*{--uxp-icon-checkmark:url("data:image/svg+xml;utf-8,
");}
.uxicon-checkmark:before{content:var(--uxp-icon-checkmark)}
/* stylelint-disable selector-no-qualifying-type */
/* Icons below are specifically for checkboxes */
/* Textual form controls */
.form-control {
display: block;
min-height: 2.75rem;
width: 100%;
padding: 0.375rem 0.75rem;
font-family: var(--ux-1ovvts5, var(--ux-9wtaa3, sans-serif));
font-size: var(--ux-53fuhi, var(--ux-oc0naw, 1rem));
font-weight: var(--ux-1vxl8j7, var(--ux-3z6ccd, 400));
line-height: var(--ux-if3mvl, var(--ux-hm1ty7, 1.5));
color: var(--ux-9ui686, var(--ux-1glcx6s, black));
background-color: var(--ux-1taz3lf, var(--ux-1nu8itt, white));
border: 1px solid var(--ux-2a5bxt, var(--ux-by6mab, lightgray));
vertical-align: middle;
transition: .3s all ease-in-out;
border-radius: var(--ux-5skx2s, var(--ux-1oqjeuu, 2px));
}
.form-control:focus {
outline: var(--uxp-focus-visible-outline, none);
}
/* Placeholder */
.form-control::placeholder {
color: var(--ux-1vsptyg, var(--ux-1nk9qds, black));
/* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. */
opacity: 1;
}
/* Disabled and read-only inputs
HTML5 says that controls under a fieldset > legend:first-child won't be
disabled if the fieldset is disabled. Due to implementation difficulty, we
don't honor that edge case; we style them as disabled anyway. */
.form-control:disabled,
.form-control[readonly] {
opacity: .4;
}
.form-control:disabled:hover,
.form-control[readonly]:hover {
cursor: not-allowed;
box-shadow: none;
}
body:not(.keyboard-navigation) .form-control:focus {
border: 1px solid var(--ux-1hgz900, var(--ux-1im0suq, blue));
}
.form-element-header {
display: flex;
align-items: center;
}
.form-element-header .form-element-controls {
margin-left: auto;
}
.form-element-header .form-element-controls > * {
margin-left: .5rem;
}
.form-element-textual {
position: relative;
}
.form-element-textual .form-element-clear {
position: absolute;
top: 0;
right: 0;
height: calc(100% - 1px);
margin-inline-end: 1em;
}
.form-element-textual .form-control-sm + .form-element-clear {
font-size: 87.5%;
}
[dir="rtl"] .form-element-textual .form-element-clear {
right: auto;
left: 0;
}
/* Form control sizing
Build on '.form-control' with modifier classes to decrease or increase the
height and font-size of form controls.
The '.form-group-* form-control' variations are sadly duplicated to avoid the
issue documented in https://github.com/twbs/bootstrap/issues/15074. */
.form-control-sm {
padding: calc(0.375rem - .125rem) 0.75rem;
font-size: 87.5%;
min-height: 2rem;
}
.form-control-merch {
height: 3.25rem;
}
.form-control-merch.form-control-sm {
height: 2.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
text-transform: none;
}
/* Checkboxes and radios */
.ux-custom-control.ux-custom-control-inline {
display: inline-block;
}
.ux-custom-control .ux-control-indicator {
font-size: 87.5%;
margin-inline-end: .5em;
flex-shrink: 0;
align-self: flex-start;
height: calc(1.5em - 1px); /* subtract border from size */
width: calc(1.5em - 1px); /* subtract border from size */
}
.ux-custom-control.ux-custom-radio .ux-control-indicator {
display: block;
border-radius: 1.5em;
box-shadow: inset 0 0 0 .25em var(--ux-2b7365, var(--ux-1nu8itt, white));
}
.ux-custom-control label {
margin: 0;
font-family: var(--ux-1ovvts5, var(--ux-9wtaa3, sans-serif));
font-size: var(--ux-53fuhi, var(--ux-oc0naw, 1rem));
font-weight: var(--ux-1vxl8j7, var(--ux-3z6ccd, 400));
line-height: var(--ux-if3mvl, var(--ux-hm1ty7, 1.5));
}
.ux-custom-control .ux-custom-target {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.ux-custom-control .ux-custom-target.ux-button > * {
pointer-events: initial;
}
.ux-custom-control .ux-custom-target:not(.ux-button) {
margin: 0 1rem 1rem 0;
}
.ux-custom-control .ux-custom-target[disabled] {
cursor: not-allowed;
opacity: .4;
}
.ux-custom-control .ux-custom-target > input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: inherit;
height: 1.25em;
width: 1.25em;
}
.ux-custom-control .ux-custom-target > input + .ux-control-indicator {
border: 1px solid var(--ux-1bpnz67, var(--ux-by6mab, lightgray));
background-color: var(--ux-2b7365, var(--ux-1nu8itt, white));
}
.ux-custom-control .ux-custom-target > input + .ux-control-indicator use {
display: none; /** Dark mode extensions clobber the fill above */
}
.ux-custom-control .ux-custom-target > input:checked + .ux-control-indicator {
border: 1px solid var(--ux-jv8jyp, var(--ux-f7kpiw, blue));
background-color: var(--ux-jv8jyp, var(--ux-f7kpiw, blue));
}
.ux-custom-control .ux-custom-target > input:checked + .ux-control-indicator use {
fill: var(--ux-1aoramc, var(--ux-1no0ng9, white));
display: initial; /** Dark mode extensions clobber the fill above */
}
.ux-custom-control .ux-custom-target > input:focus + svg.ux-control-indicator {
outline: var(--uxp-focus-visible-outline);
}
/* Form validation */
.has-danger .form-text {
color: var(--ux-16d2ul, var(--ux-1fhc073, red));
}
.has-danger .form-control {
color: inherit;
border-color: var(--ux-1zfisa, var(--ux-1fhc073, red));
background-color: inherit;
box-shadow: none;
}
.has-danger .form-control:focus {
border-color: currentColor;
color: var(--ux-1hgz900, var(--ux-1im0suq, blue));
}
/* Inline forms
Make forms appear inline(-block) by adding the '.form-inline' class. Inline
forms begin stacked on extra small (mobile) devices and then go inline when
viewports reach <768px.
Requires wrapping inputs and labels with '.form-group' for proper display of
default HTML form controls and our custom form controls (e.g., input groups). */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;;
}
/* fieldset doesn't take flex properties, need to wrap in an additional element */
.form-inline .form-element-flex {
display: flex;
}
/* Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height) */
.form-inline label {
margin-right: .5rem;
font-family: var(--ux-x3pz72, var(--ux-15ks663, sans-serif));
font-size: var(--ux-pi1dfh, var(--ux-16aixzc, 1rem));
font-weight: var(--ux-lmsau0, var(--ux-aarlu5, 400));
line-height: var(--ux-1il6wsa, var(--ux-h93mi7, 1.5));
}
/* Kick in the inline */
@media (min-width: 520px) {
.form-inline { /* Allow folks to *not* use '.form-group' */ /* Re-override the feedback icon. */;
}
.form-inline label {
display: inline-flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 0;
}
.form-inline .form-group {
margin-bottom: 0;
}
.form-inline .form-group + .form-group {
margin-left: 1em;
}
.form-inline .form-control {
display: inline-block;
width: auto; /* Prevent labels from stacking above inputs in '.form-group' */
vertical-align: middle;
}
.form-inline .input-group {
width: auto;
}
.form-inline .form-control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
form:not(.form-inline) > .form-group {
width: 100%;
}
.form-element-flex {
width: 100%;
}
/* Labels */
.form-control-label {
padding: 0;
margin-bottom: .3125rem;
font-family: var(--ux-x3pz72, var(--ux-15ks663, sans-serif));
font-size: var(--ux-pi1dfh, var(--ux-16aixzc, 1rem));
font-weight: var(--ux-lmsau0, var(--ux-aarlu5, 400));
line-height: var(--ux-1il6wsa, var(--ux-h93mi7, 1.5));
}
/* Textarea */
textarea.form-control {
height: auto;
padding-top: .5rem;
padding-bottom: .5rem;
}
/* Form messages */
.form-text {
display: block;
margin-top: .25rem;
margin-bottom: .75rem;
font-family: var(--ux-2wulf2, var(--ux-1gutwvn, sans-serif));
font-size: var(--ux-1ubi4zh, var(--ux-p4h24g, .875rem));
font-weight: var(--ux-2yoymw, var(--ux-g9ierp, 400));
line-height: var(--ux-1qki3ui, var(--ux-1dje42v, 1.5));
color: var(--ux-1leynsm, black);
}
/* Required */
.req {
font-family: var(--ux-1u8mf49, var(--ux-1067ph9, sans-serif));
font-size: var(--ux-772dne, var(--ux-vvspv2, 1rem));
font-weight: var(--ux-e06sn3, var(--ux-sm2he3, 400));
line-height: var(--ux-1rudonx, var(--ux-1w31hux, 1.5));
color: var(--ux-1vjximi, var(--ux-1fhc073, red));
}
.ux-search {
margin-bottom: 1.5rem;
z-index: unset;
}
.ux-search fieldset {
display: flex;
flex-grow: 1;
}
.ux-search .form-group {
margin-bottom: 0;
}
.ux-search .form-group input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.ux-search .form-group label {
display: none;
}
.ux-search .input-group-btn .btn,
.ux-search .form-element-clear {
display: inline-flex;
align-items: center;
}
.ux-search .form-control::-ms-clear {
display: none;
}
.ux-search .ux-search-list-container {
text-align: left;
position: absolute;
width: calc(100% - 1px); /* px for border */
z-index: 1030;
top: calc(100% - 1px); /* px for border */
left: 0;
overflow-y: auto;
max-height: 20rem;
display: block;
float: none;
}
.ux-search .form-control + .form-element-clear,
.ux-search .form-control.form-control-lg + .form-element-clear {
z-index: 1033;
}
.ux-search .input-group-btn {
vertical-align: top;
}
.ux-search .input-group-btn > button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ux-search .btn-icon {
min-width: 0;
}
.ux-search .ux-search-lookahead {
display: none;
pointer-events: none;
}
.ux-search .ux-search-lookahead-remainder {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
height: 1.25rem;
}
.ux-search.open .form-control {
z-index: 1031;
}
.ux-search.open .ux-search-lookahead {
display: flex;
text-align: start;
justify-content: flex-start;
position: absolute;
margin: 0;
z-index: 1032;
border: 0;
padding: 0;
height: 0;
top: .625rem;
left: .875rem;
right: .875rem;
opacity: .5;
user-select: none;
}
.ux-tel-input {
padding-left: 8.75rem !important;
direction: ltr/*rtl:ignore*/;
text-align: left;
}
.ux-tel-container {
position: relative;
}
.ux-tel-container .form-group label {
display: none;
}
.ux-tel-btn {
position: absolute;
height: calc(2.75rem - .1875rem);
min-height: calc(2.75rem - .1875rem);
top: .0625rem;
left: .0625rem;
border: 0;
border-right: 1px solid var(--ux-s4wx57, var(--ux-by6mab, lightgray));
padding: .625rem .875rem .3125rem;
min-width: auto;
z-index: 1;
}
.ux-tel-btn:hover,
.ux-tel-btn:focus {
color: inherit;
padding: .625rem .875rem .3125rem;
}
.ux-tel-btn .chevron-down-icon svg {
margin: 0 0 0 1rem;
}
.ux-tel-btn:focus {
border-right-style: solid;
}
.ux-tel-btn-danger {
border-right-color: var(--ux-1hei7eo, var(--ux-1fhc073, red));
}
.dial-code {
direction: ltr/*rtl:ignore*/;
unicode-bidi: bidi-override/*rtl:ignore*/;
}
.ux-quantity-selector > label {
display: block;
}
.ux-quantity-selector .form-control {
display: inline-flex;
padding: 0;
width: auto;
}
.ux-quantity-selector .ux-quantity-selector-text {
text-align: center;
max-width: 6ch;
margin-top: -1px;
margin-bottom: -1px;
/* autoprefixer: off */
-moz-appearance: textfield;
/* autoprefixer: on */
}
.ux-quantity-selector .ux-quantity-selector-text::-webkit-inner-spin-button {
display: none;
}
/* Criteria Styles */
.ux-criteria {
background: var(--ux-1k50ixh, var(--ux-cao06b, white));
border-left: 1px solid var(--ux-y66o47, var(--ux-10jlyin, blue));
border-right: 1px solid var(--ux-y66o47, var(--ux-10jlyin, blue));
border-bottom: 1px solid var(--ux-y66o47, var(--ux-10jlyin, blue));
display: flex;
padding: .5rem 1rem 1rem;
transform-origin: 0 0;
transform: scaleY(0);
}
.ux-criteria.ux-criteria-relative {
transform: scaleY(1);
}
.ux-criteria.standalone {
border-top: 1px solid var(--ux-y66o47, var(--ux-10jlyin, blue));
transform: scaleY(1);
opacity: 1;
height: auto;
transition: all .3s ease-out;
margin-bottom: 1.5rem;
}
.ux-criteria.standalone.valid {
transition: all .3s ease-out .1s;
transform: scaleY(0);
opacity: 0;
height: 0;
}
.ux-criteria-content {
width: 100%;
}
.fade-in {
transition: opacity .2s ease-out .3s;
opacity: 1;
}
.fade-out {
opacity: 0;
transition: opacity .2s ease-out;
}
.ux-criteria-enter {
transform: scaleY(1);
transition: transform .3s ease-out;
}
.ux-criteria-enter-done {
transform: scaleY(1);
height: auto;
}
.ux-criteria-exit {
transform: scaleY(0);
transition: transform .3s ease-out .1s;
}
.ux-criteria-exit-done {
transform: scaleY(0);
opacity: 0;
height: 0;
}
.ux-criteria-connect {
position: relative;
}
.ux-criteria-connect .ux-criteria {
top: 100%;
width: 100%;
position: absolute;
z-index: 1000;
box-shadow: 0px 0px 12px rgba(17, 17, 17, 0.07),
0px 4px 4px rgba(17, 17, 17, 0.1),
0px 6px 8px rgba(17, 17, 17, 0.07);
}
.ux-criteria-connect.ux-criteria-relative {
position: relative;
}
.ux-criteria-header.title {
font-family: var(--ux-f6zd05, var(--ux-15ks663, sans-serif));
font-size: var(--ux-1ld6fs6, var(--ux-16aixzc, 1rem));
font-weight: var(--ux-1l7je3n, var(--ux-aarlu5, 400));
line-height: var(--ux-16vy70h, var(--ux-h93mi7, 1.5));
color: var(--ux-171s706, var(--ux-1leynsm, black));
border-bottom: 1px solid var(--ux-xqdm01, var(--ux-97h3vl, lightgray));
margin: .75rem 0 1rem;
padding-bottom: .5rem;
text-transform: none;
line-height: 24px;
font-weight: 850;
font-size: 16px;
}
/* Separate criteria items */
.ux-criteria-rule {
min-height: 32px;
align-items: center;
display: flex;
opacity: 1;
overflow: hidden;
max-height: 6.25rem;
}
.ux-criteria-rule > .icon {
color: var(--ux-asxrqp, var(--ux-1nk9qds, black));
background-color: var(--ux-1ro0ijo, var(--ux-1kpdpz9, white));
border-color: var(--ux-1sezxba, var(--ux-1p4dc1z, lightgray));
display: flex;
padding-left: .25rem;
}
.ux-criteria-rule > .icon svg {
width: 1.25rem;
}
.ux-criteria-rule > .icon.success {
color: var(--ux-o034vm, var(--ux-f7kpiw, blue));
background-color: var(--ux-1a6cjk7, var(--ux-1no0ng9, white));
border-color: var(--ux-18qj45h, var(--ux-1no0ng9, white));
}
.ux-criteria:not(.ux-criteria-relative) .ux-criteria-rule {
transition: max-height .3s ease-out, opacity .3s ease-out, margin-top .3s ease-out;
}
.ux-criteria:not(.ux-criteria-relative) .ux-criteria-rule.ux-criteria-rule-checked {
opacity: .4;
}
.ux-criteria-rule-text {
font-family: var(--ux-1r28wfa, var(--ux-15ks663, sans-serif));
font-size: var(--ux-12zlqr9, var(--ux-16aixzc, 1rem));
font-weight: var(--ux-1bul8sw, var(--ux-aarlu5, 400));
line-height: var(--ux-16zkbw2, var(--ux-h93mi7, 1.5));
color: var(--ux-kt6945, var(--ux-1leynsm, black));
display: flex;
flex-grow: 1;
padding-left: .75rem;
}
/* Input group */
.input-group {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
z-index: 1;
}
.input-group label { /* this is to hide the label that is breaking input-groups */
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.input-group .form-control {
/* Ensure that the input is always above the *appended* addon button for
proper border colors. */
position: relative;
z-index: 2;
flex: 1 1 auto;
margin-bottom: 0;
}
/* Bring the "active" form control to the front */
.input-group .form-control:focus,
.input-group .form-control:active,
.input-group .form-control:hover {
z-index: 4;
}
.input-group-btn,
.input-group .form-control {
display: flex;
align-items: center;
}
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
/* Reset rounded corners */
.input-group .form-control:not(:last-child),
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group > .btn,
.input-group-btn:not(:last-child) > .dropdown-toggle,
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group .form-control:not(:first-child),
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group > .btn,
.input-group-btn:not(:first-child) > .dropdown-toggle,
.input-group-btn:not(:last-child) > .btn:not(:first-child),
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
/* Button input groups */
.input-group-btn {
position: relative;
align-items: stretch;
z-index: 3;
flex-shrink: 0;
/* Jankily prevent input button groups from wrapping with 'white-space' and
'font-size' in combination with 'inline-block' on buttons. */
font-size: 0;
white-space: nowrap;
}
/* Negative margin for spacing, position for bringing hovered/focused/actived
element above the siblings. */
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-left: -1px;
}
/* Bring the "active" button to the front */
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active,
.input-group-btn > .btn:hover {
z-index: 3;
}
.input-group-btn:first-child > .btn + .btn {
margin-left: 0;
}
/* Negative margin to only have a single, shared border between the two */
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group {
margin-right: -1px;
}
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group {
z-index: 2;
/* remove nagative margin to solve overlapping issue with button. */
margin-left: 0;
}
/* When input is first, overlap the right side of it with the button(-group) */
.input-group-btn:not(:first-child) > .btn:first-child,
.input-group-btn:not(:first-child) > .btn-group:first-child {
margin-left: -1px;
}
/* Because specificity */
.input-group-btn:not(:first-child) > .btn:focus,
.input-group-btn:not(:first-child) > .btn:active,
.input-group-btn:not(:first-child) > .btn:hover,
.input-group-btn:not(:first-child) > .btn-group:focus,
.input-group-btn:not(:first-child) > .btn-group:active,
.input-group-btn:not(:first-child) > .btn-group:hover {
z-index: 3;
}
.input-group-btn.dropdown {
display: table-cell;
}
.input-group-btn .btn {
white-space: nowrap;
}