[qv-cloak] {
    display: none
}

.ui-selected {
    box-shadow: inset 0 0 0 2px #f00c !important
}

.ui-hover {
    box-shadow: inset 0 0 0 2px #007bffcc
}

img.ui-selected {
    box-shadow: 0 0 0 4px #ff0000e6 !important;
    outline: 3px solid rgba(255, 255, 255, .9) !important;
    outline-offset: 1px !important;
    position: relative !important;
    z-index: 999 !important;
    border: 2px solid rgba(255, 0, 0, .9) !important
}

img.ui-hover {
    box-shadow: 0 0 0 4px #007bffe6 !important;
    outline: 3px solid rgba(255, 255, 255, .9) !important;
    outline-offset: 1px !important;
    position: relative !important;
    z-index: 999 !important;
    border: 2px solid rgba(0, 123, 255, .8) !important
}

body[data-component-labels=true] [data-qv-component=start-web-form],
body[data-component-labels=true] [data-qv-component=thunderbolt],
body[data-component-labels=true] [data-qv-component=ringba-phone-number] {
    position: relative;
    border: 2px solid oklch(51.4% .222 16.935) !important
}

body[data-component-labels=true] [data-qv-component=start-web-form]:before,
body[data-component-labels=true] [data-qv-component=thunderbolt]:before,
body[data-component-labels=true] [data-qv-component=ringba-phone-number]:before {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #c1003a;
    background: oklch(51.4% .222 16.935);
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    z-index: 10;
    white-space: nowrap
}

body[data-component-labels=true] [data-qv-component=thunderbolt]:before {
    content: "Thunderbolt Link"
}

body[data-component-labels=true] [data-qv-component=ringba-phone-number]:before {
    content: "Ringba Phone Number"
}

body[data-component-labels=true] [data-qv-component=start-web-form]:before {
    content: "Start Web Form"
}

.css-selector-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #c1003a;
    background: oklch(51.4% .222 16.935);
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    z-index: 999;
    white-space: nowrap
}

.css-selector-label-image {
    position: absolute;
    top: 10px;
    left: 12px;
    background: #c1003a;
    background: oklch(51.4% .222 16.935);
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    z-index: 999;
    white-space: nowrap
}

.css-selector-label-hover {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #2981d8;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    z-index: 999;
    white-space: nowrap
}

.css-selector-label-hover-image {
    position: absolute;
    top: 10px;
    left: 12px;
    background: #2981d8;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    z-index: 999;
    white-space: nowrap
}

/**
 * Tailwind fix
 */
.hidden {
    display: none !important;
    visibility: hidden !important;
}

.text-lg {
    font-size: var(--text-lg) !important;
    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
}

@media (min-width: 40rem) {
    .sm\:block {
        display: block !important;
        visibility: visible !important;
    }

    .sm\:text-xl {
        font-size: var(--text-xl) !important;
        line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
    }
}

.bg-green-600 {
    background-color: var(--color-green-600) !important;
}

.hover\:bg-green-700:hover {
    background-color: var(--color-green-700) !important;
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold) !important;
}