.flex{
    display: flex;
}

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

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

.flex-column{
    display: flex;
    flex-direction: column;
}

.svg-btn{
    width: 24px;
    height: 24px;
    border-radius: unset;
}

.svg-btn-small{
    width: 18px;
    height: 18px;
    border-radius: unset;
}

.active{
    color: var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
}

.gap-10{
    gap: 10px;
}

.gap-20{
    gap: 20px;
}

.padding-lr{
    padding: 0 10px;
    position: relative;
}


.padding-20{
    padding: 20px;
}

.color-primary{
    color: var(--primary-color)
}

.color-dark-text{
    color: var(--dark-text-color)
}

.text-small{
    font-size: small;
    font-weight: 550;
}

.text-bold{
    font-size: 1.05rem;
    font-weight: 550;
}

.tag{
    color: var(--primary-color);
    background-color: var(--secondary-color);
    padding: 5px 12px;
    border-radius: 15px;
    cursor: pointer;
}

.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.invert-1{
    filter: invert(1);
}

.reset{
    all: unset;
}

.height-100{
    height: 100%;
}

.grid-2{
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
}