@import url('https://fonts.googleapis.com/css?family=Cairo:400,600,700');

body.rtl {
    font-family: 'Cairo', sans-serif;
}

.rtl {
    direction: rtl;

    ul{
        padding: 0;
    }

    &.ls-closed{

        .sidebar {
            margin-right: -300px;
        }
    }

    &.overlay-open{
        .sidebar {
            margin-right: 0;
        }
    }

    &.ls-toggle-menu{
        .sidebar{
            margin-right: -300px;
        }
        section.content {
            margin-right: 0px;
        }
    }

    section.content {
        margin: 60px 250px 0px 0px;
    }
    &.menu_sm{
        section.content {
            margin-right: 80px;
        }
    }

    .right-sidebar {
        left: -300px;

        &.open {
            left: 0;
            right: auto;
        }
    }

    .sidebar {
        right: 0;
        left: auto;
    }
}
/* top headre scss */
.rtl{
    .dropdown-menu{

        .header{
            text-align: right;
        }

        ul.menu{

            &.tasks{
                h4{
                    small {
                        float: left;
                    }
                }
            }

            .menu-info {
                margin-right: 10px;
                margin-left: 0;
                text-align: right;
            }

            li{
                a {
                    text-align: right;
                }
            }
        }
    }
    
    .navbar-nav{

        .float-right{
            float: left !important;
        }

        >li {
            float: right;

            >a {
                margin-left: 0;
            }              
        }
    }

    .navbar{
        left: 0;
        right: auto;

        .navbar-header {
            float: right;
            padding-right: 15px;
            padding-left: 0;

            .navbar-brand{
                margin-right: 0px;
                margin-top: 14px;
                span{
                    margin-right: 10px;
                }
            }
        }
    
        .navbar-left {
            .dropdown-menu{
                right: 0;
                left: auto;
                &:before{
                   display: none;
                }
                li{
                    a{
                        text-align: right;
                        i{
                            margin-right: 0;
                            margin-left: 10px;
                        }
                    }
                    .media{
                        .media-body{
                            margin-left: 0;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
        a.menu-sm{
            margin-top: 19px;
        }

        .zmdi-arrow-right{
            display: block;
        }
        .zmdi-arrow-left{
            display: none;
        } 

    }
    &.menu_sm{
        .zmdi-arrow-right{
            display: none;
        }
        .zmdi-arrow-left{
            display: block;
        } 
    }
}
/* left menu scss */
.rtl{
    .sidebar{
        .menu{
            .list{                
                .header{
                    &:before{
                        left: auto;
                        right: 0;
                    }
                }
                .menu-toggle{
                    &:before, &:after{
                        left: 17px;
                        right: auto;
                    }
                }
                a{
                    span{
                        margin: 0  12px 0 0;
                    }
                }
                .ml-menu{
                    li{
                        a{
                            padding-right: 40px;
                            padding-left: 10px;                          
                            &::before{
                                content: '\f30f';
                                right: 14px;
                                left:auto;
                                transform: scale(-1,1);
                                -webkit-transform: scale(-1,1);
                                -ms-transform: scale(-1,1);
                            }
                        }
                    }
                }
            }
        }
    }
    &.menu_sm .sidebar .list li:hover{
        .ml-menu{
            &::before{
                left: 100%;
                right: auto;
                border-left-color: #fff;
                border-right-color: transparent;
            }
            left: auto;
            right: 50px;
            li{
                a{
                    text-align: right;
                }
            }            
        }
    }    
}
/* setting menu scss */
.rtl{
    .right_chat{
        ul{
            .media{
                .media-object{
                    margin-left: 10px;
                    margin-right: 0px;
                }
                .status{
                    right: 0;
                    left: auto;
                }
            }
        }
    }
    .right-sidebar{       

        #settings{
            .setting-list{
                li{
                    .switch{
                        left: 5px;
                        right: auto;
                    }
                }
            }
        }
    }
}
/* RTL Dashboard scss */
.rtl{

    .card{
        .header{

            .header-dropdown {
                right: auto;
                left: 12px;

                ul.dropdown-menu{
                    left: 0;
                    right: auto;
                }
            }
        }
        
    }

    .widget_2{

        li {
            border-left: 1px solid #eee;
            border-right: none;
            .text-right{
                text-align: left !important;
            }
            .text-small{
                font-size: 14px;
            }
        }
    }

    #line_chart {
        height: 375px !important;
    }

    .table{
        thead{
            tr{
                th, td {
                    text-align: right;
                }
            }
        }
    }
}
.rtl{
    .card{
        .header{
            h2::before{
                right:0px;
                left: auto;
            }
        }
    }
    .progress-container{
        .progress{
            .progress-value{                
                right: auto;
                left: 6px;
            }
        }
    }
    .activity{
        li{
            a{
                i{
                    float: right;
                }
                .info{
                    margin-right: 50px;
                    margin-left:0px;
                }
            }
        }
    }
    .checkbox label, .radio label{
        padding-right: 35px;
        padding-left: 0px;
    }
    .checkbox{

        label{
            &:before, &:after{
                right: 0;
                left: auto;
            }
        }
    }
    .form-control{
        border-radius:0 30px 30px 0 !important;
        border-left: transparent !important;       
    }
    .input-group-addon{
        border-radius:30px 0 0 30px !important;
        border-right: transparent !important;
        padding: 10px 0px 10px 18px !important;
    }
    .team-info li+li {       
        z-index: 99;
        position: relative;
    }
}
/*  overlay menu scss*/
.rtl{
    .overlay_menu .links ul li{
        a{
            padding: 6px 25px 6px 0px;   
            &:before{
                right: 0;
                left: auto;
                content: '\f2ff';
            }
            &:hover{
                &::before{
                    right: 10px;
                }
            }
        }
    }
}

@media screen and (max-width: 1169px) {
    .rtl{
        section.content {
            margin-right: 15px;
        }
        .navbar{
            .navbar-header{
                .navbar-brand{
                    margin-right: 30px;
                    margin-left: 10px;
                }
            }
        }        
    }

    .rtl.ls-closed .bars:after,
        .rtl.ls-closed .bars:before {
        right: 10px;
        left: auto;
    }

    .rtl .navbar>.container .navbar-brand,
        .rtl .navbar>.container-fluid .navbar-brand {
        margin-right: 20px;
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .rtl.ls-closed .bars:after, .rtl.ls-closed .bars:before {
        margin-right: 0;
    }
    .rtl .navbar .navbar-left .task  .dropdown-menu{
        right: -70px;
    }
}
