//
// .scss
//

//Alert
.alert {
    &.alert-dismissible {
        padding: 8px 15px 8px 30px;
        .close {
            left: -10px !important;
            right: auto;
        }
    }
}
    
//Breadcrumb
.breadcrumb {
    .breadcrumb-item {
        margin-left: 0px !important;
        &:before {
            content: "\f141";
            font-family: 'Material Design Icons';
            color: $dark; 
            padding-left: 5px;
        }   
        &:after {
            display: none;
        }
        &:first-child {
            &:before {
                display: none;
            }
        }       
    }
}

//Pagination
.pagination {
    .page-item {
        &:last-child .page-link {
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        } 
        &:first-child .page-link {
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }              
}

//FAQ
.faq-container {
    .question {
        font-size: 20px;
    }
}

.faq-content {
    .card {
        .faq {           
            .card-header {
                padding-left: 40px !important;
                padding-right: auto !important;
                
            }
        }  
        a.faq[data-toggle=collapse]{
            &:before {
                left: 20px;
                right: auto;
            }
        }
    }
}
.nav {
    padding-right: 0;
    padding-right: auto;
}

//Processbar
.progress-box {
    .progress {
        .progress-value {
            left: -15px;
            right: auto;
        }
    }
}

//blockquote
.blockquote {
    border-right: 3px solid $gray-300;
    border-left: 0;
}

//Subscribe form
.subcribe-form {
    input {
        padding-left: 160px;
        padding-right: 30px;
    }
    button {
        left: 6px;
        right: auto;
    }
}
.input-group>.input-group-append>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.input-group>.form-control:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

//back to top
.back-to-top {
    left: 30px;
    right: auto;
}

//back-to-home
.back-to-home {
    left: 2%;
    right: auto;
}

// Loader
#preloader {
    #status {
        .spinner {
            .double-bounce1, .double-bounce2 {
                right: 0 !important;
                left: auto;
            }
        }
    }
}

//Blog(rtl css)
.blog {
    .author,
    .teacher {
        right: 5%;
    }
    .course-fee {
        left: 5%;
        right: auto;
    }
}
.sidebar {
    .widget {
        .widget-search, .searchform { 
            input[type="text"] {
                padding-left: 45px;
                padding-right: auto;
            }
            input[type="submit"] {
                left: 10px;
                right: auto;
            }
        }
        .widget-search {
            .searchform:after {
                left: 16px;
                right: auto;
            }
        }    
        .catagories {
            span {
                float: left !important;
            }
        }  
        .post-recent {
            .post-recent-content {
                padding-right: 10px;
                padding-left: auto;
            }
        }
    }
}
.media-list {
    .sub-comment {
        border-right: 2px dashed $gray-200;
        border-left: 0;
    }
}

//Contact 
.form-group {
    text-align: right;
    .icons {
        right: 18px;
        left: auto;
    }
}
.custom-control {
    padding-right: 1.5rem;
    padding-left: 0;
    &.custom-switch {
        padding-right: 2.25rem !important;
    }
}
.custom-control-label{
    &:before,
    &:after {
        right: -1.5rem;
    }
}
.form-check-inline {
    margin-right: 0;
    padding-left: .75rem;
}
.custom-control-inline {
    margin-left: 1rem;
    margin-right: 0;
}
.custom-switch .custom-control-label{
    &:before {
        right: -2.35rem;
    }
    &:after {
        left: calc(-2.25rem + 2px);
    }
}

.custom-select {
    padding: .375rem .75rem .375rem 1.75rem !important;
    background-position: left 0.75rem center!important;
}

//Modal
.modal-header .close {
    margin: -1rem auto -1rem -1rem !important;
}
.modal-footer{
    >:not(:last-child) {
        margin-left: .25rem;
        margin-right: 0;
    }
    >:not(:first-child) {
        margin-left: 0;
        margin-right: .25rem;
    }
}
// Features
.features {
    .image {
        &:before {
            left: -15px;
            right: auto;
            transform: rotate(222deg) !important;
        }
    }
}
.key-feature {
    .icon, .icons {
        margin-right: 0 !important;
    }
}
//home
.bg-animation-left {
    &:after {
        right: 0px;
        clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    }

    &.crypto-home {
        &:after {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 70% 100%);
        }
    }
}
.agency-wrapper {
    &:before {
        left: 54rem;
        right: auto;
        transform: rotate(135deg);
    }
}
//classic app
.classic-app-image {
    .bg-app-shape {
        &:after {
            right: -8rem;
            transform: rotate(60deg);
        }
    }
    .app-images {
        left: -20px;
        right: auto;
    }
}
.app-feature-shape-right {
    &:after {
        left: -5rem;
        transform: rotate(210deg);
    }
}
.app-feature-shape-left {
    &:after {
        right: -5rem;
        transform: rotate(150deg);
    }
}

//saas
.classic-saas-image {
    .bg-saas-shape {
        &:after {
            right: 0;
            transform: rotate(50deg);
        }
    }
}
.saas-feature-shape-left {
    &:after {
        right: -10rem;
        left: auto;
    }
}

.saas-feature-shape-right {
    &:after {
        left: -10rem;
        right: auto;
    }
}

//Pricing
.pricing-rates {
    &.best-plan { 
        .lable {
            left: -65px;
            right: auto;
            transform: rotate(-45deg);
        }
    }
}

//Testimonial
.no-js .owl-carousel, .owl-carousel.owl-loaded, .slick-slider {
    direction: ltr;
}
.customer-testi {
    &.media {
        img {
            margin-right: 16px !important;
            margin-left: auto !important;
        }
        .content {
            text-align: left !important;
        }
    }
}

//Job
.job-box {
    .head {
        left: 15px;
        right: auto;
    }
    .position {
        right: 15px;
        left: auto;
    }
}

//Work
.work-container {
    .content {
        right: 5% !important;
    }
    &.work-modern {
        .client, 
        .read_more {
            left: 5%;
            right: auto;
        }
    }
}

.courses-desc {
    .collection {
        top: 15px;
        right: 15px;
    }
    .preview {
        bottom: 15px;
        left: 15px;
    }
}

//Switcher
#style-switcher {
    .t-rtl-dark {
        display: none;
    }
    .t-ltr-dark {
        display: inline-block;
    }
}

//Social Media Marketing
.social-feature-left {
    &:before {
        left: -200px;
        right: auto;
    }
}
.social-feature-right {
    &:before {
        right: -200px;
        left: auto;
    }
}

// Responsive 
@media (min-width: 769px){    
    .bg-studio {
        &:after{
            left: 0px;
        }
    }
}
@media (max-width: 768px) {
    .agency-wrapper {
        &:before {
            left: 12rem;
        }
    }
    
    .app-feature-shape-right {
        &:after {
            left: -10rem;
        }
    }
    
    .app-feature-shape-left {
        &:after {
            right: -10rem;
        }
    }
}

@media (max-width: 767px) {
    .agency-wrapper {
        &:before {
            left: 0;
        }
    }
    .company-logo {
        float: none !important;
        text-align: right !important;
    }
}

@media (min-width: 576px){
    .text-sm-left {
        text-align: right !important;
    }

    .text-sm-right {
        text-align: left !important;
    }
}

@media (max-width: 575px) {
    .social-feature-left  {
        &:before {
            left: 60px;
            right: auto;
        }
    }

    .social-feature-right  {
        &:before {
            right: 60px;
            left: auto;
        }
    }
}