/* star star rating animation */

    /* :root {
        --bg: #e3e4e8;
        --fg: #17181c;
        --primary: #255ff4;
        --yellow: #f4a825;
        --yellow-t: rgba(244, 168, 37, 0);
        --bezier: cubic-bezier(0.42, 0, 0.58, 1);
        --trans-dur: 0.3s;
        font-size: calc(24px + (30 - 24) * (100vw - 320px) / (1280 - 320));
   } */




.favorite {
    display: none;
}

        
.closeFilter--mobileSize {
    display: none;
}

.titleFilterOnePage {
    display: none;
    transform: translate(12px, 0px);
}
 
    .rating {
        margin: auto;
   }
    .rating__display {
        font-size: 1em;
        font-weight: 500;
        min-height: 1.25em;
        position: absolute;
        top: 100%;
        width: 100%;
        text-align: center;
   }
    .rating__stars {
        display: flex;
        padding-bottom: 0.375em;
        position: relative;
   }
    .rating__star {
        display: block;
        overflow: visible;
        pointer-events: none;
        width: 2em;
        height: 2em;
   }
    .rating__star-ring, .rating__star-fill, .rating__star-line, .rating__star-stroke {
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
   }
    .rating__star-ring, .rating__star-fill, .rating__star-line {
        stroke: var(--yellow);
   }
    .rating__star-fill {
        fill: var(--yellow);
        transform: scale(0);
        transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier);
   }
    .rating__star-stroke {
        stroke: #c7cad1;
        transition: stroke var(--trans-dur);
   }
    .rating__label {
        cursor: pointer;
        padding: 0.125em;
   }
    .rating__label--delay1 .rating__star-ring, .rating__label--delay1 .rating__star-fill, .rating__label--delay1 .rating__star-line, .rating__label--delay1 .rating__star-stroke {
        animation-delay: 0.05s;
   }
    .rating__label--delay2 .rating__star-ring, .rating__label--delay2 .rating__star-fill, .rating__label--delay2 .rating__star-line, .rating__label--delay2 .rating__star-stroke {
        animation-delay: 0.1s;
   }
    .rating__label--delay3 .rating__star-ring, .rating__label--delay3 .rating__star-fill, .rating__label--delay3 .rating__star-line, .rating__label--delay3 .rating__star-stroke {
        animation-delay: 0.15s;
   }
    .rating__label--delay4 .rating__star-ring, .rating__label--delay4 .rating__star-fill, .rating__label--delay4 .rating__star-line, .rating__label--delay4 .rating__star-stroke {
        animation-delay: 0.2s;
   }
    .rating__input {
        -webkit-appearance: none;
        appearance: none;
   }
    .rating__input:hover ~ [data-rating]:not([hidden]) {
        display: none;
   }
    .rating__input-1:hover ~ [data-rating="1"][hidden], .rating__input-2:hover ~ [data-rating="2"][hidden], .rating__input-3:hover ~ [data-rating="3"][hidden], .rating__input-4:hover ~ [data-rating="4"][hidden], .rating__input-5:hover ~ [data-rating="5"][hidden], .rating__input:checked:hover ~ [data-rating]:not([hidden]) {
        display: block;
   }
    .rating__input-1:hover ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
        stroke: var(--yellow);
        transform: scale(1);
   }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-ring, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-ring, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-ring, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-ring, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-ring {
        animation-name: starRing;
   }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
        animation-name: starStroke;
   }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-line, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-line, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-line, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-line, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-line {
        animation-name: starLine;
   }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-fill, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-fill, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-fill, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-fill {
        animation-name: starFill;
   }
    .rating__input-1:not(:checked):hover ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:not(:checked):hover ~ .rating__label:nth-of-type(2) .rating__star-fill, .rating__input-3:not(:checked):hover ~ .rating__label:nth-of-type(3) .rating__star-fill, .rating__input-4:not(:checked):hover ~ .rating__label:nth-of-type(4) .rating__star-fill, .rating__input-5:not(:checked):hover ~ .rating__label:nth-of-type(5) .rating__star-fill {
        fill: var(--yellow-t);
   }
    .rating__sr {
        clip: rect(1px, 1px, 1px, 1px);
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
   }
    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #17181c;
            --fg: #e3e4e8;
       }
        .rating {
            margin: auto;
       }
        .rating__star-stroke {
            stroke: #454954;
       }
   }
    @keyframes starRing {
        from, 20% {
            animation-timing-function: ease-in;
            opacity: 1;
            r: 8px;
            stroke-width: 16px;
            transform: scale(0);
       }
        35% {
            animation-timing-function: ease-out;
            opacity: 0.5;
            r: 8px;
            stroke-width: 16px;
            transform: scale(1);
       }
        50%, to {
            opacity: 0;
            r: 16px;
            stroke-width: 0;
            transform: scale(1);
       }
   }
    @keyframes starFill {
        from, 40% {
            animation-timing-function: ease-out;
            transform: scale(0);
       }
        60% {
            animation-timing-function: ease-in-out;
            transform: scale(1.2);
       }
        80% {
            transform: scale(0.9);
       }
        to {
            transform: scale(1);
       }
   }
    @keyframes starStroke {
        from {
            transform: scale(1);
       }
        20%, to {
            transform: scale(0);
       }
   }
    @keyframes starLine {
        from, 40% {
            animation-timing-function: ease-out;
            stroke-dasharray: 1 23;
            stroke-dashoffset: 1;
       }
        60%, to {
            stroke-dasharray: 12 12;
            stroke-dashoffset: -12;
       }
   }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* end star rating animation */

    body {
        text-align: unset;
    }

    .grid-course-search-items {
        margin: 0 0 40px 0;
    }

    .search-filter-course-search {
        margin: 20px 20px;
    }


    #filter-sort li.active {
        color: #ff4949;
    }


    .searchIcon {
        height: 30px;
    }

    .item-search {
        display: flex;
        flex-direction: row-reverse;
    }

    .searchIcon.filter + input {
        height: 16px;
        border-radius: 7px;
    }

    div#category,
    div#enrolment,
    div#tag {
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        margin-bottom: 10px;
    }

    /* div#category::-webkit-scrollbar-thumb,
    div#enrolment::-webkit-scrollbar-thumb,
    div#tag::-webkit-scrollbar-thumb {
        border-radius: 50px;
        background: #aeaeae;
    }

    div#category::-webkit-scrollbar-track,
    div#enrolment::-webkit-scrollbar-track,
    div#tag::-webkit-scrollbar-track {
        background: #dfdfdf;
        border-radius: 50px;
    }

    div#category::-webkit-scrollbar,
    div#enrolment::-webkit-scrollbar,
    div#tag::-webkit-scrollbar {
        width: 5px;
    }

    .scroll-course::-webkit-scrollbar {
        width: 5px;
    }

    .scroll-course::-webkit-scrollbar-thumb {
        background: #aeaeae;
        border-radius: 10px;
    }

    .scroll-course::-webkit-scrollbar-track {
        background: #dfdfdf;
        border-radius: 50px;
    } */

    /* .scroll-course {
        overflow-y: auto;
        height: calc( 100vh - -170px);
        padding: 40px;
    } */


    div#courses {
        /* background: rgba(235, 235, 235, 1); */
        padding: 0px;
        /* border-radius: 30px; */
        overflow: hidden; 
        width: 100%;
        height: fit-content;
    }

    .info-course-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .my-slide {
        width: 100%;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-gap: 23px;
    }

    .items-course-search {
        /* background: white; */
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        height: 100%; 
        overflow: hidden;
    }

    .full-slide-item {
        border-right: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
    }

    .full-slide-item a img {
        border-radius: 15px;
        height: 220px;
        object-fit: contain;
    }

    .slide-item-content {
        width: 100%;
        /* height: 100%; */
        display: inline-block;
        padding: 10px 10px 0px;
    }


    .slide-item-content h3 {
        text-align: right;
        margin: 5px auto 20px;
    }

    .slide-item-content h3 a {
        color: #565555;
        /* font-weight: bold; */
    }

    .slide-item-content div {
        /* color: #aaa;
        font-weight: 100;
        text-align: right;*/
        font-size: 14px;
    }

    /* .swiper-slide {
        opacity: 0.4;
        transition: 0.3s;
    }

    .swiper-slide-active + div {
        filter: grayscale(0);
        opacity: 1;
        width: 460px !important;
    } */

    .slide-info-itme {
        text-align: left;
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
    }

    /* .slide-cost-item {
        display: flex;
        align-items: center;
    } */

    .slide-cost-item span {
        color: #404040;
    }

    .btn-course-to-cart a span {
        font-size: 0.8rem !important;
        color: #fff;
    }

    /* .btn-course-to-cart {
        transition: 0.3s !important;
        opacity: 0;
        height: 0;
    } */

    .slide-cost-item {
        cursor: pointer;
    }

    .slide-cost-item:hover .btn-course-to-cart {
        opacity: 1;
        height: 40px;
    }

    .slide-cost-item:hover .btn-course-to-cart a {
        margin-top: 7px !important;
    }

    .btn-course-to-cart a {
        margin: 0px !important;
        display: block;
        box-shadow: unset !important;
        border: unset;
        padding: 5px 10px;
        background: transparent;
        border-left: 1px solid #0000001c;
        border-radius: 0px 5px 5px 0px;
    }

    .btn-course-to-cart a:hover,
    .btn-course-to-cart a:focus {
        background: #efefef;
        border-color: #0000001c;
    }

    .btn-course-to-cart a svg {
        width: 20px;
        opacity: 0.5;
    }

    .slide-cat-item {
        font-size: 0.9rem;
        color: #4a4a4a;
    }

    .link-page-course {
        margin: 20px 0 0px;
        padding: 10px 0;
        border-top: 1px solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #007aff;
    }

    .link-page-course svg {
        width: 20px;
        transition: 0.3s;
        opacity: 0;
        position: relative;
        left: 0px;
    }


    .link-page-course:hover svg {
        opacity: 1;
        left: -10px;
    }

    .link-page-course svg path {
        color: #939393;
    }

    .teacher-this-course {
        display: flex;
        align-items: center;
        margin: 10px 0;
    }

    .teacher-this-course img {
        width: 30px;
        height: 30px;
        object-fit: cover;
        border-radius: 50%;
    }

    .teacher-this-course span {
        font-size: 0.8rem;
        font-weight: 400;
        color: rgba(169, 169, 169, 1);
    }

    .description {
        font-size: 14px;
        text-align: justify;
        padding: 0 10px;
        line-height: 1.8;
        letter-spacing: 0.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .title-course {
        line-height: 1;
        margin: 0;
    }

    .title-course a {
        color: #2e2e2e;
        font-size: 15px;
        font-weight: 700;
    }

    .free-cost {
        color: #404040 !important;
        font-weight: 300;
        font-size: 14px;
    }

    path.text-toman {
        fill: #404040;
    }

    .slide-info-itme {
        margin: 0;
    }

    .slide-item-content {
        padding: 10px 0px 10px;
        /* border-top: 1px solid rgb(221 221 221); */
        margin-top: 0px;
    }


    .slide-item-info-course {
        padding: 0 10px;
    }

    .items-course-search>a>svg {
        border-radius: 15px;
    }

    .items-course-search>a {
        padding: 7px;
    }

    span.list-group-item {
        border: unset;
        padding-right: 0;
    }

    span.field-label {
        display: none;
    }

    /* .label-status-course+.field-value::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M30.6668 5H9.33345C8.14567 5.04348 8.02332 5.5551 6.21145 6.42319C5.39957 7.29127 4.9641 8.4453 5.00012 9.63333V11.6667C5.00012 12.1087 5.17571 12.5326 5.48827 12.8452C5.80083 13.1577 6.22475 13.3333 6.66678 13.3333C7.10881 13.3333 7.53273 13.1577 7.84529 12.8452C8.15785 12.5326 8.33345 12.1087 8.33345 11.6667V9.63333C8.30405 9.3302 8.391 9.02723 8.57669 8.78583C8.76238 8.54443 9.03292 8.38267 9.33345 8.33333H30.6668C30.9673 8.38267 31.2378 8.54443 31.4235 8.78583C31.6092 9.02723 31.6962 9.3302 31.6668 9.63333V30.3667C31.6962 30.6698 31.6092 30.9728 31.4235 31.2142C31.2378 31.4556 30.9673 31.6173 30.6668 31.6667H28.3334C27.8914 31.6667 27.4675 31.8423 27.1549 32.1548C26.8424 32.4674 26.6668 32.8913 26.6668 33.3333C26.6668 33.7754 26.8424 34.1993 27.1549 34.5118C27.4675 34.8244 27.8914 35 28.3334 35H30.6668C31.8546 34.9565 32.9769 34.4449 33.7888 33.5768C34.6007 32.7087 35.0361 31.5547 35.0001 30.3667V9.63333C35.0361 8.4453 34.6007 7.29127 33.7888 6.42319C32.9769 5.5551 31.8546 5.04348 30.6668 5Z' fill='black'/%3E%3Cpath d='M6.43326 23.3333C6.20852 23.3614 5.99187 23.435 5.79654 23.5496C5.6012 23.6643 5.43128 23.8175 5.29714 24C5.16301 24.1825 5.06747 24.3904 5.01637 24.611C4.96527 24.8317 4.95967 25.0604 4.99992 25.2833C5.06963 25.7181 5.30858 26.1077 5.66459 26.3669C6.02059 26.6261 6.46471 26.7338 6.89992 26.6666C7.54167 26.5769 8.1955 26.6387 8.80907 26.8471C9.42264 27.0555 9.97888 27.4046 10.4333 27.8666C11.0425 28.4737 11.4507 29.2531 11.6028 30.0996C11.7548 30.9461 11.6433 31.8189 11.2833 32.6C11.0955 33 11.0743 33.4583 11.2243 33.8739C11.3743 34.2896 11.6833 34.6287 12.0833 34.8166C12.3039 34.9139 12.5421 34.9649 12.7833 34.9666C13.102 34.9674 13.4144 34.8768 13.6832 34.7054C13.952 34.5341 14.166 34.2893 14.2999 34C14.8781 32.771 15.1132 31.4087 14.9805 30.057C14.8478 28.7054 14.3522 27.4148 13.5461 26.3218C12.74 25.2287 11.6534 24.3739 10.4013 23.8479C9.14917 23.3218 7.77813 23.144 6.43326 23.3333Z' fill='black'/%3E%3Cpath d='M6.43324 16.8003C5.99121 16.8622 5.59187 17.0971 5.32307 17.4534C5.05426 17.8098 4.93802 18.2583 4.9999 18.7003C5.06179 19.1423 5.29673 19.5417 5.65305 19.8105C6.00937 20.0793 6.45788 20.1955 6.8999 20.1336C8.43814 19.9171 10.0057 20.062 11.4782 20.5567C12.9507 21.0514 14.2877 21.8823 15.3832 22.9836C16.6625 24.2533 17.5749 25.8452 18.0237 27.5908C18.4726 29.3365 18.4413 31.171 17.9332 32.9003C17.8669 33.1125 17.8437 33.3359 17.865 33.5573C17.8863 33.7786 17.9517 33.9935 18.0573 34.1892C18.1629 34.3849 18.3066 34.5575 18.4799 34.6968C18.6533 34.8361 18.8527 34.9393 19.0666 35.0003C19.2212 35.0246 19.3786 35.0246 19.5332 35.0003C19.9051 35.0151 20.2713 34.905 20.5734 34.6875C20.8754 34.47 21.096 34.1577 21.1999 33.8003C21.8391 31.6541 21.9274 29.3815 21.4568 27.1921C20.9861 25.0028 19.9716 22.9673 18.5069 21.2734C17.0422 19.5795 15.1744 18.2818 13.0759 17.5C10.9775 16.7182 8.71589 16.4776 6.4999 16.8003H6.43324Z' fill='black'/%3E%3Cpath d='M6.66667 33.3333C7.58714 33.3333 8.33333 32.5871 8.33333 31.6667C8.33333 30.7462 7.58714 30 6.66667 30C5.74619 30 5 30.7462 5 31.6667C5 32.5871 5.74619 33.3333 6.66667 33.3333Z' fill='black'/%3E%3C/svg%3E");
        margin-left: 5px;
    } */

    span.field-value {
        display: flex;
        align-items: center;
    }

    .date-course {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .date-course::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='23' viewBox='0 0 40 38' fill='none'%3E%3Cpath d='M19.9999 3.16699C16.7036 3.16699 13.4812 4.0956 10.7404 5.83539C7.9996 7.57518 5.86339 10.048 4.60193 12.9412C3.34047 15.8343 3.01042 19.0179 3.6535 22.0893C4.29659 25.1606 5.88394 27.9819 8.21481 30.1962C10.5457 32.4105 13.5154 33.9185 16.7484 34.5294C19.9814 35.1404 23.3325 34.8268 26.378 33.6284C29.4234 32.43 32.0264 30.4006 33.8577 27.7969C35.6891 25.1931 36.6666 22.1319 36.6666 19.0003C36.6666 16.9211 36.2355 14.8622 35.3979 12.9412C34.5603 11.0202 33.3327 9.27473 31.785 7.80447C30.2374 6.33421 28.4001 5.16793 26.378 4.37223C24.3559 3.57653 22.1886 3.16699 19.9999 3.16699ZM19.9999 31.667C17.3628 31.667 14.785 30.9241 12.5923 29.5323C10.3997 28.1404 8.6907 26.1622 7.68153 23.8476C6.67236 21.5331 6.40832 18.9863 6.92279 16.5292C7.43726 14.0721 8.70714 11.8151 10.5718 10.0436C12.4365 8.27217 14.8123 7.06579 17.3987 6.57705C19.9851 6.0883 22.666 6.33914 25.1024 7.29785C27.5387 8.25656 29.6211 9.88008 31.0862 11.9631C32.5513 14.0461 33.3333 16.4951 33.3333 19.0003C33.3333 22.3597 31.9285 25.5816 29.428 27.957C26.9275 30.3325 23.5361 31.667 19.9999 31.667Z' fill='black'/%3E%3Cpath d='M24.6663 19.3158H19.6663V14.5658C19.6663 14.1458 19.4907 13.7431 19.1782 13.4462C18.8656 13.1492 18.4417 12.9824 17.9997 12.9824C17.5576 12.9824 17.1337 13.1492 16.8212 13.4462C16.5086 13.7431 16.333 14.1458 16.333 14.5658V20.8991C16.333 21.319 16.5086 21.7217 16.8212 22.0187C17.1337 22.3156 17.5576 22.4824 17.9997 22.4824H24.6663C25.1084 22.4824 25.5323 22.3156 25.8449 22.0187C26.1574 21.7217 26.333 21.319 26.333 20.8991C26.333 20.4792 26.1574 20.0764 25.8449 19.7795C25.5323 19.4826 25.1084 19.3158 24.6663 19.3158Z' fill='black'/%3E%3C/svg%3E");
        margin-left: 10px;
    }

    div#category .form-check.mt-2 {
        width: fit-content;
        display: inline-block;
        background: rgba(235, 235, 235, 1);
        padding: 0px;
        border-radius: 10px;
        color: rgba(0, 0, 0, 1);
        font-weight: 500;
        transition: 0.3s;
    }

    div#category .form-check.mt-2:hover{
        background: rgb(221, 221, 221);
    }

    div#category .form-check.mt-2 label {
        margin: 0 !important;
        padding: 10px;
        font-size: 0.8rem;
        font-weight: 400;
        cursor: pointer;
    }

    div#category .form-check.mt-2 input:checked,
    div#category .form-check.mt-2 input:checked+label {
        display: none;
    }

    div#category .form-check.mt-2 input {
        opacity: 0;
    }

    input#tag-9::before,
    input#tag-10::before {
        content: "";
        width: 19px;
        height: 19px;
        background: #ddd;
        display: block;
        border-radius: 10px;
        position: absolute;
        right: -3px;
        top: -4px;
    }

    input#tag-9:checked::before,
    input#tag-10:checked::before {
        background: rgba(2, 145, 176, 1);
    }

    /* #tag label {
        color: rgba(0, 0, 0, 1);
        font-weight: 500;
    } */

    /* .Favorite-course.like-class .favorite::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='20px' height='20px' viewBox='0 0 63.000000 92.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,92.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E%3Cpath d='M53 862 c-43 -34 -45 -55 -38 -445 l7 -369 24 -10 c21 -10 37 -3 139 65 63 43 120 77 126 77 7 0 63 -32 125 -70 113 -69 149 -81 172 -58 14 14 16 240 5 567 -6 196 -7 204 -31 232 l-24 29 -241 0 c-214 0 -245 -2 -264 -18z'/%3E%3C/g%3E%3C/svg%3E");
        position: absolute;
        right: -3px;
        bottom: 0;
    } */ 

    .filter-items svg {
        cursor: pointer;
    }

    #filter-sort svg {
        fill: #424750;
    }

    div#filterItems {
        border: unset;
        border-radius: 0;
    }

    span.filterItem {
        margin-left: 10px;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 0.8rem;
    }

    .card-header-filter {
        background: unset !important;
        border-bottom: unset;
        align-items: center;
        padding: 0;
    }

    .card-header-filter span:first-child {
        font-weight: bold;
        font-size: 1.2rem;
        color: rgba(172, 172, 172, 1);
    }

    .title-filter-in-sidebar {
        font-size: 1.2rem;
    }

    span.deleteFilterItems {
        font-size: 0.8rem;
        color: red;
    }

    .filter-items {
        padding-right: 0;
        padding-left: 0;
    }


    .Guest-user-mark {
        position: relative;
        cursor: help;
    }

    .Guest-user-mark::after {
        content: "";
        border-top: 5px solid black;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 5px solid transparent;
        position: absolute;
        top: -10px;
        right: 3px;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .Guest-user-mark::before {
        content: "برای ذخیره درس، وارد سایت شوید";
        font-size: 11px;
        position: absolute;
        top: -31px;
        right: -3px;
        width: 165px;
        background: black;
        color: #ffff;
        padding: 2px 5px;
        border-radius: 5px;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .Guest-user-mark:hover::before,
    .Guest-user-mark:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* new style code */
    

    div#g-page-surround {
        overflow: visible;
    }

    #sidebar-course-search { 
        position: sticky;
        top: 10px;
        height: max-content;
        /* reform for responsive */
        min-width: 270px;
        width: 300px;
    }


    #form-side {
        border: 1px solid #e0e0e2;
        border-radius: 8px;
        font-size: 0.9rem;
        background: #fff;   
    }

    .button-filter {
        padding: 15px 0px;
        background: unset;
        border-bottom: 1px solid #f0f0f1;
        width: 100%;
        text-align: right;
        display: flex;
        justify-content: space-between;
    }

    .button-filter-list {
        padding: 0 20px;
    }

    .list-filter {
        padding: 12px;
        cursor: pointer;
    }

    #enrolment,
    #tag,
    #category {
        padding: 0 20px;
    }

    .check-list-filter {
        border-bottom: 1px solid #f0f0f1;
        cursor: pointer;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        color: #3f4064;
    }

    .filter {
        cursor: pointer;
    }

    .button-filter:focus {
        outline: none;
    }

    .check-list-filter input {
        transform: scale(1.2);
    }

    #filter-sort {
        list-style: none;
        border-bottom: 1px solid #e0e0e2;
        padding-bottom: 0px;
        width: 100%;
        margin-bottom: 10px;
    }

    #filter-sort li {
        padding: 5px 10px !important;
        font-size: 0.8rem;
        cursor: pointer;
        text-wrap: nowrap;
        /* border-left: 1px solid #e0e0e2; */
    }

    ul#optionSort--icon {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    #filterSidebar--mobile li,
    #optionSort--icon li  {
        padding: 0 3px !important;
    }

    ul#filterSidebar--mobile {
        display: none;
        margin: 0 0 0 10px;
    }

    #filter-sort li:first-child {
        padding: 0px 13px 0px 10px;
    }

    ul#list-filter-sort {
        list-style: none;
        margin: 0;
        display: flex;
        align-items: center;
        margin: 0px;
        overflow: auto;
        padding-bottom: 15px;
    }

    #count-course {
        list-style: none;
        margin: 10px;
    }

    div#title-filter {
        color: #404040;
        padding: 10px 5px 10px;
        font-size: 17px;
        font-weight: 700;
    }

    #search-side {
        padding: 0 20px;
    }

    div#search-side input::placeholder {
        font-size: 0.8rem;
        color: #9f9f9f;
        font-weight: 300;
    }

    span.searchIcon.filter {
        position: absolute;
        left: 0;
        background: url();
        border-color: #ffffff;
        border: unset;
        border-radius: 0;
        display: flex;
        color: #999898;
        padding: 8px 6px;
    }

    /* cost filter */


    input[type='range'] {
        width: 80%;
        height: 30px;
        overflow: visible;
        cursor: pointer;
        outline: none;
    }

    /* .button-filter-list {
    margin-top: 50px;
} */

    .range_min.light.left {
        display: block;
        margin-top: 30px;
    }

    .filter-button-cost {
        margin-top: 40px;
    }

    /* test toggle checkbox */


    label.filter-checkbox {
        direction: ltr;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        --slide-distance: 1.2rem;
        --slider-size: 10px;
        --slider-padding: 0.2rem;
        --transition-duration: 200ms;
    }

    .checkbox-slider {
        flex-shrink: 0;
        width: 40px;
        padding: 2px;
        border-radius: 9999px;
        /* background-color: #d1d5db; */
        border: 2px solid #a1a3a8;
        transition: background-color var(--transition-duration);
    }

    .checkbox-slider::after {
        content: "";
        display: block;
        width: var(--slider-size);
        height: var(--slider-size);
        background-color: #a1a3b0;
        border-radius: 9999px;
        transition: transform var(--transition-duration);
        transform: translateX(2px);
    }

    .filter-checkbox input:checked+.checkbox-slider {
        background-color: #19bfd3;
        border-color: #19bfd3;
    }

    .filter-checkbox input:checked+.checkbox-slider::after {
        transform: translateX(22px);
        background-color: #fff;
    }

    .filter-checkbox input:focus-visible+.checkbox-slider {
        outline-offset: 2px;
        outline: 2px solid #06c;
    }

    .filter-checkbox input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* double range slider */
    .irs--round .irs-bar {
        background-color: #00C2C0;
    }

    .irs--round .irs-handle {
        background-color: #00C2C0;
        border-color: #00C2C0;
        box-shadow: 0px 0px 0px 5px rgba(0, 194, 192, 0.2);
    }

    .irs--round .irs-handle.state_hover,
    .irs--round .irs-handle:hover {
        background-color: #00C2C0;
    }

    .irs--round .irs-handle {
        width: 16px;
        height: 16px;
        top: 29px
    }

    .irs--round .irs-from,
    .irs--round .irs-to,
    .irs--round .irs-single {
        background-color: transparent;
        color: #666666;
    }

    .irs--round .irs-from:before,
    .irs--round .irs-to:before,
    .irs--round .irs-single:before,
    .irs--round .irs-min,
    .irs--round .irs-max {
        display: none;
    }

    #range {
        padding: 0 20px;
        max-width: 100%;
    }

    #range .cost-filter {
        width: 100%;
        border: unset;
        border-bottom: 1px solid #e0e0e2;
        border-radius: unset;
        box-shadow: unset;
        text-align: center;
        font-size: 1.3rem;
        font-weight: bold;
    }

    #range span.irs-to {
        direction: ltr;
    }

    #range .irs--round .irs-handle {
        background-color: #19bfd3;
        border: unset;
        cursor: grab;
    }

    #range .irs--round .irs-handle:active {
        cursor: grabbing;
    }

    #range .irs--round .irs-bar {
        background-color: #00C2C0;
    }

    #range .irs--round .irs-from,
    #range .irs--round .irs-to {
        display: none;
        background-color: #8d8d8d;
    }

    #range .irs--round .irs-from::before,
    #range .irs--round .irs-to::before {
        border-top-color: #8d8d8d;
    }

    div#txt-cost-bottom-navar {
        font-size: 0.8rem;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        color: #a3a3a3;
    }

    .filter-button-cost {
        padding: 5px 30px;
        border-radius: 10px;
        display: block;
        margin: 0 auto 20px;
    }

    button#more {
        text-align: center;
        border: 1px solid #e0e0e2;
        display: flex;
        justify-content: center;
        border-radius: 8px;
        background: #f5f5f5;
        font-size: 0.9rem;
        font-weight: 300;
        color: black;
    }

    /* live search */

    #filter,
    #search-side input {
        width: 100%;
        box-shadow: unset;
        border-radius: 8px;
        border-color: #e0e0e2;
        font-size: 0.8rem;
        padding: 13px 40px 13px 0;
        height: auto;
        box-sizing: border-box;
    }

    /* 
    .header {
        display: flex;
    }

    .header p {
        flex: 1;
        font-weight: bold;
    } */

    /* .results {
        display: flex;
    }

    .results p { 
        flex: 1;
    } */

    .disableScrollBody {
        overflow: hidden;
    }    

    input#filter::placeholder {
        font-size: 0.8rem;
        color: #adadad;
    }

    #live-search {
        position: relative;
        width: 100%;
        margin: 15px 0px 0px;
    }


    #search-in-course-filter svg {
        position: absolute;
        top: 50%;
        transform: translate(-10px, -50%);
    }

    /* reform for responsive */
    div#course-search {
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
}

div#live-search svg {
    transform: translate(-10px, -36px);
}

.UserComments {
    font-size: 11px;
}


    @media (min-width: 1500px) {
        .row-cols-xl-3>* {
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }
    }

    @media only screen and (max-width: 1024px) {

        button.button-filter > svg {
            transform: rotate(90deg);
        } 

        form#form-side {
            border-top: 1px solid #eeee;
        } 

        #range {
            display: none !important;
        }

        .title-filter {
            color: #404040;
            padding: 10px 5px 10px;
            font-size: 17px;
            font-weight: 700;
        }

        .filterParent {
            display: none !important;
        }

        ul#filterSidebar--mobile {
            display: flex;
            border: 1px solid #00000017;
            margin: 0 5px;
            border-radius: 30px;
            padding: 5px 10px !important;
        }

        #list-filter-sort > li {
            border: 1px solid #00000017;
            margin: 0 5px;
            border-radius: 30px;
        }

        #list-filter-sort > li.active {
            background: #ff000017;
        }

        #form-side {
            border: unset;
            border-radius: unset;
       }
       #sidebar-course-search {
            position: fixed;
            top: 100%;
            left: 0;
            background: #fff;
            z-index: 1;
            width: 100%;
            height: 100%;
            overflow: auto;
            /* display: none; */
            transition: 0.5s;
       }
       #sidebar-course-search.openFilter--mobileSize {
            top: 0;
            left: 0;
       }
       /* mobile size */
       .loadFilterOnePage ~ .filterParent,
       .loadFilterOnePage ~ #range {
            background: #fff;
            position: fixed;
            left: 0;
            top: 0px;
            width: 100%;
            min-height: 100%;
            z-index: 5;
            /* padding-top: 80px; */
            display: block !important;
        }
        .titleFilterOnePage {
            display: flex;
        }
    }
       
       

    @media only screen and (max-width: 992px) {
        .scroll-course {
            padding: 15px;
        }
    }

    @media only screen and (max-width: 680px) {
        .full-slide-item {
            width: 100%;
            flex: 0 100%;
            max-width: 100%;
            padding: 0 !important;
        }
        .items-course-search {
            flex-direction: row;
        }
        .items-course-search svg {
            height: 100% !important;
        }
        .items-course-search > a {
            width: 120px;
            min-width: 120px;
            max-width: 100%;
        }
        #g-main .g-content {
            margin: 0;
            padding: 0;
        }
        .title-course a {
            font-size: 11px;
        }
        .teacher-this-course span,
        span.field-value,
        .favorite-course-search div {
            font-size: 9px;
        }
        .info-course-content {
            width: 100%;
            justify-content: flex-start;
        }
        .btn-course-to-cart > a {
            display: none;
        }
        .items-course-search,
        .full-slide-item a img {
            height: unset;
            margin-bottom: 0;
        }
        .Favorite-course .like-button .heart-icon {
            width: 40px;
            height: 40px;
            background-position: 4px;
            background-size: 1050px;
        }
        .slide-item-content div {
            font-size: 10px;
            font-weight: 500;
        
        }
        .like-button .likes-amount {
            font-size: 9px !important;
        }
        .Favorite-course .like-button {
            padding: 1px 5px;
            border-radius: 5px;
        }
        .Favorite-course .like-button .heart-bg {
            width: 15px;
            height: 15px;
        }
        .favorite-course-search .rate:not(:checked)>label {
            font-size: 15px;
        }
        .favorite-course-search > div {
            flex-direction: row !important;
            justify-content: space-between;
            align-items: center;
        }
        .slide-item-info-course {
            padding: 0; 
        }
    }

    @media only screen and (max-width: 450px) {
        div#courses {
            padding: 10px;
        }
    }

    @media only screen and (max-width: 400px) {
        .scroll-course {
            padding: 0px;
        }
    }