/*Buddypress Friends styles*/

.sa-el-width-1-2 {
    width: 50%
}

.sa-el-width-1-3 {
    width: calc(100% * 1 / 3.001)
}

.sa-el-width-2-3 {
    width: calc(100% * 2 / 3.001)
}

.sa-el-width-1-4 {
    width: 25%
}

.sa-el-width-3-4 {
    width: 75%
}

.sa-el-width-1-5 {
    width: 20%
}

.sa-el-width-2-5 {
    width: 40%
}

.sa-el-width-3-5 {
    width: 60%
}

.sa-el-width-4-5 {
    width: 80%
}

.sa-el-width-1-6 {
    width: calc(100% * 1 / 6.001)
}

.sa-el-width-5-6 {
    width: calc(100% * 5 / 6.001)
}

@media (min-width:640px) {
    .sa-el-width-1-1\@s {
        width: 100%
    }
    .sa-el-width-1-2\@s {
        width: 50%
    }
    .sa-el-width-1-3\@s {
        width: calc(100% * 1 / 3.001)
    }
    .sa-el-width-2-3\@s {
        width: calc(100% * 2 / 3.001)
    }
    .sa-el-width-1-4\@s {
        width: 25%
    }
    .sa-el-width-3-4\@s {
        width: 75%
    }
    .sa-el-width-1-5\@s {
        width: 20%
    }
    .sa-el-width-2-5\@s {
        width: 40%
    }
    .sa-el-width-3-5\@s {
        width: 60%
    }
    .sa-el-width-4-5\@s {
        width: 80%
    }
    .sa-el-width-1-6\@s {
        width: calc(100% * 1 / 6.001)
    }
    .sa-el-width-5-6\@s {
        width: calc(100% * 5 / 6.001)
    }
}

@media (min-width:960px) {
    .sa-el-width-1-1\@m {
        width: 100%
    }
    .sa-el-width-1-2\@m {
        width: 50%
    }
    .sa-el-width-1-3\@m {
        width: calc(100% * 1 / 3.001)
    }
    .sa-el-width-2-3\@m {
        width: calc(100% * 2 / 3.001)
    }
    .sa-el-width-1-4\@m {
        width: 25%
    }
    .sa-el-width-3-4\@m {
        width: 75%
    }
    .sa-el-width-1-5\@m {
        width: 20%
    }
    .sa-el-width-2-5\@m {
        width: 40%
    }
    .sa-el-width-3-5\@m {
        width: 60%
    }
    .sa-el-width-4-5\@m {
        width: 80%
    }
    .sa-el-width-1-6\@m {
        width: calc(100% * 1 / 6.001)
    }
    .sa-el-width-5-6\@m {
        width: calc(100% * 5 / 6.001)
    }
}

.sa-el-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none
}

.sa-el-grid>* {
    margin: 0
}

.sa-el-grid>*>:last-child {
    margin-bottom: 0
}

.sa-el-grid {
    margin-left: -30px
}

.sa-el-grid>* {
    padding-left: 30px
}

.sa-el-grid+.sa-el-grid,
.sa-el-grid>.sa-el-grid-margin,
*+.sa-el-grid-margin {
    margin-top: 30px
}

@media (min-width:1200px) {
    .sa-el-grid {
        margin-left: -40px
    }
    .sa-el-grid>* {
        padding-left: 40px
    }
    .sa-el-grid+.sa-el-grid,
    .sa-el-grid>.sa-el-grid-margin,
    *+.sa-el-grid-margin {
        margin-top: 40px
    }
}

.sa-el-grid-small {
    margin-left: -15px
}

.sa-el-grid-small>* {
    padding-left: 15px
}

.sa-el-grid+.sa-el-grid-small,
.sa-el-grid-small>.sa-el-grid-margin,
*+.sa-el-grid-margin-small {
    margin-top: 15px
}

.sa-el-text-left {
    text-align: left !important
}

.sa-el-text-right {
    text-align: right !important
}

.sa-el-text-center {
    text-align: center !important
}

.sa-el-text-justify {
    text-align: justify !important
}

.sa-el-flex-inline {
    display: inline-flex
}

.sa-el-flex::before,
.sa-el-flex::after,
.sa-el-flex-inline::before,
.sa-el-flex-inline::after {
    display: none
}

.sa-el-flex-left {
    justify-content: flex-start
}

.sa-el-flex-center {
    justify-content: center
}

.sa-el-flex-right {
    justify-content: flex-end
}

.sa-el-flex-between {
    justify-content: space-between
}

.sa-el-flex-around {
    justify-content: space-around
}

.sa-el-alert-warning {
    background: #fff6ee;
    color: #faa05a
}

.sa-el-custom-tooltip:hover::before {
    content: attr(data-custom-tooltip);
    display: block;
    background: #4a4a4a;
    color: #ffff;
    position: absolute;
    top: 102%;
    padding: 5px 10px;
    z-index: 9999;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}