.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.kotak-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    gap: 6px;

    .prev-comment,
    .next-comment {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border:2px solid #E5E7EB;
        background: #FFF;
        padding: var(--Padding-padding-s, 6px);
        font-weight: 100;
        color: #008F5C;
        transition: background-color 0.2s ease, color 0.2s ease;

        img {
            width: 17px;
            height: 17px;
        }

        &:hover,
        &.selected {
            color: white;
            background: var(--Color-Secondary-secondary, #008F5C);
            border-color: var(--Color-Secondary-secondary, #008F5C);

            img {
                filter: brightness(0) invert(1) brightness(2);
            }
        }
    }
}

.mb-12{
    margin-bottom: 12px;
}

/** Tooltip **/
.tooltip2 {
    position: relative;
    /* display: inline-block; */
    cursor: pointer;
}

/* Tooltip text */
.tooltip2 .tooltip2-text {
    visibility: hidden;
    width: 331px;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: var(--Corner-Radius-corner-m, 8px);
    background: var(--Color-Grayscale-text-color-header, #121212);
    position: absolute;
    bottom: 125%; /* Posisikan di atas elemen */
    left: -100%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    word-wrap: break-word;
    white-space: normal;
    /* z-index: 1000; */
}

/* Tooltip arrow */
.tooltip2 .tooltip2-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Posisikan di bawah tooltip */
    left: 85%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

/* Show the tooltip text when hovering over the tooltip container */
/* .tooltip2:hover .tooltip2-text {
    visibility: visible;
    opacity: 1;
} */
/**End tooltip**/