span.field {
    position: relative;
    color: var(--span_field);
    margin-right: 8px;

    &.indent {
        margin-left: 8px;
    }

    &.field_legacy {
        margin-right: 0px;
    }
}

span.field_value {
    color: var(--span_field_value);
    word-wrap: break-word;
}

.field .tips {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 25px;
    left: -8%;
    width: 70vw;
    max-width: 365px;
    z-index: 1;
    font-family: 'open-sans', 'arial';
    background-color: var(--field_tips_bg);
    color: var(--field_tips_color);
    font-size: 13px;
    border: var(--field_tips_border) 1px solid;
    border-radius: 10px;
    box-shadow: 0 1rem 30px 5px var(--field_tips_shadow);
    pointer-events: none;
    transition: 0.15s ease 0.0s;

    &::before {
        content: "";
        position: absolute;
        inset: -30px;
        background: transparent;
        border-radius: 10px;
        cursor: help;
        z-index: -1;
    }

    .title {
        display: block;
        background: var(--field_tips_title_bg);
        padding: 10px 10px 10px 10px;
        border-radius: 8px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        text-align: left;
        font-size: 1.2em;
        font-weight: normal;
    }

    .text {
        display: block;
        font-size: 12px;
        line-height: 1.4em;
        font-weight: normal;
        padding: 15px 10px 15px 10px;
    }
}

.box.text p:has(.tips):hover .tips {
    opacity: 1;
    visibility: visible;
    transition: 0.2s ease 0.5s;
    pointer-events: all;
}

.field .tips_dot {
    cursor: help;
    border-bottom: 1px dotted var(--field_tips_dot_border);
    padding-bottom: 2.5px;
}

@media all and (max-width: 1000px) {
    .field .tips_dot {
        border-bottom: 1px dashed var(--field_tips_dot_border);
    }
}

.field .tips_dot:hover,
.field:has(.tips:hover) .tips_dot {
    border-bottom: 1px solid var(--field_tips_dot_border);
}