.gb-field-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gb-tooltip-icon-bg, #9b96aa);
    color: #fff;
    cursor: help;
    font-size: 0.6875rem;
    line-height: 1;
    vertical-align: middle;
}

.gb-field-tooltip:hover,
.gb-field-tooltip:focus {
    background: var(--gb-tooltip-icon-hover, #7f798f);
    color: #fff;
    outline: 2px solid var(--gb-tooltip-icon-bg, #9b96aa);
    outline-offset: 2px;
}

.popover.gb-field-popover {
    --bs-popover-max-width: 24rem;
    --bs-popover-border-color: var(--gb-tooltip-border, #1d1d1d);
    --bs-popover-border-width: 2px;
    --bs-popover-border-radius: 1.75rem;
    --bs-popover-bg: var(--gb-tooltip-box-bg, #1d1d1d);
    width: min(24rem, calc(100vw - 2rem));
    max-width: 24rem;
    border: 2px solid var(--gb-tooltip-border, #1d1d1d);
    border-radius: 1.75rem;
    background: var(--gb-tooltip-box-bg, #1d1d1d);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

.gb-field-popover .popover-body {
    padding: 1.25rem 1.75rem 1.5rem;
    color: var(--gb-tooltip-text, #fff);
    font-size: 1rem;
    line-height: 1.55;
    white-space: normal;
}

.gb-field-popover .popover-body p {
    margin: 0 0 0.875rem;
}

.gb-field-popover .popover-body p:last-child {
    margin-bottom: 0;
}

.gb-field-popover .popover-body ul,
.gb-field-popover .popover-body ol {
    margin: 0 0 0.875rem;
    padding-left: 1.5rem;
}

.gb-field-popover .popover-body ul:last-child,
.gb-field-popover .popover-body ol:last-child {
    margin-bottom: 0;
}

.gb-field-popover.bs-popover-top>.popover-arrow::after,
.gb-field-popover.bs-popover-top>.arrow::after {
    border-top-color: var(--gb-tooltip-box-bg, #1d1d1d);
}

.gb-field-popover.bs-popover-bottom>.popover-arrow::after,
.gb-field-popover.bs-popover-bottom>.arrow::after {
    border-bottom-color: var(--gb-tooltip-box-bg, #1d1d1d);
}

.gb-field-popover.bs-popover-start>.popover-arrow::after,
.gb-field-popover.bs-popover-left>.arrow::after {
    border-left-color: var(--gb-tooltip-box-bg, #1d1d1d);
}

.gb-field-popover.bs-popover-end>.popover-arrow::after,
.gb-field-popover.bs-popover-right>.arrow::after {
    border-right-color: var(--gb-tooltip-box-bg, #1d1d1d);
}