@charset "UTF-8";
.accountArea {
    width: 100%;
    position: relative;
    padding: 0 0 40px;
}
@media (max-width: 576px) {
    .accountArea {
        padding: 15px 0;
    }
}
.accountSidebar {
    width: 100%;
    position: relative;
    filter: drop-shadow(4px -4px 4px rgba(0, 0, 0, 0.15));
    transition: all 0.2s;
    z-index: 10;
    background: linear-gradient(45deg, rgba(29, 32, 67, .5), rgba(105, 115, 248, .25), rgba(29, 32, 67, .5));
    padding:.75rem;
    border-radius: .5rem;
}
.accountSidebar.sticky {
    position: sticky;
    top: 20px;
    transition: all 0.2s;
}
.accountSidebar .sidebarHeader {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: .5rem;
    border-radius: .5rem;
    background-color: rgba(41, 47, 73, .3);
    box-shadow: 0 0 6px 0 #0000004f;
}
.accountSidebar .sidebarHeader .personProfile {
    width: 100%;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 3;
    padding: 0;
    margin-bottom: 0;
}
.accountSidebar .sidebarHeader .personProfile .profileImageArea {
    width: 115px;
    position: relative;
    filter: drop-shadow(4px -4px 4px rgba(0, 0, 0, 0.45));
}
.accountSidebar .sidebarHeader .personProfile .profileImageArea .profileImage {
    width: 115px;
    height: 115px;
    position: relative;
    padding: 2px;
    background: #3a3b48;
    border-radius: .5rem;
    z-index: 1;
}
.accountSidebar .sidebarHeader .personProfile .profileImageArea .profileImage img {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: .5rem;
}
.accountSidebar .sidebarHeader .personProfile .profileImageArea .editProfileButton {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--darkGreen);
    color: var(--darkBluelightWhite);
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.accountSidebar .sidebarHeader .personProfile .profileImageArea .editProfileButton:hover {
    transform: scale(1.3);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.45);
    transition: all 0.2s;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail {
    width: calc(100% - 60px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo {
    padding-left: 15px;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo h3 {
    font-size: 1rem;
    font-weight: 300;
    color: #fff;
    text-shadow: 2px 2px 3px transparent;
    margin: 0;
}
.profileDetail .current-balance{
    width:100%;
    text-align: center;
    background-color:rgba(66,85,212,.3);
    color:#fff;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
}
.profileDetail .acc-left{
    background-color:#4255d4;
    text-align: center;
    color:#fff;
    border-bottom-left-radius: .2rem;
}
.profileDetail .acc-right{
    background-color:rgba(214,48,49,.9);
    text-align: center;
    color:#fff;
    border-bottom-right-radius: .2rem;
}
.personInfo .account-type{
    color:#8487a1;
}
body.streamer-on .accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo h3 {
    filter: blur(3px);
}
body.light .accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo h3 {
    color: #343891;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .detailBalance {
    display: inline-flex;
    padding: 2px 2px 2px 20px;
    position: relative;
    background: #e9b535;
    border-radius: 50px;
}
body.streamer-on .accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .detailBalance {
    filter: blur(2px);
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .detailBalance .icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    background: #f1db7d;
    color: #151632;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.25);
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .detailBalance .price {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    color: #151632;
    line-height: 1;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .detailBalance .price i {
    font-size: 12px;
    color: #343891;
    transition: all 0.2s;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .detailBalance .price i:hover {
    transform: scale(1.4);
    transition: all 0.2s;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .sidebarLogoutButton {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    color: var(--textColor);
    gap: 5px;
    transition: all 0.2s;
}
.accountSidebar .sidebarHeader .personProfile .profileDetail .personInfo .sidebarLogoutButton:hover {
    transform: scale(1.2);
    color: var(--darkGreen);
    padding-left: 10px;
    transition: all 0.2s;
}
.accountSidebar .sidebarBody {
    width: 100%;
    position: relative;
    padding: 15px 0;
}
.eksTable {
    width: 100%;
    position: relative;
    border-radius: 5px;
    border: 1px solid var(--background);
    margin-bottom: 15px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}
.eksTable thead th {
    background: #343891;
    padding: 10px 15px;
    border-right: 1px solid #282b78;
    color: #fff;
}
.eksTable thead th:first-child {
    background: #282b78;
    border-radius: 5px 0 0 0;
}
.eksTable thead th:last-child {
    border-radius: 0 5px 0 0;
    border-right: none;
    text-align: center;
}
.eksTable tbody tr td {
    padding: 10px 15px;
    background: var(--cardBackgroundLight);
    border: none !important;
    border-right: 1px solid var(--background) !important;
    border-top: 1px solid var(--background) !important;
    box-shadow: none !important;
}
body.light .eksTable tbody tr td {
    background: #fff;
}
.eksTable tbody tr td:first-child {
    background: var(--cardBackground);
    border-top: 1px solid var(--background) !important;
    font-weight: 600;
}
body.light .eksTable tbody tr td:first-child {
    background: #f7f7f7;
    border-top: 1px solid #dddbdb !important;
}
.eksTable tbody tr td:last-child {
    border-right: none !important;
    text-align: center;
}
.eksTable tbody tr td .titleAlt {
    font-size: 12px;
    color: var(--darkGreen);
}
.eksTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}
.eksTable tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}
.eksTable tbody tr:hover td {
    background: var(--cardBackground);
    color: var(--textColor);
    border-right: 1px solid var(--background) !important;
}
body.light .eksTable tbody tr:hover td {
    background: #f7f7f7;
}
.eksTable tbody tr:hover td:first-child {
    background: var(--cardBackgroundDark);
}
body.light .eksTable tbody tr:hover td:first-child {
    background: #efeeee;
}
.eksTable tbody tr:hover td .tableLinkTitle {
    color: var(--darkBlue);
}
.eksTable tbody tr:hover td .tableLinkTitle:hover {
    color: var(--darkBlueDark);
}
.eksTable tbody tr:hover td .squareButton:not(.edit, .remove),
.eksTable tbody tr:hover td .squareButton:not(.edit, .remove):hover,
.eksTable tbody tr:hover td .tableButton {
    background: #343891;
    color: #fff;
}
.editForm.eksTable tbody tr .select2-container {
    width: auto !important;
}
.tableButton {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--textColor);
    line-height: 1;
    padding: 5px 10px;
    background: var(--background);
    border-radius: 3px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.tableButton:hover {
    background: #282b78;
    color: #fff;
    transform: scale(1.06);
    transition: all 0.2s;
}
.accountTitle {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accountTitle h3 {
    display: inline-block;
    background: var(--background);
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0 30px 0 0;
    color: var(--textColor);
    position: relative;
    z-index: 2;
}
.inner.accountTitle h3 {
    background: var(--cardBackground);
}
.accountTitle h4 {
    display: inline-block;
    background: var(--background);
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    padding: 0 15px 0 0;
    color: var(--textColor);
    position: relative;
    z-index: 2;
}
.inner.accountTitle h4 {
    background: var(--cardBackground);
}
.accountTitle .rightBox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 0 30px;
    background: var(--background);
    position: relative;
    z-index: 2;
}
.accountTitle:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 1px solid var(--darkGreen);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
@media (max-width: 576px) {
    .accountTitle {
        flex-direction: column;
        gap: 10px;
    }
    .accountTitle h3,
    .accountTitle h4 {
        padding: 0 10px;
        font-weight: 600;
        order: 2;
    }
    .accountTitle h3 {
        font-size: 16px;
    }
    .accountTitle .rightBox {
        width: 100%;
        padding-left: 0;
        gap: 5px;
        order: 1;
        justify-content: flex-end;
    }
    .accountTitle .rightBox .siteButton {
        font-size: 10px;
    }
    .accountTitle .rightBox .siteButton span {
        padding: 6px 10px;
    }
    .accountTitle .rightBox .buttonRightSingle {
        padding: 10px;
        font-size: 10px;
    }
    .accountTitle:before {
        top: auto;
        bottom: 10px;
        transform: translateY(0);
    }
}
.profileImageChangeArea {
    width: 120px;
    position: relative;
    filter: drop-shadow(4px -4px 4px rgba(0, 0, 0, 0.45));
}
.profileImageChangeArea .profileImage {
    width: 120px;
    height: 120px;
    position: relative;
    padding: 4px;
    background: #3a3b48;
    clip-path: polygon(74% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
.profileImageChangeArea .profileImage img {
    width: 100%;
    height: 100%;
    position: relative;
    clip-path: polygon(74% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}
.profileImageChangeArea .editProfileButton {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: var(--darkGreen);
    color: var(--darkBluelightWhite);
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.profileImageChangeArea .editProfileButton:hover {
    transform: scale(1.3);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.45);
    transition: all 0.2s;
}
.avatarItem {
    display: block;
    border: 4px solid var(--borderColor);
    transition: all 0.2s;
    z-index: 1;
}
.avatarItem,
.avatarItem img {
    width: 100%;
    position: relative;
}
.avatarItem.selected {
    border-color: var(--darkGreen);
}
.avatarItem:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.7);
    z-index: 2;
    transition: all 0.2s;
}
.tableLinkTitle {
    display: block;
    color: var(--textColor);
    font-weight: 800;
}
.tableLinkTitle:hover {
    color: var(--darkGreen);
}
.tableDesc {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
}
.textPrice {
    font-weight: 800;
    color: var(--darkGreen);
}
.buttonTypeTwo {
    width: 100%;
    position: relative;
    padding: 15px;
    background: #282b78;
    border-radius: 5px;
    display: flex;
    align-items: center;
    clip-path: polygon(calc(100% - 22px) 0, 100% 17px, 100% 100%, 0 100%, 0 0);
    transition: all 0.2s;
}
@media (max-width: 1399px) {
    .buttonTypeTwo {
        padding: 15px 5px;
    }
}
.buttonTypeTwo.mini {
    padding: 0 10px;
}
.buttonTypeTwo:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: #343891;
    clip-path: polygon(calc(100% - 21px) 0, 100% 16px, 100% 100%, 0 100%, 0 0);
    z-index: 0;
    transition: all 0.2s;
}
.buttonTypeTwo .icon {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #80f1b1;
}
@media (max-width: 1399px) {
    .buttonTypeTwo .icon {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}
.buttonTypeTwo .detail {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 5px;
}
@media (max-width: 1399px) {
    .buttonTypeTwo .detail {
        width: calc(100% - 30px);
    }
}
.buttonTypeTwo .detail .title {
    font-size: 14px;
    color: #c8c9d8;
    padding-bottom: 2px;
    font-weight: 400;
}
body.light .buttonTypeTwo .detail .title {
    color: #fff;
}
.buttonTypeTwo:hover {
    background: #343891;
    transform: scale(1.05);
    transition: all 0.2s;
}
.buttonTypeTwo:hover:before {
    background: #282b78;
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .buttonTypeTwo {
        padding: 5px;
    }
}
.modalTitle {
    font-size: 14px;
}
.tableCardView.liveData {
    animation-duration: 1s;
    animation-name: liveEffect;
    transition: all 0.5s;
    animation-iteration-count: infinite;
}
@media (min-width: 1000px) {
    .goldBar.tableCardView .cardInfo .cardHeader {
        width: 320px;
    }
}
.tableCardView .cardInfo .cardHeader .titleDetail .title a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.goldBar.tableCardView .cardInfo .detailBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    background: var(--backgroundDark);
    border-radius: 3px;
}
.goldBar.tableCardView .cardInfo .detailBox .detailItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.goldBar.tableCardView .cardInfo .detailBox .detailItem .itemTitle {
    font-size: 12px;
    color: var(--textColor);
    font-weight: 400;
    margin: 0;
}
.goldBar.tableCardView .cardInfo .detailBox .detailItem .itemDesc {
    font-size: 12px;
    color: var(--darkGreen);
    line-height: 1;
    text-align: center;
}
@media (min-width: 1400px) {
    .goldBar.tableCardView .cardInfo .detailBox {
        width: 300px;
        min-height: 57px;
    }
}
@media (min-width: 1000px) {
    .goldBar.tableCardView .cardInfo .detailBox {
        width: 220px;
        min-height: 57px;
    }
}
@media (max-width: 576px) {
    .goldBar.tableCardView .cardInfo .detailBox {
        width: 100%;
        font-size: 11px;
    }
}
@media (min-width: 1000px) {
    .tableCardView .cardInfo .cardBody .info .detail {
        min-width: 205px;
        justify-content: center;
    }
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody .info .detail {
        font-size: 10px;
    }
    .tableCardView .cardInfo .cardBody .info .detail .date {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .goldBar.tableCardView .cardInfo .cardBody .info .detail .date,
    .tableCardView .cardInfo .cardBody .info .detail .date.r {
        flex-direction: row;
    }
}
.tableCardView .cardInfo .cardBody .info .resultText.lastBadge {
    width: 100px !important;
    border-radius: 2px;
    clip-path: polygon(100% 0, 100% calc(100% - 9px), calc(100% - 10px) 100%, 0 100%, 0 0);
}
.accountVerifyWrapper {
    width: 100%;
    position: relative;
    padding: 40px 40px 0;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25));
}
.accountVerifyWrapper .accountVerifyItem {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}
.accountVerifyWrapper .accountVerifyItem .itemHeader {
    width: 140px;
    height: 140px;
    position: relative;
    margin: 0 auto;
    z-index: 2;
    filter: drop-shadow(0 -5px 5px rgba(0, 0, 0, 0.25));
}
.accountVerifyWrapper .accountVerifyItem .itemHeader:before {
    content: "";
    width: calc(100% + 40px);
    height: calc(100% + 80px);
    background: var(--cardBackground);
    position: absolute;
    top: -40px;
    left: -20px;
    clip-path: polygon(0 70px, 50% 0, 100% 70px, 100% calc(100% - 70px), 50% 100%, 0 calc(100% - 70px));
    z-index: -1;
}
.verified.accountVerifyWrapper .accountVerifyItem .itemHeader:before {
    background: #80f1b1;
}
.accountVerifyWrapper .accountVerifyItem .itemHeader:after {
    content: "";
    width: calc(100% + 50px);
    height: calc(100% + 92px);
    background: var(--cardBackgroundDark);
    position: absolute;
    top: -46px;
    left: -25px;
    clip-path: polygon(0 74px, 50% 0, 100% 74px, 100% calc(100% - 74px), 50% 100%, 0 calc(100% - 74px));
    z-index: -2;
}
.verified.accountVerifyWrapper .accountVerifyItem .itemHeader:after {
    background: #248a50;
}
.accountVerifyWrapper .accountVerifyItem .itemHeader .icon {
    width: 140px;
    height: 140px;
    position: relative;
    background: var(--cardBackgroundLight);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    margin: 0 auto;
    z-index: 2;
    font-size: 30px;
    color: var(--darkGreen);
}
.verified.accountVerifyWrapper .accountVerifyItem .itemHeader .icon {
    background: #6bcd90;
}
.verified.accountVerifyWrapper .accountVerifyItem .itemHeader .icon i {
    color: #343891;
}
.verified.accountVerifyWrapper .accountVerifyItem .itemHeader .icon .title {
    color: #248a50;
}
.accountVerifyWrapper .accountVerifyItem .itemHeader .icon .title {
    display: inline-flex;
    font-size: 15px;
    font-weight: 800;
    color: var(--textColor);
    text-align: center;
    margin: 0;
}
.accountVerifyWrapper .accountVerifyItem .itemBody {
    width: 100%;
    position: relative;
    text-align: center;
    padding: 60px 15px 15px;
    z-index: 1;
}
.accountVerifyWrapper .accountVerifyItem .itemBody h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--textColor);
}
.accountVerifyWrapper .accountVerifyItem .itemBody p {
    font-size: 12px;
}
.accountVerifyWrapper .accountVerifyItem .itemBody .successText {
    font-size: 18px;
    font-weight: 700;
    color: var(--darkGreen);
}
.accountVerifyWrapper .accountVerifyItem:hover {
    transform: scale(1.05);
    transition: all 0.2s;
}
.addressItemWrapper {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.addressItemWrapper,
.addressItemWrapper .addressItem {
    width: 100%;
    position: relative;
}
.addressItemWrapper .addressItem .itemHeader {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--cardBackgroundLight);
    border-bottom: 1px solid var(--background);
    font-size: 15px;
    font-weight: 700;
    color: var(--textColor);
}
.addressItemWrapper .addressItem .itemHeader i {
    color: #e9b535;
}
.addressItemWrapper .addressItem .itemHeader .addressRemoveButton {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 9px;
    right: 10px;
    background: #c3141b;
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}
.addressItemWrapper .addressItem .itemHeader .addressRemoveButton i {
    font-size: 12px;
    color: #fff;
}
.addressItemWrapper .addressItem .itemHeader .addressRemoveButton:hover {
    background: #990d11;
    transform: scale(1.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.addressItemWrapper .addressItem .itemBody {
    width: 100%;
    position: relative;
    padding: 10px 15px;
    background: var(--cardBackground);
}
.addressItemWrapper .addressItem .itemBody .addressListItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid var(--background);
    font-size: 12px;
    color: var(--textColor);
}
.addressItemWrapper .addressItem .itemBody .addressListItem i {
    font-size: 14px;
    color: var(--darkGreen);
}
.addressItemWrapper .addressItem .itemBody .addressListItem:last-child {
    border-bottom: none;
}
.addressItemWrapper .addressItem .itemFooter {
    width: 100%;
    position: relative;
    padding: 10px 15px;
    background: var(--cardBackgroundDark);
    clip-path: polygon(100% 0, 100% 100%, 7% 100%, 0 40px, 0 0);
}
.panelPersonInfoWrapper {
    width: 100%;
    position: relative;
}
.panelPersonInfoWrapper .panelPersonInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--borderColor);
    border-radius: 5px;
    clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}
body.light .panelPersonInfoWrapper .panelPersonInfo {
    background: #bdbdbd;
}
.panelPersonInfoWrapper .panelPersonInfo:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}
body.light .panelPersonInfoWrapper .panelPersonInfo:before {
    background: #fff;
}
.panelPersonInfoWrapper .panelPersonInfo .personImage {
    width: 55px;
    height: 55px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #343891;
}
.panelPersonInfoWrapper .panelPersonInfo .personImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo {
    width: calc(100% - 55px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail {
    width: calc(100% - 30px);
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail .personDetail {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail .personDetail h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail .personDetail h3 i {
    color: var(--darkGreen);
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail .personFollower {
    position: relative;
    font-size: 15px;
    font-weight: 800;
    color: var(--textColor);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail .personFollower:before {
    content: "";
    width: 0;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 2px solid var(--borderColor);
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .infoDetail .personFollower i {
    font-size: 18px;
    color: var(--darkGreen);
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .personRosette {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panelPersonInfoWrapper .panelPersonInfo .personInfo .personRosette img {
    width: 100%;
}
.playerMarketTab {
    padding: 5px;
}
.playerMarketTab:after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    top: 5px;
    left: 5px;
    clip-path: polygon(100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%, 0 0);
}
.playerMarketTab .playerMarketTitleNormal {
    justify-content: space-between;
}
.playerMarketTab .playerMarketTitleNormal h3 {
    font-size: 13px;
}
.playerMarketTab .playerMarketDetailNormal {
    padding: 10px 4px 4px;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem.adding-image img {
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem i {
    position: absolute;
    font-size: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--darkGreen);
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem.empty {
    transition: all 0.2s;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem.empty:hover {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    transform: scale(1.1);
    transition: all 0.2s;
}
.graphItem {
    background: var(--cardBackground);
}
.graphItem .statusText {
    background: var(--cardBackgroundDark);
}
.success.graphItem .statusText {
    background: #157b2a;
    color: #fff;
}
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
    animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
    animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-duration: calc(var(--animate-duration) / 2);
    animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
    animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3);
}
@media (prefers-reduced-motion: reduce), print {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
    .animate__animated[class*="Out"] {
        opacity: 0;
    }
}
@-webkit-keyframes bounce {
    0%,
    20%,
    53%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translateZ(0) scaleY(0.95);
        transform: translateZ(0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}
@keyframes bounce {
    0%,
    20%,
    53%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translateZ(0) scaleY(0.95);
        transform: translateZ(0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}
.animate__bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
@-webkit-keyframes flash {
    0%,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
@keyframes flash {
    0%,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
.animate__flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
.animate__pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
.animate__rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}
.animate__shakeX {
    -webkit-animation-name: shakeX;
    animation-name: shakeX;
}
@-webkit-keyframes shakeY {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
}
@keyframes shakeY {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
}
.animate__shakeY {
    -webkit-animation-name: shakeY;
    animation-name: shakeY;
}
@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.animate__headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}
@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.animate__swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
.animate__tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}
@-webkit-keyframes jello {
    0%,
    11.1%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}
@keyframes jello {
    0%,
    11.1%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}
.animate__jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}
@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.animate__heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
    animation-duration: calc(var(--animate-duration) * 1.3);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes backInDown {
    0% {
        -webkit-transform: translateY(-1200px) scale(0.7);
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes backInDown {
    0% {
        -webkit-transform: translateY(-1200px) scale(0.7);
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.animate__backInDown {
    -webkit-animation-name: backInDown;
    animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(0.7);
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(0.7);
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.animate__backInRight {
    -webkit-animation-name: backInRight;
    animation-name: backInRight;
}
@-webkit-keyframes backInUp {
    0% {
        -webkit-transform: translateY(1200px) scale(0.7);
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes backInUp {
    0% {
        -webkit-transform: translateY(1200px) scale(0.7);
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.animate__backInUp {
    -webkit-animation-name: backInUp;
    animation-name: backInUp;
}
@-webkit-keyframes backOutDown {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateY(700px) scale(0.7);
        transform: translateY(700px) scale(0.7);
        opacity: 0.7;
    }
}
@keyframes backOutDown {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateY(700px) scale(0.7);
        transform: translateY(700px) scale(0.7);
        opacity: 0.7;
    }
}
.animate__backOutDown {
    -webkit-animation-name: backOutDown;
    animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}
@keyframes backOutLeft {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}
.animate__backOutLeft {
    -webkit-animation-name: backOutLeft;
    animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateX(2000px) scale(0.7);
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
}
@keyframes backOutRight {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateX(2000px) scale(0.7);
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
}
.animate__backOutRight {
    -webkit-animation-name: backOutRight;
    animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateY(-700px) scale(0.7);
        transform: translateY(-700px) scale(0.7);
        opacity: 0.7;
    }
}
@keyframes backOutUp {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateY(0) scale(0.7);
        transform: translateY(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateY(-700px) scale(0.7);
        transform: translateY(-700px) scale(0.7);
        opacity: 0.7;
    }
}
.animate__backOutUp {
    -webkit-animation-name: backOutUp;
    animation-name: backOutUp;
}
@-webkit-keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
.animate__bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
        transform: translate3d(0, -3000px, 0) scaleY(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
        transform: translate3d(0, 25px, 0) scaleY(0.9);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
        transform: translate3d(0, -10px, 0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
        transform: translate3d(0, 5px, 0) scaleY(0.985);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
        transform: translate3d(0, -3000px, 0) scaleY(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
        transform: translate3d(0, 25px, 0) scaleY(0.9);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
        transform: translate3d(0, -10px, 0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
        transform: translate3d(0, 5px, 0) scaleY(0.985);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
        transform: translate3d(10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
        transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
        transform: translate3d(10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
        transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
        transform: translate3d(0, 10px, 0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
        transform: translate3d(0, -5px, 0) scaleY(0.985);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
        transform: translate3d(0, 10px, 0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
        transform: translate3d(0, -5px, 0) scaleY(0.985);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}
@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}
.animate__bounceOut {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
        transform: translate3d(0, 10px, 0) scaleY(0.985);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
        transform: translate3d(0, 2000px, 0) scaleY(3);
    }
}
@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
        transform: translate3d(0, 10px, 0) scaleY(0.985);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
        transform: translate3d(0, 2000px, 0) scaleY(3);
    }
}
.animate__bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
        transform: translate3d(20px, 0, 0) scaleX(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
        transform: translate3d(-2000px, 0, 0) scaleX(2);
    }
}
@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
        transform: translate3d(20px, 0, 0) scaleX(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
        transform: translate3d(-2000px, 0, 0) scaleX(2);
    }
}
.animate__bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
        transform: translate3d(-20px, 0, 0) scaleX(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
        transform: translate3d(2000px, 0, 0) scaleX(2);
    }
}
@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
        transform: translate3d(-20px, 0, 0) scaleX(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
        transform: translate3d(2000px, 0, 0) scaleX(2);
    }
}
.animate__bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
        transform: translate3d(0, -10px, 0) scaleY(0.985);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
        transform: translate3d(0, 20px, 0) scaleY(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
        transform: translate3d(0, -2000px, 0) scaleY(3);
    }
}
@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
        transform: translate3d(0, -10px, 0) scaleY(0.985);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
        transform: translate3d(0, 20px, 0) scaleY(0.9);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
        transform: translate3d(0, -2000px, 0) scaleY(3);
    }
}
.animate__bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInTopLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInTopLeft {
    -webkit-animation-name: fadeInTopLeft;
    animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInTopRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInTopRight {
    -webkit-animation-name: fadeInTopRight;
    animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInBottomLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInBottomLeft {
    -webkit-animation-name: fadeInBottomLeft;
    animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInBottomRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__fadeInBottomRight {
    -webkit-animation-name: fadeInBottomRight;
    animation-name: fadeInBottomRight;
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.animate__fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
.animate__fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}
@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}
.animate__fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.animate__fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}
@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}
.animate__fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes fadeOutRight {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
.animate__fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}
@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}
.animate__fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
.animate__fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}
@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}
.animate__fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0);
    }
}
@keyframes fadeOutTopLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0);
    }
}
.animate__fadeOutTopLeft {
    -webkit-animation-name: fadeOutTopLeft;
    animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0);
    }
}
@keyframes fadeOutTopRight {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0);
    }
}
.animate__fadeOutTopRight {
    -webkit-animation-name: fadeOutTopRight;
    animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0);
    }
}
@keyframes fadeOutBottomRight {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0);
    }
}
.animate__fadeOutBottomRight {
    -webkit-animation-name: fadeOutBottomRight;
    animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0);
    }
}
@keyframes fadeOutBottomLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0);
    }
}
.animate__fadeOutBottomLeft {
    -webkit-animation-name: fadeOutBottomLeft;
    animation-name: fadeOutBottomLeft;
}
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    to {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    to {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}
.animate__animated.animate__flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
.animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
.animate__flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.animate__flipOutX {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
.animate__flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__lightSpeedInRight {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__lightSpeedInLeft {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}
@keyframes lightSpeedOutRight {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}
.animate__lightSpeedOutRight {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
}
@keyframes lightSpeedOutLeft {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
}
.animate__lightSpeedOutLeft {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
.animate__rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
    -webkit-transform-origin: center;
    transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
.animate__rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
.animate__rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
.animate__rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
.animate__rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
}
@-webkit-keyframes rotateOut {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0;
    }
}
@keyframes rotateOut {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0;
    }
}
.animate__rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
    -webkit-transform-origin: center;
    transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownLeft {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0;
    }
}
.animate__rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownRight {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
}
.animate__rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpLeft {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
}
.animate__rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpRight {
    0% {
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }
}
.animate__rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
}
@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}
@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}
.animate__hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
    -webkit-animation-name: hinge;
    animation-name: hinge;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.animate__jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox;
}
@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg);
    }
}
@keyframes rollOut {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg);
    }
}
.animate__rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
.animate__zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animate__zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animate__zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animate__zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animate__zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
@keyframes zoomOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
.animate__zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animate__zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
    }
}
@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
    }
}
.animate__zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
    }
}
@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
    }
}
.animate__zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
    -webkit-transform-origin: right center;
    transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animate__zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.animate__slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
.animate__slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.animate__slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
.animate__slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
@keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
.animate__slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}
.ms-slide .ms-slide-bgcont img {
    opacity: 0.2;
}
.ms-sl-selected.ms-slide .ms-slide-bgcont img {
    opacity: 1;
}
.slideTexts {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.slideTexts h3 {
    display: inline-flex;
    padding: 10px 20px;
    background: #343891;
    color: #fff;
    margin: 0;
    font-size: 17px;
}
.slideTexts h3 a {
    color: #fff;
}
@media (max-width: 576px) {
    .slideTexts h3 {
        font-size: 15px;
    }
}
.slideTexts p {
    display: inline-flex;
    background: #fff;
    color: #000;
    padding: 10px 20px;
    margin: 0;
    font-size: 14px;
}
.slideTexts p a {
    color: #000;
}
@media (max-width: 576px) {
    .slideTexts p {
        font-size: 12px;
    }
}
.blogItemWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.blogItemWrapper .blogItem {
    width: 100%;
    position: relative;
    background: var(--cardBackground);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    clip-path: polygon(calc(100% - 25px) 0, 100% 22px, 100% 100%, 0 100%, 0 0);
    border-radius: 5px;
}
.blogItemWrapper .blogItem .blogItemImage {
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
}
.blogItemWrapper .blogItem .blogItemImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blogItemWrapper .blogItem .blogItemInfo {
    width: calc(100% - 60px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.blogItemWrapper .blogItem .blogItemInfo .blogItemInfoDetail {
    width: calc(100% - 130px);
    position: relative;
    padding: 0 15px;
}
.blogItemWrapper .blogItem .blogItemInfo .blogItemInfoDetail h3 {
    font-size: 14px;
    color: var(--linkText);
    margin-bottom: 5px;
    font-weight: 600;
}
.blogItemWrapper .blogItem .blogItemInfo .blogItemInfoDetail h3 a {
    color: var(--linkText);
}
.blogItemWrapper .blogItem .blogItemInfo .blogItemInfoDetail p {
    font-size: 12px;
    color: var(--textColor);
    font-weight: 400;
    margin: 0;
}
.blogItemWrapper .blogItem .blogItemInfo .blogItemInfoDetail p a {
    color: var(--linkText);
}
.blogItemWrapper .blogItem .blogItemInfo .blogItemInfoButton {
    width: 115px;
    position: relative;
    margin-left: 15px;
}
.colorBox {
    width: 100%;
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.colorBox:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
    z-index: -1;
}
.bg1.colorBox:before {
    background: #80f1b1;
}
.bg2.colorBox:before {
    background: #343891;
}
.bg3.colorBox:before {
    background: #fcf7f1;
}
.bg4.colorBox:before {
    background: #6c16ff;
}
.bg5.colorBox:before {
    background: #559b77;
}
.bg6.colorBox:before {
    background: #24265b;
}
.bg7.colorBox:before {
    background: #d9d9d9;
}
.bg8.colorBox:before {
    background: #27272d;
}
.bg9.colorBox:before {
    background: #35353d;
}
.bg10.colorBox:before {
    background: #484854;
}
.bg11.colorBox:before {
    background: #737380;
}
.last.colorBox:before {
    clip-path: polygon(calc(100% - 25px) 0, 100% 22px, 100% 100%, 0 100%, 0 0);
}
.colorBox .color {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 2;
}
.colorBox.middle {
    height: 100px;
}
.colorBox.mini {
    height: 80px;
}
.commentInfoArea {
    width: 100%;
    position: relative;
}
.commentInfoArea .commentInfoTitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--textColor);
    margin-bottom: 10px;
}
@media (max-width: 1099px) {
    .commentInfoArea .commentInfoTitle {
        text-align: center;
    }
}
.commentInfoArea .commentInfoGroup {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
}
@media (max-width: 1199px) {
    .commentInfoArea .commentInfoGroup {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 1099px) {
    .commentInfoArea .commentInfoGroup {
        align-items: center;
    }
}
.commentInfoArea .commentInfoGroup .commentInfoLeft {
    display: flex;
    align-items: center;
    gap: 15px;
}
.commentInfoArea .commentInfoGroup .commentInfoImage {
    width: 170px;
    position: relative;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}
.commentLogo.commentInfoArea .commentInfoGroup .commentInfoImage {
    display: flex;
    align-items: center;
    justify-content: center;
}
.commentInfoArea .commentInfoGroup .commentInfoImage img {
    width: 100%;
    position: relative;
    border-radius: .5rem;
}
.commentLogo.commentInfoArea .commentInfoGroup .commentInfoImage img {
    clip-path: none;
    height: 100px;
    width: auto;
}
@media (max-width: 1399px) {
    .commentInfoArea .commentInfoGroup .commentInfoImage {
        width: 100px;
    }
}
.commentInfoArea .commentInfoGroup .commentInfoRating {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.commentInfoArea .commentInfoGroup .commentInfoRating .rating {
    font-size: 60px;
    color: var(--textColor);
    line-height: 1;
}
.commentInfoArea .commentInfoGroup .commentInfoRating .stars {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    color: #e9b535;
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail {
    width: 100%;
    position: relative;
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .star {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--textColor);
    font-size: 14px;
    font-weight: 700;
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .star i {
    color: #e9b535;
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .rate {
    width: 270px;
    height: 5px;
    border-radius: 5px;
    position: relative;
    background: #31323c;
}
body.light .commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .rate {
    background: var(--background);
}
@media (max-width: 1399px) {
    .commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .rate {
        width: 230px;
    }
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .rate span {
    width: 80%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #e9b535;
    border-radius: 5px;
}
.commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem .rateCount {
    font-size: 14px;
    color: var(--textColor);
}
@media (max-width: 1199px) {
    .commentInfoArea .commentInfoGroup .commentInfoRatingDetail .detailItem {
        justify-content: center;
    }
}
.commentItems {
    flex-direction: column;
    gap: 20px;
}
.commentItems,
.commentItems .commentItem {
    width: 100%;
    position: relative;
    display: flex;
}
.commentItems .commentItem .personProfile {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}
.commentItems .commentItem .personProfile:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundLight);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.commentItems .commentItem .personProfile span {
    position: relative;
}
@media (max-width: 576px) {
    .commentItems .commentItem .personProfile {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}
.commentItems .commentItem .commentDetail {
    width: calc(100% - 70px);
    padding-left: 20px;
    position: relative;
}
.commentItems .commentItem .commentDetail .personInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.commentItems .commentItem .commentDetail .personInfo .stars {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #e9b535;
    padding-right: 15px;
}
@media (max-width: 576px) {
    .commentItems .commentItem .commentDetail .personInfo .stars {
        font-size: 10px;
    }
}
.commentItems .commentItem .commentDetail .personInfo .date {
    font-size: 14px;
    color: var(--textColor);
    border-left: 2px solid var(--borderColor2);
    border-right: 2px solid var(--borderColor2);
    padding: 0 15px;
}
@media (max-width: 576px) {
    .commentItems .commentItem .commentDetail .personInfo .date {
        font-size: 12px;
    }
}
.commentItems .commentItem .commentDetail .personInfo .name {
    font-size: 14px;
    color: var(--textColor);
    padding: 0 15px;
}
@media (max-width: 576px) {
    .commentItems .commentItem .commentDetail .personInfo .name {
        font-size: 12px;
    }
}
.commentItems .commentItem .commentDetail .commentText {
    width: 100%;
    position: relative;
    padding: 20px;
    font-size: 14px;
    color: var(--textColor);
    background: var(--cardBackgroundLight);
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0.15);
    word-wrap: break-word;
    word-break: break-all;
}
@media (max-width: 576px) {
    .commentItems .commentItem .commentDetail {
        width: calc(100% - 40px);
        padding-left: 10px;
    }
}
.commentItems .commentItem .commentRemoveButton {
    position: absolute;
    top: 0;
    right: 0;
}
.commentItems .commentItem.visitor .personProfile {
    filter: drop-shadow(-4px 4px 4px rgba(0, 0, 0, 0.25));
}
.commentItems .commentItem.visitor .personProfile:before {
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.commentItems .commentItem.visitor .commentDetail {
    padding-left: 0;
    padding-right: 20px;
}
.commentItems .commentItem.visitor .commentDetail .personInfo {
    justify-content: flex-end;
}
.commentItems .commentItem.visitor .commentDetail .commentText {
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
}
.commentItems .commentItem.visitor .commentRemoveButton {
    top: 0;
    right: auto;
    left: 0;
}
.addCommentRating {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.addCommentRating .rating {
    font-size: 60px;
    color: var(--textColor);
    line-height: 1;
}
.addCommentRating .stars {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.addCommentRating .stars a {
    font-size: 20px;
    color: #e9b535;
    transition: all 0.2s;
}
.addCommentRating .stars a:hover {
    color: #ffc754;
    transform: scale(1.4);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
    transition: all 0.2s;
}
.card-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}
#ccsingle svg {
    width: 100px;
    max-height: 60px;
}
.creditcard svg#cardback,
.creditcard svg#cardfront {
    width: 100%;
    -webkit-box-shadow: 1px 5px 6px 0 #000;
    box-shadow: 1px 5px 6px 0 rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}
#generatecard {
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}
.creditcard .darkcolor,
.creditcard .lightcolor {
    -webkit-transition: fill 0.5s;
    transition: fill 0.5s;
}
.creditcard .lightblue {
    fill: #03a9f4;
}
.creditcard .lightbluedark {
    fill: #0288d1;
}
.creditcard .red {
    fill: #ef5350;
}
.creditcard .reddark {
    fill: #d32f2f;
}
.creditcard .purple {
    fill: #ab47bc;
}
.creditcard .purpledark {
    fill: #7b1fa2;
}
.creditcard .cyan {
    fill: #26c6da;
}
.creditcard .cyandark {
    fill: #0097a7;
}
.creditcard .green {
    fill: #66bb6a;
}
.creditcard .greendark {
    fill: #388e3c;
}
.creditcard .lime {
    fill: #d4e157;
}
.creditcard .limedark {
    fill: #afb42b;
}
.creditcard .yellow {
    fill: #ffeb3b;
}
.creditcard .yellowdark {
    fill: #f9a825;
}
.creditcard .orange {
    fill: #ff9800;
}
.creditcard .orangedark {
    fill: #ef6c00;
}
.creditcard .grey {
    fill: #bdbdbd;
}
.creditcard .greydark {
    fill: #616161;
}
#svgname {
    text-transform: uppercase;
}
#cardfront .st2 {
    fill: #fff;
}
#cardfront .st3 {
    font-weight: 600;
}
#cardfront .st4 {
    font-size: 54.7817px;
}
#cardfront .st5 {
    font-weight: 400;
}
#cardfront .st6 {
    font-size: 33.1112px;
}
#cardfront .st7 {
    opacity: 0.6;
    fill: #fff;
}
#cardfront .st8 {
    font-size: 24px;
}
#cardfront .st9 {
    font-size: 36.5498px;
}
#cardfront .st10 {

    font-weight: 300;
}
#cardfront .st11 {
    font-size: 16.1716px;
}
#cardfront .st12 {
    fill: #4c4c4c;
}
#cardback .st0 {
    fill: none;
    stroke: #0f0f0f;
    stroke-miterlimit: 10;
}
#cardback .st2 {
    fill: #111;
}
#cardback .st3 {
    fill: #f2f2f2;
}
#cardback .st4 {
    fill: #d8d2db;
}
#cardback .st5 {
    fill: #c4c4c4;
}
#cardback .st6 {

    font-weight: 400;
}
#cardback .st7 {
    font-size: 27px;
}
#cardback .st8 {
    opacity: 0.6;
}
#cardback .st9 {
    fill: #fff;
}
#cardback .st10 {
    font-size: 24px;
}
#cardback .st11 {
    fill: #eaeaea;
}
#cardback .st13 {
    font-size: 37.769px;
}
.creditcard {
    width: 100%;
    max-width: 300px;
    min-height: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}
.creditcard .back,
.creditcard .front {
    position: absolute;
    width: 100%;
    max-width: 300px;
    min-height: 200px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}
.creditcard .back,
.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.ccicon {
    width: 30px;
    height: 25px;
    position: absolute;
    bottom: 7px;
    right: 8px;
    z-index: 2;
}
.dashboardBalance {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--borderColor);
    border-radius: 5px;
    display: flex;
    align-items: center;
    clip-path: polygon(calc(100% - 22px) 0, 100% 17px, 100% 100%, 0 100%, 0 0);
}
body.streamer-on .dashboardBalance {
    filter: blur(3px);
}
body.light .dashboardBalance {
    background: #bdbdbd;
}
@media (max-width: 1399px) {
    .dashboardBalance {
        padding: 15px 8px;
    }
}
@media (max-width: 576px) {
    .dashboardBalance {
        padding: 5px;
    }
}
.dashboardBalance:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(calc(100% - 21px) 0, 100% 16px, 100% 100%, 0 100%, 0 0);
    z-index: 0;
}
body.light .dashboardBalance:before {
    background: #fff;
}
.dashboardBalance .icon {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #e9b535;
}
@media (max-width: 1399px) {
    .dashboardBalance .icon {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}
.dashboardBalance .detail {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 5px;
}
@media (max-width: 1399px) {
    .dashboardBalance .detail {
        width: calc(100% - 30px);
    }
}
.dashboardBalance .detail .price {
    font-size: 15px;
    color: #e9b535;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--borderColor);
    font-weight: 800;
}
@media (max-width: 1399px) {
    .dashboardBalance .detail .price {
        font-size: 14px;
    }
}
.dashboardBalance .detail .title {
    font-size: 11px;
    color: var(--textColor);
    font-weight: 500;
}
.dashboardOrderCount {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--borderColor);
    border-radius: 5px;
    display: flex;
    align-items: center;
    clip-path: polygon(calc(100% - 22px) 0, 100% 17px, 100% 100%, 0 100%, 0 0);
}
body.streamer-on .dashboardOrderCount {
    filter: blur(3px);
}
body.light .dashboardOrderCount {
    background: #bdbdbd;
}
@media (max-width: 576px) {
    .dashboardOrderCount {
        padding: 5px;
    }
}
.dashboardOrderCount:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(calc(100% - 21px) 0, 100% 16px, 100% 100%, 0 100%, 0 0);
    z-index: 0;
}
body.light .dashboardOrderCount:before {
    background: #fff;
}
.dashboardOrderCount.mini {
    padding: 15px 10px;
}
@media (max-width: 576px) {
    .dashboardOrderCount.mini {
        padding: 5px;
    }
}
.dashboardOrderCount .icon {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .dashboardOrderCount .icon {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}
.dashboardOrderCount .detail {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 5px;
}
@media (max-width: 576px) {
    .dashboardOrderCount .detail {
        width: calc(100% - 30px);
    }
}
.dashboardOrderCount .detail .price {
    font-size: 15px;
    color: var(--textColor);
    padding-bottom: 2px;
    border-bottom: 2px solid var(--borderColor);
    font-weight: 800;
}
.dashboardOrderCount .detail .title {
    font-size: 12px;
    color: var(--textColor);
    font-weight: 500;
}
.mini.dashboardOrderCount .detail .title {
    font-size: 11px;
}
.dashboardVerticalCardWrapper {
    width: 100%;
    position: relative;
    transition: all 0.2s;
}
.dashboardVerticalCardWrapper .dashboardVerticalCard {
    width: 100%;
    position: relative;
    padding: 35px 30px;
    background: var(--borderColor);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    clip-path: polygon(calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 0);
    z-index: 2;
}
body.light .dashboardVerticalCardWrapper .dashboardVerticalCard {
    background: #bdbdbd;
}
.dashboardVerticalCardWrapper .dashboardVerticalCard:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(calc(100% - 49px) 0, 100% 49px, 100% 100%, 0 100%, 0 0);
    z-index: 0;
}
body.light .dashboardVerticalCardWrapper .dashboardVerticalCard:before {
    background: #fff;
}
.dashboardVerticalCardWrapper .dashboardVerticalCard .cardTitle {
    width: 100%;
    position: relative;
    font-size: 40px;
    font-weight: 700;
    color: var(--darkGreen);
    margin: 0;
    z-index: 3;
}
.dashboardVerticalCardWrapper .dashboardVerticalCard .cardDesc {
    width: 100%;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    color: var(--textColor);
    text-shadow: 1px 1px 1px #000;
    margin: 0;
    z-index: 3;
}
body.light .dashboardVerticalCardWrapper .dashboardVerticalCard .cardDesc {
    text-shadow: none;
}
.dashboardVerticalCardWrapper .dashboardVerticalCard .siteButton {
    z-index: 3;
}
body.light .dashboardVerticalCardWrapper .dashboardVerticalCard .siteButton span {
    background: #343891;
    color: #fff;
}
.dashboardVerticalCardWrapper .dashboardVerticalCard .cardBackground {
    width: 40%;
    position: absolute;
    top: 47px;
    right: -10px;
    z-index: 2;
}
.secure.dashboardVerticalCardWrapper .dashboardVerticalCard .cardBackground {
    width: 47%;
    top: 70px;
    right: 0;
}
.dashboardVerticalCardWrapper:hover {
    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.55));
    transition: all 0.2s;
}
@media (max-width: 576px) {
    body {
        padding-bottom: 100px;
    }
}
.productDetailAreaWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
}
.productDetailAreaWrapper .productDetailArea {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 80px) 0, 100% 80px, 100% 100%, 70px 100%, 0 calc(100% - 70px), 0 0);
}
@media (max-width: 1099px) {
    .productDetailAreaWrapper .productDetailArea {
        clip-path: none;
    }
}
.productDetailAreaWrapper .productDetailArea .buttonLeftSingle,
.productDetailAreaWrapper .productDetailArea .buttonRightSingle {
    min-width: 200px;
}
@media (max-width: 1399px) {
    .productDetailAreaWrapper .productDetailArea .buttonLeftSingle.large,
    .productDetailAreaWrapper .productDetailArea .buttonRightSingle.large {
        font-size: 13px;
        padding: 11px 20px;
    }
}
@media (max-width: 999px) {
    .productDetailAreaWrapper .productDetailArea .buttonLeftSingle,
    .productDetailAreaWrapper .productDetailArea .buttonRightSingle {
        min-width: auto;
    }
}
.productImage {
    display: flex;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}
.productImage,
.productImage img {
    width: 100%;
    position: relative;
    min-height: 100%;
    align-self: stretch;
}
.productImage img {
    object-fit: cover;
    clip-path: polygon(100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px), 0 0);
}
@media (max-width: 1099px) {
    .productImage img {
        object-fit: contain;
        clip-path: none;
    }
}
.productDetailBox {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}
.productHeader {
    width: 100%;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--borderColor2);
}
@media (max-width: 576px) {
    .productHeader {
        border-bottom: none;
        padding-bottom: 0;
    }
}
.productHeader.gb {
    border-bottom: none;
}
.productHeader .productTitle {
    width: 100%;
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: var(--darkGreen);
    margin: 0 0 5px;
}
@media (max-width: 576px) {
    .productHeader .productTitle {
        font-size: 16px;
    }
}
.productHeader .productTitleElements {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
@media (max-width: 576px) {
    .productHeader .productTitleElements {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
.productHeader .productTitleElements .colE {
    position: relative;
    padding: 0 15px;
    border-right: 1px solid var(--borderColor2);
    min-height: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.productHeader .productTitleElements .colE:first-child {
    padding-left: 0;
}
.productHeader .productTitleElements .colE:last-child {
    border-right: none;
}
@media (max-width: 576px) {
    .productHeader .productTitleElements .colE {
        padding: 0 5px;
    }
    .productHeader .productTitleElements .colE .buttonRightSingle {
        padding: 7px 10px;
    }
}
.productFavAddButton,
.productFavRemoveButton {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #80f1b1;
    border: 2px solid #248a50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #343891;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
}
.productFavRemoveButton {
    background: #c3141b;
    border: 2px solid #990d11;
    color: #fff;
}
@media (max-width: 576px) {
    .iconLink {
        font-size: 11px;
    }
    .iconLink i {
        font-size: 13px;
    }
}
.detailPrice .priceBox {
    display: inline-flex;
    gap: 20px;
}
.detailPrice .price.sale {
    display: inline-block;
    padding: 10px;
    border: 2px solid #80f1b1;
    border-radius: 10px;
    position: relative;
}
.detailPrice .price.sale .title {
    display: inline-block;
    padding: 0 20px;
    background: var(--cardBackground);
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    color: var(--textColor);
}
.detailPrice .salePrice {
    font-size: 40px;
    font-weight: 800;
    color: #e3b21a;
    line-height: 1;
    display: inline-block;
    padding: 10px;
    border: 2px solid #343891;
    border-radius: 10px;
    position: relative;
}
.detailPrice .salePrice .title {
    display: inline-block;
    padding: 0 20px;
    background: var(--cardBackground);
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    color: var(--textColor);
}
@media (max-width: 1099px) {
    .detailPrice {
        align-items: flex-start;
        gap: 0;
        padding: 0;
    }
    .detailPrice .price {
        font-size: 25px;
    }
    .detailPrice .installment {
        font-size: 10px;
    }
}
.buttonIconBackground {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    align-self: baseline;
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
    transition: all 0.2s;
}
.buttonIconBackground .icon {
    width: 65px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    font-size: 30px;
    border-radius: 5px 0 0 5px;
    color: var(--darkGreen);
    transition: all 0.2s;
}
@media (max-width: 999px) {
    .buttonIconBackground .icon {
        width: 45px;
        font-size: 20px;
    }
}
.buttonIconBackground .text {
    font-size: 14px;
    font-weight: 400;
    padding: 15px 30px 15px 15px;
    background: var(--cardBackgroundLight);
    line-height: 1;
    border-radius: 0 5px 5px 0;
    color: var(--textColor);
    transition: all 0.2s;
}
@media (max-width: 999px) {
    .buttonIconBackground .text {
        padding: 10px 30px 10px 15px;
    }
}
.buttonIconBackground:hover {
    transform: scale(1.05);
    transition: all 0.2s;
}
.buttonIconBackground:hover .icon {
    background: var(--darkBlue);
    color: var(--darkGreen);
    transition: all 0.2s;
}
.buttonIconBackground:hover .text {
    background: var(--cardBackgroundLight);
    color: var(--darkGreen);
    transition: all 0.2s;
}
.detailTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.detailTitle h3 {
    background: var(--cardBackground);
}
.detailTitle:before {
    border-bottom: 1px solid var(--borderColor2);
}
.detailTitle .rightBox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 0 0 20px;
    background: var(--cardBackground);
}
.detailTitle .rightBox .carouselButton {
    width: 30px;
    height: 30px;
    font-size: 13px;
    background: var(--cardBackgroundLight);
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .detailTitle {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }
    .detailTitle h3 {
        font-size: 15px;
        padding: 0 15px;
    }
}
.detailProductListScroller {
    width: 100%;
    position: relative;
    max-height: 150px;
}
.carouselArea {
    position: relative;
}
.carouselArea:hover .scrollEffect {
    display: none;
}
@-webkit-keyframes shakeX {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
@keyframes shakeX {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
.scrollEffect {
    position: absolute;
    width: 100px;
    height: 100%;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(129, 241, 177, 0), rgba(129, 241, 177, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    z-index: 2;
}
.scrollEffect i {
    -webkit-animation-name: shakeX;
    animation-name: shakeX;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.detailProductList {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    gap: 8px 10px;
    padding-right: 30px;
}
.detailProductList .detailProductItem {
    width: 100%;
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--textColor);
    background: var(--background);
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    transition: all 0.2s;
}
.detailProductList .detailProductItem:hover {
    background: var(--darkBlue);
    color: var(--darkGreen);
    transition: all 0.2s;
}
.detailProductList .detailProductItem.active {
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-color: var(--darkGreenDark);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.detailProductList .detailProductItem.active.gb .productName {
    color: var(--darkBlue);
}
.detailProductList .detailProductItem.active.gb .productDetail {
    background: #6cd499;
    border: 1px solid var(--darkGreen);
}
body.light .detailProductList .detailProductItem.active.gb .productDetail {
    background: #2c2f81;
}
.detailProductList .detailProductItem.active.gb .productDetail .productDetailPrice {
    color: var(--darkBlue);
}
.detailProductList .detailProductItem.active.gb .productDetail .productDetailPrice:first-child {
    border-right: 1px solid var(--darkGreen);
}
.detailProductList .detailProductItem.active:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
    transition: all 0.2s;
}
.detailProductList .detailProductItem.gb {
    justify-content: space-between;
    padding: 0 5px 0 0;
}
.detailProductList .detailProductItem.gb .productName {
    width: 50%;
    position: relative;
    text-align: start;
    font-size: 15px;
    font-weight: 500;
    color: var(--textColor);
    padding: 10px;
}
@media (max-width: 576px) {
    .detailProductList .detailProductItem.gb .productName {
        font-size: 13px;
    }
}
.detailProductList .detailProductItem.gb .productDetail {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--cardBackground);
    border-radius: 5px;
    border: 1px solid var(--borderColor);
}
.detailProductList .detailProductItem.gb .productDetail .productDetailPrice {
    display: inline-block;
    padding: 5px;
    text-align: center;
    font-weight: 400;
    font-size: 11px;
    color: var(--textColor);
}
.detailProductList .detailProductItem.gb .productDetail .productDetailPrice:first-child {
    border-right: 1px solid var(--borderColor);
}
.detailProductList .detailProductItem.gb:hover {
    background: var(--background);
    color: var(--textColor);
    transition: all 0.2s;
}
@media (max-width: 1399px) {
    .detailProductList .detailProductItem {
        font-size: 12px;
    }
}
@media (max-width: 999px) {
    .detailProductList .detailProductItem {
        padding: 10px 5px;
    }
}
@media (max-width: 576px) {
    .detailProductList .detailProductItem {
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }
}
@media (max-width: 576px) {
    .detailProductList {
        grid-template-columns: repeat(1, 100%);
        gap: 5px;
        padding-right: 0;
    }
}
.detailInfo {
    width: 100%;
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.detailInfo .icon {
    font-size: 20px;
    color: var(--darkGreen);
}
.detailInfo .text {
    font-size: 17px;
    color: var(--textColor);
}
@media (max-width: 1399px) {
    .detailInfo .icon {
        font-size: 15px;
        color: var(--darkGreen);
    }
    .detailInfo .text {
        font-size: 14px;
        color: var(--textColor);
    }
}
@media (max-width: 576px) {
    .detailInfo {
        margin-top: 10px;
        margin-bottom: 10px;
        gap: 5px;
    }
    .detailInfo .icon {
        font-size: 13px;
        color: var(--darkGreen);
    }
    .detailInfo .text {
        font-size: 12px;
        color: var(--textColor);
    }
}
.detailBasketArea {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.detailBasketNavigateArea {
    display: inline-flex;
    align-items: center;
}
.detailBasketNavigateArea .basketNavigateMinus,
.detailBasketNavigateArea .basketNavigatePlus {
    width: 60px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--textColor);
    background: var(--borderColor);
    transition: all 0.2s ease-in-out 0s;
}
@media (max-width: 1399px) {
    .detailBasketNavigateArea .basketNavigateMinus,
    .detailBasketNavigateArea .basketNavigatePlus {
        width: 45px;
        height: 40px;
    }
}
@media (max-width: 576px) {
    .detailBasketNavigateArea .basketNavigateMinus,
    .detailBasketNavigateArea .basketNavigatePlus {
        width: 36px;
        height: 36px;
        font-size: 10px;
    }
}
.detailBasketNavigateArea .basketNavigateMinus.isDisable,
.detailBasketNavigateArea .basketNavigatePlus.isDisable {
    pointer-events: none;
}
.detailBasketNavigateArea .basketNavigateMinus:hover,
.detailBasketNavigateArea .basketNavigatePlus:hover {
    background: var(--darkGreenDark);
    color: var(--darkBlue);
    transition: all 0.2s ease-in-out 0s;
}
.detailBasketNavigateArea .basketNavigateMinus:hover:before,
.detailBasketNavigateArea .basketNavigatePlus:hover:before {
    background: var(--darkGreen);
}
.detailBasketNavigateArea .basketNavigateMinus i,
.detailBasketNavigateArea .basketNavigatePlus i {
    pointer-events: none;
}
.detailBasketNavigateArea .basketNavigateMinus:before,
.detailBasketNavigateArea .basketNavigatePlus:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--cardBackground);
    position: absolute;
    top: 2px;
    left: 2px;
}
.detailBasketNavigateArea .basketNavigateMinus i,
.detailBasketNavigateArea .basketNavigatePlus i {
    position: relative;
}
.detailBasketNavigateArea .basketNavigateMinus {
    clip-path: polygon(17px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.detailBasketNavigateArea .basketNavigateMinus:before {
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 13px);
}
.detailBasketNavigateArea .basketNavigatePlus {
    clip-path: polygon(100% 0, 100% 100%, 100% calc(100% - 14px), calc(100% - 17px) 100%, 0 100%, 0 0);
}
.detailBasketNavigateArea .basketNavigatePlus:before {
    clip-path: polygon(100% 0, 100% 100%, 100% calc(100% - 13px), calc(100% - 16px) 100%, 0 100%, 0 0);
}
.detailBasketNavigateArea .basketNavigateInput {
    width: 100px;
    height: 50px;
    border-top: 2px solid var(--borderColor);
    border-bottom: 2px solid var(--borderColor);
    font-size: 25px;
    font-weight: 600;
    color: var(--textColor);
    background: var(--background);
    line-height: 50px;
    text-align: center;
    border-left: none;
    border-right: none;
    -moz-appearance: textfield;
    border-radius: 0 !important;
}
@media (max-width: 1399px) {
    .detailBasketNavigateArea .basketNavigateInput {
        width: 50px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
    }
}
@media (max-width: 576px) {
    .detailBasketNavigateArea .basketNavigateInput {
        width: 50px;
        height: 36px;
        font-size: 12px;
        line-height: 36px;
    }
}
.detailBasketNavigateArea .basketNavigateInput:focus {
    outline: none;
    box-shadow: none;
}
.detailBasketNavigateArea .basketNavigateInput::-webkit-inner-spin-button,
.detailBasketNavigateArea .basketNavigateInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}
.mobileShoppingNav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    background: var(--cardBackgroundLight);
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 11;
    transition: all 0.2s;
}
.mobileShoppingNav.footerActive {
    bottom: 61px;
    transition: all 0.2s;
}
.mobileShoppingNav.oneLine {
    display: flex;
    justify-content: space-between;
}
.mobileShoppingNav.oneLine .detailPrice {
    justify-content: center;
}
.mobileShoppingNav.oneLine .detailPrice .price {
    font-size: 15px;
    white-space: nowrap;
}
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigateMinus,
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigatePlus {
    width: 30px;
    height: 34px;
    font-size: 8px;
}
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigateMinus {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 9px 100%, 0 calc(100% - 8px), 0 0);
}
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigateMinus:before {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 0);
}
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigatePlus {
    clip-path: none;
}
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigatePlus:before {
    width: calc(100% - 2px);
    clip-path: none;
}
.mobileShoppingNav.oneLine .detailBasketNavigateArea .basketNavigateInput {
    width: 30px;
    height: 34px;
    font-size: 11px;
    line-height: 34px;
    border-radius: 0 !important;
}
.mobileShoppingNav.oneLine .itemButtons {
    margin-top: 0;
}
.mobileShoppingNav.oneLine .itemButtons i {
    display: none;
}
.mobileShoppingNav.oneLine .itemButtons .buttonLeft,
.mobileShoppingNav.oneLine .itemButtons .buttonRight {
    width: auto;
    padding: 10px;
    font-size: 9px;
}
.mobileShoppingNav.oneLine .itemButtons .buttonLeft,
.mobileShoppingNav.oneLine .itemButtons .buttonLeft:before {
    clip-path: none;
}
.buttonBadge {
    display: inline-flex;
    padding: 3px 6px;
    font-size: 10px;
    background: #80f1b1;
    color: #343891;
    border-radius: 20px;
    font-weight: 700;
}
.goldBarPaymentBoxes {
    position: relative;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner {
    display: inline-flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner {
        width: 100%;
        gap: 5px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox {
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 15px;
    background: var(--borderColor);
    clip-path: polygon(calc(100% - 112px) 0, calc(100% - 112px) 40px, 100% 40px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox {
        width: calc(50% - 5px);
        padding: 15px 10px 10px;
        clip-path: polygon(calc(100% - 61px) 0, calc(100% - 61px) 35px, 100% 35px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 112px) 0, calc(100% - 112px) 40px, 100% 40px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox:before {
        clip-path: polygon(calc(100% - 61px) 0, calc(100% - 61px) 35px, 100% 35px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .unitPriceBox {
    font-size: 20px;
    font-weight: 700;
    color: #e3b21a;
    line-height: 1;
    position: relative;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .unitPriceBox .productBasketCount {
    font-size: 15px;
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .unitPriceBox {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .unitPriceBox .productBasketCount {
        font-size: 10px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .quantityPriceBox {
    font-size: 35px;
    font-weight: 800;
    color: var(--textColor);
    line-height: 1;
    position: relative;
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .quantityPriceBox {
        font-size: 20px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton {
    width: 100%;
    position: relative;
    padding: 10px 20px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
    font-size: 15px;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton {
        font-size: 12px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton i {
    color: #e3b21a;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton span .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton:hover {
    background: #248a50;
    color: #343891;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton:hover i {
    color: #343891;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentLeftBox .leftBasketButton:hover:before {
    background: #80f1b1;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox {
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 15px;
    background: var(--borderColor);
    clip-path: polygon(0 40px, 112px 40px, 112px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox {
        width: calc(50% - 5px);
        padding: 15px 10px 10px;
        clip-path: polygon(0 35px, 66px 35px, 66px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(0 40px, 112px 40px, 112px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox:before {
        clip-path: polygon(0 35px, 66px 35px, 66px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .unitPriceBox {
    font-size: 20px;
    font-weight: 700;
    color: #e3b21a;
    line-height: 1;
    position: relative;
    text-align: right;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .unitPriceBox .productBasketCount {
    font-size: 15px;
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .unitPriceBox {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .unitPriceBox .productBasketCount {
        font-size: 10px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .quantityPriceBox {
    font-size: 35px;
    font-weight: 800;
    color: var(--textColor);
    line-height: 1;
    position: relative;
    text-align: right;
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .quantityPriceBox {
        font-size: 20px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton {
    width: 100%;
    position: relative;
    padding: 10px 20px;
    background: var(--borderColor);

    font-size: 15px;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton {
        font-size: 12px;
    }
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);

}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton i {
    color: #e3b21a;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton span .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton:hover {
    background: #248a50;
    color: #343891;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton:hover i {
    color: #343891;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .goldBarPaymentRightBox .rightBasketButton:hover:before {
    background: #80f1b1;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea .basketNavigateMinus,
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea .basketNavigatePlus {
    height: 35px;
    clip-path: none;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea .basketNavigateMinus:before,
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea .basketNavigatePlus:before {
    clip-path: none;
}
.goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea .basketNavigateInput {
    height: 35px;
    font-size: 18px;
}
@media (max-width: 576px) {
    .goldBarPaymentBoxes .goldBarPaymentBoxesInner .detailBasketNavigateArea .basketNavigateInput {
        font-size: 12px;
    }
}
.epinPaymentMobileBox {
    width: 100%;
    position: relative;
    z-index: 100;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    background: var(--borderColor);
    padding: 15px 10px 10px;
    clip-path: polygon(calc(100% - 127px) 0, calc(100% - 127px) 35px, 100% 35px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
    z-index: 101;
}
.noBasket.epinPaymentMobileBox .epinPaymentMobileBoxItem {
    clip-path: polygon(calc(100% - 21px) 0, 100% 17px, 100% 100%, 0 100%, 0 100%, 0 0);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 127px) 0, calc(100% - 127px) 35px, 100% 35px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
}
.noBasket.epinPaymentMobileBox .epinPaymentMobileBoxItem:before {
    clip-path: polygon(calc(100% - 20px) 0, 100% 16px, 100% 100%, 0 100%, 0 100%, 0 0);
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .detailPrice .price {
    flex-direction: column;
    align-items: flex-start;
    font-size: 20px;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons {
    justify-content: space-between;
    margin-top: 0;
}
.noBasket.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons {
    width: 50%;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonLeft,
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonRight {
    width: calc(50% - 2px);
    background: var(--borderColor);
    font-size: 12px;
    color: var(--textColor);
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonLeft:before,
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonRight:before {
    background: var(--background);
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonLeft i,
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonRight i {
    color: #e3b21a;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonLeft:hover,
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonRight:hover {
    background: #248a50;
    color: #343891;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonLeft:hover i,
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonRight:hover i {
    color: #343891;
}
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonLeft:hover:before,
.epinPaymentMobileBox .epinPaymentMobileBoxItem .itemButtons .buttonRight:hover:before {
    background: #80f1b1;
}
.epinPaymentMobileBox .detailBasketNavigateArea {
    position: absolute;
    top: -5px;
    right: 0;
    z-index: 102;
}
.epinPaymentMobileBox .detailBasketNavigateArea .basketNavigateMinus,
.epinPaymentMobileBox .detailBasketNavigateArea .basketNavigatePlus {
    height: 35px;
    clip-path: none;
}
.epinPaymentMobileBox .detailBasketNavigateArea .basketNavigateMinus:before,
.epinPaymentMobileBox .detailBasketNavigateArea .basketNavigatePlus:before {
    clip-path: none;
}
.epinPaymentMobileBox .detailBasketNavigateArea .basketNavigateInput {
    height: 35px;
    font-size: 18px;
}
@media (max-width: 576px) {
    .epinPaymentMobileBox .detailBasketNavigateArea .basketNavigateInput {
        font-size: 12px;
    }
}
.minWidthAuto {
    min-width: auto !important;
}
#otherProductList .owl-item {
    max-width: 231px !important;
}
.productVerticalList {
    width: 100%;
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
}
.productVerticalList:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
}
.productVerticalList .image {
    width: 90px;
    position: relative;
    box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.15);
}
.productVerticalList .image img {
    width: 100%;
}
.productVerticalList .image:before {
    content: "";
    width: 0;
    height: 80%;
    border-right: 2px solid var(--borderColor2);
    position: absolute;
    top: 10%;
    right: -10px;
}
.productVerticalList .info {
    width: calc(100% - 90px);
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.productVerticalList .info .detail {
    width: calc(100% - 400px);
    position: relative;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
}
.productVerticalList .info .detail .title {
    font-size: 17px;
    font-weight: 600;
}
.productVerticalList .info .detail .title a {
    color: var(--darkGreen);
}
.productVerticalList .info .detail .title a:hover {
    color: var(--darkGreen);
    text-decoration: underline;
}
.productVerticalList .info .detail .desc {
    font-size: 14px;
    color: var(--textColor);
    margin-top: 5px;
}
.productVerticalList .info .buttons,
.verticalButtonBoxes {
    width: 400px;
    position: relative;
}
.verticalButtonBoxes .verticalButtonBoxesInner {
    width: 100%;
    gap: 0;
    display: inline-flex;
    align-items: flex-start;
    position: relative;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    background: var(--borderColor);
    width: calc(50% - 5px);
    padding: 8px;
    margin-right: 5px;
    clip-path: polygon(calc(100% - 61px) 0, calc(100% - 61px) 25px, 100% 25px, 100% 100%, 0 100%, 0 100%, 0 0);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 61px) 0, calc(100% - 61px) 25px, 100% 25px, 100% 100%, 0 100%, 0 100%, 0 0);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .unitPriceBox {
    font-size: 12px;
    font-weight: 700;
    color: #e3b21a;
    line-height: 1;
    position: relative;
    margin-bottom: 5px;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .unitPriceBox .productBasketCount {
    font-size: 10px;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .quantityPriceBox {
    font-size: 16px;
    font-weight: 800;
    color: var(--textColor);
    line-height: 1;
    position: relative;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton {
    width: 100%;
    position: relative;
    padding: 6px 20px;
    background: var(--borderColor);
    font-size: 12px;
    color: var(--textColor);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton i {
    color: #e3b21a;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton span .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton:hover {
    background: #248a50;
    color: #343891;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton:hover i {
    color: #343891;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonLeftBox .leftBasketButton:hover:before {
    background: #80f1b1;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    background: var(--borderColor);
    width: 50%;
    padding: 8px;
    clip-path: polygon(0 25px, 66px 25px, 66px 0, 100% 0, 100% calc(100% - 23px), calc(100% - 21px) 100%, 0 100%);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(0 25px, 66px 25px, 66px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 20px) 100%, 0 100%);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .unitPriceBox {
    font-size: 12px;
    font-weight: 700;
    color: #e3b21a;
    line-height: 1;
    position: relative;
    text-align: right;
    margin-bottom: 5px;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .unitPriceBox .productBasketCount {
    font-size: 10px;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .quantityPriceBox {
    font-size: 16px;
    font-weight: 800;
    color: var(--textColor);
    line-height: 1;
    position: relative;
    text-align: right;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton {
    width: 100%;
    position: relative;
    padding: 6px 20px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% calc(100% - 17px), calc(100% - 16px) 100%, 0 100%, 0 0);
    font-size: 12px;
    color: var(--textColor);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(100% 0, 100% calc(100% - 16px), calc(100% - 15px) 100%, 0 100%, 0 0);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton i {
    color: #e3b21a;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton span .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:hover {
    background: #248a50;
    color: #343891;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:hover i {
    color: #343891;
}
.verticalButtonBoxes .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:hover:before {
    background: #80f1b1;
}
.verticalButtonBoxes .verticalButtonBoxesInner .detailBasketNavigateArea {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.verticalButtonBoxes .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigateMinus,
.verticalButtonBoxes .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigatePlus {
    width: 36px;
    height: 25px;
    font-size: 10px;
    clip-path: none;
}
.verticalButtonBoxes .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigateMinus:before,
.verticalButtonBoxes .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigatePlus:before {
    clip-path: none;
}
.verticalButtonBoxes .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigateInput {
    width: 50px;
    height: 25px;
    font-size: 11px;
}
.verticalButtonBoxes2 {
    width: 400px;
    position: relative;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner {
    width: 100%;
    gap: 0;
    display: inline-flex;
    align-items: flex-start;
    position: relative;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    background: var(--borderColor);
    width: 60%;
    padding: 8px;
    clip-path: polygon(0 25px, 128px 25px, 128px 0, 100% 0, 100% calc(100% - 23px), calc(100% - 21px) 100%, 0 100%);
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(0 25px, 128px 25px, 128px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 20px) 100%, 0 100%);
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .unitPriceBox {
    font-size: 12px;
    font-weight: 700;
    color: #e3b21a;
    line-height: 1;
    position: relative;
    text-align: right;
    margin-bottom: 5px;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .unitPriceBox .productBasketCount {
    font-size: 10px;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .quantityPriceBox {
    font-size: 16px;
    font-weight: 800;
    color: var(--textColor);
    line-height: 1;
    position: relative;
    text-align: right;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton {
    width: 100%;
    position: relative;
    padding: 6px 20px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% calc(100% - 17px), calc(100% - 16px) 100%, 0 100%, 0 0);
    font-size: 12px;
    color: var(--textColor);
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--background);
    clip-path: polygon(100% 0, 100% calc(100% - 16px), calc(100% - 15px) 100%, 0 100%, 0 0);
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton i {
    color: #e3b21a;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton span .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:hover {
    background: #248a50;
    color: #343891;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:hover i {
    color: #343891;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .verticalButtonRightBox .rightBasketButton:hover:before {
    background: #80f1b1;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .detailBasketNavigateArea {
    position: absolute;
    top: -5px;
    left: 57%;
    transform: translateX(-57%);
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigateMinus,
.verticalButtonBoxes2 .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigatePlus {
    width: 36px;
    height: 25px;
    font-size: 10px;
    clip-path: none;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigateMinus:before,
.verticalButtonBoxes2 .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigatePlus:before {
    clip-path: none;
}
.verticalButtonBoxes2 .verticalButtonBoxesInner .detailBasketNavigateArea .basketNavigateInput {
    width: 50px;
    height: 25px;
    font-size: 11px;
}
.accordion-item {
    border-color: var(--borderColor);
    background: var(--cardBackground);
}
.accordion-button {
    color: var(--textColor);
    padding: 10px 15px;
}
@media (max-width: 576px) {
    .gamesContainer {
        overflow: hidden;
    }
}
.gameItem {
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.25));
}
.gameItem,
.gameItem .gameBg {
    width: 100%;
    position: relative;
    transition: all 0.5s;
}
.gameItem .gameBg {
    z-index: 1;
    border-radius:.25rem;
}
.gameItem .gameBg img {
    width: 100%;
    position: relative;
    object-fit: cover;
    z-index: 2;
    border-radius: .5rem;
}
.gameItem .gameBg:after,
.gameItem .gameBg:before {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
    z-index: 3;
}
.gameItem .gameBg:before {
    top: 0;
    height: 100%;
    background-image: linear-gradient(0deg, transparent 46%, rgba(12, 13, 19, 0.5) 68%, #0c0d13 97%);
    border-radius: .5rem;
}
.gameItem .gameBg:after {
    bottom: 0;
    opacity: 1;
    background-image: linear-gradient(180deg, transparent 46%, rgba(12, 13, 19, 0.5) 68%, #0c0d13 97%);
    border-radius: .5rem;
}
.gameItem .gameLogo {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 15px;
    left: 0;
    transition: all 0.4s;
    z-index: 3;
}
.gameItem .gameLogo img {
    width: auto;
    max-width: 80%;
    max-height: 50px;
    display: inline-block;
}
.gameItem .gameCharacter {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.4s;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}
.gameItem.active,
.gameItem:hover {
    filter: drop-shadow(0 35px 10px rgba(0, 0, 0, 0.8));
    transition: all 0.5s;
}
.gameItem.active .gameBg,
.gameItem:hover .gameBg {
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    transition: all 0.5s;
}
.gameItem.active .gameBg:after,
.gameItem.active .gameBg:before,
.gameItem:hover .gameBg:after,
.gameItem:hover .gameBg:before {
    opacity: 1;
}
.gameItem.active .gameBg:after,
.gameItem:hover .gameBg:after {
    height: 120px;
}
.gameItem.active .gameLogo,
.gameItem:hover .gameLogo {
    transform: translate3d(0, -30px, 100px);
}
@media (max-width: 576px) {
    .gameItem.active .gameLogo,
    .gameItem:hover .gameLogo {
        transform: translate3d(0, -20px, 100px);
    }
}
.gameItem.active .gameCharacter,
.gameItem:hover .gameCharacter {
    opacity: 1;
    transform: translate3d(0, -35px, 100px);
}
@media (max-width: 576px) {
    .gameItem.active .gameCharacter,
    .gameItem:hover .gameCharacter {
        transform: translate3d(0, -25px, 100px);
    }
}
@media (max-width: 576px) {
    .gameItem.active {
        filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.8));
    }
}
@media (max-width: 576px) {
    .gameItem {
        filter: drop-shadow(0 35px 10px rgba(0, 0, 0, 0.8));
        transition: all 0.5s;
    }
    .gameItem.shadowSmall {
        filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.8));
    }
    .gameItem .gameBg {
        transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
        transition: all 0.5s;
    }
    .gameItem .gameBg:after,
    .gameItem .gameBg:before {
        opacity: 1;
    }
    .gameItem .gameBg:after {
        height: 120px;
    }
    .gameItem .gameLogo {
        transform: translate3d(0, -20px, 100px);
    }
    .gameItem .gameCharacter {
        opacity: 1;
        transform: translate3d(0, -25px, 100px);
    }
}
.gamesRow {
    width: calc(100% + 20px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
    margin-left: -10px;
    margin-right: -10px;
}
.gamesRow .gamesCol {
    width: 100%;
    position: relative;
    padding: 10px;
}
@media (max-width: 1099px) {
    .gamesRow {
        grid-template-columns: repeat(6, 16.6666666667%);
    }
}
@media (max-width: 899px) {
    .gamesRow {
        grid-template-columns: repeat(5, 20%);
    }
}
@media (max-width: 699px) {
    .gamesRow {
        grid-template-columns: repeat(4, 25%);
    }
}
@media (max-width: 576px) {
    .gamesRow {
        grid-template-columns: repeat(3, 33.3333333333%);
    }
    .gamesRow .gamesCol {
        padding: 10px;
    }
}
.textHiddenArea {
    width: 100%;
    position: relative;
    max-height: 125px;
    overflow: hidden;
    padding-bottom: 50px;
}
.textHiddenArea .textHiddenShowButton {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 40px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: linear-gradient(0deg, rgba(24, 24, 32, 0.97) 30%, rgba(24, 24, 32, 0.5), rgba(24, 24, 32, 0));
    color: var(--textColor);
    text-shadow: 0 2px 4px #000;
    transition: all 0.2s ease-in-out 0s;
}
body.light .textHiddenArea .textHiddenShowButton {
    background: linear-gradient(0deg, hsla(0, 0%, 93.3%, 0.97) 30%, hsla(0, 0%, 93.3%, 0.5), hsla(0, 0%, 93.3%, 0));
}
.textHiddenArea .textHiddenShowButton:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out 0s;
}
@media (max-width: 576px) {
    .textHiddenArea .textHiddenShowButton:hover {
        transform: scale(1);
    }
}
.gameTitle {
    width: 100%;
    position: relative;
    font-size: 25px;
    font-weight: 700;
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .gameTitle {
        font-size: 15px;
    }
}
@media (max-width: 576px) {
    .gameInfoText {
        font-size: 12px;
    }
}
.file-upload .file-select {
    border: 2px solid var(--borderColor);
    background: var(--backgroundDark);
}
.inquireOrderCard {
    width: 100%;
    position: relative;
    background: var(--cardBackground);
    padding: 15px;
    margin-top: 20px;
    clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cardTitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--darkGreen);
    text-align: center;
}
.formGroup .formControl.inquireInput {
    padding-right: 75px !important;
}
.inquireInputButton {
    height: 28px;
    display: flex;
    align-items: center;
    background: #80f1b1;
    color: #343891;
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    line-height: 1;
    font-size: 12px;
    font-weight: 600;
    border-radius: 0 5px 5px 0;
    padding: 0 10px;
}
.inquireInputButton:hover {
    background: #343891;
    color: #fff;
}
.loginArea {
    width: 100%;
    position: relative;
    padding: 70px 0;
}
@media (max-width: 1099px) {
    .loginArea {
        padding: 20px 0;
    }
}
@media (max-width: 576px) {
    .loginArea {
        padding: 15px 0;
    }
}
.loginArea .loginInfo {
    width: 100%;
    position: relative;
}
.loginArea .loginInfo h2 {
    font-size: 35px;
    font-weight: 800;
    color: var(--darkGreen);
    margin: 0 0 20px;
    line-height: 1.4;
    letter-spacing: 2px;
}
@media (max-width: 576px) {
    .loginArea .loginInfo h2 {
        font-size: 25px;
        text-align: center;
    }
}
.loginArea .loginInfo p {
    font-size: 14px;
    font-weight: 400;
}
.loginArea .loginInfo p a {
    font-weight: 700;
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .loginArea .loginInfo p {
        text-align: center;
    }
}
.passwordArea {
    width: 100%;
    position: relative;
}
.passwordArea .passwordToggleButton {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--darkGreen);
    text-decoration: none;
}
.passwordArea .passwordToggleButton:hover {
    background: #343891;
    color: #fff;
}
.loginOrArea {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 40px 0 20px;
}
.loginOrArea h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
    display: inline-block;
    padding: 0 14px;
    background: #151632;
    position: relative;
    margin: 0;
    z-index: 2;
}
.loginOrArea:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #3d4fc5;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.loginPlatforms {
    width: 100%;
    gap: 10px;
    display: grid;
    padding: 1.5rem;
    background-color: #1a214d;
    background-repeat: no-repeat;
    background-image: url(../images/auth-social.svg);
    background-size: 100%;
    border-radius: .5rem;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
    text-align: center;
    margin-top:2rem;
}
.loginPlatforms,
.loginPlatforms .platform {
    position: relative;
    align-items: center;
    justify-content: center;
}
.loginPlatforms .platform {
    width: 50px;
    height: 50px;
    border: 2px solid var(--borderColor);
    font-size: 20px;
    color: #FFF;
    border-radius: 4px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
    display:flex;
}
.loginPlatforms .platform:hover {
    background: #343891;
    color: #fff;
    border-color: #282b78;
    transform: scale(1.3);
    transition: all 0.2s;
}
.tabButtons {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--cardBackgroundLight);
}
@media (max-width: 576px) {
    .tabButtons {
        gap: 5px;
    }
}
.tabButtons .tabButton {
    display: inline-flex;
    padding: 10px 15px;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    border-radius: 5px 5px 0 0;
    line-height: 1;
}
.tabButtons .tabButton.active {
    background: #343891;
    color: #fff;
}
@media (max-width: 576px) {
    .tabButtons .tabButton {
        padding: 8px 10px;
    }
}
.tableCardView {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    z-index: 4;
}
.tableCardView:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.tableCardView .cardInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tableCardView .cardInfo .cardHeader {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tableCardView .cardInfo .cardHeader .orderImage {
    width: 50px;
    height: 50px;
    position: relative;
}
.tableCardView .cardInfo .cardHeader .orderImage img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.25);
}
.tableCardView .cardInfo .cardHeader .orderImage:hover {
    z-index: 10;
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardHeader .orderImage,
    .tableCardView .cardInfo .cardHeader .orderImage img {
        width: 30px;
        height: 30px;
    }
}
.tableCardView .cardInfo .cardHeader .titleDetail {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}
.tableCardView .cardInfo .cardHeader .titleDetail .title {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
}
.tableCardView .cardInfo .cardHeader .titleDetail .title a {
    color: var(--textColor);
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardHeader .titleDetail .title {
        font-size: 12px;
    }
}
.tableCardView .cardInfo .cardHeader .titleDetail .parentLink {
    font-size: 11px;
    font-weight: 400;
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardHeader {
        width: 100%;
        border-bottom: 1px solid var(--borderColor3);
        padding-bottom: 10px;
    }
}
.tableCardView .cardInfo .cardBody,
.tableCardView .cardInfo .cardBody .info {
    position: relative;
    display: inline-flex;
    gap: 10px;
}
.tableCardView .cardInfo .cardBody .info {
    flex-direction: column;
}
.tableCardView .cardInfo .cardBody .info .detail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--backgroundDark);
    padding: 7px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    color: var(--textColor);
    line-height: 1;
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody .info .detail {
        font-size: 10px;
    }
}
.tableCardView .cardInfo .cardBody .info .detail i {
    font-size: 13px;
    color: var(--darkGreen);
    margin-right: 5px;
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody .info .detail i {
        display: none;
    }
}
.tableCardView .cardInfo .cardBody .info .priceText {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.tableCardView .cardInfo .cardBody .info .priceText .priceTitle {
    font-size: 12px;
    color: var(--textColor);
    font-weight: 400;
    margin: 0;
}
.tableCardView .cardInfo .cardBody .info .priceText .price {
    font-size: 15px;
    font-weight: 800;
    color: var(--darkGreen);
    line-height: 1;
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody .info .priceText {
        font-size: 11px;
    }
}
.tableCardView .cardInfo .cardBody .info .resultText {
    display: inline-block;
    font-size: 11px;
    color: var(--textColor);
    font-weight: 700;
    background: var(--background);
    padding: 3px 10px;
    line-height: 1;
    border-radius: 50px;
}
.tableCardView .cardInfo .cardBody .info .resultText.success {
    background: #28a745;
    color: #fff;
}
.tableCardView .cardInfo .cardBody .info .resultText.warning {
    background: #e3b21a;
    color: #000;
}
.tableCardView .cardInfo .cardBody .info .resultText.danger {
    background: #c3141b;
    color: #fff;
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody .info .resultText {
        padding: 3px 10px;
        font-size: 10px;
    }
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody .info {
        width: 100%;
    }
}
@media (max-width: 576px) {
    .tableCardView .cardInfo .cardBody {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .tableCardView .cardInfo .cardBody .buttonRightSingle {
        width: 100%;
        padding: 8px 5px;
    }
    .tableCardView .cardInfo .cardBody .buttonRightSingle span {
        font-size: 10px;
    }
}
@media (max-width: 576px) {
    .tableCardView .cardInfo {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
.tableCardView .cardDetail {
    width: calc(100% + 20px);
    position: relative;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    border-top: 1px solid var(--borderColor3);
}
.tableCardView .cardDetail:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundDark);
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.tableCardView:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: all 0.3s;
    z-index: 5;
}
.copyAreaV2 .textToBeCopied {
    font-weight: 700;
}
.buttonRightSingle span i {
    color: #80f1b1;
}
.buttonRightSingle:hover:before {
    background: #80f1b1;
}
.dark.buttonRightSingle:hover span i {
    color: #80f1b1;
}
.gameLogosArea {
    width: 100%;
    position: relative;
    padding: 10px 0;
}
.gameLogosArea .gameLogoWrap {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}
.gameLogosArea .gameLogoWrap .active{
    background: #3948a7!important;
}
.gameLogosArea .gameLogoWrap .gameLogo {
    width: 100%;
    position: relative;
    background: #242852;
    padding: 0 10px;
    border-radius: .325rem;
}
.gameLogosArea .gameLogoWrap:before {
    top: 0;
    left: 0;
    z-index: 1;
}
.gameLogosArea .gameLogoWrap:after,
.gameLogosArea .gameLogoWrap:before {
    background-color: #151632;
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 0.4rem;
    transition: background-color 0.15s ease-in-out;
}
.gameLogosArea .gameLogoWrap:after {
    bottom: 0;
    right: 0;
}
.gameLogosArea .gameLogoWrap .gameLogo .item {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.gameLogosArea .gameLogoWrap .gameLogo .item img {
    width: 100%;
    height: 50px;
    object-fit: contain;
}
body.light .gameLogosArea .gameLogoWrap .gameLogo .item img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
.gameLogosArea .gameLogoWrap .gameLogo .item a {
    display: block;
}
.gameLogosArea .gameLogoWrap .gameLogo:hover {
    background: #3948a7;
}
body.light .gameLogosArea .gameLogoWrap .gameLogo:hover {
    background: #343891;
}
.gameLogosCarouselArea {
    width: 100%;
    position: relative;
    min-height: 74px;
}
#gameLogosCarousel .owl-item {
    padding: 10px 2px !important;
}
.slideBg {
    width: 100% !important;
    border-radius: 0.75rem;
}
@media (max-width: 1399px) {
    .slideBg {
        clip-path: polygon(calc(100% - 120px) 0, 100% 120px, 100% 100%, 120px 100%, 0 calc(100% - 120px), 0 0);
    }
}
@media (max-width: 999px) {
    .slideBg {
        clip-path: polygon(calc(100% - 80px) 0, 100% 80px, 100% 100%, 80px 100%, 0 calc(100% - 80px), 0 0);
    }
}
@media (max-width: 767px) {
    .slideBg {
        clip-path: polygon(calc(100% - 50px) 0, 100% 50px, 100% 100%, 50px 100%, 0 calc(100% - 50px), 0 0);
    }
}
.slideTextFirst {
    font-size: 40px;
    font-weight: 700;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
    .slideTextFirst {
        font-size: 20px;
        width: 100%;
        text-align: center;
    }
    .slideTextFirst.v2 {
        text-align: left;
    }
}
.slideTextSecond {
    font-size: 60px;
    font-weight: 700;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
    .slideTextSecond {
        width: 100%;
        text-align: center;
        font-size: 30px;
    }
    .slideTextSecond.v2 {
        text-align: left;
    }
}
.slideTextThird {
    font-size: 40px;
    font-weight: 400;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.slideTextThird strong {
    font-weight: 700;
}
@media (max-width: 767px) {
    .slideTextThird {
        font-size: 20px;
        width: 100%;
        text-align: center;
    }
    .slideTextThird.v2 {
        text-align: left;
    }
}
.slideTextDetail {
    max-width: 565px;
    font-size: 14px;
}
@media (max-width: 1199px) {
    .slideTextDetail {
        max-width: 40%;
        font-size: 18px;
    }
}
@media (max-width: 767px) {
    .slideTextDetail {
        max-width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 0 15px;
    }
    .slideTextDetail.v2 {
        width: 50%;
        text-align: left;
        padding: 0;
    }
}
.slideButtonBox {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    left: 165px;
    top: 375px;
}
@media (max-width: 1399px) {
    .slideButtonBox {
        left: 165px;
        top: 375px;
    }
}
@media (max-width: 1199px) {
    .slideButtonBox {
        left: 165px;
        top: 400px;
    }
}
@media (max-width: 999px) {
    .slideButtonBox {
        left: 165px;
        top: 400px;
    }
}
@media (max-width: 899px) {
    .slideButtonBox {
        left: 165px;
        top: 400px;
    }
}
.slideButton {
    display: inline-flex;
    padding: 10px 30px;
    background: #248a50;
    clip-path: polygon(85% 0, 100% 35%, 100% 100%, 0 100%, 0 0);
    color: #343891;
    font-weight: 600;
    position: relative;
    transition: all 0.2s ease-in-out;
}
.slideButton span {
    position: relative;
    z-index: 2;
}
.slideButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: #80f1b1;
    clip-path: polygon(85% 0, 100% 35%, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
.slideButton:hover {
    background: #282b78;
    color: #fff;
    transition: all 0.2s ease-in-out;
}
.slideButton:hover:before {
    background: #343891;
}
@media (max-width: 767px) {
    .slideButton {
        font-size: 12px;
        padding: 5px 15px;
    }
}
.mobileSlideImage {
    width: 100%;
    display: flex;
    justify-content: center;
}
.mobileSlideImage img {
    height: 180px;
}
.mobileSlideImage:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2px solid #248a50;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.55);
}
.mobileSlideImage.v2 {
    width: auto;
    display: inline-flex;
}
.mobileSlideImage.v2:before {
    display: none;
}
.salesArea {
    width: 100%;
    position: relative;
}
.salesBlock {
    width: calc(100% + 40px);
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-right: -40px;
    overflow: hidden;
    border-radius: 6px;
    clip-path: polygon(calc(100% - 80px) 0, 100% 100%, 0 100%, 0 0);
    transition: all 0.3s;
}
.bottom.salesBlock {
    clip-path: polygon(100% 0, calc(100% - 80px) 100%, 0 100%, 0 0);
}
.end.salesBlock {
    justify-content: flex-end;
    clip-path: polygon(100% 0, 100% 100%, 80px 100%, 0 0);
    margin-right: 0;
    margin-left: -40px;
}
.end.bottom.salesBlock {
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 80px 0);
}
.salesBlock .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.salesBlock .detail {
    width: 70%;
    height: 70px;
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 20px;
    background: rgba(0, 0, 0, 0.4);
    clip-path: polygon(calc(100% - 80px) 0, 100% 100%, 0 100%, 0 0);
    z-index: 2;
    transition: all 0.3s;
}
.bottom.salesBlock .detail {
    clip-path: polygon(100% 0, calc(100% - 80px) 100%, 0 100%, 0 0);
}
.end.salesBlock .detail {
    justify-content: flex-end;
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 80px 0);
    padding: 0 20px 0 0;
}
.end.bottom.salesBlock .detail {
    clip-path: polygon(100% 0, 100% 100%, 80px 100%, 0 0);
}
.salesBlock .detail img {
    max-height: 45px;
}
.salesBlock .detail h3 {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.salesBlock .detail:before {
    content: "";
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 41px;
    background: #80f1b1;
    transform: skewX(49deg);
}
.bottom.salesBlock .detail:before {
    transform: skewX(-49deg);
}
.end.salesBlock .detail:before {
    transform: skewX(-49deg);
    right: auto;
    left: 41px;
}
.end.bottom.salesBlock .detail:before {
    transform: skewX(49deg);
    right: auto;
    left: 41px;
}
@media (max-width: 1399px) {
    .salesBlock .detail {
        height: 55px;
    }
    .salesBlock .detail img {
        max-height: 30px;
    }
    .salesBlock .detail h3 {
        font-size: 18px;
    }
    .salesBlock .detail:before {
        transform: skewX(56deg);
    }
    .bottom.salesBlock .detail:before,
    .end.salesBlock .detail:before {
        transform: skewX(-56deg);
    }
    .end.bottom.salesBlock .detail:before {
        transform: skewX(56deg);
    }
}
@media (max-width: 1199px) {
    .salesBlock .detail img {
        max-height: 20px;
    }
    .salesBlock .detail h3 {
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    .salesBlock .detail {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        padding-left: 10px;
    }
    .end.salesBlock .detail {
        align-items: flex-end;
        justify-content: center;
        padding-right: 10px;
    }
    .salesBlock .detail h3 {
        font-size: 12px;
    }
}
.salesBlock:hover {
    transform: scale(1.05);
    z-index: 2;
    transition: all 0.3s;
}
.salesBlockMobile {
    width: 100%;
    position: relative;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% calc(100% - 18px), calc(100% - 15px) 100%, 0 100%, 0 0);
    transition: all 0.2s ease-in-out 0s;
}
.salesBlockMobile.web {
    padding: 16px 10px;
}
.salesBlockMobile:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);

}
.salesBlockMobile .blockLogo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
}
.salesBlockMobile .blockLogo .text {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 25px;
}
body.light .salesBlockMobile .blockLogo .text {
    color: #000;
}
.salesBlockMobile .blockLogo img {
    height: 25px;
}
body.light .salesBlockMobile .blockLogo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
.salesBlockMobile .blockDetail {
    width: 100%;
    position: relative;
    padding-top: 10px;
    border-top: 2px solid var(--borderColor2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body.light .salesBlockMobile .blockDetail {
    border-top: 2px solid var(--borderColor);
}
.salesBlockMobile .blockDetail .blockButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    background: #343891;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}
.salesBlockMobile .blockDetail .blockButton h3 {
    color: #fff;
    font-size: 12px;
}
.web.salesBlockMobile .blockDetail .blockButton h3 {
    font-size: 12px;
}
.salesBlockMobile .blockDetail .blockButton h3:before {
    display: none;
}
.salesBlockMobile .blockDetail .blockButton h3.char,
.salesBlockMobile .blockDetail .blockButton h3.gb {
    color: var(--darkBlue);
}
.salesBlockMobile .blockDetail .blockButton.gb {
    background: #e9b535;
}
.salesBlockMobile .blockDetail .blockButton.gb h3 {
    color: #0a0b10;
}
.salesBlockMobile .blockDetail .blockButton.char {
    background: #80f1b1;
}
.salesBlockMobile .blockDetail .blockButton.char h3 {
    color: #343891;
}
@media (min-width: 576px) {
    .salesBlockMobile .blockDetail .blockButton:hover {
        transform: scale(1.2);
        transition: all 0.2s ease-in-out 0s;
    }
}
.salesBlockMobile .blockDetail h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    text-align: center;
    white-space: nowrap;
    position: relative;
    text-decoration: underline;
}
.web.salesBlockMobile .blockDetail h3 {
    font-size: 12px;
}
.salesBlockMobile .blockDetail h3:before {
    content: "";
    width: 0;
    height: 20px;
    border-right: 2px solid var(--borderColor2);
    position: absolute;
    top: 50%;
    right: -6.5px;
    transform: translateY(-50%);
}
body.light .salesBlockMobile .blockDetail h3:before {
    border-right: 2px solid var(--borderColor);
}
.salesBlockMobile .blockDetail h3.gb {
    color: #e9b535;
}
.salesBlockMobile .blockDetail h3.char {
    color: var(--darkGreen);
}
.salesBlockMobile .blockDetail h3.last:before {
    display: none;
}
.salesBlockWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
}
.salesBlockWrapper:hover {
    filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.9));
    z-index: 2;
    transition: all 0.3s;
}
.salesBlockWebArea {
    flex-direction: column;
    gap: 15px;
}
.salesBlockWeb,
.salesBlockWebArea {
    width: 100%;
    position: relative;
    display: flex;
}
.salesBlockWeb {
    padding: 10px;
    align-items: center;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}
.salesBlockWeb:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);

}
.salesBlockWeb .blockLogo {
    width: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.salesBlockWeb .blockLogo img {
    height: 25px;
}
.salesBlockWeb .blockDetail {
    width: calc(100% - 100px);
    position: relative;
    border-left: 2px solid var(--borderColor2);
    padding: 10px 0 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.salesBlockWeb .blockDetail h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    text-align: center;
    white-space: nowrap;
    position: relative;
}
.salesBlockWeb .blockDetail h3:before {
    content: "";
    width: 0;
    height: 20px;
    border-right: 2px solid var(--borderColor2);
    position: absolute;
    top: 50%;
    right: -6.5px;
    transform: translateY(-50%);
}
.salesBlockWeb .blockDetail h3.gb {
    color: #e9b535;
}
.salesBlockWeb .blockDetail h3.char {
    color: var(--darkGreen);
}
.salesBlockWeb .blockDetail h3.last:before {
    display: none;
}
.gamesArea {
    width: 100%;
    position: relative;
    margin-top: 2rem;
}
@media (max-width: 576px) {
    .gamesArea {
        margin-top: 30px;
    }
}
.row-cols-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
}
@media (min-width: 1400px) {
    .row-cols-xxl-8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }
}
@media (min-width: 1200px) {
    .row-cols-xl-8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }
}
@media (min-width: 992px) {
    .row-cols-lg-8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }
}
@media (min-width: 768px) {
    .row-cols-md-8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }
}
.popularGamesArea {
    width: 100%;
    position: relative;
    min-height: 345.23px !important;
}
#popularGames {
    width: calc(100% + 30px);
    min-height: 345.23px !important;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -20px;
    z-index: 3;
}
#popularGames.owl-carousel.owl-drag .owl-item {
    padding: 50px 0 40px;
    min-height: 345.23px !important;
}
@media (max-width: 576px) {
    #popularGames {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}
#popularSellers.owl-carousel.owl-drag .owl-item {
    padding: 0 0 20px;
}
.bestSellingProductsArea {
    width: 100%;
    position: relative;
    min-height: 315.05px !important;
}
#bestSellingProducts.owl-carousel.owl-drag .owl-item {
    padding: 0 0 20px;
}
#streamersCarousel.owl-carousel.owl-drag .owl-item {
    padding: 10px 0;
}
.brandsCarouselArea {
    width: 100%;
    position: relative;
    min-height: 67.3px;
}
body.light .brandsLogo {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
@media (max-width: 576px) {
    #bestSellingProducts.owl-carousel.owl-drag .owl-item,
    #popularSellers.owl-carousel.owl-drag .owl-item {
        padding: 8px 0;
    }
}
#turkeyMap,
.mapTitle {
    width: 100%;
    position: relative;
}
.mapTitle {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: #c8c9d8;
}
.city {
    fill: #20212b;
    fill-opacity: 1;
    stroke: #606278;
    stroke-opacity: 1;
    stroke-width: 1;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
.city.active,
.city:hover {
    fill: #343891;
    stroke: #282b78;
}
.showCityName {
    background-color: #80f1b1;
    border-radius: 5px;
    color: #343891;
    position: absolute;
    padding: 10px 15px;
    opacity: 0;
    visibility: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.showCityName.active {
    opacity: 1;
    visibility: visible;
}
.sellerApplicationArea {
    width: 100%;
    position: relative;
    background: url(../images/steam-seler-bg.jpg) no-repeat 50% transparent;
    background-size: cover;
    padding: 50px 0;
}
.sellerApplicationArea:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(32, 33, 42, 0.9), #20212a);
    backdrop-filter: blur(2px);
}
.titleArea h2,
.titleArea h3 {
    background: #20212b;
    font-weight: 400;
    color: #c8c9d8;
}
.formGroup .formControl {
    width: 100%;
    background: #111117;
    border: 2px solid #333444;
    padding: 7px 15px;
    border-radius: 5px;
}
.mini.formGroup .formControl {
    padding: 5px 10px;
}
.formGroup .formControl::placeholder {
    color: #abacb5;
}
.formGroup .inputPhoneGroup input {
    width: calc(100% - 120px);
    border-radius: 0 5px 5px 0;
}
.formGroup .inputPhoneGroup .select2-container--default .select2-selection--single {
    border-radius: 5px 0 0 5px;
    border-right: none;
}
.formGroup.withIcon .formControl {
    padding-right: 50px;
}
.mini.formGroup.withIcon .formControl {
    padding-right: 30px;
}
.formGroup.withIcon .icon {
    background: #333444;
    color: #80f1b1;
}
.formGroup.withPrefix .formControl {
    border-radius: 0 5px 5px 0;
    border-left: none;
}
.formGroup.withPrefix .prefix .prefixText {
    background: #80f1b1;
    color: #343891;
    border: 2px solid #248a50;
}
.formGroup.withPrice .price .formControl:first-child {
    width: calc(100% - 40px);
    border-radius: 5px 0 0 5px;
    border-right: none;
    padding-right: 5px;
}
.formGroup.withPrice .price .formControl:nth-child(2) {
    width: 40px;
    border-radius: 0 5px 5px 0;
    border-left: none;
    padding-left: 5px;
    padding-right: 5px;
}
.formGroup.withPrice .price:before {
    color: #c8c9d8;
}
.withIcon.formGroup.withPrice .price .formControl:first-child {
    width: calc(100% - 80px);
}
.withIcon.formGroup.withPrice .price .formControl:nth-child(2) {
    width: 80px;
}
.file-upload {
    display: block;
    text-align: center;
    font-size: 12px;
}
.file-upload .file-select {
    display: block;
    border: 2px solid #333444;
    color: #fff;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background: #111117;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
}
.file-upload .file-select .file-select-button {
    background: #343891;
    height: 40px;
    cursor: pointer;
}
.file-upload .file-select .file-select-button,
.file-upload .file-select .file-select-name {
    padding: 0 10px;
    display: inline-block;
    line-height: 40px;
}
.file-upload .file-select:hover {
    border-color: #282b78;
}
.file-upload .file-select:hover,
.file-upload .file-select:hover .file-select-button {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button {
    background: #282b78;
    color: #fff;
    cursor: pointer;
}
.active.file-upload .file-select {
    border-color: #3fa46a;
}
.active.file-upload .file-select,
.active.file-upload .file-select .file-select-button {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.active.file-upload .file-select .file-select-button {
    background: #3fa46a;
    color: #fff;
}
.file-upload .file-select input[type="file"] {
    z-index: 100;
    cursor: pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
.file-upload .file-select.file-select-disabled {
    opacity: 0.65;
}
.file-upload .file-select.file-select-disabled:hover {
    cursor: default;
    display: block;
    border: 2px solid #dce4ec;
    color: #34495e;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    text-align: left;
    background: #fff;
    overflow: hidden;
    position: relative;
}
.file-upload .file-select.file-select-disabled:hover .file-select-button {
    background: #dce4ec;
    color: #666;
    padding: 0 10px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
}
.file-upload .file-select.file-select-disabled:hover .file-select-name {
    line-height: 40px;
    display: inline-block;
    padding: 0 10px;
}
.sellerDetail {
    width: 100%;
    position: relative;
    color: #c8c9d8;
    font-size: 15px;
    letter-spacing: 1px;
}
.ms-videogallery-template {
    padding-bottom: 90px;
    width: 100%;
    margin: 0 auto;
}
.ms-videogallery-template.ms-videogallery-vertical-template {
    max-width: 861px;
    padding-right: 290px;
    padding-bottom: 0 !important;
    margin: 0 auto;
}
.ms-videogallery-template .ms-layer.video-title {
    font-weight: 300;
    background: #1f1f1f;
    color: #fff;
    padding: 11px;
    text-transform: uppercase;
}
.ms-videogallery-template .ms-layer.video-author {
    background: #fff;
    padding: 4px 10px;
    font-size: 14px;
}
.ms-videogallery-template .ms-thumb-list.ms-dir-h {
    bottom: auto;
    height: auto;
}
.ms-videogallery-template .ms-thumb-list.ms-dir-v {
    height: 100%;
    width: 280px;
    right: -290px;
    top: 0;
}
.ms-videogallery-template .ms-thumb-frame {
    cursor: pointer;
    float: left;
    text-shadow: 0 1px 1px #fff;
    color: #222;
    font-weight: 300;
    position: relative;
    overflow: visible;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.ms-videogallery-template .ms-thumb-list.ms-dir-h .ms-thumb-frame {
    width: 110px;
    height: auto;
    margin: 10px 10px 0 0;
}
.ms-videogallery-template .ms-thumb-list.ms-dir-v .ms-thumb-frame {
    width: 280px;
    height: 78px;
    margin-bottom: 10px;
}
.ms-thumb-list.ms-dir-v .ms-thumb-frame img {
    width: 140px;
    float: left;
}
.ms-videogallery-template .ms-thumb {
    text-align: center;
}
.ms-videogallery-template .ms-thumb-frame h3 {
    font-weight: 400;
    font-size: 10pt;
    margin: 10px 0 0;
    text-transform: uppercase;
}
.ms-videogallery-template .ms-thumb-frame p {
    font-size: 10pt;
    margin: 4px 0;
}
.ms-videogallery-template .ms-thumb-frame-selected {
    opacity: 1;
}
.ms-videogallery-template .ms-thumb-ol {
    width: 110px;
    background: #000;
    opacity: 0.5;
    height: 119px;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.ms-videogallery-template .ms-thumb-list.ms-dir-v .ms-thumb-ol {
    width: 140px;
    height: 78px;
}
.ms-videogallery-template .ms-thumb-frame-selected .ms-thumb-ol {
    opacity: 0;
}
.ms-videogallery-template .ms-ie7 .ms-thumb-ol,
.ms-videogallery-template .ms-ie8 .ms-thumb-ol {
    display: none;
}
.ms-videogallery-template .ms-thumb-list.ms-dir-v .ms-thumb-frame h3 {
    float: left;
    height: 68px;
    width: 100px;
    margin: 0 10px;
    text-align: left;
}
@media (max-width: 600px) {
    .ms-videogallery-template {
        padding-bottom: 135px;
    }
    .ms-videogallery-template .ms-thumb-list.ms-dir-h .ms-thumb-frame {
        width: 100px;
    }
    .ms-videogallery-template .ms-thumb-list.ms-dir-h .ms-thumb-ol {
        width: 100px;
        height: 56px;
    }
    .ms-videogallery-template .ms-thumb-list.ms-dir-v .ms-thumb-frame {
        width: 240px;
        height: 58px;
    }
    .ms-videogallery-template .ms-thumb-list.ms-dir-v .ms-thumb-frame img {
        width: 100px;
    }
    .ms-videogallery-template .ms-thumb-list.ms-dir-v .ms-thumb-ol {
        width: 100px;
        height: 56px;
    }
    .ms-videogallery-template.ms-videogallery-vertical-template {
        padding-right: 250px;
    }
    .ms-videogallery-template .ms-thumb-list.ms-dir-v {
        width: 240px;
        right: -250px;
    }
}
@media (max-width: 400px) {
    .ms-videogallery-template .ms-thumb-list.ms-dir-v {
        display: none;
    }
    .ms-videogallery-template.ms-videogallery-vertical-template {
        padding-right: 0;
    }
}
.orderDetailHead {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 15px;
}
.orderDetailHead .detailImg {
    width: 45px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
}
.orderDetailHead .detailImg img {
    width: 100%;
    position: relative;
}
.orderDetailHead .detailImg.icon {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #343891;
    color: #fff;
    font-size: 20px;
}
@media (max-width: 576px) {
    .orderDetailHead .detailImg {
        width: 30px;
        height: 30px;
    }
}
.orderDetailHead .detailInfo {
    display: inline-flex;
    position: relative;
}
.orderDetailHead .detailInfo h3 {
    display: inline-block;
    margin: 0;
    line-height: 1;
}
.orderDetailHead .detailInfo p {
    font-size: 12px;
    color: var(--textColor);
    display: inline-block;
    margin: 5px 0 0;
    line-height: 1;
}
@media (max-width: 576px) {
    .orderDetailHead .detailInfo h3 {
        font-size: 12px;
    }
    .orderDetailHead .detailInfo p {
        font-size: 10px;
    }
}
@media (max-width: 1300px) {
    .orderDetailHead {
        width: 70%;
    }
}
@media (max-width: 576px) {
    .orderDetailHead {
        width: 100%;
    }
}
@media (max-width: 576px) {
    .orderRightBox {
        width: 100%;
        position: relative;
    }
}
.orderDetailPrice,
.orderDetailResult {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .orderDetailPrice,
    .orderDetailResult {
        font-size: 12px;
    }
}
.orderDetailPrice strong {
    color: var(--darkGreen);
    font-size: 18px;
    font-weight: 600;
}
@media (max-width: 576px) {
    .orderDetailPrice span {
        display: none;
    }
}
.orderDetailResult .result {
    padding: 5px 20px 5px 30px;
    font-size: 15px;
    font-weight: 500;
    color: var(--textColor);
    line-height: 1;
    border-radius: 50px;
    display: inline-flex;
    position: relative;
}
@media (max-width: 576px) {
    .orderDetailResult .result {
        font-size: 12px;
    }
}
.orderDetailResult .result .icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.orderDetailResult .result.success {
    background: #80f1b1;
    color: #343891;
}
.orderDetailResult .result.success .icon {
    background: #34c974;
    color: #1c440c;
}
.orderDetailResult .result.primary {
    background: #343891;
    color: #fff;
}
.orderDetailResult .result.primary .icon {
    background: #282b78;
    color: #fff;
}
.orderDetailResult .result.warning {
    background: #ce1e1e;
    color: #fff;
}
.orderDetailResult .result.warning .icon {
    background: #9c0707;
    color: #fff;
}
.innerTitle {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borderColor);
}
.innerTitle h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--textColor);
    display: inline-block;
    margin: 0;
}
.innerTitle .titleButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--textColor);
    padding: 5px 15px;
    background: var(--background);
    border-radius: 50px;
    transition: all 0.2s ease-in-out 0s;
}
@media (max-width: 576px) {
    .innerTitle .titleButton {
        font-size: 11px;
    }
}
.innerTitle .titleButton i {
    color: var(--darkGreen);
    font-size: 14px;
}
.innerTitle .titleButton.copied,
.innerTitle .titleButton:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out 0s;
}
.innerTitle .titleButton.copied i,
.innerTitle .titleButton:hover i {
    color: var(--darkBlue);
}
@media (max-width: 576px) {
    .innerTitle {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}
@media (max-width: 380px) {
    .innerTitle .titleButton {
        padding: 5px 10px;
    }
}
@media (max-width: 340px) {
    .innerTitle .titleButton {
        font-size: 10px;
        gap: 5px;
    }
}
.textareaStyle {
    width: 100%;
    position: relative;
    background: var(--background);
    font-size: 14px;
    color: var(--textColor);
    border-radius: 7px;
    border: 1px solid var(--borderColor);
    padding: 10px;
}
.textareaStyle:focus {
    outline: none;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
}
.orderDetailWarning {
    font-size: 16px;
    color: #e3b21a;
}
.personInfo {
    flex-direction: column;
}
.personInfo,
.personInfo .personInfoItem {
    width: 100%;
    position: relative;
    display: flex;
}
.personInfo .personInfoItem {
    padding: 5px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--borderColor2);
}
.personInfo .personInfoItem:last-child {
    border: none;
}
.personInfo .personInfoItem .personInfoItemIcon {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cardBackgroundDark);
    color: var(--darkGreen);
    font-size: 15px;
    border-radius: 50%;
}
.personInfo .personInfoItem .personInfoItemDetail {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.personInfo .personInfoItem .personInfoItemDetail .title {
    width: 160px;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
}
.personInfo .personInfoItem .personInfoItemDetail .title:before {
    content: ":";
    width: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--darkGreen);
    font-weight: 400;
}
.personInfo .personInfoItem .personInfoItemDetail .value {
    font-size: 14px;
    font-weight: 500;
    color: var(--textColor);
    padding-left: 10px;
}
@media (max-width: 1199px) {
    .personInfo .personInfoItem .personInfoItemDetail {
        flex-wrap: wrap;
        gap: 2px;
    }
    .personInfo .personInfoItem .personInfoItemDetail .title {
        width: 100%;
    }
    .personInfo .personInfoItem .personInfoItemDetail .title:before {
        display: none;
    }
    .personInfo .personInfoItem .personInfoItemDetail .value {
        width: 100%;
        padding-left: 0;
    }
}
@media (max-width: 991px) {
    .personInfo .personInfoItem .personInfoItemDetail {
        flex-wrap: nowrap;
        gap: 15px;
    }
    .personInfo .personInfoItem .personInfoItemDetail .title {
        width: 160px;
    }
    .personInfo .personInfoItem .personInfoItemDetail .title:before {
        display: block;
    }
    .personInfo .personInfoItem .personInfoItemDetail .value {
        width: auto;
        padding-left: 10px;
    }
}
@media (max-width: 576px) {
    .personInfo .personInfoItem .personInfoItemDetail {
        flex-wrap: wrap;
        gap: 2px;
    }
    .personInfo .personInfoItem .personInfoItemDetail .title {
        width: 100%;
    }
    .personInfo .personInfoItem .personInfoItemDetail .title:before {
        display: none;
    }
    .personInfo .personInfoItem .personInfoItemDetail .value {
        width: 100%;
        padding-left: 0;
    }
}
.howToUseModalBody img {
    max-width: 100%;
}
.headerBasketButton {
    position: relative;
}
.headerBasketButton .buttonBg {
    width: 50px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--darkGreen);
    font-size: 14px;
    background: var(--borderColor);
    clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
}
.headerBasketButton .buttonBg:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 0);
    z-index: 1;
}
.headerBasketButton .buttonBg i {
    pointer-events: none;
    position: relative;
    z-index: 2;
}
.headerBasketButton .basketAmount {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: -10px;
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-radius: 50%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    z-index: 2;
}
.headerBasketButton .basketAmount:hover {
    background: var(--darkBlue);
    color: var(--darkGreen);
}
.basketAmountMobile {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-radius: 50%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    z-index: 2;
}
.basketAmountMobile:hover {
    background: var(--darkBlue);
    color: var(--darkGreen);
}
.offcanvas {
    background: var(--background);
}
.offcanvas h5 {
    color: var(--textColor);
}
@media (max-width: 576px) {
    .offcanvas {
        clip-path: none;
    }
}
.headerBasketItemsCount {
    position: relative;
}
.basketItemsCount,
.headerBasketItemsCount {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background: var(--darkBlue);
    color: var(--darkGreen);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.basketItemsCount {
    position: absolute;
    top: -5px;
    right: -35px;
}
.headerBasketArea {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.headerBasketArea,
.headerBasketBody {
    width: 100%;
    height: 100%;
    position: relative;
}
.headerBasketItems {
    width: calc(100% + 32px);
    height: 290px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
    padding: 10px;
    margin-left: -16px;
    margin-right: -16px;
    background: var(--otherColor1);
}
.basketItem {
    width: 100%;
    position: relative;
    display: flex;
    border-radius: 7px;
    filter: drop-shadow(0 7px 15px rgba(0, 0, 0, 0.15));
    padding: 0.5rem;
}
.basketItem:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(19, 22, 47, 0.6);
    border-radius: 0.325rem;
}
.basketItem .basketItemImage {
    width: 100px;
    position: relative;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
    border-radius: 0.325rem;
}
.basketItem .basketItemImage img {
    width: 100%;
    position: relative;
    border-radius: 0.325rem;
}
.basketItem .basketItemInfo {
    width: calc(100% - 80px);
    position: relative;
    padding: 10px 15px;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
}
.summary.basketItem .basketItemInfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.basketItem .basketItemInfo h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--textColor);
    margin: 0 0 10px;
    padding: 0;
}
.basketItem .basketItemInfo h3 a {
    color: var(--textColor);
}
.summary.basketItem .basketItemInfo h3 {
    margin: 0;
    font-size: 17px;
}
@media (max-width: 576px) {
    .summary.basketItem .basketItemInfo h3 {
        font-size: 14px;
        margin: 0 0 10px;
    }
}
.basketItem .basketItemInfo .basketNavigateArea {
    display: inline-flex;
    align-items: center;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--borderColor);
    color: var(--textColor);
    transition: all 0.2s ease-in-out 0s;
    position: relative;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus {
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus:before,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    transition: all 0.2s ease-in-out 0s;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus:before {
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus:before {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus.isDisable,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus.isDisable {
    pointer-events: none;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus:hover,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus:hover {
    background: var(--darkGreenDark);
    color: var(--darkBlue);
    border-color: var(--darkGreenDark);
    transition: all 0.2s ease-in-out 0s;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus:hover:before,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus:hover:before {
    background: var(--darkGreen);
    transition: all 0.2s ease-in-out 0s;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus i,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus i {
    pointer-events: none;
    position: relative;
}
.summary.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus,
.summary.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus {
    width: 50px;
    height: 40px;
}
@media (max-width: 576px) {
    .summary.basketItem .basketItemInfo .basketNavigateArea .basketNavigateMinus,
    .summary.basketItem .basketItemInfo .basketNavigateArea .basketNavigatePlus {
        width: 30px;
        height: 30px;
    }
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateInput {
    width: 38px;
    height: 30px;
    border-top: 2px solid var(--borderColor);
    border-bottom: 2px solid var(--borderColor);
    font-size: 14px;
    color: var(--textColor);
    background: var(--background);
    line-height: 30px;
    text-align: center;
    border-left: none;
    border-right: none;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateInput:focus {
    outline: none;
    box-shadow: none;
}
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateInput::-webkit-inner-spin-button,
.basketItem .basketItemInfo .basketNavigateArea .basketNavigateInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}
.summary.basketItem .basketItemInfo .basketNavigateArea .basketNavigateInput {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
}
@media (max-width: 576px) {
    .summary.basketItem .basketItemInfo .basketNavigateArea .basketNavigateInput {
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 400;
    }
}
.basketItem .basketItemInfo .basketItemPrice {
    font-size: 20px;
    font-weight: 600;
    color: #f9ca24;
}
@media (max-width: 576px) {
    .basketItem .basketItemInfo .basketItemPrice {
        font-size: 14px;
    }
}
.basketItem .basketItemInfo .basketRemoveButton {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 0;
    right: 10px;
    border: none;
    background: #292f49;
    border-radius: 50%;
    font-size: 16px;
    color: #9daad4;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out 0s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.basketItem .basketItemInfo .basketRemoveButton:hover {
    color: #eb4d4b;
    transition: all 0.2s ease-in-out 0s;
}
.headerBasketOtherItems {
    width: 100%;
    position: relative;
    padding: 10px 0 20px;
    border-bottom: 1px solid var(--borderColor);
}
.titleArea h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--textColor);
    margin: 0;
    padding: 0;
}
.light.titleArea h3 {
    margin: auto;
    padding: auto;
}
.titleArea .titleAreaButtons {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}
.titleArea .titleAreaButtons .circleButton {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid var(--borderColor);
    color: var(--textColor);
    border-radius: 50%;
    transition: all 0.2s ease-in-out 0s;
}
.titleArea .titleAreaButtons .circleButton:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-color: var(--darkGreen);
    transition: all 0.2s ease-in-out 0s;
}
.hoverSuccessButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid var(--borderColor);
    border-radius: 50px;
    color: var(--textColor);
    transition: all 0.2s ease-in-out 0s;
    padding: 7px 15px;
    line-height: 1;
}
.hoverSuccessButton:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-color: var(--darkGreen);
    transition: all 0.2s ease-in-out 0s;
}
#mayAlsoLikeProducts.owl-carousel .owl-stage-outer {
    padding-bottom: 0;
}
.basketOrderDetailList {
    display: inline-flex;
    border-radius: 7px;
    border: 2px solid var(--borderColor);
    position: relative;
}
.basketOrderDetailList .basketOrderDetail {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--textColor);
    border-right: 2px solid var(--borderColor);
    position: relative;
}
.basketOrderDetailList .basketOrderDetail:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-color: var(--darkGreen);
    transition: all 0.2s ease-in-out 0s;
}
.basketOrderDetailList .basketOrderDetail:first-child {
    border-radius: 7px 0 0 7px;
}
.basketOrderDetailList .basketOrderDetail:last-child {
    border-right: none !important;
    border-radius: 0 7px 7px 0;
}
.headerBasketDetail {
    width: 100%;
    position: relative;
    border-top: 1px solid #232849;
}
.headerBasketDetail h3 {
    font-size: 18px;
    color: var(--textColor);
    margin: 0;
}
.headerBasketDetail h4 {
    font-size: 14px;
    font-weight: 400;
    color: var(--textColor);
    margin: 0;
}
.headerBasketDetail .headerBasketTotalPrice {
    font-size: 20px;
    font-weight: 600;
    color: var(--darkGreen);
}
.headerBasketDetail .headerBasketUserPrice {
    font-size: 17px;
    font-weight: 500;
    color: var(--darkGreen);
}
body.streamer-on .headerBasketDetail .headerBasketUserPrice.balance {
    filter: blur(4px);
}
.basketButton {
    width: 100%;
    position: relative;
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background: var(--cardBackground);
    border: 2px solid var(--borderColor);
}
.basketButton,
.basketButton:hover {
    color: var(--linkText);
    transition: all 0.2s ease-in-out 0s;
}
.basketButton:hover {
    background: var(--hoverDark);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
}
.basketButton.buttonPrimary {
    background: var(--darkBlue);
    color: var(--linkText) !important;
    border-color: var(--darkBlue);
}
.basketButton.buttonPrimary:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-color: var(--darkGreen);
    transition: all 0.2s ease-in-out 0s;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
}
.offCanvasModalArea.modalOpen:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.offCanvasModal {
    width: 100%;
    position: absolute;
    bottom: -100px;
    left: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    padding: 25px;
    background: var(--cardBackground);
    gap: 5px;
    box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.25);
    z-index: 3;
    visibility: hidden;
    transition: all 0.3s ease-in-out 0s;
}
.offCanvasModal.modalOpen {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out 0s;
}
.offCanvasModal label {
    width: 100%;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
    display: flex;
    align-items: center;
    gap: 10px;
}
.offCanvasModal label i {
    font-size: 18px;
}
.offCanvasModal input,
.offCanvasModal textarea {
    width: 100%;
    position: relative;
    padding: 7px;
    font-size: 14px;
    color: var(--textColor);
    border: 2px solid var(--borderColor);
    background: var(--background);
}
.offCanvasModal input:focus,
.offCanvasModal textarea:focus {
    outline: none;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.2);
}
.offCanvasModal.modalOpen:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(32, 33, 43, 0.6);
    display: none;
    top: 0;
    left: 0;
    z-index: 2;
}
body.light .offCanvasModal.modalOpen:before {
    background: hsla(0, 0%, 100%, 0.6);
}
.creditCardArea {
    width: 100%;
    position: relative;
    min-height: 100%;
    background: var(--cardBackground);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
    clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.creditCardArea.summary {
    background: var(--cardBackgroundLight);
}
.creditCardArea .areaHeader {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-bottom: 2px solid var(--borderColor2);
}
.creditCardArea .areaHeader h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 1;
    margin: 0;
}
.creditCardArea .areaBody {
    padding: 15px;
    min-height: 100%;
}
.creditCardArea .areaBody .summaryItems {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 270px;
    padding-right: 10px;
}
@media (max-width: 576px) {
    .mobileW100 {
        width: 100%;
    }
}
.panel-heading {
    padding: 0;
    border: 0;
}
.accordion-item {
    background: transparent;
    color: var(--textColor);
    border-radius: 0;
    margin-bottom: 10px;
    border: none;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.accordion-button {
    background: var(--cardBackground);
    font-size: 14px;
    color: #fff !important;
    padding: 20px 20px 20px 90px !important;
    clip-path: none;
}
.accordion-button.collapsed {
    padding: 20px 20px 20px 80px !important;
    color: var(--textColor) !important;
}
body.light .accordion-button.collapsed:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000000' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.accordion-button:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
@media (max-width: 576px) {
    .accordion-button:after {
        display: none;
    }
}
.accordion-button:focus {
    outline: none;
    box-shadow: none;
}
.accordion-button:hover {
    background: var(--cardBackgroundLight);
}
.accordion-button .groupIcon {
    width: 80px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #282b78;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    clip-path: polygon(calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 0 0);
}
.accordion-button .groupIcon img {
    width: 55px;
    margin-left: -10px;
}
.collapsed.accordion-button .groupIcon {
    width: 70px;
    background: var(--cardBackgroundDark);
    color: var(--textColor);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
.collapsed.accordion-button .groupIcon img {
    margin-left: 0;
}
body.light .collapsed.accordion-button .groupIcon img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
@media (max-width: 1099px) {
    .accordion-button {
        flex-direction: row !important;
    }
}
.accordion-button.payMethodTabMobile,
.accordion-button.payMethodTabMobile.collapsed {
    padding: 10px !important;
}
.accordion-button {
    border-bottom: none !important;
}
.accordion-button.fastConfirmation .groupIcon {
    background: #28a745;
}
.accordion-button.fastConfirmation .groupIcon img {
    filter: none !important;
}
.accordion-button:not(.collapsed) {
    background: #343891;
    color: #fff;
    box-shadow: none;
}
.accordion-button:not(.collapsed):after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
@media (max-width: 1099px) {
    .accordion-button:not(.collapsed) {
        flex-direction: row;
    }
}
@media (max-width: 576px) {
    .accordion-button:not(.collapsed) {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}
.accordion-collapse {
    clip-path: none;
}
.accordion-collapse.show {

}
.accordion-body {
    padding: 15px;
    font-size: 12px;
}
.accordion-item:first-of-type,
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.payInfoBox {
    width: 100%;
    position: relative;
    transition: all 0.2s;
}
.payInfoBox.sticky {
    position: sticky;
    top: 20px;
    transition: all 0.2s;
}
.slideThree {
    width: 100px;
    height: 26px;
    background: var(--background);
    margin: 0;
    position: relative;
    border-radius: 50px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 hsla(0, 0%, 100%, 0.2);
}
.slideThree:after {
    content: "PASİF";
    color: #cf1f1f;
    right: 10px;
}
.slideThree:after,
.slideThree:before {
    position: absolute;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: 700;
}
.slideThree:before {
    content: "AKTİF";
    color: var(--darkGreen);
    left: 10px;
}
.slideThree label {
    display: block;
    width: 45px;
    height: 19px;
    cursor: pointer;
    position: absolute;
    top: 4px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: linear-gradient(180deg, #cf1f1f 0, #b91111 40%, #9b0707);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
}
.slideThree input[type="checkbox"] {
    visibility: hidden;
}
.slideThree input[type="checkbox"]:checked + label {
    left: 51px;
    background: linear-gradient(180deg, #80f1b1 0, #5fc78f 40%, #429e71);
}
.payMethodTabs {
    width: 100%;
    position: relative;
}
.payMethodTabs .payMethodTab {
    width: 100%;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 5px;
    overflow: hidden;
    padding: 10px;
    background: var(--borderColor);
    transition: all 0.2s ease-in-out 0s;
    cursor: pointer;
    clip-path: polygon(calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%, 0 0);
}
.payMethodTabs .payMethodTab.active {
    background: var(--darkGreenDark);
}
.payMethodTabs .payMethodTab.active:before {
    background: var(--darkGreen);
}
.payMethodTabs .payMethodTab.active .icon {
    background: #53b380;
    color: #343891;
}
.payMethodTabs .payMethodTab.active h3 {
    color: var(--darkBlue);
}
.payMethodTabs .payMethodTab:hover {
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease-in-out 0s;
}
.payMethodTabs .payMethodTab:hover:after {
    width: 400px;
    height: 400px;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
}
.payMethodTabs .payMethodTab:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    left: 2px;
    top: 2px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 0);
}
.payMethodTabs .payMethodTab:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 200px hsla(0, 0%, 100%, 0.3);
    border-radius: 50%;
    opacity: 0;
}
.payMethodTabs .payMethodTab .icon {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--darkGreen);
    background: var(--background);
    border-radius: 50%;
}
.payMethodTabs .payMethodTab h3 {
    width: 100%;
    position: relative;
    text-align: center;
    color: var(--textColor);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    white-space: normal;
}
.payMethodTabDetail {
    width: 100%;
    position: relative;
    display: none;
    color: var(--textColor);
    margin-top: 20px;
}
.payMethodTabDetail.active {
    display: block;
}
@media (max-width: 1200px) {
    .payMethodTabs {
        gap: 10px;
    }
    .payMethodTabs .payMethodTab {
        min-width: 140px;
        align-self: stretch;
        gap: 6px;
        justify-content: center;
    }
    .payMethodTabs .payMethodTab .icon {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
    .payMethodTabs .payMethodTab h3 {
        white-space: break-spaces;
        font-size: 13px;
    }
}
.inputPrice {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 7px;
    border: 1px solid var(--borderColor);
}
.inputPrice:before {
    content: ",";
    position: absolute;
    right: 80px;
    bottom: 10px;
    color: var(--textColor);
}
.inputPrice input {
    background: var(--background);
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    font-size: 14px;
    color: var(--textColor);
    border: var(--background);
}
.inputPrice input:focus {
    outline: none;
    background: #14141a;
}
.inputPrice input:first-child {
    text-align: right;
    width: calc(100% - 80px);
    border-radius: 7px 0 0 7px;
    padding-right: 10px;
}
.inputPrice input:nth-child(2) {
    width: 40px;
    text-align: left;
}
.inputPrice input span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333444;
    color: #fff;
    font-size: 17px;
    border-radius: 0 7px 7px 0;
}
.br-7 {
    border-radius: 7px;
}
.inputNormal {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.inputNormal label {
    font-size: 14px;
    font-weight: 500;
    margin: 0 !important;
}
.inputNormal input,
.inputNormal label {
    width: 100%;
    position: relative;
    color: var(--textColor);
}
.inputNormal input {
    height: 40px;
    padding: 0 15px;
    line-height: 40px;
    background: var(--background);
    border: 1px solid #333444;
    border-radius: 7px;
}
.inputNormal input:focus {
    outline: none;
    background: #14141a;
}
.dark.inputNormal input {
    background: var(--backgroundDark);
    color: var(--textColor);
}
.dark.inputNormal input:focus {
    outline: none;
    background: #09090b;
}
.balanceInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--cardBackground);
    border-radius: 10px;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
    clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
body.light .balanceInfo {
    box-shadow: none;
}
.balanceInfo.payMobile {
    clip-path: none;
    box-shadow: none;
}
.balanceInfo .balanceInfoIcon {
    padding: 30px 40px;
    border-radius: 10px 0 0 10px;
}
.balanceInfo .balanceInfoIcon,
.pay.balanceInfo .balanceInfoIcon {
    position: relative;
    font-size: 25px;
    background: var(--cardBackgroundLight);
    color: #c8c9d8;
    line-height: 1;
    min-height: 100%;
    align-self: stretch;
}
.pay.balanceInfo .balanceInfoIcon {
    width: 215px;
    display: flex;
    align-items: center;
    padding: 50px 40px;
    border-radius: 5px 0 0 5px;
}
.transfer.pay.balanceInfo .balanceInfoIcon {
    width: 380px;
}
body.light .pay.balanceInfo .balanceInfoIcon {
    background: #343891;
}
.payMobile.balanceInfo .balanceInfoIcon {
    width: 100% !important;
    display: flex;
    justify-content: space-between !important;
}
.payMobile.balanceInfo .balanceInfoIcon img:nth-child(2) {
    width: auto;
    height: 14px;
}
.balanceInfo .balanceInfoIcon img {
    width: 100%;
}
.balanceInfo .balanceInfoIcon i {
    color: var(--darkGreen);
    font-size: 35px;
}
@media (max-width: 1399px) {
    .balanceInfo .balanceInfoIcon {
        padding: 37px 15px;
    }
    .balanceInfo .balanceInfoIcon i {
        font-size: 20px;
    }
}
.balanceInfo .balanceInfoDetail {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 0 10px 10px 0;
    padding: 0 20px;
}
@media (max-width: 576px) {
    .balanceInfo .balanceInfoDetail {
        flex-direction: column;
        padding: 15px;
    }
    .balanceInfo .balanceInfoDetail .payButtons {
        width: 100%;
    }
}
.balanceInfo .balanceInfoDetail .balanceInfoItem {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
.balanceInfo .balanceInfoDetail .balanceInfoItem:first-child:before {
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: -5px;
    border-right: 1px solid var(--borderColor);
}
.balanceInfo .balanceInfoDetail .balanceInfoItem h3 {
    margin: 0;
    font-size: 13px;
    color: var(--textColor);
    font-weight: 600;
}
.balanceInfo .balanceInfoDetail .balanceInfoItem .balanceInfoItemPrice {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: var(--darkGreen);
}
.balanceInfo .balanceInfoDetail .balanceInfoItem label {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 13px;
}
.balanceInfo .balanceInfoDetail .form-control {
    background: var(--backgroundDark);
    color: var(--textColor);
}
.balanceInfo .balanceInfoDetail .desc {
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--borderColor);
}
@media (max-width: 576px) {
    .balanceInfo {
        flex-wrap: wrap;
    }
    .balanceInfo .balanceInfoIcon {
        width: 100%;
        min-height: auto;
        border-radius: 10px 10px 0 0;
        display: flex;
        justify-content: center;
        padding: 15px;
    }
    .balanceInfo .balanceInfoIcon i {
        font-size: 25px;
    }
    .balanceInfo.pay .balanceInfoIcon {
        width: 100%;
        border-radius: 10px 10px 0 0;
        display: flex;
        justify-content: center;
    }
    .balanceInfo.pay.payMobile .balanceInfoIcon {
        padding: 15px;
    }
    .balanceInfo.pay .balanceInfoIcon img {
        width: auto;
        height: 25px;
    }
}
.successText {
    width: 100%;
    position: relative;
}
.successText h2 {
    font-size: 50px;
    font-weight: 600;
    color: #80f1b1;
    margin: 0 0 15px;
}
.successText p {
    font-size: 15px;
    color: var(--textColor);
    margin: 0 0 15px;
}
.failText {
    width: 100%;
    position: relative;
}
.failText h2 {
    font-size: 50px;
    font-weight: 600;
    color: #343891;
    margin: 0 0 15px;
}
.failText p {
    font-size: 15px;
    color: var(--textColor);
    margin: 0 0 15px;
}
@media (max-width: 1000px) {
    .failText h2,
    .successText h2 {
        font-size: 30px;
    }
}
@media (max-width: 576px) {
    .successText {
        text-align: center;
        margin-bottom: 30px;
    }
    .successText h2 {
        font-size: 30px;
    }
    .failText,
    .successText h2,
    .successText p {
        text-align: center;
    }
    .failText {
        margin-bottom: 30px;
    }
    .failText h2 {
        font-size: 30px;
    }
    .failText h2,
    .failText p {
        text-align: center;
    }
}
.balancePayCheckbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cardBackground);
    padding: 5px 5px 5px 15px;
    border-radius: 50px;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.payMethod {
    width: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
    transition: all 0.2s ease-in-out 0s;
}
body.light .payMethod {
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
}
.payMethod:hover {
    transform: scale(1.05);
    transition: all 0.2s ease-in-out 0s;
}
.mobileMethod.payMethod:hover {
    transform: scale(1);
}
.payMethod.active {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
}
.payMethod .payMethodLogo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 65px 0;
    z-index: 1;
    border-radius: 5px;
    background: var(--cardBackgroundLight);
    clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.payMethod .payMethodLogo img {
    height: 30px;
    position: relative;
}
body.light .payMethod .payMethodLogo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
body.light .active.payMethod .payMethodLogo img {
    -webkit-filter: none;
    filter: none;
}
body.light .payMethod .payMethodLogo {
    background: #d8d8d8;
}
.active.payMethod .payMethodLogo {
    background: #343891;
}
.mobileMethod.payMethod .payMethodLogo {
    padding: 15px 0;
    border-radius: 5px;
    border: 1px solid var(--borderColor);
    clip-path: none;
}
.mobileMethod.payMethod .payMethodLogo img {
    width: auto;
    height: 12px;
}
body.light .active.payMethod .payMethodLogo {
    background: #343891;
}
.payMethod .payMethodOnline {
    width: 40px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
}
.payMethod .payMethodOnline img {
    width: 100%;
}
body.light .payMethod .payMethodOnline img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
body.light .active.payMethod .payMethodOnline img {
    -webkit-filter: none;
    filter: none;
}
.payMethod .payMethodInstallment {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    z-index: 2;
    white-space: nowrap;
}
.payMethod .payMethodInstallment img {
    height: 20px;
}
body.light .payMethod .payMethodInstallment {
    color: #000;
}
body.light .active.payMethod .payMethodInstallment {
    color: #fff;
}
@media (max-width: 576px) {
    .payMethod .payMethodLogo img {
        max-width: 100%;
        max-height: 20px;
    }
}
.borderLine {
    border-top: 1px solid var(--borderColor);
}
.borderLine,
.sweetAlertText {
    width: 100%;
    position: relative;
}
.sweetAlertText {
    text-align: center;
    color: #343891;
    font-size: 18px;
}
.sweetAlertText h3 {
    display: block;
    font-size: 30px;
    font-weight: 600;
}
.paymentMethodMobilButton {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
    padding: 8px 0;
}
.paymentMethodMobilButton:focus {
    color: var(--textColor);
}
.mobilePayPrice {
    width: 100%;
    position: relative;
}
.mobilePayPrice h3 {
    font-size: 12px;
    color: var(--textColor);
    margin: 0;
}
.mobilePayPrice .price {
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: var(--darkGreen);
}
.mobilPayShowPriceDetail {
    width: 30px;
    height: 20px;
    position: absolute;
    right: -32px;
    bottom: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--darkGreen);
}
.mobilePayInfoBox {
    position: fixed !important;
    bottom: 58px;
    z-index: 999;
    left: 0;
    top: unset;
    border-top: 1px solid var(--borderColor);
    border-bottom: 1px solid var(--borderColor);
}
.basketMobileBasketDetail {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--borderColor2);
    border-bottom: 1px solid var(--borderColor2);
    margin-bottom: 10px;
}
.basketMobileBasketDetail .detail {
    font-size: 12px;
    font-weight: 600;
    color: var(--textColor);
}
.basketMobileBasketDetail .detail strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--darkGreen);
}
.basketMobileBasketDetail .commission {
    font-size: 12px;
    font-weight: 600;
    color: var(--textColor);
}
.basketMobileBasketDetail .commission strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--darkGreen);
}
.paymentMethodsScroll {
    width: 100%;
    position: relative;
    overflow-x: scroll;
    display: flex;
    align-items: center;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.paymentMethodsScroll::-webkit-scrollbar {
    display: none;
}
.paymentMethodsScroll .item {
    width: 85px;
    margin-right: 10px;
}
.paymentMethodsScroll .item .payMethod {
    width: 85px;
}
.playerMarketItem {
    width: 100%;
    position: relative;
}
.playerMarketItem:before {
    left: 0;
}
.playerMarketItem:after,
.playerMarketItem:before {
    content: "";
    width: 12px;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../images/pmbl.png) repeat-y 0 0 transparent;
    z-index: 1;
}
.playerMarketItem:after {
    right: 0;
}
.playerMarketItem span:first-child {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(../images/pmbb.jpg) repeat-x 0 calc(100% - 9px) transparent;
    background-size: auto 21px;
}
.playerMarketItem span:first-child:before {
    top: 0;
}
.playerMarketItem span:first-child:after,
.playerMarketItem span:first-child:before {
    content: "";
    width: 100%;
    height: 12px;
    position: absolute;
    left: 0;
    background: url(../images/pmblv.png) repeat-x 0 0 transparent;
    z-index: 1;
}
.playerMarketItem span:first-child:after {
    bottom: 0;
}
.playerMarketItem span:nth-child(2) {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.playerMarketItem span:nth-child(2):before {
    top: -4px;
    left: -6px;
}
.playerMarketItem span:nth-child(2):after,
.playerMarketItem span:nth-child(2):before {
    content: "";
    width: 47px;
    height: 48px;
    position: absolute;
    background: url(../images/pmbtf.png) no-repeat 0 0 transparent;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
    z-index: 4;
}
.playerMarketItem span:nth-child(2):after {
    bottom: -4px;
    right: -6px;
    transform: rotate(180deg);
}
.playerMarketItem span:nth-child(3) {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.playerMarketItem span:nth-child(3):before {
    top: -4px;
    right: -6px;
}
.playerMarketItem span:nth-child(3):after,
.playerMarketItem span:nth-child(3):before {
    content: "";
    width: 47px;
    height: 48px;
    position: absolute;
    background: url(../images/pmbtl.png) no-repeat 0 0 transparent;
    filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, 0.6));
    z-index: 4;
}
.playerMarketItem span:nth-child(3):after {
    bottom: -4px;
    left: -6px;
    transform: rotate(-180deg);
}
.playerMarketItem span:nth-child(4) {
    width: calc(100% - 6px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 4px;
    z-index: -1;
    background: url(../images/pmbt.jpg) repeat-x 0 12px #29261f;
    background-size: auto 45px;
}
.playerMarketItem span:nth-child(4):before {
    content: "";
    width: 11px;
    height: calc(100% - 57px);
    position: absolute;
    top: 57px;
    left: 4px;
    background: url(../images/pml.jpg) repeat-y 0 0 transparent;
    background-size: 11px auto;
    z-index: 0;
}
.playerMarketItem span:nth-child(4):after {
    content: "";
    width: 11px;
    height: calc(100% - 57px);
    position: absolute;
    top: 57px;
    right: 4px;
    background: url(../images/pmr.jpg) repeat-y 0 0 transparent;
    background-size: 11px auto;
    z-index: 0;
}
.playerMarketItem .playerMarketTitle {
    width: 246px;
    height: 43px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/pmtitle-bg.png) no-repeat 0 0 transparent;
    display: flex;
}
.playerMarketItem .playerMarketTitle h3 {
    width: 175px;
    height: 22px;
    position: absolute;
    bottom: 9px;
    left: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #000;
    text-align: center;
    margin: 0;
    line-height: 1;
    text-shadow: 0.5px 0.5px 0 #6e5307;
}
.playerMarketDetail {
    padding: 58px 18px 25px;
    z-index: 3;
}
.playerMarketDetail,
.playerMarketDetail .detailImage {
    width: 100%;
    position: relative;
}
.playerMarketDetail .detailImage:before {
    content: "";
    width: 11px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -6px;
    background: url(../images/pml.jpg) repeat-y 0 0 transparent;
    background-size: 11px auto;
    z-index: 0;
}
.playerMarketDetail .detailImage img {
    width: 100%;
    position: relative;
    max-height: 287px;
    object-fit: cover;
    object-position: 0 0;
}
.playerMarketDetail .detailImage .moreDetailButton {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 40px 0 5px;
    text-align: center;
    background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0.9), transparent);
    color: #cd9802;
    font-size: 12px;
    z-index: 2;
}
.playerMarketDetail .detailImage .moreDetailButton:hover {
    color: #ffc421;
}
.playerMarketDetail .playerMarketDetailItems {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    padding-left: 6px;
}
.playerMarketDetail .playerMarketDetailItems .playerMarketDetailItem {
    display: block;
    position: relative;
    padding: 3px;
}
.playerMarketDetail .playerMarketDetailItems .playerMarketDetailItem img {
    width: 100%;
}
.playerMarketDetail .playerMarketDetailItems .playerMarketDetailItem.empty {
    pointer-events: none;
}
.playerMarketItemInfo,
.playerMarketItemInfo .playerMarketItemInfoTitle {
    width: 100%;
    position: relative;
}
@media (max-width: 576px) {
    .playerMarketItemInfo .playerMarketItemInfoTitle {
        margin-bottom: 0;
    }
}
.playerMarketItemInfo .playerMarketItemInfoTitle h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .playerMarketItemInfo .playerMarketItemInfoTitle h2 {
        text-align: left;
        font-size: 17px;
    }
}
.playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
@media (max-width: 576px) {
    .playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements {
        justify-content: flex-start;
    }
}
.playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements .colE {
    position: relative;
    padding: 0 15px;
    border-right: 1px solid var(--borderColor);
    min-height: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements .colE:first-child {
    padding-left: 0;
}
.playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements .colE:last-child {
    border-right: none;
}
@media (max-width: 576px) {
    .playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements .colE {
        padding: 0 5px;
    }
    .playerMarketItemInfo .playerMarketItemInfoTitle .playerMarketItemInfoTitleElements .colE .buttonRightSingle {
        padding: 7px 10px;
    }
}
.playerMarketItemInfo .productCounter {
    width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: var(--backgroundDark);
    padding: 7px 10px;
    border-radius: 3px;
}
@media (max-width: 1399px) {
    .playerMarketItemInfo .productCounter {
        gap: 5px;
        padding: 10px;
    }
}
@media (max-width: 576px) {
    .playerMarketItemInfo .productCounter {
        gap: 5px;
        padding: 10px;
    }
}
.playerMarketItemInfo .productCounter .counterIcon {
    font-size: 20px;
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .playerMarketItemInfo .productCounter .counterIcon {
        display: none;
    }
}
.playerMarketItemInfo .productCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.playerMarketItemInfo .productCounter .counterCounterItem .counterNumber {
    font-size: 14px;
    font-weight: 700;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .playerMarketItemInfo .productCounter .counterCounterItem .counterNumber {
        font-size: 10px;
    }
}
.playerMarketItemInfo .productCounter .counterCounterItem .counterNumberInfo {
    font-size: 13px;
    font-weight: 400;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .playerMarketItemInfo .productCounter .counterCounterItem .counterNumberInfo {
        font-size: 8px;
    }
}
.iconLink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--textColor);
}
.iconLink i {
    color: var(--darkGreen);
    font-size: 20px;
}
@media (max-width: 576px) {
    .iconLink {
        gap: 2px;
        font-size: 11px;
    }
    .iconLink i {
        font-size: 13px;
    }
}
.detailPrice {
    position: relative;
    padding: 15px 0;
}
.detailPrice,
.detailPrice .price {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}
.detailPrice .price {
    align-items: flex-start;
    font-size: 40px;
    font-weight: 800;
    color: var(--darkGreen);
    line-height: 1;
}
.detailPrice .price .unitPriceBox {
    font-size: 20px;
    font-weight: 700;
    color: #e3b21a;
    line-height: 1;
    position: relative;
    display: flex;
    gap: 5px;
    align-items: center;
}
.detailPrice .price .unitPriceBox .oldPrice {
    position: relative;
    font-size: 14px;
    font-weight: 500;
}
@media (max-width: 576px) {
    .detailPrice .price .unitPriceBox .oldPrice {
        font-size: 10px;
    }
}
.detailPrice .price .unitPriceBox .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 1px solid #e3b21a;
    position: absolute;
    top: 50%;
    left: 0;
}
.detailPrice .price .unitPriceBox .percent {
    font-size: 10px;
    display: inline-block;
    padding: 2px 6px;
    background: var(--darkGreen);
    color: var(--darkBlue);
    border-radius: 20px;
}
.detailPrice .price .unitPriceBox .productBasketCount {
    font-size: 15px;
}
@media (max-width: 576px) {
    .detailPrice .price .unitPriceBox {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .detailPrice .price .unitPriceBox .productBasketCount {
        font-size: 10px;
    }
}
.detailPrice .installment {
    font-size: 14px;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .detailPrice .price {
        font-size: 25px;
    }
    .detailPrice .installment {
        font-size: 10px;
    }
}
.playerMarketInfoDetailItem {
    width: 100%;
    position: relative;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    border-radius: 5px;
    transition: all 0.2s;
}
.playerMarketInfoDetailItem.cardBg {
    background: var(--background);
    font-size: 11px;
}
.playerMarketInfoDetailItem .icon {
    width: 30px;
    height: 30px;
    position: relative;
    background: var(--background);
    color: var(--darkGreen);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.cardBg.playerMarketInfoDetailItem .icon {
    background: var(--cardBackground);
}
.mini.playerMarketInfoDetailItem .icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
}
.playerMarketInfoDetailItem:hover {
    background: var(--darkBlue);
    color: var(--darkGreen);
    transition: all 0.2s;
}
.playerMarketInfoDetailItem.active,
.playerMarketInfoDetailItem:hover .icon {
    background: var(--darkGreen);
    color: var(--darkBlue);
}
.playerMarketInfoDetailItem.active {
    border-color: var(--darkGreenDark);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.detailTitle {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
.detailTitle h3 {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: var(--darkGreen);
    margin: 0;
    padding: 0 25px 0 0;
    position: relative;
    background: var(--background);
}
.cardBg.detailTitle h3 {
    background: var(--cardBackground);
}
.detailTitle:before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-bottom: 1px solid var(--darkGreen);
}
@media (max-width: 576px) {
    .detailTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
    }
    .detailTitle h3 {
        font-size: 14px;
        padding: 0 10px;
    }
}
.playerMarketTab {
    width: 100%;
    position: relative;
    padding: 10px;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    z-index: 10;
}
.playerMarketTab:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundDark);
    clip-path: polygon(100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 0);
    z-index: 0;
}
.single.playerMarketTab:before {
    clip-path: none;
}
.playerMarketTab:after {
    content: "";
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% calc(100% - 45px), calc(100% - 45px) 100%, 0 100%, 0 0);
    z-index: 1;
}
.single.playerMarketTab:after {
    clip-path: none;
}
.playerMarketTab .playerMarketTitleNormal {
    width: 100%;
    position: relative;
    padding: 10px;
    background: var(--cardBackgroundLight);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.playerMarketTab .playerMarketTitleNormal h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--textColor);
    line-height: 1;
    margin: 0;
}
@media (max-width: 576px) {
    .playerMarketTab .playerMarketTitleNormal {
        display: none;
    }
}
.playerMarketTab .playerMarketDetailNormal {
    width: 100%;
    position: relative;
    padding: 8px;
    z-index: 3;
}
.playerMarketTab .playerMarketDetailNormal .mobileFavButton {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    color: var(--darkGreen);
    z-index: 2;
}
.playerMarketTab .playerMarketDetailNormal .mobileFavDeleteButton {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    color: #e3b21a;
    z-index: 2;
}
.playerMarketTab .playerMarketDetailNormal .detailImage {
    width: 100%;
    position: relative;
}
.playerMarketTab .playerMarketDetailNormal .detailImage .moreDetailButton {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 40px 0 5px;
    text-align: center;
    background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0.9), transparent);
    color: #80f1b1;
    font-size: 12px;
    z-index: 2;
}
.playerMarketTab .playerMarketDetailNormal .detailImage .moreDetailButton:hover {
    color: #248a50;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 16.6666666667%);
    padding-left: 6px;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem {
    display: block;
    position: relative;
    padding: 3px;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem img {
    width: 100%;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem .itemModal {
    width: 295px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: all 0s;
    z-index: 10;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem .itemModal img {
    width: auto;
}
@media (max-width: 576px) {
    .playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem .itemModal {
        display: none;
    }
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem.empty {
    pointer-events: none;
}
.playerMarketTab .playerMarketDetailNormal .playerMarketDetailItems .playerMarketDetailItem.empty:before {
    content: "";
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: absolute;
    top: 3px;
    left: 3px;
    background: var(--cardBackgroundLight);
    border: 1px solid var(--cardBackgroundDark);
}
.commentsArea {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackgroundDark);
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.commentsArea .commentItems {
    max-height: 208px;
    padding-right: 10px;
}
.commentItems .commentItem .personProfile {
    width: 50px;
    height: 50px;
    font-size: 20px;
}
.commentItems .commentItem .commentDetail .personInfo .date {
    border-left: none;
    padding-left: 0;
    font-size: 12px;
}
.commentItems .commentItem .commentDetail .personInfo .name {
    font-size: 12px;
}
.commentItems .commentItem .commentDetail {
    width: calc(100% - 50px);
}
.commentItems .commentItem .commentDetail .commentText {
    font-size: 12px;
    padding: 10px;
}
.formGroup.commentInputs .formControl {
    border-radius: 5px 0 0 5px;
}
tspan {
    fill: var(--textColor) !important;
}
.apexcharts-tooltip {
    background: var(--cardBackgroundLight) !important;
    color: var(--textColor) !important;
    border-color: var(--borderColor) !important;
    box-shadow: 2px 2px 6px -4px rgba(0, 0, 0, 0.25) !important;
}
.apexcharts-tooltip-title {
    background: var(--cardBackgroundDark) !important;
    border-color: var(--borderColor) !important;
}
.graphItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 7px;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
    background: var(--background);
}
.graphItem .number {
    position: relative;
    line-height: 1;
    text-align: center;
    color: var(--darkGreen);
    font-size: 13px;
    font-weight: 600;
    background: var(--cardBackgroundLight);
    padding: 5px 10px;
    border-radius: 5px;
}
.graphItem .text {
    font-size: 12px;
    line-height: 1;
}
.graphItem .statusText {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 800;
    color: var(--textColor);
    padding: 5px;
    border-radius: 3px;
    line-height: 1;
    background: var(--cardBackground);
}
.commentStats.detailCommentStats,
.commentStats.detailCommentStats .stars {
    font-size: 15px;
}
@media (max-width: 576px) {
    .commentStats.detailCommentStats,
    .commentStats.detailCommentStats i {
        font-size: 10px;
    }
}
.playerMarketCategoryWrapper .playerMarketCategory {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
    overflow: hidden;
    transition: all 0.2s;
}
.playerMarketCategoryWrapper .playerMarketCategory.greenShadow {
    filter: drop-shadow(0 4px 4px rgba(128, 241, 177, 0.35));
}
.playerMarketCategoryWrapper .playerMarketCategory a {
    width: 100%;
    position: relative;
    display: block;
    transition: all 0.2s;
    overflow: hidden;
    border-radius: .5rem;
}
.playerMarketCategoryWrapper .playerMarketCategory a:before {
    content: "";
    width: 0;
    height: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 300px #4255d4;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    transition: all 0.2s;
}
.playerMarketCategoryWrapper .playerMarketCategory a img {
    width: 100%;
    position: relative;
    z-index: 1;
}
:hover.playerMarketCategoryWrapper .playerMarketCategory a {
    transition: all 0.2s;
}
:hover.playerMarketCategoryWrapper .playerMarketCategory a:before {
    width: 250px;
    height: 250px;
    animation-duration: 0.3s;
    animation-name: hoverEffect;
    transition: all 0.3s;
}
@media (max-width: 576px) {
    .playerMarketCategoryWrapper .playerMarketCategory a:before {
        display: none;
    }
    :hover.playerMarketCategoryWrapper .playerMarketCategory a {
        transition: all 0.2s;
    }
    :hover.playerMarketCategoryWrapper .playerMarketCategory a:before {
        width: 250px;
        height: 250px;
        animation-duration: 0.3s;
        animation-name: hoverEffect;
        transition: all 0.3s;
    }
}
:hover.playerMarketCategoryWrapper .playerMarketCategory {
    transform: translateY(-20px);
    filter: drop-shadow(0 20px 4px rgba(0, 0, 0, 0.55));
    transition: all 0.2s;
}
@media (max-width: 576px) {
    :hover.playerMarketCategoryWrapper .playerMarketCategory {
        transform: translateY(0);
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
    }
}
@keyframes hoverEffect {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    50% {
        visibility: visible;
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}
.chatBox {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.chatBox:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.chatBox .chatHeader {
    background: var(--cardBackgroundLight);
    border-bottom: 2px solid var(--borderColor);
}
.chatBox .chatBody,
.chatBox .chatHeader {
    width: 100%;
    position: relative;
    padding: 10px;
}
.chatBox .chatBody .chatItems {
    width: 100%;
    position: relative;
    height: 403px;
}
.chatBox .chatBody .chatItems .chatItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--borderColor);
}
.chatBox .chatBody .chatItems .chatItem:hover {
    background: var(--cardBackgroundLight);
}
.chatBox .chatBody .chatItems .chatItem .itemImage {
    width: 40px;
    height: 40px;
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
    padding: 2px;
    background: var(--borderColor);
}
.chatBox .chatBody .chatItems .chatItem .itemImage img {
    width: 36px;
    height: 36px;
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 0);
}
.chatBox .chatBody .chatItems .chatItem .itemInfo {
    width: calc(100% - 40px);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}
.chatBox .chatBody .chatItems .chatItem .itemInfo .personTitle {
    width: 100%;
    position: relative;
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--textColor);
}
.chatBox .chatBody .chatItems .chatItem .itemInfo .itemDate {
    width: 100%;
    position: relative;
    display: block;
    font-size: 10px;
    color: var(--darkGreen);
}
.chatBox .chatBody .chatItems .chatItem .itemInfo .eksBadge {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 10px;
    padding: 4px 5px;
}
.messageBox {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.messageBox:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
}
.messageBox .messageHeader {
    width: 100%;
    position: relative;
    background: var(--cardBackgroundLight);
    padding: 11px 10px;
    border-bottom: 2px solid var(--borderColor);
}
.messageBox .messageHeader .personInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.messageBox .messageHeader .personInfo .personImage {
    width: 50px;
    height: 50px;
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
    padding: 2px;
    background: var(--borderColor);
}
.messageBox .messageHeader .personInfo .personImage img {
    width: 46px;
    height: 46px;
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 0);
}
.messageBox .messageHeader .personInfo .personTitle {
    width: calc(100% - 50px);
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
}
.messageBox .messageBody {
    width: 100%;
    position: relative;
    padding: 10px;
}
.messageBox .messageBody .messages {
    width: 100%;
    position: relative;
    height: 287px;
    margin-bottom: 10px;
    padding-right: 10px;
}
.messageBox .messageBody .messages .messageItemRow {
    display: flex;
    position: relative;
    margin-bottom: 30px;
}
.messageBox .messageBody .messages .messageItemRow .messageItem {
    max-width: 50%;
    position: relative;
    background: #424a56;
    padding: 10px;
    border-radius: 0 15px 15px 15px;
}
body.light .messageBox .messageBody .messages .messageItemRow .messageItem {
    background: #eef1f5;
}
.messageBox .messageBody .messages .messageItemRow .messageItem .messageTitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.messageBox .messageBody .messages .messageItemRow .messageItem .messageTitle .messagePerson {
    font-size: 13px;
    color: var(--textColor);
    font-weight: 500;
}
.messageBox .messageBody .messages .messageItemRow .messageItem .messageTitle .messageTime {
    font-size: 12px;
    color: #aab4c3;
}
.messageBox .messageBody .messages .messageItemRow .messageItem .messageText {
    font-size: 12px;
    color: var(--textColor);
}
.messageBox .messageBody .messages .messageItemRow.send {
    justify-content: flex-end;
}
.messageBox .messageBody .messages .messageItemRow.send .messageItem {
    background: #2e343c;
}
body.light .messageBox .messageBody .messages .messageItemRow.send .messageItem {
    background: #e4e5e8;
}
.messageBox .messageBody .messageInputBox {
    width: 100%;
    position: relative;
}
.messageBox .messageBody .messageInputBox .messageInput {
    width: 100%;
    height: 100px;
    position: relative;
    background: #dbdcdd;
    padding: 20px 80px 20px 20px;
    margin: 0;
    clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
    border: 2px solid #dbdcdd;
}
.messageBox .messageBody .messageInputBox .messageInput:focus {
    outline: none;
    border: 2px solid #14bd6b;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0;
}
.messageBox .messageBody .messageInputBox .messageButton {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    background: #14bd6b;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 30px);
    right: 20px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.productItemWrapper {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    z-index: 4;
}
.productItemWrapper,
.productItemWrapper .productItem {
    width: 100%;
    position: relative;
}
.vertical.productItemWrapper .productItem {
    display: flex;
}
.productItemWrapper .productItem .itemFavButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #4255d4;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.productItemWrapper .productItem .itemFavButton:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemFavButton {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
}
.productItemWrapper .productItem .itemFavDeleteButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #c3141b;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.productItemWrapper .productItem .itemFavDeleteButton:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
.productItemWrapper .productItem .itemImage {
    width: 100%;
    position: relative;
}
.imageBorder.productItemWrapper .productItem .itemImage {
    border-bottom: 2px solid var(--cardBackgroundDark);
}
.vertical.productItemWrapper .productItem .itemImage {
    width: 140px;
}
.productItemWrapper .productItem .itemImage img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.vertical.productItemWrapper .productItem .itemImage img {
    height: 140px;
    object-fit: cover;
}
.blog.productItemWrapper .productItem .itemImage img {
    height: 150px;
    object-fit: cover;
}
.sweepstake.productItemWrapper .productItem .itemImage img {
    height: 210px;
    object-fit: scale-down;
    background-color: #111117;
}
.productItemWrapper .productItem .itemImage .infoButton {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #343891;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
    right: 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.1s;
    z-index: 2;
}
.productItemWrapper .productItem .itemImage .infoButton:hover {
    transform: scale(1.2);
    transition: all 0.1s;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemImage .infoButton {
        width: 20px;
        height: 20px;
        font-size: 8px;
        bottom: 2px;
        right: 4px;
    }
}
.sweepstake.productItemWrapper .productItem .itemImage .participantCount {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: var(--cardBackground);
    color: var(--textColor);
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    line-height: 1;
    border-radius: 50px;
    z-index: 2;
    box-shadow: 0 4px 4px 0 hsla(0, 1.4%, 41%, 0.4);
}
.productItemWrapper .productItem .itemImage .flag {
    position: absolute;
    font-size: 12px;
    left: 0;
    bottom: 5px;
    display: block;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    z-index: 3;
}
.productItemWrapper .productItem .itemImage .flag:after {
    position: absolute;
    right: -5px;
    top: 0;
    content: "";
    border-right: 5px solid transparent;
}
.productItemWrapper .productItem .itemImage .flag.flag-success {
    background: #4255d4;
    color: #111117;
    font-weight: 600;
}
.productItemWrapper .productItem .itemImage .flag.flag-success:after {
    border-bottom: 12px solid #4255d4;
    border-top: 12px solid #4255d4;
}
@media (max-width: 576px) {
    .productItemWrapper .productItem .itemImage .flag {
        bottom: 35px;
    }
}
.productItemWrapper .productItem .itemDetail {
    width: 100%;
    position: relative;
    padding: 10px;
    z-index: 2;
}
.vertical.productItemWrapper .productItem .itemDetail {
    width: calc(100% - 140px);
}
.productItemWrapper .productItem .itemDetail:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.vertical.productItemWrapper .productItem .itemDetail:before {
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.productItemWrapper .productItem .itemDetail .itemTitle {
    width: 100%;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
}
.lottery.productItemWrapper .productItem .itemDetail .itemTitle {
    padding: 5px 0 8px;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .itemTitle {
        padding: 0 0 3px;
    }
}
.titleTop.productItemWrapper .productItem .itemDetail .itemTitle {
    margin-top: -52px;
}
.titleTop.productItemWrapper .productItem .itemDetail .itemTitle:before {
    content: "";
    width: calc(100% + 20px);
    height: calc(100% + 30px);
    position: absolute;
    left: -10px;
    top: -28px;
    background: linear-gradient(0deg, #20212b, rgba(32, 33, 43, 0.7), rgba(32, 33, 43, 0));
}
body.light .titleTop.productItemWrapper .productItem .itemDetail .itemTitle:before {
    height: calc(100% + 20px);
    top: -18px;
    background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 100%, 0));
}
.productItemWrapper .productItem .itemDetail .itemTitle h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    position: relative;
}
.lottery.productItemWrapper .productItem .itemDetail .itemTitle h3,
.titleLarge.productItemWrapper .productItem .itemDetail .itemTitle h3 {
    font-size: 15px;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .itemTitle h3 {
        font-size: 12px;
    }
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .itemTitle h3 {
        text-align: center;
    }
}
@media (max-width: 576px) {
    .productItemWrapper .productItem .itemDetail .itemTitle h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.productItemWrapper .productItem .itemDetail .itemTitle h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .itemTitle h2 {
        text-align: center;
    }
}
.productItemWrapper .productItem .itemDetail .itemTitle span {
    font-size: 12px;
    color: var(--darkGreen);
    position: relative;
}
.sweepstake.productItemWrapper .productItem .itemDetail .itemTitle .streamerLink {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--darkGreen);
}
@media (max-width: 1099px) {
    .sweepstake.productItemWrapper .productItem .itemDetail .itemTitle .streamerLink {
        justify-content: center;
    }
}
.productItemWrapper .productItem .itemDetail .productCounter {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--backgroundDark);
    padding: 5px 0;
    border-radius: 3px;
    margin-top: 5px;
}
.productItemWrapper .productItem .itemDetail .productCounter.finished {
    background-color: #8af8bb;
    color: #111117;
}
@media (max-width: 576px) {
    .productItemWrapper .productItem .itemDetail .productCounter {
        width: auto;
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
    }
    .lottery.productItemWrapper .productItem .itemDetail .productCounter,
    .productItemWrapper .productItem .itemDetail .productCounter.finished {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        transform: translateX(0);
    }
    .productItemWrapper .productItem .itemDetail .productCounter.finished {
        font-size: 12px;
        padding: 1px 5px;
    }
}
.detailView.productItemWrapper .productItem .itemDetail .productCounter {
    width: auto;
    padding: 5px 10px;
}
.lottery.productItemWrapper .productItem .itemDetail .productCounter {
    margin-top: 10px;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .productCounter {
        margin-top: 5px;
    }
}
.productItemWrapper .productItem .itemDetail .productCounter .counterIcon {
    font-size: 15px;
    color: var(--darkGreen);
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .productCounter .counterIcon {
        display: none;
    }
}
.productItemWrapper .productItem .itemDetail .productCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .productCounter .counterCounterItem {
        gap: 2px;
    }
}
.productItemWrapper .productItem .itemDetail .productCounter .counterCounterItem .counterNumber {
    font-size: 13px;
    font-weight: 700;
    color: var(--textColor);
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .productCounter .counterCounterItem .counterNumber {
        font-size: 10px;
    }
}
.productItemWrapper .productItem .itemDetail .productCounter .counterCounterItem .counterNumberInfo {
    font-size: 8px;
    font-weight: 400;
    color: var(--textColor);
}
.lottery.productItemWrapper .productItem .itemDetail .rateBox {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    gap: 5px;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .rateBox {
        margin-top: 5px;
    }
}
.lottery.productItemWrapper .productItem .itemDetail .rateBox .rateTitle {
    position: relative;
    font-size: 12px;
    color: var(--textColor);
}
.lottery.productItemWrapper .productItem .itemDetail .rateBox .rateTitle span {
    color: var(--darkGreen);
    font-weight: 700;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .rateBox .rateTitle {
        text-align: center;
    }
}
.lottery.productItemWrapper .productItem .itemDetail .rateBox .rate {
    width: 100%;
    height: 5px;
    border-radius: 5px;
    position: relative;
    background: #31323c;
}
.lottery.productItemWrapper .productItem .itemDetail .rateBox .rate span {
    width: 80%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--darkGreen);
    border-radius: 5px;
}
.productItemWrapper .productItem .itemDetail .itemInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0 0;
}
.lottery.productItemWrapper .productItem .itemDetail .itemInfo {
    margin-top: 10px;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .itemInfo {
        margin-top: 5px;
        flex-direction: row;
    }
}
.productItemWrapper .productItem .itemDetail .itemInfo .priceLabel {
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .productItemWrapper .productItem .itemDetail .itemInfo .priceLabel {
        font-size: 11px;
        line-height: 1;
    }
}
.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice {
    font-size: 15px;
    font-weight: 800;
    color: var(--darkGreen);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    gap: 2px;
}
.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice .oldPrice {
    display: inline-block;
    font-size: 12px;
    color: #e3b21a;
    position: relative;
}
.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #c3141b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(5deg);
}
.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice .desc {
    font-size: 9px;
    color: #e3b21a;
    font-weight: 400;
}
.detailView.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice {
    font-size: 20px;
}
.detailView.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice .oldPrice {
    font-size: 17px;
}
.lottery.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice {
    font-size: 20px;
}
.lottery.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice .oldPrice {
    font-size: 17px;
}
@media (max-width: 576px) {
    .lottery.productItemWrapper .productItem .itemDetail .itemInfo .itemPrice {
        font-size: 14px;
    }
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .itemInfo {
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }
    .productItemWrapper .productItem .itemDetail .itemInfo .commentStats,
    .productItemWrapper .productItem .itemDetail .itemInfo .commentStats .stars {
        font-size: 10px;
    }
}
.productItemWrapper .productItem .itemDetail .itemPriceInfo {
    align-items: flex-start;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    left: 15px;
    top: -45px;
    padding: 5px 10px;
    border-radius: 3px;
    background: #272834;
    color: #c8c9d8;
    line-height: 1;
    gap: 2px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.productItemWrapper .productItem .itemDetail .itemPriceInfo .desc {
    font-size: 10px;
    color: #c8c9d8;
    font-weight: 800;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .itemPriceInfo {
        padding: 5px;
        left: 6px;
        top: -24px;
        font-size: 10px;
    }
    .productItemWrapper .productItem .itemDetail .itemPriceInfo .desc {
        font-size: 9px;
    }
}
.detailView.productItemWrapper .productItem .itemDetail .detailProductTitle {
    width: 100%;
    position: relative;
    margin: 5px 0;
}
.detailView.productItemWrapper .productItem .itemDetail .detailProductTitle h3 {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--darkGreen);
    margin: 0;
    padding: 0 25px 0 0;
    position: relative;
    background: var(--cardBackground);
}
.detailView.productItemWrapper .productItem .itemDetail .detailProductTitle:before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.detailView.productItemWrapper .productItem .itemDetail .detailDesc {
    width: 100%;
    position: relative;
    font-size: 12px;
    color: var(--textColor);
}
.detailView.productItemWrapper .productItem .itemDetail .detailDesc ul {
    margin: 0;
    padding: 0;
}
.detailView.productItemWrapper .productItem .itemDetail .detailDesc ul li {
    list-style: none;
    font-size: 12px;
    color: var(--textColor);
}
.detailView.productItemWrapper .productItem .itemDetail .iconLink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--textColor);
}
.detailView.productItemWrapper .productItem .itemDetail .iconLink i,
.detailView.productItemWrapper .productItem .itemDetail .iconLink strong {
    color: var(--darkGreen);
}
.productItemWrapper .productItem .itemDetail .itemTags {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.productItemWrapper .productItem .itemDetail .itemTags .itemTag {
    font-size: 10px;
    line-height: 1;
    padding: 5px;
    border-radius: 3px;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.productItemWrapper .productItem .itemDetail .itemTags.platform .itemTag {
    background: var(--cardBackgroundDark);
}
.sweepstake.productItemWrapper .productItem .itemDetail .priceTitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .sweepstake.productItemWrapper .productItem .itemDetail .priceTitle {
        font-size: 10px;
    }
}
.sweepstake.productItemWrapper .productItem .itemDetail .productDetailButton {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    padding: 10px;
    background: var(--cardBackgroundLight);
    color: var(--darkGreen);
    font-size: 11px;
    margin-top: 10px;
    border-radius: 3px;
    transition: all 0.2s;
}
.sweepstake.productItemWrapper .productItem .itemDetail .productDetailButton:hover {
    background: var(--background);
    color: var(--darkGreen);
    transition: all 0.2s;
}
@media (max-width: 1099px) {
    .sweepstake.productItemWrapper .productItem .itemDetail .productDetailButton i {
        display: none;
    }
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea {
    width: calc(50% - 10px);
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: none;
    align-items: center;
    z-index: 4;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea {
    width: calc(100% - 20px);
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .quantityToAddToCartArea {
        width: calc(100% - 20px);
    }
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea.show {
    display: flex;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea {
    width: calc(100% - 30px);
    display: inline-flex;
    align-items: center;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea {
    width: calc(100% - 70px);
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea {
        width: calc(100% - 30px);
    }
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus {
    width: 33.3333333333%;
    height: 36.5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--textColor);
    background: var(--borderColor);
    transition: all 0.2s ease-in-out 0s;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus {
    background: #282b78;
    color: #fff;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus,
    .productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus {
        height: 26.5px;
        font-size: 10px;
    }
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus.isDisable,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus.isDisable {
    pointer-events: none;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:hover,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:hover {
    background: var(--darkGreenDark);
    color: var(--darkBlue);
    transition: all 0.2s ease-in-out 0s;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:hover:before,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:hover:before {
    background: var(--darkGreen);
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:hover,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:hover {
    background: #248a50;
    color: #343891;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:hover:before,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:hover:before {
    background: #4255d4;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus i,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus i {
    pointer-events: none;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:before,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--cardBackground);
    position: absolute;
    top: 2px;
    left: 2px;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:before,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:before {
    background: #343891;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus i,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus i {
    position: relative;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus {
    clip-path: polygon(100% 0, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateMinus:before {
    clip-path: polygon(100% 0, 100% 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigatePlus:before {
    clip-path: none;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateInput {
    width: 33.3333333333%;
    height: 36.5px;
    border-top: 2px solid var(--borderColor);
    border-bottom: 2px solid var(--borderColor);
    font-size: 12px;
    font-weight: 600;
    color: var(--textColor);
    background: var(--background);
    line-height: 36.5px;
    text-align: center;
    border-left: none;
    border-right: none;
    border-radius: 0 !important;
    -moz-appearance: textfield;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateInput {
    border-top: 2px solid #282b78;
    border-bottom: 2px solid #282b78;
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateInput {
        height: 26.5px;
        line-height: 26.5px;
        font-size: 10px;
    }
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateInput:focus {
    outline: none;
    box-shadow: none;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateInput::-webkit-inner-spin-button,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .productNavigateArea .productNavigateInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton {
    width: 30px;
    padding: 13px 0;
    clip-path: none;
    background: #157b2a;
    color: #fff;
}
.lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton {
    width: 70px;
}
@media (max-width: 1099px) {
    .lottery.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton {
        width: 30px;
    }
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton {
        padding: 7px 0;
    }
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton:before {
    clip-path: none;
    background: #28a745;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton i {
    color: #fff;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton:hover {
    background: #28a745;
    color: #fff;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton:hover:before {
    background: #157b2a;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea .quantityToAddToCartButton:hover i {
    color: #fff;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea.buyNavigate {
    left: auto;
    right: 10px;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea.buyNavigate .productNavigateArea .productNavigateMinus,
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea.buyNavigate .productNavigateArea .productNavigateMinus:before {
    clip-path: none;
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea.buyNavigate .quantityToAddToCartButton {
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.productItemWrapper .productItem .itemDetail .quantityToAddToCartArea.buyNavigate .quantityToAddToCartButton:before {
    clip-path: polygon(calc(100% - 16px) 0, 100% 13px, 100% 100%, 0 100%, 0 0);
}
@media (max-width: 1099px) {
    .productItemWrapper .productItem .itemDetail .itemButtons {
        flex-wrap: wrap;
    }
    .productItemWrapper .productItem .itemDetail .itemButtons .buttonLeft {
        width: 100%;
        order: 2;
        padding: 5px;
    }
    .productItemWrapper .productItem .itemDetail .itemButtons .buttonRight {
        width: 100%;
        order: 1;
        padding: 5px;
    }
    .productItemWrapper .productItem .itemDetail .buttonRightSingle {
        padding: 5px;
    }
}
.productItemWrapper:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.7));
    transition: all 0.3s;
}
.productItemWrapper .productModal {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px 10px 25px;
    z-index: 5;
}
.productItemWrapper .productModal:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.productItemWrapper .productModal .productModalBody {
    width: 100%;
    max-height: 278px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.productItemWrapper .productModal .productModalBody.scrollAuto {
    padding-right: 5px;
}
@media (max-width: 576px) {
    .productItemWrapper .productModal .productModalBody {
        gap: 5px;
    }
    .productItemWrapper .productModal .productModalBody .productAddItem {
        padding: 5px 2px;
    }
    .productItemWrapper .productModal .productModalBody .productAddItemImage {
        display: none;
    }
    .productItemWrapper .productModal .productModalBody .productAddItemInfo {
        width: 100%;
    }
}
.productItemWrapper .productModal .productModalCloseButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    background: #343891;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 12px;
    line-height: 1;
}
.productItemWrapper .productModal .productModalCloseButton:hover {
    transform: scale(1.1);
    background: #282b78;
    transition: all 0.2s;
}
.productItemWrapper.productModalOpen:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
    z-index: 4;
}
.productItemMobileWrapper {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    z-index: 4;
}
.productItemMobileWrapper,
.productItemMobileWrapper .productItemMobile {
    width: 100%;
    position: relative;
}
.productItemMobileWrapper .productItemMobile .itemFavButton {
    width: 16px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    background: #4255d4;
    color: #343891;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.productItemMobileWrapper .productItemMobile .itemFavButton:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
.productItemMobileWrapper .productItemMobile .itemFavDeleteButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #c3141b;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.productItemMobileWrapper .productItemMobile .itemFavDeleteButton:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
.productItemMobileWrapper .productItemMobile .itemDetail {
    width: 100%;
    position: relative;
    padding: 10px;
    z-index: 2;
}
.productItemMobileWrapper .productItemMobile .itemDetail:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.vertical.productItemMobileWrapper .productItemMobile .itemDetail:before {
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemHeader {
    width: 100%;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
    display: flex;
    justify-content: space-between;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemHeader .itemImage {
    width: 50px;
    position: relative;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemHeader .itemImage img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemHeader .itemTitle {
    width: calc(100% - 50px);
    padding-left: 5px;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemHeader .itemTitle h3 {
    font-size: 10px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemHeader .itemTitle span {
    font-size: 10px;
    color: var(--darkGreen);
    display: block;
}
.productItemMobileWrapper .productItemMobile .itemDetail .productCounter {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--backgroundDark);
    padding: 5px 0;
    border-radius: 3px;
    margin-top: 5px;
}
@media (max-width: 576px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .productCounter {
        width: auto;
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
    }
    .lottery.productItemMobileWrapper .productItemMobile .itemDetail .productCounter {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        transform: translateX(0);
    }
}
.detailView.productItemMobileWrapper .productItemMobile .itemDetail .productCounter {
    width: auto;
    padding: 5px 10px;
}
.lottery.productItemMobileWrapper .productItemMobile .itemDetail .productCounter {
    margin-top: 10px;
}
@media (max-width: 1099px) {
    .lottery.productItemMobileWrapper .productItemMobile .itemDetail .productCounter {
        margin-top: 5px;
    }
}
.productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterIcon {
    font-size: 15px;
    color: var(--darkGreen);
}
@media (max-width: 1099px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterIcon {
        display: none;
    }
}
.productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 1099px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterCounterItem {
        gap: 2px;
    }
}
.productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterCounterItem .counterNumber {
    font-size: 13px;
    font-weight: 700;
    color: var(--textColor);
}
@media (max-width: 1099px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterCounterItem .counterNumber {
        font-size: 10px;
    }
}
.productItemMobileWrapper .productItemMobile .itemDetail .productCounter .counterCounterItem .counterNumberInfo {
    font-size: 8px;
    font-weight: 400;
    color: var(--textColor);
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0 0;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .priceLabel {
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
}
@media (max-width: 576px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .priceLabel {
        font-size: 11px;
        line-height: 1;
    }
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .itemPrice {
    font-size: 15px;
    font-weight: 800;
    color: var(--darkGreen);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    gap: 2px;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .itemPrice .oldPrice {
    display: inline-block;
    font-size: 12px;
    color: #e3b21a;
    position: relative;
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .itemPrice .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #c3141b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(5deg);
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .itemPrice .desc {
    font-size: 9px;
    color: #e3b21a;
    font-weight: 400;
}
@media (max-width: 1099px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .commentStats,
    .productItemMobileWrapper .productItemMobile .itemDetail .itemInfo .commentStats .stars {
        font-size: 10px;
    }
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemPriceInfo {
    align-items: flex-start;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    left: 15px;
    top: -45px;
    padding: 5px 10px;
    border-radius: 3px;
    background: #272834;
    color: #c8c9d8;
    line-height: 1;
    gap: 2px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.productItemMobileWrapper .productItemMobile .itemDetail .itemPriceInfo .desc {
    font-size: 10px;
    color: #c8c9d8;
    font-weight: 800;
}
@media (max-width: 1099px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .itemPriceInfo {
        padding: 5px;
        left: 6px;
        top: -24px;
        font-size: 10px;
    }
    .productItemMobileWrapper .productItemMobile .itemDetail .itemPriceInfo .desc {
        font-size: 9px;
    }
}
@media (max-width: 1099px) {
    .productItemMobileWrapper .productItemMobile .itemDetail .itemButtons .buttonLeft,
    .productItemMobileWrapper .productItemMobile .itemDetail .itemButtons .buttonRight {
        padding: 8px 5px;
    }
    .productItemMobileWrapper .productItemMobile .itemDetail .buttonRightSingle {
        padding: 5px;
    }
}
.productItemMobileWrapper:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.7));
    transition: all 0.3s;
}
.productItemMobileWrapper .productModal {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px 10px 25px;
    z-index: 5;
}
.productItemMobileWrapper .productModal:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.productItemMobileWrapper .productModal .productModalBody {
    width: 100%;
    max-height: 278px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.productItemMobileWrapper .productModal .productModalBody.scrollAuto {
    padding-right: 5px;
}
@media (max-width: 576px) {
    .productItemMobileWrapper .productModal .productModalBody {
        gap: 5px;
    }
    .productItemMobileWrapper .productModal .productModalBody .productAddItem {
        padding: 5px 2px;
    }
    .productItemMobileWrapper .productModal .productModalBody .productAddItemImage {
        display: none;
    }
    .productItemMobileWrapper .productModal .productModalBody .productAddItemInfo {
        width: 100%;
    }
}
.productItemMobileWrapper .productModal .productModalCloseButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    background: #343891;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 12px;
    line-height: 1;
}
.productItemMobileWrapper .productModal .productModalCloseButton:hover {
    transform: scale(1.1);
    background: #282b78;
    transition: all 0.2s;
}
.productItemMobileWrapper.productModalOpen:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
    z-index: 4;
}
.pvpServerItemTitle {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
    color: #fff;
}
.pvpServerItemTitle:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #343891;
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.pvpServerItemTitle .title {
    width: 100%;
    position: relative;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding: 10px 15px;
    border-right: 1px solid #282b78;
}
.pvpServerItem {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.2s;
}
.pvpServerItem:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);

}
.pvpServerItem .row {
    position: relative;
}
.pvpServerItem .itemTitle {
    width: 100%;
    position: relative;
    padding: 15px 20px;
    background: var(--cardBackgroundLight);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--textColor);
    white-space: nowrap;
    border-right: 1px solid var(--borderColor2);
}
.pvpServerItem .itemTitle img {
    width: 50px;
}
.pvpServerItem .itemTitle .mobilLabel {
    position: absolute;
    top: 10px;
    left: 15px;
}
@media (max-width: 576px) {
    .pvpServerItem .itemTitle {
        width: calc(100% + 30px);
        margin-top: -4px;
        margin-left: -15px;
        margin-right: -15px;
        border-right: none;
        border-bottom: 1px solid var(--borderColor2);
        padding: 30px 15px 15px;
    }
}
.pvpServerItem .secure {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--textColor);
}
.pvpServerItem .secure i {
    color: var(--darkGreen);
}
.pvpServerItem .date {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--textColor);
}
.pvpServerItem .date i,
.pvpServerItem .type {
    color: var(--darkGreen);
}
.pvpServerItem .type {
    position: relative;
    font-weight: 800;
}
.pvpServerItem .itemTags {
    position: relative;
    display: inlnie-flex;
    flex-wrap: wrap;
    gap: 5px;
}
.pvpServerItem .itemTags .itemTag {
    font-size: 12px;
    line-height: 1;
    padding: 8px;
    border-radius: 3px;
    background: var(--cardBackgroundDark);
    color: var(--textColor);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pvpServerItem .mobilLabel {
    position: relative;
    display: none;
    font-size: 11px;
    color: var(--textColor);
}
.pvpServerItem:hover {
    transform: scale(1.01);
    transform-origin: 0 0;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.4));
    z-index: 3;
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .pvpServerItem {
        padding: 0 15px 15px;
    }
    .pvpServerItem .mobilLabel {
        display: block;
    }
}
.eksBadge {
    display: inline-block;
}
.eksBadge,
.eksBadge.w100 {
    text-align: center;
}
.spotImage {
    width: 100%;
    position: relative;
    height: 190px;
}
.spotImageLeft,
.spotImageRight {
    width: 100%;
    position: sticky;
    top: 0;
}
.advertSelectArea {
    width: 100%;
    position: relative;
    display: grid;
    grid-template: "a c c d" 40px "b c c e" 40px "f f f f" 40px "f f f f" 40px "g g h h" 40px;
    grid-gap: 10px;
}
.advertSelectArea div:first-child {
    grid-area: a;
}
.advertSelectArea div:nth-child(2) {
    grid-area: b;
}
.advertSelectArea div:nth-child(3) {
    grid-area: c;
}
.advertSelectArea div:nth-child(4) {
    grid-area: d;
}
.advertSelectArea div:nth-child(5) {
    grid-area: e;
}
.advertSelectArea div:nth-child(6) {
    grid-area: f;
}
.advertSelectArea div:nth-child(7) {
    grid-area: g;
}
.advertSelectArea div:nth-child(8) {
    grid-area: h;
}
.advertSelectArea .advertSelect {
    background: #343891;
    cursor: pointer;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
.advertSelectArea .advertSelect,
.advertSelectArea .advertSelect span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.advertSelectArea .advertSelect span {
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: #343891;
    background: #80f1b1;
    border-radius: 50%;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}
.advertSelectArea .advertSelect.selected {
    background: #28a745;
}
.advertSelectArea .advertSelect.selected span {
    color: #fff;
    background: #157b2a;
}
.advertSelectArea .advertContent {
    background: var(--cardBackground);
    border: 1px solid var(--borderColor);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bestSellerArea,
.sellerItemWrapper {
    width: 100%;
    position: relative;
}
.sellerItemWrapper {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    z-index: 4;
}
.sellerItemWrapper .sellerItem {
    width: 100%;
    position: relative;
    background: var(--cardBackground);
    padding: 10px;
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.detail.sellerItemWrapper .sellerItem {
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.sellerItemWrapper .sellerItem .itemHeader {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
}
.sellerItemWrapper .sellerItem .itemHeader .headerImage {
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #343891;
}
.detail.sellerItemWrapper .sellerItem .itemHeader .headerImage {
    width: 50px;
    height: 50px;
}
.sellerItemWrapper .sellerItem .itemHeader .headerImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .titleDetail {
    width: calc(100% - 30px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .titleDetail h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.detail.sellerItemWrapper .sellerItem .itemHeader .headerTitle .titleDetail h3 {
    font-size: 14px;
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .titleDetail h3 i {
    color: var(--darkGreen);
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .personRosette {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .personRosette img {
    width: 100%;
}
@media (max-width: 576px) {
    .sellerItemWrapper .sellerItem .itemHeader .headerTitle .personRosette {
        display: none;
    }
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .lastSeenStatus {
    display: inline-block;
    font-size: 12px;
    color: var(--textColor);
    font-weight: 500;
    background: var(--background);
    padding: 3px 15px;
    line-height: 1;
    border-radius: 50px;
}
.sellerItemWrapper .sellerItem .itemHeader .headerTitle .lastSeenStatus.success {
    background: #28a745;
    color: #fff;
}
.sellerItemWrapper .sellerItem .itemBody {
    width: 100%;
    position: relative;
    padding-top: 10px;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    padding: 5px;
    border-radius: 3px;
    background: var(--background);
}
.detail.sellerItemWrapper .sellerItem .itemBody .itemBox {
    padding: 10px 5px;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.button {
    background: #343891;
    transition: all 0.2s;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.button i {
    color: #80f1b1;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.button p {
    color: #fff;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.online {
    background: #28a745;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.online i {
    color: #343891;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.online p {
    color: #fff;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.offline {
    background: #c3141b;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.offline i {
    color: #e3b21a;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox.offline p {
    color: #fff;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox i {
    font-size: 20px;
    color: var(--darkGreen);
}
.detail.sellerItemWrapper .sellerItem .itemBody .itemBox i {
    font-size: 20px;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox p {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--textColor);
}
.detail.sellerItemWrapper .sellerItem .itemBody .itemBox p {
    font-size: 12px;
}
.sellerItemWrapper .sellerItem .itemBody .itemBox p strong {
    color: var(--darkGreen);
    font-weight: 800;
}
@media (max-width: 576px) {
    .sellerItemWrapper .sellerItem .itemBody .itemBox p {
        font-size: 10px;
    }
}
@media (max-width: 576px) {
    .sellerItemWrapper .sellerItem .itemBody .itemButtons .buttonLeft i,
    .sellerItemWrapper .sellerItem .itemBody .itemButtons .buttonRight i {
        display: none;
    }
}
.sellerItemWrapper:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: all 0.3s;
}
.showcaseItemWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    z-index: 4;
}
.showcaseItemWrapper .showcaseItem {
    width: 100%;
    position: relative;
    padding: 8px 10px 10px;
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem {
        padding: 10px;
    }
}
.showcaseItemWrapper .showcaseItem:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #242852;
    border-radius: 0.5rem;
}
.premium.showcaseItemWrapper .showcaseItem:before {
    background: linear-gradient(0deg, #d9a648, #f2d091);
}
.list.showcaseItemWrapper .showcaseItem {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
}
.list.showcaseItemWrapper .showcaseItem:before {
    clip-path: polygon(calc(100% - 25px) 0, 100% 22px, 100% 100%, 0 100%, 0 0);
}
.showcaseItemWrapper .showcaseItem .itemHeader {
    width: 100%;
    position: relative;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemHeader {
        height: 42px;
    }
}
.list.showcaseItemWrapper .showcaseItem .itemHeader {
    width: 53%;
    border-bottom: none;
    padding-bottom: 0;
}
@media (max-width: 1399px) {
    .list.showcaseItemWrapper .showcaseItem .itemHeader {
        width: 50%;
    }
}
.premium.showcaseItemWrapper .showcaseItem .itemHeader {
    border-color: #bf6a1f;
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerImage {
    width: 40px;
    height: 40px;
    position: relative;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemHeader .headerImage {
        width: 30px;
        height: 30px;
    }
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerImage:hover {
    z-index: 10;
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerImage img {
    width: 100%;
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerImage .itemModal {
    width: 295px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: all 0s;
    z-index: 10;
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerImage .itemModal img {
    width: 100%;
    position: relative;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemHeader .headerImage .itemModal {
        display: none;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages {
    width: 70px;
    height: 40px;
    position: relative;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages {
        width: 30px;
        height: 30px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active {
    width: calc(100% + 20px);
    height: auto;
    padding: 10px;
    background: #323668;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: repeat(5, 20%);
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 6;
    gap: 5px 0;
    align-items: center;
}
.premium.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active {
    background: linear-gradient(0deg, #d9a648, #f2d091);
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active {
        padding: 5px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .itemsCounter,
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .showAdvertsButton {
    display: none;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem {
    display: block;
    position: relative;
    justify-self: center;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem:nth-child(3),
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem:nth-child(4),
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem:nth-child(5) {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(1);
    pointer-events: all;
    box-shadow: none;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem:hover {
    z-index: 10;
}
@media (max-width: 767px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem {
        padding: 5px;
    }
}
@media (max-width: 576px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .imageItem {
        padding: 2px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages.active .hideAdvertsButton {
    display: flex;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .itemsCounter {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #343891;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
    top: -5px;
    left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
    line-height: 1;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .itemsCounter {
        width: 16px;
        height: 16px;
        font-size: 8px;
        top: -10px;
        left: -10px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .showAdvertsButton {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    font-size: 13px;
    color: var(--textColor);
    padding-left: 5px;
}
.premium.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .showAdvertsButton {
    color: #343891;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .showAdvertsButton {
        width: 30px;
        height: 30px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .hideAdvertsButton {
    width: 20px;
    height: 20px;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    background: #343891;
    color: #fff;
    border-radius: 50%;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    line-height: 1;
    display: none;
    transition: all 0.2s;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .hideAdvertsButton:hover {
    transform: scale(1.3);
    transition: all 0.2s;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem {
    width: 40px;
    height: 40px;
    position: relative;
    display: none;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem {
        width: 30px;
        height: 30px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem img {
    width: 100%;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem:nth-child(3) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 3;
    pointer-events: none;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem:nth-child(4) {
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    transform: scale(0.9);
    box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem:nth-child(4) {
        left: 0;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem:nth-child(5) {
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    transform: scale(0.8);
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem:nth-child(5) {
        left: 0;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem .itemModal {
    width: 295px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: all 0s;
    z-index: 10;
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem .itemModal img {
    width: 100%;
    position: relative;
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerImages .imageItem .itemModal {
        display: none;
    }
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemHeader .headerTitle {
        width: calc(100% - 30px);
        padding-left: 5px;
    }
}
.multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle {
    width: calc(100% - 70px);
}
@media (max-width: 1099px) {
    .multiple.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle {
        width: calc(100% - 30px);
    }
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
}
.premium.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle h3 {
    color: #7d3e06;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemHeader .headerTitle h3 {
        font-size: 10px;
    }
}
.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle .sellerLink {
    font-size: 11px;
    font-weight: 400;
    color: var(--darkGreen);
}
.premium.showcaseItemWrapper .showcaseItem .itemHeader .headerTitle .sellerLink {
    color: #343891;
}
.showcaseItemWrapper .showcaseItem .itemBody {
    width: 100%;
    position: relative;
    padding-top: 10px;
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemBody {
        padding-top: 6px;
    }
}
.list.showcaseItemWrapper .showcaseItem .itemBody {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 0;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .itemButtons {
    width: 240px;
    margin-top: 0;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .commentStats {
    display: none;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle {
    width: 150px;
    font-size: 14px;
    margin-bottom: 0;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .titleDetail {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .titleDetail h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .titleDetail h3 {
    font-size: 14px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .titleDetail h3 {
    color: #343891;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .titleDetail h3 i {
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .titleDetail .commentStats {
        display: none !important;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .personRosette {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .personRosette img {
    width: 100%;
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemBody .ownerTitle .personRosette {
        display: none;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    padding: 5px;
    border-radius: 3px;
    background: #151632;
    margin: 6px 0;
}
.detail.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox {
    padding: 10px 5px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox {
    background: #f2d091;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox {
    text-align: center;
    margin-bottom: -4px;
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox {
        margin: 1px 0;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.button {
    background: #343891;
    transition: all 0.2s;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.button i {
    color: #4255d4;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.button p {
    color: #fff;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.online {
    background: #28a745;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.online i {
    color: #343891;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.online p {
    color: #fff;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.offline {
    background: #c3141b;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.offline i {
    color: #e3b21a;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox.offline p {
    color: #fff;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox i {
    font-size: 20px;
    color: var(--darkGreen);
}
.detail.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox i {
    font-size: 20px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox i {
    color: #343891;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox i {
    display: none;
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox i {
        font-size: 15px;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--textColor);
}
.detail.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p {
    font-size: 12px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p {
    color: #7d3e06;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p strong {
    color: #343891;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p {
    display: flex;
    flex-direction: column;
}
.showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p strong {
    color: var(--darkGreen);
    font-weight: 400;
}
@media (max-width: 576px) {
    .showcaseItemWrapper .showcaseItem .itemBody .ownerItemBox p {
        font-size: 10px;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #4255d4;
    padding: 5px 0 0;
    border-radius: 3px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter {
    background: #d5992c;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter {
    width: 220px;
}
.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterIcon {
    font-size: 15px;
    color: var(--darkGreen);
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterIcon {
    color: #343891;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterIcon {
        display: none;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem {
        gap: 2px;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumber {
    font-size: 13px;
    font-weight: 700;
    color: var(--textColor);
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumber {
    color: #f2dcb3;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumber {
        font-size: 10px;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumberInfo {
    font-size: 8px;
    font-weight: 400;
    color: var(--textColor);
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumberInfo {
    color: #f2dcb3;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.list.showcaseItemWrapper .showcaseItem .itemBody .itemInfo {
    width: 200px;
    margin-top: 0;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice {
    height: 47px;
    font-size: 15px;
    font-weight: 500;
    color: var(--darkGreen);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    gap: 2px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice {
    color: #343891;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice.showcase {
    justify-content: flex-end;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice {
    display: inline-block;
    font-size: 12px;
    color: #e3b21a;
    position: relative;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice {
    color: #7d3e06;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #c3141b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(5deg);
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .desc {
    font-size: 9px;
    color: #e3b21a;
    font-weight: 400;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .desc {
    color: #7d3e06;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .showcaseText {
    font-size: 9px;
    color: #fff;
    font-weight: 400;
    display: inline-flex;
    padding: 2px 5px 2px 0;
    position: relative;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .showcaseText:before {
    content: "";
    width: calc(100% + 10px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
    background: #343891;
    z-index: 0;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .showcaseText span {
    position: relative;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice {
        font-size: 12px;
    }
    .showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice {
        font-size: 10px;
    }
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenTitle {
    font-size: 9px;
    font-weight: 400;
    color: var(--textColor);
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenTitle {
    color: #7d3e06;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus {
    display: inline-block;
    font-size: 12px;
    color: var(--textColor);
    font-weight: 500;
    background: var(--background);
    padding: 3px 15px 0;
    line-height: 1;
    border-radius: 50px;
}
.premium.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus {
    background: #c58b21;
    color: #f2dcb3;
}
.showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus.success {
    background: #28a745;
    color: #fff;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus {
        padding: 3px 5px;
        font-size: 10px;
    }
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItem .itemBody .itemButtons .buttonLeft,
    .showcaseItemWrapper .showcaseItem .itemBody .itemButtons .buttonRight {
        padding: 8px 5px;
    }
    .showcaseItemWrapper .showcaseItem .itemBody .itemButtons .buttonLeft span,
    .showcaseItemWrapper .showcaseItem .itemBody .itemButtons .buttonRight span {
        font-size: 10px;
    }
    .showcaseItemWrapper .showcaseItem .itemBody .itemButtons .buttonLeft i,
    .showcaseItemWrapper .showcaseItem .itemBody .itemButtons .buttonRight i {
        display: none;
    }
}
.showcaseItemWrapper .showcaseItemRemove {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #c3141b;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.showcaseItemWrapper .showcaseItemRemove:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
.showcaseItemWrapper .showcaseItemFavorite {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #4255d4;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.showcaseItemWrapper .showcaseItemFavorite:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
@media (max-width: 1099px) {
    .showcaseItemWrapper .showcaseItemFavorite {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
}
.showcaseItemWrapper:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: all 0.3s;
    z-index: 5;
}
.showcaseItemWrapper.premium .commentStats {
    color: #343891;
}
.showcaseItemWrapper.premium .commentStats .stars {
    color: #d99441;
}
.showcaseItemWrapper.premium .itemButtons .buttonLeft {
    background: #f2d092;
    color: #343891;
}
.showcaseItemWrapper.premium .itemButtons .buttonLeft:before {
    background: #d9a74a;
}
.showcaseItemWrapper.super {
    filter: drop-shadow(0 0 4px rgba(242, 208, 145, 0.75));
}
.liveItems {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    z-index: 5;
}
@media (max-width: 1099px) {
    .liveItems {
        flex-direction: column;
    }
}
.liveItems:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundLight);
    clip-path: polygon(100% 0, 100% calc(100% - 17px), calc(100% - 14px) 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.liveItems .itemsDesc {
    width: 130px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 10px;
    background: var(--darkGreen);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.liveItems .itemsDesc i {
    font-size: 20px;
    color: var(--darkBlue);
    margin-bottom: 5px;
}
.liveItems .itemsDesc h3 {
    font-size: 13px;
    color: var(--darkBlue);
    font-weight: 800;
    margin: 0;
}
.liveItems .itemsDesc a {
    font-size: 10px;
    color: var(--darkBlue);
    transition: all 0.2s;
}
.liveItems .itemsDesc a:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
@media (max-width: 1099px) {
    .liveItems .itemsDesc {
        width: 100%;
        flex-direction: row;
        gap: 10px;
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
        padding: 5px 10px;
    }
}
.liveItems .itemsBody {
    width: calc(100% - 130px);
    padding: 10px;
    position: relative;
}
@media (max-width: 1099px) {
    .liveItems .itemsBody {
        width: 100%;
    }
}
.showcaseLiveItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    z-index: 4;
}
.showcaseLiveItem:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);

}
.dark.showcaseLiveItem:before {
    background: var(--cardBackgroundDark);
}
.showcaseLiveItem .itemImage {
    width: 40px;
    height: 40px;
    position: relative;
}
@media (max-width: 1099px) {
    .showcaseLiveItem .itemImage {
        width: 30px;
        height: 30px;
    }
}
.showcaseLiveItem .itemImage:hover {
    z-index: 10;
}
.showcaseLiveItem .itemImage img {
    width: 100%;
}
.showcaseLiveItem .itemImage .itemModal {
    width: 295px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: all 0s;
    z-index: 10;
}
.showcaseLiveItem .itemImage .itemModal img {
    width: 100%;
    position: relative;
}
@media (max-width: 576px) {
    .showcaseLiveItem .itemImage .itemModal {
        display: none;
    }
}
.multiple.showcaseLiveItem .itemImages {
    width: 70px;
    height: 40px;
    position: relative;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages {
        width: 30px;
        height: 30px;
    }
}
.multiple.showcaseLiveItem .itemImages.active {
    width: calc(100% + 20px);
    height: auto;
    padding: 10px;
    background: var(--cardBackgroundLight);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 6;
    gap: 5px 0;
    align-items: center;
}
.multiple.showcaseLiveItem .itemImages.active .itemsCounter,
.multiple.showcaseLiveItem .itemImages.active .showAdvertsButton {
    display: none;
}
.multiple.showcaseLiveItem .itemImages.active .imageItem {
    display: block;
    position: relative;
    justify-self: center;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages.active .imageItem {
        padding: 2px;
    }
}
.multiple.showcaseLiveItem .itemImages.active .imageItem:nth-child(3),
.multiple.showcaseLiveItem .itemImages.active .imageItem:nth-child(4),
.multiple.showcaseLiveItem .itemImages.active .imageItem:nth-child(5) {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(1);
    pointer-events: all;
}
.multiple.showcaseLiveItem .itemImages.active .imageItem:hover {
    z-index: 10;
}
.multiple.showcaseLiveItem .itemImages.active .hideAdvertsButton {
    display: flex;
}
.multiple.showcaseLiveItem .itemImages .itemsCounter {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #343891;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
    top: -5px;
    left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
    line-height: 1;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages .itemsCounter {
        width: 16px;
        height: 16px;
        font-size: 8px;
        top: -10px;
        left: -10px;
    }
}
.multiple.showcaseLiveItem .itemImages .showAdvertsButton {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    font-size: 13px;
    color: var(--textColor);
    padding-left: 5px;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages .showAdvertsButton {
        width: 30px;
        height: 30px;
    }
}
.multiple.showcaseLiveItem .itemImages .hideAdvertsButton {
    width: 20px;
    height: 20px;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    background: #343891;
    color: #fff;
    border-radius: 50%;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    line-height: 1;
    display: none;
    transition: all 0.2s;
}
.multiple.showcaseLiveItem .itemImages .hideAdvertsButton:hover {
    transform: scale(1.3);
    transition: all 0.2s;
}
.multiple.showcaseLiveItem .itemImages .imageItem {
    width: 40px;
    height: 40px;
    position: relative;
    display: none;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages .imageItem {
        width: 30px;
        height: 30px;
    }
}
.multiple.showcaseLiveItem .itemImages .imageItem img {
    width: 100%;
}
.multiple.showcaseLiveItem .itemImages .imageItem:nth-child(3) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 3;
    pointer-events: none;
}
.multiple.showcaseLiveItem .itemImages .imageItem:nth-child(4) {
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    transform: scale(0.9);
    box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages .imageItem:nth-child(4) {
        left: 0;
    }
}
.multiple.showcaseLiveItem .itemImages .imageItem:nth-child(5) {
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    transform: scale(0.8);
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages .imageItem:nth-child(5) {
        left: 0;
    }
}
.multiple.showcaseLiveItem .itemImages .imageItem .itemModal {
    width: 295px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: all 0s;
    z-index: 10;
}
.multiple.showcaseLiveItem .itemImages .imageItem .itemModal img {
    width: 100%;
    position: relative;
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemImages .imageItem .itemModal {
        display: none;
    }
}
.showcaseLiveItem .itemTitle {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
}
@media (max-width: 1099px) {
    .showcaseLiveItem .itemTitle {
        width: calc(100% - 30px);
        padding-left: 5px;
    }
}
.multiple.showcaseLiveItem .itemTitle {
    width: calc(100% - 70px);
}
@media (max-width: 1099px) {
    .multiple.showcaseLiveItem .itemTitle {
        width: calc(100% - 30px);
    }
}
.showcaseLiveItem .itemTitle h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
}
@media (max-width: 1099px) {
    .showcaseLiveItem .itemTitle h3 {
        font-size: 10px;
    }
}
.showcaseLiveItem .itemTitle .itemPrice {
    font-size: 13px;
    font-weight: 600;
    color: var(--darkGreen);
}
@media (max-width: 1099px) {
    .showcaseLiveItem .itemTitle .itemPrice {
        font-size: 11px;
    }
}
.showcaseItemNormal {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    z-index: 4;
}
.showcaseItemNormal .itemImage {
    width: 100%;
    position: relative;
    border: 2px solid var(--cardBackground);
    transition: all 0.3s;
    z-index: 1;
}
.premium.showcaseItemNormal .itemImage {
    border-color: #d9a648;
}
.showcaseItemNormal .itemImage img {
    width: 100%;
    position: relative;
    height: 117px;
    object-fit: cover;
    z-index: 1;
}
@media (max-width: 576px) {
    .showcaseItemNormal .itemImage img {
        height: 87px;
    }
}
.showcaseItemNormal .itemImage .showcaseText {
    width: 53px;
    height: 53px;
    background: #343891;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(100% 0, 0 100%, 0 0);
    z-index: 2;
}
.showcaseItemNormal .itemImage .showcaseText span {
    position: absolute;
    transform: rotate(-45deg);
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    top: 12px;
    left: 1px;
}
.showcaseItemNormal .itemImage:before {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
    z-index: 2;
}
.showcaseItemNormal .itemImage .sellerBox {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(128, 241, 177, 0.45);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.45);
    line-height: 1;
    transition: all 0.3s;
    z-index: 2;
}
.showcaseItemNormal .itemImage .sellerBox a {
    display: inline-flex;
    align-items: center;
    color: #fff;
    gap: 5px;
    line-height: 1;
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 1px 1px #000;
}
.showcaseItemNormal .itemImage .favAddButton {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #4255d4;
    color: #343891;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    border-radius: 50%;
    transition: all 0.2s;
}
.showcaseItemNormal .itemImage .favAddButton:hover {
    transform: scale(1.1);
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .showcaseItemNormal .itemImage .favAddButton {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
}
.showcaseItemNormal .itemImage .favRemoveButton {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #c3141b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    border-radius: 50%;
    transition: all 0.2s;
}
.showcaseItemNormal .itemImage .favRemoveButton:hover {
    transform: scale(1.1);
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .showcaseItemNormal .itemImage .favRemoveButton {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
}
.showcaseItemNormal .itemInfo {
    width: 100%;
    position: relative;
    padding: 5px 10px 10px;
    z-index: 2;
}
.showcaseItemNormal .itemInfo:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.premium.showcaseItemNormal .itemInfo:before {
    background: linear-gradient(0deg, #d9a648, #f2d091);
}
.showcaseItemNormal .itemInfo .itemHeader {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
    margin-bottom: 5px;
}
.premium.showcaseItemNormal .itemInfo .itemHeader {
    border-color: #bf6a1f;
}
.showcaseItemNormal .itemInfo .itemHeader .headerImage {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
}
.showcaseItemNormal .itemInfo .itemHeader .headerImage img {
    width: 100%;
}
.showcaseItemNormal .itemInfo .itemHeader .headerInfo {
    width: calc(100% - 35px);
    padding-left: 3px;
}
.showcaseItemNormal .itemInfo .itemTitle {
    width: 100%;
    position: relative;
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0 0 1px;
}
.showcaseItemNormal .itemInfo .itemTitle a {
    color: var(--textColor);
}
.premium.showcaseItemNormal .itemInfo .itemTitle a {
    color: #7d3e06;
}
.showcaseItemNormal .itemInfo .itemDesc {
    font-size: 11px;
    color: var(--textColor);
    position: relative;
    margin: 0;
}
.premium.showcaseItemNormal .itemInfo .itemDesc {
    color: #343891;
}
.showcaseItemNormal .itemInfo .ownerTitle {
    margin-bottom: 10px;
}
.showcaseItemNormal .itemInfo .ownerTitle,
.showcaseItemNormal .itemInfo .ownerTitle .titleDetail {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.showcaseItemNormal .itemInfo .ownerTitle .titleDetail h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.detail.showcaseItemNormal .itemInfo .ownerTitle .titleDetail h3 {
    font-size: 14px;
}
.showcaseItemNormal .itemInfo .ownerTitle .titleDetail h3 i {
    color: var(--darkGreen);
}
.showcaseItemNormal .itemInfo .ownerTitle .personRosette {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.showcaseItemNormal .itemInfo .ownerTitle .personRosette img {
    width: 100%;
}
@media (max-width: 576px) {
    .showcaseItemNormal .itemInfo .ownerTitle .personRosette {
        display: none;
    }
}
.showcaseItemNormal .itemInfo .ownerItemBox {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    padding: 5px;
    border-radius: 3px;
    background: var(--cardBackgroundLight);
}
.detail.showcaseItemNormal .itemInfo .ownerItemBox {
    padding: 10px 5px;
}
.showcaseItemNormal .itemInfo .ownerItemBox.button {
    background: #343891;
    transition: all 0.2s;
}
.showcaseItemNormal .itemInfo .ownerItemBox.button i {
    color: #4255d4;
}
.showcaseItemNormal .itemInfo .ownerItemBox.button p {
    color: #fff;
}
.showcaseItemNormal .itemInfo .ownerItemBox.button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.showcaseItemNormal .itemInfo .ownerItemBox.online {
    background: #28a745;
}
.showcaseItemNormal .itemInfo .ownerItemBox.online i {
    color: #343891;
}
.showcaseItemNormal .itemInfo .ownerItemBox.online p {
    color: #fff;
}
.showcaseItemNormal .itemInfo .ownerItemBox.offline {
    background: #c3141b;
}
.showcaseItemNormal .itemInfo .ownerItemBox.offline i {
    color: #e3b21a;
}
.showcaseItemNormal .itemInfo .ownerItemBox.offline p {
    color: #fff;
}
.showcaseItemNormal .itemInfo .ownerItemBox i {
    font-size: 20px;
    color: var(--darkGreen);
}
.detail.showcaseItemNormal .itemInfo .ownerItemBox i {
    font-size: 20px;
}
.showcaseItemNormal .itemInfo .ownerItemBox p {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--textColor);
}
.detail.showcaseItemNormal .itemInfo .ownerItemBox p {
    font-size: 12px;
}
.showcaseItemNormal .itemInfo .ownerItemBox p strong {
    color: var(--darkGreen);
    font-weight: 800;
}
@media (max-width: 576px) {
    .showcaseItemNormal .itemInfo .ownerItemBox p {
        font-size: 10px;
    }
}
.showcaseItemNormal .itemInfo .showcaseCounter {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--backgroundDark);
    padding: 5px 0;
    border-radius: 3px;
    margin-bottom: 10px;
}
.premium.showcaseItemNormal .itemInfo .showcaseCounter {
    background: #d5992c;
}
.showcaseItemNormal .itemInfo .showcaseCounter .counterIcon {
    font-size: 15px;
    color: var(--darkGreen);
}
.premium.showcaseItemNormal .itemInfo .showcaseCounter .counterIcon {
    color: #343891;
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .showcaseCounter .counterIcon {
        display: none;
    }
}
.showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem {
        gap: 2px;
    }
}
.showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem .counterNumber {
    font-size: 13px;
    font-weight: 700;
    color: var(--textColor);
}
.premium.showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem .counterNumber {
    color: #f2dcb3;
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem .counterNumber {
        font-size: 10px;
    }
}
.showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem .counterNumberInfo {
    font-size: 8px;
    font-weight: 400;
    color: var(--textColor);
}
.premium.showcaseItemNormal .itemInfo .showcaseCounter .counterCounterItem .counterNumberInfo {
    color: #f2dcb3;
}
.showcaseItemNormal .itemInfo .infoPrice {
    height: 47px;
    font-size: 15px;
    font-weight: 800;
    color: var(--darkGreen);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    gap: 2px;
}
.premium.showcaseItemNormal .itemInfo .infoPrice {
    color: #343891;
}
.showcaseItemNormal .itemInfo .infoPrice.showcase {
    justify-content: flex-end;
}
.showcaseItemNormal .itemInfo .infoPrice .oldPrice {
    display: inline-block;
    font-size: 12px;
    color: #e3b21a;
    position: relative;
}
.premium.showcaseItemNormal .itemInfo .infoPrice .oldPrice {
    color: #7d3e06;
}
.showcaseItemNormal .itemInfo .infoPrice .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #c3141b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(5deg);
}
.showcaseItemNormal .itemInfo .infoPrice .desc {
    font-size: 9px;
    color: #e3b21a;
    font-weight: 400;
}
.premium.showcaseItemNormal .itemInfo .infoPrice .desc {
    color: #7d3e06;
}
.showcaseItemNormal .itemInfo .infoPrice .showcaseText {
    font-size: 9px;
    color: #fff;
    font-weight: 400;
    display: inline-flex;
    padding: 2px 5px 2px 0;
    position: relative;
}
.showcaseItemNormal .itemInfo .infoPrice .showcaseText:before {
    content: "";
    width: calc(100% + 10px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
    background: #343891;
    z-index: 0;
}
.showcaseItemNormal .itemInfo .infoPrice .showcaseText span {
    position: relative;
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .infoPrice {
        font-size: 12px;
    }
    .showcaseItemNormal .itemInfo .infoPrice .oldPrice {
        font-size: 10px;
    }
}
.showcaseItemNormal .itemInfo .infoLastSeen {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.showcaseItemNormal .itemInfo .infoLastSeen .lastSeenTitle {
    font-size: 9px;
    font-weight: 400;
    color: var(--textColor);
}
.premium.showcaseItemNormal .itemInfo .infoLastSeen .lastSeenTitle {
    color: #7d3e06;
}
.showcaseItemNormal .itemInfo .infoLastSeen .lastSeenStatus {
    display: inline-block;
    font-size: 12px;
    color: var(--textColor);
    font-weight: 500;
    background: var(--background);
    padding: 3px 15px;
    line-height: 1;
    border-radius: 50px;
}
.premium.showcaseItemNormal .itemInfo .infoLastSeen .lastSeenStatus {
    background: #c58b21;
    color: #f2dcb3;
}
.showcaseItemNormal .itemInfo .infoLastSeen .lastSeenStatus.success {
    background: #28a745;
    color: #fff;
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .infoLastSeen .lastSeenStatus {
        padding: 3px 5px;
        font-size: 10px;
    }
}
.showcaseItemNormal .itemInfo .itemPrice {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 800;
    color: #4255d4;
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
    white-space: nowrap;
    text-shadow: 0 2px 2px #000;
}
.showcaseItemNormal .itemInfo .itemPrice .oldPrice {
    display: inline-block;
    font-size: 12px;
    color: #e3b21a;
    position: relative;
}
.showcaseItemNormal .itemInfo .itemPrice .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #c3141b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(5deg);
}
.showcaseItemNormal .itemInfo .itemPrice .desc {
    font-size: 9px;
    color: #e3b21a;
    font-weight: 400;
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .itemPrice {
        font-size: 15px;
        top: -43px;
    }
}
@media (max-width: 1099px) {
    .showcaseItemNormal .itemInfo .itemButtons .buttonLeft,
    .showcaseItemNormal .itemInfo .itemButtons .buttonRight {
        padding: 8px 5px;
    }
    .showcaseItemNormal .itemInfo .itemButtons .buttonLeft span,
    .showcaseItemNormal .itemInfo .itemButtons .buttonRight span {
        font-size: 10px;
    }
    .showcaseItemNormal .itemInfo .itemButtons .buttonLeft i,
    .showcaseItemNormal .itemInfo .itemButtons .buttonRight i {
        display: none;
    }
}
.showcaseItemNormal.premium .commentStats {
    color: #343891;
}
.showcaseItemNormal.premium .commentStats .stars {
    color: #d99441;
}
.showcaseItemNormal.premium .itemButtons .buttonLeft {
    background: #f2d092;
    color: #343891;
}
.showcaseItemNormal.premium .itemButtons .buttonLeft:before {
    background: #d9a74a;
}
.showcaseItemNormal.super {
    filter: drop-shadow(0 0 4px rgba(242, 208, 145, 0.75));
}
.showcaseItemCharacter {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.3s;
    z-index: 4;
}
.showcaseItemCharacter .showcaseItem {
    width: 100%;
    position: relative;
    padding: 10px;
}
.showcaseItemCharacter .showcaseItem:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #242852;
    border-radius: 0.5rem;
}
.premium.showcaseItemCharacter .showcaseItem:before {
    background: linear-gradient(0deg, #d9a648, #f2d091);
}
.list.showcaseItemCharacter .showcaseItem {
    display: flex;
    align-items: center;
    gap: 15px;
}
.list.showcaseItemCharacter .showcaseItem:before {
    clip-path: polygon(calc(100% - 25px) 0, 100% 22px, 100% 100%, 0 100%, 0 0);
}
.showcaseItemCharacter .showcaseItem .itemImage {
    width: 100%;
    position: relative;
}
.showcaseItemCharacter .showcaseItem .itemImage:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #151632;
    backdrop-filter: blur(2px);
    z-index: 2;
}
.premium.showcaseItemCharacter .showcaseItem .itemImage:before {
    background: #d3b170;
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    z-index: 3;
}
@media (max-width: 576px) {
    .showcaseItemCharacter .showcaseItem .itemImage .itemDetail {
        gap: 0;
    }
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail div {
    width: 45%;
    text-align: left;
    color: #fff;
    font-size: 10px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail div:first-child {
    font-weight: 900;
    font-size: 16px;
}
@media (max-width: 576px) {
    .showcaseItemCharacter .showcaseItem .itemImage .itemDetail div:first-child {
        font-size: 12px;
    }
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail div:nth-child(2n) {
    text-align: right;
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail div strong {
    color: #4255d4;
}
@media (max-width: 576px) {
    .showcaseItemCharacter .showcaseItem .itemImage .itemDetail div {
        font-size: 8px;
    }
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail .percent {
    width: 100%;
    height: 10px;
    position: relative;
    background: #242852;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.45);
}
.premium.showcaseItemCharacter .showcaseItem .itemImage .itemDetail .percent {
    background: #d5992c;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
.showcaseItemCharacter .showcaseItem .itemImage .itemDetail .percent span {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #4255d4;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    text-shadow: none;
    line-height: 11px;
    font-weight: 700;
}
.showcaseItemCharacter .showcaseItem .itemHeader {
    width: 100%;
    position: relative;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
}
.premium.showcaseItemCharacter .showcaseItem .itemHeader {
    border-color: #bf6a1f;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemHeader {
        height: 34px;
    }
}
.showcaseItemCharacter .showcaseItem .itemHeader .headerIcon {
    width: 30px;
    position: relative;
}
.showcaseItemCharacter .showcaseItem .itemHeader .headerIcon img {
    width: 100%;
}
.showcaseItemCharacter .showcaseItem .itemHeader .headerTitle {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemHeader .headerTitle {
        padding-left: 5px;
    }
}
@media (max-width: 576px) {
    .showcaseItemCharacter .showcaseItem .itemHeader .headerTitle {
        width: calc(100% - 32px);
    }
}
.showcaseItemCharacter .showcaseItem .itemHeader .headerTitle h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.premium.showcaseItemCharacter .showcaseItem .itemHeader .headerTitle h3 {
    color: #7d3e06;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemHeader .headerTitle h3 {
        font-size: 9px;
    }
}
.showcaseItemCharacter .showcaseItem .itemHeader .headerTitle .sellerLink {
    font-size: 11px;
    font-weight: 400;
    color: var(--darkGreen);
}
.premium.showcaseItemCharacter .showcaseItem .itemHeader .headerTitle .sellerLink {
    color: #343891;
}
.showcaseItemCharacter .showcaseItem .ownerTitle {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.list.showcaseItemCharacter .showcaseItem .ownerTitle {
    width: 150px;
    font-size: 14px;
    margin-bottom: 0;
}
.showcaseItemCharacter .showcaseItem .ownerTitle .titleDetail {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.showcaseItemCharacter .showcaseItem .ownerTitle .titleDetail h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.detail.showcaseItemCharacter .showcaseItem .ownerTitle .titleDetail h3 {
    font-size: 14px;
}
.premium.showcaseItemCharacter .showcaseItem .ownerTitle .titleDetail h3 {
    color: #343891;
}
.showcaseItemCharacter .showcaseItem .ownerTitle .titleDetail h3 i {
    color: var(--darkGreen);
}
@media (max-width: 576px) {
    .showcaseItemCharacter .showcaseItem .ownerTitle .titleDetail .commentStats {
        display: none !important;
    }
}
.showcaseItemCharacter .showcaseItem .ownerTitle .personRosette {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.showcaseItemCharacter .showcaseItem .ownerTitle .personRosette img {
    width: 100%;
}
@media (max-width: 576px) {
    .showcaseItemCharacter .showcaseItem .ownerTitle .personRosette {
        display: none;
    }
}
.showcaseItemCharacter .showcaseItem .itemBody {
    width: 100%;
    position: relative;
    padding-top: 10px;
}
.list.showcaseItemCharacter .showcaseItem .itemBody {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 0;
}
.list.showcaseItemCharacter .showcaseItem .itemBody .itemButtons {
    margin-top: 0;
}
.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #4255d4;
    padding: 5px 0 0;
    border-radius: 3px;
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter {
    background: #d5992c;
}
.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterIcon {
    font-size: 15px;
    color: var(--darkGreen);
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterIcon {
    color: #343891;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterIcon {
        display: none;
    }
}
.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem {
        gap: 2px;
    }
}
.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumber {
    font-size: 13px;
    font-weight: 700;
    color: var(--textColor);
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumber {
    color: #f2dcb3;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumber {
        font-size: 10px;
    }
}
.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumberInfo {
    font-size: 8px;
    font-weight: 400;
    color: var(--textColor);
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .showcaseCounter .counterCounterItem .counterNumberInfo {
    color: #f2dcb3;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.list.showcaseItemCharacter .showcaseItem .itemBody .itemInfo {
    margin-top: 0;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice {
    height: 47px;
    font-size: 15px;
    font-weight: 500;
    color: var(--darkGreen);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    gap: 2px;
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice {
    color: #343891;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice.showcase {
    justify-content: flex-end;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice {
    display: inline-block;
    font-size: 12px;
    color: #e3b21a;
    position: relative;
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice {
    color: #7d3e06;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 2px solid #c3141b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(5deg);
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .desc {
    font-size: 9px;
    color: #e3b21a;
    font-weight: 400;
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .desc {
    color: #7d3e06;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .showcaseText {
    font-size: 9px;
    color: #fff;
    font-weight: 400;
    display: inline-flex;
    padding: 2px 5px 2px 0;
    position: relative;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .showcaseText:before {
    content: "";
    width: calc(100% + 10px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
    background: #343891;
    z-index: 0;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .showcaseText span {
    position: relative;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice {
        font-size: 12px;
    }
    .showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoPrice .oldPrice {
        font-size: 10px;
    }
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenTitle {
    font-size: 9px;
    font-weight: 400;
    color: var(--textColor);
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenTitle {
    color: #7d3e06;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus {
    display: inline-block;
    font-size: 12px;
    color: var(--textColor);
    font-weight: 500;
    background: var(--background);
    padding: 3px 15px 0;
    line-height: 1;
    border-radius: 50px;
}
.premium.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus {
    background: #c58b21;
    color: #f2dcb3;
}
.showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus.success {
    background: #28a745;
    color: #fff;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemBody .itemInfo .infoLastSeen .lastSeenStatus {
        padding: 3px 5px;
        font-size: 10px;
    }
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItem .itemBody .itemButtons .buttonLeft,
    .showcaseItemCharacter .showcaseItem .itemBody .itemButtons .buttonRight {
        padding: 8px 5px;
    }
    .showcaseItemCharacter .showcaseItem .itemBody .itemButtons .buttonLeft span,
    .showcaseItemCharacter .showcaseItem .itemBody .itemButtons .buttonRight span {
        font-size: 10px;
    }
    .showcaseItemCharacter .showcaseItem .itemBody .itemButtons .buttonLeft i,
    .showcaseItemCharacter .showcaseItem .itemBody .itemButtons .buttonRight i {
        display: none;
    }
}
.showcaseItemCharacter .showcaseItemRemove {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #c3141b;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.showcaseItemCharacter .showcaseItemRemove:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
.showcaseItemCharacter .showcaseItemFavorite {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #4255d4;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 3;
    transition: all 0.2s;
}
.showcaseItemCharacter .showcaseItemFavorite:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}
@media (max-width: 1099px) {
    .showcaseItemCharacter .showcaseItemFavorite {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
}
.showcaseItemCharacter:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: all 0.3s;
    z-index: 5;
}
.showcaseItemCharacter.premium .commentStats {
    color: #343891;
}
.showcaseItemCharacter.premium .commentStats .stars {
    color: #d99441;
}
.showcaseItemCharacter.premium .itemButtons .buttonLeft {
    background: #f2d092;
    color: #343891;
}
.showcaseItemCharacter.premium .itemButtons .buttonLeft:before {
    background: #d9a74a;
}
.showcaseItemCharacter.super {
    filter: drop-shadow(0 0 4px rgba(242, 208, 145, 0.75));
}
.mobileTitle h2 {
    font-weight: 800;
    color: var(--textColor);
}
.streamerItem .streamerImage {
    clip-path: polygon(calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 0);
}
.streamerItem .streamerImage .imageInner {
    clip-path: polygon(calc(100% - 51px) 0, 100% 51px, 100% 100%, 0 100%, 0 0);
}
.streamerItem .streamerName h4 {
    padding: 8px 8px 20px;
    font-size: 15px;
}
.streamerItem .streamerName:before,
.streamerItem .streamerName h4 {
    clip-path: polygon(calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 0);
}
.streamerItem .streamerSocial {
    gap: 10px;
    left: 20px;
    clip-path: polygon(100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 0);
}
.streamerItem .streamerSocial a {
    font-size: 14px;
}
.integrationItem {
    width: 100%;
    position: relative;
    padding: 10px;
    border-radius: 5px;
    background: var(--cardBackground);
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.integrationItem .itemLogo {
    width: 100%;
    position: relative;
    padding: 0 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.integrationItem .itemLogo img {
    height: 100px;
}
.integrationItem .integrationStatus {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    background: var(--cardBackgroundLight);
    border-radius: 5px;
    border: 2px solid var(--borderColor);
    padding: 5px 10px;
}
.integrationItem .integrationStatus.success {
    background: #28a745;
    border-color: #157b2a;
    color: #fff;
}
.integrationItem .integrationStatus.warning {
    background: #e3b21a;
    border-color: #b58c0d;
    color: #000;
}
@media (max-width: 1099px) {
    .integrationItem .itemButtons {
        flex-direction: column;
    }
    .integrationItem .itemButtons .buttonLeft,
    .integrationItem .itemButtons .buttonRight {
        width: 100%;
    }
    .integrationItem .itemButtons .buttonRight {
        order: 1;
    }
    .integrationItem .itemButtons .buttonLeft {
        order: 2;
    }
}
.streamerItem {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    padding-bottom: 20px;
}
.streamerItem .streamerImage {
    background: var(--cardBackground);
    padding: 4px;
}
.streamerItem .streamerImage,
.streamerItem .streamerImage .imageInner {
    width: 100%;
    position: relative;
    clip-path: polygon(calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
.streamerItem .streamerImage .imageInner img {
    width: 100%;
}
.streamerItem .streamerImage .streamerStatus {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 3px 3px #000;
    z-index: 2;
}
.streamerItem .streamerImage .streamerStatus .icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cardBackground);
    display: flex;
    align-items: Center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.25);
    text-shadow: none;
}
.streamerItem .streamerImage .streamerStatus.online .icon {
    background: #28a745;
}
.streamerItem .streamerName {
    width: 90%;
    position: absolute;
    left: -4px;
    bottom: 13px;
    z-index: 2;
}
.streamerItem .streamerName h4 {
    width: 100%;
    position: relative;
    padding: 8px 8px 15px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #343891;
    font-size: 12px;
    color: #fff;
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.streamerItem .streamerName h4 i {
    color: #4255d4;
}
.streamerItem .streamerName:before {
    content: "";
    width: 60%;
    height: 100%;
    position: absolute;
    top: -8px;
    left: -8px;
    background: #282b78;
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.streamerItem .streamerSocial {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px 3px 20px;
    background: #4255d4;
    position: absolute;
    bottom: 0;
    left: 25px;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
    z-index: 3;
}
.streamerItem .streamerSocial a {
    font-size: 12px;
    color: #343891;
    margin: 0;
    padding: 0;
    transition: all 0.2s;
}
.streamerItem .streamerSocial a:hover {
    transform: scale(1.3);
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .streamerItem .streamerSocial {
        padding: 3px 8px;
        left: 10px;
    }
}
.streamerStreamBox {
    width: 100%;
    height: 650px;
}
@media (max-width: 1199px) {
    .streamerStreamBox {
        height: 530px;
    }
}
.streamerChatBox {
    width: 100%;
    height: 420px;
}
@media (max-width: 1199px) {
    .streamerChatBox {
        height: 525px;
    }
}
.streamerContainer {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-self: stretch;
}
.streamerContainer .streamerSidebar {
    width: 240px;
    position: relative;
    height: auto;
    background: var(--cardBackground);
    border-right: 1px solid var(--cardBackgroundDark);
    box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.35);
    padding: 30px 10px 10px;
}
.streamerContainer .streamerSidebar .sidebarContent {
    position: sticky;
    height: auto;
    top: 20px;
}
@media (max-width: 576px) {
    .streamerContainer .streamerSidebar {
        display: none;
    }
}
.streamerContainer .streamerContent {
    width: calc(100% - 240px);
    position: relative;
    padding: 30px;
}
@media (max-width: 576px) {
    .streamerContainer .streamerContent {
        width: 100%;
        padding: 10px;
    }
}
.streamerContainer .streamerContentDetail {
    width: calc(100% - 240px);
    position: relative;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-self: stretch;
}
@media (max-width: 576px) {
    .streamerContainer .streamerContentDetail {
        width: 100%;
        padding: 10px;
    }
}
.streamerContainer .streamerContentDetail .streamerDetail {
    width: calc(100% - 340px);
    height: auto;
}
@media (max-width: 576px) {
    .streamerContainer .streamerContentDetail .streamerDetail {
        width: 100%;
    }
}
.streamerContainer .streamerContentDetail .streamerChat {
    width: 340px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-self: stretch;
    border-left: 1px solid var(--borderColor);
}
@media (max-width: 576px) {
    .streamerContainer .streamerContentDetail .streamerChat {
        width: 100%;
    }
}
.streamerSidebarTitle {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.streamerSidebarTitle h4 {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    padding: 0 30px 0 0;
    color: var(--textColor);
    position: relative;
    z-index: 2;
}
.inner.streamerSidebarTitle h4,
.streamerSidebarTitle h4 {
    background: var(--cardBackground);
}
.streamerSidebarTitle:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 1px solid var(--darkGreen);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
@media (max-width: 576px) {
    .streamerSidebarTitle {
        flex-direction: column;
        gap: 10px;
    }
    .streamerSidebarTitle h4 {
        padding: 0 10px;
        font-size: 16px;
        font-weight: 600;
        order: 2;
    }
    .streamerSidebarTitle:before {
        top: auto;
        bottom: 10px;
        transform: translateY(0);
    }
}
.streamerList {
    flex-direction: column;
    gap: 5px;
    padding: 15px 0;
}
.streamerList,
.streamerList .streamer {
    width: 100%;
    position: relative;
    display: flex;
}
.streamerList .streamer {
    align-items: center;
    justify-content: space-between;
}
.streamerList .streamer:hover {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.streamerList .streamer:hover:before {
    background: var(--cardBackgroundLight);
}
.streamerList .streamer:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 0);
}
.streamerList .streamer .image {
    width: 35px;
    height: 35px;
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 0);
}
.streamerList .streamer .image img {
    width: 35px;
    height: 35px;
    position: relative;
    object-fit: cover;
}
.streamerList .streamer .info {
    width: calc(100% - 35px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 5px;
}
.streamerList .streamer .info .detail {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
}
.streamerList .streamer .info .detail .name {
    font-size: 13px;
    color: #dedee3;
    padding-left: 10px;
}
.streamerList .streamer .info .detail .subject {
    font-size: 12px;
    color: #adadb8;
    padding-left: 10px;
}
.streamerList .streamer .info .status {
    width: 40px;
    position: relative;
    line-height: 1;
    font-size: 8px;
    color: #fff;
    padding: 3px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.streamerList .streamer .info .status.online {
    background: #28a745;
}
.streamerTitle {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.streamerTitle h3 {
    display: inline-block;
    background: var(--background);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    padding: 0 30px 0 0;
    color: var(--textColor);
    position: relative;
    z-index: 2;
}
.streamerTitle h3 a {
    color: var(--darkGreen);
}
.streamerTitle h3 a:hover {
    color: var(--darkGreenDark);
}
.streamerTitle:before {
    width: 100%;
    height: 0;
    border-bottom: 1px solid var(--darkGreen);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
@media (max-width: 576px) {
    .streamerTitle {
        flex-direction: column;
        gap: 10px;
    }
    .streamerTitle h3 {
        padding: 0 10px;
        font-size: 16px;
        font-weight: 600;
        order: 2;
    }
    .streamerTitle:before {
        top: auto;
        bottom: 10px;
        transform: translateY(0);
    }
}
.streamerCard,
.streamerCard .cardImage {
    width: 100%;
    position: relative;
}
.streamerCard .cardImage img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.streamerCard .cardDetail {
    width: 100%;
    position: relative;
    padding: 10px;
    z-index: 2;
}
.streamerCard .cardDetail:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundLight);
    clip-path: polygon(100% 0, 100% 100%, 25px 100%, 0 calc(100% - 22px), 0 0);
}
.streamerCard .cardDetail .cardTitle {
    width: 100%;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    margin: 0 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.streamerCard .cardDetail .cardTitle a {
    color: var(--textColor);
}
.streamerCard .cardDetail .streamerInfo {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.streamerCard .cardDetail .streamerInfo .image {
    width: 35px;
    height: 35px;
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 0);
}
.streamerCard .cardDetail .streamerInfo .image img {
    width: 35px;
    height: 35px;
    position: relative;
    object-fit: cover;
}
.streamerCard .cardDetail .streamerInfo .detail {
    width: calc(100% - 35px);
    position: relative;
    display: flex;
    flex-direction: column;
}
.streamerCard .cardDetail .streamerInfo .detail .name {
    font-size: 13px;
    color: #dedee3;
    padding-left: 10px;
}
.streamerCard .cardDetail .streamerInfo .detail .subject {
    font-size: 12px;
    color: #adadb8;
    padding-left: 10px;
}
.streamerCard .cardDetail .streamerInfo .detail .tags {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-left: 10px;
}
.streamerCard .cardDetail .streamerInfo .detail .tags .tag {
    font-size: 10px;
    line-height: 1;
    padding: 5px;
    border-radius: 3px;
    background: var(--cardBackgroundDark);
    color: var(--textColor);
    display: inline-flex;
    align-items: center;
}
.mobileCards {
    width: 100%;
    position: relative;
    display: flex;
    gap: 15px;
}
.mobileCards .mobileCard {
    width: 250px;
    position: relative;
}
.mobileStreamerRow {
    width: 100%;
    position: relative;
    display: flex;
    gap: 15px;
}
.mobileStreamerRow .mobileStreamerCol {
    width: 150px;
    position: relative;
}
.mobileStreamerRow .mobileStreamerCol .streamerItem {
    width: 150px;
}
.showMoreButtonBox {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.showMoreButtonBox:before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    border-bottom: 2px solid var(--borderColor);
}
.showMoreButtonBox a {
    position: relative;
}
.showMoreButtonBox a:before {
    content: "";
    width: calc(100% + 40px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -20px;
    background: var(--background);
}
.showMoreButtonBox a:hover span {
    background: #343891;
    color: #fff;
}
.showMoreButtonBox a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 12px;
    color: var(--textColor);
    gap: 8px;
    padding: 5px;
    border-radius: 3px;
}
.streamerRow {
    width: calc(100% + 20px);
    display: grid;
    grid-template-columns: repeat(9, 11.1111111111%);
    margin-left: -20px;
}
.streamerRow .streamerCol {
    margin-left: 20px;
}
.detailChat {
    width: 100%;
    height: calc(100vh - 198px);
    position: sticky;
    top: 0;
}
@media (max-width: 576px) {
    .detailChat {
        position: relative;
        height: 250px;
    }
}
.streamerHeader {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
@media (max-width: 576px) {
    .streamerHeader {
        padding: 20px 0;
    }
}
.streamerHeader .image {
    width: 73px;
    height: 73px;
    border-radius: 50%;
    border: 3px solid var(--darkGreen);
    overflow: hidden;
}
.streamerHeader .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.streamerHeader .detail {
    width: calc(100% - 73px);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.streamerHeader .detail .name {
    font-size: 18px;
    font-weight: 600;
    color: var(--textColor);
}
.streamerHeader .detail .name i {
    color: #343891;
}
.streamerHeader .detail .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
}
.streamerHeader .detail .tags {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.streamerHeader .detail .tags .tag {
    font-size: 12px;
    line-height: 1;
    padding: 5px;
    border-radius: 3px;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    display: inline-flex;
    align-items: center;
}
body {
    --borderColor: #262c53;
    --linkActiveColor: #4255d4;
    --darkGreen: #4255d4;
}
.main-bg-color {
    background-color: #151632;
    border-radius: 0.75rem;
}
.nav-item {
    font-size: 1rem;
    transition: 0.5s ease;
    position: relative;
}
.nav-item a:before {
    bottom: 0;
    height: 0.125rem;
    width: 0;
    transition: 0.3s ease-in-out;
}
.nav-item a:after,
.nav-item a:before {
    content: "";
    position: absolute;
    left: 0;
    background-color: #4255d4;
    color: #4255d4;
}
.nav-item a:after {
    top: 0;
    height: 0;
    width: 100%;
    transition: 0.5s ease-in-out;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
}
.nav-item a:hover:after {
    transform: scaleX(1);
    transform-origin: left;
    height: 100%;
}
.nav-item a:hover:before {
    width: 100%;
}
body.light {
    --darkBlue: #4255d4;
}
html {
    scroll-behavior: smooth;
}
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1600px;
    }
}
@media (max-width: 1399px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1300px;
    }
}
a {
    color: var(--darkGreen);
}
a:hover {
    color: var(--darkGreenDark);
}
.headerArea {
    width: 100%;
    position: relative;
    background: #1b214e;
    border-bottom: 1px solid #15161c;
    z-index: 20;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    opacity: 0.975;
}
body.light .headerArea {
    border-color: #ccc;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
@media (max-width: 1099px) {
    .headerArea.detail {
        padding-top: 52px;
    }
}
.headerArea .headerTop {
    width: 100%;
    position: relative;
    background: #1a2047;
    border-bottom: 0.0625rem solid var(--borderColor);
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
body.light .headerArea .headerTop {
    background: #fff;
}
.headerArea .headerTop .topMenu {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
}
.headerArea .headerTop .topMenu span {
    border-right: 1px solid var(--borderColor);
    padding-top: 8px;
    padding-bottom: 3px;
    cursor: default;
    font-weight: 100;
    color: #9daad4;
    font-size: 13px;
    line-height: 28px;
}
.headerArea .headerTop .topMenu a {
    position: relative;
    color: var(--textColor);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 13px 13px 8px;
    font-size: 12px;
    transition: all 0.3s;
}
.headerArea .headerTop .topMenu a:hover {
    scale: 1.05;
}
.headerArea .headerTop .topMenu a:last-child:hover {
    scale: 1;
}
.headerArea .headerTop .topMenu a:before {
    content: "";
    width: 0;
    height: 100%;
}
.headerArea .headerTop .topMenu a:first-child {
    padding-left: 0;
}
.headerArea .headerTop .topMenu a:last-child:before {
    border-right: none;
}
.headerArea .headerTop .topMenu a.success {
    color: #4255d4;
}
body.light .headerArea .headerTop .topMenu a.success {
    color: #343891;
}
.headerArea .headerTop .topMenu a:hover {
    color: #4255d4;
}
body.light .headerArea .headerTop .topMenu a:hover {
    color: #343891;
}
@media (max-width: 1099px) {
    .headerArea .headerTop {
        display: none;
    }
}
.headerArea .logoArea {
    padding: 0;
}
.headerArea .logoArea,
.headerArea .logoArea .logo {
    width: 100%;
    position: relative;
}
.headerArea .logoArea .logo img {
    height: 37px;
}
.headerArea .logoArea .searchInput:focus {
    background: #4255d4;
}
.headerArea .logoArea .searchInput input {
    width: 100%;
    position: relative;
    background: #252954;
    border: 1px solid #363c67;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    color: var(--textColor);
    border-radius: 0.325rem;
    outline: 0;
}
.headerArea .logoArea .searchInput input:focus,
.headerArea .logoArea .searchInput input:hover {
    border: 1px solid #4255d4;
}
.headerArea .logoArea .searchInput input::placeholder {
    color: var(--placeholderColor);
}
body.light .headerArea .logoArea .searchInput input {
    background: #fff;
}
body.light .headerArea .logoArea .searchInput input:focus {
    outline: none;
}
.searchButton {
    width: 48px;
    height: 46px;
    border-top-right-radius: 0.325rem;
    border-bottom-right-radius: 0.325rem;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--textColor);
    text-decoration: none;
    transition: all 0.3s;
}
.headerArea .logoArea .searchInput input:focus + .searchButton,
.headerArea .logoArea .searchInput input:hover + .searchButton {
    background: #4255d4;
    color: #fff;
}
@media (max-width: 1099px) {
    .headerArea .logoArea {
        display: none;
    }
}
.headerArea .header {
    width: 100%;
    position: relative;
    padding: 0;
    border-top: 0.0625rem solid var(--borderColor);
}
@media (max-width: 1099px) {
    .headerArea .header {
        display: none;
    }
}
.headerArea .headerMobile {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    padding: 10px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: block;
    z-index: 20;
}
.headerArea .headerMobile .headerMobileLogo {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.headerArea .headerMobile .headerMobileLogo img {
    height: 40px;
}
.headerArea .headerMobile .headerMobileButtons {
    width: 100%;
    position: relative;
    top: 2px;
    left: 0;
    padding: 0;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}
.headerArea .headerMobile .headerMobileButtons .leftBox,
.headerArea .headerMobile .headerMobileButtons .rightBox {
    display: flex;
    align-items: center;
    gap: 15px;
}
.headerArea .headerMobile .headerMobileButtons .headerMobileButton {
    font-size: 25px;
    color: var(--textColor);
}
.headerArea .headerMobile .searchInput {
    width: 100%;
    position: relative;
    background: var(--borderColor);
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
    padding: 2px;
    margin-top: 10px;
}
.headerArea .headerMobile .searchInput.hide {
    display: none;
}
.headerArea .headerMobile .searchInput input {
    width: 100%;
    position: relative;
    background: var(--background);
    border: none;
    border-radius: 0 !important;
    clip-path: polygon(calc(100% - 16px) 0, 100% 13px, 100% 100%, 0 100%, 0 0);
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    color: var(--textColor);
}
.headerArea .headerMobile .searchInput input::placeholder {
    color: var(--placeholderColor);
}
.headerArea .headerMobile .searchInput .searchButton {
    width: 60px;
    height: 30px;
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--textColor);
    border-left: 1px solid var(--borderColor);
    background: var(--backgroundDark);
    clip-path: polygon(calc(100% - 16px) 0, 100% 13px, 100% 100%, 0 100%, 0 0);
    text-decoration: none;
}
.headerArea .headerMobile .searchInput .searchButton:hover {
    background: #343891;
    color: #fff;
}
@media (min-width: 1098px) {
    .headerArea .headerMobile {
        display: none;
    }
}
@media (max-width: 1099px) {
    .headerArea {
        padding-top: 106px;
        background: none;
    }
}
.rightButton {
    display: inline-flex;
    padding: 10px 30px;
    background: #282b78;
    clip-path: polygon(85% 0, 100% 35%, 100% 100%, 0 100%, 0 0);
    color: #fff;
    font-weight: 600;
    position: relative;
}
.rightButton span {
    position: relative;
    z-index: 2;
}
.rightButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: #343891;
    clip-path: polygon(85% 0, 100% 35%, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
@media (max-width: 966px) {
    .rightButton {
        font-size: 12px;
        padding: 10px 15px;
    }
}
.leftButton {
    display: inline-flex;
    padding: 10px 30px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 15% 100%, 0 65%, 0 0);
    color: var(--textColor);
    font-weight: 600;
    position: relative;
}
.leftButton span {
    position: relative;
    z-index: 2;
}
.leftButton:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 15% 100%, 0 65%, 0 0);
    z-index: 1;
}
@media (max-width: 966px) {
    .leftButton {
        font-size: 12px;
        padding: 10px 15px;
    }
}
.social {
    width: 100%;
    padding: 12px 0 2px;
}
.social,
.social a {
    position: relative;
    display: flex;
    align-items: center;
}
.social a {
    color: var(--textColor);
    text-decoration: none;
    width: 28px;
    height: 18px;
    justify-content: center;
    font-size: 14px;
}
.social a:hover {
    color: #4255d4;
}
.social.top {
    justify-content: start;
}
.siteBorder {
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--borderColor);
}
.bg-body-tertiary {
    background-color: transparent !important;
    padding: 0;
}
.newNav .nav-item .nav-link {
    color: var(--textColor);
    padding-top: 13px;
    padding-bottom: 13px;
}
@media (max-width: 966px) {
    .newNav .nav-item .nav-link {
        font-size: 12px;
    }
}
.newNav .nav-item:first-child .nav-link {
    padding-left: 0;
}
.titleArea {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 4;
    background-color: #242852;
    padding: .5rem 1rem .25rem 1rem;
    border-radius: .325rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
}
.titleArea h2,
.titleArea h3 {
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    padding: 0 30px 0 0;
    color: var(--textColor);
    position: relative;
    z-index: 2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(0deg, #888, #fff 75%);
}
@media (max-width: 1399px) {
    .titleArea h2,
    .titleArea h3 {
        font-size: 20px;
    }
}
@media (max-width: 765px) {
    .titleArea h2,
    .titleArea h3 {
        font-size: 16px;
        padding-right: 15px;
    }
}
.titleArea h3 {
    font-size: 20px;
}
@media (max-width: 576px) {
    .titleArea h3 {
        font-size: 15px;
    }
}
.titleArea .rightBox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 0 30px;
    position: relative;
    z-index: 2;
}
@media (max-width: 765px) {
    .titleArea .rightBox {
        padding-left: 15px;
    }
}
@media (max-width: 576px) {
    .titleArea .rightBox .buttonRightSingle {
        padding: 8px;
        font-size: 10px;
    }
}
.mobileBeforeNone.titleArea:before {
    display: none;
}
.carouselButton {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--linkText);
    background: var(--cardBackground);
    border-radius: 50%;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.carouselButton:hover {
    background: #343891;
    color: #fff;
    transform: scale(1.2);
    transition: all 0.2s;
}
@media (max-width: 1399px) {
    .carouselButton {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
}
.siteButton {
    color: var(--textColor);
    font-weight: 600;
    position: relative;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    transition: all 0.2s ease-in-out;
}
.siteButton span {
    display: inline-flex;
    padding: 10px 30px;
    background: #242852;
    position: relative;
    z-index: 2;
}
.siteButton span:before {
    top: 0;
    left: 0;
    z-index: 1;
}
.siteButton span:after,
.siteButton span:before {
    background-color: #151632;
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 0.4rem;
    transition: background-color 0.15s ease-in-out;
}
.siteButton span:after {
    bottom: 0;
    right: 0;
}
.siteButton:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}
.siteButton:hover span {
    background: #343891;
    color: #fff;
    transition: all 0.2s ease-in-out;
}
@media (max-width: 1399px) {
    .siteButton {
        font-size: 12px;
    }
    .siteButton span {
        padding: 8px 20px;
    }
}
.itemButtons {
    width: 100%;
    margin-top: 10px;
}
.itemButtons,
.itemButtons .buttonLeft {
    position: relative;
    display: flex;
    align-items: center;
}
.itemButtons .buttonLeft {
    width: 50%;
    justify-content: center;
    padding: 10px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
    color: var(--textColor);
    font-size: 11px;
    font-weight: 400;
}
.itemButtons .buttonLeft span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.itemButtons .buttonLeft span i {
    color: var(--darkGreen);
}
.itemButtons .buttonLeft:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
    z-index: 1;
}
.itemButtons .buttonLeft:hover {
    background: #282b78;
    color: #fff;
}
.itemButtons .buttonLeft:hover span i {
    color: #4255d4;
}
.itemButtons .buttonLeft:hover:before {
    background: #343891;
}
.itemButtons .buttonFull {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--borderColor);
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
    color: var(--textColor);
    font-size: 11px;
    font-weight: 400;
    position: relative;
}
.itemButtons .buttonFull span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.itemButtons .buttonFull span i {
    color: #4255d4;
}
.itemButtons .buttonFull:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 16px) 0, 100% 13px, 100% 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
    z-index: 1;
}
.itemButtons .buttonFull:hover {
    background: #282b78;
    color: #fff;
}
.itemButtons .buttonFull:hover:before {
    background: #343891;
}
.itemButtons .buttonRight {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #282b78;
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    position: relative;
}
.itemButtons .buttonRight span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.itemButtons .buttonRight span i {
    color: #4255d4;
}
.itemButtons .buttonRight:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: #343891;
    clip-path: polygon(calc(100% - 16px) 0, 100% 13px, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
.itemButtons .buttonRight:hover {
    background: #248a50;
    color: #343891;
}
.itemButtons .buttonRight:hover span i {
    color: #343891;
}
.itemButtons .buttonRight:hover:before {
    background: #4255d4;
}
.buttonLeftSingle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
    color: var(--textColor);
    font-size: 11px;
    font-weight: 400;
    position: relative;
    border: none;
}
.dark.buttonLeftSingle {
    background: var(--cardBackgroundLight);
    color: var(--textColor);
}
.buttonLeftSingle.auto {
    width: auto;
}
.buttonLeftSingle.large {
    font-size: 15px;
    padding: 14px 30px;
}
@media (max-width: 999px) {
    .buttonLeftSingle.large {
        padding: 9px 20px;
    }
}
.buttonLeftSingle.leftTop {
    clip-path: polygon(17px 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 14px);
}
.bottom.buttonLeftSingle {
    clip-path: polygon(100% 0, 100% calc(100% - 14px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.top.buttonLeftSingle {
    clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
}
.buttonLeftSingle span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.buttonLeftSingle span i {
    color: #4255d4;
}
body.light .buttonLeftSingle span i {
    color: #343891;
}
.buttonLeftSingle:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
    z-index: 1;
}
.buttonLeftSingle:before,
.dark.buttonLeftSingle:before {
    background: var(--cardBackground);
}
.leftTop.buttonLeftSingle:before {
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 13px);
}
.bottom.buttonLeftSingle:before {
    clip-path: polygon(100% 0, 100% calc(100% - 13px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
}
.top.buttonLeftSingle:before {
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 13px, 100% 100%, 0 100%, 0 13px);
}
.buttonLeftSingle:hover {
    background: #282b78;
    color: #fff;
}
.buttonLeftSingle:hover span i,
body.light .buttonLeftSingle:hover span i {
    color: #4255d4;
}
.buttonLeftSingle:hover:before {
    background: #343891;
}
.buttonRightSingle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #282b78;
    border-radius:.5rem;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    position: relative;
    border: none;
}
.dark.buttonRightSingle {
    background: var(--cardBackgroundLight);
    color: var(--textColor);
}
.success.buttonRightSingle {
    background: #28a745;
    color: #fff;
}
.warning.buttonRightSingle {
    background: #b58c0d;
    color: #000;
    font-weight: 700;
}
.danger.buttonRightSingle {
    background: #990d11;
    color: #fff;
    font-weight: 700;
}
.rightBottom.buttonRightSingle {
    border-radius:.5rem;
}
.leftBottom.buttonRightSingle {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.leftTop.buttonRightSingle {
    clip-path: polygon(17px 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 14px);
}
.bottom.buttonRightSingle {
    clip-path: polygon(100% 0, 100% calc(100% - 14px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 14px), 0 0);
}
.top.buttonRightSingle {
    clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
}
.mini.buttonRightSingle {
    padding: 7px 20px;
}
.buttonRightSingle.auto {
    width: auto;
}
.buttonRightSingle.large {
    font-size: 15px;
    padding: 14px 30px;
}
@media (max-width: 999px) {
    .buttonRightSingle.large {
        padding: 9px 20px;
    }
}
.buttonRightSingle.large2 {
    font-size: 13px;
    padding: 14px 30px;
}
.buttonRightSingle.large2 i {
    font-size: 16px;
}
@media (max-width: 999px) {
    .buttonRightSingle.large2 {
        padding: 9px 20px;
    }
}
.buttonRightSingle span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.buttonRightSingle span i {
    color: #4255d4;
}
.success.buttonRightSingle span i {
    color: #fff;
}
.warning.buttonRightSingle span i {
    color: #000;
}
.danger.buttonRightSingle span i {
    color: #fff;
}
.buttonRightSingle:before {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 2px;
    left: 2px;
    background: #343891;
    border-radius:.5rem;
    z-index: 1;
}
.dark.buttonRightSingle:before {
    background: var(--cardBackground);
}
.success.buttonRightSingle:before {
    background: #157b2a;
}
.warning.buttonRightSingle:before {
    background: #e3b21a;
}
.danger.buttonRightSingle:before {
    background: #c3141b;
}
.rightBottom.buttonRightSingle:before {
    border-radius:.5rem;
}
.leftBottom.buttonRightSingle:before {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
}
.leftTop.buttonRightSingle:before {
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 13px);
}
.bottom.buttonRightSingle:before {
    clip-path: polygon(100% 0, 100% calc(100% - 13px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 13px), 0 0);
}
.top.buttonRightSingle:before {
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 13px, 100% 100%, 0 100%, 0 13px);
}
.buttonRightSingle:hover {
    background: #248a50;
    color: #343891;
}
.buttonRightSingle:hover span i {
    color: #343891;
}
.buttonRightSingle:hover:before {
    background: #4255d4;
}
.dark.buttonRightSingle:hover {
    background: #282b78;
    color: #fff;
}
.dark.buttonRightSingle:hover span i {
    color: #4255d4;
}
.dark.buttonRightSingle:hover:before {
    background: #343891;
}
.success.buttonRightSingle:hover {
    background: #157b2a;
    color: #fff;
}
.success.buttonRightSingle:hover span i {
    color: #fff;
}
.success.buttonRightSingle:hover:before {
    background: #28a745;
}
.warning.buttonRightSingle:hover {
    background: #e3b21a;
    color: #000;
}
.warning.buttonRightSingle:hover span i {
    color: #000;
}
.warning.buttonRightSingle:hover:before {
    background: #b58c0d;
}
.commentStats {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--textColor);
}
.commentStats .stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #c3b31c;
}
.footerHead {
    width: 100%;
    position: relative;
    padding: 30px 0;
    background: #1a2046;
    border-top: 1px solid #15161c;
    z-index: 2;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.25);
}
body.light .footerHead {
    background: #fff;
    border-bottom: 2px solid var(--borderColor);
}
.footerHead .trustItem {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.footerHead .trustItem .icon {
    width: 65px;
    height: 65px;
    position: relative;
    border-radius: 50%;
    background: #151632;
    box-shadow: 0 0 0 6px #242851;
    font-size: 45px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 576px) {
    .footerHead .trustItem .icon {
        width: 45px;
        height: 45px;
        font-size: 25px;
    }
}
.footerHead .trustItem h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--textColor);
    text-align: center;
    margin: 0;
}
@media (max-width: 576px) {
    .footerHead .trustItem h3 {
        font-size: 11px;
    }
}
.footer {
    width: 100%;
    position: relative;
    padding: 30px 0;
    background: #151632;
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
}
@media (max-width: 767px) {
    .footer {
        padding-bottom: 65px;
    }
}
.footer .footerCard {
    width: 100%;
    position: relative;
}
.footer .footerCard h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--textColor);
    padding-bottom: 7px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--borderColor3);
}
.footer .footerCard.oyuneks h6 {
    color: var(--darkGreen);
    font-weight: 800;
}
.footer .footerCard ul {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}
.footer .footerCard ul li {
    list-style: none;
}
.footer .footerCard ul li a {
    display: block;
    font-size: 12px;
    color: var(--textColor);
    transition: all 0.2s;
}
.footer .footerCard ul li a:hover {
    color: var(--darkGreen);
    padding-left: 5px;
    transition: all 0.2s;
}
.footer .footerCard ul.listTwoColumn {
    column-count: 2;
}
.footer .footerCard ul.footerContactList li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer .footerCard ul.footerContactList li i {
    font-size: 20px;
}
.footer .socialFooter {
    width: 100%;
    gap: 7px;
    margin-top: 20px;
}
.footer .socialFooter,
.footer .socialFooter a {
    position: relative;
    display: flex;
    align-items: center;
}
.footer .socialFooter a {
    width: 35px;
    height: 35px;
    justify-content: center;
    font-size: 14px;
    background: #343891;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}
.footer .socialFooter a:hover {
    background: #282b78;
    color: #fff;
    transform: scale(1.2);
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .footer .socialFooter a {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }
}
.footerSupport {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.footerSupport .supportInner {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    position: relative;
    padding: 10px 50px;
    z-index: 2;
}
@media (max-width: 767px) {
    .footerSupport .supportInner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 10px;
        width: 90%;
    }
}
.footerSupport .supportInner .supportItem {
    display: inline-flex;
    position: relative;
}
.footerSupport .supportInner .supportItem .icon {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #FFF;
    font-size: 25px;
    color: var(--darkBluelightWhite);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.footerSupport .supportInner .supportItem .icon a {
    color: var(--darkBluelightWhite);
}
@media (max-width: 767px) {
    .footerSupport .supportInner .supportItem .icon {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
}
.footerSupport .supportInner .supportItem .text {
    padding-left: 60px;
    font-size: 16px;
    font-weight: 600;
    color: var(--textColor);
}
.footerSupport .supportInner .supportItem .text a {
    color: var(--textColor);
}
@media (max-width: 767px) {
    .footerSupport .supportInner .supportItem .text {
        font-size: 14px;
        padding-left: 40px;
    }
}
.footerSupport .supportInner:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--background);
    clip-path: polygon(calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px), 0 0);
}
.footerSupport:before {
    content: "";
    width: 100%;
    height: 0;
    border-bottom: 1px solid var(--borderColor3);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.footerMobile {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 12px 0;
    background: var(--cardBackground);
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.25);
    visibility: visible;
    z-index: 15;
    transition: all 0.2s;
}
.footerMobile.hide {
    bottom: -65px;
    visibility: hidden;
    transition: all 0.2s;
}
.footerMobile .footerMobileButtons {
    display: grid;
    grid-template-columns: repeat(5, 20%);
}
.footerMobile .footerMobileButtons .footerMobileButton {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--textColor);
}
.footerMobile .footerMobileButtons .footerMobileButton.active {
    color: var(--darkGreen);
}
.footerMobile .footerMobileButtons .chatButtonBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.footerMobile .footerMobileButtons .chatButtonBox .buttonText {
    position: absolute;
    display: inline-block;
    padding: 5px;
    border-radius: 3px 3px 3px 3px;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.1px;
    text-align: center;
    top: -32px;
    right: -12px;
    background: #c3141b;
}
.footerMobile .footerMobileButtons .chatButtonBox .buttonText:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -5px;
    left: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #c3141b;
    transform: rotate(21deg);
}
@media (min-width: 1099px) {
    .footerMobile {
        display: none;
    }
}
.checkboxNew {
    width: 20px;
    position: relative;
    margin: 10px auto;
}
.checkboxNew label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(180deg, #fcfff4 0, #dfe5d7 40%, #b3bead);
    border-radius: 4px;
    box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(0, 0, 0, 0.5);
}
.checkboxNew label:after {
    content: "";
    width: 9px;
    height: 5px;
    position: absolute;
    top: 6px;
    left: 5px;
    border: 3px solid #20212b;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
}
.checkboxNew label:hover:after {
    opacity: 0.5;
}
.checkboxNew input[type="checkbox"] {
    visibility: hidden;
}
.checkboxNew input[type="checkbox"]:checked + label:after {
    opacity: 1;
}
.checkLabel {
    cursor: pointer;
}
.formGroup {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.formGroup.detailRequire {
    max-width: 220px;
}
.formGroup .formLabel {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--textColor);
}
.formGroup .formLabel .required {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    background: #e3b21a;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
}
.mini.formGroup .formLabel {
    font-size: 12px;
}
.formGroup .formControl {
    width: 100% !important;
    position: relative;
    background: #252e4e;
    border: 2px solid var(--borderColor);
    font-size: 14px;
    color: #fff;
    padding: 7px 15px !important;
    border-radius: 0;
    -moz-appearance: textfield;
    height: 50px;
    z-index: 1;
    border-bottom: 2px solid #4255d4;
}
body.light .formGroup .formControl {
    background: #fff;
    color: var(--textColor);
    border-color: #bdbdbd;
}
body.light .formGroup .formControl:focus {
    border-color: #d1d1d1;
}
.mini.formGroup .formControl {
    font-size: 11px;
    padding: 5px 10px !important;
}
.detailRequire.formGroup .formControl {
    height: 50px;
}
.formGroup .formControl:focus {
    outline: none;
}
.formGroup .formControl::placeholder {
    color: var(--placeholderColor);
}
.formGroup .formControl::-webkit-inner-spin-button,
.formGroup .formControl::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}
.formGroup .inputPhoneGroup {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.formGroup .inputPhoneGroup select {
    width: 120px;
}
.formGroup .inputPhoneGroup input {
    width: calc(100% - 120px) !important;
    border-radius: 0 5px 5px 0 !important;
}
.formGroup .inputPhoneGroup .select2-container--default .select2-selection--single {
    border-radius: 5px 0 0 5px !important;
    border-right: none !important;
    background-color: #151632!important;
    border-color: #3d4fc5!important;
}
.formGroup.withIcon .formControl {
    padding-right: 50px !important;
}
.mini.formGroup.withIcon .formControl {
    padding-right: 30px !important;
}
.success.formGroup.withIcon .formControl {
    border-color: #4255d4;
}
.formGroup.withIcon .icon {
    width: 40px;
    height: 39px;
    position: absolute;
    top: 6px;
    right: 0;
    background: var(--borderColor);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 5px 5px 0;
    z-index: 2;
    color: #f1f2f6;
}
body.light .formGroup.withIcon .icon {
    background: #bdbdbd;
}
.mini.formGroup.withIcon .icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
}
.success.formGroup.withIcon .icon {
    background: #4255d4;
    color: #343891;
}
.detailRequire.formGroup.withIcon .icon {
    height: 50px;
    font-size: 22px;
}
.formGroup.withIcon .icon .formButton {
    display: block;
    border: none;
    background: none;
    color: var(--darkGreen);
}
.formGroup.withPrefix .formControl {
    border-radius: 0 5px 5px 0 !important;
    border-left: none !important;
}
.formGroup.withPrefix .prefix {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.formGroup.withPrefix .prefix .prefixText {
    height: 39px;
    position: relative;
    background: var(--darkGreen);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 0 0 5px;
    padding: 0 5px;
    z-index: 2;
    color: var(--darkBlue);
    border: 2px solid var(--darkGreenDark);
    border-right: none;
}
.mini.formGroup.withPrefix .prefix .prefixText {
    height: 30px;
}
.formGroup.withPrice,
.formGroup.withPrice .price {
    width: 100%;
    position: relative;
}
.formGroup.withPrice .price {
    display: flex;
    align-items: center;
}
.formGroup.withPrice .price .formControl:first-child {
    width: calc(100% - 40px) !important;
    border-radius: 5px 0 0 5px !important;
    border-right: none !important;
    text-align: right;
    padding-right: 5px !important;
}
.formGroup.withPrice .price .formControl:nth-child(2) {
    width: 40px !important;
    border-radius: 0 5px 5px 0 !important;
    border-left: none !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.formGroup.withPrice .price:before {
    content: ",";
    width: 0;
    height: 0;
    position: absolute;
    right: 42px;
    top: 10px;
    color: var(--textColor);
    z-index: 2;
}
.withIcon.formGroup.withPrice .price .formControl:first-child {
    width: calc(100% - 80px) !important;
}
.withIcon.formGroup.withPrice .price .formControl:nth-child(2) {
    width: 80px !important;
    padding-right: 45px;
}
.withIcon.formGroup.withPrice .price:before {
    right: 82px;
}
.formDesc {
    width: 100%;
    position: relative;
    color: #e3b21a;
    font-size: 11px;
    font-weight: 500;
    margin-top: 5px;
}
.form-switch {
    display: flex;
    align-items: center;
    padding-left: 0;
    position: relative;
    gap: 10px;
}
.form-switch input {
    position: absolute;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    float: none;
}
.form-switch input:checked + .switcher {
    background: #198754;
    border: 1px solid transparent;
}
.form-switch input:checked + .switcher span i {
    left: 41px;
    transition: all 0.4s 0.2s;
    background: #fff !important;
}
.form-switch input:checked + .switcher span i:after {
    width: 60px;
    transition: all 0.4s;
    background: #fff !important;
}
.form-switch input:focus {
    box-shadow: unset;
}
.form-switch .switcher {
    border: 1px solid var(--borderColor);
    border-radius: 20px;
    box-shadow: inset 0 0 10px -1px rgba(0, 0, 0, 0.168627451);
    background: var(--cardBackgroundLight);
    transition: all 0.4s;
    cursor: pointer;
}
.form-switch .switcher span {
    width: 4rem;
    height: 23px;
    position: relative;
    display: block;
    border-radius: 40px;
    overflow: hidden;
    border: 4px solid hsla(0, 0%, 100%, 0);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2901960784));
}
.form-switch .switcher span i {
    transition: all 0.4s;
}
.form-switch .switcher span i,
.form-switch .switcher span i:after {
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 30px;
    position: absolute;
    left: 0;
}
.form-switch .switcher span i:after {
    content: "";
    background: #fff;
    transition: all 0.4s 0.2s;
}
.form-switch .form-check-input {
    width: 4rem;
    height: 2rem;
    right: 0;
    margin: 0;
}
.form-switch label {
    margin-left: 0;
    cursor: pointer;
}
.inputBlock {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: var(--cardBackground);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}
.inputBlock .form-check-input {
    right: 10px;
}
.inputBlock label {
    width: calc(100% - 66px);
}
.inputBlock .text {
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--textColor);
    line-height: 25px;
}
.inputBlock .text span:nth-child(2) {
    line-height: 1;
    color: #9697a5;
}
.inputBlock .text .require {
    font-size: 12px;
    font-weight: 800;
    color: var(--darkGreen) !important;
}
.inputBlock .squareButton {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.squareButton {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    color: var(--darkGreen);
    font-size: 14px;
    border-radius: 3px;
    box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
}
.squareButton:hover {
    background: #343891;
    color: #fff;
    transition: all 0.2s;
}
.squareButton.circle {
    border-radius: 50%;
}
.squareButton.mini {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.squareButton.normal {
    width: auto;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 600;
}
.squareButton.edit {
    background: #e3b21a;
    color: #fff;
}
.squareButton.edit:hover {
    background: #b58c0d;
    color: #fff;
}
.squareButton.save {
    background: #28a745;
    color: #fff;
}
.squareButton.save:hover {
    background: #157b2a;
    color: #fff;
}
.squareButton.remove {
    background: #c3141b;
    color: #fff;
}
.squareButton.remove:hover {
    background: #990d11;
    color: #fff;
}
.squareButton.weight {
    background: #343891;
    color: #fff;
}
.squareButton.weight:hover {
    background: #282b78;
    color: #fff;
}
.siteButton2 {
    width: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    background: #3d4fc5;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1;
    transition: all 0.2s;
    border-radius:.5rem;
}
.siteButton2:hover {
    background: #1e217a;
    color: #fff;
    transition: all 0.2s;
}
.modal-content {
    background: var(--background);
}
.modal-content .modal-header {
    border-bottom: 1px solid var(--borderColor2);
    padding: 10px 15px;
}
.modal-content .modal-header .modal-title {
    color: var(--textColor);
}
.modal-content .modal-header .btn-close {
    background: transparent;
    font-size: 20px;
    color: var(--textColor);
    transition: all 0.2s;
    display: flex;
    align-items: Center;
    justify-content: center;
}
.modal-content .modal-header .btn-close:hover {
    background: var(--cardBackgroundLight);
    color: var(--darkGreen);
    transform: scale(1.2);
    transition: all 0.2s;
}
.modal-content .modal-header .btn-close:focus {
    outline: none;
    box-shadow: none;
}
.modal-content .modal-footer {
    border-top: 1px solid var(--borderColor2);
    padding: 10px 15px;
}
.offcanvas-header .btn-close {
    background: transparent;
    font-size: 20px;
    color: var(--textColor) !important;
    transition: all 0.2s;
    display: flex;
    align-items: Center;
    justify-content: center;
}
.offcanvas-header .btn-close:hover {
    background: var(--cardBackgroundLight);
    color: var(--darkGreen);
    transform: scale(1.2);
    transition: all 0.2s;
}
.offcanvas-header .btn-close:focus {
    outline: none;
    box-shadow: none;
}
.sectionCardWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}
.sectionCard {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 5px;
    color: var(--textColor);
    border: 1px solid var(--borderColor);
}
.sectionCard.payment {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 32px 100%, 0 calc(100% - 25px), 0 0);
    border: none;
}
.sectionCard.paymentRight {
    clip-path: polygon(calc(100% - 32px) 0, 100% 25px, 100% 100%, 0 100%, 0 0);
    border: none;
}
.sectionCard .sectionCardHeader {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    border-bottom: 1px solid var(--cardBackgroundDark);
}
@media (max-width: 1399px) {
    .sectionCard .sectionCardHeader {
        padding: 10px 15px;
    }
}
@media (max-width: 1099px) {
    .sectionCard .sectionCardHeader {
        padding: 10px;
    }
}
.sectionCard .sectionCardHeader h3 {
    font-size: 14px;
    color: var(--textColor);
    font-weight: 600;
    display: inline-block;
    position: relative;
    align-items: center;
    gap: 15px;
    margin: 0;
}
.sectionCard .sectionCardHeader.between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inner.sectionCard .sectionCardHeader {
    background: var(--cardBackgroundLight);
    border-color: var(--cardBackgroundDark);
}
.noBody.sectionCard .sectionCardHeader {
    border-radius: 10px 10px 10px 10px;
}
@media (max-width: 1099px) {
    .sectionCard .sectionCardHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .sectionCard .sectionCardHeader.between {
        align-items: flex-start;
    }
}
.sectionCard .sectionCardBody {
    width: 100%;
    position: relative;
    padding: 15px;
    color: var(--textColor);
}
@media (max-width: 1099px) {
    .sectionCard .sectionCardBody {
        padding: 10px;
    }
}
.sectionCard .sectionCardBody:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    z-index: -1;
}
.order.sectionCard .sectionCardBody:before {
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.inner.sectionCard .sectionCardBody:before {
    background: var(--cardBackground);
}
.noHeader.sectionCard .sectionCardBody:before {
    border-radius: 10px;
}
.noBody.sectionCard .sectionCardBody {
    display: none;
}
.inner.sectionCard {
    border: none;
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.15);
}
.customAlert {
    width: 100%;
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    background: #f2b705;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.customAlert.dark {
    background: var(--cardBackground);
}
.customAlert.mini {
    min-height: auto;
}
.customAlert .alertIcon {
    width: 70px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: #f2d22e;
    font-size: 40px;
    color: #cf1f1f;
    border-radius: 5px 0 0 5px;
}
.dark.customAlert .alertIcon {
    background: var(--cardBackgroundLight);
    color: var(--darkGreen);
}
.mini.customAlert .alertIcon {
    font-size: 20px;
}
@media (max-width: 576px) {
    .customAlert .alertIcon {
        width: auto;
        padding: 15px 10px;
        font-size: 20px;
        border-radius: 5px 0 0 5px;
    }
}
.customAlert .alertText {
    width: calc(100% - 70px);
    padding: 10px;
    position: relative;
    color: #000;
    font-size: 14px;
}
.customAlert .alertText h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1;
}
.dark.customAlert .alertText h3 {
    color: var(--darkGreen);
}
.dark.customAlert .alertText {
    color: var(--textColor);
}
@media (max-width: 576px) {
    .customAlert .alertText {
        width: 100%;
        font-size: 12px;
    }
    .customAlert .alertText h3 {
        font-size: 13px;
    }
}
.customVerticalAlert {
    width: 100%;
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: #f2b705;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.customVerticalAlert.dark {
    background: var(--cardBackground);
}
.customVerticalAlert.mini {
    min-height: auto;
}
.customVerticalAlert .alertTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f2d22e;
    border-radius: 10px 10px 0 0;
    padding: 10px;
}
.customVerticalAlert .alertTitle i {
    font-size: 22px;
    color: #cf1f1f;
}
.customVerticalAlert .alertTitle h3 {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    margin: 0;
    line-height: 1;
}
.dark.customVerticalAlert .alertTitle {
    background: var(--cardBackgroundLight);
}
.dark.customVerticalAlert .alertTitle i {
    color: var(--darkGreen);
}
.dark.customVerticalAlert .alertTitle h3 {
    color: var(--textColor);
}
.customVerticalAlert .alertText {
    width: 100%;
    padding: 10px;
    position: relative;
    color: #000;
    font-size: 14px;
}
.customVerticalAlert .alertText h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1;
}
.dark.customVerticalAlert .alertText h3 {
    color: var(--darkGreen);
}
.dark.customVerticalAlert .alertText {
    color: var(--textColor);
}
.accountBalance {
    display: inline-flex;
    padding: 5px 5px 5px 28px;
    position: relative;
    background: #e9b535;
    border-radius: 50px;
}
body.streamer-on .accountBalance {
    filter: blur(2px);
}
.accountBalance .icon {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    background: #f1db7d;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.25);
}
.accountBalance .icon,
.accountBalance .price {
    color: #242852;
    font-size: 12px;
    align-items: center;
}
.accountBalance .price {
    display: inline-flex;
    gap: 7px;
    font-weight: 700;
    line-height: 1;
}
.accountBalance .price i {
    font-size: 13px;
    color: #343891;
    transition: all 0.2s;
}
.accountBalance .price i:hover {
    transform: scale(1.4);
    transition: all 0.2s;
}
.pageInner {
    width: 100%;
    position: relative;
    padding: 0 0 40px;
}
@media (max-width: 1099px) {
    .pageInner {
        padding: 20px 0;
    }
}
@media (max-width: 576px) {
    .pageInner {
        padding: 10px 0;
    }
}
.quickMenuInnerButton {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--darkGreen);
    clip-path: polygon(100% 0, 100% 100%, 70px 100%, 0 calc(100% - 70px), 0 0);
    transition: all 0.2s;
}
.quickMenuInnerButton i {
    font-size: 25px;
    color: var(--darkBlue);
    position: absolute;
    top: 10px;
    right: 10px;
}
.quickMenuInnerButton:hover {
    background: var(--darkBlue);
    transform: scale(1.1);
    transition: all 0.2s;
}
.quickMenuInnerButton:hover i {
    color: var(--darkGreen);
}
.borderCustom {
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--borderColor2);
    margin: 20px 0;
}
.scrollAuto {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: #8e9ac0 #31323c;
    transition: 0.3s;
}
.scrollAuto::-webkit-scrollbar {
    width: 4px;
}
.scrollAuto::-webkit-scrollbar-track {
    background: #31323c;
}
.scrollAuto::-webkit-scrollbar-thumb {
    background-color: #4255d4;
    border-radius: 6px;
    border: 4px solid #4255d4;
}
body.light .scrollAuto {
    scrollbar-color: #343891 #bbb;
}
body.light .scrollAuto::-webkit-scrollbar-track {
    background: #bbb;
}
body.light .scrollAuto::-webkit-scrollbar-thumb {
    background-color: #343891;
    border-radius: 6px;
    border: 4px solid #343891;
}
.scrollAutoX {
    overflow-x: auto;
    scrollbar-color: #4255d4 #31323c;
    transition: 0.3s;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    padding-bottom: 15px;
}
.scrollAutoX::-webkit-scrollbar {
    height: 4px;
}
.scrollAutoX::-webkit-scrollbar-track {
    background: #31323c;
}
.scrollAutoX::-webkit-scrollbar-thumb {
    background-color: #4255d4;
    border-radius: 6px;
    border: 4px solid #4255d4;
}
body.light .scrollAutoX {
    scrollbar-color: #343891 #bbb;
}
body.light .scrollAutoX::-webkit-scrollbar-track {
    background: #bbb;
}
body.light .scrollAutoX::-webkit-scrollbar-thumb {
    background-color: #343891;
    border-radius: 6px;
    border: 4px solid #343891;
}
.personProfileHeader {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 3;
    padding: 5px;
    margin-bottom: 0;
}
.personProfileHeader:before {
    content: "";
    width: calc(100% - 25px);
    height: 100%;
    position: absolute;
    background: var(--cardBackgroundLight);
    left: 25px;
    top: 0;
    clip-path: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0);
}
.personProfileHeader .profileImageArea {
    width: 40px;
    position: relative;
    filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.45));
}
.personProfileHeader .profileImageArea .profileImage {
    width: 40px;
    height: 40px;
    position: relative;
    padding: 2px;
    background: #3a3b48;
    clip-path: polygon(74% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}
.personProfileHeader .profileImageArea .profileImage img {
    width: 100%;
    height: 100%;
    position: relative;
    clip-path: polygon(74% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}
.personProfileHeader .profileDetail {
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.personProfileHeader .profileDetail .personInfo {
    padding-left: 10px;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
.personProfileHeader .profileDetail .personInfo .personTitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    text-shadow: 2px 2px 3px transparent;
    margin: 0;
}
body.streamer-on .personProfileHeader .profileDetail .personInfo .personTitle span {
    filter: blur(3px);
}
.personProfileHeader .profileDetail .personInfo .personTitle:hover {
    color: var(--darkGreen);
}
.personProfileHeader .profileDetail .personInfo .headerLogoutButton {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    color: var(--textColor);
    gap: 5px;
    transition: all 0.2s;
}
.personProfileHeader .profileDetail .personInfo .headerLogoutButton:hover {
    transform: scale(1.2);
    color: var(--darkGreen);
    padding-left: 10px;
    transition: all 0.2s;
}
body.streamer-on .streamerMode,
body.streamer-on .userName {
    filter: blur(4px);
}
.copyArea {
    width: 100%;
    position: relative;
    padding: 10px;
    border-radius: 7px;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
    background: var(--cardBackgroundLight);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.light .copyArea {
    box-shadow: none;
}
.copyArea.mini {
    padding: 5px;
}
.copyArea span {
    white-space: nowrap;
    margin-right: 10px;
}
.mini.copyArea span {
    font-size: 11px;
    margin-right: 5px;
}
.copyArea h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--textColor);
}
.mini.copyArea h5 {
    font-size: 12px;
    white-space: nowrap;
}
.copyArea .copyTextButton {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--darkGreen);
    background: var(--backgroundDark);
    border-radius: 50%;
}
.mini.copyArea .copyTextButton {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.copyArea .copyTextButton.copied,
.copyArea .copyTextButton:hover {
    background: var(--darkBlue);
    color: var(--darkGreen);
}
.copyAreaV2 {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 7px;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
    background: var(--background);
}
@media (max-width: 576px) {
    .copyAreaV2 {
        padding: 5px 10px;
    }
}
.copyAreaV2.cardBg {
    background: var(--cardBackground);
}
.copyAreaV2.mini {
    padding: 5px 10px;
}
.copyAreaV2 .number {
    height: 25px;
    position: relative;
    line-height: 25px;
    text-align: center;
    color: var(--darkGreen);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 576px) {
    .copyAreaV2 .number {
        font-size: 12px;
    }
}
.mini.copyAreaV2 .number {
    font-size: 12px;
}
.copyAreaV2 .copyTextButton {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--darkGreen);
    background: var(--backgroundDark);
    border-radius: 50%;
}
.copyAreaV2 .copyTextButton.copied,
.copyAreaV2 .copyTextButton:hover {
    background: var(--darkGreen);
    color: var(--darkBlue);
}
@media (max-width: 576px) {
    .copyAreaV2 .copyTextButton {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
}
.mini.copyAreaV2 .copyTextButton {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.copyAreaV2 .textToBeCopied {
    font-size: 14px;
}
@media (max-width: 576px) {
    .copyAreaV2 .textToBeCopied {
        font-size: 12px;
    }
}
.mini.copyAreaV2 .textToBeCopied {
    font-size: 12px;
}
.pageSidebar {
    width: 100%;
    position: relative;
    transition: all 0.2s;
}
body.light .pageSidebar {
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.15));
}
.pageSidebar.sticky {
    position: sticky;
    top: 20px;
    transition: all 0.2s;
}
.pageSidebar .pageSidebarHeader {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackgroundLight);
}
.pageSidebar .pageSidebarHeader.first {
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
@media (max-width: 576px) {
    .pageSidebar .pageSidebarHeader.first {
        clip-path: none;
    }
}
.pageSidebar .pageSidebarHeader.last {
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.pageSidebar .pageSidebarHeader h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--textColor);
    margin: 0;
}
@media (max-width: 576px) {
    .pageSidebar .pageSidebarHeader.filterSubmitButton {
        position: sticky;
        bottom: 0;
        z-index: 3;
        box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.5);
    }
}
.pageSidebar .pageSidebarBody {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackground);
}
.pageSidebar .pageSidebarBody .pageSidebarNav {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    max-height: 172px;
}
.pageSidebar .pageSidebarBody .pageSidebarNav.auto {
    max-height: fit-content;
}
.pageSidebar .pageSidebarBody .pageSidebarNav .pageSidebarNavItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--textColor);
    transition: all 0.2s;
    padding: 5px 0;
    border-bottom: 1px solid var(--borderColor2);
}
.pageSidebar .pageSidebarBody .pageSidebarNav .pageSidebarNavItem i {
    color: var(--darkGreen);
}
.pageSidebar .pageSidebarBody .pageSidebarNav .pageSidebarNavItem:hover {
    color: var(--darkGreen);
    padding-left: 10px;
    transition: all 0.2s;
}
.pageSidebar .pageSidebarBody .pageSidebarNav .pageSidebarNavItem.active {
    color: var(--darkGreen);
}
.pageSearchBox {
    width: 350px;
}
.innerSection {
    padding: 10px;
    background: var(--cardBackground);
    border-radius: 5px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.innerSection,
.pageDetail {
    width: 100%;
    position: relative;
}
.pageDetail {
    font-size: 12px;
    color: var(--textColor);
}
.pageDetail h1 {
    font-size: 25px;
}
.pageDetail h2 {
    font-size: 20px;
}
.row-8 {
    width: calc(100% + 20px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
    margin-left: -10px;
    margin-right: -10px;
}
@media (max-width: 1099px) {
    .row-8 {
        grid-template-columns: repeat(4, 25%);
    }
}
@media (max-width: 576px) {
    .row-8 {
        grid-template-columns: repeat(2, 50%);
    }
}
.row-8 .rowCol {
    width: 100%;
    position: relative;
    padding: 10px;
}
.noBorder {
    border: none !important;
}
.userMenuArea {
    max-width: 250px;
}
.leftBarButton {
    padding: 0;
    margin-bottom: 2px;
}
.leftBarButton,
.leftBarButton .linkItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}
.leftBarButton .linkItem {
    padding: 2px 0;
}
.leftBarButton .linkItem .icon {
    width: 25px;
    height: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cardBackgroundLight);
    font-size: 12px;
    color: var(--darkGreen);
}
.leftBarButton .linkItem .detail {
    width: calc(100% - 35px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
}
.leftBarButton .linkItem .detail strong {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--textColor);
}
.leftBarButton .linkItem .detail i {
    color: var(--textColor);
    font-size: 7px;
}
.leftBarButton .leftBarDropdown {
    width: 100%;
    position: absolute;
    top: 0;
    left: 90%;
    background: var(--cardBackgroundLight);
    padding: 5px;
    border-radius: 3px;
    z-index: 10;
    box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}
.leftBarButton .leftBarDropdown a {
    display: flex;
    align-items: center;
    color: var(--textColor);
    padding: 5px 15px;
    font-size: 12px;
}
.leftBarButton .leftBarDropdown a.active,
.leftBarButton .leftBarDropdown a:hover {
    background: var(--cardBackground);
    color: var(--darkGreen);
}
.leftBarButton .leftBarDropdown:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid var(--cardBackgroundDark);
    position: absolute;
    top: 10px;
    left: -15px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}
.down.leftBarButton .leftBarDropdown {
    left: 0;
    top: 100%;
    background: linear-gradient(0deg, var(--cardBackground), var(--backgroundRgbaZero));
}
.down.leftBarButton .leftBarDropdown:before {
    display: none;
}
.leftBarButton:not(.down):hover {
    background: var(--background);
    padding-left: 5px;
    transition: all 0.2s;
}
.leftBarButton:not(.down):hover .linkItem .detail strong {
    color: var(--darkGreen);
}
.leftBarButton:not(.down):hover .leftBarDropdown {
    visibility: visible;
    opacity: 1;
    left: 100%;
    transition: all 0.2s;
}
.leftBarButton:not(.down):hover .leftBarDropdown:before {
    visibility: visible;
    opacity: 1;
    left: -30px;
    transition: all 0.2s;
}
.down.leftBarButton:not(.down):hover .leftBarDropdown {
    visibility: hidden;
    left: 0;
}
.down.leftBarButton.show {
    padding-left: 0;
    background: var(--background);
    transition: all 0.2s;
}
.down.leftBarButton.show .linkItem .detail strong {
    color: var(--darkGreen);
}
.down.leftBarButton.show .leftBarDropdown {
    visibility: visible;
    opacity: 1;
    position: relative;
    transition: all 0.2s;
}
.leftBarButton.active {
    background: var(--background);
    padding-left: 0;
    transition: all 0.2s;
}
.leftBarButton.active .linkItem .detail strong {
    color: var(--darkGreen);
}
.leftBarButton .removeButton {
    width: 41px;
    height: 41px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #c3141b;
    color: #fff;
    line-height: 30px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
}
.leftBarButton.edit {
    border: 1px solid #c3141b;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.leftBarButton.edit .removeButton {
    display: flex;
}
.down.leftBarButton {
    display: block;
}
.headerNotifyButton {
    font-size: 25px;
    color: var(--darkGreen);
    margin-right: 10px;
}
.notifyDropdown {
    min-width: 25rem;
    max-width: 90%;
    padding: 10px;
    background: var(--cardBackground);
    border: none;
    border-radius: 3px;
    box-shadow: 4px -4px 15px 0 rgba(0, 0, 0, 0.1);
    margin-top: 10px !important;
}
.notifyDropdown:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid var(--cardBackgroundLight);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    right: 0;
    top: -19px;
}
@media (max-width: 576px) {
    .notifyDropdown {
        padding: 0 10px 0 0;
    }
}
.notifyDropdownItem {
    background: var(--cardBackground);
    border: 1px solid var(--borderColor);
}
.notifyDropdownItem h5 {
    font-size: 16px;
    color: var(--textColor);
}
.notifyDropdownItem small {
    font-size: 11px;
    color: var(--textColor);
}
.notifyDropdownItem small i {
    font-size: 14px;
}
.notifyDropdownItem p {
    font-size: 12px;
    color: var(--textColor);
}
.notifyDropdownItem:hover {
    background: var(--cardBackgroundLight);
}
.showcaseArea {
    width: 100%;
    position: relative;
}
@media (max-width: 1199px) and (min-width: 550px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: calc(100% - 40px);
    }
}
.bg-dark-blue {
    background-color: var(--darkBlue);
}
.bg-dark-green {
    background-color: var(--darkGreen);
}
.breadcrumbArea {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.breadcrumbArea .breadcrumb {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 10px;
}
.breadcrumbArea .breadcrumb li {
    list-style: none;
    font-size: 12px;
    color: var(--textColor);
}
.breadcrumbArea .breadcrumb li a {
    background-color: #3d4fc5;
    font-size: .875rem;
    height: 30px;
    border-radius: .25rem;
    border: 1px solid #5466d4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 7px;
    padding-right: 7px;
    color:#fff;
    text-decoration: none;
}
.breadcrumbArea .breadcrumb li a:hover {
    color: var(--textColor);
    text-decoration: none;
}
.breadcrumbArea .breadcrumb li.active{
    border: 1px solid #373d67;
    font-size: 1rem;
    padding: 2px 10px;
    border-radius: .25rem;
}
.breadcrumbArea .breadcrumb li.active,
.breadcrumbArea .breadcrumb li i {
    color: #FFF;
}
.breadcrumb .fa-angle-right{
    font-size:1rem;
}
.optionGroup {
    width: 100%;
    position: relative;
}
.optionGroup .groupTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--textColor);
    margin-bottom: 5px;
}
.optionGroup .options {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.filter.optionGroup .options {
    max-height: 98px;
    padding: 5px;
    background: var(--cardBackgroundDark);
}
body.light .optionGroup .options {
    background: #fafafa;
}
.optionLabel {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--textColor);
    cursor: pointer;
}
.optionLabel.block {
    background: var(--cardBackground);
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 14px;
}
.optionLabel.block .betweenLabel {
    width: calc(100% - 30px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 576px) {
    .optionLabel.block .betweenLabel {
        flex-direction: column;
        align-items: flex-start;
    }
}
.optionLabel.block .optionInput {
    margin: 0;
}
.optionLabel.between {
    justify-content: space-between;
}
.optionLabel .optionInput {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: var(--backgroundDark);
    border: 2px solid var(--borderColor);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
}
body.light .optionLabel .optionInput {
    border-color: #bdbdbd;
}
.mini.optionLabel .optionInput {
    width: 15px;
    height: 15px;
}
.optionLabel .optionInput.required {
    border-color: #c3141b;
    animation-duration: 1s;
    animation-name: liveEffect;
    transition: all 0.5s;
    animation-iteration-count: infinite;
}
.optionLabel .optionInput:hover {
    background: var(--cardBackgroundLight);
}
.optionLabel .optionInput:checked {
    background: #343891;
}
.optionLabel .optionInput:checked:before {
    width: 16px;
    height: 16px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23ffffff' class='bi bi-check-lg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    left: 0;
}
.mini.optionLabel .optionInput:checked:before {
    width: 10px;
    height: 10px;
    top: -3px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23ffffff' class='bi bi-check-lg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
}
.optionLabel .optionInput:checked:after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: #343891;
    content: "";
    display: block;
    position: relative;
    z-index: 100;
}
.radio.optionLabel .optionInput:checked:after {
    border-radius: 50%;
}
.mini.optionLabel .optionInput:checked:after {
    -webkit-animation: click-wave-mini 0.65s;
    -moz-animation: click-wave-mini 0.65s;
    animation: click-wave-mini 0.65s;
}
.radio.optionLabel .optionInput {
    border-radius: 50%;
}
.optionLabel strong {
    color: var(--darkGreen);
}
@keyframes click-wave {
    0% {
        height: 20px;
        width: 20px;
        opacity: 0.35;
        position: relative;
    }
    to {
        height: 40px;
        width: 40px;
        margin-left: -14px;
        margin-top: -14px;
        opacity: 0;
    }
}
@keyframes click-wave-mini {
    0% {
        height: 15px;
        width: 15px;
        opacity: 0.35;
        position: relative;
    }
    to {
        height: 30px;
        width: 30px;
        margin-left: -10px;
        margin-top: -10px;
        opacity: 0;
    }
}
.searchResults {
    width: 100%;
    height: 455px;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--background);
    border: 2px solid var(--borderColor);
    border-top: none;
    color: var(--textColor);
    font-size: 12px;
    z-index: 4;
    padding: 10px;
    display: none;
}
.searchResults.active {
    display: block;
}
@media (max-width: 576px) {
    .searchResults {
        height: calc(100vh - 105px);
        z-index: 21;
    }
}
.searchItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 7px;
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.15);
    background: var(--cardBackground);
    padding: 0 10px 0 0;
}
body.light .searchItem {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
}
.searchItem .searchItemImage {
    width: 60px;
    position: relative;
    border-radius: 7px 0 0 7px;
    overflow: hidden;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.list.searchItem .searchItemImage {
    width: 40px;
}
.searchItem .searchItemImage img {
    width: 100%;
    position: relative;
}
.searchItem .searchItemInfo {
    width: calc(100% - 60px);
    position: relative;
    padding: 10px 35px 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list.searchItem .searchItemInfo {
    width: calc(100% - 40px);
    padding: 0 0 0 5px;
}
.searchItem .searchItemInfo h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--textColor);
    margin: 0;
    padding: 0;
}
.searchItem .searchItemInfo h3 a {
    color: var(--textColor);
}
.searchItem .searchItemInfo .searchItemPrice {
    font-size: 12px;
    font-weight: 800;
    color: var(--darkGreen);
}
.searchItem .searchItemInfo .searchBelonging {
    display: inline-block;
    padding: 5px 10px;
    background: var(--cardBackgroundLight);
    font-size: 10px;
    font-weight: 600;
    color: var(--textColor);
    line-height: 1;
    border-radius: 3px;
}
.offcanvas.bgCard {
    background: var(--cardBackground);
}
.quickMenuButton {
    width: 30px;
    height: 60px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--darkBlue);
    font-size: 20px;
}
.quickMenuButton:hover {
    color: var(--darkGreen);
}
.quickMenuButton:before {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--darkGreen);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.2s;
}
:hover.quickMenuButton:before {
    background: var(--darkBlue);
    transition: all 0.2s;
}
.quickMenuButton:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
    background: hsla(0, 0%, 100%, 0);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    border-radius: 50%;
    z-index: 0;
    transition: all 0.2s;
}
:hover.quickMenuButton:after {
    width: 80px;
    height: 80px;
    left: -10px;
    top: -10px;
    background: hsla(0, 0%, 100%, 0.1);
    transition: all 0.2s;
}
.quickMenuButton i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 18px;
    z-index: 2;
}
@media (max-width: 576px) {
    .quickMenuButton {
        display: none;
    }
}
.quickMenuEditButton {
    display: inline-flex;
    gap: 5px;
    padding: 5px 10px;
    line-height: 1;
    background: #343891;
    color: #fff;
    border-radius: 5px;
    font-size: 10px;
}
.quickMenuEditButton:hover {
    background: #282b78;
    color: #fff;
}
.quickMenuEditButton.cancel {
    background: #c3141b;
}
.quickMenuEditButton.cancel:hover {
    background: #990d11;
    color: #fff;
}
.quickMenuArea {
    max-width: 280px;
}
.quickMenuArea h5 {
    font-size: 15px;
    font-weight: 700;
}
.modeSwitch {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.modeSwitch .modeSwitchCheckbox {
    display: none;
}
.modeSwitch .modeSwitchCheckbox:checked + .modeSwitchLabel .modeSwitchInner {
    margin-left: 0;
}
.modeSwitch .modeSwitchCheckbox:checked + .modeSwitchLabel .modeSwitchSwitch {
    right: 0;
}
.modeSwitch .modeSwitchLabel {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--borderColor);
    border-radius: 20px;
}
.modeSwitch .modeSwitchLabel .modeSwitchInner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.modeSwitch .modeSwitchLabel .modeSwitchInner:after,
.modeSwitch .modeSwitchLabel .modeSwitchInner:before {
    display: block;
    float: left;
    width: 50%;
    height: 20px;
    padding: 0;
    line-height: 20px;
    font-size: 11px;
    color: #fff;
    font-weight: 700;
    box-sizing: border-box;
}
.modeSwitch .modeSwitchLabel .modeSwitchInner:before {
    content: "Dark";
    padding-left: 10px;
    background-color: #242852;
    color: #fff;
}
.modeSwitch .modeSwitchLabel .modeSwitchInner:after {
    content: "Light";
    padding-right: 10px;
    background-color: #eee;
    color: #999;
    text-align: right;
}
.modeSwitch .modeSwitchLabel .modeSwitchSwitch {
    display: block;
    width: 12px;
    margin: 6px;
    background: #999;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 36px;
    border: 2px solid #999;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.backdrop {
    background-color: rgba(17, 17, 23, 0.9607843137);
    width: 100%;
    height: 100%;
    padding: 0;
    top: 0;
    clip-path: polygon(100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 0);
    z-index: 1;
}
.backdrop,
.etbis {
    position: absolute;
    left: 0;
}
.etbis {
    display: inline-block;
    bottom: 0;
    z-index: 3;
}
@media (max-width: 576px) {
    .etbis {
        position: relative;
        display: flex;
        justify-content: center;
    }
    .etbis img {
        width: 60px !important;
        height: 72px !important;
    }
}
.copyrightText {
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--textColor);
    display: flex;
    flex-direction: column;
    text-align: right;
}
@media (max-width: 576px) {
    .copyrightText {
        padding: 0;
        text-align: left;
        margin: 10px 0 10px 10px;
    }
}
.payMethodsImage {
    max-width: 100%;
    position: relative;
}
@media (max-width: 576px) {
    .payMethodsImage {
        margin-top: 20px;
        margin-bottom: 30px;
    }
}
@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}
.backLink {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    gap: 5px;
}
.backLink i {
    font-size: 18px;
}
@media (max-width: 576px) {
    .collapsing {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}
.mobilBusinessNavTitle {
    width: 100%;
    position: relative;
    padding: 10px 15px;
    background: var(--cardBackgroundLight);
}
.mobilBusinessNavTitle h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor);
    margin: 0;
}
.mobilBusinessNavBox {
    width: 100%;
    position: relative;
    padding: 10px 15px;
    background: var(--cardBackground);
}
.eksBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    padding: 4px 10px;
    line-height: 1;
    font-size: 11px;
    font-weight: 700;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    border-radius: 50px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
}
.eksBadge.mini {
    padding: 2px 5px;
    font-size: 8px;
}
.eksBadge.lastBadge {
    border-radius: 2px;
    clip-path: polygon(100% 0, 100% calc(100% - 9px), calc(100% - 10px) 100%, 0 100%, 0 0);
}
.eksBadge.success {
    background: #28a745;
    color: #fff;
}
.eksBadge.warning {
    background: #e3b21a;
    color: #000;
}
.eksBadge.danger {
    background: #c3141b;
    color: #fff;
}
.eksBadge.weight {
    background: #343891;
    color: #fff;
}
.eksBadge.w100 {
    min-width: 115px;
    justify-content: center;
}
@keyframes liveEffect {
    0% {
        filter: drop-shadow(0 0 5px rgba(128, 241, 177, 0.15));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(128, 241, 177, 0.95));
    }
    to {
        filter: drop-shadow(0 0 5px rgba(128, 241, 177, 0.15));
    }
}
.footerBox {
    width: 100%;
    position: relative;
}
@media (max-width: 576px) {
    .footerBox {
        display: none;
    }
    .footerBox.show {
        display: block;
    }
}
.footerToggleButton {
    justify-content: center;
    font-size: 30px;
    color: var(--textColor);
    padding-bottom: 30px;
}
.footerToggleButton,
.itemSlider {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.itemSlider {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.itemSlider::-webkit-scrollbar {
    display: none;
}
.itemSlider .scrollItem {
    position: relative;
    margin-right: 15px;
}
.productScroll.itemSlider .scrollItem {
    width: 230px;
}
.text-theme {
    color: var(--darkGreen);
}
.basket-box-x {
    border-radius: 0.325rem;
}
.box-green {
    background-color: #20bf6b;
}
.box-blue {
    background-color: #4255d4;
}
.basket-box-x:hover .basket-right-x {
    background-color: #fff;
}
.basket-box-x:hover .box-text-green {
    color: #20bf6b;
}
.basket-box-x:hover .box-text-blue {
    color: #4255d4;
}
.basket-box-x .basket-icon-x {
    padding: 6px 10px;
    font-size: 1.4rem;
    color: #fff;
    border-top-left-radius: 0.325rem;
    border-bottom-left-radius: 0.325rem;
}
.basket-box-x .basket-right-x {
    background-color: rgba(41, 47, 73, 0.3);
    padding: 0.325rem 0.525rem 0;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    width: 110px;
    border-top-right-radius: 0.325rem;
    border-bottom-right-radius: 0.325rem;
    transition: all 0.3s;
}
.basket-box-x .basket-price-x {
    font-size: 15px;
}
.basket-box-x .basket-count-x {
    right: -7px;
    top: -7px;
    background-color: #eb4d4b;
    color: #fff;
    width: 19px;
    height: 19px;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1px;
}
.border-horizontal {
    border-right: 1px solid #262c54;
    width: 1px;
    height: 68px;
    margin-right: 5px;
    margin-left: 14px;
}
.order-query {
    background-color: #3a49aa;
    color: #fff !important;
}
.offcanvas.offcanvas-end {
    width: 450px;
}
.offcanvas-header {
    background-image: linear-gradient(125deg, #13162f, #1a2049, #13162f);
}
.offcanvas-title {
    font-size: 1.5rem;
    padding-top: 0.25rem;
    margin-left: 0.65rem;
}
.empty-basket {
    color: #9daad4;
    height: 100%;
    align-items: center;
    font-size: 1.25rem;
}
.empty-basket,
.empty-basket-button {
    display: flex;
    justify-content: center;
}
.empty-basket-button {
    padding: 0.5rem 0;
    border-bottom: 1px solid #232849;
    border-top: 1px solid #232849;
}
.empty-basket-button a {
    color: #ff3838;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s;
}
.empty-basket-button a:hover {
    scale: 1.05;
}
.basket-detail-left {
    font-size: 1.25rem;
    color: #9daad4;
}
.basket-detail-right {
    font-size: 1.25rem;
    color: #fff;
}
.basket-discount i {
    position: absolute;
    color: #4255d4;
    font-size: 1.75rem;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.basket-discount input {
    width: 100%;
    background-color: #222d5b;
    height: 50px;
    border: none;
    border-bottom: 2px solid #4255d4;
    font-weight: 500;
    font-size: 1rem;
    color: #fff;
    padding-left: 50px;
    line-height: 50px;
    padding-top: 5px;
    outline: 0;
    transition: all 0.3s;
}
.basket-discount input::placeholder {
    color: #5f6992;
}
.primary-button {
    width: 100%;
    border-width: 0.0625rem;
    --tw-border-opacity: 1;
    border-color: rgb(66 85 212 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(66 85 212 / var(--tw-bg-opacity));
    color: #fff;
    cursor: pointer;
    background-size: 200%;
    background-position: 200%;
    background-repeat: no-repeat;
    transition: 0.3s ease-in-out;
    transition-property: background-position, border, color;
    position: relative;
    z-index: 1;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 1rem;
}
.primary-button:before {
    top: -0.0625rem;
    left: -0.0625rem;
}
.primary-button:after,
.primary-button:before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.2rem;
    transition: background-color 0.15s ease-in-out;
}
.primary-button:after {
    bottom: -0.0625rem;
    right: -0.0625rem;
}
.button-borders {
    position: relative;
    height: -moz-fit-content;
    height: fit-content;
    margin-left: 0.25rem;
    margin-top: 0.25rem;
}
.button-borders:after,
.button-borders:before {
    content: "";
    position: absolute;
    left: -0.25rem;
    width: calc(100% + 0.5rem);
    height: 50%;
}
.primary-button:hover {
    color: #fff;
    background-position: 40%;
}
.button-borders:after {
    bottom: -0.25rem;
    z-index: 0;
    border: 0.0625rem solid rgb(66 85 212/1);
    border-top: 0;
}
.button-borders:before {
    top: -0.25rem;
    border: 0.0625rem solid rgb(66 85 212/1);
    border-bottom: 0;
}
.primary-button:after,
.primary-button:before,
.primary-button:hover:after,
.primary-button:hover:before {
    background-color: #1d213c;
}
.bg-color-red:after,
.bg-color-red:before,
.bg-color-red button {
    border-color: rgb(235 77 75/1) !important;
}
.bg-color-red button {
    background-color: rgb(235 77 75/1) !important;
}
.new-alert {
    background-color: #212a61;
    line-height: 20px;
    color: #8693bf;
    font-size: 0.9rem;
    border-left: 4px solid #4255d4;
    padding: 0.5rem 0;
}
.new-alert i {
    font-size: 18px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4255d4;
}
.answerDialog {
    width: 100%;
    position: relative;
    padding-left: 40px;
}
.answerDialog:before {
    content: "";
    width: 2px;
    height: 100%;
    background: #1d212d;
    position: absolute;
    top: 0;
    left: 0;
}
.answerDialog .answerItem {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.answerDialog .answerItem .answerTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.answerDialog .answerItem .answerTitle .answerIcon {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    background: #1d212d;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.answerDialog .answerItem .answerTitle .answerIcon:before {
    content: "";
    width: 45px;
    height: 2px;
    background: #1d212d;
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
}
.answerDialog .answerItem .answerTitle .answerTitleInfo {
    width: calc(100% - 60px);
}
.answerDialog .answerItem .answerTitle .answerTitleInfo h3 {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.answerDialog .answerItem .answerTitle .answerTitleInfo p {
    font-size: 11px;
    color: #979aa1;
    margin: 0;
}
.answerDialog .answerItem .answerDetail {
    width: 100%;
    position: relative;
    font-size: 12px;
    color: #b8bbc3;
    padding-left: 20px;
}
.answerDialog .answerItem.supportCenter .answerTitle .answerIcon {
    background: #198754;
}
.answerDialog .answerItem.supportCenter .answerTitle .answerIcon:before {
    background: linear-gradient(90deg, #1d212d, #198754);
}
.answerDialog .answerItem.supportCenter .answerDetail,
.answerDialog .answerItem.supportCenter .answerTitle .answerTitleInfo h3 {
    color: #198754;
}
.eSportTeamItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.eSportTeamItem .teamBg {
    width: calc(100% - 60px);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    background: var(--background);
}
.eSportTeamItem .teamBg .img {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.eSportTeamItem .teamBg .img:before {
    left: 0;
    background: var(--cardBackgroundRgba);
}
.eSportTeamItem .teamBg .img:after,
.eSportTeamItem .teamBg .img:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    clip-path: polygon(100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 0);
    z-index: 3;
}
.eSportTeamItem .teamBg .img:after {
    left: -100%;
    background: linear-gradient(90deg, rgba(128, 241, 177, 0.7), rgba(128, 241, 177, 0));
    transition: all 0.4s;
}
:hover.eSportTeamItem .teamBg .img:after {
    left: 0;
    transition: all 0.6s;
}
.eSportTeamItem .teamBg .img img {
    width: 100%;
    position: relative;
    clip-path: polygon(100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 0);
    z-index: 2;
}
.eSportTeamItem .teamBg:before {
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    position: absolute;
    top: -3px;
    left: -3px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
    z-index: 0;
}
:hover.eSportTeamItem .teamBg:before {
    background: #80f1b1;
    transition: all 0.6s;
}
.eSportTeamItem .teamBg:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--background);
    clip-path: polygon(100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 0);
    z-index: 1;
}
.eSportTeamItem .teamLogo {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.eSportTeamItem .teamLogo img {
    width: 100%;
    filter: drop-shadow(5px 0 5px rgba(0, 0, 0, 0.4));
}
.eSportTeamItem .teamInfo {
    width: calc(100% - 130px);
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
    z-index: 1;
}
.eSportTeamItem .teamInfo h3 {
    font-size: 25px;
    font-weight: 700;
    color: var(--textColor);
    text-shadow: 2px 2px #000;
    margin: 0;
}
.productCategoriesArea {
    width: 100%;
    position: relative;
}
.productCategoriesArea:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% 100%, 35px 100%, 0 calc(100% - 35px), 0 0);
}
.productCategoriesArea .productCategoryTitle {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-self: stretch;
    padding: 20px;
    box-shadow: 20px 0 20px 0 rgba(0, 0, 0, 0.25);
}
.productCategoriesArea .productCategoryTitle:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundLight);
    clip-path: polygon(100% 0, 100% 100%, 35px 100%, 0 calc(100% - 35px), 0 0);
}
.productCategoriesArea .productCategoryTitle h3 {
    font-size: 40px;
    font-weight: 800;
    color: var(--darkGreen);
    position: relative;
    text-align: center;
}
.productCategoriesArea .productCategoryTitle p {
    font-size: 18px;
    color: var(--textColor);
    margin: 0;
    position: relative;
    text-align: center;
}
.productCategoriesArea #productCategories {
    width: 100%;
    position: relative;
    padding: 20px 0;
}
.productCategoriesArea #productCategories .owl-item .item {
    padding: 5px;
}
.productCategory {
    width: 100%;
    position: relative;
    padding: 5px;
}
.productCategory:before {
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    position: absolute;
    top: -3px;
    left: -3px;
    background: var(--borderColor);
    clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
    z-index: 0;
}
:hover.productCategory:before {
    background: #80f1b1;
    transition: all 0.6s;
}
.productCategory:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 0);
    z-index: 1;
}
.productCategory .categoryImage {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
    clip-path: polygon(100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 0);
}
.productCategory .categoryImage:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--cardBackgroundRgba);
    z-index: 3;
}
.productCategory .categoryImage:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -100%;
    background: linear-gradient(0deg, rgba(128, 241, 177, 0.7), rgba(128, 241, 177, 0));
    transition: all 0.4s;
    z-index: 3;
}
:hover.productCategory .categoryImage:after {
    bottom: 0;
    transition: all 0.6s;
}
.productCategory .categoryImage img {
    width: 100%;
    position: relative;
    z-index: 2;
}
.productCategory .categoryTitle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}
.productCategory .categoryTitle h4 {
    font-size: 30px;
    font-weight: 800;
    color: var(--textColor);
    margin: 0;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
}
body {
    --cardBackgroundDark: #282b78;
    --borderColor: #262c54;
    --linkActiveColor: #fff;
    --darkGreen: #fff;
    padding: 1rem;
}
.sweepstakeProductsWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}
.sweepstakeProductsWrapper .sweepstakeProducts {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.sweepstakeProductsWrapper .sweepstakeProducts .emptyProduct {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 25px 15px;
    border: 2px dashed var(--borderColor);
}
.sweepstakeProductsWrapper .sweepstakeProducts .emptyProduct .infoText {
    color: var(--textColor);
}
.sweepstakeProductAddWrapper {
    width: 100%;
    position: relative;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}
.sweepstakeProductAddWrapper .sweepstakeProductAddArea {
    width: 100%;
    position: relative;
    padding: 15px;
    background: var(--cardBackground);
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.sweepstakeProductAddWrapper .sweepstakeProductAddArea .productAddItems {
    width: 100%;
    position: relative;
    padding: 10px;
    background: var(--cardBackgroundLight);
    border: 2px solid var(--borderColor);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    max-height: 284px;
}
.sweepstakeProductAddWrapper .sweepstakeProductAddArea .productAddItems .searchProductList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sweepstakeProductAddWrapper .sweepstakeProductAddArea .productAddItems .noItem {
    width: 100%;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    font-size: 14px;
    color: var(--textColor);
    text-align: center;
    border-radius: 7px;
}
body.light .sweepstakeProductAddWrapper .sweepstakeProductAddArea .productAddItems .noItem {
    background: #fff;
}
.productAddItem {
    padding: 10px;
}
body.light .productAddItem {
    background: #fff;
}
.list.productAddItem .productAddItemImage {
    width: 40px;
}
.sweepstakeProductList {
    gap: 5px;
    max-height: 197px;
}
.participantItems {
    max-height: 197px;
}
.participantItem .number {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
}
.participantItem .removeButton {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: #990d11;
    border-radius: 50%;
    transition: all 0.2s;
}
.participantItem .removeButton.copied,
.participantItem .removeButton:hover {
    background: #990d11;
    color: #fff;
    transform: scale(1.2);
    transition: all 0.2s;
}
.raffleImageUpload {
    display: none;
}
body {
    --background: #242852;
    --hoverDark: #242852;
}
.sweepstakeDetail {
    width: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}
@media (max-width: 576px) {
    .sweepstakeDetail {
        flex-direction: column;
    }
}
.sweepstakeDetail:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
    clip-path: polygon(100% 0, 100% calc(100% - 22px), calc(100% - 25px) 100%, 0 100%, 0 0);
}
.sweepstakeDetail .detailImage {
    width: 215px;
    position: relative;
}
.sweepstakeDetail .detailImage img {
    width: 100%;
    position: relative;
    max-height: 217px;
    object-fit: cover;
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailImage {
        width: 180px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailImage {
        width: 100%;
    }
}
.sweepstakeDetail .detailInfo {
    width: calc(100% - 215px);
    position: relative;
    padding: 0 0 0 15px;
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo {
        width: calc(100% - 180px);
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo {
        width: 100%;
        padding-left: 0;
    }
}
.sweepstakeDetail .detailInfo h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--textColor);
    margin: 0;
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo h2 {
        font-size: 16px;
    }
}
.sweepstakeDetail .detailInfo .detailPrice {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 0;
}
.sweepstakeDetail .detailInfo .detailPrice .price {
    font-size: 30px;
    font-weight: 800;
    color: var(--darkGreen);
    line-height: 1;
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .detailPrice .price {
        font-size: 20px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo .detailPrice .price {
        font-size: 25px;
    }
}
.sweepstakeDetail .detailInfo .detailPrice .installment {
    font-size: 14px;
    color: var(--textColor);
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .detailPrice .installment {
        font-size: 11px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo .detailPrice .installment {
        font-size: 11px;
    }
}
.sweepstakeDetail .detailInfo .participantCount {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--textColor);
    font-size: 14px;
    position: relative;
    white-space: nowrap;
    line-height: 1;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .participantCount {
        font-size: 12px;
        padding: 10px 8px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo .participantCount {
        font-size: 12px;
    }
}
.sweepstakeDetail .detailInfo .participantCount i,
.sweepstakeDetail .detailInfo .participantCount span {
    position: relative;
}
.sweepstakeDetail .detailInfo .participantCount:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackgroundLight);
    clip-path: polygon(calc(100% - 17px) 0, 100% 14px, 100% 100%, 0 100%, 0 0);
}
.sweepstakeDetail .detailInfo .productCounter {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: var(--backgroundDark);
    padding: 5px 10px;
    border-radius: 3px;
}
.sweepstakeDetail .detailInfo .productCounter .counterIcon {
    font-size: 25px;
    color: var(--darkGreen);
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .productCounter .counterIcon {
        font-size: 20px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo .productCounter .counterIcon {
        font-size: 20px;
    }
}
.sweepstakeDetail .detailInfo .productCounter .counterCounterItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sweepstakeDetail .detailInfo .productCounter .counterCounterItem .counterNumber {
    font-size: 17px;
    font-weight: 700;
    color: var(--textColor);
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .productCounter .counterCounterItem .counterNumber {
        font-size: 14px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo .productCounter .counterCounterItem .counterNumber {
        font-size: 14px;
    }
}
.sweepstakeDetail .detailInfo .productCounter .counterCounterItem .counterNumberInfo {
    font-size: 15px;
    font-weight: 400;
    color: var(--textColor);
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .productCounter .counterCounterItem .counterNumberInfo {
        font-size: 12px;
    }
}
@media (max-width: 576px) {
    .sweepstakeDetail .detailInfo .productCounter .counterCounterItem .counterNumberInfo {
        font-size: 12px;
    }
}
@media (max-width: 1399px) {
    .sweepstakeDetail .detailInfo .buttonRightSingle.large {
        font-size: 14px;
        padding: 9px 15px;
    }
}
.participantItems {
    width: 100%;
    position: relative;
    height: 155px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 5px;
}
@media (max-width: 1399px) {
    .participantItems {
        height: 130px;
    }
}
@media (max-width: 576px) {
    .participantItems {
        height: 155px;
    }
}
.participantItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 7px;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
    background: var(--background);
}
body.light .participantItem {
    box-shadow: none;
}
@media (max-width: 1399px) {
    .participantItem {
        padding: 5px 10px;
        gap: 5px;
    }
}
.participantItem .number {
    width: auto;
    height: auto;
    position: relative;
    line-height: 1;
    text-align: center;
    color: var(--darkGreen);
    font-size: 13px;
    font-weight: 600;
    background: var(--cardBackgroundLight);
    padding: 5px 10px;
    border-radius: 5px;
}
@media (max-width: 1399px) {
    .participantItem .number {
        font-size: 12px;
        padding: 2px 5px;
    }
}
@media (max-width: 576px) {
    .participantItem .number {
        font-size: 12px;
        padding: 2px 10px;
    }
}
.participantItem .text {
    font-size: 12px;
    line-height: 1;
}
@media (max-width: 1399px) {
    .participantItem .text {
        font-size: 11px;
    }
}
@media (max-width: 576px) {
    .participantItem .text {
        font-size: 11px;
    }
}
.participantItem.winner {
    background: #e9b535;
}
.participantItem.winner .number {
    background: #ffc754;
    color: #000;
}
.participantItem.winner .text {
    color: #000;
    font-weight: 700;
}
.participantItem.winner .winnerText {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 800;
    color: #000;
    padding: 5px;
    border-radius: 3px;
    line-height: 1;
    background: #ffc754;
}
@media (max-width: 1399px) {
    .participantItem.winner .winnerText {
        right: 5px;
    }
    .participantItem.winner .winnerText span {
        display: none;
    }
}
@media (max-width: 576px) {
    .participantItem.winner .winnerText {
        font-size: 9px;
        right: 10px;
    }
    .participantItem.winner .winnerText span {
        display: inline-block;
    }
}
.sweepstakeProductList {
    width: 100%;
    position: relative;
    height: 155px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 5px;
}
@media (max-width: 1399px) {
    .sweepstakeProductList {
        height: 130px;
    }
}
@media (max-width: 576px) {
    .sweepstakeProductList {
        height: 155px;
    }
}
.productAddItem {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 7px;
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.15);
    background: var(--background);
    padding: 5px;
}
body.light .productAddItem {
    box-shadow: none;
}
.productAddItem .productAddItemImage {
    width: 60px;
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.list.productAddItem .productAddItemImage {
    width: 35px;
}
.productAddItem .productAddItemImage img {
    width: 100%;
    position: relative;
}
.productAddItem .productAddItemInfo {
    width: calc(100% - 60px);
    position: relative;
    padding: 10px 35px 10px 15px;
}
.list.productAddItem .productAddItemInfo {
    width: calc(100% - 40px);
    padding: 0 0 0 5px;
}
.productAddItem .productAddItemInfo h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--textColor);
    margin: 0;
    padding: 0;
}
.productAddItem .productAddItemInfo h3 a {
    color: var(--textColor);
}
.productAddItem .productAddItemInfo .productAddItemPrice {
    font-size: 14px;
    font-weight: 800;
    color: var(--darkGreen);
}
.productAddItem .productAddItemInfo .productAddItemAddButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #28a745;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    transition: all 0.2s;
}
.productAddItem .productAddItemInfo .productAddItemAddButton:hover {
    background: #157b2a;
    color: #fff;
    transform: scale(1.1) translateY(-50%);
    transition: all 0.2s;
}
.productAddItem .productAddItemInfo .productAddItemRemoveButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #c3141b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    transition: all 0.2s;
}
.productAddItem .productAddItemInfo .productAddItemRemoveButton:hover {
    background: #990d11;
    color: #fff;
    transform: scale(1.1) translateY(-50%);
    transition: all 0.2s;
}
.streamArea {
    width: 100%;
    position: relative;
    padding: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}
.streamArea:before {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cardBackground);
}
.streamArea:before,
.streamArea iframe {
    width: 100%;
    clip-path: polygon(calc(100% - 32px) 0, 100% 25px, 100% 100%, 0 100%, 0 0);
}
.donateButton,
.streamArea iframe {
    position: relative;
}
.donateButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 700;
    color: var(--textColor);
    background: var(--cardBackgroundLight);
    border-radius: 5px;
    border: 2px solid var(--borderColor);
    transition: all 0.2s;
}
.donateButton:hover {
    background: #80f1b1;
    color: #343891;
    border-color: #248a50;
    transition: all 0.2s;
}
.mobileTitle {
    width: 100%;
    position: relative;
}
.mobileTitle h2 {
    font-size: 17px;
    text-align: center;
    margin: 0;
}
body {
    --background: #151632;
    --backgroundRgbaZero: rgba(24, 24, 32, 0);
    --backgroundDarkLightBlue: #111117;
    --backgroundDark2: #0c0c10;
    --cardBackgroundLight: #242851;
    --cardBackgroundDark: #282b78;
    --cardBackgroundRgba: rgba(32, 33, 43, 0.6);
    --borderColor3: #0e0e14;
    --hoverDark: #151632;
    --darkBluelightWhite: #343891;
}
body,
body.light {
    --darkGreenDark: #248a50;
    --darkBlueDark: #282b78;
}
body.light {
    --backgroundDark: #ddd;
    --backgroundDarkLightBlue: #343891;
    --backgroundDark2: #bbb;
    --cardBackgroundLight: #f2f2f2;
    --cardBackgroundDark: #dbdbdb;
    --cardBackgroundRgba: hsla(0, 0%, 100%, 0.6);
    --placeholderColor: #212529;
    --borderColor2: #8b8989;
    --borderColor3: #bbb;
    --darkBluelightWhite: #fff;
}
.detailTab {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
    z-index: 4;
}
.detailTab .tabHeader {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    background: var(--cardBackgroundLight);
    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;
}
.column-4.detailTab .tabHeader {
    grid-template-columns: repeat(2, 50%);
}
.column-3.detailTab .tabHeader {
    grid-template-columns: repeat(3, 33.3333333333%);
}
@media (max-width: 1199px) {
    .column-3.detailTab .tabHeader,
    .column-4.detailTab .tabHeader,
    .detailTab .tabHeader {
        grid-template-columns: repeat(1, 100%);
    }
}
.detailTab .tabHeader .tabButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--textColor);
    padding: 15px 25px;
    border-right: 1px solid var(--borderColor2);
}
.detailTab .tabHeader .tabButton:first-child{
  border-top-left-radius:.5rem;
}
.detailTab .tabHeader .tabButton:last-child{
  border-top-right-radius:.5rem;
}
@media (max-width: 1399px) {
    .detailTab .tabHeader .tabButton {
        font-size: 12px;
        padding: 10px 20px;
    }
}
@media (max-width: 1199px) {
    .detailTab .tabHeader .tabButton {
        font-size: 12px;
        border-right: none !important;
        justify-content: flex-start;
        padding: 10px 15px;
    }
    .detailTab .tabHeader .tabButton,
    .detailTab .tabHeader .tabButton:first-child,
    .detailTab .tabHeader .tabButton:nth-child(2),
    .detailTab .tabHeader .tabButton:nth-child(3) {
        border-bottom: 1px solid var(--borderColor2);
    }
    .detailTab .tabHeader .tabButton:last-child {
        border-right: 1px solid var(--borderColor2) !important;
    }
}
.detailTab .tabHeader .tabButton i,
.detailTab .tabHeader .tabButton iconify-icon {
    font-size: 20px;
    color: var(--darkGreen);
}
.detailTab .tabHeader .tabButton:last-child {
    border-right: none;
}
.detailTab .tabHeader .tabButton.active {
    background: var(--darkGreen);
    color: var(--darkBlue);
    font-weight: 600;
}
.detailTab .tabHeader .tabButton.active i,
.detailTab .tabHeader .tabButton.active iconify-icon {
    color: var(--darkBlue);
}
.detailTab .tabHeader .tabButton:hover {
    background: var(--darkBlue);
    color: var(--darkGreen);
}
.detailTab .tabHeader .tabButton:hover i,
.detailTab .tabHeader .tabButton:hover iconify-icon {
    color: var(--darkGreen);
}
.detailTab .tabBody,
.detailTab .tabDetail {
    width: 100%;
    position: relative;
}
.detailTab .tabDetail {
    padding: 20px;
    font-size: 14px;
    display: none;
    background: var(--cardBackground);
}
.detailTab .tabDetail.active {
    display: block;
}
.detailTab .tabDetail .customAlert.dark {
    background: var(--cardBackgroundDark);
}
.detailTab .tabDetail iframe {
    width: 100%;
}
body {
    --background: #242851;
    --cardBackground: #1d2041;
    --textColor: #c8c9d8;
    --borderColor: #262d56;
    --linkActiveColor: #80f1b1;
    --hoverDark: #151632;
    --linkText: #c8c9d8;
    --darkGreen: #80f1b1;
    --darkBlue: #343891;
    --otherColor1: #1b1c26;
    font-family: "Oxanium", sans-serif;
    font-size: 14px;
}
body,
body.light {
    --backgroundDark: #111117;
    --placeholderColor: #abacb5;
    --borderColor2: #171822;
    background: var(--background);
    color: var(--textColor);
}
body.light {
    --background: #eee;
    --cardBackground: #fff;
    --textColor: #212529;
    --borderColor: #e5e5e5;
    --linkActiveColor: #343891;
    --hoverDark: #eee;
    --linkText: #343891;
    --darkGreen: #343891;
    --darkBlue: #80f1b1;
    --otherColor1: #f1f1f1;
}
body a {
    text-decoration: none;
}
.page-top {
    width: 100%;
    text-align: center;
    background: url(https://joyx.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpromotion1.364daeb0.jpg&w=1920&q=75);
    height: 400px;
    background-size: cover;
    margin-top: -160px;
    border-radius: 0.75rem;
    padding-top: 160px;
}
.page-top-image-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-image: radial-gradient(circle, #1a2049 0, rgba(26, 32, 73, .9) 30%, rgba(26, 32, 73, .8) 40%, rgba(26, 32, 73, .7) 50%, rgba(26, 32, 73, .6) 60%, rgba(26, 32, 73, .5) 70%, rgba(26, 32, 73, .4) 80%, rgba(26, 32, 73, .3) 90%, rgba(26, 32, 73, .2) 100%);
}
.page-top-title{
    font-size: 2.5rem;
    font-weight: 600;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(0deg, #888, #fff 75%);
}
.page-top-desc{
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
}
.categoryDescription{
    background-color:#242851;
    border-radius: .5rem;
}
.product-item{
    background-color: #282c34;
    border-radius: .5rem;
    padding: 2px;
    position: relative;
    overflow: hidden;
    height: 15.875rem;
    cursor: pointer;
    margin-bottom:2rem;
}
.product-item-box{
    background-color: #252954;
    border-radius: 0.5rem;
    padding: 2px;
    position: relative;
    height:100%;
    display: flex;
    flex-direction: column;
}
.product-image-box{
    position: relative;
    background: linear-gradient(45deg, rgba(29, 32, 67, .5), rgba(105, 115, 248, .25), rgba(29, 32, 67, .5));
    border-radius: .5rem;
    box-shadow: 0px 5px 8px -5px #000;
    text-align: center;
    padding: 0;
    overflow: hidden;
    height: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image-box div{
    position: absolute;
    right: 0;
    top: 0;
    background-color: #1d2136;
    font-size: 13px;
    padding: 0 .25rem;
    border-top-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    box-shadow: 0px 5px 8px -5px #000;
    z-index:99;
}
.product-image-box img{
    height: 90px;
    background-size: cover;
    background-position: 50%;
    position: relative;
}
.product-image-box .light-effect{
    content: " ";
    background-image: url(https://serwiss.com/revolution/images/light.png);
    border-radius: 50%;
    animation: rotate-light 10s linear infinite;
    position: absolute;
    width: 500px;
    height: 500px;
    background-size: cover;
    opacity: 0.03;
    box-shadow: none;
    background-color: transparent;
    left: -50%;
    top: -30%;
}
.product-item .product-name{
    font-weight: 500;
    color: #fff;
    font-size: 1rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product-item .category-name{
    font-size:.75rem;
}
.product-item:hover .product-effect:before {
    content: " ";
    background: linear-gradient(90deg, transparent, rgba(104, 109, 224, .6), rgba(104, 109, 224, .9), rgba(104, 109, 224, .9), rgba(104, 109, 224, .6), transparent);
    top: -15.625rem;
    position: absolute;
    display: block;
    width: 12.5rem;
    height: 250%;
    animation: rotation_481 6s linear infinite;
}
.product-item .product-effect {
    transition: all 0.2s;
}
.product-item .product-content{
    flex-direction: column;
    justify-content: space-between;
}
.product-item .product-amount{
    color: #f9ca24;
    font-size: 1rem;
    font-weight: 500;
}
.product-item .product-old-price{
    text-decoration-line: line-through;
    color: #7f8087;
    margin-right: .5rem;
}
.product-item .product-discount{
    color: #eb4d4b;
    font-weight: 300;
}
.product-item .product-price{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-item a{
    border: 1px solid #ccc;
    border-radius: .25rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.2s;
}
.product-item a:hover{
    border: 1px solid #5466d4;
    background-color: #3d4fc5;
}
.product-item .product-description-text{
    color: #fd7e14;
    font-size: .75rem;
}
.product-detail-box{
    border: 1px solid #363f6a;
    background-image: linear-gradient(45deg, #1a1f45, #1c2350);
    border-radius: .5rem;
    padding: 1rem;
}
.product-detail-box .require-box{
    position: relative;
}
.product-detail-box .require-box i{
    position: absolute;
    padding: 0.8rem 1rem;
    font-size: 1.5rem;
    color: #3d4fc5;
    top: 0;
}
.product-detail-box .require-box input{
    width: 100%;
    background-color: #151632;
    border: none;
    border-bottom: 2px solid #3d4fc5;
    height: 50px;
    line-height: 50px;
    padding: 0 3rem 0 3rem;
    font-size: 1rem;
    font-weight: 500;
    color: #FFF;
    margin-bottom: 1rem;
    outline:0;
    text-align: center;
}
.product-detail-box .require-box input::placeholder{
    color:#363f6a;
}
.product-detail-box .player-info{
    background-color: #d5f7db;
    color: #007547;
    width: max-content;
    padding: .4rem .5rem .3rem .5rem;
    border-radius: 1.5rem;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    display: flex;
}
.product-detail-box .player-info i{
    font-size: 1.3rem;
}
.product-detail-box .player-data{
    padding-bottom: 10px;
}
.product-detail-box .require-box .requile-left-x{
    position: absolute;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem 1.25rem;
}
.product-detail-box .require-box .requile-right-x{
    position: absolute;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem 1.25rem;
    top: 0;
    right: 0;
}

@keyframes rotation_481 {
    0% {
        transform: rotate(0deg);
        transform: rotate(1turn)
    }
}

@keyframes rotate-light {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.game-one-page{
    background-color:#242851;
    padding:10px;
    border-radius:5px;
}
.game-one-page .one-product-name{
    color:#fff;
    font-size:16px;
    font-weight:500;
}
.game-one-page .one-spesific-box{
    display:flex;
}
.game-one-page .one-spesific{
    color:#fff;
    background-color: #151632;
    width: 50%;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    border: 1px solid #333444;
}
.game-one-page .one-spesific i{
    margin-right: 4px;
    color: #18bd0d;
    font-size: 20px;
}
.game-one-page .one-description{
    color: #fff;
    font-size: 12px;
    margin-top: 10px;
    height: 155px;
    overflow: hidden;
    background-color: #151632;
    padding: 6px 10px;
    border-radius: 5px;
}
.game-one-page .one-next-description{
    color:#fff;
    font-size:14px;
    margin-top:10px;
}
.game-one-page .one-product-item{
    background-color: #151632;
    border: 1px solid #333444;
    border-radius: 5px;
    padding: 5px;
    cursor:pointer;
    margin-bottom:5px;
}

.game-one-page .one-product-item:hover{
    background-color:#3d4fc5;
}
.game-one-page .active .one-product-price,
.game-one-page .one-product-item:hover .one-product-price,
.game-one-page .active .one-product-price-bonus,
.game-one-page .one-product-item:hover .one-product-price-bonus{
    color:#fff;
}
.game-one-page .one-product-item-right{
    background-color: #212433;
    border: 1px solid #333444;
    border-radius: 5px;
    padding: 5px;
    cursor:pointer;
    margin-bottom:5px;
}
.game-one-page .active{
    background-color:#3d4fc5;
}
.game-one-page .one-product-image-box{
    background-color: #151632;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #333444;
}
.game-one-page .one-product-image-box img{
    width:100%;
    border-radius:5px;
}
.game-one-page .one-category-name,
.game-one-page .one-item-product-name{
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.game-one-page .one-product-price{
    color:#bfbfbf;
    font-size:14px;
    font-weight:500;
}
.game-one-page .one-product-price-bonus{
    color:#3d4fc5;
    font-size:10px;
    font-weight:500;
}
.game-one-page .one-box-title{
    font-size:16px;
    font-weight:500;
    color:#fff;
    margin-bottom:10px;
}
.game-one-page .one-mega-image{
    width:100%;
    border-radius:5px;
}
.game-one-page .one-warning-box{
    background-color: #151632;
    color: #fff;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 5px;
}
.game-one-page .one-warning-box i{
    font-size: 23px;
    line-height: 18px;
    margin-right: 10px;
    color: #3d4fc5;
}
.game-one-page .one-warning-box span{
    color:#3d4fc5;
    font-weight:500;
}
.game-one-page .one-label{
    font-size: 13px;
    color: #fff;
    font-weight: 400;
}
.game-one-page .one-input{
    width: 100%;
    background-color: #151632;
    border: 1px solid #333444;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    outline: 0;
    color: #fff;
}
.game-one-page .one-id-find{
    color: #3d4fc5;
    font-size: 32px;
    margin-top: 16px;
    margin-left: 7px;
}
.game-one-page .one-payment-price{
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
}
.game-one-page .one-payment-discount{
    color:#18ad18;
    font-size:12px;
    font-weight:600;
}
.game-one-page .one-payment-title{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
}
.game-one-page .one-payment-box a{
    background-color: #212433;
    border: 1px solid #333444;
    border-radius: 5px;
    padding: 0 10px;
    color: #fff;
    font-size: 14px;
    align-items: center;
    height: 34px;
}
.game-one-page .one-payment-box a img{
    height:18px;
}
.game-one-page .one-payment-box a:hover{
    background-color:#151632;
}
.game-one-page .one-payment-box .active{
    background-color:#151632;
}
.game-one-page .one-payment-process{
    background-color: #3d4fc5;
    width: 100%;
    border-radius: 5px;
    border: none;
    color: #fff;
    margin-top: 10px;
    font-size: 14px;
    line-height: 30px;
}
.game-one-page .one-payment-wallet{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-top: 3px;
    background-color: #151632;
    border: 1px solid #333444;
    padding: 0px 8px;
    border-radius: 5px;
}
.one-right-sticky{
    position: sticky;
    top: 10px;
}
.one-payment-cancel{
    background-color: #dc3545;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 10px;
}
.game-one-page iframe{
    border-radius:5px;
}

.popover{
    max-width:500px;
    border:1px solid #333444;
    border-radius:5px;
}
.popover .popover-header{
    display:none;
}
.popover .popover-body{
    padding:5px;
    background-color:#151632;
    border-radius:5px;
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before{
    border-right-color:#151632;
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after{
    border-right-color:#151632;
}
.popover .img-fluid{
  border-radius:5px;
  border:1px solid #333444;
}


.checkbox-wrapper input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper label {
  display: inline-block;
}

.checkbox-wrapper .cbx {
  position: relative;
  top: 1px;
  width: 17px;
  height: 17px;
  border: 1px solid #3d4fc5;
  border-radius: 3px;
  vertical-align: middle;
  transition: background 0.1s ease;
  cursor: pointer;
}
.checkbox-wrapper .cbx:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 11px;
  opacity: 0;
  transform: rotate(45deg) scale(0);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transition: all 0.3s ease;
  transition-delay: 0.15s;
}
.checkbox-wrapper .lbl {
  margin-left: 2px;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  margin-top: 2px;
}
.checkbox-wrapper input[type="checkbox"]:checked ~ .cbx {
  border-color: transparent;
  background: #3d4fc5;
  animation: jelly 0.6s ease;
}
.checkbox-wrapper input[type="checkbox"]:checked ~ .cbx:after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.checkbox-wrapper .cntr {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
}
@-moz-keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}
@-webkit-keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}
@-o-keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}
@keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}
.game-one-page .one-control{
    background-color: #3d4fc5;
    color: #fff;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 14px;
    width: max-content;
    align-items: center;
    justify-content: center;
}
.one-page-mobile-bottom{
    position: fixed;
    bottom: 44px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    left: 0;
    width: 100%;
}
.product-category-menu{
    list-style: none;
    padding-left: 0;
    display: grid;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.product-category-menu li a{
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-category-menu li a{
    color:var(--textColor)!important;
}
.product-category-menu .active:hover{
    background-color: #151632;
}
.product-category-menu .active{
    background-color: #151632;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}
.product-category-menu li:hover{
    background-color: #20254e;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}
.div-block{
    background-color: #22264d !important;
    border-radius: .5rem;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    padding: 1rem;
    max-height: 400px;
    overflow: auto;
}
.login-box{
    background-color: #1a214d;
    padding: 1.5rem;
    border-radius: .5rem;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
}
.login-btn-box{
    display: flex;
    justify-content: space-between;
    background-color: #151632;
    padding: .35rem;
    border-radius: .5rem;
    margin-bottom: 1.25rem;
}
.login-btn-box .active{
    background-color: #3d4fc5;
}
.login-btn-box a{
    display: flex;
    height: 40px;
    align-items: center;
    width: 50%;
    justify-content: center;
    font-size: 18px;
    border-radius: .5rem;
    color: #fff;
    padding-top: 0.35rem;
}
.login-box .formGroup .formControl{
    height:39px;
    background-color: #151632;
    border-color: #3d4fc5;
}
.login-box .passwordToggleButton{
    background: #3d4fc5!important;
    color: #fff!important;
}
.login-box .formGroup.withIcon .icon{
    width: 40px;
    height: 39px;
    position: absolute;
    top: 26px;
    right: 0;
    background: #3d4fc5;
    border-radius: 0 !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #FFF;
}
.home-popular{
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(1, 1fr);
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.bg-none{
  background:unset;
  box-shadow:unset;
}
@keyframes infiniteRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.loader svg {
    animation: infiniteRotate .9s linear infinite;
}
.loader-open{
    overflow: hidden;
}
.story-product{
    background-color: #242852;
    margin-top: 2rem;
    border-radius: .325rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.story-product-item{
    display: flex;
    background-color: #151632;
    padding: .5rem;
    border-radius: .5rem;
}
.story-product-item .product-image-box{
    height: 90px;
    width: 124px;
}
.story-product-item .light-effect{
    width: 350px;
    height: 350px;
    left: -120%;
    top: -45%;
}
.story-product-item img{
    height: 40px;
}
.story-product-item .story-product-detail{
    margin-left: 1rem;
    display: grid;
    align-items: center;
    width: 100%;
}
.story-product-item .story-product-title{
    font-weight: 500;
    font-size: 1.15rem;
}
.story-product-item .product-rating{
    font-size: .75rem;
    color: #e9b535;
}
.story-product-font{
    font-size: .75rem;
    color: #e9b535;
}
.story-product-item .story-product-buy{
    background-color: #242852;
    border-radius: .5rem;
    padding: .3rem .75rem;
    font-weight: 600;
    color: #fff;
    padding-top: 7px;
}
.story-product-item .story-product-price{
    font-size: 1rem;
    font-weight: 600;
    color: #f9ca24;
}
.story-product-item .story-product-buy:hover {
    background: #3948a7;
}
.shroom-item{
    background-color: #242852;
    border-radius: .5rem;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    position: relative;
    transition: all 0.3s;
}
.shroom-item:hover{
    filter:drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
}
.shroom-item .shroom-server{
    background: radial-gradient(circle, rgb(255 255 255 / 63%) -40%, #242852 41%);
    background-position-y: -24px;
    background-repeat: no-repeat;
    background-size: 100% 200%;
    padding: 4px 4px 0 4px;
    text-align: center;
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px #000;
    position: absolute;
    z-index: 2;
    left: 5px;
    top: 5px;
    border-radius: 6px;
    border: 1px solid #5a5a5a;
}
.shroom-item .shroom-image{
    height: 240px;
    overflow: hidden;
    background-color: #000000;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.shroom-item .shroom-image img{
    border-radius: .5rem;
}
.shroom-item .shroom-detail{
    background: #242851;
    position: relative;
    z-index: 9999;
    width: 100%;
    padding: 1rem .5rem .25rem .5rem;
}
.shroom-item .shroom-detail .imageItem a img{
    width:36px;
}
.shroom-item .shroom-detail .imageItem{
    width:36px;
    position: relative;
}
.shroom-item .shroom-detail .other-item-list{
    position: absolute;
    display: flex;
    top: -61px;
    width: 100%;
    left: 0;
    justify-content: center;
}
.shroom-other-show{
    background: #000;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    position: relative;
    height: 36px;
}
.shroom-title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shroom-other-detail{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: absolute;
    width: 100%;
    top: -20px;
    left:0;
}
.shroom-other-detail img{
    border: 2px solid #242851;
    border-radius: .325rem;
    width: 34px;
}
.shroom-item .shroom-boost{
    display: flex;
    gap: .325rem;
    align-items: center;
    justify-content: center;
    background-color: #242851;
    border: 3px solid #242851;
    border-radius: .5rem;
    padding: 0 .5rem;
    font-weight: 600;
    color: #fff;
}
.shroom-item .shroom-price{
    display: flex;
    gap: .325rem;
    justify-content: center;
    background-color: #242851;
    border: 3px solid #242851;
    border-radius: .5rem;
    padding: 0 .5rem;
    color: #f2c125;
    font-weight: 600;
    line-height: 21px;
}
.shroom-seller{
    padding: .5rem;
    border-top: 1px solid #151632;
    background-color: #242851;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.shroom-seller-avatar{
    width: 36px;
    border-radius: 50%;
    margin-right: 1rem;
    border: 2px solid #151632;
}
.shroom-online{
    color:#28a745;
    font-size: 11px;
    display: flex;
    gap: .325rem;
}
.shroom-online i{
    box-shadow: #00ff16ab -1px -1px 9px;
    border-radius: 50%;
    height: 11px;
}
.shroom-online div{
    line-height: 11px;
}
.shroom-item .itemModal{
    position: absolute;
    z-index:99999;
}
.active-shroom{
    z-index:99999;
}
.next-product{
  padding-top:.5rem;
  padding-bottom:.5rem;
  position: absolute;
  left: -24px;
  height: 100%;
}
@keyframes shake-x {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(2px);
    }
    75% {
        transform: translateX(-2px);
    }
}
.next-block{
    height: 100%;
    display: flex;
    align-items: center;
    background: #151632;
    width: 35px;
    justify-content: center;
    color: #fff;
    border-radius: .5rem;
    font-size: 20px;
    transition: all 0.2s;
    animation: shake-x 1s infinite;
}
.next-block:hover{
    background:#3948a7;
    color: #fff;
}
@media (max-width: 576px) {
  .page-top {
    display: none;
  }
  .product-category-menu{
    display:block;
  }
  .product-category-menu .active{
    border-radius: .5rem;
  }
  .detailTab .tabHeader .tabButton:first-child{
    border-top-right-radius:.5rem;
  }
  .product-image-box img{
    height:30px;
    margin-top:10px;
  }
  .product-item .category-name{
    display:none;
  }
  .product-image-box{
    height:140px;
  }
  .product-item{
    height:12.875rem;
  }
  .product-item .product-price{
    justify-content: center;
    text-align: center;
  }
  .product-price-box{
    width:100%;
  }
  .product-item .product-discount{
    background: linear-gradient(160deg, #f2b818 14.64%, #f26c3d 85.36%);
    border-radius: .25rem;
    color: #fff;
    font-weight: 600;
    padding-top: 2px;
    font-size: 13px;
  }
  .product-item .product-amount{
    font-size:14px;
  }
  .product-item .product-old-price{
    font-size: 13px;
    margin-right: 0;
    margin-top: -4px;
    margin-bottom: 2px;
  }
  .product-item .product-name{
    font-size:14px;
  }
}