@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap";
*,
*::before,
*::after {
    box-sizing: border-box;
    outline: none !important
}

:where(ul, ol):where([class]) {
    padding-left: 0
}

:where(blockquote, figure):where([class]) {
    margin: 0
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
    margin-block: 0
}

:where(dd[class]) {
    margin-left: 0
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none
}

:where(ul[class]) {
    list-style: none
}

p {
    --paragraphMarginBottom: 24px;
    margin-block: 0
}

p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom)
}

img {
    display: block;
    max-width: 100%
}

input,
textarea,
select,
button {
    font: inherit
}

html {
    height: 100%;
    scroll-behavior: smooth
}

a {
    color: inherit
}

a,
a:hover {
    text-decoration: none
}

button {
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0
}

svg *[fill] {
    fill: currentColor
}

svg *[stroke] {
    stroke: currentColor
}

body {
    padding: 0;
    margin: 0
}

:root {
    --color-white: #fff;
    --color-dark: #000;
    --color-primary: #3858f6;
    --color-akcent: #8ff564;
    --color-red: #ff3829;
    --container: 1350px;
    --transition: 0.2s;
    --font-primary: "PT Sans", serif;
    --font-secondary: "Montserrat", serif;
    --bg-white: #fff;
    --bg-gray: #f0f2f5;
    --btn-primary-bg: #3858f6;
    --btn-primary-bg-hover: #4160f9;
    --body-bg: #fff;
    --color-text: #000;
    --color-title: #000;
    --color-gray: #eee;
    --color-gray-dark: #c3c3c3;
    --color-link: #000;
    --btn-dark-bg: #000;
    --footer-bg: #f0f2f5;
    --form-bg: #fff;
    --form-active: #a3a3a3;
    --color-main-link: #000;
    --color-main-link-hover: #757575;
    --bg-sidebar: #fbfbfd
}

:root[data-theme=dark] {
    --bg-white: #000;
    --bg-gray: #1c1c1c;
    --color-dark: #fff;
    --body-bg: #131314;
    --color-text: #cdcdcd;
    --color-title: #fff;
    --color-gray: #333333;
    --color-gray-dark: #333333;
    --color-link: #a1a1a1;
    --btn-dark-bg: #252424;
    --footer-bg: #101010;
    --form-bg: #161616;
    --form-active: #a3a3a3;
    --color-main-link: #fff;
    --color-main-link-hover: #78eb54;
    --bg-sidebar: #181818
}

h2 {
    font-size: clamp(25px, 3.3103448276vw, 48px);
    line-height: 1
}

h5 {
    font-size: 20px
}

.btn,
.bbcodes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0);
    height: 42px;
    padding-inline: 25px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: var(--transition);
    transform: scale(1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-family: var(--font-secondary)
}

.btn-sm,
.bbcodes-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0);
    height: 40px;
    padding-inline: 25px;
    border-radius: 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    transition: var(--transition);
    transform: scale(1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-family: var(--font-secondary)
}

.btn-lg,
.bbcodes-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0);
    height: 52px;
    padding-inline: 25px;
    border-radius: 52px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: var(--transition);
    transform: scale(1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-family: var(--font-secondary)
}

.btn-primary,
.bbcodes {
    color: #fff;
    background: var(--btn-primary-bg);
    box-shadow: none;
    border-color: var(--btn-primary-bg)
}

.btn-primary:hover,
.bbcodes:hover {
    color: #fff;
    background: var(--btn-primary-bg-hover);
    box-shadow: none;
    border-color: var(--btn-primary-bg-hover)
}

.btn-dark {
    color: #fff;
    background: var(--btn-dark-bg);
    box-shadow: none;
    border-color: var(--btn-dark-bg)
}

.btn-dark:hover {
    color: #000;
    background: var(--color-akcent);
    box-shadow: none;
    border-color: var(--color-akcent)
}

.btn-dark.active {
    background-color: var(--btn-bg-hover-primary)
}

.btn-outline-gray {
    color: var(--color-dark);
    background: transparrent;
    box-shadow: none;
    border-color: var(--color-gray)
}

.btn-outline-gray:hover {
    color: var(--color-white);
    background: var(--color-dark);
    box-shadow: none;
    border-color: var(--color-dark)
}

.btn-secondary {
    color: var(--color-white);
    background: var(--btn-bg-secondary);
    box-shadow: none;
    border-color: var(--btn-bg-secondary)
}

.btn-secondary:hover {
    color: var(--color-white);
    background: var(--btn-bg-hover-secondary);
    box-shadow: none;
    border-color: var(--btn-bg-hover-secondary)
}

.btn-transparrent {
    color: var(--color-dark);
    background: transparrent;
    box-shadow: none;
    border-color: transparrent
}

.btn-transparrent:hover {
    color: var(--color-dark);
    background: #edeceb;
    box-shadow: none;
    border-color: #edeceb
}

.btn-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-gray);
    border-radius: 50%;
    transition: .1s;
    flex-shrink: 0;
    color: var(--color-dark)
}

.btn-option:hover {
    border-color: var(--color-dark)
}

.btn-popular {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    height: 35px;
    border-radius: 40px;
    padding-inline: 15px;
    background-color: #f7efc2;
    color: #000;
    font-size: 14px;
    font-family: var(--font-secondary);
    font-weight: 700
}

.btn-popular svg {
    color: #ff3829;
    transition: transform .3s
}

.btn-popular:hover {
    color: #000
}

.btn-popular:hover svg {
    transform: rotate(180deg)
}

.form-input,
.form #searchinput {
    --form-height: 42px;
    --form-padding: 15px;
    --form-radius: 10px;
    display: block;
    width: 100%;
    height: var(--form-height);
    font-size: 14px;
    color: var(--color-dark);
    background-color: var(--form-bg);
    outline: none;
    border-radius: var(--form-radius);
    border: 2px solid var(--color-gray);
    padding-inline: var(--form-padding);
    transition: var(--transition)
}

.form-input-lg,
.form #searchinput-lg {
    --form-height: 52px;
    --form-padding: 20px;
    --form-radius: 14px
}

.form-input:focus,
.form-input:focus,
.form #searchinput:focus,
.form #searchinput:focus {
    border-color: var(--color-primary)
}

.form-input:focus,
.form #searchinput:focus {
    box-shadow: 1px 0px 3px 4px rgba(56, 88, 246, .14)
}

.form-textarea {
    --form-height: 42px;
    --form-padding: 15px;
    --form-radius: 10px;
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--color-dark);
    background-color: var(--form-bg);
    outline: none;
    border-radius: var(--form-radius);
    border: 2px solid var(--color-gray);
    padding: var(--form-padding);
    transition: var(--transition)
}

.form-textarea:focus,
.form-textarea:focus {
    border-color: var(--color-primary)
}

.form-textarea:focus {
    box-shadow: 1px 0px 3px 4px rgba(56, 88, 246, .14)
}

.form-file {
    padding-block: 8px
}

.form-select,
select {
    --form-padding: 15px;
    --form-radius: 10px;
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--color-dark);
    background-color: var(--form-bg);
    outline: none;
    border-radius: var(--form-radius);
    border: 2px solid var(--color-gray);
    padding-inline: var(--form-padding);
    transition: var(--transition);
    height: 42px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat right;
    background-position-x: calc(100% - 22px)
}

.form-select:focus,
.form-select:focus,
select:focus,
select:focus {
    border-color: var(--color-primary)
}

.form-select:focus,
select:focus {
    box-shadow: 1px 0px 3px 4px rgba(56, 88, 246, .14)
}

.btn-theme::before {
    content: "";
    --theme-icon: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' class='size-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z' /%3e%3c/svg%3e");
    -webkit-mask-image: var(--theme-icon);
    mask-image: var(--theme-icon);
    background-color: var(--color-dark);
    width: 20px;
    height: 20px
}

.btn-theme.dark::before {
    --theme-icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3e%3c/path%3e%3c/svg%3e")
}

.backdrop::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1030;
    background-color: rgba(0, 0, 0, .5)
}

.separator {
    margin: 5px 0;
    padding: 0;
    height: 0;
    border: none;
    border-top: 1px solid var(--color-gray)
}

.bg-gray {
    background-color: var(--bg-gray)
}

@keyframes showScale {
    0% {
        transform: scale(0.8);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate-flip {
    perspective: 1000px
}

.animate-flip span {
    position: relative;
    display: inline-block;
    padding: 0;
    transition: transform .3s;
    transform-origin: 50% 0;
    transform-style: preserve-3d
}

.animate-flip span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-hover);
    transition: color .3s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center
}

.animate-flip:hover span,
.animate-flip:focus span {
    transform: rotateX(90deg) translateY(-22px)
}

.animate-flip:hover span:before,
.animate-flip:focus span:before {
    color: #fff
}

.dropdown {
    position: relative;
    z-index: 1030
}

.dropdown__content {
    --dropdown-bg: #000;
    --dropdown-top: 27px;
    --dropdown-width: 250px;
    --dropdown-padding: 25px 15px;
    position: absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: var(--dropdown-bg);
    margin-top: var(--dropdown-top);
    visibility: hidden;
    opacity: 0;
    padding: var(--dropdown-padding);
    border-radius: 0 0 8px 8px;
    min-width: var(--dropdown-width);
    transition: .2s
}

.dropdown__content.open {
    visibility: visible;
    opacity: 1
}

.dropdown__content-list {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.dropdown__content-end {
    right: 0
}

.dropdown__content-start {
    left: 0
}

.dropdown__arrow::after {
    content: "";
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    width: 14px;
    height: 14px;
    display: block;
    transition: .3s;
    background-color: var(--color-link)
}

.dropdown__arrow.active::after {
    transform: rotate(180deg)
}

.dropdown__item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    color: var(--color-white);
    padding-inline: 10px;
    font-weight: 600;
    border-radius: 8px
}

.dropdown__item::before {
    content: "";
    width: 0px;
    height: 8px;
    transition: .3s;
    border-radius: 50%;
    background-color: var(--color-akcent);
    opacity: 0
}

.dropdown__item:hover {
    color: var(--color-akcent)
}

.dropdown__item:hover::before {
    opacity: 1;
    width: 8px
}

.dropdown__btn::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.70515 5.49992C5.09567 5.89045 5.72884 5.89045 6.11936 5.49992L9.70515 1.91414C10.3351 1.28417 9.88895 0.207031 8.99804 0.207031H1.82647C0.935563 0.207031 0.489396 1.28417 1.11936 1.91414L4.70515 5.49992Z' fill='%231F1E1D'/%3E%3C/svg%3E%0A");
    width: 10px;
    height: 6px;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    transition: var(--transition);
    opacity: .5;
    border-radius: 10px;
    overflow: hidden
}

.dropdown__btn.active::after {
    transform: rotate(180deg)
}

.modal {
    display: none;
    position: fixed;
    z-index: 1030;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: .2s ease-in-out
}

.modal-content {
    background-color: var(--bg-white);
    padding: 20px;
    width: 100%;
    max-width: var(--modal-width);
    border-radius: var(--modal-radius);
    animation: showScale .5s ease-in-out forwards
}

.modal-content-sm {
    --modal-width: 450px;
    --modal-radius: 15px
}

.modal-content-md {
    --modal-width: 500px;
    --modal-radius: 15px
}

.modal-content-lg {
    --modal-width: 650px;
    --modal-radius: 20px
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 30px;
    height: 70px
}

.modal-container {
    max-height: 70vh;
    height: 100%;
    overflow-y: auto;
    padding: 20px 5px
}

.modal-container::-webkit-scrollbar {
    width: 12px
}

.modal-container::-webkit-scrollbar-track {
    background: var(--color-card)
}

.modal-container::-webkit-scrollbar-thumb {
    background-color: var(--color-gray);
    border-radius: 20px;
    border: 2px solid var(--color-card)
}

.modal-close {
    position: relative;
    color: #999;
    transition: var(--transition);
    position: absolute;
    top: 20px;
    right: 20px
}

.modal-close:hover {
    color: var(--color-dark)
}

.modal-open {
    overflow: hidden;
    padding-right: 15px
}

.m-auto {
    margin: auto !important
}

.mt-auto {
    margin-top: auto !important
}

.me-auto {
    margin-right: auto !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-auto {
    margin-left: auto !important
}

.mx-auto {
    margin-inline: auto !important
}

.my-auto {
    margin-block: auto !important
}

.p-auto {
    padding: auto !important
}

.pt-auto {
    padding-top: auto !important
}

.pe-auto {
    padding-right: auto !important
}

.pb-auto {
    padding-bottom: auto !important
}

.ps-auto {
    padding-left: auto !important
}

.px-auto {
    padding-inline: auto !important
}

.py-auto {
    padding-block: auto !important
}

.m-0 {
    margin: 0 !important
}

.mt-0 {
    margin-top: 0 !important
}

.me-0 {
    margin-right: 0 !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.ms-0 {
    margin-left: 0 !important
}

.mx-0 {
    margin-inline: 0 !important
}

.my-0 {
    margin-block: 0 !important
}

.p-0 {
    padding: 0 !important
}

.pt-0 {
    padding-top: 0 !important
}

.pe-0 {
    padding-right: 0 !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.ps-0 {
    padding-left: 0 !important
}

.px-0 {
    padding-inline: 0 !important
}

.py-0 {
    padding-block: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.mt-1 {
    margin-top: .25rem !important
}

.me-1 {
    margin-right: .25rem !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.ms-1 {
    margin-left: .25rem !important
}

.mx-1 {
    margin-inline: .25rem !important
}

.my-1 {
    margin-block: .25rem !important
}

.p-1 {
    padding: .25rem !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pe-1 {
    padding-right: .25rem !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.ps-1 {
    padding-left: .25rem !important
}

.px-1 {
    padding-inline: .25rem !important
}

.py-1 {
    padding-block: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.mx-2 {
    margin-inline: .5rem !important
}

.my-2 {
    margin-block: .5rem !important
}

.p-2 {
    padding: .5rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pe-2 {
    padding-right: .5rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.px-2 {
    padding-inline: .5rem !important
}

.py-2 {
    padding-block: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.mx-3 {
    margin-inline: 1rem !important
}

.my-3 {
    margin-block: 1rem !important
}

.p-3 {
    padding: 1rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.px-3 {
    padding-inline: 1rem !important
}

.py-3 {
    padding-block: 1rem !important
}

.m-4 {
    margin: 2rem !important
}

.mt-4 {
    margin-top: 2rem !important
}

.me-4 {
    margin-right: 2rem !important
}

.mb-4 {
    margin-bottom: 2rem !important
}

.ms-4 {
    margin-left: 2rem !important
}

.mx-4 {
    margin-inline: 2rem !important
}

.my-4 {
    margin-block: 2rem !important
}

.p-4 {
    padding: 2rem !important
}

.pt-4 {
    padding-top: 2rem !important
}

.pe-4 {
    padding-right: 2rem !important
}

.pb-4 {
    padding-bottom: 2rem !important
}

.ps-4 {
    padding-left: 2rem !important
}

.px-4 {
    padding-inline: 2rem !important
}

.py-4 {
    padding-block: 2rem !important
}

.m-5 {
    margin: 3rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.ms-5 {
    margin-left: 3rem !important
}

.mx-5 {
    margin-inline: 3rem !important
}

.my-5 {
    margin-block: 3rem !important
}

.p-5 {
    padding: 3rem !important
}

.pt-5 {
    padding-top: 3rem !important
}

.pe-5 {
    padding-right: 3rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-5 {
    padding-left: 3rem !important
}

.px-5 {
    padding-inline: 3rem !important
}

.py-5 {
    padding-block: 3rem !important
}

.m-6 {
    margin: 25px !important
}

.mt-6 {
    margin-top: 25px !important
}

.me-6 {
    margin-right: 25px !important
}

.mb-6 {
    margin-bottom: 25px !important
}

.ms-6 {
    margin-left: 25px !important
}

.mx-6 {
    margin-inline: 25px !important
}

.my-6 {
    margin-block: 25px !important
}

.p-6 {
    padding: 25px !important
}

.pt-6 {
    padding-top: 25px !important
}

.pe-6 {
    padding-right: 25px !important
}

.pb-6 {
    padding-bottom: 25px !important
}

.ps-6 {
    padding-left: 25px !important
}

.px-6 {
    padding-inline: 25px !important
}

.py-6 {
    padding-block: 25px !important
}

.m-7 {
    margin: 50px !important
}

.mt-7 {
    margin-top: 50px !important
}

.me-7 {
    margin-right: 50px !important
}

.mb-7 {
    margin-bottom: 50px !important
}

.ms-7 {
    margin-left: 50px !important
}

.mx-7 {
    margin-inline: 50px !important
}

.my-7 {
    margin-block: 50px !important
}

.p-7 {
    padding: 50px !important
}

.pt-7 {
    padding-top: 50px !important
}

.pe-7 {
    padding-right: 50px !important
}

.pb-7 {
    padding-bottom: 50px !important
}

.ps-7 {
    padding-left: 50px !important
}

.px-7 {
    padding-inline: 50px !important
}

.py-7 {
    padding-block: 50px !important
}

.m-8 {
    margin: 100px !important
}

.mt-8 {
    margin-top: 100px !important
}

.me-8 {
    margin-right: 100px !important
}

.mb-8 {
    margin-bottom: 100px !important
}

.ms-8 {
    margin-left: 100px !important
}

.mx-8 {
    margin-inline: 100px !important
}

.my-8 {
    margin-block: 100px !important
}

.p-8 {
    padding: 100px !important
}

.pt-8 {
    padding-top: 100px !important
}

.pe-8 {
    padding-right: 100px !important
}

.pb-8 {
    padding-bottom: 100px !important
}

.ps-8 {
    padding-left: 100px !important
}

.px-8 {
    padding-inline: 100px !important
}

.py-8 {
    padding-block: 100px !important
}

.m-9 {
    margin: 150px !important
}

.mt-9 {
    margin-top: 150px !important
}

.me-9 {
    margin-right: 150px !important
}

.mb-9 {
    margin-bottom: 150px !important
}

.ms-9 {
    margin-left: 150px !important
}

.mx-9 {
    margin-inline: 150px !important
}

.my-9 {
    margin-block: 150px !important
}

.p-9 {
    padding: 150px !important
}

.pt-9 {
    padding-top: 150px !important
}

.pe-9 {
    padding-right: 150px !important
}

.pb-9 {
    padding-bottom: 150px !important
}

.ps-9 {
    padding-left: 150px !important
}

.px-9 {
    padding-inline: 150px !important
}

.py-9 {
    padding-block: 150px !important
}

.m-10 {
    margin: 200px !important
}

.mt-10 {
    margin-top: 200px !important
}

.me-10 {
    margin-right: 200px !important
}

.mb-10 {
    margin-bottom: 200px !important
}

.ms-10 {
    margin-left: 200px !important
}

.mx-10 {
    margin-inline: 200px !important
}

.my-10 {
    margin-block: 200px !important
}

.p-10 {
    padding: 200px !important
}

.pt-10 {
    padding-top: 200px !important
}

.pe-10 {
    padding-right: 200px !important
}

.pb-10 {
    padding-bottom: 200px !important
}

.ps-10 {
    padding-left: 200px !important
}

.px-10 {
    padding-inline: 200px !important
}

.py-10 {
    padding-block: 200px !important
}

.gap-auto {
    gap: auto !important
}

.gap-0 {
    gap: 0 !important
}

.gap-1 {
    gap: .25rem !important
}

.gap-2 {
    gap: .5rem !important
}

.gap-3 {
    gap: 1rem !important
}

.gap-4 {
    gap: 2rem !important
}

.gap-5 {
    gap: 3rem !important
}

.gap-6 {
    gap: 25px !important
}

.gap-7 {
    gap: 50px !important
}

.gap-8 {
    gap: 100px !important
}

.gap-9 {
    gap: 150px !important
}

.gap-10 {
    gap: 200px !important
}

.scrollbar::-webkit-scrollbar {
    width: 10px
}

.scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0)
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #cacaca;
    border-radius: 20px;
    border: 2px solid var(--color-body)
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.d-none {
    display: none !important
}

.d-flex {
    display: flex !important
}

.d-block {
    display: block !important
}

.fw-100 {
    font-weight: 100 !important
}

.fw-101 {
    font-weight: 101 !important
}

.fw-102 {
    font-weight: 102 !important
}

.fw-103 {
    font-weight: 103 !important
}

.fw-104 {
    font-weight: 104 !important
}

.fw-105 {
    font-weight: 105 !important
}

.fw-106 {
    font-weight: 106 !important
}

.fw-107 {
    font-weight: 107 !important
}

.fw-108 {
    font-weight: 108 !important
}

.fw-109 {
    font-weight: 109 !important
}

.fw-110 {
    font-weight: 110 !important
}

.fw-111 {
    font-weight: 111 !important
}

.fw-112 {
    font-weight: 112 !important
}

.fw-113 {
    font-weight: 113 !important
}

.fw-114 {
    font-weight: 114 !important
}

.fw-115 {
    font-weight: 115 !important
}

.fw-116 {
    font-weight: 116 !important
}

.fw-117 {
    font-weight: 117 !important
}

.fw-118 {
    font-weight: 118 !important
}

.fw-119 {
    font-weight: 119 !important
}

.fw-120 {
    font-weight: 120 !important
}

.fw-121 {
    font-weight: 121 !important
}

.fw-122 {
    font-weight: 122 !important
}

.fw-123 {
    font-weight: 123 !important
}

.fw-124 {
    font-weight: 124 !important
}

.fw-125 {
    font-weight: 125 !important
}

.fw-126 {
    font-weight: 126 !important
}

.fw-127 {
    font-weight: 127 !important
}

.fw-128 {
    font-weight: 128 !important
}

.fw-129 {
    font-weight: 129 !important
}

.fw-130 {
    font-weight: 130 !important
}

.fw-131 {
    font-weight: 131 !important
}

.fw-132 {
    font-weight: 132 !important
}

.fw-133 {
    font-weight: 133 !important
}

.fw-134 {
    font-weight: 134 !important
}

.fw-135 {
    font-weight: 135 !important
}

.fw-136 {
    font-weight: 136 !important
}

.fw-137 {
    font-weight: 137 !important
}

.fw-138 {
    font-weight: 138 !important
}

.fw-139 {
    font-weight: 139 !important
}

.fw-140 {
    font-weight: 140 !important
}

.fw-141 {
    font-weight: 141 !important
}

.fw-142 {
    font-weight: 142 !important
}

.fw-143 {
    font-weight: 143 !important
}

.fw-144 {
    font-weight: 144 !important
}

.fw-145 {
    font-weight: 145 !important
}

.fw-146 {
    font-weight: 146 !important
}

.fw-147 {
    font-weight: 147 !important
}

.fw-148 {
    font-weight: 148 !important
}

.fw-149 {
    font-weight: 149 !important
}

.fw-150 {
    font-weight: 150 !important
}

.fw-151 {
    font-weight: 151 !important
}

.fw-152 {
    font-weight: 152 !important
}

.fw-153 {
    font-weight: 153 !important
}

.fw-154 {
    font-weight: 154 !important
}

.fw-155 {
    font-weight: 155 !important
}

.fw-156 {
    font-weight: 156 !important
}

.fw-157 {
    font-weight: 157 !important
}

.fw-158 {
    font-weight: 158 !important
}

.fw-159 {
    font-weight: 159 !important
}

.fw-160 {
    font-weight: 160 !important
}

.fw-161 {
    font-weight: 161 !important
}

.fw-162 {
    font-weight: 162 !important
}

.fw-163 {
    font-weight: 163 !important
}

.fw-164 {
    font-weight: 164 !important
}

.fw-165 {
    font-weight: 165 !important
}

.fw-166 {
    font-weight: 166 !important
}

.fw-167 {
    font-weight: 167 !important
}

.fw-168 {
    font-weight: 168 !important
}

.fw-169 {
    font-weight: 169 !important
}

.fw-170 {
    font-weight: 170 !important
}

.fw-171 {
    font-weight: 171 !important
}

.fw-172 {
    font-weight: 172 !important
}

.fw-173 {
    font-weight: 173 !important
}

.fw-174 {
    font-weight: 174 !important
}

.fw-175 {
    font-weight: 175 !important
}

.fw-176 {
    font-weight: 176 !important
}

.fw-177 {
    font-weight: 177 !important
}

.fw-178 {
    font-weight: 178 !important
}

.fw-179 {
    font-weight: 179 !important
}

.fw-180 {
    font-weight: 180 !important
}

.fw-181 {
    font-weight: 181 !important
}

.fw-182 {
    font-weight: 182 !important
}

.fw-183 {
    font-weight: 183 !important
}

.fw-184 {
    font-weight: 184 !important
}

.fw-185 {
    font-weight: 185 !important
}

.fw-186 {
    font-weight: 186 !important
}

.fw-187 {
    font-weight: 187 !important
}

.fw-188 {
    font-weight: 188 !important
}

.fw-189 {
    font-weight: 189 !important
}

.fw-190 {
    font-weight: 190 !important
}

.fw-191 {
    font-weight: 191 !important
}

.fw-192 {
    font-weight: 192 !important
}

.fw-193 {
    font-weight: 193 !important
}

.fw-194 {
    font-weight: 194 !important
}

.fw-195 {
    font-weight: 195 !important
}

.fw-196 {
    font-weight: 196 !important
}

.fw-197 {
    font-weight: 197 !important
}

.fw-198 {
    font-weight: 198 !important
}

.fw-199 {
    font-weight: 199 !important
}

.fw-200 {
    font-weight: 200 !important
}

.fw-201 {
    font-weight: 201 !important
}

.fw-202 {
    font-weight: 202 !important
}

.fw-203 {
    font-weight: 203 !important
}

.fw-204 {
    font-weight: 204 !important
}

.fw-205 {
    font-weight: 205 !important
}

.fw-206 {
    font-weight: 206 !important
}

.fw-207 {
    font-weight: 207 !important
}

.fw-208 {
    font-weight: 208 !important
}

.fw-209 {
    font-weight: 209 !important
}

.fw-210 {
    font-weight: 210 !important
}

.fw-211 {
    font-weight: 211 !important
}

.fw-212 {
    font-weight: 212 !important
}

.fw-213 {
    font-weight: 213 !important
}

.fw-214 {
    font-weight: 214 !important
}

.fw-215 {
    font-weight: 215 !important
}

.fw-216 {
    font-weight: 216 !important
}

.fw-217 {
    font-weight: 217 !important
}

.fw-218 {
    font-weight: 218 !important
}

.fw-219 {
    font-weight: 219 !important
}

.fw-220 {
    font-weight: 220 !important
}

.fw-221 {
    font-weight: 221 !important
}

.fw-222 {
    font-weight: 222 !important
}

.fw-223 {
    font-weight: 223 !important
}

.fw-224 {
    font-weight: 224 !important
}

.fw-225 {
    font-weight: 225 !important
}

.fw-226 {
    font-weight: 226 !important
}

.fw-227 {
    font-weight: 227 !important
}

.fw-228 {
    font-weight: 228 !important
}

.fw-229 {
    font-weight: 229 !important
}

.fw-230 {
    font-weight: 230 !important
}

.fw-231 {
    font-weight: 231 !important
}

.fw-232 {
    font-weight: 232 !important
}

.fw-233 {
    font-weight: 233 !important
}

.fw-234 {
    font-weight: 234 !important
}

.fw-235 {
    font-weight: 235 !important
}

.fw-236 {
    font-weight: 236 !important
}

.fw-237 {
    font-weight: 237 !important
}

.fw-238 {
    font-weight: 238 !important
}

.fw-239 {
    font-weight: 239 !important
}

.fw-240 {
    font-weight: 240 !important
}

.fw-241 {
    font-weight: 241 !important
}

.fw-242 {
    font-weight: 242 !important
}

.fw-243 {
    font-weight: 243 !important
}

.fw-244 {
    font-weight: 244 !important
}

.fw-245 {
    font-weight: 245 !important
}

.fw-246 {
    font-weight: 246 !important
}

.fw-247 {
    font-weight: 247 !important
}

.fw-248 {
    font-weight: 248 !important
}

.fw-249 {
    font-weight: 249 !important
}

.fw-250 {
    font-weight: 250 !important
}

.fw-251 {
    font-weight: 251 !important
}

.fw-252 {
    font-weight: 252 !important
}

.fw-253 {
    font-weight: 253 !important
}

.fw-254 {
    font-weight: 254 !important
}

.fw-255 {
    font-weight: 255 !important
}

.fw-256 {
    font-weight: 256 !important
}

.fw-257 {
    font-weight: 257 !important
}

.fw-258 {
    font-weight: 258 !important
}

.fw-259 {
    font-weight: 259 !important
}

.fw-260 {
    font-weight: 260 !important
}

.fw-261 {
    font-weight: 261 !important
}

.fw-262 {
    font-weight: 262 !important
}

.fw-263 {
    font-weight: 263 !important
}

.fw-264 {
    font-weight: 264 !important
}

.fw-265 {
    font-weight: 265 !important
}

.fw-266 {
    font-weight: 266 !important
}

.fw-267 {
    font-weight: 267 !important
}

.fw-268 {
    font-weight: 268 !important
}

.fw-269 {
    font-weight: 269 !important
}

.fw-270 {
    font-weight: 270 !important
}

.fw-271 {
    font-weight: 271 !important
}

.fw-272 {
    font-weight: 272 !important
}

.fw-273 {
    font-weight: 273 !important
}

.fw-274 {
    font-weight: 274 !important
}

.fw-275 {
    font-weight: 275 !important
}

.fw-276 {
    font-weight: 276 !important
}

.fw-277 {
    font-weight: 277 !important
}

.fw-278 {
    font-weight: 278 !important
}

.fw-279 {
    font-weight: 279 !important
}

.fw-280 {
    font-weight: 280 !important
}

.fw-281 {
    font-weight: 281 !important
}

.fw-282 {
    font-weight: 282 !important
}

.fw-283 {
    font-weight: 283 !important
}

.fw-284 {
    font-weight: 284 !important
}

.fw-285 {
    font-weight: 285 !important
}

.fw-286 {
    font-weight: 286 !important
}

.fw-287 {
    font-weight: 287 !important
}

.fw-288 {
    font-weight: 288 !important
}

.fw-289 {
    font-weight: 289 !important
}

.fw-290 {
    font-weight: 290 !important
}

.fw-291 {
    font-weight: 291 !important
}

.fw-292 {
    font-weight: 292 !important
}

.fw-293 {
    font-weight: 293 !important
}

.fw-294 {
    font-weight: 294 !important
}

.fw-295 {
    font-weight: 295 !important
}

.fw-296 {
    font-weight: 296 !important
}

.fw-297 {
    font-weight: 297 !important
}

.fw-298 {
    font-weight: 298 !important
}

.fw-299 {
    font-weight: 299 !important
}

.fw-300 {
    font-weight: 300 !important
}

.fw-301 {
    font-weight: 301 !important
}

.fw-302 {
    font-weight: 302 !important
}

.fw-303 {
    font-weight: 303 !important
}

.fw-304 {
    font-weight: 304 !important
}

.fw-305 {
    font-weight: 305 !important
}

.fw-306 {
    font-weight: 306 !important
}

.fw-307 {
    font-weight: 307 !important
}

.fw-308 {
    font-weight: 308 !important
}

.fw-309 {
    font-weight: 309 !important
}

.fw-310 {
    font-weight: 310 !important
}

.fw-311 {
    font-weight: 311 !important
}

.fw-312 {
    font-weight: 312 !important
}

.fw-313 {
    font-weight: 313 !important
}

.fw-314 {
    font-weight: 314 !important
}

.fw-315 {
    font-weight: 315 !important
}

.fw-316 {
    font-weight: 316 !important
}

.fw-317 {
    font-weight: 317 !important
}

.fw-318 {
    font-weight: 318 !important
}

.fw-319 {
    font-weight: 319 !important
}

.fw-320 {
    font-weight: 320 !important
}

.fw-321 {
    font-weight: 321 !important
}

.fw-322 {
    font-weight: 322 !important
}

.fw-323 {
    font-weight: 323 !important
}

.fw-324 {
    font-weight: 324 !important
}

.fw-325 {
    font-weight: 325 !important
}

.fw-326 {
    font-weight: 326 !important
}

.fw-327 {
    font-weight: 327 !important
}

.fw-328 {
    font-weight: 328 !important
}

.fw-329 {
    font-weight: 329 !important
}

.fw-330 {
    font-weight: 330 !important
}

.fw-331 {
    font-weight: 331 !important
}

.fw-332 {
    font-weight: 332 !important
}

.fw-333 {
    font-weight: 333 !important
}

.fw-334 {
    font-weight: 334 !important
}

.fw-335 {
    font-weight: 335 !important
}

.fw-336 {
    font-weight: 336 !important
}

.fw-337 {
    font-weight: 337 !important
}

.fw-338 {
    font-weight: 338 !important
}

.fw-339 {
    font-weight: 339 !important
}

.fw-340 {
    font-weight: 340 !important
}

.fw-341 {
    font-weight: 341 !important
}

.fw-342 {
    font-weight: 342 !important
}

.fw-343 {
    font-weight: 343 !important
}

.fw-344 {
    font-weight: 344 !important
}

.fw-345 {
    font-weight: 345 !important
}

.fw-346 {
    font-weight: 346 !important
}

.fw-347 {
    font-weight: 347 !important
}

.fw-348 {
    font-weight: 348 !important
}

.fw-349 {
    font-weight: 349 !important
}

.fw-350 {
    font-weight: 350 !important
}

.fw-351 {
    font-weight: 351 !important
}

.fw-352 {
    font-weight: 352 !important
}

.fw-353 {
    font-weight: 353 !important
}

.fw-354 {
    font-weight: 354 !important
}

.fw-355 {
    font-weight: 355 !important
}

.fw-356 {
    font-weight: 356 !important
}

.fw-357 {
    font-weight: 357 !important
}

.fw-358 {
    font-weight: 358 !important
}

.fw-359 {
    font-weight: 359 !important
}

.fw-360 {
    font-weight: 360 !important
}

.fw-361 {
    font-weight: 361 !important
}

.fw-362 {
    font-weight: 362 !important
}

.fw-363 {
    font-weight: 363 !important
}

.fw-364 {
    font-weight: 364 !important
}

.fw-365 {
    font-weight: 365 !important
}

.fw-366 {
    font-weight: 366 !important
}

.fw-367 {
    font-weight: 367 !important
}

.fw-368 {
    font-weight: 368 !important
}

.fw-369 {
    font-weight: 369 !important
}

.fw-370 {
    font-weight: 370 !important
}

.fw-371 {
    font-weight: 371 !important
}

.fw-372 {
    font-weight: 372 !important
}

.fw-373 {
    font-weight: 373 !important
}

.fw-374 {
    font-weight: 374 !important
}

.fw-375 {
    font-weight: 375 !important
}

.fw-376 {
    font-weight: 376 !important
}

.fw-377 {
    font-weight: 377 !important
}

.fw-378 {
    font-weight: 378 !important
}

.fw-379 {
    font-weight: 379 !important
}

.fw-380 {
    font-weight: 380 !important
}

.fw-381 {
    font-weight: 381 !important
}

.fw-382 {
    font-weight: 382 !important
}

.fw-383 {
    font-weight: 383 !important
}

.fw-384 {
    font-weight: 384 !important
}

.fw-385 {
    font-weight: 385 !important
}

.fw-386 {
    font-weight: 386 !important
}

.fw-387 {
    font-weight: 387 !important
}

.fw-388 {
    font-weight: 388 !important
}

.fw-389 {
    font-weight: 389 !important
}

.fw-390 {
    font-weight: 390 !important
}

.fw-391 {
    font-weight: 391 !important
}

.fw-392 {
    font-weight: 392 !important
}

.fw-393 {
    font-weight: 393 !important
}

.fw-394 {
    font-weight: 394 !important
}

.fw-395 {
    font-weight: 395 !important
}

.fw-396 {
    font-weight: 396 !important
}

.fw-397 {
    font-weight: 397 !important
}

.fw-398 {
    font-weight: 398 !important
}

.fw-399 {
    font-weight: 399 !important
}

.fw-400 {
    font-weight: 400 !important
}

.fw-401 {
    font-weight: 401 !important
}

.fw-402 {
    font-weight: 402 !important
}

.fw-403 {
    font-weight: 403 !important
}

.fw-404 {
    font-weight: 404 !important
}

.fw-405 {
    font-weight: 405 !important
}

.fw-406 {
    font-weight: 406 !important
}

.fw-407 {
    font-weight: 407 !important
}

.fw-408 {
    font-weight: 408 !important
}

.fw-409 {
    font-weight: 409 !important
}

.fw-410 {
    font-weight: 410 !important
}

.fw-411 {
    font-weight: 411 !important
}

.fw-412 {
    font-weight: 412 !important
}

.fw-413 {
    font-weight: 413 !important
}

.fw-414 {
    font-weight: 414 !important
}

.fw-415 {
    font-weight: 415 !important
}

.fw-416 {
    font-weight: 416 !important
}

.fw-417 {
    font-weight: 417 !important
}

.fw-418 {
    font-weight: 418 !important
}

.fw-419 {
    font-weight: 419 !important
}

.fw-420 {
    font-weight: 420 !important
}

.fw-421 {
    font-weight: 421 !important
}

.fw-422 {
    font-weight: 422 !important
}

.fw-423 {
    font-weight: 423 !important
}

.fw-424 {
    font-weight: 424 !important
}

.fw-425 {
    font-weight: 425 !important
}

.fw-426 {
    font-weight: 426 !important
}

.fw-427 {
    font-weight: 427 !important
}

.fw-428 {
    font-weight: 428 !important
}

.fw-429 {
    font-weight: 429 !important
}

.fw-430 {
    font-weight: 430 !important
}

.fw-431 {
    font-weight: 431 !important
}

.fw-432 {
    font-weight: 432 !important
}

.fw-433 {
    font-weight: 433 !important
}

.fw-434 {
    font-weight: 434 !important
}

.fw-435 {
    font-weight: 435 !important
}

.fw-436 {
    font-weight: 436 !important
}

.fw-437 {
    font-weight: 437 !important
}

.fw-438 {
    font-weight: 438 !important
}

.fw-439 {
    font-weight: 439 !important
}

.fw-440 {
    font-weight: 440 !important
}

.fw-441 {
    font-weight: 441 !important
}

.fw-442 {
    font-weight: 442 !important
}

.fw-443 {
    font-weight: 443 !important
}

.fw-444 {
    font-weight: 444 !important
}

.fw-445 {
    font-weight: 445 !important
}

.fw-446 {
    font-weight: 446 !important
}

.fw-447 {
    font-weight: 447 !important
}

.fw-448 {
    font-weight: 448 !important
}

.fw-449 {
    font-weight: 449 !important
}

.fw-450 {
    font-weight: 450 !important
}

.fw-451 {
    font-weight: 451 !important
}

.fw-452 {
    font-weight: 452 !important
}

.fw-453 {
    font-weight: 453 !important
}

.fw-454 {
    font-weight: 454 !important
}

.fw-455 {
    font-weight: 455 !important
}

.fw-456 {
    font-weight: 456 !important
}

.fw-457 {
    font-weight: 457 !important
}

.fw-458 {
    font-weight: 458 !important
}

.fw-459 {
    font-weight: 459 !important
}

.fw-460 {
    font-weight: 460 !important
}

.fw-461 {
    font-weight: 461 !important
}

.fw-462 {
    font-weight: 462 !important
}

.fw-463 {
    font-weight: 463 !important
}

.fw-464 {
    font-weight: 464 !important
}

.fw-465 {
    font-weight: 465 !important
}

.fw-466 {
    font-weight: 466 !important
}

.fw-467 {
    font-weight: 467 !important
}

.fw-468 {
    font-weight: 468 !important
}

.fw-469 {
    font-weight: 469 !important
}

.fw-470 {
    font-weight: 470 !important
}

.fw-471 {
    font-weight: 471 !important
}

.fw-472 {
    font-weight: 472 !important
}

.fw-473 {
    font-weight: 473 !important
}

.fw-474 {
    font-weight: 474 !important
}

.fw-475 {
    font-weight: 475 !important
}

.fw-476 {
    font-weight: 476 !important
}

.fw-477 {
    font-weight: 477 !important
}

.fw-478 {
    font-weight: 478 !important
}

.fw-479 {
    font-weight: 479 !important
}

.fw-480 {
    font-weight: 480 !important
}

.fw-481 {
    font-weight: 481 !important
}

.fw-482 {
    font-weight: 482 !important
}

.fw-483 {
    font-weight: 483 !important
}

.fw-484 {
    font-weight: 484 !important
}

.fw-485 {
    font-weight: 485 !important
}

.fw-486 {
    font-weight: 486 !important
}

.fw-487 {
    font-weight: 487 !important
}

.fw-488 {
    font-weight: 488 !important
}

.fw-489 {
    font-weight: 489 !important
}

.fw-490 {
    font-weight: 490 !important
}

.fw-491 {
    font-weight: 491 !important
}

.fw-492 {
    font-weight: 492 !important
}

.fw-493 {
    font-weight: 493 !important
}

.fw-494 {
    font-weight: 494 !important
}

.fw-495 {
    font-weight: 495 !important
}

.fw-496 {
    font-weight: 496 !important
}

.fw-497 {
    font-weight: 497 !important
}

.fw-498 {
    font-weight: 498 !important
}

.fw-499 {
    font-weight: 499 !important
}

.fw-500 {
    font-weight: 500 !important
}

.fw-501 {
    font-weight: 501 !important
}

.fw-502 {
    font-weight: 502 !important
}

.fw-503 {
    font-weight: 503 !important
}

.fw-504 {
    font-weight: 504 !important
}

.fw-505 {
    font-weight: 505 !important
}

.fw-506 {
    font-weight: 506 !important
}

.fw-507 {
    font-weight: 507 !important
}

.fw-508 {
    font-weight: 508 !important
}

.fw-509 {
    font-weight: 509 !important
}

.fw-510 {
    font-weight: 510 !important
}

.fw-511 {
    font-weight: 511 !important
}

.fw-512 {
    font-weight: 512 !important
}

.fw-513 {
    font-weight: 513 !important
}

.fw-514 {
    font-weight: 514 !important
}

.fw-515 {
    font-weight: 515 !important
}

.fw-516 {
    font-weight: 516 !important
}

.fw-517 {
    font-weight: 517 !important
}

.fw-518 {
    font-weight: 518 !important
}

.fw-519 {
    font-weight: 519 !important
}

.fw-520 {
    font-weight: 520 !important
}

.fw-521 {
    font-weight: 521 !important
}

.fw-522 {
    font-weight: 522 !important
}

.fw-523 {
    font-weight: 523 !important
}

.fw-524 {
    font-weight: 524 !important
}

.fw-525 {
    font-weight: 525 !important
}

.fw-526 {
    font-weight: 526 !important
}

.fw-527 {
    font-weight: 527 !important
}

.fw-528 {
    font-weight: 528 !important
}

.fw-529 {
    font-weight: 529 !important
}

.fw-530 {
    font-weight: 530 !important
}

.fw-531 {
    font-weight: 531 !important
}

.fw-532 {
    font-weight: 532 !important
}

.fw-533 {
    font-weight: 533 !important
}

.fw-534 {
    font-weight: 534 !important
}

.fw-535 {
    font-weight: 535 !important
}

.fw-536 {
    font-weight: 536 !important
}

.fw-537 {
    font-weight: 537 !important
}

.fw-538 {
    font-weight: 538 !important
}

.fw-539 {
    font-weight: 539 !important
}

.fw-540 {
    font-weight: 540 !important
}

.fw-541 {
    font-weight: 541 !important
}

.fw-542 {
    font-weight: 542 !important
}

.fw-543 {
    font-weight: 543 !important
}

.fw-544 {
    font-weight: 544 !important
}

.fw-545 {
    font-weight: 545 !important
}

.fw-546 {
    font-weight: 546 !important
}

.fw-547 {
    font-weight: 547 !important
}

.fw-548 {
    font-weight: 548 !important
}

.fw-549 {
    font-weight: 549 !important
}

.fw-550 {
    font-weight: 550 !important
}

.fw-551 {
    font-weight: 551 !important
}

.fw-552 {
    font-weight: 552 !important
}

.fw-553 {
    font-weight: 553 !important
}

.fw-554 {
    font-weight: 554 !important
}

.fw-555 {
    font-weight: 555 !important
}

.fw-556 {
    font-weight: 556 !important
}

.fw-557 {
    font-weight: 557 !important
}

.fw-558 {
    font-weight: 558 !important
}

.fw-559 {
    font-weight: 559 !important
}

.fw-560 {
    font-weight: 560 !important
}

.fw-561 {
    font-weight: 561 !important
}

.fw-562 {
    font-weight: 562 !important
}

.fw-563 {
    font-weight: 563 !important
}

.fw-564 {
    font-weight: 564 !important
}

.fw-565 {
    font-weight: 565 !important
}

.fw-566 {
    font-weight: 566 !important
}

.fw-567 {
    font-weight: 567 !important
}

.fw-568 {
    font-weight: 568 !important
}

.fw-569 {
    font-weight: 569 !important
}

.fw-570 {
    font-weight: 570 !important
}

.fw-571 {
    font-weight: 571 !important
}

.fw-572 {
    font-weight: 572 !important
}

.fw-573 {
    font-weight: 573 !important
}

.fw-574 {
    font-weight: 574 !important
}

.fw-575 {
    font-weight: 575 !important
}

.fw-576 {
    font-weight: 576 !important
}

.fw-577 {
    font-weight: 577 !important
}

.fw-578 {
    font-weight: 578 !important
}

.fw-579 {
    font-weight: 579 !important
}

.fw-580 {
    font-weight: 580 !important
}

.fw-581 {
    font-weight: 581 !important
}

.fw-582 {
    font-weight: 582 !important
}

.fw-583 {
    font-weight: 583 !important
}

.fw-584 {
    font-weight: 584 !important
}

.fw-585 {
    font-weight: 585 !important
}

.fw-586 {
    font-weight: 586 !important
}

.fw-587 {
    font-weight: 587 !important
}

.fw-588 {
    font-weight: 588 !important
}

.fw-589 {
    font-weight: 589 !important
}

.fw-590 {
    font-weight: 590 !important
}

.fw-591 {
    font-weight: 591 !important
}

.fw-592 {
    font-weight: 592 !important
}

.fw-593 {
    font-weight: 593 !important
}

.fw-594 {
    font-weight: 594 !important
}

.fw-595 {
    font-weight: 595 !important
}

.fw-596 {
    font-weight: 596 !important
}

.fw-597 {
    font-weight: 597 !important
}

.fw-598 {
    font-weight: 598 !important
}

.fw-599 {
    font-weight: 599 !important
}

.fw-600 {
    font-weight: 600 !important
}

.fw-601 {
    font-weight: 601 !important
}

.fw-602 {
    font-weight: 602 !important
}

.fw-603 {
    font-weight: 603 !important
}

.fw-604 {
    font-weight: 604 !important
}

.fw-605 {
    font-weight: 605 !important
}

.fw-606 {
    font-weight: 606 !important
}

.fw-607 {
    font-weight: 607 !important
}

.fw-608 {
    font-weight: 608 !important
}

.fw-609 {
    font-weight: 609 !important
}

.fw-610 {
    font-weight: 610 !important
}

.fw-611 {
    font-weight: 611 !important
}

.fw-612 {
    font-weight: 612 !important
}

.fw-613 {
    font-weight: 613 !important
}

.fw-614 {
    font-weight: 614 !important
}

.fw-615 {
    font-weight: 615 !important
}

.fw-616 {
    font-weight: 616 !important
}

.fw-617 {
    font-weight: 617 !important
}

.fw-618 {
    font-weight: 618 !important
}

.fw-619 {
    font-weight: 619 !important
}

.fw-620 {
    font-weight: 620 !important
}

.fw-621 {
    font-weight: 621 !important
}

.fw-622 {
    font-weight: 622 !important
}

.fw-623 {
    font-weight: 623 !important
}

.fw-624 {
    font-weight: 624 !important
}

.fw-625 {
    font-weight: 625 !important
}

.fw-626 {
    font-weight: 626 !important
}

.fw-627 {
    font-weight: 627 !important
}

.fw-628 {
    font-weight: 628 !important
}

.fw-629 {
    font-weight: 629 !important
}

.fw-630 {
    font-weight: 630 !important
}

.fw-631 {
    font-weight: 631 !important
}

.fw-632 {
    font-weight: 632 !important
}

.fw-633 {
    font-weight: 633 !important
}

.fw-634 {
    font-weight: 634 !important
}

.fw-635 {
    font-weight: 635 !important
}

.fw-636 {
    font-weight: 636 !important
}

.fw-637 {
    font-weight: 637 !important
}

.fw-638 {
    font-weight: 638 !important
}

.fw-639 {
    font-weight: 639 !important
}

.fw-640 {
    font-weight: 640 !important
}

.fw-641 {
    font-weight: 641 !important
}

.fw-642 {
    font-weight: 642 !important
}

.fw-643 {
    font-weight: 643 !important
}

.fw-644 {
    font-weight: 644 !important
}

.fw-645 {
    font-weight: 645 !important
}

.fw-646 {
    font-weight: 646 !important
}

.fw-647 {
    font-weight: 647 !important
}

.fw-648 {
    font-weight: 648 !important
}

.fw-649 {
    font-weight: 649 !important
}

.fw-650 {
    font-weight: 650 !important
}

.fw-651 {
    font-weight: 651 !important
}

.fw-652 {
    font-weight: 652 !important
}

.fw-653 {
    font-weight: 653 !important
}

.fw-654 {
    font-weight: 654 !important
}

.fw-655 {
    font-weight: 655 !important
}

.fw-656 {
    font-weight: 656 !important
}

.fw-657 {
    font-weight: 657 !important
}

.fw-658 {
    font-weight: 658 !important
}

.fw-659 {
    font-weight: 659 !important
}

.fw-660 {
    font-weight: 660 !important
}

.fw-661 {
    font-weight: 661 !important
}

.fw-662 {
    font-weight: 662 !important
}

.fw-663 {
    font-weight: 663 !important
}

.fw-664 {
    font-weight: 664 !important
}

.fw-665 {
    font-weight: 665 !important
}

.fw-666 {
    font-weight: 666 !important
}

.fw-667 {
    font-weight: 667 !important
}

.fw-668 {
    font-weight: 668 !important
}

.fw-669 {
    font-weight: 669 !important
}

.fw-670 {
    font-weight: 670 !important
}

.fw-671 {
    font-weight: 671 !important
}

.fw-672 {
    font-weight: 672 !important
}

.fw-673 {
    font-weight: 673 !important
}

.fw-674 {
    font-weight: 674 !important
}

.fw-675 {
    font-weight: 675 !important
}

.fw-676 {
    font-weight: 676 !important
}

.fw-677 {
    font-weight: 677 !important
}

.fw-678 {
    font-weight: 678 !important
}

.fw-679 {
    font-weight: 679 !important
}

.fw-680 {
    font-weight: 680 !important
}

.fw-681 {
    font-weight: 681 !important
}

.fw-682 {
    font-weight: 682 !important
}

.fw-683 {
    font-weight: 683 !important
}

.fw-684 {
    font-weight: 684 !important
}

.fw-685 {
    font-weight: 685 !important
}

.fw-686 {
    font-weight: 686 !important
}

.fw-687 {
    font-weight: 687 !important
}

.fw-688 {
    font-weight: 688 !important
}

.fw-689 {
    font-weight: 689 !important
}

.fw-690 {
    font-weight: 690 !important
}

.fw-691 {
    font-weight: 691 !important
}

.fw-692 {
    font-weight: 692 !important
}

.fw-693 {
    font-weight: 693 !important
}

.fw-694 {
    font-weight: 694 !important
}

.fw-695 {
    font-weight: 695 !important
}

.fw-696 {
    font-weight: 696 !important
}

.fw-697 {
    font-weight: 697 !important
}

.fw-698 {
    font-weight: 698 !important
}

.fw-699 {
    font-weight: 699 !important
}

.fw-700 {
    font-weight: 700 !important
}

.fw-701 {
    font-weight: 701 !important
}

.fw-702 {
    font-weight: 702 !important
}

.fw-703 {
    font-weight: 703 !important
}

.fw-704 {
    font-weight: 704 !important
}

.fw-705 {
    font-weight: 705 !important
}

.fw-706 {
    font-weight: 706 !important
}

.fw-707 {
    font-weight: 707 !important
}

.fw-708 {
    font-weight: 708 !important
}

.fw-709 {
    font-weight: 709 !important
}

.fw-710 {
    font-weight: 710 !important
}

.fw-711 {
    font-weight: 711 !important
}

.fw-712 {
    font-weight: 712 !important
}

.fw-713 {
    font-weight: 713 !important
}

.fw-714 {
    font-weight: 714 !important
}

.fw-715 {
    font-weight: 715 !important
}

.fw-716 {
    font-weight: 716 !important
}

.fw-717 {
    font-weight: 717 !important
}

.fw-718 {
    font-weight: 718 !important
}

.fw-719 {
    font-weight: 719 !important
}

.fw-720 {
    font-weight: 720 !important
}

.fw-721 {
    font-weight: 721 !important
}

.fw-722 {
    font-weight: 722 !important
}

.fw-723 {
    font-weight: 723 !important
}

.fw-724 {
    font-weight: 724 !important
}

.fw-725 {
    font-weight: 725 !important
}

.fw-726 {
    font-weight: 726 !important
}

.fw-727 {
    font-weight: 727 !important
}

.fw-728 {
    font-weight: 728 !important
}

.fw-729 {
    font-weight: 729 !important
}

.fw-730 {
    font-weight: 730 !important
}

.fw-731 {
    font-weight: 731 !important
}

.fw-732 {
    font-weight: 732 !important
}

.fw-733 {
    font-weight: 733 !important
}

.fw-734 {
    font-weight: 734 !important
}

.fw-735 {
    font-weight: 735 !important
}

.fw-736 {
    font-weight: 736 !important
}

.fw-737 {
    font-weight: 737 !important
}

.fw-738 {
    font-weight: 738 !important
}

.fw-739 {
    font-weight: 739 !important
}

.fw-740 {
    font-weight: 740 !important
}

.fw-741 {
    font-weight: 741 !important
}

.fw-742 {
    font-weight: 742 !important
}

.fw-743 {
    font-weight: 743 !important
}

.fw-744 {
    font-weight: 744 !important
}

.fw-745 {
    font-weight: 745 !important
}

.fw-746 {
    font-weight: 746 !important
}

.fw-747 {
    font-weight: 747 !important
}

.fw-748 {
    font-weight: 748 !important
}

.fw-749 {
    font-weight: 749 !important
}

.fw-750 {
    font-weight: 750 !important
}

.fw-751 {
    font-weight: 751 !important
}

.fw-752 {
    font-weight: 752 !important
}

.fw-753 {
    font-weight: 753 !important
}

.fw-754 {
    font-weight: 754 !important
}

.fw-755 {
    font-weight: 755 !important
}

.fw-756 {
    font-weight: 756 !important
}

.fw-757 {
    font-weight: 757 !important
}

.fw-758 {
    font-weight: 758 !important
}

.fw-759 {
    font-weight: 759 !important
}

.fw-760 {
    font-weight: 760 !important
}

.fw-761 {
    font-weight: 761 !important
}

.fw-762 {
    font-weight: 762 !important
}

.fw-763 {
    font-weight: 763 !important
}

.fw-764 {
    font-weight: 764 !important
}

.fw-765 {
    font-weight: 765 !important
}

.fw-766 {
    font-weight: 766 !important
}

.fw-767 {
    font-weight: 767 !important
}

.fw-768 {
    font-weight: 768 !important
}

.fw-769 {
    font-weight: 769 !important
}

.fw-770 {
    font-weight: 770 !important
}

.fw-771 {
    font-weight: 771 !important
}

.fw-772 {
    font-weight: 772 !important
}

.fw-773 {
    font-weight: 773 !important
}

.fw-774 {
    font-weight: 774 !important
}

.fw-775 {
    font-weight: 775 !important
}

.fw-776 {
    font-weight: 776 !important
}

.fw-777 {
    font-weight: 777 !important
}

.fw-778 {
    font-weight: 778 !important
}

.fw-779 {
    font-weight: 779 !important
}

.fw-780 {
    font-weight: 780 !important
}

.fw-781 {
    font-weight: 781 !important
}

.fw-782 {
    font-weight: 782 !important
}

.fw-783 {
    font-weight: 783 !important
}

.fw-784 {
    font-weight: 784 !important
}

.fw-785 {
    font-weight: 785 !important
}

.fw-786 {
    font-weight: 786 !important
}

.fw-787 {
    font-weight: 787 !important
}

.fw-788 {
    font-weight: 788 !important
}

.fw-789 {
    font-weight: 789 !important
}

.fw-790 {
    font-weight: 790 !important
}

.fw-791 {
    font-weight: 791 !important
}

.fw-792 {
    font-weight: 792 !important
}

.fw-793 {
    font-weight: 793 !important
}

.fw-794 {
    font-weight: 794 !important
}

.fw-795 {
    font-weight: 795 !important
}

.fw-796 {
    font-weight: 796 !important
}

.fw-797 {
    font-weight: 797 !important
}

.fw-798 {
    font-weight: 798 !important
}

.fw-799 {
    font-weight: 799 !important
}

.fw-800 {
    font-weight: 800 !important
}

.w-100 {
    width: 100% !important
}

.bg-white {
    background-color: var(--color-white) !important
}

.fs-14 {
    font-size: 14px
}

.flex-column {
    display: flex;
    flex-direction: column
}

.align-items-center {
    align-items: center
}

.visibility {
    visibility: visible
}

.visibility-hidden {
    visibility: hidden
}

.shadow-none {
    box-shadow: none !important
}

.heading h2 {
    font-weight: 600
}

.heading p {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4
}

.hidetext {
    position: absolute;
    opacity: 0;
    z-index: -1;
    left: -1000px;
    top: -1000px;
    visibility: hidden
}

@keyframes showScale {
    0% {
        transform: scale(0.8);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate-flip {
    perspective: 1000px
}

.animate-flip span {
    position: relative;
    display: inline-block;
    padding: 0;
    transition: transform .3s;
    transform-origin: 50% 0;
    transform-style: preserve-3d
}

.animate-flip span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-hover);
    transition: color .3s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center
}

.animate-flip:hover span,
.animate-flip:focus span {
    transform: rotateX(90deg) translateY(-22px)
}

.animate-flip:hover span:before,
.animate-flip:focus span:before {
    color: #fff
}

body {
    font-family: var(--font-primary);
    background-color: var(--body-bg);
    transition: .2s;
    color: var(--color-text)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-secondary)
}

a {
    transition: var(--transition)
}

a:hover {
    color: var(--color-primary)
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 30px
}

@media(max-width: 768px) {
    .container {
        padding-inline: 15px
    }
}

.container__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-gap: 20px;
    margin-top: 101px
}

@media(max-width: 1300px) {
    .container__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-gap: 20px
    }
}

@media(max-width: 1020px) {
    .container__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 50px
    }
    .sidebar__catmenu {
        display: none !important;
    }
}

@media(max-width: 600px) {
    .container__grid {
        margin-top: 81px
    }
}

.social {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px
}

.social-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-dark);
    transition: var(--transition)
}

.social-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-dark);
    transition: var(--transition)
}

.social-item span svg {
    fill: var(--color-dark)
}

.social-item:hover {
    color: var(--color-dark)
}

.social-item:hover span {
    border-color: var(--color-akcent);
    background-color: var(--color-akcent)
}

.social-item:hover span svg {
    fill: #000
}

.subscribe {
    position: relative
}

.subscribe-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 9px;
    right: 10px;
    background-color: var(--color-akcent);
    transition: var(--transition)
}

.subscribe-btn:hover {
    background-color: var(--btn-dark-bg)
}

.subscribe-btn:hover svg {
    color: var(--color-white)
}

.search {
    visibility: hidden;
    height: 0;
    opacity: 0;
    background-color: var(--body-bg);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    transition: .2s
}

.search.open {
    visibility: visible;
    height: auto;
    opacity: 1
}

.search__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-block: 40px 70px
}

@media(max-width: 600px) {
    .search__inner {
        overflow: scroll;
        height: 100vh
    }
}

.search__box {
    position: relative
}

.search__box::before {
    content: "";
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' width='25' height='25' stroke='currentColor' class='size-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3e%3c/svg%3e ");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' width='25' height='25' stroke='currentColor' class='size-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3e%3c/svg%3e ");
    background-color: var(--color-dark);
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 17px;
    opacity: .6
}

.search__box-form {
    width: 100%;
    padding-inline: 40px 20px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border: none;
    border-bottom: 1px solid var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-dark)
}

.search__box-form::-webkit-search-cancel-button {
    display: none
}

.search__close {
    position: absolute;
    top: 5px;
    right: 0
}

.search__title {
    font-size: clamp(16px, 1.3103448276vw, 19px);
    font-family: var(--font-secondary);
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.search__title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: block
}

.search__posts-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px
}

@media(max-width: 1020px) {
    .search__posts-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px
    }
}

@media(max-width: 600px) {
    .search__posts-inner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px
    }
}

.search__tags-inner {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap
}

.search__tags-inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    padding-inline: 16px;
    border: 2px solid var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark)
}

.search__tags-inner a:hover {
    border-color: var(--color-dark)
}

.search__tags-inner .tags_more a {
    gap: 5px
}

.search__tags-inner .tags_more a::after {
    content: "";
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 17l9.2-9.2M17 17V7H7'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 17l9.2-9.2M17 17V7H7'/%3e%3c/svg%3e");
    background-color: var(--color-dark);
    width: 20px;
    height: 20px;
    display: block
}

.search__item {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 15px
}

.search__item-poster {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    overflow: hidden
}

.search__item-poster img,
.search__item-poster picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.search__item-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center
}

.search__item-title {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-secondary);
    color: var(--color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.search__item-text {
    font-size: 14px;
    color: var(--color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.content {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.dark .header__logo img,
.dark .footer__logo img {
    transition: var(--transition);
    filter: invert(1)
}

.header {
    border-bottom: 1px solid var(--color-gray);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--body-bg);
    z-index: 1010
}

.header__inner {
    display: grid;
    grid-template-columns: 150px 1fr 250px;
    grid-gap: 20px;
    height: 70px;
    align-items: center
}

@media(max-width: 1060px) {
    .header__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px
    }
}

.header__logobox {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px
}

.header__logobox-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    border: 2px solid var(--color-gray);
    color: var(--color-dark)
}

.header__logobox-btn:hover,
.header__logobox-btn:focus {
    border-color: var(--color-dark);
    color: var(--color-dark)
}

@media(min-width: 1060px) {
    .header__logobox-mobile {
        display: none
    }
}

@media(max-width: 400px) {
    .header__logo img {
        height: 25px
    }
}

.header__menu {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 25px
}

.header__menu-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 3px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    color: var(--color-main-link);
    transition: var(--transition)
}

.header__menu-item:hover {
    color: var(--color-main-link-hover)
}

@media(max-width: 1060px) {
    .header__menu {
        display: none
    }
}

.header__options {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px
}

.wrap {
    margin-top: 71px
}

@media(max-width: 860px) {
    .wrap__slider {
        padding-inline: 0 !important
    }
}

.wrap__category {
    padding-block: 40px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
    margin-bottom: 50px
}

.wrap__category-item {
    width: 100%;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

.wrap__category-item img,
.wrap__category-item picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.wrap__category-item span {
    position: absolute;
    color: #fff;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-family: var(--font-secondary);
    font-weight: 600
}

.footer {
    background-color: var(--footer-bg);
    padding-block: 50px 30px;
    margin-top: 100px
}

.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px
}

@media(max-width: 1000px) {
    .footer__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px
    }
}

@media(max-width: 550px) {
    .footer__inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 40px
    }
}

.footer__seo {
    display: flex;
    flex-direction: column;
    gap: 30px
}

@media(max-width: 1000px) {
    .footer__seo {
        grid-column: span 2
    }
}

@media(max-width: 550px) {
    .footer__seo {
        grid-column: span 1
    }
}

.footer__seo p {
    max-width: 400px;
    margin-bottom: 0
}

.footer__subscribe {
    max-width: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.footer__subscribe-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-title)
}

.footer__title {
    font-size: clamp(17px, 1.3793103448vw, 20px);
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-title)
}

.footer__menu {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footer__menu-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-secondary);
    color: var(--color-link)
}

.footer__menu-item::after {
    content: "";
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 17l9.2-9.2M17 17V7H7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 17l9.2-9.2M17 17V7H7'/%3e%3c/svg%3e");
    background-color: var(--color-dark);
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: .4s
}

.footer__menu-item:hover {
    color: var(--color-link)
}

.footer__menu-item:hover::after {
    opacity: 1
}

.footer__posts-inner {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.footer__copyright {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 80px;
    background-color: var(--body-bg);
    border-radius: 15px;
    border: 1px solid var(--color-gray);
    padding-inline: 40px
}

@media(max-width: 820px) {
    .footer__copyright {
        flex-direction: column;
        align-items: start;
        height: auto;
        padding-block: 20px;
        padding-inline: 20px
    }
}

.footer__copyright-text {
    font-size: 14px;
    font-weight: 400
}

.footer__copyright-text a {
    color: var(--color-dark)
}

.footer__copyright-text a:hover {
    text-decoration: underline
}

.footer__copyright-menu {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 50px
}

@media(max-width: 820px) {
    .footer__copyright-menu {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 20px
    }
}

@media(max-width: 500px) {
    .footer__copyright-menu {
        flex-direction: column;
        align-items: start
    }
}

.footer__copyright-menu a {
    color: var(--color-dark);
    font-size: 14px
}

.footer__copyright-menu a:hover {
    text-decoration: underline
}

.popular {
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-gap: 20px
}

.popular__poster {
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden
}

.popular__poster img,
.popular__poster picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.popular__poster img {
    transition: .3s
}

.popular__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center
}

.popular__info-date {
    font-size: 14px;
    color: #999
}

.popular__info-title {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 700;
    font-family: var(--font-secondary);
    color: var(--color-dark);
    transition: .3s
}

.popular__info-title:hover {
    opacity: .7
}

.slider {
    position: relative
}

.slider__poster {
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 0 0 20px 20px
}

.slider__poster img,
.slider__poster picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

@media(max-width: 1020px) {
    .slider__poster {
        height: 380px
    }
}

.slider__content {
    z-index: 5;
    position: absolute;
    bottom: -80px;
    left: 50px;
    width: 100%
}

@media(max-width: 860px) {
    .slider__content {
        left: 0;
        padding: 15px
    }
}

.slider__info {
    background-color: var(--body-bg);
    padding: 30px;
    border-radius: 20px;
    width: 100%;
    max-width: 570px
}

@media(max-width: 860px) {
    .slider__info {
        padding: 20px;
        max-width: 100%
    }
}

.slider__info-category {
    display: block;
    font-size: 14px;
    color: #d93e40;
    font-weight: 700;
    font-family: var(--font-secondary);
    width: -moz-max-content;
    width: max-content;
    margin-bottom: 10px
}

.slider__info-title {
    font-size: clamp(25px, 2.4137931034vw, 35px);
    font-weight: 700;
    font-family: var(--font-secondary);
    line-height: 1;
    background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-size: 0px 2px;
    background-position: 0px 95%;
    background-repeat: no-repeat;
    transition: background-size .25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
    position: relative;
    display: inline;
    color: var(--color-dark);
    max-width: 430px
}

.slider__info-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.slider__info-title:hover {
    background-size: 100% 2px;
    color: var(--color-dark)
}

.slider__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px
}

@media(max-width: 600px) {
    .slider__footer {
        flex-direction: column;
        align-items: start
    }
}

.slider__author {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-gap: 10px;
    align-items: center
}

.slider__author-detalic {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 7px;
    margin-top: 3px;
    font-size: 14px
}

.slider__author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden
}

.slider__author-avatar img,
.slider__author-avatar picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.slider__author-name {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-secondary)
}

.slider__author-date {
    color: #999
}

.slider__author-views {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 7px;
    color: #999
}

.slider__author-views::before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: #c4c4c4
}

.slider__links {
    position: absolute;
    bottom: 35px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 35px;
    width: 100%;
    max-width: 150px
}

.slider__links .swiper-button-next,
.slider__links .swiper-button-prev {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    border: 1px solid #878787;
    position: relative;
    top: 0
}

.slider__links .swiper-button-next::after,
.slider__links .swiper-button-prev::after {
    --swiper-navigation-size: 20px;
    font-weight: 600;
    color: #878787
}

@media(max-width: 860px) {
    .slider__links {
        display: none
    }
}

.swiper {
    width: 100%;
    height: 610px;
    --swiper-theme-color: var(--color-dark);
    margin-bottom: 50px
}

@media(max-width: 1020px) {
    .swiper {
        height: 500px
    }
}

.loginpanel__profile {
    --dropdown-bg: var(--bg-white);
    --dropdown-top: 16px;
    --dropdown-width: 270px;
    --dropdown-padding: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .1)
}

.loginpanel__info {
    border-radius: 10px;
    border: 1px solid var(--color-gray);
    padding-bottom: 15px
}

.loginpanel__cover {
    background-color: var(--color-gray);
    height: 70px;
    border-radius: 10px;
    position: relative
}

.loginpanel__cover-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    overflow: hidden
}

.loginpanel__name {
    text-align: center;
    font-weight: 700;
    margin-top: 30px;
    font-size: 18px;
    font-family: var(--font-secondary)
}

.loginpanel__group,
.loginpanel__group span {
    text-align: center;
    font-size: 13px;
    color: #9b9b9b !important;
    font-weight: 400 !important
}

.loginpanel__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    padding-inline: 7px;
    height: 21px;
    border-radius: 21px;
    background-color: var(--login-count-bg);
    color: var(--login-count-color);
    font-size: 11px;
    font-weight: 600;
    margin-left: auto
}

.loginpanel__count-pm {
    --login-count-bg: var(--color-red);
    --login-count-color: #fff
}

.loginpanel__badge::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--color-red);
    border-radius: 50%;
    position: absolute;
    right: -1px;
    top: 2px;
    border: 2px solid #fff
}

.loginpanel__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 15px
}

.loginpanel__links-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    height: 38px;
    border-radius: 8px;
    padding-inline: 16px;
    color: var(--color-dark);
    font-weight: 700;
    font-family: var(--font-secondary);
    font-size: 14px
}

.loginpanel__links-item:hover {
    background-color: var(--color-gray);
    color: var(--color-dark)
}

.shortstory {
    --shortstory-columns: 1fr;
    display: grid;
    grid-template-columns: var(--shortstory-columns);
    grid-gap: 20px;
    position: relative
}

.shortstory__img {
    --shortstory-columns: 300px 1fr
}

@media(max-width: 1000px) {
    .shortstory {
        --shortstory-columns: 1fr
    }
}

.shortstory h2 {
    line-height: .5
}

.shortstory__picture {
    position: relative
}

.shortstory__focus {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7efc2;
    color: var(--color-red);
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 4px 4px 18px -2px rgba(34, 60, 80, .16)
}

.shortstory__poster {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 270px;
    overflow: hidden;
    border-radius: 20px
}

.shortstory__poster img,
.shortstory__poster picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.shortstory__edit {
    position: absolute;
    top: 15px;
    right: 20px;
    opacity: .4
}

.shortstory__edit a:hover {
    color: var(--color-dark)
}

.shortstory__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--color-gray);
    border-radius: 20px;
    padding: 20px;
    min-height: 250px
}

.shortstory__body-category {
    display: block;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 700;
    color: #d93e40;
    width: -moz-max-content;
    width: max-content;
    margin-bottom: 3px
}

.shortstory__body-title {
    font-size: clamp(16px, 1.3793103448vw, 20px);
    font-weight: 700;
    font-family: var(--font-secondary);
    line-height: 1;
    background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-size: 0px 2px;
    background-position: 0px 95%;
    background-repeat: no-repeat;
    transition: background-size .25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
    position: relative;
    display: inline
}

.shortstory__body-title:hover {
    background-size: 100% 2px;
    color: var(--color-dark)
}

.shortstory__body-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 15px
}

.shortstory__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-top: auto
}

@media(max-width: 1200px) {
    .shortstory__footer {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px
    }
}

.shortstory__author {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-gap: 10px
}

.shortstory__author-detalic {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-size: 13px;
    margin-top: 3px
}

.shortstory__author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden
}

.shortstory__author-avatar img,
.shortstory__author-avatar picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.shortstory__author-name {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-secondary)
}

.shortstory__author-date {
    color: #999;
    font-size: 13px
}

.shortstory__author-views {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    color: #999;
    font-size: 13px
}

.shortstory__author-views::before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: #c4c4c4
}

.shortstory__options {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px
}

@media(max-width: 1200px) {
    .shortstory__options {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px
    }
}

.shortstory__options-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--color-gray);
    padding-inline: 10px;
    font-size: 14px;
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-text)
}

.shortstory__options-item svg {
    opacity: .8
}

.shortstory__options-item:hover {
    background-color: var(--color-gray)
}

.fullstory__poster {
    position: relative
}

.fullstory__poster img,
.fullstory__poster picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

.fullstory__poster img {
    max-height: 450px;
    border-radius: 15px
}

.fullstory__head {
    border-bottom: 1px solid var(--color-gray);
    padding-block: 30px;
    margin-bottom: 50px
}

.fullstory__title {
    font-size: clamp(25px, 2.7586206897vw, 40px);
    font-weight: 700
}

.fullstory__text {
    padding-inline: 70px
}

@media(max-width: 1020px) {
    .fullstory__text {
        padding-inline: 0
    }
}

.fullstory__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 30px 10px
}

.fullstory__info-line {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.fullstory__info-login {
    font-weight: 700;
    font-size: 13px
}

.fullstory__info-date a {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    color: #999;
    font-size: 13px
}

.fullstory__info-date a:hover {
    color: #999
}

.fullstory__info-date a::before {
    content: "•"
}

.fullstory__info-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    color: #999;
    font-size: 13px
}

.fullstory__tags {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
    padding-block: 20px 10px
}

.fullstory__tags a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    border-radius: 8px;
    padding-inline: 16px;
    border: 2px solid var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark)
}

.fullstory__tags a:hover {
    border-color: var(--color-dark)
}

.fullstory__category {
    display: block;
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 700;
    color: #d93e40;
    margin-bottom: 10px;
    width: -moz-max-content;
    width: max-content
}

.fullstory__other {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 30px;
    margin-block: 30px;
    border-top: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray)
}

.fullstory__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 30px
}

.fullstory__options-links {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.fullstory__options-share {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px
}

.fullstory__options-share svg {
    fill: var(--color-dark)
}

.fullstory__author {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 30px;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-gray)
}

@media(max-width: 600px) {
    .fullstory__author {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 30px
    }
}

.fullstory__author-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.fullstory__author-avatar img,
.fullstory__author-avatar picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition)
}

@media(max-width: 600px) {
    .fullstory__author-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.fullstory__author-info {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.fullstory__author-name {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-secondary)
}

.fullstory__author-activity {
    font-size: 14px;
    color: #999
}

.fullstory__comments {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--color-gray);
    padding-block: 40px
}

@media(max-width: 600px) {
    .fullstory__comments {
        flex-direction: column;
        align-items: start
    }
}

.fullstory__addcomments {
    margin-top: 50px;
    background-color: var(--bg-sidebar);
    padding: 30px;
    border-radius: 20px
}

.fullstory__addcomments h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px
}

.fullstory__commlist {
    margin-top: 30px
}

.editor {
    line-height: 1.5
}

.editor a {
    color: var(--color-primary)
}

.editor a:hover {
    text-decoration: underline
}

.editor img {
    margin-block: 15px;
    border-radius: 15px
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.sidebar__catmenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px
}

.sidebar__catmenu-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    background-color: var(--bg-sidebar);
    border-radius: 10px;
    padding: 10px;
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 600
}

.sidebar__catmenu-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.sidebar__catmenu-item:hover {
    color: var(--color-dark);
    background-color: var(--color-gray)
}

.sidebar__card {
    background-color: var(--bg-sidebar);
    border-radius: 10px;
    padding: 20px
}

.sidebar__card-2 {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--color-gray)
}

.sidebar__card-title {
    text-align: center;
    border-bottom: 1px solid var(--color-gray);
    padding-bottom: 15px;
    margin-bottom: 20px
}

.sidebar__card-title-2 {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px
}

.sidebar__card-list {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.sidebar__card-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.sidebar__tags {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 25px
}

.sidebar__tags a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    padding-inline: 16px;
    border: 2px solid var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark)
}

.sidebar__tags a:hover {
    border-color: var(--color-dark)
}

.login {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    padding-top: 30px
}

.login__title {
    text-align: center;
    font-size: clamp(19px, 2.2068965517vw, 32px)
}

.login__text {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #999
}

.login__text a {
    color: var(--color-primary)
}

.login__text a:hover {
    text-decoration: underline
}

.login__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.login__body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px
}

.login__pass {
    text-align: center;
    padding-bottom: 20px
}

.login__pass a {
    color: var(--color-primary);
    font-size: 13px
}

.login__pass a:hover {
    text-decoration: underline
}

.lostpassword__head,
.registration__head {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.lostpassword__head a,
.registration__head a {
    color: var(--color-primary)
}

.lostpassword__head a:hover,
.registration__head a:hover {
    text-decoration: underline
}

.lostpassword__body,
.registration__body {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.registration__body-check {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px
}

.widgets {
    margin-bottom: 50px;
    background-color: var(--bg-gray);
    padding: 50px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 450px) {
    .widgets {
        padding: 30px 20px
    }
}

.widgets__head {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.widgets__title {
    font-size: clamp(25px, 2.7586206897vw, 40px)
}

.widgets__count {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    padding-inline: 10px;
    height: 30px;
    border-radius: 35px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    font-size: 13px;
    font-weight: 600
}

.addcomments__guest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 20px
}

.comment {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-gray)
}

@media(max-width: 450px) {
    .comment {
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-gap: 10px
    }
}

.comment.reply {
    margin-left: 30px
}

@media(max-width: 450px) {
    .comment.reply {
        margin-left: 15px
    }
}

.comment__head {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap
}

.comment__head-login a {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-secondary)
}

.comment__head-date {
    font-size: 13px;
    color: #999
}

.comment__body {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.comment__avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

@media(max-width: 450px) {
    .comment__avatar img {
        width: 30px;
        height: 30px
    }
}

.comment__options {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.comment__reply {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-dark)
}

.comment__reply svg {
    fill: var(--color-dark)
}

.comment__reply:hover {
    color: var(--color-primary)
}

.comment__reply:hover svg {
    fill: var(--color-primary)
}

.comment__edit,
.comment__del {
    font-size: 14px;
    color: #999
}

.comment__like {
    margin-left: auto
}

.comment__like a {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    background-color: var(--bg-sidebar);
    height: 30px;
    border-radius: 10px;
    padding-inline: 10px;
    color: #999
}

.comment__like a:hover {
    color: var(--color-red);
    background-color: rgba(255, 56, 41, .2196078431)
}

.comment__news {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-size: 14px;
    color: #999
}

.comments-tree-list {
    list-style: none;
    padding-left: 0
}

.mass_comments_action {
    display: none
}

.save-buttons {
    margin-top: 15px
}

#dlefastreplycomments {
    color: #999;
    font-size: 13px
}

#dlefastreplycomments form {
    margin-top: 10px
}

.attachment {
    background-color: var(--bg-sidebar);
    padding: 15px;
    border-radius: 15px
}

.attachment a {
    color: var(--color-white)
}

.attachment a:hover {
    text-decoration: none
}

.attachment__info {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-inline: 15px
}

.attachment__info-item {
    font-size: 14px;
    color: #999
}

.mobilepanel {
    visibility: hidden;
    position: fixed;
    top: 0;
    opacity: 0;
    height: 100vh;
    left: -350px;
    width: 350px;
    padding: 20px;
    transition: .2s ease-in-out;
    background-color: var(--body-bg);
    z-index: 2000;
    box-shadow: 15px 2px 16px -1px rgba(34, 60, 80, .12)
}

@media(max-width: 400px) {
    .mobilepanel {
        width: 100%
    }
}

.mobilepanel.open {
    visibility: visible;
    opacity: 1;
    left: 0
}

.mobilepanel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.mobilepanel__menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    height: 100%
}

.mobilepanel__menu-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 5px 15px;
    border-radius: 10px;
    color: var(--color-dark);
    font-weight: 600
}

.mobilepanel__menu-item img {
    width: 30px;
    height: 30px;
    border-radius: 5px
}

.static__title {
    font-size: clamp(25px, 2.4137931034vw, 35px)
}

.static__options {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.searchpage__form {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-gap: 15px
}

#searchinput {
    --form-height: 42px;
    --form-padding: 15px;
    --form-radius: 10px;
    display: block;
    width: 100%;
    height: var(--form-height);
    font-size: 14px;
    color: var(--color-dark);
    background-color: var(--form-bg);
    outline: none;
    border-radius: var(--form-radius);
    border: 2px solid var(--color-gray);
    padding-inline: var(--form-padding);
    transition: var(--transition)
}

#searchinput:focus,
#searchinput:focus {
    border-color: var(--color-primary)
}

#searchinput:focus {
    box-shadow: 1px 0px 3px 4px rgba(56, 88, 246, .14)
}

.profile__cover {
    background-color: var(--color-gray);
    padding: 20px;
    position: relative;
    border-radius: 15px 15px 0 0;
    height: 150px
}

.profile__tabs {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.profile__tabs-btn {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-weight: 600;
    color: #999
}

.profile__avatar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px
}

.profile__avatar-img {
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    border: 5px solid var(--color-white)
}

.profile__content-tab {
    visibility: hidden;
    opacity: 0;
    height: 0
}

.profile__content-tab.open {
    opacity: 1;
    visibility: visible;
    height: auto
}

.profile__body {
    border-radius: 0 0 15px 15px;
    border-left: 2px solid var(--color-gray);
    border-right: 2px solid var(--color-gray);
    border-bottom: 2px solid var(--color-gray);
    padding: 60px 20px 20px
}

.profile__body h2 {
    font-size: clamp(20px, 1.724137931vw, 25px)
}

.profile__body-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: clamp(20px, 2.0689655172vw, 30px)
}

.profile__body-name-btn {
    color: #999
}

.profile__body-status {
    font-size: 14px;
    text-align: center;
    color: #999;
    margin-top: 10px
}

.profile__body-info {
    font-size: 15px;
    text-align: center;
    margin-inline: auto;
    margin-top: 15px;
    max-width: 470px;
    width: 100%
}

.profile__body-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 25px
}

@media(max-width: 600px) {
    .profile__body-options {
        flex-direction: column
    }
}

.profile__about {
    padding: 10px
}

.profile__about h5 {
    font-size: 16px
}

.profile__about h6 {
    font-size: 15px
}

.profile__about-title {
    font-size: clamp(18px, 1.3793103448vw, 20px)
}

.profile__about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-top: 15px;
    font-size: 15px;
    border-bottom: 1px solid var(--color-gray);
    padding-bottom: 15px
}

.profile__wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    padding-block: 20px
}

.profile__wrapper-item {
    visibility: hidden;
    opacity: 0;
    height: 0
}

.profile__wrapper-item.open {
    visibility: visible;
    opacity: 1;
    height: auto
}

.profile__setting {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.profile__setting-links {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.profile__social {
    border: 2px solid var(--color-gray);
    padding: 25px 15px;
    border-radius: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

.profile__social-label {
    position: absolute;
    top: -16px;
    left: 20px;
    background-color: var(--body-bg);
    padding: 5px 10px;
    color: #999;
    font-size: 14px
}

.profile__social-btn {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    height: 35px;
    border-radius: 10px;
    background-color: var(--color-gray);
    padding-inline: 10px;
    font-size: 14px;
    font-weight: 600
}

.feedback__guest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px
}

.feedback__forms {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.rating__tabs {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap
}

.rating__tabs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding-inline: 15px;
    border-radius: 10px;
    border: 2px solid var(--color-gray);
    font-weight: 600;
    color: var(--color-dark)
}

.rating__tabs-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.rating__content-tab {
    visibility: hidden;
    opacity: 0;
    height: 0;
    position: absolute
}

.rating__content-tab.open {
    visibility: visible;
    opacity: 1;
    height: auto;
    position: relative;
    transition: .2s ease-in-out
}

.rating__list {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.addnews__forms {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.addnews__category select {
    width: 100% !important
}

.addnews__admintag {
    flex-direction: column;
    align-items: start !important
}

.qq-upload-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 20px;
    height: 40px;
    border-radius: 40px;
    background-color: var(--color-primary);
    color: #fff;
    width: -moz-max-content;
    width: max-content;
    font-size: 14px;
    max-width: 260px;
    transition: .2s
}

.qq-upload-button:hover {
    background-color: var(--btn-primary-bg-hover)
}

.stats h2 {
    font-size: clamp(20px, 2.0689655172vw, 30px)
}

.stats h3 {
    font-size: clamp(18px, 1.724137931vw, 25px)
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px
}

@media(max-width: 600px) {
    .stats__grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-gap: 20px
    }
}

.stats canvas {
    height: 500px
}

.offline {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-gray);
    min-height: 100vh
}

.offline__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 500px
}

.pm__tabs {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap
}

.pm__tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    border: 2px solid var(--color-gray);
    padding-inline: 15px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--color-dark)
}

.pm__tabs a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.pm__title {
    font-size: clamp(17px, 1.5172413793vw, 22px)
}

.pm__send {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.pm__list {
    background-color: var(--bg-sidebar);
    padding: 15px;
    border-radius: 15px
}

.pm #pmlist_doaction {
    margin-top: 30px;
    max-width: 200px
}

.pm .bbcodes {
    margin-top: 30px
}

.pm tr {
    height: 82px
}

.pm td[align=right] {
    display: flex;
    justify-content: start
}

.pm__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px
}

@media(max-width: 700px) {
    .pm__grid {
        grid-template-columns: 1fr
    }
}

.pm thead {
    background-color: var(--bg-sidebar)
}

.pm thead tr {
    height: 30px !important
}

.pm-no-messages {
    display: block;
    padding: 20px;
    border-radius: 15px;
    background-color: #f7efc2;
    color: #9b946c;
    margin-top: 20px
}

.message {
    margin-top: 30px
}

.message__title {
    font-size: 20px
}

.message__body {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 15px;
    margin-top: 30px
}

.message__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden
}

.message__name {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px
}

.message__name a {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-secondary)
}

.message__date {
    font-size: 13px;
    color: #999
}

.message__text-text {
    margin-top: 20px
}

.message__options {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px
}

.message__options a {
    font-size: 14px;
    color: #999
}

.pm_last_date {
    font-size: 13px;
    color: #999
}

.pm_last_user a {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-secondary);
    margin-bottom: 2px
}

.pm_subj a {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-secondary)
}

#loading-layer {
    display: none
}

#loading-layer.withouttext {
    display: none
}

#loading-layer.withtext {
    display: none
}

#searchsuggestions {
    z-index: 1050;
    width: 100%;
    max-width: 1290px;
    border-radius: 0 0 10px 10px;
    background: var(--body-bg);
    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, .3);
    border: 1px solid var(--color-gray);
    background-clip: padding-box;
    font-size: .9em;
    box-sizing: border-box;
    margin-top: 30px;
    overflow: hidden;
    padding: 15px
}

#searchsuggestions .search__item
/*:first-child*/

    {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-gray)
}

.seperator {
    display: none !important
}

#searchsuggestions span.notfound {
    padding: 15px 25px;
    display: block
}

#searchsuggestions .break {
    display: none
}

.unit-rating {
    display: flex;
    gap: 6px
}

.unit-rating .current-rating {
    display: none
}

.unit-rating a {
    width: 20px;
    height: 20px;
    overflow: hidden;
    display: block;
    position: relative
}

.unit-rating a::before {
    content: "";
    background-color: #bbb;
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='currentColor' class='w-6 h-6'%3e%3cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z' clip-rule='evenodd' /%3e%3c/svg%3e ");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='currentColor' class='w-6 h-6'%3e%3cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z' clip-rule='evenodd' /%3e%3c/svg%3e ");
    width: 20px;
    height: 20px;
    display: block;
    transition: background-color .3s
}

.unit-rating a.star-hover::before,
.unit-rating a.star-active::before {
    background-color: orange
}

#dropmenudiv {
    display: none;
    padding: 5px;
    margin-left: -160px;
    min-width: 140px;
    width: auto !important;
    opacity: 1 !important;
    border-radius: 10px;
    background-color: var(--body-bg);
    color: var(--color-dark);
    background-clip: padding-box;
    box-shadow: 0 0 2px rgba(0, 0, 0, .08), 0 2px 24px rgba(0, 0, 0, .08);
    margin-top: 10px !important
}

#dropmenudiv a {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0;
    height: 35px;
    border-radius: 10px;
    padding-inline: 15px;
    font-size: 14px;
    font-weight: 500
}

#dropmenudiv a:hover {
    background-color: var(--color-gray);
    color: var(--color-dark)
}

.ui-front {
    z-index: 1000
}

.ui-widget-overlay {
    background: #000;
    opacity: .5;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed
}

.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden
}

.ui-helper-clearfix {
    display: inline-block
}

* html .ui-helper-clearfix {
    height: 1%
}

.ui-helper-clearfix {
    display: block
}

.ui-dialog {
    text-align: left;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 370px;
    border-radius: 10px;
    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, .3);
    border-color: rgba(0, 0, 0, .1);
    background-color: var(--body-bg);
    background-clip: padding-box;
    outline: none;
    z-index: 1050
}

.ui-dialog-titlebar {
    padding: 15px;
    position: relative
}

.ui-dialog-title {
    float: left;
    font-weight: 600;
    font-size: 16px;
    font-family: var(--font-title)
}

.ui-dialog-titlebar-close {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -16px !important;
    height: 23px !important;
    width: 32px;
    border: 0 none !important;
    background-color: inherit !important;
    box-shadow: none !important;
    padding: 0px !important
}

.dark .ui-dialog-titlebar-close .ui-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}

.ui-dialog-titlebar-close .ui-icon {
    display: block;
    margin: 9px auto 0 auto;
    width: 12px;
    height: 12px;
    opacity: .5;
    font-weight: 600;
    font-size: 1rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}

.ui-dialog-titlebar-close span.ui-button-text:hover {
    opacity: 1
}

#dle-promt-text {
    --form-height: 42px;
    --form-padding: 15px;
    --form-radius: 10px;
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--color-dark);
    background-color: var(--form-bg);
    outline: none;
    border-radius: var(--form-radius);
    border: 2px solid var(--color-gray);
    padding: var(--form-padding);
    transition: var(--transition)
}

#dle-promt-text:focus,
#dle-promt-text:focus {
    border-color: var(--color-primary)
}

#dle-promt-text:focus {
    box-shadow: 1px 0px 3px 4px rgba(56, 88, 246, .14)
}

.quick-edit-text {
    --form-height: 42px;
    --form-padding: 15px;
    --form-radius: 10px;
    display: block;
    width: 100%;
    height: var(--form-height);
    font-size: 14px;
    color: var(--color-dark);
    background-color: var(--form-bg);
    outline: none;
    border-radius: var(--form-radius);
    border: 2px solid var(--color-gray);
    padding-inline: var(--form-padding);
    transition: var(--transition)
}

.quick-edit-text-lg {
    --form-height: 52px;
    --form-padding: 20px;
    --form-radius: 14px
}

.quick-edit-text:focus,
.quick-edit-text:focus {
    border-color: var(--color-primary)
}

.quick-edit-text:focus {
    box-shadow: 1px 0px 3px 4px rgba(56, 88, 246, .14)
}

.dlepopupnewsedit form {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.xfieldscolright select {
    max-width: 100% !important
}

#modal-overlay {
    z-index: 1040 !important
}

.ui-button {
    font-size: .85rem;
    border: 0 none;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 8px;
    outline: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 0 none;
    padding: 7px 19px;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: all ease .1s
}

.ui-dialog-titlebar-close:hover .ui-icon {
    opacity: 1
}

.ui-icon,
.ui-button-icon-only {
    overflow: hidden;
    text-indent: -9999px
}

.ui-dialog label {
    color: #575757
}

.ui-dialog-content {
    padding: 20px;
    overflow: auto;
    position: relative;
    zoom: 1
}

.loginbox.ui-dialog,
.loginbox .ui-dialog-content {
    overflow: visible !important
}

.ui-dialog-content h2 {
    display: inline;
    font-size: 1em;
    font-weight: bold
}

.ui-dialog .ui-dialog-buttonpane {
    padding: 15px;
    text-align: right
}

.ui-dialog .ui-resizable-se {
    bottom: 3px;
    height: 14px;
    right: 3px;
    width: 14px
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-state-error {
    background: #fef1ec 50% 50% repeat-x !important;
    border: 1px solid #cd0a0a;
    color: #cd0a0a
}

.ui-button {
    margin: 0 3px
}

.ui-helper-hidden-accessible {
    display: none
}

.ui-button:hover {
    background-color: var(--btn-primary-bg-hover)
}

.ui-dialog-buttonset button.ui-button-delete {
    background-color: #f44336;
    border-color: #f44336;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(51, 51, 51, .5)
}

.ui-dialog-buttonset button.ui-button-delete:hover {
    background-color: #db3a2f;
    border-color: #db3a2f;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(51, 51, 51, .5)
}

.tox .tox-dialog__footer .tox-button--secondary {
    background-color: #888 !important;
    border-color: #888 !important;
    color: #fff !important
}

.tox .tox-button {
    background-color: rgba(12, 95, 126, .9294117647) !important;
    border-color: rgba(12, 95, 126, .9294117647) !important
}

.dle-popup-userprofileadmin .ui-button-delete {
    float: left
}

.dle-popup-userprofileadmin .ui-dialog-buttonset button:nth-child(2) {
    background-color: #868e96
}

.ui-autocomplete {
    position: absolute;
    cursor: default
}

.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    float: left;
    background: #fff 50% bottom repeat-x;
    border: 1px solid #dedede;
    color: #353535
}

.ui-menu .ui-menu {
    margin-top: -3px
}

.ui-menu .ui-menu-item {
    margin: 0;
    padding: .2em .4em;
    cursor: pointer;
    width: 100%
}

pre code {
    display: block;
    padding: .5em;
    background: #f9fafa;
    border: 1px solid #dce7e7;
    overflow: auto;
    white-space: pre;
    max-height: 350px
}

.hljs-comment,
.hljs-quote {
    color: #a0a1a7;
    font-style: italic
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
    color: #a626a4
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: #e45649
}

.hljs-literal {
    color: #0184bb
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
    color: #50a14f
}

.hljs-built_in,
.hljs-class .hljs-title {
    color: #c18401
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: #986801
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: #4078f2
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: bold
}

.hljs-link {
    text-decoration: underline
}

.DLEPush {
    z-index: 2001;
    position: fixed;
    right: 20px;
    top: 20px
}

@keyframes DLEPush-show {
    0% {
        transform: translateY(100%);
        opacity: 0
    }
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.DLEPush-notification.wrapper {
    animation-name: DLEPush-show;
    animation-duration: 1s;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    color: #333;
    margin-bottom: 10px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    background-color: #fff;
    border-radius: 10px;
    padding: 0 !important
}

.DLEPush-notification .DLEPush-icon {
    grid-column: 1;
    grid-row: 1/span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 45px;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-align: center
}

.DLEPush-notification .DLEPush-icon svg {
    scale: .8
}

.DLEPush-notification .DLEPush-header {
    font-weight: 500;
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
    margin-left: 1rem;
    margin-top: .5rem
}

.DLEPush-notification .DLEPush-header:empty {
    margin-top: 0
}

.DLEPush-notification .DLEPush-message {
    grid-column: 2;
    grid-row: 2;
    font-size: .875rem;
    margin: 1rem
}

.DLEPush-notification .DLEPush-message li,
.DLEPush-notification .DLEPush-message ul {
    list-style-type: none;
    padding-left: 0
}

.DLEPush-notification .DLEPush-close {
    position: absolute;
    top: 8px;
    right: 10px;
    font-weight: 300;
    background: none;
    border: 0;
    font-size: 1.15rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    color: inherit;
    outline: 0;
    opacity: .75
}

@media only screen and (min-width: 601px) {
    .DLEPush-notification.wrapper {
        min-width: 400px
    }
}

.DLEPush-notification .DLEPush-close:hover {
    opacity: 1
}

.DLEPush-notification.wrapper.push-success {
    background-color: #e0f2f1
}

.DLEPush-notification.wrapper.push-success .DLEPush-icon {
    background-color: #00897b
}

.DLEPush-notification.wrapper.push-warning {
    background-color: #fff3e0
}

.DLEPush-notification.wrapper.push-warning .DLEPush-icon {
    background-color: #ff9800
}

.DLEPush-notification.wrapper.push-error {
    background-color: #fbe9e7
}

.DLEPush-notification.wrapper.push-error .DLEPush-icon {
    background-color: #ff5722
}

.title_spoiler {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    height: 50px;
    padding-inline: 15px;
    border-radius: 10px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 600;
    background-color: #f7f7f7
}

.text_spoiler {
    padding-block: 5px;
    background-color: #f7f7f7;
    border-radius: 0 0 10px 10px;
    position: relative
}

.text_spoiler::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    top: -8px;
    left: 0;
    background-color: #f7f7f7
}

.text_spoiler {
    text-align: justify
}

.error {
    background-color: var(--color-card);
    padding: 15px;
    border-radius: 13px;
    box-shadow: 0 0 2px rgba(0, 0, 0, .05), 0 2px 18px rgba(0, 0, 0, .02);
    font-size: 14px;
    display: grid;
    grid-template-columns: 35px 1fr;
    grid-gap: 15px
}

.error ul {
    list-style: none;
    padding-left: 0
}

.error__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: var(--color-primary);
    background-color: rgba(0, 144, 253, .0784313725)
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-top: 50px
}

.pagination span,
.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    border: 2px solid var(--color-gray);
    font-size: 14px;
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-text);
    flex-shrink: 0
}

.pagination a:hover {
    border-color: var(--color-dark)
}

.pagination__pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.pagination__pages span {
    background-color: var(--color-gray)
}

.pagination__next span,
.pagination__prev span {
    opacity: .5
}

.speedbar {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    flex-wrap: wrap;
    color: #a3a3a3;
    font-size: 13px;
    margin-bottom: 20px
}

.captcha {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-gap: 20px
}

@media(max-width: 500px) {
    .captcha {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px
    }
}

.captcha img {
    height: 52px;
    border-radius: 14px
}

.info {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-gap: 15px;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    background-color: #f7efc2;
    color: #9b946c
}

.info__icon {
    color: #ff3829
}

.info__body {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.info__body-title {
    font-size: clamp(18px, 1.5172413793vw, 22px);
    color: #8b8667
}

.info__body-text {
    font-size: 15px
}

.engine__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
    font-size: 14px
}

.engine__checkbox .form-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer
}

.engine__checkbox .form-check-input {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray);
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .2s, border-color .2s
}

.engine__checkbox .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary)
}

.engine__checkbox .form-check-input:checked::before {
    content: "";
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 12l4 4L18 8"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain
}

.profile__popup ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    background-color: rgba(0, 0, 0, 0) !important
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    box-shadow: none !important
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    border-bottom: none !important
}

.tox-tinymce {
    border: 2px solid var(--color-gray) !important;
    border-radius: 10px !important
}

.tox .tox-statusbar {
    box-shadow: none !important;
    height: 1.425rem !important;
    border-top: 2px solid var(--color-gray) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--color-dark) !important
}

.tox .tox-statusbar__path {
    color: var(--color-dark) !important
}

/*# sourceMappingURL=main.min.css.map */