// 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;
}

// Theme-aware soft primary accents used by page-level cards, badges, and status chips.
$theme-primary-soft-color: $primary-alt;
$theme-primary-soft-bg: rgba($primary-alt, .14);
$theme-primary-soft-bg-subtle: rgba($primary-alt, .08);
$theme-primary-soft-border: rgba($primary-alt, .24);
$theme-primary-soft-border-strong: rgba($primary-alt, .38);
$theme-primary-soft-shadow: rgba($primary-alt, .18);

@if $color-scheme-alt == dark {
    $theme-primary-soft-color: $primary;
    $theme-primary-soft-bg: rgba($primary, .08);
    $theme-primary-soft-bg-subtle: rgba($primary, .055);
    $theme-primary-soft-border: rgba($primary, .18);
    $theme-primary-soft-border-strong: rgba($primary, .34);
    $theme-primary-soft-shadow: rgba($primary, .14);
}

.saved-search-chip,
.talent-chip {
    border-color: $theme-primary-soft-border-strong!important;
    background: $theme-primary-soft-bg-subtle!important;
    color: $theme-primary-soft-color!important;
}

.saved-search-chip {
    border-color: $theme-primary-soft-border!important;
    background: $theme-primary-soft-bg!important;
}

.applicants-status-tabs .btn-outline-primary {
    border-color: $theme-primary-soft-border-strong;
}

.dashboard-stat-icon,
.onboarding-icon {
    background: $theme-primary-soft-bg;
    color: $theme-primary-soft-color;
}

.application-status-step.is-current {
    border-color: $theme-primary-soft-border;
    background: $theme-primary-soft-bg-subtle;
}

.application-status-step.is-current .application-status-dot {
    box-shadow: 0 0 0 4px $theme-primary-soft-shadow;
}

.onboarding-hero {
    background: linear-gradient(135deg, $theme-primary-soft-bg, $theme-primary-soft-bg-subtle);
}

.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;
}

.min-width-0 {
    min-width: 0;
}

.navbar-user-menu {
    min-width: 19rem;
    padding: .65rem;
    border-radius: .85rem;

    @if $color-scheme-alt == dark {
        background: rgba($white-alt, .98);
        border: 1px solid rgba($gray-900-alt, .08);
        box-shadow: 0 1.2rem 2.8rem rgba(20, 19, 43, .14), 0 .4rem 1rem rgba(20, 19, 43, .08);
    } @else {
        background: rgba($gray-900-alt, .96);
        border: 1px solid rgba($white-alt, .08);
        box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, .38), 0 .4rem 1rem rgba(0, 0, 0, .24);
    }
}

.navbar-user-menu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .6rem .75rem;
}

.navbar-user-menu-avatar {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    flex: 0 0 auto;
}

.navbar-user-menu-section {
    padding: .45rem .75rem .25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    @if $color-scheme-alt == dark {
        color: rgba($gray-600-alt, .9);
    } @else {
        color: rgba($gray-300-alt, .65);
    }
}

.navbar-user-menu form {
    margin: 0;
}

.navbar-user-menu .dropdown-item {
    border-radius: .6rem;
    padding: .55rem .75rem;
    font-weight: 600;

    @if $color-scheme-alt == dark {
        color: $gray-600-alt!important;
    } @else {
        color: rgba($gray-200-alt, 78%)!important;
    }
}

.navbar-user-menu .dropdown-item:hover,
.navbar-user-menu .dropdown-item:focus {
    @if $color-scheme-alt == dark {
        background-color: rgba($primary-alt, .12);
        color: $primary-alt!important;
    } @else {
        background-color: rgba($primary-alt, .06);
        color: lighten($primary-alt, 20%)!important;
    }
}

.navbar-user-menu .dropdown-item.active,
.navbar-user-menu .dropdown-item:active {
    @if $color-scheme-alt == dark {
        background-color: rgba($primary-alt, .18);
        color: $primary-alt!important;
    } @else {
        background-color: rgba($primary-alt, .12);
        color: lighten($primary-alt, 20%)!important;
    }
}

.navbar-user-menu .dropdown-divider {
    margin: .45rem .25rem;

    @if $color-scheme-alt == dark {
        border-top-color: rgba(20, 19, 43, .08)!important;
    } @else {
        border-top-color: rgba($white-alt, .10)!important;
    }
}

.navbar-user-menu .navbar-user-menu-logout:hover,
.navbar-user-menu .navbar-user-menu-logout:focus,
.navbar-user-menu .navbar-user-menu-logout:active {
    @if $color-scheme-alt == dark {
        background-color: rgba($danger, .12);
        color: $danger!important;
    } @else {
        background-color: rgba($orange, .16);
        color: lighten($orange, 20%)!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;
}


.side-menu-section {
    margin-bottom: .5rem;
    padding: 0 .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    @if $color-scheme-alt == dark {
        color: rgba($gray-600-alt, .9);
    } @else {
        color: rgba($gray-300-alt, .65);
    }
}

.user-side-menu .nav-item + .nav-item {
    margin-top: .2rem;
}
/* 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;
    }
}

.save-job-button {
    border: 1px solid rgba($primary, .24);
    border-radius: .45rem;
    background: transparent;
    color: $primary;
    box-shadow: none;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.save-job-button:hover,
.save-job-button:focus {
    border-color: rgba($primary, .38);
    background: rgba($primary, .06);
    color: $primary;
    outline: 0;
}

.save-job-button.is-saved {
    border-color: rgba($primary, .28);
    background: rgba($primary, .08);
    color: $primary;
}

.save-job-button:disabled {
    opacity: .65;
    cursor: wait;
}

.save-job-compact {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    vertical-align: middle;
}

.save-job-compact svg,
.save-job-compact ion-icon {
    margin: 0!important;
}

.owner-listing-actions-column {
    padding-right: 1rem;
}

.owner-listing-actions {
    gap: .75rem;
}

.owner-listing-buttons {
    gap: .5rem;
}

.owner-listing-primary-action {
    display: inline-flex;
    align-items: center;
    background: rgba($primary, .08);
    border: 1px solid rgba($primary, .22);
    border-radius: .5rem;
    box-shadow: none;
    color: $primary;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    padding: .55rem .8rem;
    white-space: nowrap;
}

.owner-listing-primary-action:hover,
.owner-listing-primary-action:focus {
    background: rgba($primary, .12);
    color: $primary;
    text-decoration: none;
}

.owner-listing-primary-action span {
    align-items: center;
    background: rgba($primary, .14);
    border-radius: 999px;
    display: inline-flex;
    height: 1.35rem;
    justify-content: center;
    margin-right: .45rem;
    min-width: 1.35rem;
    padding: 0 .35rem;
}

.owner-listing-link-action {
    padding: .45rem .2rem;
}

.owner-listing-more {
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .45rem;
    color: $text-muted;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.owner-listing-buttons .dropdown {
    margin-right: .5rem;
}

.owner-listing-more:hover,
.owner-listing-more:focus {
    color: $body-color;
    text-decoration: none;
}

@media (max-width: 991px) {
    .owner-listing-actions-column {
        padding-left: calc(64px + 1rem);
        padding-right: 1rem;
        padding-top: 1rem;
    }

    .owner-listing-actions,
    .owner-listing-buttons {
        align-items: flex-start;
        justify-content: flex-start;
    }
}

@media (max-width: 575px) {
    .owner-listing-actions-column {
        padding-left: 0;
    }

    .owner-listing-primary-action {
        flex: 1 1 100%;
        justify-content: center;
    }
}

// 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;
}

// -------------------------------------
// Smart text selection styling
// - Lightens Bootstrap primary
// - Auto adjusts text color for contrast
// -------------------------------------

// Calculate lighter primary color (15% lighter than primary-alt)
$selection-bg: lighten($primary-alt, 20%);

// Automatically choose text color based on background contrast
$selection-text: if(lightness($selection-bg) > 65%,
    #212529, // Dark text for light backgrounds
    #ffffff); // Light text for dark backgrounds

// Apply to text selection
::selection {
    background-color: $selection-bg;
    color: $selection-text;
}

::moz-selection {
    background-color: $selection-bg;
    color: $selection-text;
}

//
// Minimal BS5-like border-radius utilities for BS4
//

// Border radius tokens
$radius: (
    default: 0.25rem,
    sm:      0.125rem,
    lg:      0.375rem, // This one not used so far, can be increased
    xl:      1.25rem,
    xxl:     2rem
) !default;

// Helpers
@mixin radius-all($v) { border-radius: $v !important; }

@mixin radius-top($v) {
    border-top-left-radius: $v !important;
    border-top-right-radius: $v !important;
}

@mixin radius-right($v) {
    border-top-right-radius: $v !important;
    border-bottom-right-radius: $v !important;
}

@mixin radius-bottom($v) {
    border-bottom-left-radius: $v !important;
    border-bottom-right-radius: $v !important;
}

@mixin radius-left($v) {
    border-top-left-radius: $v !important;
    border-bottom-left-radius: $v !important;
}

// Utilities
@each $name, $val in $radius {
    $suffix: if($name == default, "", "-#{$name}");

    // Full
    .rounded#{$suffix}        { @include radius-all($val); }

    // Sides
    .rounded-top#{$suffix}    { @include radius-top($val); }
    .rounded-right#{$suffix}  { @include radius-right($val); }
    .rounded-bottom#{$suffix} { @include radius-bottom($val); }
    .rounded-left#{$suffix}   { @include radius-left($val); }
}