[data-cgkit-tooltip] {
display: inline-block;
position: relative;
cursor: pointer;
padding: 4px;
} [data-cgkit-tooltip]:before {
content: attr(data-cgkit-tooltip);
display: none;
position: absolute;
background: #000000;
color: #fff;
padding: 5px 10px;
font-size: 13px;
line-height: 1.1;
min-width: max-content;
text-align: center;
border-radius: 4px;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 100%;
margin-bottom: 6px;
} [data-cgkit-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: 50%;
margin-left: -6px;
bottom: calc(100% + 1px);
border-width: 6px 6px 0;
border-top-color: #000;
} [data-cgkit-tooltip]:hover:before,
[data-cgkit-tooltip]:hover:after {
display: block;
z-index: 50;
}.commercekit-inventory { display: inline-block; width: 45%; margin-bottom: 15px; vertical-align: top; line-height: 1.25; position: relative; }
.commercekit-inventory.cgkit-inventory-shortcode { width: 100%; }
.commercekit-inventory span { font-size: 13px; }
.commercekit-inventory .progress-bar { float: none; position: relative; width: 100%; height: 10px; margin-top: 10px; padding: 0; border-radius: 5px; background-color: #e2e2e2; transition: all 0.4s ease; }
.commercekit-inventory .progress-bar span { position: absolute; top: 0; left: auto; width: 28%; height: 100%; border-radius: inherit; background: #f5b64c; transition: width 3s ease; }
.commercekit-inventory .progress-bar.full-bar span { width: 100% !important; }
.commercekit-inventory .cki-variation { width: 100%; }
@media (max-width: 500px) { .commercekit-inventory { display: block; margin-top: 20px; width: 100%; border: none; } 
.commercekit-inventory .cki-variation { position: relative; } }