.tooltip {
    position: relative;
}

.tooltip-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    width: 100%;
}

    .tooltip-trigger:hover ~ .tooltip-drop {
        opacity: 1;
    }

    .tooltip-trigger:hover.tooltip-icon {
    }

    .tooltip-trigger:hover.input-icon {
        color: #060b7a;
    }

.tooltip.tooltip-top .tooltip-trigger:hover ~ .tooltip-drop, .tooltip.tooltip-bottom .tooltip-trigger:hover ~ .tooltip-drop {
    transform: translate(-50%, 0);
}

.tooltip.tooltip-top .tooltip-drop, .tooltip.tooltip-bottom .tooltip-drop {
    left: 50%;
    transform: translate(-50%, 0.625rem);
}

    .tooltip.tooltip-top .tooltip-drop:before, .tooltip.tooltip-bottom .tooltip-drop:before {
        left: 50%;
    }

.tooltip.tooltip-top .tooltip-drop {
    bottom: calc(100% + 0.625rem);
}

    .tooltip.tooltip-top .tooltip-drop:before {
        top: 100%;
        transform: translate(-50%, 0);
    }

.tooltip.tooltip-bottom .tooltip-drop {
    top: calc(100% + 0.625rem);
}

    .tooltip.tooltip-bottom .tooltip-drop:before {
        bottom: 100%;
        transform: translate(-50%, 0) rotate(180deg);
    }

.tooltip.tooltip-left .tooltip-trigger:hover ~ .tooltip-drop, .tooltip.tooltip-right .tooltip-trigger:hover ~ .tooltip-drop {
    transform: translate(0, -50%);
}

.tooltip.tooltip-left .tooltip-drop, .tooltip.tooltip-right .tooltip-drop {
    top: 50%;
}

    .tooltip.tooltip-left .tooltip-drop:before, .tooltip.tooltip-right .tooltip-drop:before {
        top: 50%;
    }

.tooltip.tooltip-left .tooltip-drop {
    right: calc(100% + 0.625rem);
    transform: translate(-0.25rem, -50%);
}

    .tooltip.tooltip-left .tooltip-drop:before {
        left: 100%;
        transform: translate(0, -50%) rotate(-90deg);
    }

.tooltip.tooltip-right .tooltip-drop {
    left: calc(100% + 0.625rem);
    transform: translate(0.25rem, -50%);
}

    .tooltip.tooltip-right .tooltip-drop:before {
        right: 100%;
        transform: translate(0, -50%) rotate(90deg);
    }

.tooltip-drop {
    position: absolute;
    max-width: 200px;
    width: max-content;
    opacity: 0;
    padding: 0.75rem 0.875rem;
    background-color: #060b7a;
    font-size: 0.875rem;
    text-align: left;
    z-index: 1;
    transition: all 0.15s ease-in-out;
    border-radius: 0.188rem;
    color: #fff;
    pointer-events: none;
}

    .tooltip-drop::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 0.375rem solid transparent;
        border-top-color: #060b7a;
    }

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 16px;
    font-size: 0.875rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.188rem;
}
.proibido {
    cursor: not-allowed;
    opacity: 0.5;
}