div.sidebar {

    height: fit-content;

    position: unset;

    height: 100%;

}



div.content__container h3 {

    max-width: 100%;

}



.sidebar .sidebar__sections--wrap {

    margin-bottom: 100px;

}



.sidebar .sidebar__sections--wrap .sidebar__sections--item a {

    color: var(--primary-color);

}



.content__container .fs-24 p {

    font-size: 24px;

    line-height: 30px;

    font-weight: 300;

    margin-bottom: 10px;

    color: var(--primary-color);

}



.content__container .fs-24 {

    margin-bottom: 80px;

}



.search-courses {

    display: flex;

    align-items: center;

    padding-bottom: 60px;

    border-bottom: 1px solid #e1e1de;

}



.search-courses input {

    flex-grow: 1;

    padding: 16px 24px;

    font-size: 22px;

    line-height: 1;

    font-weight: 400;

    color: #000;

    border: 1px solid #e1e1de;

    border-radius: 0px;

    outline: none;

}



.search-courses input:focus {

    color: var(--primary-color);

    border: 1px solid var(--primary-color);

}



.search-courses input::placeholder {

    color: #8a8a8a;

}



.search-courses button.btn-search img {

    width: 20px;

    height: auto;

    object-fit: contain;

    transition: all 0s linear;

}



.search-courses button.btn-search:hover img {

    filter: brightness(0) invert(1);

    transition: all 0s linear;

}



.search-courses .btn-search {

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 0;

    background-color: var(--primary-color);

    color: #ffad1d;

    border: 1px solid var(--primary-color);

    padding: 0 24px;

    height: 60px;

    cursor: pointer;

    transition: all 0s linear;

}



.search-courses .btn-search span {

    font-size: 18px;

    line-height: 1;

    font-weight: 500;

}



.search-courses .btn-search:hover {

    color: #fff;

    transition: all 0s linear;

}



.search-courses .btn-search:active {

    background-color: #ffad1d;

    border: 1px solid #ffad1d;

    color: var(--primary-color);

}



.search-courses button.btn-search:active img {

    filter: invert(9%) sepia(6%) saturate(2709%) hue-rotate(217deg)

        brightness(47%) contrast(118%);

}



/* result*/



.search-title {

    font-size: 24px;

    line-height: 32px;

    font-weight: 400;

    color: var(--primary-color);

    display: inline-block;

    margin: 36px 0;

}



.search-item {

    background-color: #ceedf6;

    padding: 24px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.search-item .search-item--desc {

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 4; /* number of lines to show */

    line-clamp: 4;

    -webkit-box-orient: vertical;

}



.search-item .search-item--tags {

    list-style: none;

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 4px 20px;

}



.search-item .search-item--title a,

.search-item .search-item--title {

    font: 400 14px/16px 'halyard-display', sans-serif;

    font-size: 28px;

    line-height: 32px;

    font-weight: 400;

    color: var(--primary-color);

    margin: 0px 0 16px;

}



.search-item .search-item--desc,

.search-item .search-item--tags {

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    color: #222;

}



.search-item .search-item--desc {

    margin-bottom: 36px;

}



.search-item .search-item--tags li {

    padding-bottom: 0;

}



.search-item .search-item--tags li a {

    color: #222;

    transition: all 0.3s linear;

    font-variant-numeric: normal;

}



.search-item .search-item--tags li a:hover {

    color: var(--primary-color);

    transition: all 0.3s linear;

}



.search-item .j_btn-explore::after {

    top: 11px;

}



.search-list .row > div {

    margin-bottom: 36px;

}



/* helping */



.helping {

    margin-top: 120px;

}



.group-checkbox {

    display: block;

    position: relative;

    /* padding-left: 8px; */

    margin-bottom: 16px;

    cursor: pointer;

    font-size: 16px;

    line-height: 24px;

    font-weight: 400;

    color: #8a8a8a;

    font-variant-numeric: normal;

}



/* form checkbox */



.sidebar__form .by {

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    color: #8a8a8a;

    padding-bottom: 16px;

    display: block;

}



/* Hide the default checkbox */

input[type='checkbox'] {

    visibility: hidden;

}



/* Creating a custom checkbox

based on demand */

.geekmark {

    position: absolute;

    top: 3px;

    left: 0;

    height: 18px;

    width: 18px;

    background-color: #fff;

    border: 1px solid #8a8a8a;

}



/* Specify the background color to be

shown when checkbox is checked */

.group-checkbox input:checked ~ .geekmark {

    background-color: var(--primary-color);

}



.group-checkbox input:checked ~ .label {

    color: var(--primary-color);

}



/* Checkmark to be shown in checkbox */

/* It is not be shown when not checked */

.geekmark:after {

    content: '';

    position: absolute;

    display: none;

}



/* Display checkmark when checked */

.group-checkbox input:checked ~ .geekmark:after {

    display: block;

}



/* Styling the checkmark using webkit */

/* Rotated the rectangle by 45 degree and 

showing only two border to make it look

like a tickmark */

.group-checkbox .geekmark:after {

    left: 6px;

    bottom: 5px;

    width: 6px;

    height: 10px;

    border: solid white;

    border-width: 0 2px 2px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

}



.list-checkbox--title {

    font-family: Halyard Display;

    letter-spacing: 2px;

    font-size: 16px;

    line-height: 20px;

    font-weight: 500;

    color: #8a8a8a;

    text-transform: uppercase;

    margin: 16px 0;

    display: block;

}



.list-checkbox {

    border-top: 1px solid #e1e1de;

}



.sidebar__header-custome {

    display: none;

}



.sidebar__more,

.btn-clear {

    display: none;

}



.sidebar .search-courses {

    flex-direction: column;

    border-bottom: 0px;

}



.warp-checkbox {

    width: 100%;

}



.sidebar .by {

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    color: #828282;

    margin-bottom: 16px;

}



.by-wrap {

    width: 100%;

}



.james__touch .checkbox_group input[type='checkbox'] {

    display: none;

}

.james__touch .checkbox_group label {

    font-size: 16px;

    line-height: 24px;

    color: #8a8a8a;

    position: relative;

    padding-left: 30px;

    display: block;

    cursor: pointer;

}

.james__touch .checkbox_group label::before {

    position: absolute;

    content: '';

    width: 18px;

    height: 18px;

    border: 1px solid #8a8a8a;

    top: 3px;

    left: 0;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}

.james__touch .checkbox_group label::after {

    position: absolute;

    content: '';

    width: 6px;

    height: 12px;

    border-bottom: 2px solid #ffffff;

    border-right: 2px solid #ffffff;

    top: 0px;

    left: 6px;

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    opacity: 0;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}



.james__touch .checkbox_group input[type='checkbox']:checked + label::before {

    background: #00196e;

    border-color: #00196e;

}

.james__touch .checkbox_group input[type='checkbox']:checked + label::after {

    opacity: 1;

    top: 4px;

}



.james__touch {

    padding: 0;

}



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

    /* .btn-clear-all {

        display: none;

    } */



    .sidebar .by {

        margin-bottom: 0;

    }



    .sidebar__more,

    .btn-clear {

        display: block;

    }



    .fs-24,

    .search-courses,

    div.content__container h3,

    .search-title {

        width: 85%;

        margin-left: auto;

        margin-right: auto;

    }



    .search-title {

        display: block;

    }



    .sidebar__header-custome {

        display: block;

        padding: 16px 24px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border-top: 1px solid #e1e1e1;

        border-bottom: 1px solid #e1e1e1;

    }



    .sidebar .sidebar__header-custome span {

        font-size: 28px;

        line-height: 32px;

        font-weight: 400;

        color: var(--primary-color);

    }



    div.sidebar {

        height: fit-content;

        position: fixed;

    }



    .sidebar .sidebar__sections--wrap {

        margin-bottom: 0;

        padding: 16px 24px 16px 24px;

    }



    div.sidebar .sidebar__sections {

        margin-bottom: 80px;

    }



    /* .list-checkbox {

        display: flex;

        align-items: center;

        flex-wrap: wrap;

    }



    .group-checkbox {

        width: 50%;

    }



    .list-checkbox--title {

        width: 100%;

    } */



    .sidebar__scroll {

        max-height: 350px;

        overflow-y: auto;

        position: relative;

    }



    .sidebar__form {

        padding: 0px 24px 16px;

    }



    .list-checkbox:nth-child(1) {

        grid-area: checkbox1;

    }



    .list-checkbox:nth-child(2) {

        grid-area: checkbox2;

    }



    .list-checkbox:nth-child(3) {

        grid-area: checkbox3;

    }



    .warp-checkbox {

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-template-rows: auto;

        grid-template-areas:

            'checkbox1 checkbox2'

            'checkbox1 checkbox3'

            'checkbox1 .';

    }



    .sidebar__form .by {

        display: none;

    }



    .btn-clear {

        position: absolute;

        top: 10px;

        right: 16px;

        display: none;

    }



    .by-wrap {

        width: 100%;

        padding: 12px 24px;

    }



    .sidebar__more {

        display: block;

        padding: 16px 24px;

        background-color: #fff;

        position: fixed;

        bottom: 0;

        width: 100%;

        left: 0;

        opacity: 0;

        visibility: hidden;

        border-top: 1px solid #e1e1e1;

        transition: all 0.3s linear;

    }



    .sidebar__more input {

        width: 100%;

        padding: 12px 0;

        font-size: 18px;

        line-height: 24px;

        font-weight: 500;

        color: #8a8a8a;

        background-color: #fff;

        border: 1px solid #e1e1e1;

    }



    .sidebar.active .sidebar__more {

        opacity: 1;

        visibility: visible;

        transition: all 0.3s linear;

    }



    .pagination__list {

        list-style: none;

        padding-left: 0;

        display: flex;

        align-items: center;

        gap: 24px;

        justify-content: center;

        font-variant-numeric: initial;

    }



    .pagination__item a {

        color: #8a8a8a;

    }



    .pagination__item.active a {

        color: var(--primary-color);

        position: relative;

    }



    .pagination__item {

        position: relative;

    }



    .pagination__item.prev::after {

        position: absolute;

        content: '';

        width: 7px;

        height: 7px;

        border-top: 2px solid #8a8a8a;

        border-right: 2px solid #8a8a8a;

        left: -12px;

        top: 9px;

        transform: rotate(-135deg);

        -webkit-transform: rotate(-135deg);

        -moz-transform: rotate(-135deg);

        -ms-transform: rotate(-135deg);

        -o-transform: rotate(-135deg);

        transition: all 0.5s ease;

        -webkit-transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

    }



    .pagination__item.next::after {

        position: absolute;

        content: '';

        width: 7px;

        height: 7px;

        border-top: 2px solid #8a8a8a;

        border-right: 2px solid #8a8a8a;

        right: -12px;

        top: 9px;

        transform: rotate(45deg);

        -webkit-transform: rotate(45deg);

        -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

        -o-transform: rotate(45deg);

        transition: all 0.5s ease;

        -webkit-transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

    }



    .pagination__item.active.prev::after,

    .pagination__item.active.next::after {

        border-top: 2px solid var(--primary-color);

        border-right: 2px solid var(--primary-color);

    }

}



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

    .helping {

        margin-top: 40px;

    }



    .fs-24,

    .search-courses,

    div.content__container h3,

    .search-title {

        width: 100%;

        margin-left: auto;

        margin-right: auto;

    }



    .search-courses input {

        width: 100%;

        height: 60px;

        font-size: 18px;

    }



    .search-courses .btn-search span {

        display: none;

    }



    div.content__container .content h3 {

        max-width: 100%;

    }



    .content__container .fs-24 {

        margin-bottom: 60px;

    }



    .warp-checkbox {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: auto;

        grid-template-areas:

            'checkbox1'

            'checkbox2'

            'checkbox3';

    }



    .group-checkbox {

        display: flex;

        align-items: center;

    }



    .warp-checkbox .list-checkbox input {

        width: 18px;

        height: 18px;

        flex-grow: unset;

    }



    .warp-checkbox .list-checkbox {

        padding: 0 24px;

    }



    .search-courses {

        padding-bottom: 20px;

    }

}