/* headlines */
.page-header .row h1,
.page-header .row .h1 {
    margin-top: 0;
}

a, label, .pointer {
    cursor: pointer;
}

template {
    display: none;
}

.alert-info a {
    color: rebeccapurple;
}

/* fix bootstrap color */
hr {
    border-top: 1px solid #aaa;
}

body {
    background-color: #eee;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.wait, body.wait * {
    cursor: wait !important;
}

body > header {
    height: 4rem;
    background-color: white;
    border-bottom: 1px solid #ddd;
    display: flex;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

body > footer {
    background-color: #f5f5f5;
    display: flex;
    height: 4rem;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    border-top: 1px solid #ddd;
}

#mainnav {
    display: flex;
    margin-right: auto;
}

.dropdown-menu {
    margin: 0;
}

.page {
    display: flex;
    flex-grow: 1;
}

.page main {
    flex: 1 1;
    display: flex;
}

#page-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#content-left,
#content-right {
    width: 250px;
    background-color: white;
}

#content-left {
    border-right: 1px solid #ccc;
}

#content-right {
    border-left: 1px solid #ccc;
}

#content-center {
    flex-grow: 1;
    padding: 20px 0;
}

#page-content > .page-header {
    margin-bottom: 0;
}

.store-choosen, .store-choosen option[selected] {
    background-color: orange;
    font-weight: bold;
}

.store-choosen option, .store-choosen optgroup {
    background-color: white;
}

.table-bordered > thead > tr > th {
    background-color: #ccc;
}

.nav > li > a {
    border-radius: 0;
}

.nav > li.active > a {
    background: linear-gradient(to bottom, #ddd, #eee);
    border-bottom-color: #eee;
    cursor: pointer !important;
}

/* margin to sticky footer */
body > .container:last-of-type {
    margin-bottom: 100px;
}

/* Doesnt work well, tried also input:invalid:not(input[value=""])
input[value]:invalid {
    border: 1px solid red;
    box-shadow: 0 0 10px red;
}
*/

.container.full {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.page-header {
    border-bottom: 1px solid #ccc;
    padding: 0 20px;
    margin-top: 10px;
}

.page-header small a {
    margin-left: 8px;
}
  

/* forms */
label.required::after {
    content: ' *';
    color: red;
}

span.required {
    color: red;
    margin-left: 2px;
}

.js_input_observe.input-changed {
    border-color: orange;
}

.js_not_clickable {
  cursor: default;
}

select.input-xs {
    border-radius: 3px;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    padding: 0 5px;
}

/* tables */
.panel.table { border: none; }

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(2n+1) { background-color: #f9f9f9; }
.table-striped > tbody > tr:nth-of-type(2n) { background-color: #fff; }
.table-striped > tbody > tr.new:nth-of-type(2n+1) { background-color: #ccffcc; }
.table-striped > tbody > tr.new:nth-of-type(2n) { background-color: #e6ffe6; }
.table-striped > tbody > tr.removed:nth-of-type(2n+1) { background-color: #ffcccc; display: none; }
.table-striped > tbody > tr.removed:nth-of-type(2n) { background-color: #ffe6e6; display: none; }

.body-striped tbody:nth-child(odd) { background-color: #f9f9f9; }
.body-striped tbody:nth-child(even) { background-color: #fff; }
.body-striped tbody.new:nth-child(odd) { background-color: #ccffcc; }
.body-striped tbody.new:nth-child(even) { background-color: #e6ffe6; }
.body-striped tbody.removed:nth-child(odd) { background-color: #ffcccc; display: none; }
.body-striped tbody.removed:nth-child(even) { background-color: #ffe6e6; display: none; }

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr.new:hover,
.table-hover > tbody > tr.removed:hover,
.table-hover > tbody > tr.new.removed:hover,
.table-hover.body-striped > tbody:hover,
.table-hover.body-striped > tbody.new:hover,
.table-hover.body-striped > tbody.removed:hover,
.table-hover.body-striped > tbody.new.removed:hover {
    background-color: #ccc;
}

tr.clickable-row {
    cursor: pointer;
}

table tr td label {
    white-space: nowrap;
}

.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th {
    vertical-align: middle;
}

.form-control[readonly] {
    pointer-events: none;
}

.option-values .form-control {
    border-radius: 0;
    font-size: 12px;
    height: 25px;
    padding: 0 5px;
}

table.option-values thead th {
    vertical-align: top;
    background-color: #ccc;
}

th.price { width: 90px; }
th.price.large { width: 120px; }
th.price-type { width: 90px; }
th.sort-order { width: 80px; }
th.desc { width: 160px; }
th.deposit { width: 80px; }

.overview-wrapper {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}

.overview-wrapper table {
    margin-bottom: 0;
}

#product-overview tr,
#template-overview tr,
#options-overview tr {
    height: 50px;
}

#product-overview .col-desc span {
    overflow: hidden;
    border: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* buttons */
.btn.pull-right {
    margin-left: 5px;
}

.input-group-sm .input-group-addon {
    height: 25px;
    padding: 1px 5px 0;
}

.input-group-sm .input-group-btn .btn.btn-default {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    height: 25px;
    padding: 3px 5px;
}

.input-group-addon:first-child {
    border-radius: 0;
}

/* scrollspy */
#scrollspy {
    width: 300px;
}

#scrollspy .nav {
    background-color: transparent;;
}

#scrollspy .nav .nav {
    display: none;
}
#scrollspy .nav > .active > ul {
    display: block;
}
#scrollspy .nav-pills > li.active > a,
#scrollspy .nav-pills > li.active > a:focus {
    color: black;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #f5f5f5 0px, #e8e8e8 100%) repeat scroll 0 0;
    border: 1px solid #ddd;
}

#scrollspy.affix-top {
    position: absolute;
    top: 100px;
}

#scrollspy ul ul {
    padding-left: 10px;
}

/* popover */
.popover-title {
    padding: 7px;
}

.popover-content {
    padding: 0;
}

.popover-content .nav > li > a {
    padding: 7px;
    white-space: nowrap;
    color: inherit;
}

.popover-content .nav > li:not(:last-child) {
    border-bottom: 1px solid #ebebeb;
}

.popover-content .nav-stacked > li + li {
    margin: 0;
}

/* glyphicons */
.glyphicon.glyphicon-remove {
    color: #d9534f;
}

.option-values .glyphicon.glyphicon-repeat {
    color: #4caf50;
}

.glyphicon.glyphicon-ok,
.glyphicon.glyphicon-plus {
    color: #5cb85c;
}

a:hover .glyphicon.glyphicon-plus,
a:focus .glyphicon.glyphicon-plus {
    color: #419641;
}

.glyphicon.glyphicon-pencil {
    color: #5f5f5f;
}

a:hover .glyphicon.glyphicon-pencil,
a:focus .glyphicon.glyphicon-pencil {
    color: #66afe9;
}

/* custom checkbox/radio, needed for input observer */
.c-checkradio {
    display: block;
    margin-bottom: 0;
}

.c-checkradio input[type="checkbox"],
.c-checkradio input[type="radio"] {
    display: none;
    visibility: hidden;
}

.c-checkradio input[type="checkbox"] ~ .c-border {
    position: relative;
    display: block;
    background-color: #fff;
    border: 1px solid #aaa;
    height: 16px;
    width: 16px;
}

.c-checkradio:hover .c-border {
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}

.c-checkradio input[type="checkbox"] ~ .c-border .c-indicator {
    visibility: hidden;
    position: absolute;
    top: 1px;
    left: 1px;
}

.c-checkradio input[type="checkbox"]:checked ~ .c-border .c-indicator {
    visibility: visible;
}

.c-checkradio input[type="checkbox"]:disabled ~ .c-border,
.c-checkradio input[type="radio"]:disabled ~ .c-border,
.disabled.c-checkradio input[type="checkbox"] ~ .c-border,
.disabled.c-checkradio input[type="radio"] ~ .c-border {
    background-color: #eee !important;
    cursor: not-allowed;
}

.c-checkradio input[type="radio"] ~ .c-border {
    position: relative;
    display: block;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 50%;
    height: 16px;
    width: 16px;
}

.c-checkradio input[type="radio"] ~ .c-border .c-indicator {
    visibility: hidden;
    display: block;
    background-color: black;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: transparent;
}

.c-checkradio input[type="radio"]:checked ~ .c-border .c-indicator {
    visibility: visible;
}

.checkbox .c-checkradio input[type="checkbox"] ~ .c-border {
    display: inline-block;
    margin-left: -20px;
    margin-right: 5px;
}

.c-checkradio .glyphicon.glyphicon-ok {
    color: black;
}

/* specific to input-observer */
.c-checkradio input[type="checkbox"].input-changed ~ .c-border {
    border-color: orange;
}

.c-checkradio input[type="checkbox"]:checked.input-changed ~ .c-border .c-indicator {
    color: orange;
}

.c-checkradio input[type="radio"].input-changed ~ .c-border {
    border-color: orange;
}

.c-checkradio input[type="radio"]:checked.input-changed ~ .c-border .c-indicator {
    background-color: orange;
}

.toggle.input-changed {
    box-shadow: 0px 0px 20px orange;
}

/* specific to templates*/
.c-checkradio .c-border {
    margin: auto;
}

.panel-body.option-panel {
    position: relative;
}

.panel.removed {
    background-color: #ffcccc;
    display: none;
}

.form-control.store-views {
    border-radius: 0;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    border-top: none;
    border-bottom: none;
}

#template_extras {
    line-height: 0.5em;
}

#template_extras label {
    font-size: 0.5em;
    font-weight: 400;
    margin: 0;
}

/* account */
.form-signin {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8rem;
}

.form-signin .panel-title {
    text-align: center;
    font-weight: bold;
}

/* option template */
.form-control.input-sm.sort-order { width: 100px; }
.form-control.input-sm.limit { width: 60px; }

/* modalbox */
.modal {
    margin-top: 60px;
}

.modal-title {
    font-weight: 600;
}

.modal-body p:last-child {
    margin: 0;
}

li label {
    font-weight: 400;
    margin-bottom: 0;
}

/* children select */
#children-select-list > li > ul {
    margin-left: 35px;
}

#children-select-list input[type="checkbox"],
#children-select-list li > span {
    margin-right: 5px;
    cursor: pointer;
}

#children-select-list li > span
{
    color: #5f5f5f;
}

#children-select-list li > span:hover
{
    color: #66afe9;
}

#children-select-list > li.opened > ul {
    display: block;
}

#children-select-list > li > ul {
    display: none;
}

#children-select-list li.opened > span.glyphicon-triangle-right,
#children-select-list li > span.glyphicon-triangle-bottom {
    display: none;
}


#children-select-list li > span.glyphicon-triangle-right,
#children-select-list li.opened > span.glyphicon-triangle-bottom {
    display: inline;
}

#saver {
    position: fixed;
    top: 4rem;
    right: 0;
    padding: 10px 10px 10px 15px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background-color: #ddd;
    visibility: hidden;
    z-index: 10000;
    height: 6rem;
    display: flex;
    gap: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.flip {
  -moz-transform: scaleX(-1);    /* Gecko */
  -o-transform: scaleX(-1);      /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform: scaleX(-1);         /* Standard */
  filter: FlipH;                 /* IE 6/7/8 */
}

@keyframes highlightOut {
    from {background-color: red}
}

.hOut {
    -webkit-animation: highlightOut 2s;
    -moz-animation: highlightOut 2s;
    -o-animation: highlightOut 2s;
    animation: highlightOut 2s;
}


.option-error {
    cursor: pointer;
    font-weight: bold;
}

.option-error:hover {
    color: #ff5733;
}

.js_box_color {
    padding: 2px;
}

.js_filter,
.js_filter_status,
.js_filter_outOfStock {
    min-width: 100%;
}

.sort-handle {
    cursor: move;
}

.inline-result {
    margin-left: 5px;
}

.row.v-devided > *:not(:first-child) {
    border-left: 1px solid #ccc;
}

/*
    Type: wave (from our spinkit)
*/
.sk-wave {
    width: 50px;
    height: 30px;
    text-align: center;
    font-size: 10px;
}

.sk-wave > div {
    background-color: #fff;
    height: 100%;
    margin: 0 2px;
    width: 3px;
    display: inline-block;

    -webkit-animation: sk-wavedelay 1.2s infinite ease-in-out;
    animation: sk-wavedelay 1.2s infinite ease-in-out;
}

.sk-wave .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-wave .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.sk-wave .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-wave .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-wavedelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-wavedelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

.inline-result .sk-wave {
    height: 16px;
    display: inline-block;
}

.inline-result .sk-wave > div {
    background-color: #337ab7;
    height: 60%;
}

.inline-result + .popover {
    max-width: 512px
}

/*** EDIT GROUP CSS ***/
.table-editgroup th[title] {
    cursor: help;
}

.table-editgroup td, .table-editgroup thead th + th {
    text-align: center;
}

.table-editgroup thead.store-group {
    background-color: lavender;
}

.editgroup-price, .table-editgroup .toggle {
    margin-right: 10px;
    width: 75px !important;
}

.editgroup-info {
    margin-right: 10px;
    width: 120px !important;
}

/* expandable lists */
li.js_expandable > span.js_expander.open {display: inline-block;}
li.js_expandable > span.js_expander.shrink {display: none;}
li.js_expandable.opened > span.js_expander.open {display: none;}
li.js_expandable.opened > span.js_expander.shrink {display: inline-block;}
li.js_expandable > ul {display: none;}
li.js_expandable.opened > ul {display: block;}

/* --- New Option Edit View ---*/
.option-edit .nav {
    background-color: transparent;
    border-bottom-color: #ccc;
}

.option-edit .nav-tabs > li.tab > a {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff, #ddd) repeat scroll 0 0;
    border-color: #ccc;
    border-radius: 10px 10px 0 0;
    margin-top: 6px;
    padding: 7px 12px;
}

.option-edit .nav-tabs > li.tab.active > a {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #ddd, #fff) repeat scroll 0 0;
    border-bottom-color: #fff;
    margin-top: 0;
    padding: 10px 15px;
}

.option-edit .nav-tabs > li.navbar-brand {
    height: auto;
    padding: 11px;
}

.tab-content {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: none;
    margin-bottom: 10px;
}

.tab-content.panel {
    border-radius: 0;
}

.tab-content.panel .panel-body {
    position: relative;
}

.panel table {
    margin-bottom: 0;
}

.option-values > thead {
    border-top: 2px solid #ddd;
}

.group-table .panel {
    border-radius: 0;
    margin: 5px -5px -5px;
}

.group-table .panel .panel-body {
    position: relative;
}

.option-nav .nav {
    background-color: white;
    border: 1px solid #ccc;
}

.option-nav > li {
    margin-bottom: 10px;
}

.option-nav .nav.collapsed:hover {
    background-color: #e5e5e5;
}

.option-nav .nav.collapsed .opt-tab,
.option-nav .nav.collapsed .actions {
    display: none;
}

.option-nav .nav .opt-tab {
    border-right: 1px solid #ccc;
}

.option-nav .nav .navbar-brand + .opt-tab {
    border-left: 1px solid #ccc;
}

.option-nav .nav .opt-tab:last-child {
    border-right: 1px solid #ccc;
}

.option-nav .nav .opt-tab > a {
    margin-right: 0;
}

.option-nav .nav .opt-tab.active > a {
    border-color: transparent white white;
    border-radius: 0;
    background: none;
}

.close.closeTab {
    margin-left: 5px;
    margin-right: -5px;
    margin-top: -5px;
}


.nav.collapsed:hover .actions {
    display: block;
}

.panel .panel {
    border: medium none;
    box-shadow: none;
    margin: 0;
}

.tab-pane .nav.nav-tabs {
    border-width: 0 0 1px;
}

tr.special-price {
    font-size: 11px;
}

tr.special-price > td:first-child {
    border: none;
}

.form-control.form-inline {
    display: inline-block;
    width: auto;
}

/** BOOTSTRAP SORTABLE FIXES */

table.sortable span.arrow {
    border-color: black transparent transparent transparent;
}

table.sortable span.arrow.up {
    border-color: transparent transparent black transparent;
}

table.sortable span.sign {
    color: black;
    top: 8px;
}

.export-messages {
    background-color: wheat;
    border: 1px solid #d5b780;
    margin: 25px 0;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    border-radius: 4px;
}

.export-messages:empty {
    border: none;
}

.panel-heading[data-toggle="collapse"] { cursor: pointer; }
.panel-heading[data-toggle="collapse"] .glyphicon-chevron-down,
.panel-heading[data-toggle="collapse"] .glyphicon-chevron-right { margin-right: 5px; }
.panel-heading[aria-expanded="false"] .glyphicon-chevron-down {display: none;}
.panel-heading[aria-expanded="true"] .glyphicon-chevron-down {display: inline-block;}
.panel-heading[aria-expanded="true"] .glyphicon-chevron-right {display: none;}
.panel-heading[aria-expanded="false"] .glyphicon-chevron-right {display: inline-block;}

#affected-products {
    overflow-y: hidden;
    border-radius: 0;
}

#affected-products .panel-heading {
    border-radius: 0;
}

#affected-products .panel-body {
    overflow-y: auto;
    height: 100%;
}

#affected-products ul {
    padding-left: 20px;
}

span.color-indicator {
    display: inline-block;
    width: 6px;
    top: 2px;
    bottom: 2px;
    left: 0;
    position: absolute;
}

.js_extended {
    display: none;
}

.toggle.option-status {
    border-radius: 0;
    min-height: 20px;
}

.toggle.option-status .toggle-handle {
    border-radius: 0;
}

#manual ul {
    list-style: none;
}

#manual > ul {
    padding: 0;
}

#manual > ul h2 {
    border-bottom: 1px solid #ccc;
}

#manual > ul ul {
    padding-left: 20px;
}

div.group-group {
    border-top: 1px solid #ccc;
}

div.group-group:first-child {
    border: none;
}

.temp-removed {
    background-color: #ffcccc;
}

.hidden {
    display: none;
}

.disabled-row {
    background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);
    background-repeat: repeat-x;
    border-color: #b92c28;
    color: white !important;
}

.disabled-row a {
    color: lightblue;
}

#product_select_template {
    height: 400px;
}

#prog {
    width: 100%;
}

#ff-warning {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: firebrick;
    color: white;
    text-align: center;
    padding: 10px;
    z-index: 100000;
}

.text-xl {
    font-size: 30px;
}

option.pending,
option.importing {
    color: #666;
    font-style: italic;
}

.status,
.inventory {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

svg {
    fill: currentColor;
}

.status svg,
.inventory svg{
    margin-right: 4px;
}

.status.status-enabled svg,
.inventory.inventory-inStock svg {
    color:#419641;
}

.status.status-disabled {
    color:#b92c28;
}

.inventory.inventory-outOfStock {
    color: orange;
}

td[data-value="Deaktiviert"] .status-enabled {
    display: none;
}

td[data-value="Aktiviert"] .status-disabled {
    display: none;
}

td[data-value="Ja"] .inventory-inStock {
    display: none;
}

td[data-value="Nein"] .inventory-outOfStock {
    display: none;
}

option[value="all"] {
    font-style: italic;
}

.table > thead > tr > th.actions {
    vertical-align: top;
}

td.actions svg {
    width: 20px;
    color: inherit;
    padding-top: 5px;
}

tr[data-product-status="disabled"] td.actions .status-disabled {
    display: none;
}

tr[data-product-status="enabled"] td.actions .status-enabled {
    display: none;
}

tr[data-product-inventory="inStock"] td.actions .inventory-inStock,
tr[data-option-inventory="inStock"] td.actions .inventory-inStock {
    display: none;
}

tr[data-product-inventory="outOfStock"] td.actions .inventory-outOfStock,
tr[data-option-inventory="outOfStock"] td.actions .inventory-outOfStock {
    display: none;
}

.site-actions {
    display: flex;
    align-items: baseline;
}

.site-actions form {
    flex-grow: 1;
}

.status {
    text-transform: uppercase;
}

.inventory {
    text-transform: uppercase;
}

.inventory.inventory-inStock {
    display: none;
}

.actions a {
    margin-right: 8px;
}

td.actions {
    white-space: nowrap;
}

.full .table > tbody > tr > td,
.full .table > tbody > tr > th,
.full .table > tfoot > tr > td,
.full .table > tfoot > tr > th,
.full .table > thead > tr > td,
.full .table > thead > tr > th {
    padding: 8px 12px;
}

.actions.changes {
    padding: 0 !important;
    text-align: center;
}

#options-panel {
    overflow-y: hidden;
    border-radius: 0;
}

#options-panel .panel-heading {
    border-radius: 0;
}

#options-panel .panel-body {
    overflow-y: auto;
    height: 100%;
}

#options-panel ul {
    list-style-type: none;
    padding: 0;
}

#options-panel ul li {
    margin-bottom: 2px;
}

.section-header {
    border-bottom: 1px solid #ccc;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #337ab7;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.option-product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option-product-list > * {
    flex: 0 1 256px;
    margin: 0;
    border-radius: 4px !important;
}

dl {
    margin: 0;
}

dl dd:not(:last-child) {
    margin-bottom: 10px;
}

.price-grid {
    display: grid;
    grid-template-columns: 16px minmax(16ch, 1fr) 8ch;
    column-gap: 4px;
    align-items: center;
}

.price-grid > .price {
    justify-self: end;
}

.price-grid > .variation {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.price-grid > .out-of-stock {
    color: orange;
}

#group-list li {
    padding-left: 10px;
    position: relative;
}

#group-list li li {
    padding-left: 16px;
}