// Footer
footer{
    @if $color-scheme-alt == dark {
        background-color: $white-alt;
    } @else {
        background-color: lighten($body-bg-alt,10%);
    }
}

// Grayscale effect class
.grayscale {
    filter: gray; /* IE6-9 */
    @if $color-scheme-alt == dark {
        -webkit-filter: grayscale(80%); /* Chrome 19+ & Safari 6+ */
    } @else {
        -webkit-filter: grayscale(60%); /* Chrome 19+ & Safari 6+ */

    }
}

.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}


// Custom spacing
.ml-2-h{
    margin-left:0.75rem;
}

// Custom pills
.h-pill{
    display: flex;
    justify-items: center;
    align-items: center;
    cursor:pointer;
    padding: 0.4rem 0.4rem;
    border-radius: .8rem;
}

.h-pill:hover{
    background-color: $gray-400-alt;
    color:$white-alt;
}

.h-pill-primary:hover{
    background-color: rgba($primary-alt,11%)!important;
    color:lighten($primary-alt,15%)!important;
}

.h-pill.rounded{
    border-radius: 50%!important;
}

.h-pill.active{
    background-color: rgba($primary-alt,0.2);
    color:lighten($primary-alt,15%);
}

.h-pill.disabled{
    color:lighten($font-color,20%);
}

.h-pill.disabled:active, .h-pill.disabled:hover{
    background-color: transparent!important;
    color:lighten($font-color,20%)!important;
    cursor: default!important;
}

.bg-base{
    @if $color-scheme-alt == dark {
        background-color: $gray-100;
    } @else {
        background-color: darken($gray-800-alt,7%);
    }
}

.bg-base-1{
    @if $color-scheme-alt == dark {
        background-color: $gray-200;
    } @else {
        background-color: darken($gray-700-alt,7%);
    }
}


.h-pill-accent{
    background-color: rgba($primary-alt,10%)!important;
    color:lighten($primary-alt,15%)!important;
}

.h-pill-accent:hover{
    background-color: rgba($primary-alt,25%)!important;
}

// Dropdowns
.dropdown-divider {
    border-top: 1px solid #e9ecef!important;
}

// Layout

.mobile-bottom-nav{
    height: 70px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.neutral-bg{
    @if $color-scheme-alt == dark {
        background-color:$gray-100!important;
    } @else {
        background-color:darken($gray-900-alt,1%)!important;
    }
}


@include media-breakpoint-up(xs) {
    //.sidebar {
    //    left: -255px;
    //}
    .app-content, .footer-compact{
        margin-left:0px;
    }
    body{
        /* In order to be able to display the full content, w/o being cut by the sticky navbar */
        //padding-bottom: 70px;
    }

    .side-menu .nav-item i{
        font-size: 1.9rem!important;
    }
    .side-menu .user-details{
        justify-content: center!important;
    }
    //.settings-content{
    //    border-left:none!important;
    //}
    .post-box .h-pill{
        border-radius: 50%;
    }
    .post-media{
        margin-left:-16px;
        margin-right: -16px;
    }
    .container-xl{
        padding-left:14px;
    }
    .user-search-box-info{
        max-width: 150px;
    }
    .fixed-top-m{
        position: fixed;
        right: 0;
        left: 0;
        z-index: 20;
    }
    .m-pt-70{
        margin-top:70px;
    }
    .feed-mobile-search{
        @if $color-scheme-alt == dark {
            border-bottom:1px solid $border-color!important;
        } @else {
            border-bottom:1px solid $border-color-alt!important;
        }
    }
    .content-wrapper.border-right{
        border-right: none!important;
    }

    .overflow-x-hidden-m{
        overflow-x: hidden;
    }
    .swiper-button-next{
        right: 25px!important;
    }
    .swiper-button-prev{
        left: 25px!important;
    }
}
@include media-breakpoint-up(sm) {
    //.sidebar {
    //    left: -255px;
    //}
    .app-content, .footer-compact{
        margin-left:0px;
    }
    body{
        /* In order to be able to display the full content, w/o being cut by the sticky navbar */
        //padding-bottom: 70px;
    }

    .side-menu .nav-item i{
        font-size: 1.9rem!important;
    }
    .side-menu .user-details{
        justify-content: center!important;
    }
    .p-pill {
        width: 40px!important;
        height: 40px!important;
    }
    //.settings-content{
    //    border-left:none!important;
    //}
    .post-box .h-pill{
        border-radius: 50%;
    }
    .post-media{
        margin-left:-16px;
        margin-right: -16px;
    }
    .container-xl{
        padding-left:14px;
    }
    .user-search-box-info{
        max-width: 150px;
    }
    .fixed-top-m{
        position: fixed;
        right: 0;
        left: 0;
        z-index: 20;
    }
    .m-pt-70{
        margin-top:70px;
    }
    .feed-mobile-search{
        @if $color-scheme-alt == dark {
            border-bottom:1px solid $border-color!important;
        } @else {
            border-bottom:1px solid $border-color-alt!important;
        }
    }
    .content-wrapper.border-right {
        border-right: none!important;
    }
    .overflow-x-hidden-m{
        overflow-x: hidden;
    }
    .swiper-button-next{
        right: 25px!important;
    }
    .swiper-button-prev{
        left: 25px!important;
    }
}
@include media-breakpoint-up(md) {
    .sidebar {
        left: 0px!important;
        display: flex!important;
    }
    .sidebar.sidebar-desktop-hidden{
        left: -255px!important;
    }
    .app-content, .footer-compact{
        margin-left:250px;
    }
    body{
        padding-bottom: 0px;
    }

    .side-menu .nav-item i{
        font-size: 19px!important;
        margin-right: .7rem;
    }
    .side-menu .user-details{
        justify-content: flex-start!important;
    }
    //.settings-content{
    //    @if $color-scheme-alt == dark {
    //        //border-left:1px solid $border-color!important;
    //    } @else {
    //        //border-left:1px solid $border-color-alt!important;
    //    }
    //}
    .post-box .h-pill{
        border-radius: 50%;
    }
    .post-media{
        margin-left:0px;
        margin-right: 0px;
    }
    .user-search-box-info{
        max-width: inherit;
    }
    .fixed-top-m{
        position: inherit;
    }
    .m-pt-70{
        margin-top:0px;
    }
    .feed-mobile-search{
        border-bottom: none;
    }
    .content-wrapper.border-right {
        @if $color-scheme-alt == dark {
            border-right:1px solid $border-color!important;
        } @else {
            border-right:1px solid $border-color-alt!important;
        }
    }
    .overflow-x-hidden-m{
        overflow-x: inherit;
    }
    .swiper-button-next{
        right: 10px!important;
    }
    .swiper-button-prev{
        left: 10px!important;
    }

    .image-container img {
        max-height: 10vw; /*TODO: Only on desktop*/
    }

    .featured-article img {
        max-height: 15vw; /*TODO: Only on desktop*/
    }


}
@include media-breakpoint-up(lg) {
    .sidebar {
        left: 0px!important;
        display: flex!important;
    }
    .sidebar.sidebar-desktop-hidden{
        left: -255px!important;
    }
    .app-content, .footer-compact{
        margin-left:250px;
    }
    body{
        padding-bottom: 0px;
    }

    .side-menu .nav-item i{
        font-size: 19px!important;
        margin-right: .7rem;
    }
    .side-menu .user-details{
        justify-content: flex-start!important;
    }
    //.settings-content{
    //    border-bottom: none;
    //}
    .post-box .h-pill{
        border-radius: 1rem;
    }
    .post-media{
        margin-left:0px;
        margin-right: 0px;
    }
    .user-search-box-info{
        max-width: inherit;
    }
    .fixed-top-m{
        position: inherit;
    }
    .m-pt-70{
        margin-top:0px;
    }
    .feed-mobile-search{
        border-bottom: none;
    }
    .content-wrapper.border-right {
        @if $color-scheme-alt == dark {
            border-right:1px solid $border-color!important;
        } @else {
            border-right:1px solid $border-color-alt!important;
        }
    }
    .overflow-x-hidden-m{
        overflow-x: inherit;
    }
    .swiper-button-next{
        right: 10px!important;
    }
    .swiper-button-prev{
        left: 10px!important;
    }

    .image-container img {
        max-height: 10vw; /*TODO: Only on desktop*/
    }

    .featured-article img {
        max-height: 15vw; /*TODO: Only on desktop*/
    }

}
@include media-breakpoint-up(xl) {
    body{
        padding-bottom: 0px;
    }
    .sidebar {
        left: 0px!important;
        display: flex!important;
    }
    .sidebar.sidebar-desktop-hidden{
        left: -255px!important;
    }
    .side-menu .nav-item i{
        font-size: 19px!important;
        margin-right: .7rem;
    }
    .side-menu .user-details{
        justify-content: flex-start!important;
    }
    //.settings-content{
    //    @if $color-scheme-alt == dark {
    //        border-left:1px solid $border-color!important;
    //    } @else {
    //        border-left:1px solid $border-color-alt!important;
    //    }
    //}
    .post-box .h-pill{
        border-radius: 1rem;
    }
    .post-media{
        margin-left:0px;
        margin-right: 0px;
    }
    .user-search-box-info{
        max-width: inherit;
    }
    .fixed-top-m{
        position: inherit;
    }
    .m-pt-70{
        margin-top:0px;
    }
    .feed-mobile-search{
        border-bottom: none;
    }
    .content-wrapper.border-right {
        @if $color-scheme-alt == dark {
            border-right:1px solid $border-color!important;
        } @else {
            border-right:1px solid $border-color-alt!important;
        }
    }
    .overflow-x-hidden-m{
        overflow-x: inherit;
    }
    .swiper-button-next{
        right: 10px!important;
    }
    .swiper-button-prev{
        left: 10px!important;
    }

    .image-container img {
        max-height: 10vw; /*TODO: Only on desktop*/
    }

    .featured-article img {
        max-height: 15vw; /*TODO: Only on desktop*/
    }

}

// Profile pills
.p-pill {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color:lighten($primary-alt,15%)!important;
    background-color: transparent;
    font-size: 1.2rem;
    line-height: 1.4;
    transition: all .15s ease-in;
    border:transparent!important;
    box-shadow: inset 0 0 0 1px rgb(138 150 163 / 25%)!important;
}

.p-pill-text {
    width:100%!important;
    border-radius: 2rem!important;
    font-weight: 500!important;
    font-size: .9rem!important;
    padding-right: 0.5em!important;
    padding-left: 0.5em!important;
}

.p-pill:hover{
    border:1px solid lighten($primary-alt,15%);
    background-color: rgba($primary-alt,11%)!important;
}

.p-pill-white {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color:$gray-300!important;
    background-color: rgba($gray-100,20%)!important;
    font-size: 1.2rem;
    line-height: 1.4;
    transition: all .15s ease-in;
    border:1px solid rgba($gray-100-alt,75%)!important;
}

.p-pill-white:hover{
    color:$gray-100!important;
    //border:1px solid lighten($gray-100,15%);
    background-color: rgba($gray-100,30%)!important;
}

// Profile inline tabs
.inline-border-tabs .nav-link {
    padding-bottom: 1.2rem;
    border-radius: 0px!important;
    background-color: transparent!important;
    @if $color-scheme-alt == dark {
        color: $primary-alt!important;
        border-bottom:1px solid $border-color!important;
    } @else {
        color: $white!important;
        border-bottom:1px solid $border-color-alt!important;
    }
}

.inline-border-tabs .nav-link:hover {
    border-bottom: 2px solid $primary-alt!important;
}

.inline-border-tabs .nav-link.active{
    border-bottom: 2px solid $primary-alt!important;
}

.bg-separator{
    height:.8rem;
    @if $color-scheme-alt == dark {
        background-color: rgba($gray-100-alt,20%);
    } @else {
        background-color: rgba($gray-800-alt,60%);
    }
}


/* User side menu */
.user-side-menu{

}

.user-side-menu .nav-item{
    margin-bottom: 8px;
}
.user-side-menu .nav-item a{
    @if $color-scheme-alt == dark {
        color:$gray-500-alt!important;
    } @else {
        color:rgba($gray-200-alt,75%)!important;
    }
}

.user-side-menu .h-pill:hover{

    @if $color-scheme-alt == dark {
        background-color: rgba($primary-alt,0.15);
        color:$primary-alt!important;
    } @else {
        background-color: rgba($primary-alt,0.03);
        color:lighten($primary-alt,20%)!important;
    }
}

.user-side-menu .h-pill.active{
    @if $color-scheme-alt == dark {
        background-color: rgba($primary-alt,0.2);
        //color:lighten($primary-alt,20%)!important;
        color:$primary-alt!important;

    } @else {
        background-color: rgba($primary-alt,0.10);
        color:lighten($primary-alt,20%)!important;
    }
}

.user-side-menu .nav-item .btn{
    color:$white!important;
}

.user-side-menu .nav-item .btn:hover{
    color:$white!important;
}

//.sidebar.light ul li a:hover,
//.sidebar.light ul li a:focus,
//.sidebar.light ul li.active > a:hover,
//.sidebar.light ul li.active > a:focus
// {
//
//    @if $color-scheme-alt == dark {
//        background-color: rgba($primary-alt,0.2);
//        //color:lighten($primary-alt,20%)!important;
//        color:$primary-alt!important;
//
//    } @else {
//        background-color: rgba($primary-alt,0.10);
//        color:lighten($primary-alt,20%)!important;
//    }
//
//    color: #888; }

.sidebar.light ul li.active > a, .sidebar.light a[aria-expanded="true"] {
    //background-color: rgba($primary-alt,0.2);
    //color:lighten($primary-alt,15%);
}

// Text dark/white classes not to be replaced by the Theme middleware
.text-dark-r {
    color:$gray-800-alt!important;
}

.text-light-r {
    color:$gray-500-alt!important;
}


/* Profile & Settings used containers*/
.profile-cover-bg{
    background-color: #FAFAFA;
    height:200px;
}

.profile-cover-bg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 0!important;
}

.card-img{
    border-radius: 0px!important;
}

/* File uploads */
.avatar-holder{
    //margin-top:-75px;
    width:84px;
    height:84px;
    border-radius: 50%
}

.avatar-holder img, .company-logo-wrapper img{
    @if $color-scheme-alt == dark {
        border:4px solid $white;
        background-color: rgba($gray-100-alt,20%);
    } @else {
        border:4px solid $dark;
        background-color: rgba($gray-800-alt,60%);
    }
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

.company-logo-wrapper img{
    width: 92px;
    height: 92px;
    border-radius: 50%;
}

.table-wrapper{
    //background-color: rgba($gray-100-alt,20%);
}
.table {
    width: 100%;
    border:none;
}
.table thead th {
    padding: 20px 30px;
    font-size: 14px;
    border:none;
    @if $color-scheme-alt == dark {
        border-bottom:1px solid $hr-border-color!important;
        color: $dark!important;

    } @else {
        border-bottom:1px solid $hr-border-color-alt!important;
        color: $white!important;
    }
}
.table tbody tr {
    margin-bottom: 10px;
}
.table tbody th, .table tbody td {
    padding: 20px 30px;
    border:none;
    @if $color-scheme-alt == dark {
        border-bottom:1px solid $hr-border-color!important;

    } @else {
        border-bottom:1px solid $hr-border-color-alt!important;

    }
    font-size: 14px;
}

// Custom behaviour for muted links
a.text-muted:hover,  a.text-light:hover,  a.text-hover:hover{
    color:$link-hover-color-alt!important;
    text-decoration: underline;
}

a.text-dark:hover,  a.text-light:hover,  a.text-white:hover,  a.text-black:hover{
    text-decoration: underline;
}


/*Posts media handler*/
.posts-wrapper .swiper-button{
    width: 40px;
    height: 40px;
}

.posts-wrapper .swiper-button:after{
    content:none!important;
}

.posts-wrapper .post-media{

}

.posts-wrapper .post-media-image{
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: center center;
}

@media (max-width: 767px) {
    .posts-wrapper .mySwiper {
        height: 320px!important;
    }
    .posts-wrapper .mySwiper>img {
        height: 320px!important;
    }
}
@media (min-width: 768px) {
    .posts-wrapper .mySwiper {
        height: 480px!important;
    }
    .posts-wrapper .mySwiper>img {
        height: 480px!important;
    }
}
@media (min-width: 992px) {
    .posts-wrapper .mySwiper {
        height: 550px!important;
    }
    .posts-wrapper .mySwiper>img {
        height: 550px!important;
    }
}

.settings-menu .list-group-item-action.active,
.bookmarks-nav .list-group-item-action.active {
    //@if $color-scheme-alt == dark {
    //    color: $list-group-action-active-color!important;
    //    background-color: $list-group-action-active-bg!important;
    //    border: transparent!important;
    //} @else {
    //    color: $list-group-action-active-color-alt!important;
    //    background-color: $list-group-action-active-bg-alt!important;
    //    border: transparent!important;
    //}
}

.lists-wrapper .list-link{
    color: inherit!important;
}

.lists-wrapper .list-link:hover{
    @if $color-scheme-alt == dark {
        background-color: $list-group-action-active-bg!important;
    }
    @else{
        background-color: $list-group-action-active-bg-alt!important;
    }
}

.lists-wrapper .list-link h5, .lists-wrapper .list-link span{
    font-size: 1.03rem;
}

.contact-box:hover, .contact-active{
    @if $color-scheme-alt == dark {
        background-color: $list-group-action-active-bg!important;
    } @else {
        background-color: $list-group-action-active-bg-alt!important;
    }
}

.alert-default{
    @if $color-scheme-alt == dark {
        background-color: $list-group-action-active-bg!important;
        color: $h-color!important;
    } @else {
        background-color: $list-group-action-active-bg-alt!important;
        color: #fafafa !important;

    }
}


/* Custom sized checkboxes */
@mixin switch($res: 'sm') {
    $index: 1rem;
    $mainVal: 1rem;

    @if $res == 'md' {
        $index: 2rem;
        $mainVal: 1.5rem;
    } @else if $res == 'lg' {
        $index: 3rem;
        $mainVal: 2rem;
    } @else if $res == 'xl' {
        $index: 4rem;
        $mainVal: 2.5rem;
    }

    .custom-control-label {
        padding-left: #{$index};
        padding-bottom: #{$mainVal};
    }

    .custom-control-label::before {
        height: $mainVal;
        width: calc(#{$index} + 0.75rem);
        border-radius: $mainVal * 2;
    }

    .custom-control-label::after {
        width: calc(#{$mainVal} - 4px);
        height: calc(#{$mainVal} - 4px);
        border-radius: calc(#{$index} - (#{$mainVal} / 2));
    }

    .custom-control-input:checked ~ .custom-control-label::after {
        transform: translateX(calc(#{$mainVal} - 0.25rem));
    }
}

.page-content-wrapper p{
    @if $color-scheme-alt == dark {
        color: $dark!important;

    } @else {
        color: $white!important;
    }
}

//Selectize
.selectize-dropdown .active {
    @if $color-scheme-alt != dark {
        background-color: $gray-600-alt!important;
        color:$white!important;
    }
}

.selectize-dropdown {
    @if $color-scheme-alt != dark {
        background-color: darken($gray-700-alt,7%)!important;
        color:$white!important;
    }
}


.selectize-input{
    @if $color-scheme-alt == dark {
        background-color: $white!important;
        border: 1px solid $input-border-color!important;

    } @else {
        background-color: #3B3B3B!important;
        border: 1px solid $input-border-color-alt!important;
    }
}

.selectize-input.focus {
    border-color: lighten($primary,25)!important;
    outline: 0!important;
    outline-color: initial!important;
    outline-style: initial!important;
    outline-width: 0px!important;
    box-shadow: 0 0 0 $input-focus-width rgba($primary, .25)!important;
}

.selectize-control.multi .selectize-input>div.active {
    background: lighten($primary,15)!important;
}

.form-control.selectize-control{
    padding:0px!important;
}

.selectize-input.focus {
    @if $color-scheme-alt == dark {
        border: 1px solid $input-focus-border-color !important;

    } @else {
        border: 1px solid $input-focus-border-color-alt!important;
    }
}

.selectize-input, .selectize-row{
    @if $color-scheme-alt == dark {
        color: $input-color!important;
    } @else {
        color: $input-color-alt!important;
    }
}

.selectize-avatar{
    width:48px;
    height: 48px;
    border-radius: 50%;
}

.selectize-input>input{
    @if $color-scheme-alt == dark {
        color: $input-color!important;
    } @else {
        color: $input-color-alt!important;
    }
}

// Trix

trix-editor{
    @if $color-scheme-alt == dark {
        background-color: $white!important;
        border: 1px solid $input-border-color!important;

    } @else {
        background-color: #3B3B3B!important;
        border: 1px solid $input-border-color-alt!important;
    }
}

trix-editor:focus{

    @if $color-scheme-alt == dark {
        background-color: $white!important;
        border: 1px solid $input-focus-border-color !important;

    } @else {
        background-color: #3B3B3B!important;
        border: 1px solid $input-focus-border-color-alt!important;
    }
}


trix-editor .trix-button.trix-active {
    background: lighten($primary,35)!important;
    color:#FFF!important;
}

trix-toolbar .trix-button.trix-active {
    background: lighten($primary,35)!important;
    color:#FFF!important;
}

.trix-button-group .trix-button {
    @if $color-scheme-alt == dark {
        background: $white !important;
        border: 1px solid $input-border-color!important;
    } @else {
        background: darken($white, 10%) !important;
        border: 1px solid $input-border-color-alt!important;
    }

}

.trix-button-group{
    @if $color-scheme-alt == dark {
        border: 1px solid $input-border-color!important;
    } @else {
        border: 1px solid $input-border-color-alt!important;
    }
}

.trix-button-group {
    border:0!important;
    @if $color-scheme-alt == dark {
        border-left: 1px solid $input-border-color!important;
    } @else {
        border-left: 1px solid $input-border-color-alt!important;
    }
    //border-left: 1px solid #ced4da!important;
    margin-bottom:0px!important;
    margin-left: 0!important;
    border-radius: 0!important;
}

.trix-button-group:first-child{
    border:0!important;
}

.trix-button-group .trix-button {
    border:0!important;
}

.trix-toolbar .trix-button-row {
    display: flex!important;
    justify-content: flex-start!important;
}

.trix-toolbar{
    border: 1px solid #ced4da!important;
    @if $color-scheme-alt == dark {
        border-left: 1px solid $input-border-color!important;
    } @else {
        border-left: 1px solid $input-border-color-alt!important;
    }
    border-radius: .25rem;
    width: fit-content!important;
}

.trix-button-row{
    border-radius: .25rem;
}


//trix-editor:focus{
//    border-r
//}

/**
* Search element SCSS
 */
.search-box-wrapper{
    //border: $gray-400 ;
}

.search-box-wrapper .input-group {
    display: inline-flex;
    @if $color-scheme-alt == dark {
        border: 1px solid $gray-300;

    } @else {
        border: 1px solid $gray-700;
    }
    border-radius: 0.4rem;
    input {
        padding: 1rem;
        border: 0;
        font: inherit;
        // Since we are providing an alternative focus
        // style, it is safe to remove the focus styling
        // from the input itself
        &:focus {
            outline: none;
        }
    }
}

.search-box-wrapper input{
    border-radius: 0.4rem;
}

.search-box-wrapper .input-group-text{
    border:0;
    background: inherit!important;
    padding-top: 0;
    padding-bottom: 0;
}

.search-box-wrapper .input-group {
    &:focus-within {
        border-color: #f661d3;
    }
}

// RESPONSIVE STUFF
// YOU CAN PUT ALL RESOLUTION HERE
// sm - DEFAULT, md, lg, xl
.custom-switch.custom-switch-sm {
    @include switch();
}

.custom-switch.custom-switch-md {
    @include switch('md');
}

.custom-switch.custom-switch-lg {
    @include switch('lg');
}

.custom-switch.custom-switch-xl {
    @include switch('xl');
}


.menu-notification-badge{
    position: absolute;
    background: $primary;
    color: #FFF;
    min-width: 16px;
    height: 16px;
    line-height: 20px;
    border-radius: 1000px;
    padding: 0 5px;
    top: -1px;
    right: 2px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.mobile-bottom-nav .menu-notification-badge{
    right: -1px;
}

.notification-box .avatar {
    @if $color-scheme-alt == dark {
        outline: 3px solid $border-color!important;
    } @else {
        outline: 3px solid $border-color-alt!important;
    }
}

.notification-box.unread .avatar {
    outline: 3px solid $primary!important;
}

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    @if $color-scheme-alt == dark {
        background: $hr-border-color!important;
    } @else {
        background: $hr-border-color-alt!important;
    }
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

/* Messenger */

.messageBoxInput{
    line-height: 1.7rem;
}

.message-action-button{
    width:26px;
    height:26px;
}

.message-action-button:hover{
    @if $color-scheme-alt == dark {
        background-color: $gray-200;
    } @else {
        background-color: $gray-600;
    }
    border-radius: 50%;
}


// Dropzone
.dropzone, .company-logo-wrapper{
    min-height: 0!important;
    border-style: dotted !important;
    @if $color-scheme-alt == dark {
        border-color: $gray-300!important;
    } @else {
        border-color: $gray-700!important;
    }
    border-radius: 3px!important;
    border-top-left-radius: 3px!important;
    border-top-right-radius: 3px!important;
    border-bottom-right-radius: 3px!important;
    border-bottom-left-radius: 3px!important;
}

.required-field {
    width: 8px; height: 8px;
}


/**
Pricing packs
 */

.pricing-table{

}

.pricing-table .selected-pack-label{
    margin-bottom: -15px;
}

.pricing-table .selected-pack-label span{
    z-index:9
}

.pricing-table p{
    margin: 0px!important;
    margin-top:.8rem!important;
}

//.pricing-table-wrapper{
//    curs
//}

.pricing-table-wrapper:hover,  .pricing-table.active .pricing-table-wrapper{
    //background-color: lighten($primary,30%);
    border-color: $primary!important;
}

.selected-pack-label{
    //display: none!important;
    visibility: hidden!important;
}

.pricing-table.active .selected-pack-label{
    //display:flex!important;
    visibility: visible!important;
}


//.card-settings a{
//
//}


.listing-wrapper{
    @if $color-scheme-alt == dark {
        background: $card-bg!important;
    } @else {
        background: $card-bg-alt!important;
    }
}

// Page header
.page-header{
    background-size: cover!important;
    background-position: bottom;
    /*border-bottom: 1px solid #dde0f4;*/
    @if $color-scheme-alt == dark {
        border-bottom: 1px solid $gray-300;

    } @else {
        border-bottom: 1px solid $gray-700;
    }
    background-repeat: no-repeat;
}

.header-gradient-wrapper{
    @if $color-scheme-alt == dark {
        //background-color: hsl(0deg 0% 76% / 15%);
    } @else {
        background-color: hsl(0deg 0% 0% / 60%);
    }
}

.is-invalid{
    @if $color-scheme-alt == dark {
        border-color:$form-feedback-invalid-color!important;
    } @else {
        border-color:$form-feedback-invalid-color-alt!important;
    }
}

.text-link{
    @if $color-scheme-alt == dark {
        color: $link-color;
    } @else {
        color: $link-color-alt;
    }
    background-color: transparent; // Remove the gray background on active links in IE 10.

    @include hover() {
        @if $color-scheme-alt == dark {
            color: $link-hover-color;
        } @else {
            color: $link-hover-color-alt;
        }
    }
}


.featured-listing-gradient{
    @if $color-scheme-alt == dark {
        background: linear-gradient(90deg, rgb(255, 250, 200) 0%, rgb(255, 250, 200) 10%, rgb(255, 255, 255) 100%)!important;
    } @else {
        background: linear-gradient(90deg, rgb(70, 70, 70) 0%, rgb(70, 70, 70) 10%, rgb(40, 40, 40) 100%)!important;
        border-color: $primary-alt!important;
        border-width: 1px;
    }
}

.global-announcement-banner a{
    color:$white!important;
    text-decoration: none!important;
}

.global-announcement-banner a:hover{
    color:darken($white,10)!important;
}
