.d-flex {display: flex; flex-wrap: wrap; flex-direction: row;}
.fd-column {flex-direction: column; flex-wrap: nowrap;} 
.jc-space-between {justify-content: space-between;}
.jc-flex-start {justify-content: flex-start;}
.jc-center {justify-content: center;}
.jc-flex-end {justify-content: flex-end;}
.ai-flex-start {align-items: flex-start;}
.ai-center {align-items: center;}
.ai-flex-end {align-items: flex-end;}
.order-first {order: -1;}
.order-last {order: 10;}
.flex-grow-1, .ui-dialog-title, .ac-form__bottom .comments_subscribe, .flex-1 {flex: 1 1 0; max-width: 100%; min-width: 50px;}
.flex-grow-1-column, .flex-1-col {flex: 1 0 min-content}
.pi-center {display: grid; place-items: center;}
.ta-center {text-align: center;}

.r-gap-5 {row-gap: 5px;} .r-gap-10 {row-gap: 10px;} .r-gap-15 {row-gap: 15px;} .r-gap-20 {row-gap: 20px;}
.r-gap-25 {row-gap: 25px;} .r-gap-30 {row-gap: 30px;} .r-gap-35 {row-gap: 35px;} .r-gap-40 {row-gap: 40px;}
.c-gap-5 {column-gap: 5px;} .c-gap-10 {column-gap: 10px;} .c-gap-15 {column-gap: 15px;} .c-gap-20 {column-gap: 20px;}
.c-gap-25 {column-gap: 25px;} .c-gap-30 {column-gap: 30px;} .c-gap-35 {column-gap: 35px;} .c-gap-40 {column-gap: 40px;}
.p-relative {position: relative;} .o-hidden {overflow: hidden;} .d-block {display: block;} 
.w-100 {width: 100%; min-width: 100% !important; grid-column: 1 / -1;} .bdrs-50 {border-radius: 50%;}
.ml-auto {margin-left: auto;} .mr-auto {margin-right: auto;} .mt-auto {margin-top: auto;} .mb-auto {margin-bottom: auto;}
.ratio-3-2 {aspect-ratio: 3 / 2;} .ratio-2-3 {aspect-ratio: 2 / 3;} .ratio-1-1 {aspect-ratio: 1 / 1;}




/* CLASSES STYLES
----------------------------------------------- */
.full__data > div span {padding: 4px 5px; border-radius: 6px; background: #f5ce5b; color: #000000; font-weight: 500;}

.item__ext-rating-item {font-size: 13px; padding-left: 30px; line-height: 20px;}
.item__ext-rating-item.kp {background: url(../images/kp.svg) 0 center / 20px no-repeat;}
.item__ext-rating-item.imdb {background: url(../images/imdb.svg) 0 center / 20px no-repeat;}
.item__ext-rating-item.mdl {background: url(../images/mdl.svg) 0 center / 20px no-repeat;}
.item__ratingscore-ring {width: 50px; font-weight: 500; font-size: 16px;}
.item__ratingscore-ring svg {position: absolute; left: 0; top: 0; fill: none; transform: rotate(-90deg);}
.item__ratingscore-ring svg circle {fill: inherit; stroke: rgba(255,255,255,0.4);}
.item__ratingscore-ring svg circle:nth-child(2) {stroke: var(--yellow);}
.item__rating-block {position: relative; padding-right: 65px;}
.item__rating-votes {font-size: 12px; text-align: right; color: var(--tt-fade); margin-top: 0px;}
.item__rating-block .item__ratingscore-ring {position: absolute; right: 0; top: 50%; translate: 0 -50%;}
.item__rating-block .unit-rating { --size: 22px; --size-1: -22px; --size-2: -44px; position: relative; right: -5px;}
.light .item__rating-block .item__ratingscore-ring svg circle:first-child {stroke: rgba(0,0,0,0.1);}
.item-poster .unit-rating li {background-image:url(../dleimages/rating2.svg)}


.page__list {line-height: 1.3; font-size: 13px; margin-top: 30px; margin-bottom: 20px;
    display: flex; gap: 5px 20px; justify-content: space-between;}
.page__list li > span:first-child {font-weight: 500; margin-right: 5px;}
.page__list-wide {grid-column: 1 / -1;}
.page__list-rates {grid-row: span 2;}
.page__list-rates-item {font-size: 15px; padding-left: 30px; line-height: 20px;}
.page__list-rates-item.kp {background: url(../images/kp.svg) 0 center / 20px no-repeat;}
.page__list-rates-item.imdb {background: url(../images/imdb.svg) 0 center / 20px no-repeat;}
.page__list-rates-item.shiki {background: url(../images/shiki.svg) 0 center / 20px no-repeat;}



.light .page__subtitle {border-top: 1px solid var(--ui-bdc); margin: 0 -20px; padding: 15px 20px; 
	text-align: center; font-size: 18px; font-weight: 600;}
.page__subtitle {border-top: 1px solid var(--yellow); margin: 0 -20px; padding: 15px 20px; 
	text-align: center; font-size: 18px; font-weight: 600;}


/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */
@media screen and (max-width: 950px) {
    .calendar-date__item1 {flex: 1 0 180px;}
}
@media screen and (max-width: 760px) {
    .calendar-date__item1 {flex: 1 0 160px;}
    
	.pagination {gap: 10px;}
	.pagination__btn-loader a, .pagination__btn-loader span:not([class]) {width: 100%;}
	.pagination > a, .pagination > span {flex-grow: 1; order: 10;}
	.pagination__pages, .pagination__btns {min-width: 100%;}
	.pagination__pages a, .pagination__pages span, .pagination__btns > * {flex-grow: 1;}
}

@media screen and (max-width: 590px) {
    .nav-container {flex-wrap: wrap;}
    .prev-button, .next-button {order: -1; width: 49%; margin-bottom: 10px;}
    .list-button {width: 100%; text-align: center;}
    iframe {height: 280px;}
    .calendar-date__item1 {flex: 1 0 130px;}
    .light .pretimer {display: flex;flex-wrap: wrap;}
    .light .pretimer .lt {width: 100%; text-align: center;}
    .light .pretimer .rt {width: 100%; text-align: center;}
    .pretimer {display: flex;flex-wrap: wrap;}
    .pretimer .lt {width: 100%; text-align: center;}
    .pretimer .rt {width: 100%; text-align: center;}
    .page__list {flex-direction: column; align-items: center; gap: 20px;}
    
    .calendar-date__list {display: flex; flex-wrap: wrap;}
    .calendar__item-english-name {display: none;}
    .calendar__item-names {min-width: 180px;}
}

@media screen and (max-width: 400px) {
    .logo__link {width: 260px;}
    .page__scr ul {grid-template-columns: repeat(2,1fr); gap: 10px;}
    
    .nav-container {flex-wrap: wrap; justify-content: space-between;}
    .prev-button, .next-button {order: -1;}
    .nav-item, .list-button {font-size: 14px;}
    .list-button {width: 100%;}
    .calendar-date__item1 {flex: 1 0 120px;}
    .calendar__item-anime {width: 100%; flex-wrap: wrap; justify-content: space-between;}
    
    .calendar__item-bookmark {display: none;}
    .calendar__item-name {font-size: 16px; padding-right: 0;}
    .calendar__item-name, .calendar__item-english-name {-webkit-line-clamp: 6;}
}

@media screen and (max-width: 375px) {
    .calendar__item-names {min-width: 130px;}
}