body {
    font-family: $mainFont;
    position: relative;
    text-align:$text-right;
    font-family: $mainFont;;
    overflow-x:hidden;
    direction:rtl;
}
* {
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
/*body::-webkit-scrollbar {
    display: none;
}*/
* {
    padding: 0;
    margin:0;
    box-sizing: border-box;
}

.trans {
    transition:all .5s ease-in-out;
}

.left {
    float:$float-left;
}

.right {
    float:$float-right;
}

ul {
    margin-bottom: 0;
}

.none {
    display:none;
}

.center {
    text-align: center;
}

p {
    margin: 20px 0;
    line-height: 1.5;
}

nav {
    height:fit-content;
}

.clearfix {
    clear: both;
}

.table-display {
    display: table !important;
    height: 100%;
}

.row-display {
    display: table-row;
}

.row {
    padding: 0;
}

.cell {
    display: table-cell;
}

.middle {
    vertical-align: middle;
}

.bottom {
    vertical-align: bottom;
}

.container {
    height: 100%;
}

.mark {
    color:$mainColor;
}

.mark_f {
    color:$mainColor;
    font-weight:bold;
}

.none-line {
    text-decoration:none;
}

.x-margin {
    margin: 100px 0;
}

.x-margin-top {
    margin-top: 100px;
}
.x-margin-bottom {
    margin-bottom: 100px;
}
.fill-w {
    width:100%;
}


.overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    right:0;
    background-color:rgba(13, 13, 13, .9);
}

.fill {
    width:100%;
}

.row {
    overflow: hidden;
}

h1, h2, h3, h4, h5 {
    font-weight:bold;
}

.ul-unstyle {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list {
    list-style: none;
    li {
        position: relative;
        padding:0 10px;
        &:before {
            content: "";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            background-color:$mainColor; /* Change the color */
            position: absolute;
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 5px; /* Also needed for space (tweak if needed) */
            right: 0;
            top: 10px; /* Also needed for space (tweak if needed) */
            height: 5px;
            border-radius: 50%;
          }
    }
}

.media {
    overflow: hidden;
    img {
        width: 100%;
    }
}

section.header {
    h1 {
        font-size: 50px;
    }
}


.social-list {
    @extend .ul-unstyle;
    width: fit-content;
    li {
        display: inline-block;
        margin: 0 10px;
        a, i {
            height: 40px;
            width:40px;
            display: block;
            line-height:36px;
            text-align: center;
            border: 2px solid $white;
            border-radius: 50%;
            color:#FFF;
            text-decoration: none;
            font-size: 18px;
            @extend .trans;
            &:hover {
                color:$gray;
                background-color: $white;
            }
        }
    }
}

.footer-list {
    overflow: hidden;
    li {
        overflow: hidden;
        &:not(:last-of-type) {
            margin-bottom: 15px;
        }
        i {
            width: 40px;
            text-align:center;
            color:$mainColor;
            float:$float-right;
            font-size: 20px;
        }
        p {
            width:calc(100% - 40px);
            float:$float-right;
            color:$white;
            margin: 0;
        }
    }

}

.logo-box {
    height: 50px;
    img {
        height: 100%;;
    }
}

.normal-list {
    li {
        a {
            font-size: 20px;
            text-decoration: none;
            @extend .trans;
            &:hover {
                color:$mainColor;
            }
        }
    }
}

.uk-input, .uk-select {
    height: 60px !important;
}

.card-tap {
    padding:30px;
    background-color: #f9f9f9;
}

.card {
    background-color:#f2f2f2;
    width: 100%;
    border: 1px solid #000;
    background-color:$white;
    font-weight: bold;
    .card-title {
        border-bottom: 1px solid #000;
        padding: 20px;
    }
    .card-info {
        padding: 20px;
        .card-img {
            height: 150px;
            width: 150px;
            margin:20px auto;
            border-radius: 50%;
            overflow: hidden;
            background-color:#FCFCFC;
            img {
                width:100%;
                border-radius: 50%;
                height:100%;
            }
        }
    }
}

// fade transition
.fade-enter-active, .fade-leave-active {
    transition-property: opacity;
    transition-duration: .25s;
}

.fade-enter-active {
    transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
    opacity: 0
}

.search-list {
    list-style:none;
    overflow: hidden;
    widtH:100%;
    padding: 0;
    li {
        background-color:$white;
        width: 100%;
        border-bottom: 1px solid $black;
        color:$black;
        a {
            padding: 15px;
            width: 100%;
            display: block;
            text-decoration:none;
            color:$black;
        }
    }
}

.card-tap {
    padding-#{$left}:50px !important;
}

form {
    input {
        width:100%;
    }
}

.input-icon {
    position: relative;
    .o-img {
        position: absolute;
        #{$left}:80px;
        top: 10px;
        @media #{$maxSmall} {
            #{$left}:50px;
        }
        img {
            height: 40px;
        }
    }
}

.uk-input, .uk-select {
    border-color:#bbbbbb;
}