/*****************************
  Helper Classes
*****************************/
/* color */
.text-primary {
    color: $primary !important;
}

.text-white {
    color: $white;
}

.text-dark {
    color: $gray-8 !important;
}

.text-light {
    color: $gray-3 !important;
}

.text-info {
    color: $blue !important;
}

.text-success {
    color: $green !important;
}

.text-warning {
    color: $orange !important;
}

.text-danger {
    color: $red !important;
}

.freelance {
    color: $green;
}

.temporary {
    color: $red;
}

.full-time {
    color: $blue;
}

.part-time {
    color: $orange;
}

/* background */
.bg-primary {
    background: $primary !important;
}

.bg-dark {
    background: $gray-9 !important;
}

.bg-light {
    background: #f2f4f4 !important;
}

.bg-white {
    background: $white !important;
}


/* Page section margin padding */
.space-ptb {
    padding: 70px 0;
}

.space-pt {
    padding: 70px 0 0;
}

.space-pb {
    padding: 0 0 70px;
}

.h-100vh {
    height: 100vh !important;
}

/* img holder */
.bg-holder {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
}

/* bg-holder-pattern */
.bg-holder-pattern {
    background-repeat: no-repeat;
    background-position: 100% 15%;
}


/* Background overlay */
.bg-overlay-black-10 {
    &:before {
        background: rgba($gray-8, 0.1);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-20 {
    &:before {
        background: rgba($gray-8, 0.2);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-30 {
    &:before {
        background: rgba($gray-8, 0.3);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-40 {
    &:before {
        background: rgba($gray-8, 0.4);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-50 {
    &:before {
        background: rgba($gray-8, 0.5);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-60 {
    &:before {
        background: rgba($gray-8, 0.6);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-70 {
    &:before {
        background: rgba($gray-8, 0.7);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-80 {
    &:before {
        background: rgba($gray-8, 0.8);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-black-90 {
    &:before {
        background: rgba($gray-8, 0.9);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-10 {
    &:before {
        background: rgba($white, 0.1);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-20 {
    &:before {
        background: rgba($white, 0.2);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-30 {
    &:before {
        background: rgba($white, 0.3);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-40 {
    &:before {
        background: rgba($white, 0.4);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-50 {
    &:before {
        background: rgba($white, 0.5);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-60 {
    &:before {
        background: rgba($white, 0.6);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-70 {
    &:before {
        background: rgba($white, 0.7);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-80 {
    &:before {
        background: rgba($white, 0.8);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-white-90 {
    &:before {
        background: rgba($white, 0.9);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-theme-20 {
    &:before {
        background: rgba($primary, 0.2);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-theme-50 {
    &:before {
        background: rgba($primary, 0.5);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-theme-70 {
    &:before {
        background: rgba($primary, 0.7);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-theme-90 {
    &:before {
        background: rgba($primary, 0.9);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    position: relative;
    z-index: 1;
}

.bg-overlay-gradient {
    position: relative;

    &:before {
        z-index: 0;
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        background: -moz-linear-gradient(top, rgba($black, 0) 0, rgba($black, 0.6) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-top(0, rgba($black, 0)), color-top(100%, rgba($black, 0.6)));
        background: -webkit-linear-gradient(top, rgba($black, 0) 0, rgba($black, 0.6) 100%);
        background: -o-linear-gradient(top, rgba($black, 0) 0, rgba($black, 0.6) 100%);
        background: -ms-linear-gradient(top, rgba($black, 0) 0, rgba($black, 0.6) 100%);
        background: linear-gradient(to bottom, rgba($black, 0) 0, rgba($black, 0.6) 100%);
        top: auto;
        height: 75%;
        transition: all .35s;
    }
}

/* avatar */
.avatar {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.avatar.avatar-sm {
    width: 20px;
    height: 20px;
}

.avatar.avatar-md {
    width: 40px;
    height: 40px;
}

.avatar.avatar-lg {
    width: 60px;
    height: 60px;
}

.avatar.avatar-xl {
    width: 80px;
    height: 80px;
}

.avatar.avatar-xll {
    width: 100px;
    height: 100px;
}

.avatar.avatar-xlll {
    width: 120px;
    height: 120px;
}

.avatar.avatar-xllll {
    width: 180px;
    height: 180px;
}

/* font size */
.font-sm {
    font-size: 13px;
}

.font-md {
    font-size: 15px;
}

.font-lg {
    font-size: 17px;
}

.font-xl {
    font-size: 21px;
}

.font-xll {
    font-size: 30px;
    line-height: 30px;
}

.font-xlll {
    font-size: 40px;
    line-height: 40px;
}

/* border-radius */
.b-radius-none {
    border-radius: 0 !important;
}

.b-radius-left-none {
    border-radius: 0 3px 3px 0 !important;
}

.b-radius-right-none {
    border-radius: 3px 0 0 3px !important;
}

.border-radius {
    border-radius: $border-radius !important;
}

.border-radius-top {
    border-top-left-radius: $border-radius !important;
    border-top-right-radius: $border-radius !important;
}

.border-radius-right {
    border-top-right-radius: $border-radius !important;
    border-bottom-right-radius: $border-radius !important;
}

.border-radius-bottom {
    border-bottom-right-radius: $border-radius !important;
    border-bottom-left-radius: $border-radius !important;
}

.border-radius-left {
    border-top-left-radius: $border-radius !important;
    border-bottom-left-radius: $border-radius !important;
}


.text-color-body-color {
    color: $body-color !important;
}

.bg-color-body-color {
    background-color: $body-color !important;
}

.text-color-primary {
    color: $primary !important;
}

.bg-color-primary {
    background-color: $primary !important;
}

.text-color-gray-2 {
    color: $gray-2 !important;
}

.bg-color-gray-2 {
    background-color: $gray-2 !important;
}

.text-color-gray-3 {
    color: $gray-3 !important;
}

.bg-color-gray-3 {
    background-color: $gray-3 !important;
}

.text-color-gray-4 {
    color: $gray-4 !important;
}

.bg-color-gray-4 {
    background-color: $gray-4 !important;
}

.text-color-gray-5 {
    color: $gray-5 !important;
}

.bg-color-gray-5 {
    background-color: $gray-5 !important;
}

.text-color-gray-6 {
    color: $gray-6 !important;
}

.bg-color-gray-6 {
    background-color: $gray-6 !important;
}

.text-color-gray-7 {
    color: $gray-7 !important;
}

.bg-color-gray-7 {
    background-color: $gray-7 !important;
}

.text-color-gray-8 {
    color: $gray-8 !important;
}

.bg-color-gray-8 {
    background-color: $gray-8 !important;
}

.text-color-gray-9 {
    color: $gray-9 !important;
}

.bg-color-gray-9 {
    background-color: $gray-9 !important;
}


.text-color-green {
    color: $green !important;
}

.bg-color-green {
    background-color: $green !important;
}

.text-color-red {
    color: $red !important;
}

.bg-color-red {
    background-color: $red !important;
}

.text-color-blue {
    color: $blue !important;
}

.bg-color-blue {
    background-color: $blue !important;
}

.text-color-orange {
    color: $orange !important;
}

.bg-color-orange {
    background-color: $orange !important;
}

.round-img-wrap {
    background-color: #fff;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}


.text-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.long-shadow {
    //box-shadow: 1px 1px rgb(204 204 204 / 26%), 2px 2px rgb(204 204 204 / 21%), 3px 3px rgb(204 204 204 / 17%), 4px 4px rgb(204 204 204 / 15%), 5px 5px rgb(204 204 204 / 13%), 6px 6px rgb(204 204 204 / 11%), 7px 7px rgb(204 204 204 / 10%), 8px 8px rgb(204 204 204 / 9%), 9px 9px rgb(204 204 204 / 8%), 10px 10px rgb(204 204 204 / 7%), 11px 11px rgb(204 204 204 / 6%), 12px 12px rgb(204 204 204 / 5%), 13px 13px rgb(204 204 204 / 4%), 14px 14px rgb(204 204 204 / 4%), 15px 15px rgb(204 204 204 / 3%), 16px 16px rgb(204 204 204 / 2%), 17px 17px rgb(204 204 204 / 2%), 18px 18px rgb(204 204 204 / 1%), 19px 19px rgb(204 204 204 / 1%), 20px 20px rgb(204 204 204 / 0%), 21px 21px rgb(204 204 204 / 0%);
    @include long-shadow(box, #d5d5d5, 10, true, true);
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 39% 0%
    }
    50% {
        background-position: 62% 100%
    }
    100% {
        background-position: 39% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 39% 0%
    }
    50% {
        background-position: 62% 100%
    }
    100% {
        background-position: 39% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 39% 0%
    }
    50% {
        background-position: 62% 100%
    }
    100% {
        background-position: 39% 0%
    }
}

.border-radius-up {
    border-radius: 8px 8px 0 0 !important;
}

.border-radius-bottom {
    border-radius: 0 0 8px 8px !important;
}

.image-link {
    display: inline-block;
    text-decoration: none;

    &:hover {
        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
    }
}


.line-separator-theme-1 {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;

    &:before {
        content: "";
        background-color: $blue;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        left: 0;
        bottom: 0;
        z-index: 1;
        position: absolute;
    }

    &:after {
        content: "";
        width: 120px;
        height: 1px;
        bottom: 2.5px;
        left: 0;
        position: absolute;
        background: linear-gradient(to right, #e0e0e0 0, #e0e0e0 35%, #e0e0e0 65%, #FFF 100%);
        background: -ms-linear-gradient(left, #e0e0e0 0, #e0e0e0 35%, #e0e0e0 65%, #fff 100%);
        background: -o-linear-gradient(left, #e0e0e0 0, #e0e0e0 35%, #e0e0e0 65%, #fff 100%);
        background: -webkit-linear-gradient(left, #e0e0e0 0, #e0e0e0 35%, #e0e0e0 65%, #FFF 100%);
        background: -moz-linear-gradient(left, #e0e0e0 0, #e0e0e0 35%, #e0e0e0 65%, #fff 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e0e0e0), color-stop(35%, #e0e0e0), color-stop(65%, #e0e0e0), color-stop(100%, #FFF));
    }
}