@media (max-width: 577px) {
    .page-main .page-title-wrapper .page-title span {
        padding-left: 15px;
    }
}

#payment .control._with-tooltip .field-tooltip.toggle .label {
    display: none;
}

#co-shipping-form .control._with-tooltip .field-tooltip.toggle .label {
    display: none;
}

.shipping-address-items .tig-checkout .label {
  text-transform: uppercase;
  font-weight: 600;
  color: #222529;
  display: block;
  margin: 20px 0;
}

.shipping-address-items .tig-checkout .select {
  margin-bottom: 20px;
  background: #ffffff url(/static/frontend/Smartwave/porto/en_US/images/select-bg.svg) no-repeat 99% 49%;
}

.tig-checkout .shipping-address-item.selected-item {
width: 100%;
}

/* Base Styles for the swatch option */
.product-add-form .swatch-option {
    position: relative; /* Needed to position the popover absolutely relative to the swatch */
    overflow: visible;
    /* Other styling for your swatch-option */
}

/* Popover Content */
.product-add-form .swatch-option::after {
  content: attr(data-option-label); /* Set content to the data-option-label attribute */
  position: absolute;
  bottom: calc(100% + 6px); /* Position above the element */
  left: 50%; /* Center the popover */
  transform: translateX(-50%); /* Adjust the centering */
  white-space: nowrap;
  background-color: #ffffff; /* Background color of the popover */
  border: 1px solid #999999; /* Border for the popover */
  border-radius: 0px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 10; /* Make sure it's above other content */
  display: none; /* Hide by default */
}

/* Show Popover and Arrow on Hover */
.product-add-form .swatch-option:hover::before,
.product-add-form .swatch-option:hover::after {
    display: block;
}