@media screen and (min-width : 1200px) {
    .CustomContainer {
        max-width: 1100px;
    }
}

@media screen and (min-width : 1400px) {
    .CustomContainer {
        max-width: 1150px;
    }
}

@media screen and (min-width : 1600px) {
    .CustomContainer {
        max-width: 1300px;
    }
}

@media screen and (min-width : 1800px) {
    .CustomContainer {
        max-width: 1500px;
    }
}

@media screen and (min-width : 2000px) {
    .CustomContainer {
        max-width: 1700px;
    }
}

.CourseBox {
    display: block;
    color: #000;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    transition: 0.2s;
}

    .CourseBox:hover {
        color: #000;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.10);
        transition: 0.2s;
    }

    .CourseBox .ImageBox img {
        max-height: 250px;
        border-radius: 4px;
    }

    .CourseBox .Title {
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .CourseBox .teacher {
        font-size: 16px;
        color: #4f4f4f;
    }

    .CourseBox .Price {
        font-size: 20px;
        font-family: 'Sahel-PN';
    }

.SearchInput{
    width : 100%;
    border : 1px solid #c1c1c1;
    border-radius : 6px;
    outline : none;
    padding : 4px 10px;
}

    .SearchInput:focus {
        border-color: #1994b0;
    }

#PriceRangeSlider .ui-slider-handle {
    outline: none;
    border-color: #a3d2dd;
}

#PriceRangeSlider .ui-state-active {
    background: #1994b0;
    border-color: #1994b0;
    transform : scale(1.1);
    outline: none;
    transition : transform 0.2s;
}

#PriceRangeSlider .ui-widget-header {
    background: #6abbce;
}


.paginationjs .paginationjs-pages li {
    border: none;
    outline: none;
    border-radius: 5px;
    display: inline-flex;
    padding: 0px 3px;
    float: none;
    text-align: center;
    align-items: center;
    user-select: none;
    font-family: 'Sahel-PN';
}

    .paginationjs .paginationjs-pages li:first-child > a,
    .paginationjs .paginationjs-pages li:last-child > a {
        background: transparent;
        font-size: 22px;
        color: #096c82;
    }

    .paginationjs .paginationjs-pages li:first-child:hover > a {
        transform: translateX(-3px);
        color: #096c82;
        transition: 0.2s linear;
    }

    .paginationjs .paginationjs-pages li:last-child:hover > a {
        transform: translateX(3px);
        color: #096c82;
        transition: 0.2s linear;
    }

    .paginationjs .paginationjs-pages li.disabled a,
    .paginationjs .paginationjs-pages li.disabled:hover a {
        color: #6abbce;
        transform: translateX(0px);
    }

    .paginationjs .paginationjs-pages li > a {
        display: block;
        text-decoration: none;
        border-radius: 12px;
        background: #1994b0;
        color: #fff;
        font-size: 18px;
        padding: 3px 10px;
        border: none;
        outline: none;
        transition: 0.2s;
    }

    .paginationjs .paginationjs-pages li:hover > a {
        color: #fff;
        border-radius: 8px;
        transition: 0.2s;
    }

    .paginationjs .paginationjs-pages li.active > a {
        transform: translateY(-5px);
        box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.10);
        background: #096c82;
        opacity: 1;
        transition: 0.2s;
    }

    .paginationjs .paginationjs-pages li.active:hover > a {
        border-radius : 12px;
    }