#shop {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 140px 64px 112px;
}

.shop_wrapper {
    max-width: 1520px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.shop_categorys {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.shop_items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 32px;
}

.item {
    width: 100%;
    min-width: 272px;
    max-width: 348px;
    height: 377px;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray -247.071px 0px / 241.995% 107.046% no-repeat;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark .item {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

.dark .item_body {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

.dark .item_border {
    background: #BD9C49;
}

.dark .item_price_new {
    color: #BD9C49;
}

.item:hover {
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.30), 0px 2px 4px 3px rgba(0, 0, 0, 0.15);
}

.item_border {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(180deg, #4D4336 0%, #714A27 63.5%, #AA8E75 79%, #5E5548 98.5%);
}

.item_body {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray -247.071px 0px / 241.995% 107.046% no-repeat;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    justify-content: flex-end;
}

.item_sales {
    display: flex;
    flex-direction: row;
    gap: 8px;
    right: 7px;
    top: 7px;
    position: absolute;
}

.item_sale {
    display: flex;
    padding: 2px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    color: #FFF;
    text-align: center;
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 150%;
}

.my_sale {
    background: #A338C1;
}

.shop_sale {
    background: #09AA64;
}

.item_name {
    font-family: Evolventa Bold;
    font-size: 18px;
    line-height: 120%;
    min-height: 44px;
}

.item_prices {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.item_price_new {
    color: #AA0909;
    font-family: Evolventa Bold;
    font-size: 24px;
    line-height: 120%;
}

.item_price_old {
    color: #ACACAC;
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 120%;
    text-decoration: line-through;
}

.item_img {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 208px;
}

.item_img img {
    width: 100%;
}

.breadcrumps {
    color: #898989;
    font-family: Evolventa Bold;
    font-size: 20px;
    line-height: 120%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.breadcrumps span {
    color: #080808;
}

body.dark .breadcrumps span {
    color: #F7F7F7;
}

.product_title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 24px;
}

.product_server {
    color: #898989;
    font-family: Evolventa Bold;
    font-size: 20px;
    line-height: 120%;
}

.product_name {
    font-family: Evolventa Bold;
    font-size: 32px;
    line-height: 150%;
}

.product_part {
    width: 100%;
    max-width: 1032px;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray 50% / cover no-repeat;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    height: fit-content;
}

body.dark .product_part {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

.product_body {
    width: 100%;
    height: 100%;
    padding: 29px;
    border-radius: 7px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray 50% / cover no-repeat;
}

body.dark .product_body {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

.product_border {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 3px;
    background: linear-gradient(180deg, #4D4336 0%, #714A27 63.5%, #AA8E75 79%, #5E5548 98.5%);
}

.product_img_border {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 3px;
    background: linear-gradient(180deg, #4D4336 0%, #714A27 63.5%, #AA8E75 79%, #5E5548 98.5%);
}

body.dark .product_border,
body.dark .product_img_border {
    background: #BD9C49;
}

.product_full {
    position: relative;

}

.product_img {
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray 50% / cover no-repeat;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 424px;
    height: fit-content;
}

body.dark .product_img,
body.dark .product_img_body {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

.product_img_body {
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray 50% / cover no-repeat;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 34px 10px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.product_flex {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.nav-tabs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 32px 0 24px;
}

.nav-link {
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #E7E7E7;
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
    transition: all 0.3s ease;
}

.nav-link.active {
    border: 1px solid #898989;
    background: #EDEDED;
}

body.dark .nav-link {
    border: 1px solid #ffffff;
    background: #ededed00;
}

body.dark .nav-link.active {
    border: 1px solid #bd9c49;
    background: #ededed00;
}

.table {
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 120%;
}

.table td,
.table tr {
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    align-items: center;
    gap: 16px;
}

.table tr td:nth-child(1),
thead tr,
thead tr th:nth-child(1) {
    width: 100%;
}

.table tr td:nth-child(1) {
    position: relative;
}

thead tr th:nth-child(1) {
    text-align: left;
}

.l2-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-menu {
    display: none;
}

.dropdown-toggle,
.dropdown-menu {
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
}

.l2-add,
.dropdown-toggle {
    color: #AA0909;
}

.dropdown-toggle {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    position: relative;
    height: fit-content;
}

body.dark .dropdown-toggle {
    background: #1f1f1f;
}

body.dark .dropdown-menu.show {
    background: #1f1f1f;
}

.dropdown-toggle::after {
    display: inline-block;
    content: "";
    margin-left: 4px;
    transition: .2s linear;
    background: url(../assets/arrow_drop.svg) center / contain no-repeat;
    width: 18px;
    filter: brightness(0) saturate(100%) invert(16%) sepia(73%) saturate(3849%) hue-rotate(354deg) brightness(81%) contrast(102%);
    height: 18px;
    background-position: center;
}

th.text-center,
td.text-center {
    width: 82px !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    display: block;
}

.ms-1 {
    color: #898989;
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 120%;
    white-space: nowrap;
}

.shop-purchase-amount {
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 120%;
    border-radius: 6px;
    border: 1px solid #D6D6D6;
    background: #FFF;
    padding: 12px 8px;
    max-width: 82px;
    text-align: center;
}

body.dark .shop-purchase-amount {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: -2px -2px 4px 0px rgba(255, 255, 255, 0.25) inset, 2px 2px 4px 0px rgba(0, 0, 0, 0.25) inset;
    border: none;
    color: #F7F7F7;
}

.text-end {
    min-width: 100px;
    gap: 8px !important;
    justify-content: end;
}

.mt-0 {
    height: 1px;
    margin: 12px 0;
    background: #D6D6D6;
}

body.dark .mt-0 {
    background: #3d3d3d;
}

.l2-icon {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
}

.l2-icon__panel {
    position: absolute;
    top: 0;
    left: 0;
}

td[colspan="3"] {
    width: 100%;
    height: 1px;
    margin: 4px 0;
    background: #D6D6D6;
}

body.dark td[colspan="3"] {
    background: #3d3d3d;
}

thead {
    display: flex;
    align-items: center;
    color: #ACACAC;
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 8px;
}

body.dark thead {
    border-bottom: 1px solid #3d3d3d;
}

.table thead tr {
    padding: 0 0 12px;
}

.table tr {
    padding: 8px 0;
}

.form-check-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: none;
    background: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.form-check-input::before {
    background: #FFFFFF;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    border: #FFFFFF solid 2px;
}

body.dark .form-check-input::before {
    border: 2px solid #2b2b2b;
    background: #2b2b2b;
}

.form-check-input:checked::before {
    background: #AA0909;
}

body.dark .form-check-input:checked::before {
    background: #BD9C49;
}

.form-check-input::after {
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #FFFFFF;
    background: #AA0909;
    transition: .2s linear;
    border-radius: 3px;
}

body.dark .form-check-input::after {
    border: 1px solid #2b2b2b;
    background: #BD9C49;
}

.dropdown-menu.show {
    display: flex;
    position: absolute;
    z-index: 10;
    border-radius: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    box-shadow: 0px 0px 16px 0px #0000000f;
    padding: 12px;
    top: 45px;
    min-width: max-content;
}

.l2-item__small .l2-icon,
.l2-item__small .l2-icon img {
    width: 24px;
    height: 24px;
}

.list-group-item {
    padding: 6px 0;
    border-bottom: 1px solid #DEDEDE;
}

.list-group-item:last-child {
    border-bottom: none;
}

.tab-pane {
    display: none;
}

.tab-pane p {
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
}

.field-shop-character_name {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ajax-btn {
    background: url(../assets/super_mini.png) center / contain no-repeat;
    width: 252px;
    height: 52px;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.30)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15));
    color: #FFF;
    font-family: Colus;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
    margin-top: 8px;
}

.product_part .block .block-content.block-content-full .text-end {
    text-align: right;
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 120%;
    padding: 14px 0;
}

#shop-total {
    color: #AA0909;
}

body.dark #shop-total {
    color: #bd9c49;
}

.product_part h4 {
    display: none;
}

.tab-pane input,
.tab-pane select {
    width: 100%;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #E7E7E7;
    background-color: #FFF;
    padding: 10px 16px;
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
}

body.dark .tab-pane input,
body.dark .tab-pane select {
    border: 1px solid #232323;
    background-color: #ffffff0f;
    color: #E7E7E7;
}

.field-shop-character_id {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert.alert-no-float.alert-warning,
.alert.alert-no-float.alert-primary {
    font-family: Evolventa Bold;
    font-size: 16px;
    line-height: 120%;
}


.field-namechange-character_id,
.field-swapname-character_id,
.field-changegender-character_id,
.field-premium-account_id,
.field-chartransfer-character_id {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-namechange-character_id .form-label {
    font-size: 18px;
}

.field-namechange-character_id select,
.field-namechange-newname input {
    width: 100%;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #E7E7E7;
    background-color: #FFF;
    padding: 10px 16px;
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
}

body.dark .field-namechange-character_id select,
body.dark .field-namechange-newname input {
    border: 1px solid #232323;
    background-color: #ffffff0f;
    color: #E7E7E7;
}

.invalid-feedback {
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
    color: #AA0909;
    position: absolute;
    bottom: 16px;
    z-index: 4;
    left: 44px;
}

.alert-danger.alert.alert-dismissible {
    font-family: Evolventa Bold;
    font-size: 14px;
    z-index: 7000;
    line-height: 120%;
    color: #AA0909;
    position: fixed;
    top: 32px;
    left: 32px;
    padding: 32px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray 50% / cover no-repeat;
    border-radius: 16px;
}

.alert-danger.alert.alert-dismissible {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

.field-swapname-character_id select,
.field-swapname-swap_character_id select,
.field-changegender-character_id select,
.field-premium-account_id select,
.field-chartransfer-character_id select,
.field-chartransfer-newaccount input,
.field-shop-character_id select {
    width: 100%;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #E7E7E7;
    background-color: #FFF;
    padding: 10px 16px;
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
}

body.dark .field-swapname-character_id select,
body.dark .field-swapname-swap_character_id select,
body.dark .field-changegender-character_id select,
body.dark .field-premium-account_id select,
body.dark .field-chartransfer-character_id select,
body.dark .field-chartransfer-newaccount input,
body.dark .field-shop-character_id select {
    border: 1px solid #232323;
    background-color: #ffffff0f;
    color: #E7E7E7;
}

body.dark optgroup {
    background: #222222;
}

.block-content.block-content-full.bg-body-light {
    padding: 16px 0;
}

.block-content.block-content-full.bg-body-light a {
    font-family: Evolventa Bold;
    font-size: 14px;
    line-height: 120%;
    color: #0A9A43;
}

.form-check-input__color-picker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #797979;
    transition: all 0.3s linear;
}

.form-check-input__color-picker:checked[type=radio] {
    border: 2px solid #464646;
}

.form-check-input__color-picker::after,
.form-check-input__color-picker::before {
    display: none;
}

#color-picker {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

#character-preview {
    background: url(../assets/nick_title_color_preview.png) no-repeat center;
    width: 470px;
    height: 331px;
    background-size: 100%;
    margin: 32px auto;
    color: #fff;
    font-family: Tahoma, sans-serif;
    font-size: 13px;
    text-align: center;
}

#character-preview__title,
#character-preview__nickname {
    height: 21px;
}

#character-preview__title {
    padding-top: 83px;
    margin-bottom: 26px;
}

.d-inline-block.shop-check .form-check {
    display: flex;
    align-items: center;
}

.d-inline-block.shop-check .form-check-label {
    margin-left: 16px;
}

.server_item {
    white-space: nowrap;
    padding: 12px 8px !important;
}

.alert-success {
    position: fixed;
    top: 32px;
    left: 16px;
    z-index: 8000;
    padding: 25px;
    font-family: Evolventa Bold;
    font-size: 18px;
    line-height: 120%;
    border-radius: 16px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #E0E0E0 0%, rgba(224, 224, 224, 0.85) 100%), url(../assets/paper.jpg) lightgray -247.071px 0px / 241.995% 107.046% no-repeat;
}

.dark .alert-success {
    background: url(../assets/paper_black.jpg) center / cover no-repeat;
}

@media (max-width: 1600px) {

    .item_name {
        font-size: 16px;
        line-height: 120%;
    }
}

@media (max-width: 1500px) {
    .product_img {
        max-width: 304px;
    }

    .product_img_body img {
        width: 100%;
    }
}

@media (max-width: 1350px) {

    .server_item {       
        padding: 0px !important;
    }
    

    .product_img {
        display: none;
    }

    #shop {
        padding: 140px 32px 240px;
    }

    .product_part {
        max-width: 100%;
    }

    .shop_items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .item {
        max-width: 435px;
    }
}

@media (max-width: 950px) {

    .shop_items {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #color-picker {
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
    .shop_categorys {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .shop_categorys .square_but,
    .shop_categorys .square_but:nth-child(1) {
        min-width: calc(100% - 32px) !important;
    }

    #shop {
        padding: 140px 16px 240px;
    }

    .table {
        font-size: 12px;
        line-height: 120%;
    }

    .shop-purchase-amount {
        font-size: 14px;
        line-height: 120%;
        padding: 12px 0;
        max-width: 39px;
    }

    .product_part .block .block-content.block-content-full .text-end {
        font-size: 14px;
        padding: 14px 0;
    }

    .text-end {
        min-width: 70px;
        gap: 4px !important;
        justify-content: end;
    }

    .table td,
    .table tr {
        gap: 8px;
    }

    .product_body {
        padding: 14px;
    }

    .product_name {
        font-size: 16px;
        line-height: 120%;
    }

    .dropdown-toggle,
    .dropdown-menu {
        font-size: 12px;
        line-height: 120%;
    }

    .form-check-input::before {
        width: 8px;
        height: 8px;
    }

    .form-check-input::after {
        width: 16px;
        height: 16px;
    }

    .ms-1 {
        font-size: 12px;
    }

    .breadcrumps {
        font-size: 16px;
    }

    thead {
        font-size: 10px;
    }

    .product_server {
        font-size: 14px;
    }

    th.text-end {
        font-size: 10px !important;
    }

    .table thead tr {
        padding: 0;
    }

    .table tr {
        padding: 4px 0;
    }

    .ajax-btn {
        font-size: 16px;
        line-height: 24px;
    }

    th.text-center,
    td.text-center {
        width: 50px !important;
    }
}

@media (max-width: 600px) {

    .shop_items {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .nav-link {
        font-size: 12px;
    }

    .table tr td:nth-child(1) {
        flex-wrap: wrap;
    }

    .text-end {
        min-width: fit-content;
    }

    .l2-item {
        gap: 4px;
        flex-wrap: wrap;
    }

    .table tr td[colspan="3"] {
        max-width: 100%;
    }

    .dropdown-menu.show {
        min-width: 290px;
    }

    #character-preview {
        width: 100%;
        height: 300px;
    }
}