/* BASIC LAYOUT
----------------------------------------------- */
.wrappers {min-width: 320px; overflow: hidden; overflow: clip;}
.wrappers__container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.header {background-color: var(--bg); box-shadow: var(--bsh); position: relative; z-index: 5;}
.header__btm {border-top: 1px solid var(--bdc); position: relative;}
.content {padding: calc(var(--spacing)*2) 0 0 0; min-height: 100vh;}
.footer {background-color: var(--bg); box-shadow: var(--bsh-invert); 
	position: relative; z-index: 5; padding-top: var(--spacing); padding-bottom: var(--spacing);}
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	background-color: rgba(0,0,0,0.8); cursor: pointer; display: none;}

.us2pad { margin-top: 30px; }

.csu_form_block_main * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.csu_form_block_main *:before, .csu_form_block_main *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.csu_form_block_main, .csu_form_block_main input {
	font-family: "Open Sans", sans-serif;
}

.csu_form_block_main {
	overflow-y: auto;
    visibility: hidden;
}

.csu_overlay {
	background: #edf1f3;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow-y: auto;
	z-index: 99;
}

.csu_form_top_border {
	margin: 18px 0 0 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	height: 2px;
}

.csu_form_top_border div {
	float: left;
	width: 100%;
	height: 2px;
}

.csu_form_top_border div {
	background: #30cdfa;
}

.csu_form_block {
	width: 340px;
	margin: 100px auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
	border-radius: 6px;
	-webkit-transition: all .4s cubic-bezier(.2, .9, .4, 1.5);
	transition: all .4s cubic-bezier(.2, .9, .4, 1.5);
	-webkit-transform: rotate(10deg) translate(-10px, 10px);
	transform: rotate(10deg) translate(-10px, 10px);
	opacity: 0;
}

.csu_form_block_body {
	background: #fff;
	border-radius: 6px;
	position: relative;
}

.csu_form_block_title {
	font-weight: 700;
	font-size: 24px;
	color: #1e293b;
	padding: 9px 19px 0 19px;
}

.csu_form_block_description {
	font-size: 14px;
	color: #666;
	padding: 0 20px;
	line-height: 16px;
}

.csu_form_input_name {
	font-size: 14px;
	color: #1e293b;
	padding: 14px 0 5px 0;
}

.csu_form_block_body_form {
	padding: 0 20px 17px 20px;
}

.csu_form_block_body_form input[type="text"], .csu_form_block_body_form input[type="password"] {
	width: 100%;
	border-radius: 6px;
	height: 38px;
	border: 1px solid #ccc;
	padding: 0 10px;
	transition: all .2s;
	font-size: 14px;
	background: #fff;
	display: block;
	line-height: normal;
	color: #000;
	box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, .05);
}

.csu_form_block_body_form input[type="text"]:focus, .csu_form_block_body_form input[type="password"]:focus {
	border: 1px solid #17b0cf;
}

.csu_politic {
	font-size: 12px;
	color: #666;
	line-height: 16px;
	padding: 10px 0 0 0
}

.csu_politic a {
	border-bottom: 1px solid #17b0cf;
	text-decoration: none;
	color: #17b0cf;
}

.csu_politic a:hover {
	border-bottom: 0;
	text-decoration: none;
}

#csu_form_sing_up {
	display: block;
	text-align: center;
	background: #1e8bc3;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	height: 50px;
	line-height: 50px;
	border-radius: 0 0 6px 6px;
	transition: all .2s;
	text-shadow: 0 -1px 0 #17b0cf;
	font-weight: 700;
}


#csu_form_sing_up:hover {
	background: #17b0cf;
}

input[name="csu_form_checkbox"] {
	display: none;
}

label[for="csu_form_checkbox"] span {
	border-radius: 99px;
	border: 1px solid #ccc;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: top;
	margin: 2px 10px 0 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
}

label[for="csu_form_checkbox"] {
	margin: 0;
	font-size: 14px;
	color: #1e293b;
	padding: 18px 0 5px 0;
	display: block;
	line-height: normal;
	cursor: pointer;
}

input[name="csu_form_checkbox"]:checked + label span:before {
	background: #30cdfa;
	width: 8px;
	height: 8px;
	display: block;
	content: "";
	margin: 3px 0 0 3px;
	border-radius: 99px;
}

.csu_form_block_main.csu_show_form {
    visibility: visible !important;
}

.csu_form_block_main.csu_show_form .csu_form_block {
	opacity: 1;
	-webkit-transform: rotate(0deg) translate(0, 0);
	transform: rotate(0deg) translate(0, 0);
}

.csu_form_close {
	position: fixed;
	top: 21px;
	right: 20px;
	cursor: pointer;
	z-index: 150;
	background: url("../images/close.png") no-repeat center center;
	background-size: cover !important;
	width: 16px;
	height: 16px;
	transition: all .2s;
}

.csu_form_close:hover {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.csu_red_alert {
	border: 1px solid #f21248;
	display: block;
	border-radius: 6px;
	font-size: 12px;
	padding: 6px 10px;
	background: rgba(249, 38, 89, 0.05);
	margin: 16px 0 0 0;
}

.csu_green_alert {
	border: 1px solid #6c9806;
	display: block;
	border-radius: 6px;
	font-size: 12px;
	padding: 6px 10px;
	background: rgba(108, 152, 6, 0.05);
	margin: 16px 0 0 0;
}

.csu_wait {
	position: absolute;
	z-index: 999;
	background: rgba(0, 0, 0, .2);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 6px;
	display: none;
}
/* HEADER
----------------------------------------------- */
.header__logo {position: relative; padding-left: 75px; height: 110px;
	background: url(../images/logo.svg) 0 center / 60px no-repeat;}
.header__logo-title {text-transform: uppercase; font-weight: 500; font-size: 38px; line-height: 1.1;}
.header__logo-subtitle {font-size: 13px;}
.header__logo-caption {font-size: 13px; border-left: 1px solid var(--bdc); line-height: 1.4; padding-left: 20px; margin-left: 20px;}
.header__contacts {margin-right: 40px;}
.contact {position: relative; padding-left: 34px;}
.contact__title {font-weight: 400; display: block;}
.contact__text {font-size: 14px; color: var(--tt-fade);}
.contact::before {position: absolute; left: 0; top: 5px; color: var(--accent-3); font-size: 24px;}
.progress-mark::before {content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-1); animation: live 1.2s linear infinite;}
@keyframes live {
	0% {box-shadow: 0 0 0 0px rgba(from var(--accent-1) r g b / 0.13)}; 
	50%{box-shadow: 0 0 0 8px rgba(from var(--accent-1) r g b / 0.15)};
	100% {box-shadow: 0 0 0 16px rgba(from var(--accent-1) r g b / 0.0);}
}
.header__menu a {display: flex; align-items: center; gap: 10px; height: 70px; font-weight: 400; font-size: 18px;}
.header__btn-search {height: 70px; width: 50px; font-size: 20px;}
.header__ava {width: 50px; cursor: pointer; border-radius: 50%;}

.search-block {position: absolute; right: 0px; top: 50%; translate: 0 -50%; width: 400px; z-index: 20;
	padding-left: 50px; background: linear-gradient(to right, transparent, var(--bg) 50px);}
.search-block__input, .search-block__input:focus {padding: 0 100px 0 15px;}
.search-block__input:not(:focus)::placeholder {color: var(--tt); opacity: 0.66; font-size: 14px;}
.search-block__btn {position: absolute; right: 3px; top: 3px; pointer-events: none;}


/* ABOUT, BANNER, SECT, PARTNERS
----------------------------------------------- */
.content:has(.about) {padding-top: var(--spacing);}
.about:has(+.bnr) {margin-bottom: var(--spacing);}
.about__item {background-color: hsl(from var(--accent) h s l / 0.1); padding: 20px; 
	padding-left: 90px; position: relative; border-radius: var(--bdrs);}
.about__item-title {font-weight: 400; margin-bottom: 3px;}
.about__item-text {font-size: 14px;}
.about__item::before {position: absolute; left: 20px; top: 20px; --size: 50px; --clr: var(--accent);}
.about__item:nth-child(2) {--accent: var(--accent-1);}
.about__item:nth-child(3) {--accent: var(--accent-2);}

.bnr {width: 100%;}
.bnr img, .bnr a {display: block; margin: 0 auto; max-width: 100%;}

.sect {margin-bottom: calc(var(--spacing)*3);}
.sect--bg {padding-top: calc(var(--spacing)*3); padding-bottom: calc(var(--spacing)*3); background-color: var(--bg);}
.sect__header {margin-bottom: var(--spacing);}
.sect__title {font-size: 28px; font-weight: 400; line-height: 1.1;}
.sect__title.has-icon {padding-left: 40px; position: relative;}
.sect__title.has-icon::before {position: absolute; left: 0; top: 50%; translate: 0 -50%; color: var(--accent);}
.sect__link {display: flex; align-items: center; gap: 10px;}
.sect__link::before {content: ''; width: 20px; height: 2px; background-color: var(--tt); opacity: 0.6;}
.sect__bottom {margin-top: var(--spacing);}
.sect__btn-bottom {width: 386px;}
.sect__bottom::before, .sect__bottom::after {content: ''; flex-grow: 1; border-top: 1px solid var(--bdc);}
.sect:has(+.sect--decor) {margin-bottom: 0;}
.sect--decor {position: relative; padding-top: calc(var(--spacing)*3);}
.sect--decor > * {position: relative; z-index: 3;}
.sect--decor::before {content: ''; width: 100%; height: 200px; position: absolute; left: 0; top: 0;
	background: var(--bg-darker) url(../images/bg2.jpg) center center / cover no-repeat; opacity: 0.066;
	mask-image: linear-gradient(to top, transparent, #000 50%); background-blend-mode: luminosity;}

.grid-partners {display: grid; gap: 20px; align-items: center; grid-template-columns: repeat(auto-fill,minmax(min(50%,400px),1fr));}
.grid-partners a, .grid-partners img {display: block; border-radius: 3px;}
.grid-partners a {border-radius: var(--bdrs); border: 1px solid var(--bdc); padding: 5px; background-color: var(--bg);}


/* SHORT
----------------------------------------------- */
.short {background-color: var(--bg); border-radius: var(--bdrs); position: relative; overflow: hidden;}
.short-modules .short__img, .short-free .short__img, .short-article .short__img {aspect-ratio: 720 / 360;}
.short__labels {position: absolute; left: 5px; top: 5px; z-index: 3; gap: 5px;}
.short__label {padding: 3px 6px; font-size: 12px; border-radius: 3px; background-color: var(--accent); color: #fff;}
.short__label--green {background-color: #77ad6e;}
.short__label--blue {background-color: #6288b4;}
.short__label--red {background-color: #c96c62;}
.short__label--yellow {background-color: #b6ac26;}
.short__label--grey {background-color: #969696;}
.short__desc {padding: 20px;}
.short__title {font-weight: 400; font-size: 18px;}
.short__text {margin-top: -5px; padding-bottom: 10px; font-size: 14px;}
.short__info--border, .short__btm--border {border-top: 1px solid var(--bdc); padding-top: 20px;}
.short__price {font-weight: 500; font-size: 24px; line-height: 1;}
.short__price-old {text-decoration: line-through; color: var(--accent-3); font-size: 14px; 
	position: absolute; right: 0; bottom: 100%; translate: 10px 0px;}
.short__rating-like > * {display: flex; align-items: center; gap: 5px;}
.short__rating-like > * .has-icon {font-size: 18px;}
.short-article .short__img {width: 220px;}
.short-blog {box-shadow: 0 4px 10px rgba(23,41,54,.08);}
.short-blog .short__desc {color: #fff; position: absolute; z-index: 5; inset: 0;}
.short-blog .short__img::before {content: '';position: absolute; inset: 0; z-index: 3; background: #051333; opacity: 0.66;}


/* HOW TO BUY
----------------------------------------------- */
.how-step__item {position: relative; padding: 20px; padding-bottom: 100px; box-shadow: var(--bsh);
	background: var(--gradient); color: #fff; border-radius: var(--bdrs); overflow: hidden;}
.how-step__caption {font-weight: 400; font-size: 22px;}
.how-step__text {margin-top: 10px;}
.how-step__count {position: absolute; right: 0; bottom: 0; translate: -110px -10px; z-index: 1; line-height: 1;
	font-size: 100px; font-weight: 500; color: rgba(255,255,255,0.3);}
.how-step__item::after {position: absolute; right: 0; bottom: 0; background-color: rgba(255,255,255,0.15);
	width: 110px; height: 110px; border-radius: 50%; translate: 20% 20%; content: '';}
.how-step__item::before {position: absolute; right: 0; bottom: 0; translate: -20px -20px; 
	z-index: 2;  --size: 80px; --clr: #fff;}


/* DESCR, ORDER
----------------------------------------------- */
.descr {position: relative; z-index: 3; margin-bottom: -20px; padding-top: 35px;}
.descr h1 {font-size: 28px; font-weight: 400; margin-bottom: 35px; line-height: 1;}
.descr__main {background-color: var(--bg); padding: 35px 40px; border-radius: calc(var(--bdrs)*2);}
.descr__text {display: grid; gap: 10px;}
.descr__text :is(h2,h3) {font-weight: 400; font-size: 18px;}
.counters {margin: 35px -40px; padding: 0 40px; background-color: var(--bg-darker-0);
	border: 1px solid var(--bdc); border-left: 0; border-right: 0;}
.counters__item-count {font-size: 28px; font-weight: 500; background: var(--accent-1); 
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.counters__item-text {font-weight: 400;}
.counters__item {padding: 15px;}
.counters__item + .counters__item {border-left: 1px solid var(--bdc);}

.content:has(.descr) + .order {padding-top: calc(var(--spacing)*3);}
.order {background: url(../images/bg2.jpg) center center / cover no-repeat; color: #fff; 
	padding-top: calc(var(--spacing)*2); padding-bottom: calc(var(--spacing)*2); font-weight: 400; position: relative;}
.order__title {font-size: 28px; font-weight: 400; margin-bottom: 5px;}
.order > * {position: relative; z-index: 1;}
.order::before {content: ''; position: absolute; inset: 0; background: var(--gradient); opacity: 0.9;}


/* PROGRESS PAGE
----------------------------------------------- */
.progr {border: 2px solid var(--bdc);}
.progr__item {padding: 10px 20px; display: grid; gap: 10px 20px; grid-template-columns: 250px 1fr 1fr; align-items: center;}
.progr__item + .progr__item {border-top: 1px solid var(--bdc);}
.progr__item:nth-child(2n) {background-color: rgba(0,0,0,0.03);}
.progr__header {position: sticky; left: 0; top: 0; z-index: 10; font-weight: 500; 
	background-color: var(--bg); padding: 18px 20px;}
.progr__item:not(.progr__header) .progr__title {font-weight: 400;}
.progr__descr {justify-self: center;}
.progr__item:not(.progr__header) .progr__descr {padding: 5px 15px; font-size: 14px; border-radius: 4px; max-width: 100%;
	background-color: var(--accent); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.progr__bar {border-radius: 10px; height: 10px; background-color: var(--bg); overflow: hidden;}
.progr__bar::before {content: ''; display: block; height: 100%; border-radius: inherit;
	width: var(--fill, 0%); background-color: var(--accent-1);}
.progr__perc {text-align: center; width: 24px;}
.progr__perc .icon-check {font-size: 20px; color: var(--green);}
.progr__bar--green::before {background-color: var(--accent-1);}
.progr__bar--red::before {background-color: var(--accent-3);}
.progr__bar--blue::before {background-color: var(--accent-2);}
.progr__item:not(.progr__header) .progr__descr--red {background-color: #c71585;}
.progr__item:not(.progr__header) .progr__descr--blue {background-color: #4682b4;}
.progr__item:not(.progr__header) .progr__descr--violet {background-color: #9370db;}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__text {font-size: 14px;}
.footer__text a, .footer .ps-link {color: var(--accent-2); border-bottom: 1px dotted var(--accent-2);}
.footer__freekassa a, .footer__freekassa img {display: block;}

.pagination {gap: 10px; padding-top: 40px;}
.pagination a, .pagination span
{display: grid; place-items: center; color: var(--tt); height: 40px; min-width: 40px; padding: 0 10px; border-radius: 3px; background-color: var(--bg);}
.pagination span:not(.nav_ext) {background-color: var(--accent-2); color: #fff;}


/* INNER PAGE TEXT BLOG ARTICLE
----------------------------------------------- */
.pagen__header {margin-bottom: 20px;}
.pagen__header h1 {line-height: 1.3; font-size: 34px;}
.pagen__header h1 a {font-size: 16px; margin-left: 10px; display: inline-block; color: var(--tt-fade);}
.pagen__speedbar {font-size: 13px; color: var(--tt-fade); margin-bottom: 15px; margin-top: 10px;}
.pagen__cnt {border-radius: calc(var(--bdrs)*2); padding: 40px; background-color: var(--bg);}
a.pagen__meta-item, .pagen__rating-like a {color: var(--accent-2); display: flex; align-items: center; gap: 10px;}
#pagen__comms {scroll-margin-top: 20px;}
.pagen__cnt .sect:last-child {margin-bottom: 0;}


/* INNER PAGE MODULES
----------------------------------------------- */
.pagen__speedbar:last-child {margin-bottom: 0;}
.pagen__main {display: grid; grid-template-columns: 720px minmax(0,1fr); gap: 20px; 
	grid-template-areas: "pposter pdescr" "pgallery pgallery"; margin: -20px; margin-bottom: 35px;}
.pagen__main-poster {position: relative; grid-area: pposter; aspect-ratio: 720/360; 
	align-self: start; border-radius: var(--bdrs);}
.pagen__main-poster img, .pagen__main-poster a {display: block;}
.pagen__main-gallery {grid-area: pgallery; background-color: var(--bg-darker-0); 
	padding: 20px 20px; margin: 0 -20px; border: 1px solid var(--bdc); border-left: 0; border-right: 0;}
.pagen__main-gallery ul {display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
.pagen__main-gallery a, .pagen__main-gallery img {display: block; aspect-ratio: 1 / 1;}
.pagen__main-gallery img {border: 2px solid var(--bdc); object-fit: cover; width: 100%;
    border-radius: var(--bdrs); padding: 3px; background: var(--bg);}
.pagen__main-descr {grid-area: pdescr;}

.pagen__rating-ext {padding-left: 60px; position: relative;}
.pagen__rating-ext-count {font-size: 14px; color: var(--tt-fade);}
.pagen__rating-ext-stars .unit-rating {--size: 24px; --size-1: -24px; --size-2: -48px; margin-bottom: 3px; line-height: 1;}
.pagen__rating-ext-score {width: 50px; position: absolute; left: 0; top: 50%; translate: 0 -50%; 
	isolation: isolate; font-size: 18px; font-weight: 400;}
.pagen__rating-ext-score::before {content: ''; position: absolute; z-index: -2; inset: 0; border-radius: 50%; 
	background: conic-gradient(from 0deg, var(--accent-1) 0%, var(--accent-1) var(--p), var(--bg-darker)  var(--p));}
.pagen__rating-ext-score::after {content: ''; position: absolute; z-index: -1; 
	background-color: var(--bg); inset: 2px; border-radius: 50%;}
.pagen__rating-ext-like a {display: flex; align-items: center; gap: 20px; height: 40px; padding: 0 20px 0 0;
	background: var(--bg); border-radius: 3px; overflow: hidden; 
	border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);}
.pagen__rating-ext-like a .has-icon {font-size: 20px; height: 100%; width: 50px; color: var(--green);
	background-color: var(--bg-darker-0); border-right: 1px solid var(--bdc); display: grid; place-items: center;}

.pagen__list li {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.pagen__list li > span:first-child {font-weight: 400; gap: 10px; flex-grow: 1;
	display: flex; align-items: center; justify-content: space-between;}
.pagen__list li > span:first-child::after {content: ''; flex-grow: 1; border-top: 2px dotted var(--bdc);}
.pagen__info-block {border-radius: var(--bdrs); padding: 20px; position: relative;
	background-color: hsl(from var(--accent-3) h s l / 0.1); padding-left: 90px;}
.pagen__info-block::before {font-size: 50px; color: var(--accent-3); 
	position: absolute; left: 20px; top: 50%; translate: 0 -50%;}


/* INNER PAGE MODULES BUY SECTION
----------------------------------------------- */
.pagen__buy {display: grid; gap: 20px; grid-template-columns: repeat(auto-fill,minmax(min(50%,340px),1fr)); margin-top: 40px; margin-bottom: 20px;}
.bitem {border-radius: var(--bdrs); background-color: var(--bg); isolation: isolate;
	border: 1px solid var(--accent-2); box-shadow: var(--bsh); position: relative;}
.bitem--popular {border-color: var(--accent-2);}
.bitem__label {position: absolute; left: 50%; bottom: 100%; translate: -50% 50%; 
	font-size: 12px; text-transform: uppercase; white-space: nowrap;
	background-color: var(--accent-3); color: #fff; padding: 5px 20px; 
	border-radius: 15px; text-align: center; z-index: 1;}
.bitem__header {background: var(--gradient); color: #fff; padding: 15px 20px; 
	font-size: 14px; text-transform: uppercase; border-radius: var(--bdrs) var(--bdrs) 0 0;}
.bitem__header div {font-weight: 400; font-size: 20px; margin-bottom: 2px;}
.bitem__icon-price {padding: 20px;}
.bitem__icon img, .bitem__icon svg {display: block; height: 80px;}
.bitem__price {font-size: 34px; font-weight: 500; color: var(--accent-3); line-height: 1; order: -1;}
.bitem__info {border-top: 1px solid var(--bdc); font-size: 15px;}
.bitem__info li {padding: 0 20px; border-bottom: 1px solid var(--bdc); 
	display: flex; align-items: center; height: 50px;}
.bitem__info li span + span {margin-left: auto; font-weight: 400;}
.bitem__info li:nth-child(2n+1) {background-color: var(--bg-darker-0);}
.bitem__info .icon-check {color: var(--green); font-size: 24px; margin-left: auto;}
.bitem__info .icon-cross {color: var(--red); font-size: 20px; margin-left: auto;}
.bitem__btn {display: flex; margin: 20px; text-transform: uppercase; font-size: 15px;}
.bitem__info li span {position: relative;}
.bitem__info li sup {color: var(--red); font-size: 18px; position: absolute; left: 100%; top: -10px; margin-left: 5px;}
.pagen__buy-info-item {font-size: 14px; padding-left: 36px; position: relative;}
.pagen__buy-info-item span {color: var(--red); font-size: 24px; position: absolute; left: 0; top: -3px;}


/* INNER PAGE MODULES DOWNLOAD SECTION
----------------------------------------------- */
.pagen__dl {margin-top: 40px;}
.dl {background-color: var(--bg); box-shadow: var(--bsh); overflow: hidden; 
	border: 1px solid var(--accent-2); border-radius: var(--bdrs); word-wrap: break-word;}
.dl__name {background: var(--gradient); color: #fff; font-weight: 400; padding: 15px 20px;}
.dl__inner {padding: 10px; padding-left: 20px; gap: 10px 20px; isolation: isolate; position: relative; overflow: hidden;}
.dl__inner::after {content: ""; position: absolute; left: .25rem; right: .25rem; top: -30px; height: 3.75rem;
	margin-top: .25rem; background-size: 1rem 1rem; opacity: .05; z-index: -1;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZmlsbD0nIzE0MjYzNicgZD0nTTIsOGEyLDIsMCwxLDAsMiwyQTIsMiwwLDAsMCwyLDhabTgtOGEyLDIsMCwxLDAsMiwyQTIsMiwwLDAsMCwxMCwwWicvPjwvc3ZnPg==);
}
.dl__inner::before {font-size: 18px; width: 40px; height: 40px; display: grid; place-items: center; 
	border-radius: 50%; border: 2px solid var(--bdc); background-color: var(--bg);}
.dl__btn {width: 180px; color: #fff !important; text-decoration: none !important;}
.dl__title {font-size: 14px;}
.dl__meta {font-size: 13px; color: var(--tt-fade); margin-top: 3px;}
.dl__extension {font-weight: 400; color: var(--accent-3);}


/* INNER PAGE MODULES CHANGELOG
----------------------------------------------- */
.changelog-wrapper {border: 2px solid var(--bdc);}
.changelog-filters {border-bottom: 1px solid var(--bdc); display: flex; align-items: center; flex-wrap: wrap;
	gap: 5px 20px; padding: 15px; background-color: var(--bg); position: relative; z-index: 10; padding-right: 140px;}
.changelog-scroll-to {position: absolute; right: 0; top: 0; height: 100%; border-left: 1px solid var(--bdc); 
	display: flex; align-items: center; gap: 5px; justify-content: center; cursor: pointer;}
.changelog-scroll-to-list {position: absolute; right: 0; top: 100%; background-color: var(--bg); z-index: 10; 
	border: 1px solid var(--bdc); overflow-x: hidden; overflow-y: auto; max-height: 200px; width: 100%; display: none;}
.changelog-scroll-to:hover .changelog-scroll-to-list {display: block;}
.changelog-scroll-to-list a {display: block; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--bdc);}
.changelog-checkbox-label {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; position: relative;}
.changelog-checkbox-label input {position: absolute; inset: 0; opacity: 0; cursor: pointer;}
.changelog-checkbox-label::before {content: ''; display: grid; place-items: center; width: 20px; height: 20px; 
	border-radius: 3px; background-color: var(--bg-darker);}
.changelog-checkbox-label:has(input:checked)::before {box-shadow: inset 0 0 0 5px var(--bg-darker); background-color: var(--accent);}
.changelog-items {background-color: var(--bg); padding: 15px;}
.c_version {display: inline-block; border-radius: 3px; padding: 3px 15px;
	background-color: var(--accent); color: #fff; font-size: 18px; font-weight: 400;}
.c_date h6 {font-size: 16px; font-weight: 300; margin-top: 5px;}
.changelog_date {margin: 0 -15px; margin-bottom: 15px !important; padding: 0 15px; padding-bottom: 10px; 
	border-bottom: 1px solid var(--bdc); max-width: calc(100% + 30px) !important; width: calc(100% + 30px);}
.changelog_content {display: grid; gap: 10px; grid-template-columns: minmax(0,1fr); font-size: 14px;}
.changelog_content span {display: inline-block; vertical-align: middle; font-size: 13px; border-radius: 3px; 
	padding: 3px 0; background-color: var(--accent); color: #fff; margin-right: 14px; width: 120px; text-align: center;}
.changelog_content span.fixed {background: #ea3940;}
.changelog_content span.new {background: #03a678;}
.changelog_content span.update {background: #ffa100;}
.changelog_content span.improve {background: #10b3d6;}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.page-bg {border-radius: 10px; padding: 40px; background-color: var(--bg);}
.page__title {margin-bottom: 20px; font-size: 28px;}
.full-text {line-height: 1.6; font-size: 16px; word-wrap: break-word;}
.full-text hr {display: block; border-top: 3px dotted var(--tt); margin-bottom: 30px; margin-top: 30px; opacity: 0.3;}
.full-text a {text-decoration: underline; color: var(--accent-2);}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, 
.full-text > ul, .full-text > ol, .full-text table, .full-text pre, .full-text > div {margin-bottom: 20px;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative;}
.full-text > ul > li:before {font-size: 14px; background-color: var(--accent-1); color: #fff;
	position: absolute; top: -1px; left: 24px; width: 24px; height: 24px; border-radius: 50%; 
	display: grid; place-items: center;}
.full-text > ol {counter-reset: num;}
.full-text > ol > li:before {content: counter(num); counter-increment: num; background-color: var(--accent-1); color: #fff; 
	position: absolute; top: -3px; left: 19px; width: 24px; height: 30px; font-size: 14px; font-weight: 400;
	display: flex; justify-content: flex-end; align-items: center; padding-right: 6px; box-sizing: border-box;}
.full-text > ol > li:after {content: ''; border: 10px solid transparent; border-left-color: var(--accent-1); 
	position: absolute; left: 43px; top: -3px; transform: scale(0.66,1.5); transform-origin: 0 0;}
.full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;}
.full-text ul ul li::before, .full-text ol ol li::before, .full-text ol ul li::before, .full-text ul ol li::before 
	{content: ''; background-color: var(--accent-1); width: 10px; height: 10px; 
		left: 10px; top: 6px; position: absolute; border-radius: 50%;}
.full-text > ul ul li, .full-text > ol ol li, .full-text > ul ol li, .full-text > ol ul li {padding-left: 30px;}
.full-text table, .video-inside > * {width:100%;}
.full-text > *:last-child {margin-bottom: 0;}
.video-responsive {background-color: #000;}
.video-responsive > iframe, .video-responsive > video {width: 100%; height: auto; aspect-ratio: 3/2;}
.full-text p:has(br:first-child:last-child) {margin-bottom: 0px;}
.full-text hr + p:has(br:first-child:last-child) {display: none;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 24px; line-height: 1.2; margin-bottom: 20px;}
.full-text table td, .full-text table th {padding: 10px; border: 1px solid var(--bdc);}
.full-text table tr:nth-child(2n) {background-color: var(--bg-darker-0);}
.full-text table {border: 2px solid var(--bdc); margin-bottom: 20px;}
.full-text table th {font-weight: 400;}
.full-text table thead tr {background: var(--gradient); color: #fff;}
.full-text table thead {position: sticky; left: 0; top: 0;}
.full-text table .text-center {text-align: center;}
.full-text .fa:before, .full-text .fal:before {font-size: 14px; background-color: var(--green); color: #fff; font-style: normal;
	width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;}
.full-text .fa-remove:before, .full-text .fa-times-circle:before {background-color: var(--red); font-size: 16px;}
.full-text table + h2 {padding-top: 20px;}
.full-text p + br, .full-text ul + br {display: none;}
.full-text p > img:last-child, .full-text > div h3 {margin: 0;}
.full-text p:has( > img:last-child) {margin-bottom: 10px;}
.full-text > div h3 {font-size: 18px;}


/*--- TEXT [code]---*/
pre {display: block; padding: 20px; background: #3F3F3F; color: #DCDCDC;
text-shadow: 0 1px 1px #000; box-shadow: inset 0 0 40px rgba(0,0,0,.8); 
font-family: Consolas,'Courier New',monospace; 
	overflow: auto; font-size: 14px; line-height: 18px; border-radius: 8px; }
pre123 {white-space: pre-wrap; word-break: break-all; word-wrap: break-word;}
pre .tag, pre.css .class, pre.css .id, pre.lisp .title, pre.nginx .title,
pre .request, pre .status, pre .clojure .attribute 
{color:#E3CEAB}
pre.django .template_tag, pre.django .variable, pre.django .filter .argument 
{color:#DCDCDC}
pre .number, pre .date {color:#8CD0D3}
pre.dos .envvar, pre.dos .stream, pre .variable, pre.apache .sqbracket
{color:#EFDCBC}
pre.dos .flow, pre.diff .change, pre.python .exception, pre.python .built_in,
pre .literal, pre.tex .special
{color:#EFEFAF}
pre.diff .chunk, pre .subst {color:#8F8F8F}
pre.dos .keyword, pre.python .decorator, pre .title, pre.haskell .type,
pre.diff .header, pre.ruby .class .parent, pre.apache .tag, pre.nginx .built_in,
pre.tex .command, pre .prompt {color:#efef8f} 
pre.dos .winutils, pre.ruby .symbol, pre.ruby .symbol .string,
pre.ruby .string {color:#DCA3A3} 
pre.diff .deletion, pre .string, pre .tag .value, pre .preprocessor, pre .pragma,
pre .built_in, pre.sql .aggregate, pre .javadoc, pre.smalltalk .class,
pre.smalltalk .localvars, pre.smalltalk .array, pre.css .rules .value,
pre .attr_selector, pre .pseudo, pre.apache .cbracket, pre.tex .formula,
pre.coffeescript .attribute {color:#CC9393} 
pre .shebang, pre.diff .addition, pre .comment, pre.java .annotation,
pre .template_comment, pre .pi, pre .doctype {color:#7F9F7F}
/* pre.coffeescript .javascript, pre.javascript .xml, pre.tex .formula, pre.xml .javascript,
pre.xml .vbscript, pre.xml .css, pre.xml .cdata{} */


/* COMMENTS
----------------------------------------------- */
.page__addcomm-form {margin-bottom: 20px;}
.ac-form {position: relative;}
.ac-form__header, .ac-form__editor, .ac-form .message-info {gap: 10px; margin-bottom: 10px;}
.ac-form__btn {padding: 0 60px;}
.ac-form__bottom {gap: 25px;}
.confidential-check {font-size: 14px;}
.ac-form__header > span {margin-left: 15px;}
.ac-form .comments_subscribe {margin-top: 0px;}

.comments_subscribe + br, .ac-form .bb-editor + br, .mass_comments_action {display: none;}

.comm__title {font-size: 18px; margin-bottom: 20px; font-weight: 400;}

.comm {margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--bdc);}
.comm--admin {padding: 20px; border: 1px solid var(--accent); background-color: var(--bg); 
	border-radius: 10px; box-shadow: var(--bsh);}
.comm__img {width: 50px; height: 50px; border-radius: 5px;}
.comm__author, .comm__author a {font-weight: 400;}
.comm__author .has-icon {color: var(--accent-3);}
.comm__date {color: var(--tt-fade); font-size: 14px; margin-top: 3px;}
.comm__text {margin: 10px 0 15px 0;}
.comm__action {font-size: 12px; font-weight: 400; text-transform: uppercase; --tt: var(--tt-fade); color: var(--tt-fade);}
.comm__ctrl {margin: -5px 0; height: 30px;}
.comm__ctrl-btn {font-size: 24px; height: 30px; border-radius: 15px; color: var(--tt-fade);}
.comm__ctrl-menu li + li {margin-top: 10px;}
.comm__ctrl-menu li::before {width: 1.2em; font-size: 18px; opacity: 0.6;}
body:has(.pwidget) #dropmenudiv {z-index: 1000 !important;}
.full-text > *:last-child, .comm__text > div > *:last-child, .quote_body > *:last-child {margin: 0;}


/* POPUP WIDGET
----------------------------------------------- */
.pwidget {background-color: var(--bg); color: var(--tt); 
	border-radius: 20px; overflow: hidden; z-index: 999; padding: 20px; padding-top: 24px; 
	position: fixed; left: 20px; bottom: 20px; right: 20px; box-shadow: 0 0 60px rgba(0,0,0,0.5);}
.pwidget::before {content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); 
	background-color: rgba(0,0,0,0.2); height: 4px; width: 40px; border-radius: 2px;}
.pwidget .wctrl__content {display: block; margin-bottom: 20px;}
@media screen and (min-width: 760px) {
	.pwidget {left: 50%; bottom: 50%; right: auto; translate: -50% 50%; width: 400px;}
	.pwidget::before {display: none;}
}


/* LOGIN
----------------------------------------------- */
.lgn, .lgn-logged {position: fixed; z-index: 999; left: 50%; top: 50%; translate: -50% -50%; background-color: var(--bg);
	width: 440px; max-width: calc(100% - 40px); box-shadow: var(--bsh-popover); padding: 40px; border-radius: 10px;}
.lgn-logged {width: 380px;}
.lgn__btn-close {position: absolute; right: 20px; top: 20px; font-size: 18px; z-index: 6;}
.lgn__header {text-align: center; margin-bottom: 35px; margin-top: -5px;}
.lgn__title {font-weight: 400; font-size: 28px;}
.lgn__row + .lgn__row {margin-top: 10px;}
.lgn__ctrl a {color: var(--accent-2);}
.lgn__input input {--ui-elem-height: 50px; padding-left: 66px;}
.lgn__row::before {width: 50px; height: 50px; border-right: 1px solid var(--bdc); font-size: 18px; 
	position: absolute; left: 0; top: 0;}
.lgn__ctrl {font-size: 14px;}
.lgn__btn {padding-top: 30px;}

.lgn-logged__user-avatar {width: 100px; border-radius: 50%;}
.lgn-logged__user-name {font-size: 18px; font-weight: 400;}
.lgn-logged__balance {margin: 20px -40px; padding: 20px 40px; background-color: var(--bg-darker);}
.lgn-logged__menu a {display: flex; height: 40px; align-items: center; gap: 10px; position: relative;}
.lgn-logged__menu a::before {font-size: 18px; width: 1.2em; opacity: 0.6;}
.lgn-logged__menu-logout {color: var(--accent-3);}
.lgn-logged__menu a span {margin-left: auto; font-size: 14px;}
.lgn-logged__balance-count {font-size: 24px; font-weight: 500;}
.dt .header__lp-input .has-checkbox input {background-color: var(--green);}
.dt .header__lp-input .has-checkbox input::before {left: 19px;}


/* BILLING
----------------------------------------------- */
.box.story {padding: 40px; background-color: var(--bg); border-radius: 10px; position: relative; overflow: hidden;}
.billing-panel {position: relative;}
.billing-balance {border-bottom: 1px solid var(--bdc); padding-bottom: 20px; margin-bottom: 20px; 
	position: relative; padding-left: 110px; font-weight: 500; font-size: 24px;}
.billing-panel > img {position: absolute; left: 0px; top: -20px; 
	width: 100px; height: 100px; border-radius: 50%; object-fit: cover;}
.billing-balance span {flex: 1; font-weight: 400; font-size: 18px;}
.billing-balance a {position: absolute; right: 0; top: 50%; margin-top: -30px; display: flex; align-items: center; border-radius: 5px; 
	height: 40px; padding: 0 20px; background-color: var(--accent-1); color: #fff; font-weight: 400; font-size: 16px;}
.billing-menu-content {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px;}
.billing-menu-content a, .billing-table td a {color: var(--accent-2);}
.billing-content {padding: 20px 40px; margin: 0 -40px; background-color: var(--bg-darker-0); 
	border-top: 1px solid var(--bdc); margin-bottom: -40px;}
.billing-pay-step {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;}
.billing-pay-step input {text-align: center;}
.billing-pay-step button {margin-left: 0 !important;}
.billing-content h5 {margin-bottom: 20px;}
.billing-table, .b__invoice table {width: 100%; border: 1px solid var(--bdc); background-color: var(--bg);}
.billing-table td, .billing-table th, .b__invoice td {border: 1px solid var(--bdc); padding: 10px 20px !important;}
.billing-table td > div {font-size: 14px !important; color: var(--tt-fade) !important;}
.billing-table td:nth-child(1) {padding: 0 !important; width: 60px !important; text-align: center; font-size: 14px;}
.billing-table td:nth-child(1):last-child {padding: 10px 20px !important;}
.billing-table td:nth-child(1) img {display: block; width: 40px; height: 40px; margin: 0 auto;}
.billing-table td:nth-child(3), .billing-table td:nth-child(4) {text-align: center;}
.billing-table td:nth-child(5) {text-align: right;}
.billing-table td button {font-size: 14px; height: 30px; padding: 0 10px; margin: 3px;}
.billing-table td button {background-color: var(--accent-1);}
.billing-table td button + button {background-color: var(--accent-3);}
.billing-table td:not(:has(button:nth-child(2))) button {background-color: var(--accent-2);}
.billing-table td:nth-child(1):not([width="60"],[style="width: 5%"]) {width: auto !important; padding: 10px 20px !important;}
.b__invoice {background: var(--bg-darker) !important; font-size: 14px !important;}
.b__invoice_payeed {background-image: url("../billing/icons/payed.png"); float: right;
	display: block; width: 120px; height: 88px; margin: 15px;}

.billing-pay-grid {display: grid; gap: 20px; grid-template-columns: 300px 1fr;}
.billing-pay-grid h5 {grid-column: 1/-1; margin: 0;}
.billing-pay-label:has(ul) {padding-left: 20px; border-left: 5px solid var(--accent-1); grid-column: 1/-1;}
.payment__desc a {color: var(--accent-2); text-decoration: underline;}
.payment__desc ul {font-weight: 400; margin-top: 15px;}
.billing-pay-grid > div:last-child {display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 20px; align-content: start;}
.billing-pay-label:has(img) {border-radius: 5px; border: 1px solid var(--bdc); padding: 20px; 
	background-color: #fff; color: #000; position: relative; font-weight: 400; font-size: 18px;}
.billing-pay-label:has(img) input {opacity: 0; position: absolute; inset: 0; cursor: pointer;}
.billing-pay-label img {display: block; margin-top: 10px;}
.billing-pay-label:has(input:checked) {border-color: var(--accent-2) !important; box-shadow: var(--bsh);}
.billing-pay-label:has(input:hover) {border-color: var(--accent);}
.billing-pay-fields {background: var(--gradient); box-shadow: var(--bsh); color: #fff; --tt: #fff;
	padding: 20px; border-radius: 5px; display: grid; gap: 15px; font-weight: 400;}
.billing-form-item div {font-size: 14px; font-weight: 300;}
.billing-pay-fields a {text-decoration: underline;}
.billing-pay-grid > div:last-child > p:has(.btn) {grid-column: 1 / -1;}
.dt .billing-pay-label:not(:nth-child(2)):has(input:checked) {background-color: #ccc;}

@media screen and (max-width: 1220px) {
	.billing-pay-grid {grid-template-columns: repeat(1,1fr);}
}
@media screen and (max-width: 760px) {
	.box.story {padding: 20px;}
	.billing-balance {padding-left: 90px;}
	.billing-panel > img {width: 70px; height: 70px; top: 0px;}
	.billing-balance a {height: 20px; font-size: 12px; padding: 0 10px; top: -10px; 
		margin-top: 0; border-radius: 3px; right: -10px;}
	.billing-menu-content a, .billing-table {font-size: 14px;}
	.billing-content {padding: 20px; margin: 0 -20px; margin-bottom: -20px;}
	.billing-pay-step {gap: 10px; font-size: 14px; flex-direction: column;}
	.billing-pay-step button {width: 100%;}
	.billing-table td, .billing-table th, .b__invoice td {padding: 10px !important;}
	.billing-table td:nth-child(1) {width: 30px !important; padding: 0 !important;}
	.billing-table td:nth-child(1) img {width: 20px; height: 20px;}
	.billing-table:has(td:nth-child(1)[width="60"]) td:nth-child(1) {width: 80px !important; font-size: 12px;}
	.billing-content:has(.billing-table) {overflow-x: auto;}
	.billing-content:has(.billing-table) form, .billing-table td button, .b__invoice {width: 100%;}
	.billing-table td:nth-child(1):not([width="60"],[style="width: 5%"]) {width: auto !important; padding: 10px !important;}
	.b__invoice {width: 100% !important; padding: 0 !important; background: none !important;}
}