//  Base  colors, fonts etc...
@import "_base/_variables.scss";
@import "_base/_mixins.scss";
@import "_modules/_layouts.scss";
.tutor-fs-1{ font-size: 51px; line-height: 62px; }
.tutor-fs-2{ font-size: 40px; line-height: 52px; }
.tutor-fs-3{ font-size: 22px; line-height: 32px; }
.tutor-fs-4{ font-size: 20px; line-height: 25px; }
.tutor-fs-5{ font-size: 18px; line-height: 23px; }
.tutor-fs-6{ font-size: 16px; line-height: 30px; color: $color-content;}
.tutor-fs-7{ font-size: 14px; line-height: 30px; }
.tutor-fw-medium{@extend .bold-weight;}
.tutor-color-black { @extend .color-dark; }
/* ------------------------------------- */
/*   Course-filter (Isotope) ........... */
/* ------------------------------------- */
.course-grid, .course-slider {
	position: relative;
	margin: -15px;
  }
  .course-grid:after {
	content: "";
	display: block;
	clear: both;
  }
  .course-grid .course-item {
	float: left;
	width: 33.3333333333%;
	padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
    margin-top: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  .course-grid.pf_5_cols .course-item { width: 20%; }
  .course-grid.pf_4_cols .course-item { width: 25%; }
  .course-grid.pf_2_cols .course-item { width: 50%; }
  .course-grid.pf_1_cols .course-item { width: 100%;}

  .course-filter-wrapper{overflow: visible;}
  
.tutor-btn{border-radius:50px; font-weight:bold;}
.tutor-btn-primary{ color:#fff;}
/* Isotope Filtering **/
.course-filter{
    position: relative;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
    list-style: none;
    text-align: center;
    margin: 20px auto;
    padding: 0 15px;
    position: relative;
    z-index: 4;
    &:after {
        content: "";
        display: block;
        clear: both;
    }
    &.left { text-align: left; }
    &.right{ text-align: right; }

    a {
        @extend .font-family;
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin-right: 30px;
        line-height: 29px;
        letter-spacing: 0px;
        @extend .bold-weight;
        color: $color-font;
        font-size: 16px;
        will-change: transform;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        text-transform: capitalize;
        span {
            display: inline-block;
            transition: transform 1.05s cubic-bezier(0.3, 0.86, 0.36, 0.95), -webkit-transform 1.05s cubic-bezier(0.3, 0.86, 0.36, 0.95);
            will-change: transform;
        }
        &:before {
            content: attr(data-title);
            height: 100%;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            transform: translateY(110%);
            transition: transform 1.05s cubic-bezier(0.3, 0.86, 0.36, 0.95), -webkit-transform 1.05s cubic-bezier(0.3, 0.86, 0.36, 0.95);
        }
        &:hover , &:active , &:focus, &.active{ 
            @extend .color-main;
            &:before { transform: translateY(0); @extend .color-main; }
            span { transform: translateY(-125%); }
        }
    }

    li a:hover, li a.selected { @extend .color-main; }
    li:last-child a {margin-right: 0;  }
    li {display: inline-block;text-align: center;}
    li:last-child {margin-right: 0;}
    li:first-child {margin-left: 0; }
}
/* -------- wishlist ------- */
.wishlist-icon{
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 45px;
    text-align: center;
    border: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    @extend .color-dark;
    @extend .box-shadow2;
    a.tutor-course-wishlist-btn{ 
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        overflow: hidden;
        i.tutor-icon-bookmark-bold:before {color:#f8035d;}
        i.tutor-icon-bookmark-line:before{content: "";}
    }
}
/* ------------------------------------- */
/*   course-item   ..................... */
/* ------------------------------------- */
.course-item{
    .thumbnail{
        position: relative;
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
        max-height: 300px;
        img{
            object-fit: cover;
        }
    }
    .tutor-course-rating{
        display: block;
        .rating-star{
            display:inline-block;
            i{ margin: 0 2px; font-size: 13px;}
        }
        .rating-value{
            display: inline-block;
            margin-left: 8px;
            font-size: 14px;
        }
    }
    .course-price{
        .course-price{
            @extend .Vbold-weight;
        }
        span.origin-price {
            margin-right: 5px;
            opacity: 0.7;
            text-decoration:line-through;
        }
    }
    .post-title{
        display: inline;
        background-image: linear-gradient(transparent 95%, currentcolor 5%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        transition: all 1s;
        @extend .font-subtitle; 
        &:hover{
            background-size: 100% 100%;
        }
    }
    .course-meta{
        display: flex;
        list-style: none;
        padding: 0;
        margin-bottom: 0;
        li{
            font-size:14px; margin-right:15px;
            i { margin-right: 5px;}
        }
    }
}

.course-style-1, .tutor-widget-course{
    .course-item-inner{
        position: relative;
        background-color: #fff;
        overflow: hidden;
        margin-top:15px !important;
        margin-bottom: 15px;
        @extend .radius16;
        @extend .box-shadow;
        .thumbnail{
            @extend .bg-dark;
            max-height: 300px;
            padding: 0;
            overflow: hidden;
            max-height: 250px;
            padding: 0;
            overflow: hidden;
            margin: 15px 15px 0;
            border-radius: 15px;
            img{
                -webkit-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
                transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
            }
        }
    }
    .course-level{
        position: absolute;
        z-index: 9;
        text-align: center;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.2em;
        padding: 5px 10px;
        top: 30px;
        left: 30px;
        border-radius: 25px;
        text-transform: capitalize;
        background-color: rgba(255, 255, 255, 0);
        -webkit-backdrop-filter: blur(14px) brightness(92%);
        backdrop-filter: blur(14px) brightness(92%);
    }
    .inner{
        position: relative;
        padding: 30px;
        margin-top: 0;
        .content{margin-top:10px;}
    }
    .course-price{
        position: absolute;
        right: 30px;
        top: -30px;
        font-size: 13px;
        color: #fff;
        text-transform: uppercase;
        border-radius: 50%;
        width: 60px;
        min-height: 60px;
        line-height: 20px !important;
        padding: 10px;
        text-align: center;
        z-index: 2;
        transition: all .21s cubic-bezier(.5,.5,.4,.9);
        word-break: break-all;
        @extend .bg-color-main;
        @extend .center_vertical;
        .origin-price{display: none;}
        del{display: none;}
    }
    &:hover{
        .post-title{ background-size: 100% 100%; }
        .thumbnail img{
            opacity: .4;
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
        }
        .course-price{
            -ms-transform: scale(1.2) translateY(-10px);
            -moz-transform: scale(1.2) translateY(-10px);
            -o-transform: scale(1.2) translateY(-10px);
            -webkit-transform: scale(1.2) translateY(-10px);
            transform: scale(1.2) translateY(-10px);
        }
    }
}

//widget tutor-widget-course 
.tutor-widget-course{
    .course-item-inner{
        margin-top: 0 !important; border-radius: 25px; 
        .thumbnail img {
            border-top-right-radius: 15px !important;
            border-top-left-radius: 15px !important;
        }
    }
    .rating-star{ display: inline-block;}
    .rating-value { display: inline-block;margin-left: 8px; font-size: 14px; }
    .wishlist-icon{top: 25px;right: 25px;}
    .course-meta {
        display: flex; list-style: none; padding: 0;
        li {
            font-size: 14px; margin-right: 15px;
            i {margin-right: 5px;}
        }
    }
}

.course-style-2{
    .course-item-inner{
        margin-bottom: 15px;
        margin-top: 15px;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        @extend .border;
        @extend .radius25;
        .thumbnail{
            @extend .radius16;
            img{
                min-width: 100%;
                border-radius: 16px;
                -webkit-transform: scale(1.05);
                transform: scale(1.05);
                -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
                -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
                transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
            }
            > a.course-thumb:after {
                position: absolute;
                content: "";
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.3;
                border-radius: 16px;
            }
        }
        .course-price{
            position: absolute;
            color: #fff;
            flex-direction: column;
            row-gap: 2px;
            z-index: 99;
            font-size: 14px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: 0;
            right: 0;
            padding: 10px 25px;
            border-top-left-radius: 25px;
            background: var(--color-primary);
        }
        span.course-level, span.course-duration {
            font-size: 12px;
            @extend .bold-weight;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        span.course-duration{
            margin-left:5px;
        }
        span.course-level{
            margin-right: 15px;
            @extend .color-main;
            &:before{
                content: "";
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: var(--color-primary);
                margin-right: 10px;
                display: inline-block;
                transform: translateY(-2px);
            }
        }
        .inner{
            padding: 24px 30px 20px;
            .content{margin-top: 5px;}
        }
    }
    &:hover .course-item-inner{
        border-color: transparent;
        @extend .box-shadow2;
        .thumbnail img{  -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
        .post-title{ background-size: 100% 100%; }
        .course-price{ @extend .bg-blur; }
    }
}

.course-style-3{
    .course-item-inner{
        position: relative;
        margin-top: 25px;
        margin-bottom: 50px;
        border-radius: 25px;
        .thumbnail{
            position: relative;
            border-radius: 25px;
            overflow: hidden;
            height: 395px;
            max-height: 395px;
            img{
                height: 100%;
                width: 100%;
                -webkit-transform: scale(1.05);
                transform: scale(1.05);
                -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
                -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
                transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
            }
        }
        .course-rating{display:none;}
        .mo-course-price{
            width: 20%;
            display: inline-flex;
            flex-direction: column-reverse;
            border-top-width: 1px;
            border-top-style: solid;
            border-color: rgba(10, 29, 53, 0.1);
            margin-top: 10px;
            padding-top: 10px;
        }
        .course-price{
            font-size: 13px;
            bottom: 27px;
            right: 25px;
            text-align: right;
            @extend .color-main;
            span.origin-price{display:none;}
        }
        span.course-level {
            font-size: 12px;
            text-transform: uppercase;
            margin-right: 10px;
            padding: 0;
            color: var(--color-primary);
            letter-spacing: 1px;
            @extend .bold-weight;
            &:after{
                content: "";
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-left: 10px;
                display: inline-block;
                transform: translateY(-2px);
                @extend .bg-color-main;
            }
        }
        .mo-course-review-wrapper{
            margin-top: 10px;
            display: flex;
            .review-stars{top:0;}
        }
        .inner{
            position: absolute;
            padding: 15px 30px 15px 30px;
            border-radius: 25px;
            width: calc(100% - 20px);
            left: 0;
            bottom: -40px;
            z-index: 2;
            overflow: hidden;
            border: 1px solid #E0E0E0;
            padding: 25px;
            justify-content: space-between;
            background-color:#fff;
            margin: 0 10px;
            gap: 10px;
            .course-cat{
                position: relative;
                display: inline-block;
                color: #a0a0a0;
                letter-spacing: .04em;
                color: inherit;
                text-transform: uppercase;
                font-size: 12px;
                opacity: 0.5;
                a{display:none;}
                a:first-child { display:inline-block;}
            }
            .course-meta {
                margin-top: 10px;
                padding-top: 10px;
                margin-bottom: 0;
                border-top-width: 1px;
                border-top-style: solid;
                border-color: rgba(10, 29, 53, 0.1);
                width: 80%;
                display: inline-flex;
            }
        }
    }
    &:hover .course-item-inner{
        .thumbnail img{ zoom: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
        .post-title{ background-size: 100% 100%; }
    }
}

.course-style-4{ 
    .course-item-inner{
        position: relative;
        overflow: hidden;
        min-height: 350px;
        width: 100%;
        margin-top: 15px;
        margin-bottom: 15px;
        transition: transform .65s cubic-bezier(.23,1,.32,1);
        @extend .radius16;
        .img-perspective img{min-height: 350px;}
        .perspective-caption {
            pointer-events: visible;
            position: absolute;
            z-index: 3;
            left: 20px;
            bottom: 20px;
            width: calc(100% - 40px);
            padding: 20px 25px 20px;
            background-color: rgba(255, 255, 255, 0);
            -webkit-backdrop-filter: blur(14px) brightness(92%);
            backdrop-filter: blur(14px) brightness(92%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
        }
        .perspective_overlay{
            height: 80%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-dark) 100%);
        }
        .course-price{
            color: rgb(255, 255, 255);
            text-align: center;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 900;
            line-height: 1.2em;
            display: inline-block;
            margin-bottom: 10px;
            padding: 5px 15px;
            @extend .radius25;
            @extend .bg-dark;
        }
        .post-title{ 
            margin-top:10px;
            color:#fff;
            a, a:hover{color:inherit;}
        }
        .course-meta{ margin-bottom: 0;}
        .course-meta li {
            font-size: 13px;
            opacity: 0.7;
        }

    }
	&:hover{
        .course-item-inner{
            transform: scale3d(1.09,1.09,1);
            @extend .box-shadow2;
        }
        .img-perspective img {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
        .post-title{ background-size: 100% 100%; }
		.perspective-caption {
			-moz-transform: translateY(-65px);
			-ms-transform: translateY(-65px);
			-webkit-transform: translateY(-65px);
			transform: translateY(-10px);
		}
	}
}


.course-style-5{
    .course-item-inner{
        overflow: hidden;
        display: flex;
        background: rgba(255, 255, 255, 0.4);
        margin-top: 15px;
        margin-bottom: 15px;
        border: 1px solid #E9E9E9;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        @include single-transition(all, .3s, ease-in-out);
    }
	.content-wrap {
		padding: 30px;
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 0;
		justify-content: center;
        span.course-level {
            font-size: 10px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-right: 15px;
            color: var(--color-primary);
            &::before {
                content: "";
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: var(--color-primary);
                margin-right: 10px;
                display: inline-block;
                transform: translateY(-2px);
            }
        }
		.button{
            padding-bottom: 0;
			margin-bottom: 0;
            margin-top: 15px;
		}
		.icon-wrap {
			text-align: left;
            display: block;
			flex-grow: 1;
		}
		.post-title{
			flex-grow: 1;
            padding-bottom: 10px;
            float: left;
            @extend .font-sm-subtitle;
		}
	}
	.caption{
		position: relative;
		width: 50%;
		overflow: hidden;
		img{
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 100% !important;
            max-height: 290px;
			object-fit: cover;
			will-change: transform;
		}
        .course-price{
            position: absolute;
            color: #fff;
            flex-direction: column;
            row-gap: 2px;
            z-index: 99;
            font-size: 14px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
            padding: 5px 20px;
            border-radius: 10px;
            border-bottom-left-radius: 0;
            border-top-right-radius: 0;
            @include single-transition(all, .3s, ease-in-out);
            @extend .bg-blur;
            del{display: none;}
        }
	}
	.course-item-inner:hover{ 
        .course-thumb{
            img{ -webkit-transform: scale(1.05) translateX(2%); -ms-transform: scale(1.05) translateX(2%); transform: scale(1.05) translateX(2%);}
            &:after{ background-color: rgba(255, 255, 255, 0); opacity: 1;}
        }
        .course-price{ @extend .bg-color-main; }
	}
}

.course-style-6{
    .course-item-inner{
        overflow: hidden;
        display: flex;
        background-color: #fff;
        overflow: hidden;
        @extend .radius16;
        margin-top: 15px;
        margin-bottom: 15px;
        @extend .box-shadow;
        @include single-transition(all, .3s, ease-in-out);
    }
	.content-wrap {
		padding: 40px;
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
        .course-price{
            padding: 0 10px;
            display: inline;
            background: var(--color-primary);
            color: #fff;
            font-weight: 700;
            border-radius: 40px;
            -webkit-transform: rotate(-2deg);
            -ms-transform: rotate(-2deg);
            transform: rotate(-2deg);
            margin-bottom: 15px;
            width: fit-content;
        }
		.post-title{
			flex-grow: 1;
		}
        .content{margin-top:10px;}
        .course-item-price{
            color: #fff;
            text-align: center;
            align-items: center;
            justify-content: center;
            padding: 5px 10px;
            font-size: 13px;
            font-weight: 900;
            line-height: 1.2em;
            display: inline-block;
            margin-bottom: 10px;
            @extend .radius4;
            @extend .bg-color-main;
        }
        span.course-level {
            font-size: 12px;
            text-transform: uppercase;
            margin-right: 5px;
            padding-right: 5px;
            color: var(--color-primary);
            @extend .bold-weight;
            &:after{
                content: "";
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-left: 10px;
                background: currentColor;
                display: inline-block;
                transform: translateY(-2px);
            }
        }
        .course-duration{
            position: relative;
            display: inline-block;
            margin-top: 10px;
            color: #a0a0a0;
            letter-spacing: .04em;
            color: inherit;
            text-transform: uppercase;
            font-size: 12px;
        }
	}
	.caption{
		position: relative;
		width: 50%;
		overflow: hidden;
		img{
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 100% !important;
			object-fit: cover;
			will-change: transform;
			transition: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
		}
        .course-price{
            position: absolute;
            color: #fff;
            flex-direction: column;
            row-gap: 2px;
            z-index: 99;
            font-size: 14px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
            padding: 5px 20px;
            border-radius: 10px;
            border-bottom-left-radius: 0;
            @extend .bg-color-main;
        }
	}
	.course-item-inner:hover img{ 
        -webkit-transform: scale(1.05) translateX(2%);
            -ms-transform: scale(1.05) translateX(2%);
                transform: scale(1.05) translateX(2%);
	}
}
/* ------------------------------------- */
/*   course filter sidebar.............. */
/* ------------------------------------- */
/* mo-course-filter-sidebar */
.course-filter.filter-sidebar-column{
    text-align: left;
    margin-top: 0;
}
.mo-course-filter-sidebar{
    .widget-area-wrapper {
        background-color:#fff;
        padding: 30px 30px 20px;
        @extend .border;
        @extend .radius25;
        h5.widget-title {
            margin-bottom: 15px;
            position: relative;
            cursor: pointer;
            @extend .font-sm-subtitle;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 15px;
            line-height: 26px;
            font-weight: 400;
        }
        span.filter-cat-name {
            margin-left: 5px;
        }
        span.mo-filter-multicheck {
            margin-right: 5px;
        }
        span.filter-count{
            margin-left: 5px;
        }
        .input-search{
            height: 47px;
            width: 100%;
            font-size: 13px;
            background-color: transparent;
            box-shadow: none;
            vertical-align: middle;
            outline: 0;
            border: 1px solid rgba(10, 29, 53, 0.1);
            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            margin-bottom: 30px;
            @extend .radius25;
        }
        .mo-filter-content {
            margin-bottom: 20px;
        }
        .button{
            border: 0;
            height: 52px;
            width: 100%;
            line-height: 1.5em;
            padding: 0 25px;
            @extend .radius5;
            @extend .center_vertical;
        }
        .nori-filter-clear:after, .nori-filter-reset:after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.07;
            z-index: 1;
            background: var(--color-primary);
        }
    }
}
.filter-right-align{flex-direction:row-reverse;}
.filtered-courses{
    .mo-top-sorting-area{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    .mo-top-sorting-right{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        .mo-course-sorting{
            position: relative;
            margin-left: 15px;
            select {
                height: 37px;
                border-radius: 25px;
                font-size: 14px;
            }
        }
    }
    .layout-switcher {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        .mo-filter-type-text{
            font-size: 16px;
            font-weight: 600;
            margin-top: 4px;
            cursor: pointer;
        }
        ul.switcher-btn li .mo-filter-layout-trigger:hover{@extend .color-dark;}
        ul.switcher-btn li .mo-filter-layout-trigger.active{@extend .color-main;}
        ul.switcher-btn{
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            margin: -5px;
            padding-left: 10px;
            list-style: none;
            li{
                margin: 5px;
                width: 40px;
                height: 40px;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(10, 29, 53, 0.1);
                border-radius: 50%;
                .mo-filter-layout-trigger{
                    display: block;
                    color: #d1d1d1;
                    font-size: 16px;
                    line-height: 1;
                    cursor: pointer;
                    border: 0 !important;
                    margin: 0;
                    padding: 0;
                    i {padding-top:11px; margin-left:-2px;}
                }
            }
        }
    }
}
.mo-filter-type-text, .display-layout-grid, .display-layout-list {
    display: none;
}
.mo-filter-type-text.active, .display-layout-grid.active, .display-layout-list.active {
    display: flex;
    flex-wrap: wrap;
}
.filter-right-align .filter-sidebar-column {
    float: right;
}
.display-layout-grid .course-style-1 .course-item-inner{ margin-bottom:15px; margin-top:15px;}
.display-layout-grid .course-style-2 .course-item-inner{ margin-top:15px; margin-bottom:15px;}
.display-layout-grid .course-style-3 .course-item-inner{margin-bottom: 75px;}

/* nori-courses-searching */
.nori-courses-searching{
    position: relative;
    max-width:500px;
    margin: auto;
    input[type=text]{
        height: 55px;
        width: 100%;
        font-size: 14px;
        background-color: transparent;
        -webkit-font-smoothing: subpixel-antialiased;
        -webkit-appearance: none;
        display: inline-block;
        -webkit-appearance: none;
        box-shadow: none;
        vertical-align: middle;
        background: 0 0;
        outline: 0;
        padding-left: 30px;
        padding-right: 50px;
       // color: #fff;
        @extend .radius50;
        @include single-transition(all, 0.4s , ease-in-out);
    }
    .search-button, .nori-course-btn{
        background-color: transparent;
        border: none;
        position: absolute;
        z-index: 0;
        font-size: 0;
        outline: none;
        width: 50px;
        height: 50px;
        top: 3px;
        right: 0;
        @extend .radius50;
        &:before {
            font-family: FontAwesome;
            font-size: 14px;
            text-align: center;
            content: "\f002";
            position: absolute;
            font-weight: 400;
            display: block;
            width: 45px;
            height: 45px;
            line-height: 42px;
            z-index: 1;
            top: 3px;
            right: 5px;
            padding: 1px;
            color: #fff;
            @extend .radius50;
            @extend .bg-dark;
            @include single-transition(all, 0.4s , ease-in-out);
        }
        &:hover:before {
            @extend .bg-color-main;
        }
    }
}

/* course pagetitle **/
.tl_course_pagetitle.pagetitle-v1{min-height:130px;}
.tl_course_pagetitle.pagetitle-v2{
    margin-bottom: 0;
    .mo-course-index-archive{
        @extend .bg-blur;
        position: absolute;
        float: none;
        display: block;
        bottom: 0;
        width: 100%;
        left: 0;
    }
}
.tl_course_pagetitle .mo-course-index-archive{
    text-align: left;
    padding: 20px;
    .mo-course-archive-index-count{
        display: inline-block;
        margin-top: 10px;
        letter-spacing: .04em;
        color: inherit;
        text-transform: uppercase;
        font-size: 12px;
    }
    .mo-course-archive-search{
        input{
            border: 1px solid rgba(255, 255, 255, 0.1);
            &::placeholder{color:#fff;}
        }
    }
}
.mo-tutor-archive-courses{
    padding-top: 90px;
    padding-bottom: 60px;
}
.tutor-empty-state{
    margin-bottom: 90px;
    .tutor-fs-6{
        @extend .font-primary;
        @extend .font-sm-subtitle;
    }
}

/* ------------------------
 single coures
* ------------------------*/
/* header single coures */
.mo-course-page-header{
    .mo-course-header-breadcrumb{
        position: relative;
        margin-top: 10px;
        letter-spacing: .04em;
        color: inherit;
        text-transform: uppercase;
        font-size: 12px;
        a{color: inherit;}
    }
    .mo-course-title .post-title{
        clear: both;
        font-size: 3.2em;
        line-height: 1.21em;
        @extend .bold-weight;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0px;
    }
    .mo-course-header-meta-items{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-bottom: 0;
        padding: 0;
        > li{
            margin-right: 10px;
            font-size: 12px !important;
            line-height: 23px !important;
            text-transform: uppercase;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            border-radius: 3px;
            i{ margin-right: 8px;}
            a{color:inherit;}
        }
        li.category{
            padding: 2px 13px 2px 14px;
            color: #fff;
            background: var(--color-primary);
        }
        li.instructor{
            width: fit-content;
            font-size: 12px !important;
            line-height: 23px !important;
            text-transform: uppercase;
            background: #FFFFFF1A;
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            border-radius: 100px;
            padding: 6px 15px;
            font-weight: bold;
        }
        .tutor-ratings-stars {
            float: left;
        }
        .mo-course-review-wrapper{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
}

.mo-course-page-header.style-1{
    position: relative;
    padding-top: 160px;
    padding-bottom: 185px;
    background-image: none !important;
    &:before {
        content: "";
        background: #ccc;
        width: 100%;
        height: 100%;
        top: 0;
        display: block;
        position: absolute;
        pointer-events: none;
        background-image: linear-gradient(180deg, var(--color-primary), rgba(255, 255, 255, 0));
        opacity: 0.2;
    }
    &:after {
        content: "";
        height: 100px;
        width: 100%;
        background: #fff;
        position: absolute;
        border-top-right-radius: 100px;
        border-top-left-radius: 100px;
        bottom: 0;
    }
    .mo-course-header-breadcrumb-content{
        &:after, &:before{
            content: "";
            background-image: url('../images/clould.png');
            width: 100px;
            height: 100px;
            z-index: 2;
            position: absolute;
            background-repeat: no-repeat;
        }
        &:after{
            top: 35%;
            left: 20%;
        }
        &:before{
            top: 60%;
            left: 10%;
            opacity: 50%;
        }
    }
    .mo-course-header-breadcrumb{
        text-align: center;
    }
    .mo-course-title .post-title{
        text-align: center;
        max-width: 670px;
        margin: 0 auto 15px;
    }
    .mo-course-header-meta-items{
        justify-content: center;
    }
    .mo-course-header-meta-items{
       li.instructor{
            width: fit-content;
            font-size: 12px !important;
            line-height: 23px !important;
            text-transform: uppercase;
            background: #FFFFFF1A;
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            border-radius: 100px;
            padding: 6px 15px;
            font-weight: bold;
        }
       li.category{
            padding: 2px 13px 2px 14px;
            width: fit-content;
            color: #fff;
            font-size: 12px !important;
            line-height: 23px !important;
            text-transform: uppercase;
            border-radius: 3px;
            background: var(--color-primary);
       }
    }
    .mo-course-review-wrapper span{
        font-size: 12px !important;
        line-height: 23px !important;
        text-transform: uppercase;
        border-radius: 3px;
    }
}
.mo-course-page-header.style-2{
    padding-top: 150px;
    padding-bottom: 90px;
    margin-bottom: 50px;
    color: #fff;
    @extend .bg-dark;
    .mo-course-header-breadcrumb{color:rgba(255,255,255,0.5); margin-bottom:10px;}
    .mo-course-header-breadcrumb a{color:rgba(255,255,255,0.8);}
    .mo-course-title .post-title{color:#fff;width:60%;}
}
.mo-course-single-style-2  .mo-course-details-sidebar-inner {margin-top: -250px;}
.mo-course-page-header.style-3{
    background-image: unset !important;
    padding-top: 170px;
    .mo-course-header-meta-items{ justify-content: center;}
    .mo-course-breadcrumb-inner{
        text-align: center;
        margin-bottom: 90px;
    }
    .mo-course-title .post-title{
        font-size: 40px;
        line-height: 52px;
        margin-bottom: 15px;
        margin-top: 10px;
    }
    li.instructor{ border:1px solid #e4e4e4;}
}
.mo-page-title-area.style-4, .mo-page-title-area.style-5{
    position: relative;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden;
    &:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: .4;
        content: '';
        z-index: 1;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.45);
    }
    .container{
        text-align: center;
        max-width: 675px;
        color: #fff;
        margin: auto;
        z-index: 2;
        position: relative;
        .post-title{
            clear: both;
            margin: 10px auto 15px;
            font-size: 3.2em;
            font-style: normal;
            line-height: 1.21em;
            text-decoration: none;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 600;
            color: #fff;
        }
        .mo-breadcrumb-wrapper{
            letter-spacing: .04em;
            text-transform: uppercase;
            font-size: 12px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 700;
            a{ color: rgba(255, 255, 255, 0.9); }
        }
        .mo-course-header-meta-items{
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
    }
}
.mo-course-single-preview{
    margin-bottom: 50px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    .mo-course-details-card-preview{
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #ccc;
        height: 420px;
    }
    .mo-video-fancybox{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
}
.mo-page-title-area.style-4{
    padding-top: 100px;
    padding-bottom: 150px;
    margin: 90px 15px 0 15px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    margin-bottom: 50px;
    &:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: .4;
        content: '';
        z-index: 1;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.45);
    }
    &:after {
        content: "";
        width: calc(100% - 260px);
        height: 50px;
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 130px;
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        z-index: 1;
    }
}
.mo-page-title-area.style-5{
    padding-top: 175px;
    padding-bottom: 225px;
    background-attachment: fixed;
    &:after {
        content: "";
        width: 100%;
        height: 100px;
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top-right-radius: 100px;
        border-top-left-radius: 100px;
        z-index: 2;
    }
}

/* course details sidebar */
.mo-course-details-sidebar-inner {
    background-color: #fff;
    box-shadow: 0px 10px 50px 0px rgba(26, 46, 85, 0.07);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    margin-bottom: 60px !important;
    padding: 30px 30px 10px;
    border: 0;
    .tutor-video-player {
        margin-bottom: 15px;
        overflow: hidden;
        @extend .radius5;
    }
    .tutor-course-thumbnail{
        margin-bottom: 30px;
        overflow: hidden;
        @extend .radius5;
    }
    .nori-single-social-share {
        margin-top: 5px;
        border: 0;
    }
}
.mo-course-sidebar .mo-course-details-card-preview,
.mo-course-details-sidebar .mo-course-details-card-preview {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ccc;
    border-radius: 5px;
    height: 235px;
    position: relative;
}
.mo-course-details-sidebar-content{
    .widget-title {
        @extend .font-l-subtitle;
    }
}
ul.mo-course-meta-informations {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    li{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        margin: 0;
        border-width: 0;
        border-bottom-width: 1px;
        border-style: solid;
        @extend .borde-color;
        .mo-course-feature-item-label {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 15px;
            @extend .font-primary;
            @extend .bold-weight;
            @extend .color-dark;
            i{
                font-size: 18px;
                padding-right: 15px;
                max-width: 35px;
                line-height: 1;
                color: $color-content;
            }
        }
    &:last-child { border: 0; }
    .mo-course-feature-item-value{
        color: $color-content;
        font-size: 14px;
        .course-price{
                @extend .font-subtitle;
                @extend .color-main;
                del{
                    opacity: 0.6;
                    padding-right: 10px;
                    font-size: 18px;
                    text-decoration: line-through;
                }
            }
        }
    }
}
.mo-course-details-sidebar-buttons{
    margin-top: 30px;
    button.lp-button{
        width: 100%;
        border: none;
        color: #fff;
        overflow: hidden;
        font-size: 15px;
        text-transform: capitalize;
        min-height: 50px;
        letter-spacing: 0.5px;
        margin: 0 0 15px;
        padding: 0 30px;
        text-align: center;
        display: block;
        @extend .radius5;
        @extend .bold-weight;
        @extend .bg-color-main;
        @include single-transition(all, 0.4s , ease-in-out);
        &:hover{ @extend .bg-dark; }
    }
    button.lp-btn-wishlist.on{@extend .bg-dark;}
    form.enroll-course, form.purchase-course{ width:100%;}
    .lp-btn-wishlist{width: 100%;}
}
.nori-single-social-share{
    .share-title{
        margin-right: 15px;
        margin-top: 30px;
        font-size: 14px;
        font-weight: 700;
        margin-right: 15px;
        margin-top: 8px;
        float: left;
    }
    .share-links{
       float: none;
       padding: 0;
       display: block;
       width: 100%;
       height: 60px;
       a {
        position: relative;
        height: 40px;
        width: 40px;
        line-height: 33px;
        font-size: 17px;
        color:$color-black; 
        background-color: transparent;
        border: 1px solid #eaeaea;
        @extend .radius50;
        @extend .center_vertical;
        &.facebook {color:#42599e;}
        &.twitter  {color:#55acee;}
        &.linkedin {color:#0798cf;}
        &.pinterest{color:#fc3030;}
        &.whatsapp {color:#34af23;}
        i{margin: 0;}
        &:after {
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            display: block;
            left: -1px;
            top: 0;
            z-index: -1;
            border: 1px solid transparent;
            border-radius: 50%;
            box-sizing: border-box;
           }
        }
        a:hover { 
            z-index: 4;
            &:after { animation: mo-menu-circle-border-current 1s forwards; }
        }
    }
}
.mo-tl-course-progress{
    @extend .font-l-subtitle;
    @extend .font-primary;
    @extend .color-dark;
} 
.tutor-progress-value{
    @extend .bg-color-main;
}
.progress-percentage , .progress-steps, .tutor-enrolled-info-text{
    color: $color-content;
    font-size: 14px;
}   
.tutor-course-progress-wrapper{
    margin-top: 30px;
    margin-bottom: 30px;
}
.tutor-enrolled-info-date{
    @extend .bold-weight;
    @extend .color-main;
}
span.tutor-icon-purchase-mark {
    margin-top: 3px;
    font-size: 13px;
    line-height: 2;
    @extend .color-main;
}

/* ------------------------------------- */
/*   course details page  .............. */
/* ------------------------------------- */
.mo-course-details-page .tutor-nav {
    justify-content: center;
}
.mo-course-details-page .tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs) {
    @extend .borde-color;
}
.mo-course-details-page .tutor-nav a.tutor-nav-link {
    @extend .font-xsm-subtitle;
    @extend .color-dark;
    padding: 15px 25px;
    position: relative;
    margin: 0px 5px;
}
.mo-course-details-page .tutor-nav a.tutor-nav-link:hover {
   @extend .color-main;
}
.mo-course-details-page .tutor-course-details-tab {
    padding-bottom: 90px;
}
.mo-course-details-page .tutor-toggle-more-collapsed:before {
    z-index: 1;
}
@media only screen and (max-width: 767px) {
    .mo-course-details-page .tutor-course-details-tab {
        padding-top: 40px;
    }
}
.tutor-course-details-tab .tutor-course-details-widget {
    margin-top: 30px;
}
.tutor-course-details-tab .tutor-course-details-widget-list.tutor-color-black {
    color: #fff;
}
.tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs) .tutor-nav-link.is-active {
    border-bottom-color: var(--color-primary);
    @extend .color-main;
}
.tutor-dropdown-item.is-active,
.tutor-dropdown-item:hover, 
.tutor-dropdown-item:focus,
.tutor-iconic-btn-secondary {
    background-color: rgba(26, 182, 157, 0.1);
    @extend .color-main;
}
.tutor-course-details-instructors h3, .tutor-pagination-wrapper-replaceable h3, #tutor-course-details-tab-questions h3{
    @extend .font-l-subtitle;
}
.tutor-avatar {   
    box-shadow: none;
    .tutor-avatar-text{color:#fff;}
}
.tutor-row .tutor-fs-7{
    color: $color-content;
    font-weight: 400;
    line-height: 30px;
	font-size: 16px;
}
.tutor-card-list-item {
    overflow: hidden;
}
.tutor-card-list-item:nth-child(2n){
    background-color: transparent;
}
.tutor-review-list-item{
    .tutor-avatar-md {
        width: 75px;
        height: 75px;
    }
    .tutor-reviewer-name {
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 0;
    }
    .tutor-reviewed-on {
        color: #6a7c92;
        font-size: 14px !important;
    }
}
.tutor-card{
    border-radius: 25px;
    border-color: rgba(10, 29, 53, 0.1) !important;
    padding-bottom: 15px;
    @extend .border;
    @include single-transition(all, 0.4s , ease-in-out);
    .tutor-card-image-top, img{border-top-right-radius:25px !important;border-top-left-radius:25px !important;}
}
.tutor-quesanswer-askquestion textarea.tutor-form-control {
    min-height: 110px;
    border-radius: 25px;
    padding: 20px;
}
.tutor-ratings-stars>* { margin: 0 2px; }
.tutor-ratings-stars {font-size: 14px; }
.tutor-dashboard-profile-data{
    .tutor-row{border-top: 1px solid rgba(10, 29, 53, 0.1); padding-top:10px; margin-bottom:10px;}
    .tutor-color-secondary{font-family:$font-primary;@extend .bold-weight;}
}
.mo-course-details-page-content .tutor-ratings-stars span, .tutor-ratings-stars{
    @extend .star-color;
}
.tutor-ratings-progress-bar .tutor-progress-value {
    @extend .star-bg;
}
.mo-course-details-page-content{
    p, span {
        @extend .font-family;
        color: $color-content;
        font-style: normal;
        letter-spacing: 0;
        font-weight: 400;
        line-height: 30px;
        font-size: 16px;
    }
    p{ width: 100%;}
    .tutor-course-details-widget-title, .tutor-course-content-title{
        margin-top: 30px;
        margin-bottom: 15px;
        @extend .font-l-subtitle;
    }
    .tutor-course-details-widget-list{
        li {
            margin-bottom: 0;
            .tutor-icon-bullet-point:before {
                font-family: FontAwesome;
                content: "\f00c";
                font-size: 13px;
                line-height: 1;
                position: relative;
                top: -4px;
                margin-right: 5px;
            }
        }
    }
}

.tutor-tag-list li a{
    display: block;
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    text-transform: capitalize;
    width: fit-content;
    background-color: var(--color-grey);
    color: #6a7c92;
    padding: 5px 18px;
    margin: 0 5px 5px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    @include border-radius(50px);
    @include single-transition(all, 0.4s, ease-in-out);
    &:hover{
        color:#fff;
        @extend .bg-color-main;
    }
}

.tutor-avatar-text{ @extend .bg-color-main; }
.tutor-qna-user .tutor-fs-6{ @extend .font-xsm-subtitle; }
.tutor-qna-user .tutor-fs-7{ 
    letter-spacing: .04em;
    color: inherit;
    text-transform: uppercase;
    font-size: 12px;
    opacity: 0.5;
}

.tutor-qna-single-question .tutor-qa-chatlist .tutor-qna-chat {
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: 30px;
}
.tutor-qna-single-question .tutor-qa-chatlist .tutor-qna-chat .tutor-qna-text {
    font-size: 15px;
    line-height: 29px;
}
.tutor-qna-single-question .tutor-toggle-reply span{
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 15px;
    @include single-transition(all, 0.3s, ease-in-out);
    @extend .color-main;
}
.tutor-accordion-item-header{
    @extend .font-sm-subtitle;
    @extend .font-primary;
}
.tutor-course-content-list-item {
    padding: 10px 20px;
}
.tutor-accordion-item-header {
    padding: 20px 40px 20px 22px;
}
.tutor-accordion-item-header.is-active, .tutor-accordion-item-header:hover{
    @extend .color-main;
    background-color: #fff;
}
.tutor-course-content-list-item-title{
    margin-top: 5px;
}
.tutor-course-content-list-item-title a:hover{
    @extend .color-main;
}
.tutor-course-content-list-item:hover{
    @extend .bg-grey;
}
.tutor-accordion-item-header::after {
    @extend .color-main;
}
.tutor-accordion-item{
    @extend .border;
}
.tutor-course-content-list-item-icon {
    opacity: 0.5;
}
.tutor-color-primary{
    @extend .color-main;
}
.tutor-app-process-alert .tutor-primary{
    border-color: var(--color-primary) !important;
    border-radius: 25px;
}
.tutor-app-process-title.tutor-fs-3{
    @extend .font-title;
}
.tutor-instructor-application-process {
    margin-bottom: 90px;
}
/* ------------------------------------- */
/*   course form  ...................... */
/* ------------------------------------- */
button.tutor-btn, .tutor-bg-primary {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    margin: 0 0 10px 0;
    vertical-align: middle;
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    min-height: 40px;
    letter-spacing: 0.5px;
    border: 0;
    padding: 10px 30px;
    border-radius: 50px;
    @include single-transition(all, 300ms, linear);
    @extend .bg-color-main;
    &:hover, &:focus, &:active{ color:#fff; @extend .bg-dark; }
}
.tutor-btn[data-action="back"] {
    background: #000;
    margin-right: 5px;
    &:hover{ opacity: 0.8;}
}
.mo-tl-enroll-btn, .mo-tl-course-complete, .course-sidebar-btn{
    width: 100% !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    border-radius: 25px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    min-height: 50px;
    letter-spacing: 0.5px;
    border: 0 none;
    color: #fff;
    @include single-transition(all, 300ms, linear);
    @extend .bg-color-main;
    &:hover{ color:#fff; @extend .bg-dark; }
}
.mo-course-details-sidebar .course-sidebar-btn{line-height:3.1;}
.mo-course-details-sidebar .tutor-course-wishlist-btn{
    position: relative;
    width: 100% !important;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.5px; 
    text-align: center;
    line-height: 2.4;
    border-radius: 25px;
    overflow: hidden;
    &:after{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.07;
        z-index: 1;
        background: var(--color-primary);
    }
    &:hover{opacity:0.8;}
    &:focus{box-shadow:none;}
}
button.tutor-review-popup-cancel {
    margin-right: 15px;
    @extend .bg-dark; 
    &:hover{opacity: 0.8;}
}
.tutor-btn-outline-primary {
    @extend .color-main;
    @extend .border-color-main;
    &:hover, &:focus, &:active{
        color: #fff;
        @extend .border-color-main;
        @extend .bg-color-main;
    }
}
.tutor-btn{
    @extend .color-main;
}
.tutor-btn-secondary{
    position: relative;
    border: 0;
    background:transparent;
    overflow: hidden;
    @extend .color-main;
    @include single-transition(all, 300ms, linear);
    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        @extend .bg-color-main;
        @include single-transition(all, 300ms, linear);
    }
    &:hover, &:focus, &:active{
        @extend .bg-color-main;
        &:before{opacity: 0;}
    }
}
.tutor-btn-secondary[disabled], .tutor-btn-secondary.disabled {
    background:transparent;
    &:before{ background: rgba(0,0,0,0.6);}
}
/* ------------------------------------- */
/*   Dashboard  ........................ */
/* ------------------------------------- */
.tutor-dashboard.tutor-frontend-dashboard {
    margin-top: 130px;
}
.tutor-dashboard .tutor-frontend-dashboard-header {
    position: relative;
    padding-bottom: 25px;
    padding: 200px 50px 30px;
    border-radius: 25px;
    margin-bottom: 90px;
    @extend .bg-dark;
    &:after{
        content: "";
        display: block;
        width: 100%;
        height: 80%;
        position: absolute;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-dark) 100%);
        bottom: 0;
        left: 0;
        border-radius: 25px;
    }
    .tutor-header-left-side, .tutor-header-right-side{z-index: 1;}
    .tutor-dashboard-header-avatar{
        position: absolute;
        bottom: -50px;
        left: 50px;
        width: 200px;
        height: 200px;
        border: 8px solid #fff;
        border-radius: 50%;    
        .tutor-avatar-xl {
            width: 100%;
            height: 100%;
        }
    }
    .tutor-user-info {
        padding-left: 200px;
    }
    .tutor-dashboard-header-username{
        color:#fff;
        @extend .font-subtitle;
    }
    .tutor-ratings-average, .tutor-ratings-count{
        color:rgba(255,255,255,0.8);
    }
    .tutor-btn{
        color:#fff;
        background:var(--color-dark);
        border-color:var(--color-dark);
        @include single-transition(all, 300ms, linear);
        &:hover{
            color:#fff;
            @extend .bg-color-main;
            @extend .border-color-main;
        }
    }
}
.tutor-dashboard .tutor-frontend-dashboard-maincontent ul.tutor-dashboard-permalinks:before{border: 0;}

.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a {
    font-size: 15px;
    line-height: 25px;
    padding: 3px 0;
    @extend .bold-weight;
}
.tutor-dashboard-left-menu {
    padding-left: 0 !important;
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
    padding: 50px;
    margin-right: 0;
    @extend .radius25;
    @extend .bg-grey;
}
.tutor-dashboard-content{
    padding: 50px;
}
.tutor-dashboard-menu-divider-header{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    @extend .bold-weight;
}
.tutor-dashboard .tutor-dashboard-title{
    @extend .font-l-subtitle;
}
.tutor-iconic-btn-secondary:hover, .tutor-iconic-btn-secondary:focus, .tutor-iconic-btn-secondary:active, .tutor-avatar-text, 
.tutor-react-datepicker .react-datepicker__day--keyboard-selected {
    @extend .bg-color-main;
}
.tutor-nav-link:hover, .tutor-nav-link.is-active, .tutor-round-box,
.tutor-btn-ghost:hover, .tutor-btn-ghost:focus, .tutor-btn-ghost:active,
.tutor-table tr td>a:not(.tutor-btn):not(.tutor-iconic-btn):not(.quiz-manual-review-action):hover, .tutor-table tr td .tutor-table-link:hover,
.tutor-course-card .tutor-course-name a:hover, .tutor-meta a:hover, .tutor-meta a:focus, .tutor-meta a:active,
.tutor-dashboard .tutor-dashboard-content .tutor-dashboard-qna-vew-as.current-view-student .tutor-form-toggle-label.tutor-form-toggle-checked{
    @extend .color-main;
}
.tutor-radio-select{border-radius:50px;}
select.tutor-form-control, .tutor-form-select{border-radius: 25px;}
.tutor-radio-select .tutor-form-check-input{padding:0;margin-left:15px;}
.tutor-course-single-content-wrapper input.tutor-form-check-input.tutor-form-check-circle{padding:0 !important;}
.tutor-form-check input.tutor-form-check-input{padding: 5px;}
.tutor-course-card .tutor-course-bookmark { top: 15px; right: 15px;}
.tutor-iconic-btn{
    width: 20px;
    background: transparent;
    @include single-transition(all, 300ms, linear);
    &:hover, &:focus, &:active{
        background-color: transparent;
        border-color: transparent;
        @extend .color-main;
    }
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a{
    @extend .color-main;
    background: transparent;
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a:hover {
    @extend .color-main;
    background: transparent;
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a .tutor-dashboard-menu-item-icon{
    @extend .color-main;
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item-icon {
    font-size: 16px;
    opacity: 0.3;
    @include single-transition(all, 300ms, linear);
    @extend .color-dark;
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover {
    background: transparent; .tutor-dashboard-menu-item-icon{opacity: 1;}
}
.tutor-round-box{
    @extend .bg-grey;
}
.tutor-dashboard-header-username, .tutor-dashboard-menu-item, .tutor-dashboard-title, .popular-courses-heading-dashboard, .tutor-nav-link{
    @extend .font-primary;
    @extend .bold-weight;
}
.tutor-dashboard .tutor-dashboard-content .tutor-dashboard-qna-vew-as.tutor-form-toggle .tutor-form-toggle-control {
    border: 1px solid var(--color-primary);
}
.tutor-dashboard .tutor-dashboard-content .tutor-dashboard-qna-vew-as.current-view-instructor .tutor-form-toggle-label.tutor-form-toggle-checked {
    color:var(--color-primary) !important;
}
.tutor-dashboard .tutor-dashboard-content .tutor-dashboard-qna-vew-as.current-view-student .tutor-form-toggle-control:before,
.tutor-dashboard .tutor-dashboard-content .tutor-dashboard-qna-vew-as.current-view-instructor .tutor-form-toggle-control:before {
    @extend .bg-color-main;
}
.tutor-table{border: 0;}
.tutor-table tr th{ letter-spacing: 0;@extend .font-primary; @extend .bold-weight; @extend .bg-grey;  }
.tutor-table tbody, .tutor-table td, .tutor-table tfoot, .tutor-table th, .tutor-table thead, .tutor-table tr, .tutor-table tr th:first-child{border-color: rgba(10, 29, 53, 0.1) !important;}
.tutor-card-body {
    padding: 20px;
    .tutor-meta.tutor-mt-16{ margin-top:0;}
    .tutor-meta.tutor-mb-8, .tutor-meta-value, .tutor-meta>*{
        letter-spacing: .04em;
        color: inherit;
        text-transform: uppercase;
        font-size: 12px;
        opacity: 0.7;
        @extend .bold-weight;
    }
}
.tutor-card-footer .price del{ opacity: 0.5; float: left; .amount{font-size: 12px;} }
.tutor-card-footer:not(.tutor-no-border) {
    padding-top: 5px;
    padding-bottom: 15px;
    border: 0;
}
.tutor-course-card{
    .tutor-course-name {
        font-size: 18px;
        line-height: 23px;
        margin-bottom: 15px;
    }
    .list-item-button .tutor-btn-outline-primary{
        color:#fff; border:0; min-height: 40px; background-color: var(--color-dark);;
        &:hover{ @extend .bg-color-main;}
    }
    .tutor-meta-course-by-cat{ margin-top: 0;}
    .tutor-course-progress .tutor-fs-6{font-size: 14px;}
    .tutor-progress-bar.tutor-mt-12{ margin-top: 5px;}
    .tutor-ratings{font-size: 14px;}
}
.tutor-btn.tutor-btn-ghost, .tutor-given-review-actions{
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
}
.tutor-dashboard-reviews-wrap{
    .tutor-card-header{border:0;border-top-right-radius:25px;border-top-left-radius:25px;@extend .bg-grey;}
    .tutor-card-title{ @extend .font-xsm-subtitle; @extend .color-dark;}
    .tutor-row.tutor-mb-24{margin-bottom: 5px;}
}
.tutor-nav-link {
    padding: 10px 0 20px 0;
    margin-right: 30px;
}
.tutor-pagination{
    border-radius: 25px;
    @extend .border;
    ul.tutor-pagination-numbers .page-numbers.prev, ul.tutor-pagination-numbers .page-numbers.next{ 
        border-radius: 50px;
        @extend .bg-grey;
        &:hover{ @extend .bg-color-main; }
    }
    ul.tutor-pagination-numbers .page-numbers.current:before{display: none;}
    ul.tutor-pagination-numbers .page-numbers.current, ul.tutor-pagination-numbers .page-numbers:hover{@extend .color-main;}
    ul.tutor-pagination-numbers .page-numbers:before{@extend .bg-color-main;}
}
.tutor-toggle-btn-icon {
    font-size: 12px !important;
    color: var(--color-dark);
}
span.tutor-toggle-btn-text{
    position: relative;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--color-dark);
    &:before, &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-color: currentColor;
    }
    &:before {
        -webkit-transform-origin: right;
        transform-origin: right;
        -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition-delay: .16s;
        transition-delay: .16s;
    }
    &:after{
        content: "";
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
        -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    &:hover:after {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transition-delay: .16s;
        transition-delay: .16s;
    }
    &:hover:before {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
}
/* ------------------------------------- */
/*   course single  .................... */
/* ------------------------------------- */
.tutor-course-single-content-wrapper{
   margin-top: 90px;
}
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header{
    @extend .bg-color-main;
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover, .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item:hover .tutor-course-topic-item-icon, .tutor-course-single-sidebar-wrapper .tutor-course-topic-item:hover .tutor-course-topic-item-title, .tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-icon, .tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active:after,
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn:hover{
    @extend .color-main;
}
.tutor-course-topic-single-header-title{
    color:#fff;
}
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn-secondary,
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn {
    background-color: rgba(255, 255, 255, .2);
    width: 40px;
    height: 40px;
}
.tutor-course-topic-single-header-title .tutor-iconic-btn{
    width: 40px;
    height: 40px;
}
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn{
    border: 1px  solid #fff!important;
    margin-bottom: 0;
    &:hover{
        background :#fff !important;
    }
}
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header .tutor-course-topic-title{
    font-size: 15px;
    @extend .bold-weight;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item-title{
    font-size: 14px;
    line-height: 22px;
}
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-footer{
    position: relative;
    background: transparent;
    border: 0;
    &:after{
        content: "";
        width: 100%;
        height: 100%;
        @extend .bg-color-main;
        top: 0;
        left: 0;
        position: absolute;
        z-index: -1;
        opacity: 0.05;
    }
}
.tl-related{
    .content{display:none;}
    .course-meta{margin-top:10px;}
}
/* tutor-registration */
.page.logged-in {
    .main-content{ min-height:750px;}
    h2{ @extend .font-l-subtitle;}
}
.tutor-login-wrap, #tutor-registration-wrap{
    margin-bottom: 90px;
    margin-top: 120px;
    padding: 30px;
    border-radius: 20px;
    @extend .box-shadow;
    .tutor-justify-between.tutor-mb-40{margin-bottom:20px;}
    .tutor-form-check input.tutor-form-check-input{margin-top:8px!important;}
}
.tutor-option-field-row label, .tutor-form-group label{
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
}
.tutor-form-group {
   margin-bottom: 20px;
}