.tooltip {
    font-size: 12px;
    position: relative;
}

.tooltip.show {
    opacity: 1;
}

/* fade animation*/
.tooltip.fade:after,
.tooltip.fade:before {
    transform: translate(0, -10px);
    transition: all 0.15s ease-in-out;
}

.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
    opacity: 1;
    transform: translate(0, 0);
}

.tooltip-inner {
    white-space: nowrap;
    max-width: none;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    &:empty {
        padding: 0;
    }
}

.placeholder-delete .tooltip-inner {
    background-color: $red-13;
}

.placeholder-delete .arrow::before {
    border-top-color: $red-13;
}

.custom-popup-owners-for-flag {
    .tooltip-inner {
        color: $black-14;
        background-color: $white-2;
        transform: translateY(126%) translateX(-50%) !important;
        width: 130px;
        border-radius: 3px;
        box-shadow: $box-shadow-5;
    }

    .arrow {
        bottom: -18%;
        transform: rotate(180deg);
        left: calc(50% - -2.7rem);
    }

    .tooltip {
        opacity: 0.93 !important;
        width: 0;
    }
}

.custom-popup-owners {
    z-index: 999;

    .tooltip-inner {
        color: $black-14;
        background-color: $white-2;
        transform: translateY(132%);
        z-index: 999;
        box-shadow: $box-shadow-5;
    }

    .arrow {
        bottom: -20%;
        transform: rotate(180deg);
    }

    .tooltip {
        transform: translate(0, -61px) !important;
    }
}

.custom-popup-owners-year {
    z-index: 999;

    .tooltip-inner {
        color: $black-14;
        background-color: $white-2;
        transform: translateY(132%);
        z-index: 999;
        box-shadow: $box-shadow-5;
    }

    .arrow {
        bottom: -20%;
        transform: rotate(180deg);
    }

    .tooltip {
        transform: translate(70px, -61px) !important;
    }
}

.custom-popup-owners-info {
    .tooltip-inner {
        color: $black-14;
        background-color: $white-2;
        transform: translateY(-100%) translateX(-10%);
        width: 200px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        margin-top: 3px;
        box-shadow: $box-shadow-5;
    }

    .tooltip {
        opacity: 0.93;
        width: 0;
    }

    .arrow {
        display: none;
    }

    #phone-inside {
        position: relative;
        right: 26px;
        bottom: 0;
    }
}

.custom-popup-owners-info-at {
    .tooltip-inner {
        color: $black-14;
        background-color: $white-2;
        transform: translateY(-108%) translateX(-7%);
        width: 270px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        box-shadow: $box-shadow-5;
    }

    .tooltip {
        opacity: 1;
        width: 0;
    }

    .arrow {
        display: none;
    }
}

.custom-popup-owners-for-tag {
    .tooltip-inner {
        color: $black-14;
        background-color: $white-2;
        width: 100px;
        border-radius: 3px;
        box-shadow: $box-shadow-5 !important;
    }

    .tooltip {
        top: 5px !important;
    }

    .arrow {
        bottom: -24%;
    }
}

.align-items-flex-start {
    justify-content: center;
    align-items: center;
}

.align-items-flex-end {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-self: flex-end;
    align-items: flex-start;
}

.label-add {
    align-self: flex-start;
}

.fadeInLoad {
    animation: fadeInLoad 0.25s;
}

@keyframes fadeInLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    opacity: 1;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
}

.thisText:hover .fadeIn {
    opacity: 0;
}

.fadeInLoad {
    animation-name: example;
    animation-duration: 0.25s;
}

@keyframes example {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

// tooltip table icons
.tooltip.tooltip-table-icons {
    left: 12px !important;
    opacity: 1;

    .arrow {
        display: none !important;
    }

    .tooltip-inner {
        border-radius: 0 50px 50px 50px;
        background: $app-main-blue;
    }
}

.tooltip.show {
    opacity: 1;
    animation: fadeIn ease 0.5s !important;
    -webkit-animation: fadeIn ease 0.5s !important;
    -moz-animation: fadeIn ease 0.5s !important;
    -o-animation: fadeIn ease 0.5s !important;
    -ms-animation: fadeIn ease 0.5s !important;
}

.ta-tooltip {
    position: absolute;
    font-size: 12px;
    text-align: center;
    color: $white-2;
    line-height: 22px;
    z-index: 999999 !important;
    opacity: 0;
    white-space: nowrap;
    transform: scale(0.7);

    &.ta-tooltip-show {
        opacity: 0.85;
        transform: scale(1);
        padding: 0 12px;
    }

    &.ta-tooltip-bottom-right {
        transform-origin: top left;
        border-radius: 0 15px 15px 15px;
    }

    &.ta-tooltip-bottom-right-corner {
        transform-origin: top left;
        border-radius: 0 15px 15px 15px;
    }

    &.ta-tooltip-bottom-left {
        transform-origin: top right;
        border-radius: 15px 0 15px 15px;
    }
}

@keyframes scaleItem {
    0% {
        transform: scale(0.4);
    }
    100% {
        transform: scale(1);
    }
}

.app-ca-main-tooltip {
    pointer-events: none;
    .tooltip-inner {
        padding: 0;
        background-color: transparent;
        pointer-events: none;

        .tooltip-holder {
            display: flex;
            font-size: 11px;
            line-height: 14px;
            font-weight: 600;
            border-radius: 3px;
            padding: 2px 6px;
            animation: scaleItem 0.3s;
            white-space: normal;
            &:empty {
                padding: 0;
            }
        }
    }
}

.tooltip-arrow {
    display: none !important;
}