.icon-small{
    font-size: 0.75rem;
}
.underline{
    text-decoration: underline !important;
}
.italic, .italic *{
    font-style: italic;
}
.pointer{
    cursor: pointer;
}
.flex-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
.flex-grow{
    flex-grow: 1;
}
.flex-column{display:flex; flex-direction: column}
.flex-row{display:flex; flex-direction: row}
.align-items-stretch{align-items: stretch}
.justify-content-between{display: flex; justify-content: space-between}
.form-control{appearance:auto}
.italic{font-style:italic}
.text-justify{text-align:justify}
.user-avatar{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem
}
.user-avatar-big{
    width: 3rem;
    height: 3rem;
    border-radius: 0.8rem
}
.user-avatar-big img{
    width: 100%;
    height: 100%;
}
@media (min-width: 768px) {
    .align-items-md-start {
        align-items: flex-start;
    }
}
video, img{
    width: 100%;
}
.extralight { font-weight: 200}
.light { font-weight: 300}
.regular { font-weight: 400}
.medium { font-weight: 500}
.semibold { font-weight: 600}
.bold { font-weight: 700}

i{
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    width: 1.25rem;
    aspect-ratio: 1;
}
.fa-spinner {
    visibility: hidden;
    animation: spin 4s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.brand {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    letter-spacing: 0.05rem;
    font-size: 1.75rem !important;
    font-weight: 600;
}
.brand path, .brand span, .brand-color{
    color: var(--accent-color);
    fill: var(--accent-color) !important;
}

/* VSL ANIM */
.animated, [anim]{
    opacity: 0;
}
.slide-up    { animation: slide-up 1s ease-out forwards; }
.slide-down  { animation: slide-down 1s ease-out forwards; }
.slide-left  { animation: slide-left 1s ease-out forwards; }
.slide-right { animation: slide-right 1s ease-out forwards; }

@keyframes slide-up    { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-down  { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-left  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slide-right { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* VSL ANIM END*/