@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

.tippy-box[data-theme~=timely] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background-color: hsl(var(--primary) / 0.9);
}

.tippy-box[data-theme~=timely]>.tippy-arrow {
    width: 14px;
    height: 14px
}

.tippy-box[data-theme~=timely][data-placement^=top]>.tippy-arrow:before {
    border-width: 7px 7px 0;
    border-top-color: hsl(var(--primary) / 0.9);
}

.tippy-box[data-theme~=timely][data-placement^=bottom]>.tippy-arrow:before {
    border-width: 0 7px 7px;
    border-bottom-color: hsl(var(--primary) / 0.9);
}

.tippy-box[data-theme~=timely][data-placement^=left]>.tippy-arrow:before {
    border-width: 7px 0 7px 7px;
    border-left-color: hsl(var(--primary) / 0.9);
}

.tippy-box[data-theme~=timely][data-placement^=right]>.tippy-arrow:before {
    border-width: 7px 7px 7px 0;
    border-right-color: hsl(var(--primary) / 0.9);
}

.tippy-box[data-theme~=timely]>.tippy-backdrop {
    background-color: hsl(var(--primary) / 0.9);
}

.tippy-box[data-theme~=timely]>.tippy-svg-arrow {
    fill: hsl(var(--primary) / 0.9);
}

/* LOGOUT */

.tippy-box[data-theme~=logout] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background-color: #fa2e3ca2
}

.tippy-box[data-theme~=logout]>.tippy-arrow {
    width: 14px;
    height: 14px
}

.tippy-box[data-theme~=logout][data-placement^=top]>.tippy-arrow:before {
    border-width: 7px 7px 0;
    border-top-color: #fa2e3ca2
}

.tippy-box[data-theme~=logout][data-placement^=bottom]>.tippy-arrow:before {
    border-width: 0 7px 7px;
    border-bottom-color: #fa2e3ca2
}

.tippy-box[data-theme~=logout][data-placement^=left]>.tippy-arrow:before {
    border-width: 7px 0 7px 7px;
    border-left-color: #fa2e3ca2
}

.tippy-box[data-theme~=logout][data-placement^=right]>.tippy-arrow:before {
    border-width: 7px 7px 7px 0;
    border-right-color: #fa2e3ca2
}

.tippy-box[data-theme~=logout]>.tippy-backdrop {
    background-color: #fa2e3ca2
}

.tippy-box[data-theme~=logout]>.tippy-svg-arrow {
    fill: #fa2e3ca2
}