.courses {outline: 1px solid #DCDEEC !important; overflow: hidden; margin: 1px !important; width: 99% !important; max-width: 100%;}
.courses thead td {background-color: white; outline: 1px solid #DCDEEC;padding: 10px; white-space: nowrap;font-size: 13px; }


/*Сетка курсов*/
.post_courses {outline: 1px solid #DCDEEC !important; font-size: 15px; background: white !important;color: #262626; width: 100%;justify-content: space-between;}
.post_courses td {background: white !important; text-align: center}
.post_courses:nth-child(2n) td {background: #F9FAFF !important;}

.post_courses .num {text-align: center;}

.post_courses .school {font-weight: bold}
.post_courses .info {text-align: left}
.post_courses .name {margin-top: 5px; margin-bottom: 10px;display: block;text-decoration: none;color:#262626; border: none }

.post_courses .btn { background-color: #03b3ea; display: block; color: white; padding: 10px 15px; font-weight: bold; border-radius: 5px; border: none }

.post_courses .rating_count {color:#A4A6BA; border-bottom: 1px solid;display: inline-block;font-size: 13px;}

/**/
.quest {display: inline-flex;    position: relative; opacity: 0.7;}
.quest:before {content: "";width: 20px;height: 20px;  background-color: grey; -webkit-mask: url('../i/quest.svg') no-repeat center/contain}
.quest span {position: absolute;font-size: 0.9rem; line-height: 1.2; box-shadow: 0 0 20px whitesmoke;transition: all 0.5s 0s; bottom:40px;right: -150px; opacity: 0; pointer-events: none;width: 300px; padding: 1rem; background-color: white; border-radius: 5px;}
.quest:hover{opacity: 1}
.quest:hover span {bottom: 30px;opacity:1}

/*Рейтинг*/
.rating {display: flex; gap: 0.5rem; color: #A4A6BA;font-size: 13px;}
.rating .stars {width: 80px; min-width:80px;height: 16px;display: inline-block; -webkit-mask: url(../i/star_fill.svg) repeat left/contain;background-color: #ccc;}
.rating .stars span {height: 100%; display: inline-block;-webkit-mask: url(../i/star_fill.svg) repeat left/contain;background-color: #fc0;}

/**/
.rub:after {content: " ₽"; }

@media screen and (max-width: 450px){
    .courses * {box-sizing: border-box;}
    .courses {outline: none !important; border-radius: 5px;}
    .courses,.post_courses td,.post_courses,.courses tbody {display: block}
    .post_courses {width: 100%; margin-bottom: 20px !important; border: 1px solid  #DCDEEC}
    .post_courses td {text-align: left}
    .post_courses .img,.post_courses .info {width: 100%;}
    .post_courses img {width: 100%}
    .post_courses .btn {display: inline-flex;}
    .post_courses .btns {text-align: center !important;margin: 10px auto}
}