/* ==============================================================================
   Project Name:      CryptOcelot
   Description:       This is the main css that we use for our components and pages
   Author:            TheRealMagyar
   Date Created:      2024-07-27
   Last Modified:     2024-07-27
   Version:           1.0
   ==============================================================================

   CSS Style Guide:
   - Use two spaces for indentation.
   - Use hyphens for class names (e.g., .main-content).
   - Maintain consistency in naming conventions and formatting.
   - Always test styles across multiple browsers and devices.

   CSS table of contents:
   - INFO-0 *** Global Variables
   - INFO-1 *** Basic Settings
   - INFO-2 *** Basic Classes

   - COMP-0 *** Navbar Components
   - COMP-1 *** Cart Components
   - COMP-2 *** Mainpage Slider Components
   - COMP-3 *** Quick Search Components
   - COMP-4 *** For You Components
   - COMP-5 *** Footer Components
   - COMP-6 *** Set-bar Components (profile)
   - COMP-7 *** Filters Container Components (Shop)
   - COMP-8 *** Tag Components
   - COMP-9 *** Shop-normal-item-grid Components
   - COMP-10 *** Shop-line-item-grid Components
   - COMP-11 *** Shop-img-item-grid Components
   - COMP-12 *** Connected-app Components
   - COMP-13 *** Create Collection Components
   - COMP-14 *** Create Item Components
   - COMP-15 *** Edit Collection Components
   - COMP-15 *** Edit Item Components

   - PAGE-0 *** Main page
   - PAGE-1 *** Profile page
   - PAGE-2 *** Settings page
   - PAGE-3 *** Shop page
   - PAGE-4 *** Stats page
   - PAGE-5 *** 404 page
   - PAGE-6 *** Auction page NOT DONE
   - PAGE-7 *** Check-out page
   - PAGE-8 *** Collection page
   - PAGE-9 *** Coming soon page
   - PAGE-10 *** Dashboard page
   - PAGE-11 *** Item page

   Notes:
   - Please document major changes and updates here.
   - Any known issues or limitations should be noted.
   ============================================================================== */

/* INFO-0 <<@------------------------ Global Variables ------------------------@>>*/
    :root {

        /*@============>> FONTS and FONT SETTINGS <<============@*/

        /* press start 2p */
        --press-start-2p:"Press Start 2P";
        --press-start-2p-bs-size: 11px;
        --press-start-2p-small-size: 14px;
        --press-start-2p-mid-size: 16px;
        --press-start-2p-large-size: 20px;

        /* inter */
        --inter:"Inter";
        --inter-tinier-size: 12px;
        --inter-tiny-size: 13px;
        --inter-small-size: 15px;
        --inter-bs-size: 16px;
        --inter-mid-size: 20px;
        --inter-big-size: 24px;
        --inter-very-big-size: 40px;
        --inter-huge-size: 48px;

        --inter-font-weight-semi-bold: 600;

        /* Hind vadodara */
        --hind-vadodara: "Hind Vadodara", sans-serif;
        --hind-vadodara-bs-size: 16px;
        --hind-vadodara-big-size: 24px;

        /* Roboto */
        --roboto: "Roboto", sans-serif;
        --roboto-bs-size: 16px;
        --roboto-mid-size: 20px;

        /* Plus Jakarta Sans */
        --plus-jakarta-sans: "Plus Jakarta Sans", sans-serif;
        --plus-jakarta-bs-size: 16px;
        --plus-jakarta-mid-size: 18px;

        /* Poppins */
        --poppins: "Poppins", sans-serif;
        --poppins-bs-size: 16px;
        --poppins-mid-size: 20px;

        /* opensans */
        --open-sans: "Open Sans", sans-serif;

        /*@============>> COLORS and COLOR SETTINGS <<============@*/

        /* --bs-primary:#132547;  OLD */
        --bs-primary: rgba(22, 22, 22, 1);
        --bg-nav: #161616;
        --color-white: white;
        --color-light-white: rgba(255, 255, 255, 0.1);
        --color-brown: #544848;
        --color-dark-brown: #423C3C;
        --color-black-02: rgba(0,0,0,0.2);
        --color-black-03: rgba(0,0,0,0.25);
        --color-black-04: rgba(0, 0, 0, 0.5);
        --color-black-05: rgba(0,0,0,1);
        --color-black-06: #161616;
        --color-gray-01: rgba(84, 72, 72, 0.3);
        --color-gray-02: rgba(217,217,217,0.2);
        --color-gray-03: rgba(84, 72, 72, 0.4);
        --color-light-gray: rgba(119, 119, 119, 1);
        --color-light-gray-02: rgba(255, 255, 255, 0.3);
        --color-light-gray-03: #9CA3AF;
        --color-dark-gray: rgba(53, 50, 50, 0.4);
        --color-dark-gray-focused: rgba(10, 9, 9, 0.49);
        --color-home-item: rgba(22, 22, 22, 1);
        --color-light-green: rgb(43, 172, 43);
        --color-yellow: rgba(223, 252, 48, 1);

        /*@============>> HEIGHT, WIDTH and MARGIN SETTINGS <<============@*/
        /* area */
        --area-standard: 50px;
        --area-big: 54px;

        /* container width*/
        --c-standard-width: calc(100% - 76px);
        --c-standard-margin: 12px 38px 0 38px;
        --c-s-m-n: 38px;

        --footer-standard-width: calc(100% - 672px);

    }

/* INFO-1 <<@------------------------ Basic Settings ------------------------@>>*/
    body {
        background-color: var(--bs-primary);
    }
    a {
        text-decoration: none;
    }
    /* scrollbar */
    ::-webkit-scrollbar {
        width: 12px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(22, 22, 22, 0.6);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(117, 117, 117, 0.8);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.8);
    }

/* INFO-2 <<@------------------------ Basic Classes ------------------------@>>*/
    .p0 {
        padding: 0;
    }
    .m0-p0 {
        margin: 0;
        padding: 0;
    }
    .ai-center {
        align-items: center;
    }
    /* The switch - the box around the slider */
    .switch2 {
        position: relative;
        display: inlinex-block;
        width: 60px;
        height: 34px;
        margin-left: auto;
        margin-right: 20px;
    }
    .switch2 input {
        opacity: 0;
        width: 0;
        height: 0;
    }
     /* The slider */
    .slider2 {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider2:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    input:checked + .slider2 {
        background-color: #2196F3;
    }
    input:focus + .slider2 {
        box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider2:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    /* Rounded sliders */
    .slider2.round2 {
        border-radius: 34px;
    }
    .slider2.round2:before {
        border-radius: 50%;
    }
    /* Switch3 */
    .switch3 {
        position: relative;
        display: inline-block;
        width: 45px; /* Szélesség átállítva 45px-re */
        height: 24px;
        margin-left: auto;
        margin-right: 20px;
    }
    /* HTML checkbox elrejtése */
    .switch3 input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    /* A csúszka (slider) */
    .slider3 {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px; /* Kerekítés áthelyezése, mivel mindkét csúszka kör alakú */
    }
    .slider3:before {
        position: absolute;
        content: "";
        height: 20px; /* Átállítva 20px magasságra */
        width: 20px; /* Átállítva 20px szélességre */
        left: 3px; /* Átállítva 3px-re */
        bottom: 2px; /* Átállítva 2px-re */
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider3 {
        background-color: #2196F3;
    }
    input:focus + .slider3 {
        box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider3:before {
        transform: translateX(21px); /* Átméretezve 21px-re */
    }
    .slider3.round3:before {
        border-radius: 50%;
    }
    
    .sort-by-btn {
        position: relative;
        height: 50px;
        margin-right: 5px;
        display: flex;
        align-items: center;
        cursor: pointer;
        border: 2px solid rgba(217, 217, 217, 0.1);
        border-radius: 16px;
        background-color: transparent;
        transition: border 0.3s;
    }
    .sort-by-btn:hover {
        border: 2px solid rgba(217, 217, 217, 0.2);
    }
    .sort-by-txt {
        color: #ffffff;
        margin-left: 10px;
        margin-right: 30px;
        white-space: nowrap;
        font-size: 16px;
        font-family: Arial, sans-serif;
    }
    .sort-by-icon {
        margin-left: auto;
        margin-right: 10px;
        transition: transform 0.3s; /* Animáció hozzáadása */
    }
    /* dropdown menu 2 */
    .dropdown-menu2 {
        top: 40px;
        display: none;
        width: 100%;
        position: absolute;
        background-color: transparent;
        z-index: 1;
    }
    .dd-container2 {
        width: 100%;
        background-color: rgb(51, 51, 51);
        border-radius: 16px;
    }
    .dropdown-menu2 ul {
        list-style-type: none;
        padding: 0;
    }
    .dropdown-menu2 ul li {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .dd-container2 li button {
        color: var(--color-white);
        height: 50px;
        width: calc(100% - 10px);
        display: flex;
        flex-shrink: 0;
        white-space: nowrap;
        align-items: center;
        margin: 0 5px;
        border: 0;
        cursor: pointer;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        font-family: var(--hind-vadodara);
        background-color: transparent;
    }
    .dd-container2 li button:hover {
        background-color: #56555586;
    }
    .dd-container2 li button input {
        height: 16px;
        width: 16px;
        margin: 0 10px;
    }
    .dd-container2 ul:first-child li:first-child button {
        margin-top: 5px;
    }
    .dd-container2 ul:last-child li:last-child button {
        margin-bottom: 5px;
    }
    .lang {
        color: rgba(255, 255, 255, 0.5);
        margin-left: 20px;
    }
    /* Ikon elforgatása, amikor a menü nyitva van */
    .sort-by-btn.active .sort-by-icon {
        transform: rotate(180deg);
    }
    /* Legördülő menü megjelenítése */
    .sort-by-btn:hover .dropdown-menu2,
    .sort-by-btn:focus .dropdown-menu2 {
        display: block;
    }

/* COMP-0 <<@------------------------ Navbar Components ------------------------@>>*/
    .desktop-nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        height: 71px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        transition: background-color 0.3s;
        background-color: transparent; 
    }
    .nav-scrolled {
        background-color: var(--bg-nav) !important;
        border-bottom: 2px solid rgba(61, 61, 61, 0.6);
    }
    .left-side {
        display: flex;
        align-items: center;
    }
    /* logo */
    .logo-container {
        height: var(--area-standard);
        margin-left: var(--c-s-m-n);
        display: inline-flex;
        align-items: center;
    }
    .logo-img {
        width: var(--area-standard);
        height: var(--area-standard);
    }
    .logo-txt {
        color: var(--color-white);
        text-align: left;
        font-weight: normal;
        font-family: var(--press-start-2p);
        font-size: var(--press-start-2p-mid-size);
    }
    /* quick buttons */
    .quick-btn-container {
        margin-left: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        height: 46px;
        width: 250px;
    }
    .quick-btn {
        color: var(--color-white);
        margin: 0 15px 0 0;
        font-weight: 500;
        font-family: var(--inter);
        font-size: var(--inter-bs-size);
    }
    .quick-btn:hover {
        color: rgba(255, 255, 255, 0.8);
    }
    /* search bar */
    .search-container {
        width: 600px;
        flex-shrink: 1;
        background-color: rgba(22, 22, 22, 0.2);
        display: inline-flex;
        align-items: center;
        height: 46px;
        border-radius: 16px;
        margin-left: auto;
        margin-right: auto;
        transition: background-color 0.3s;
    }
    .desktop-nav.nav-scrolled .search-container {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .search-container button {
        height: 24px;
        width: 24px;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 8px;
        background-color: transparent;
    }
    .search-form {
        width: 100%;
        display: inline-flex;
        align-items: center;
        font-family: var(--inter);
        font-size: var(--inter-bs-size);
    }
    .search-icon {
        margin-left: 10px;
        margin-right: 10px;
        height: 20px;
        width: 20px;
    }
    .s-input {
        color: rgba(255, 255, 255, 0.7);
        width: 100%;
        height: 20px;
        border: none;    
        font-family: var(--inter);
        font-size: var(--inter-tiny-size);
        background-color: transparent;
    }
    .s-input::placeholder {
        color: rgba(255, 255, 255, 0.7);
        font-family: var(--inter);
        font-size: var(--inter-tiny-size);
    }
    .s-input:focus {
        outline: none;
    }
    /* Account */
    .account-container {
        margin-left: auto;
        margin-right: var(--c-s-m-n);
        display: flex;
        align-items: center;
        height: 46px;
    }
    .wallet-container {
        display: inline-flex;
        margin-right: 15px;
    }
    .connect-wallet {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px 0 0 16px;
        border-right: 2px solid rgba(42, 42, 42, 0.3);
        background-color: rgba(100, 100, 100, 0.4);
    }
    .connect-wallet:hover {
        background-color: rgba(120, 120, 120, 0.4);
    }
    .connect-text {
        margin: 0 20px;
        color: var(--color-white);
        text-align: left;
        font-weight: 700;
        font-family: var(--inter);
        font-size: var(--inter-bs-size);
    }
    /* cart c */
    .cart-container {
        display: flex;
        height: 46px;
        width: 46px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 0;
        background-color: rgba(100, 100, 100, 0.4);
    }
    .cart-icon {
        height: 24px;
        width: 24px;
    }
    .cart-container:hover {
        background-color: rgba(120, 120, 120, 0.4);
    }
    .profile-container {
        display: flex;
        height: 46px;
        width: 46px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0 16px 16px 0;
        background-color: rgba(100, 100, 100, 0.4);
    }
    .profile-container:hover {
        background-color: rgba(120, 120, 120, 0.4);
    }
    .profile-icon {
        height: 35px;
        width: 35px;
    }
    /* switch */

    .switch {
        position: relative;
        display: inline-block;
        width: 45px;
        height: 25px;
        margin-left: auto;
        margin-right: 10px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider-switch {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider-switch:before {
        position: absolute;
        content: "";
        height: 21px; /* Adjusted height to fit within the new switch height */
        width: 21px;  /* Adjusted width to fit within the new switch width */
        left: 2px;    /* Adjusted left position */
        bottom: 2px;  /* Adjusted bottom position */
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider-switch {
        background-color: #2196F3;
    }

    input:focus + .slider-switch {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider-switch:before {
        -webkit-transform: translateX(20px); /* Adjusted translate distance */
        -ms-transform: translateX(20px);     /* Adjusted translate distance */
        transform: translateX(20px);         /* Adjusted translate distance */
    }

    /* Rounded sliders */
    .slider-switch.round {
        border-radius: 25px; /* Adjusted border radius */
    }

    .slider-switch.round:before {
        border-radius: 50%;
    }


    /* Dropdown menü stílusok */
    .profile-container {
        position: relative;
        display: flex;
    }

    .dropdown-menu {
        display: none;
        width: 250px;
        position: absolute;
        top: 30px;
        right: 0;
        background-color: transparent;
        border-radius: 8px;
        padding-top: 20px;
        z-index: 1;
    }
    .dd-container {
        width: 100%;
        background-color: rgb(51, 51, 51);
        border-radius: 16px;
    }

    .dropdown-menu ul {
        list-style-type: none;
        padding: 0;
    }

    .dropdown-menu ul li {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hr {
        width: 100%;
        height: 2px;
        margin: 10px 0;
        background-color: #1616165e;
    }
    .dd-container li button {
        color: var(--color-white);
        height: 50px;
        width: calc(100% - 10px);
        display: flex;
        align-items: center;
        margin: 0 5px;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 18px;
        font-family: var(--hind-vadodara);
        background-color: transparent;
    }
    .dd-container li button:hover {
        background-color: #56555586;
    }
    .dd-container li button img {
        margin: 0 10px;
    }
    .dd-container ul:first-child li:first-child button {
        margin-top: 5px;
    }
    .dd-container ul:last-child li:last-child button {
        margin-bottom: 5px;
    }
    .lang {
        color: rgba(255, 255, 255, 0.5);
        margin-left: 20px;
    }
    /* quick dropdown */
    .quick-dropdown {
        display: none;
        position: absolute;
        top: 40px; /* Adjust based on your button height */
        left: 0;
        background-color: rgb(51, 51, 51);
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .quick-dropdown ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .quick-dropdown ul li {
        padding: 8px 12px;
    }

    .quick-dropdown ul li a {
        color: var(--color-white);
        text-decoration: none;
        font-family: var(--inter);
        font-size: var(--inter-bs-size);
    }

    .quick-dropdown ul li:hover {
        background-color: rgba(120, 120, 120, 0.4);
    }

    .quick-btn-wrapper:hover .quick-dropdown {
        display: block;
    }

    .quick-btn-wrapper {
        position: relative;
    }


    /* <<@---------- Nav Bar | Tablet ----------@>> */
    .tablet-nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        height: 71px;
        display: none;
        align-items: center;
        width: 100%;
        transition: background-color 0.3s;
        background-color: transparent; 
    }
    .search-btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        height: 46px;
        width: 46px;
        margin-right: 10px;
    }
    .search-btn-container:hover {
        background-color: var(--color-light-white);
    }
    .search-btn {
        height: 34px;
        width: 34px;
    }
    .wallet-container2 {
        margin-right: 10px !important;
    }
    /* <<@---------- Nav Bar | Phone ----------@>> */
    .phone-nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        height: 71px;
        display: none;
        align-items: center;
        width: 100%;
        transition: background-color 0.3s;
        background-color: transparent; 
    }
    .logo-img2 {
        width: 46px;
        height: 46px;
    }
    .logo-txt2 {
        color: var(--color-white);
        text-align: left;
        font-weight: normal;
        font-family: var(--press-start-2p);
        font-size: var(--press-start-2p-small-size);
    }
    .connect-wallet2 {
        display: inline-flex;
        margin-right: 10px;
        height: 36px;
        width: fit-content;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: var(--color-brown);
    }
    .search-btn-container2 {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        height: 36px;
        width: 36px;
        margin-right: 10px;
    }
    .search-btn-container2:hover {
        background-color: var(--color-light-white);
    }
    .connect-text2 {
        margin: 13px 25px;
        color: var(--color-white);
        text-align: left;
        font-weight: normal;
        font-family: var(--press-start-2p);
        font-size: 12px;
    }
    .menu-container {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        height: 36px;
        width: 36px;
    }
    .menu-container:hover {
        background-color: var(--color-light-white);
    }
    /* tablet */
    @media only screen and (max-width: 1400px) {
        .search-container {
            margin-right: 15px;
        }
    }
    @media only screen and (min-width: 786px) and (max-width: 1025px) {
        :root {
            --c-standard-width: calc(100% - 20px) !important;
            --c-standard-margin: 12px 10px 0 10px !important;
            --c-s-m-n: 10px !important;
        }
        .desktop-nav {
            display: none;
        }
        .tablet-nav {
            display: flex;
        }
    }
    /* phone */
    @media only screen and (max-width: 785px) {
        :root {
            --c-standard-width: calc(100% - 20px) !important;
            --c-standard-margin: 12px 10px 0 10px !important;
            --c-s-m-n: 10px !important;
        }
        .desktop-nav {
            display: none;
        }
        .phone-nav {
            display: flex;
        }
        /* slider */
        .slider-navigation {
            display: flex;
        }
        .slider-status {
            display: none;
        }
        .slider-actions {
            display: none;
        }
    }

/* COMP-1 <<@------------------------ Cart Component ------------------------@>>*/
    .cart {
        position: absolute;
        z-index: 20;
        display: none;
        top: 15px;
        right: 15px;
        height: calc(100vh - 15px);
        width: 400px;
        border-radius: 16px 16px 0 0;
        background-color: rgba(22, 22, 22, 1);
    }
    .cart-header {
        height: 100px;
        display: flex;
        justify-content: center;
    }
    .cart-header-txt {
        color: var(--color-white);
        margin-top: 15px;
        font-weight: bold;
        font-size: 32px;
        font-family: var(--inter);
    }
    .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .close-btn:hover {
        background-color: rgba(217, 217, 217, 0.1);
    }
        /* cart body */
    .cart-body {
        border-top: 2px solid rgba(255, 255, 255, 0.13);
        border-bottom: 2px solid rgba(255, 255, 255, 0.13);
    }
    .cart-body-header {
        height: 44px;
        display: flex;
        align-items: center;
    }
    .cart-body-items {
        color: var(--color-white);
        margin-left: 15px;
        font-weight: bold;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .clear-all {
        color: var(--color-white);
        margin-left: auto;
        margin-right: 15px;
        font-weight: bold;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
        /* cart item container */
    /* .cart-item-container {

    } */
    .cart-item {
        height: 75px;
        margin: 0 15px 8px 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .cart-item-img {
        height: 67px;
        width: 67px;
        margin-left: 4px;
        margin-right: 4px;
        border-radius: 16px;
    }
    .cart-item-txt-container {
        height: calc(100% - 8px);
        display: flex;
        flex-direction: column;
    }
    .cart-iah {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    .cart-item-header-txt {
        color: var(--color-white);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .cart-item-badge {
        height: 20px;
        width: 20px;
    }
    .cart-item-description {
        color: rgba(217, 217, 217, 1);
        font-weight: normal;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .cart-item-price {
        color: var(--color-white);
        height: 100%;
        width: fit-content;
        margin-left: auto;
        border: 0;
        font-weight: bold;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .cart-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cart-footer-txt-container {
        height: 50px;
        width: calc(100% - 30px);
        margin: 0 15px;
        display: flex;
        align-items: center;
    }
    .total-price {
        color: var(--color-white);
        margin-right: auto;
        font-weight: bold;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .total-price-num {
        color: var(--color-white);
        font-weight: bold;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .check-out-btn {
        color: black;
        height: 60px;
        width: calc(100% - 30px);
        border-radius: 16px;
        border: 0;
        font-weight: bold;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
        background-color: var(--color-white);
    }

/* COMP-2 <<@------------------------ Mainpage Slider Component ------------------------@>>*/
    .slider-wrapper {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 445px;
        border-radius: 16px;
    }
    .slider-navigation {
        height: 100%;
        width: var(--c-standard-width);
        margin: var(--c-standard-margin);
        position: absolute;
        top: 0;
        z-index: 1;
        display: grid;
        grid-template-columns: 2fr  1fr; 
    }
    .slider-control {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 2;
        top: calc(50% - 100px);
        height: 200px;
        width: 40px;
        cursor: pointer;
        border: 0;
        border-radius: 8px;
        background-color: rgba(217, 217, 217, 0.05);
        opacity: 0;
        transition: opacity 0.5s, background-color 0.6s;
    }
    .slider-control:hover {
        background-color: rgba(217, 217, 217, 0.1);
    }
    .left {
        left: 19px;
    }
    .right {
        right: 19px;
    }
    .slider-wrapper:hover .slider-control {
        opacity: 1;
    }
    .slider {
        border-radius: 16px;
        height: 100%;
        width: var(--c-standard-width);
        margin: var(--c-standard-margin);
        z-index: -1;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
        scrollbar-width: none; /* Hide scrollbar Firefox */
        flex-wrap: nowrap;
    }
    .slide-img {
        flex: 0 0 100%;
        width: 100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
        /* slider profile */
    .slider-profile-container {
        align-self: flex-end;
        margin: 22px 22px;
        display: inline-flex;
        gap: 9px;
    }
    .slider-profile-img {
        border-radius: 16px;
        height: 64px;
        width: 64px;
    }
    .slider-profile-txt-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .slider-profile-name-container {
        display: inline-flex;
    }
    .slider-profile-title {
        color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: var(--color-black-02);
        height: 22px;
    }
    .slider-pfp-title-text {
        color: var(--color-white);
        margin: 0 8px;
        font-size: 13px;
        font-family: var(--inter);
    }
    .slider-profile-badge {
        margin-left: 3px;
        height: 20px;
        width: 20px;
    }
    .slider-product-name-container {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        height: 36px;
        background-color: var(--color-black-02);
    }
    .slider-product-text {
        color: var(--color-white);
        margin: 0 38px;
        font-size: 13px;
        font-weight: var(--inter-font-weight-semi-bold);
        font-family: var(--inter);
    }
        /* slider actions */
    .slider-actions{
        display: inline-flex;
        align-items: flex-end;
        justify-self: flex-end;
        margin-bottom: 22px;
        margin-right: 22px;
        gap: 11px;
    }
    .slider-action-view {
        height: 45px;
        width: 130px;
        cursor: pointer;
        border-width: 0px;
        border-radius: 16px;
        background-color: black;
        color: var(--color-white);
        font-family: var(--inter);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .slider-action-view:hover, .slider-action-information:hover{
        background-color: var(--color-black-04);
    }
    .slider-action-information{
        height: 45px;
        width: 45px;
        border-radius: 16px;
        background-color: black;
        color: var(--color-white);
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-width: 0px;
    }
    .info-icon{
        width: 24px;
        height: 24px;
    }
    /* Slider tablet */
    .slider-snap-box {
        display: none;
    }

    /* slider background effect */
    .slider-background-effect {
        z-index: 0;
        position: absolute;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        filter: blur(90px) brightness(120%);
        top: 0;
        left: 0;
        width: 100%;
        height: 612px;
    }
    /* slider only */
    @media only screen and (max-width: 875px) {
        .slider-wrapper {
            display: none;
        }
        .slider-snap-box {
            display: flex;
            margin-left: 0;
            width: 100%;
        }
        .slider-navigation {
            grid-template-columns: 2fr 1fr;
        }
        .ss-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-radius: 16px;
            max-height: 450px;
            max-width: 850px;
            min-width: 84vw;
            min-height: 340px;
            scroll-snap-align: center;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .ss-first {
            margin-left: 10px;
        }
        .ss-last {
            margin-right: 10px;
        }
        .slider-profile-container {
            margin: 10px;
        }
        .slider-snap-items {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-padding-right: 10px;
            -ms-overflow-style: none; /* IE és Edge */
            scrollbar-width: none;
        }
        .slider-snap-items::-webkit-scrollbar {
            display: none;
        }
    }
    /* slider profile for phone */
    @media only screen and (max-width: 575px) {
        .slider-profile-container {
            margin: 10px;
        }
        .slider-profile-img {
            border-radius: 8px;
            height: 32px;
            width: 32px;
        }
        .slider-profile-title {
            height: 11px;
        }
        .slider-pfp-title-text {
            margin: 0 4px;
            font-size: 8px;
        }
        .slider-profile-badge {
            margin-left: 3px;
            height: 10px;
            width: 10px;
        }
        .slider-product-name-container {
            border-radius: 8px;
            height: 16px;
        }
        .slider-product-text {
            margin: 0 9px;
            font-size: 8px;
        }
    /* quick search */
        .quick-search {
            display: none;
        }
        .quick-search-snap-box {
            display: flex;
            margin-left: 10px;
            width: 100%;
            gap: 10px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-padding-right: 10px;
            -ms-overflow-style: none; /* IE és Edge */
            scrollbar-width: none;
        }
        .quick-s-btn-txt {
            white-space: nowrap;
        }
        .quick-s-btn-last {
            margin-right: 20px;
        }
    }

/* COMP-3 <<@------------------------ Quick Search Component ------------------------@>>*/
    .quick-search {
        z-index: 2;
        position: relative;
        height: 45px;
        width: var(--c-standard-width);
        margin: 5px var(--c-s-m-n) 10px var(--c-s-m-n);
        display: flex;
        width: var(--c-standard-width);
        align-items: center;
        gap: 4px;
    }
    .quick-s-btn {
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        gap: 2px;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .quick-s-btn:hover {
        background-color: rgba(217, 217, 217, 0.1);
    }
    .quick-s-btn-color {
        height: 15px;
        width: 15px;
        border-radius: 16px;
        margin-left: 8px;
    }
    .quick-s-btn-txt {
        margin-right: 8px;
        font-weight: 500;
        font-family: var(--inter);
        font-size: var(--inter-bs-size);
        color: var(--color-white);
    }
    /* tablet / phone optimalisation */
    .quick-search-snap-box {
        z-index: 2;
        position: relative;
        height: 36px;
        width: var(--c-standard-width);
        margin: 12px var(--c-s-m-n) 31px var(--c-s-m-n);
        display: none;
        align-items: center;
        gap: 4px;
    }

/* COMP-4 <<@------------------------ For You Component ------------------------@>>*/
    .for-you {
        display: block;
        position: relative;
        z-index: 2;
        margin-top: 20px;
    }
    .for-you-item-container {
        gap: 1%;
        height: 300px;
        width: var(--c-standard-width);
        margin: var(--c-standard-margin);
        display: inline-flex;
    }
    .for-you-left, .for-you-right {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 3;
        top: calc(50% - 100px);
        height: 200px;
        width: 40px;
        cursor: pointer;
        border: 0;
        border-radius: 8px;
        background-color: rgba(167, 167, 167, 0.2);
        opacity: 0;
        transition: opacity 0.5s, background-color 0.6s;
    }
    .for-you:hover .for-you-left, .for-you:hover .for-you-right {
        opacity: 1;
    }
    .for-you-left:hover, .for-you-right:hover {
        background-color: rgba(217, 217, 217, 0.4);
    }
    .for-you-left {
        left: 19px;
    }
    .for-you-right {
        right: 19px;
    }
    .for-you-items {
        width: 100%;
        justify-content: space-around;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        /* scroll-snap-type: x mandatory; */
        /* scroll-padding-right: 10px; */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* home item */
    /* the image of the item and the logo */
    .mp-home-item {
        height: 300px;
        width: 255px;
        min-width: 225px;
        flex-shrink: 0;
        display: block;
        border-radius: 16px;
        background-color: rgba(32, 33, 34, 1);
    }
    .mp-home-item-img {
        height: 200px;
        width: 100%;
        display: flex;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 16px 16px 0 0;
    }
    .mp-home-item-pfp-logo {
        height: 25px;
        width: 25px;
        position: relative;
        top: 3px;
        left: 3px;
        border-radius: 100%;
    }
        /* home item details */
    .mp-home-item-product {
        height: 20px;
        margin: 0 0 0 3px;
        display: inline-flex;
        align-items: center;
    }
    .mp-home-item-product-name {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .mp-home-item-poduct-badge {
        margin-left: 3px;
        align-self:safe;
        height: 12px;
        width: 12px;
    }
    .mp-home-item-detail-container {
        height: 80px;
        display: grid;
        margin-left: 3px;
        grid-template: repeat(4, 20px) / repeat(2, 1fr); /* row / col */
        border-radius: 0 0 16px 16px;
    }
    .mp-home-item-txt {
        font-weight: normal;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .mp-home-item-txt-header {
        color: var(--color-light-gray);
    }
    .mp-home-item-txt-value {
        color: var(--color-white);
    }
    .mp-home-item-star-container {
        display: inline-flex;
    }
    .mp-home-item-star {
        height: 12px;
        width: 12px;
    }

/* COMP-5 <<@------------------------ Footer ------------------------@>>*/
    footer {
        height: 300px;
        margin-top: 80px;
        display: grid;
        grid-template-rows: 1fr 85px;
        background-color: rgb(29, 29, 29);
    }
        /* info */
    .footer-info-container {
        height: 100%;
        width: var(--footer-standard-width);
        margin: 0 336px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .about-us {
        height: fit-content;
        display: inline-flex;
        align-items: center;
    }
    .footer-logo {
        height: 32px;
        width: 32px;
    }
    .footer-header-txt {
        color: var(--color-white);
        font-size: var(--press-start-2p-mid-size);
        font-family: var(--press-start-2p);
    }
    .more {
        color: var(--color-light-gray-03);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        display: grid;
        grid: repeat(4, 1fr) / repeat(3, 1fr);
    }
    .footer-h-txt {
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--color-white);
    }
        /* contacts */
    .contacts-container {
        height: 100%;
        width: var(--footer-standard-width);
        margin: 0 336px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #374151;
    }
    .copyright-txt {
        color: var(--color-white);
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-right: auto;
    }
    .contact-btns {
        display: flex;
        gap: 20px;
    }

/* COMP-6 <<@------------------------ Set-bar Components (profile) ------------------------@>>*/
    /* Set bar */
    .set-bar {
        height: 55px;
        width: calc(100% - 76px);
        margin: 0 38px;
        display: flex;
        align-items: center;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    .filter-btn {
        height: 45px;
        width: 45px;
        margin-right: 5px;
        display: flex;
        cursor: pointer;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .filter-icon {
        height: 24px;
        width: 24px;
    }
    .results {
        height: 45px;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .results-txt {
        color: var(--color-white);
        margin: 10px;
        white-space: nowrap;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .bar-search {
        height: 45px;
        width: 100%;
        margin: 0 5px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        border: 2px solid rgba(217, 217, 217, 0.1);
        background-color: transparent;
    }
    .bar-search:hover {
        border: 2px solid rgba(217, 217, 217, 0.2);
    }
    .bar-input {
        color: var(--color-white);
        width: 100%;
        border: 0;
        background-color: transparent;
    }
    .bar-input:focus {
        outline: none;
    }
    .gird-selector {
        display: flex;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .grid-btn {
        height: 50px;
        width: 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .grid-btn:focus {
        background-color: rgba(217, 217, 217, 0.1);
    }

    #status {
        flex-shrink: 0;
        width: 160px !important;
    }
    #orderby {
        flex-shrink: 0;
    }
    #price-selector {
        height: 45px !important;
        width: 100% !important;
        margin-bottom: 5px;
        border: 0 !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    #price-selector-dd2 {
        top: 34px !important;
    }

/* COMP-7 <<@------------------------ Filters Container (Shop) ------------------------@>>*/
    .filters-container {
        height: fit-content;
        width: 288px;
        display: none;
        margin-right: 15px;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
    }
    .filter-content {
        height: 100%;
        width: calc(100% - 10px);
        margin: 0 5px;
        display: flex;
        flex-direction: column;
    }
    .filters-h2 {
        color: var(--color-white);
        align-self: flex-start !important;
        font-weight: bold;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .filters-h3 {
        color: var(--color-white);
        margin: 0 auto;
        font-weight: bold;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .price-container {
        display: block;
    }
    .set-currency-btn {
        height: 45px;
        width: 100%;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 1);
    }
    .set-currency-txt {
        margin-left: 10px;
        font-weight: bold;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .price-range-container {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }
    .min-price {
        height: 45px;
        width: 90px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1);
    }
    .max-price {
        height: 45px;
        width: 90px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    .min-price, .max-price {
        color: var(--color-white);
        text-align: center;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .min-price:focus, .max-price:focus {
        outline: none;
    }
    .min-price::-webkit-outer-spin-button,
    .min-price::-webkit-inner-spin-button,
    .max-price::-webkit-outer-spin-button,
    .max-price::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .apply-btn {
        color: white;
        height: 45px;
        width: 100%;
        border: 0;
        cursor: pointer;
        border-radius: 16px;
        font-weight: bold;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
        background-color: rgba(0, 117, 255, 1);
    }
    .apply-btn:hover {
        background-color: rgb(35, 138, 255);
    }
    /* color container */
    .color-container {
        width: 100%;
        display: flex;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .color-content {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 5px;
        gap: 2px;
        flex-wrap: wrap;
    }
    .color {
        height: 22px;
        width: 22px;
        display: flex;
        flex-shrink: 0;
        cursor: pointer;
        border: 0;
        border-radius: 8px;
    }
    .c1 {
        background-color: rgba(0, 0, 0, 1);
    }
    .c2 {
        background-color: rgba(165, 42, 42, 1);
    }
    .c3 {
        background-color: rgba(128, 128, 128, 1);
    }
    .c4 {
        background-color: rgba(255, 255, 255, 1);
    }
    .c5 {
        background-color: rgba(255, 0, 0, 1);
    }
    .c6 {
        background-color: rgba(255, 192, 203, 1);
    }
    .c7 {
        background-color: rgba(0, 128, 0, 1);
    }
    .c8 {
        background-color: rgba(0, 0, 255, 1);
    }
    .c9 {
        background-color: rgba(0, 255, 255, 1);
    }
    .c10 {
        background-color: rgba(255, 165, 0, 1);
    }
    .c11 {
        background-color: rgba(255, 255, 0, 1);
    }
    .c12 {
        background-color: rgba(128, 0, 128, 1);
    }

/* COMP-8 <<@------------------------ Tag Components ------------------------@>>*/
    .tag-container {
        height: 36px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .tag {
        height: 25px;
        display: flex;
        align-items: center;
        margin-left: 5px;
        border: 0;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    .tag-txt {
        color: var(--color-white);
    }
    .tag-icon {
        height: 13px;
        width: 13px;
        cursor: pointer;
    }

/* COMP-9 <<@------------------------ Shop-normal-item-grid Components ------------------------@>>*/
    .items-grid-normal {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
        grid-gap: 15px;
        margin-top: 20px;
    }
    /* home item */
    .home-item {
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        border-radius: 16px;
        background-color: rgba(32, 33, 34, 1);
    }
    .home-item-img {
        height: 200px;
        width: 100%;
        display: flex;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 16px 16px 0 0;
    }
    .home-item-pfp-logo {
        height: 25px;
        width: 25px;
        position: relative;
        top: 3px;
        left: 3px;
        border-radius: 100%;
    }
        /* home item details */
    .home-item-product {
        height: 20px;
        margin: 0 0 0 3px;
        display: inline-flex;
        align-items: center;
    }
    .home-item-product-name {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .home-item-poduct-badge {
        margin-left: 3px;
        align-self:safe;
        height: 12px;
        width: 12px;
    }
    .home-item-detail-container {
        height: 80px;
        display: grid;
        margin-left: 3px;
        grid-template: repeat(4, 20px) / repeat(2, 1fr); /* row / col */
        border-radius: 0 0 16px 16px;
    }
    .home-item-txt {
        font-weight: normal;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .home-item-txt-header {
        color: var(--color-light-gray);
    }
    .home-item-txt-value {
        color: var(--color-white);
    }
    .home-item-star-container {
        display: inline-flex;
    }
    .home-item-star {
        height: 12px;
        width: 12px;
    }

/* COMP-10 <<@------------------------ Shop-line-item-grid Components ------------------------@>>*/
    /* items grid normal off */
    .items-grid-line {
        width: 100%;
        margin: 0;
        display: grid;
        margin-top: 20px;
        grid-gap: 10px;
    }
    /* stats-item-grid-line */

    .stats-items-grid-line {
        width: calc(100% - 76);
        margin: 0 38px;
        display: grid;
        margin-top: 20px;
        grid-gap: 10px;
    }

    /* line item */
    .watcher-table {
        width: 100%;
        grid-column: 1 / 4;
        border-collapse: collapse;
    }
    .watcher-table th {
        color: var(--color-white);
        height: 50px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: rgba(255, 255, 255, 0.05);
    }
    .watcher-table td {
        color: var(--color-white);
        height: 50px;
        text-align: center;
        padding: 10px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Elválasztó vonal minden sor alatt */
    }
    .product-preview {
        height: 40px;
        width: 40px;
        margin: auto;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .more-detail2 {
        position: relative;
        height: 40px;
        width: 40px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .more-detail2 img {
        height: 14px;
        width: 14px;
    }

/* COMP-11 <<@------------------------ Shop-img-item-grid Components ------------------------@>>*/
    .items-grid-img {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
        grid-gap: 15px;
        margin-top: 20px;
    }
    .img-item {
        height: 249px;
        width: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        flex-shrink: 1;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 16px;
    }

    .items-grid-line, .items-grid-img {
        display: none; /* Kezdetben minden grid el van rejtve */
    }

/* COMP-12 <<@------------------------ Connected-app Components ------------------------@>>*/
    .connected-app {
        height: 160px;
        width: 603px;
        margin-bottom: 25px;
        border-radius: 16px;
        background-color: rgba(84, 72, 72, 0.3);
    }
    .app-header {
        height: 75px;
        width: 603px;
        display: flex;
        align-items: center;
        border-radius: 16px 16px 0 0;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.32);
    }
    .connected-app-names {
        display: flex;
        flex-direction: column;
        margin-right: auto;
    }
    .app-icon2 {
        height: 50px;
        width: 50px;
        margin-left: 20px;
        margin-right: 7px;
    }
    .connected-name {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .app-name {
        color: #777777;
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }
    .delete {
        height: 45px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-right: 20px;
        border-radius: 16px;
    }
    .delete:hover {
        background-color: rgba(255, 0, 0, 0.2);
    }
    .app-settings {
        display: flex;
        height: 85px;
        align-items: center;
        border-radius: 0 0 16px 16px;
        background-color: #777a7e3d;
    }
    .app-settings-txt {
        color: var(--color-white);
        margin-left: 20px;
        font-weight: 500;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
/* COMP-13 <<@------------------------ Create Collection Components ------------------------@>>*/

    .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .close-btn:hover {
        background-color: rgba(217, 217, 217, 0.1);
    }
    .create-item-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;
        display: flex;
        justify-content: center; /* Középre igazításhoz */
        align-items: center; /* Függőleges középre igazításhoz */
        background-color: rgba(165, 165, 165, 0.2);
    }
    .create-item-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit; /* Örökli a szülő háttér színét */
        backdrop-filter: blur(10px); /* Az elmosás mértéke */
        z-index: -1; /* Háttérbe helyezi a blur elemet */
    }
    .create-item {
        height: 521px;
        width: 557px;
        border-radius: 16px;
        background-color: rgba(22, 22, 22, 1);
    }
    .create-item-body {
        height: calc(100% - 16px);
        display: flex;
        flex-direction: column;
        width: 477px;
        margin: 16px 40px;
    }
    .create-item-body-header {
        display: flex;
        margin-bottom: 16px;
    }
    #close-creating-item {
        position: static;
        margin-left: auto;
        cursor: pointer;
    }
    .create-item-body input {
        color: var(--color-white);
        width: 100%;
        margin: 0 5px;
        border: 0;
        background-color: transparent;
    }
    .create-item-body input:focus {
        outline: none;
    }
    .create-item-body textarea {
        color: var(--color-white);
        height: 150px;
        width: calc(100% - 10px);
        resize: none;
        margin: 5px;
        border: 0;
        background-color: transparent;
    }
    .create-item-body textarea:focus {
        outline: none;
    }
    .create-item-body h1 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--poppins-bs-size);
        font-family: var(--poppins);
    }
    .set-name {
        height: 50px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .details {
        height: 150px;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .create-item-body-footer {
        margin-top: auto;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
    }
    .create-item-body-footer img {
        height: 14px;
        width: 14px;
    }
    .create-item-body-footer p {
        color: var(--color-white);
        margin-left: 4px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .create-item-body-footer button {
        color: var(--color-white);
        height: 32px;
        width: 72px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .create-item-body-footer button span {
        margin: 5px 20px;
    }
    .create-item-cancel-btn {
        margin-left: auto;
        margin-right: 16px;
        border: 1px solid var(--color-white) !important;
        background-color: transparent;
    }
    .create-item-next-btn {
        background-color: rgba(31, 70, 144, 1);
    }
    /* upload container */
    .upload-container2 {
        height: 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        gap: 10px;
    }
    .upload-txt {
        color: rgba(217, 217, 217, 0.4);
        font-size: 12px;
        font-family: var(--inter);
    }
    .pfp-upload {
        height: 100px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 16px;
        border: 2px dashed rgb(47, 47, 47);
    }
    .banner-upload {
        height: 100px;
        width: calc(100% - 110px);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 16px;
        border: 2px dashed rgb(47, 47, 47);
    }
    .pfp-upload img, .banner-upload img {
        flex-shrink: 1;
        height: 80px;
    }
    .uploaded-image-container {
        height: 73px;
        width: 100%;
        border: 2px solid rgb(47, 47, 47);
        border-radius: 16px;
    }
    .upload-header {
        margin-top: 12px;
        margin-left: 12px;
        display: flex;
    }
    .icon-img {
        height: 36px;
        width: 36px;
        border-radius: 8px;
    }
    .upload-description {
        display: flex;
        width: 100%;
    }
    .upload-description img {
        height: 20px;
        width: 20px;
        margin-right: 12px;
        margin-left: auto;
    }
    /* add products */
    .product-search {
        height: 50px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .product-search img {
        margin-left: 5px;
    }
    .p-item-container {
        display: flex;
        overflow-y: auto;
        overflow-x: hidden;
        flex-direction: column;
        height: 300px;
    }
    .p-item {
        display: flex;
        width: 100%;
    }
    .p-icon {
        height: 50px;
        width: 50px;
        border-radius: 16px;
    }
    .p-content {
        display: flex;
        width: 100%;
        align-items: center;
    }
    .p-txt {
        display: flex;
    }
    .p-txt p {
        color: var(--color-white);
        margin-left: 8 px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .p-content button {
        height: 50px;
        width: 50px;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 0;
        cursor: pointer;
        background-color: transparent;
    }
    .p-content button:hover {
        background-color: rgba(32, 32, 32, 1);
    }
    /* summary */
    .sum-container-imgs {
        display: flex;
        height: 100px;
        width: 100%;
        gap: 10px;
    }
    .sum-pfp {
        height: 100px;
        width: 100px;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .sum-banner {
        height: 100px;
        width: calc(100% - 110px);
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .sum-description {
        margin-top: 10px;
        height: 150px;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .sum-description p {
        color: var(--color-white);
        width: 100%;
        margin: 5px;
        border: 0;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .sum-stats {
        margin-top: 15px;
        display: flex;
        gap: 20px;
    }
    .sum-item {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .sum-item h1 {
        color: var(--color-white);
        margin: 0;
        font-weight: 500;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .sum-item p {
        color: rgba(217, 217, 217, 0.4);
        margin: 0;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }

/* COMP-14 <<@------------------------ Create Item Components ------------------------@>>*/

    .close-btn:hover {
        background-color: rgba(217, 217, 217, 0.1);
    }
    .create-item-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;
        display: flex;
        justify-content: center; /* Középre igazításhoz */
        align-items: center; /* Függőleges középre igazításhoz */
        background-color: rgba(165, 165, 165, 0.2);
    }
    .create-item-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit; /* Örökli a szülő háttér színét */
        backdrop-filter: blur(10px); /* Az elmosás mértéke */
        z-index: -1; /* Háttérbe helyezi a blur elemet */
    }
    .create-item-body input {
        color: var(--color-white);
        width: 100%;
        margin: 0 5px;
        border: 0;
        background-color: transparent;
    }
    .create-item-body input:focus {
        outline: none;
    }
    .create-item-body textarea {
        color: var(--color-white);
        height: 150px;
        width: calc(100% - 10px);
        resize: none;
        margin: 5px;
        border: 0;
        background-color: transparent;
    }
    .create-item-body textarea:focus {
        outline: none;
    }
    .create-item-body h1 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--poppins-bs-size);
        font-family: var(--poppins);
    }
    .set-name {
        height: 50px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .details {
        height: 150px;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .tag-container {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .tag {
        height: 25px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    .tag-txt {
        color: var(--color-white);
    }
    .tag-icon {
        height: 13px;
        width: 13px;
    }
    .create-item-body-footer {
        margin-top: auto;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
    }
    .create-item-body-footer img {
        height: 14px;
        width: 14px;
    }
    .create-item-body-footer p {
        color: var(--color-white);
        margin-left: 4px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .create-item-body-footer button {
        color: var(--color-white);
        height: 32px;
        width: 72px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .create-item-body-footer button span {
        margin: 5px 20px;
    }
    .create-item-cancel-btn {
        margin-left: auto;
        margin-right: 16px;
        border: 1px solid var(--color-white) !important;
        background-color: transparent;
    }
    .create-item-next-btn {
        background-color: rgba(31, 70, 144, 1);
    }
    /* text-editor */
    .text-editor {
        height: 35px;
        width: 360px;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .text-editor button {
        cursor: pointer;
        border: 0;
        background-color: transparent;
    }
    /* description */
    .description {
        height: 300px;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    /* cic color-container */
    .cic-prop-txt {
        color: rgba(217, 217, 217, 0.4);
        font-size: 12px;
        font-family: var(--inter);
    }
    .cic-color-container {
        height: 28px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .event-container {
        height: 318px;
        display: flex;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .event-adder {
        height: fit-content;
        margin-top: 15px;
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .add-event {
        height: 45px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.06);
    }
    .add-event:hover {
        background-color: rgba(217, 217, 217, 0.09);
    }
    #when, #then {
        height: 45px !important;
        width: 150px !important;
    }
    .event-txt-container {
        display: flex;
        align-items: center;
    }
    .event-txt {
        color: var(--color-white);
        padding: 0;
        margin: 0 6px;
        font-weight: bold;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    /* price */
    .cic-price-container {
        height: 50px;
        width: 200px;
        display: flex;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .cic-price-container input {
        color: var(--color-white);
        width: 100%;
        margin: 0 5px;
        border: 0;
        background-color: transparent;
    }
    .cic-price-container input[type="number"]::-webkit-outer-spin-button,
    .cic-price-container input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .chain-container {
        height: fit-content;
        width: 100%;
        display: flex;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .chains {
        width: calc(100% - 10px);
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 10px;
    }
    .chain {
        cursor: pointer;
        height: 24px;
        display: flex;
        align-items: center;
        border-radius: 8px;
        background-color: rgb(54, 129, 94);
    }
    .chain img {
        height: 16px;
        width: 16px;
        margin-left: 5px;
    }
    .chain p {
        color: var(--color-white);
        margin: 0 10px;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .token-container {
        height: fit-content;
        width: 100%;
        display: flex;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .tokens {
        width: calc(100% - 10px);
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 10px;
    }
    .token {
        cursor: pointer;
        height: 24px;
        display: flex;
        align-items: center;
        border-radius: 8px;
        background-color: rgb(54, 129, 94);
    }
    .token img {
        height: 16px;
        width: 16px;
        margin-left: 5px;
    }
    .token p {
        color: var(--color-white);
        margin: 0 10px;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    /* upload container */
    .upload-container {
        height: 188px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px dashed rgb(47, 47, 47);
        margin-bottom: 10px;
        border-radius: 16px;
        cursor: pointer;
    }
    .uploaded-image-container {
        height: 73px;
        width: 100%;
        border: 2px solid rgb(47, 47, 47);
        border-radius: 16px;
    }
    .upload-header {
        margin-top: 12px;
        margin-left: 12px;
        display: flex;
    }
    .icon-img {
        height: 36px;
        width: 36px;
        border-radius: 8px;
    }
    .upload-description {
        display: flex;
        width: 100%;
    }
    .upload-description img {
        height: 20px;
        width: 20px;
        margin-right: 12px;
        margin-left: auto;
    }
    .u-text-container p {
        margin: 0 10px;
    }
    .u-header {
        color: var(--color-white);
        margin: 0 10px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .u-description {
        color: rgba(150, 157, 178, 1);
        margin: 0 10px;
        font-size: 10px;
        font-family: var(--poppins);
    }
    .status-bar-container {
        width: calc(100% - 24px); /* Full width */
        margin-top: 8px;
        margin-left: 12px;
        margin-bottom: 12px;
        background-color: var(--color-grey-light); /* Background color of the container */
        border-radius: 5px; /* Rounded corners for the container */
        overflow: hidden; /* Clip inner content to fit the container's rounded corners */
        position: relative; /* Position relative to position the status text */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
    .status-bar {
        width: 100%; /* Full width */
        background-color:#423C3C; /* Background color */
        border-radius: 5px; /* Rounded corners */
        height: 5px; /* Height of the status bar */
    }
    .status-fill {
        width: 100%; /* Change this width to reflect the actual progress */
        background-color:#2196F3; /* Fill color */
        height: 100%; /* Full height */
        border-radius: 5px 0 0 5px; /* Rounded corners on the left */
        transition: width 0.3s ease; /* Smooth transition for the width */
    }
    /* summary */
    .c-grid {
        display: grid;
        width: 100%;
        grid-template-columns: 126px 1fr;
        grid-column-gap: 10px;
    }
    .c-c1 {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }
    .c-img {
        height: 126px;
        width: 126px;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .c-c2 {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        width: 100%;
    }
    .c-price-container {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 10px;
    }
    .c-price, .c-price-chains {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .c-price-chains-al {
        margin-left: 5px;
        display: flex;
        align-items: center;
        gap: 3px;
        flex-wrap: wrap;
    }
    .c-price-chains-al img {
        height: 16px;
        width: 16px;
    }
    .c-price p {
        color: var(--color-white);
        width: 100%;
        margin: 0 5px;
        border: 0;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .descriptions {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }
    .short-description {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .short-description p, .long-description p {
        color: var(--color-white);
        width: 100%;
        margin: 5px;
        border: 0;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .long-description {
        height: 157px;
        width: 100%;
        display: flex;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .c-tag-container {
        width: 100%;
        display: flex;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1); 
    }
    .c-tokens {
        height: 66px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }

/* COMP-15 <<@------------------------ Edit Collection Components ------------------------@>>*/

    .edit-item-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;
        display: flex;
        justify-content: center; /* Középre igazításhoz */
        align-items: center; /* Függőleges középre igazításhoz */
        background-color: rgba(165, 165, 165, 0.2);
    }

    .edit-item-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit; /* Örökli a szülő háttér színét */
        backdrop-filter: blur(10px); /* Az elmosás mértéke */
        z-index: -1; /* Háttérbe helyezi a blur elemet */
    }
    .edit-item {
        position: relative;
        height: calc(100% - 110px);
        width: calc(100% - 110px);
        border-radius: 16px;
        background-color: rgba(22, 22, 22, 1);
    }
    .edit-item-grid {
        height: calc(100% - 82px);
        width: calc(100% - 80px);
        display: grid;
        margin: 32px 40px 0 40px;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
    }
    .edit-item-c1, .edit-item-c2, .edit-item-c3 {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .edit-item h1 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--poppins-bs-size);
        font-family: var(--poppins);
    }
    #close-creating-item {
        position: static;
        margin-left: auto;
        cursor: pointer;
    }
    .edit-item input {
        color: var(--color-white);
        width: 100%;
        margin: 0 5px;
        border: 0;
        background-color: transparent;
    }
    .edit-item input:focus {
        outline: none;
    }
    .edit-item textarea {
        color: var(--color-white);
        height: 150px;
        width: calc(100% - 10px);
        resize: none;
        margin: 5px;
        border: 0;
        background-color: transparent;
    }
    .edit-item textarea:focus {
        outline: none;
    }
    .set-name {
        height: 50px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .details {
        height: 150px;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .edit-item-body-footer {
        position: absolute;
        bottom: 0;
        z-index: 1;
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 0 0 16px 16px;
        background-color: rgba(22, 22, 22, 1);
    }
    .edit-item-body-footer img {
        height: 14px;
        width: 14px;
        margin-left: 40px;
    }
    .edit-item-body-footer p {
        color: var(--color-white);
        margin-left: 4px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .edit-item-body-footer button {
        color: var(--color-white);
        height: 32px;
        width: 72px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500px;
        font-size: 12px;
        font-family: var(--poppins);
    }
    .edit-item-body-footer button span {
        margin: 5px 20px;
    }
    .edit-item-cancel-btn {
        margin-left: auto;
        margin-right: 16px;
        border: 1px solid var(--color-white) !important;
        background-color: transparent;
    }
    .edit-item-next-btn {
        margin-right: 40px;
        background-color: rgba(31, 70, 144, 1);
    }
    /* upload container */
    .upload-container2 {
        height: 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        gap: 10px;
    }
    .upload-txt {
        color: rgba(217, 217, 217, 0.4);
        font-size: 12px;
        font-family: var(--inter);
    }
    .pfp-upload {
        height: 100px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 16px;
        border: 2px dashed rgb(47, 47, 47);
    }
    .banner-upload {
        height: 100px;
        width: calc(100% - 110px);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 16px;
        border: 2px dashed rgb(47, 47, 47);
    }
    .pfp-upload img, .banner-upload img {
        flex-shrink: 1;
        height: 80px;
    }
    .uploaded-image-container {
        height: 73px;
        width: 100%;
        border: 2px solid rgb(47, 47, 47);
        border-radius: 16px;
    }
    .upload-header {
        margin-top: 12px;
        margin-left: 12px;
        display: flex;
    }
    .icon-img {
        height: 36px;
        width: 36px;
        border-radius: 8px;
    }
    .upload-description {
        display: flex;
        width: 100%;
    }
    .upload-description img {
        height: 20px;
        width: 20px;
        margin-right: 12px;
        margin-left: auto;
    }
    /* product search */
    .product-search {
        height: 50px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(32, 32, 32, 1);
    }
    .product-search img {
        margin-left: 5px;
    }
    .p-item-container {
        display: flex;
        overflow-y: auto;
        overflow-x: hidden;
        flex-direction: column;
        height: 300px;
    }
    .p-item {
        display: flex;
        width: 100%;
    }
    .p-icon {
        height: 50px;
        width: 50px;
        border-radius: 16px;
    }
    .p-content {
        display: flex;
        width: 100%;
        align-items: center;
    }
    .p-txt {
        display: flex;
    }
    .p-txt p {
        color: var(--color-white);
        margin-left: 8 px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .p-content button {
        height: 50px;
        width: 50px;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 0;
        cursor: pointer;
        background-color: transparent;
    }
    .p-content button:hover {
        background-color: rgba(32, 32, 32, 1);
    }
    @media only screen and (max-height: 953px) {
        .edit-item-grid {
            overflow-y: auto;
        }  
        .edit-item-grid {
            overflow-x: hidden;
        }   
        .edit-item-c3 {
            margin-right: 10px;
        } 
    }
    @media  only screen and (max-width: 1380px ) {
        .edit-price-container {
            display: flex;
            flex-direction: column;
        }
        .edit-item-c2 {
            margin-right: 10px;
        }
        .edit-item-grid {
            grid-template-columns: 1fr 1fr;
        }
        .edit-item-c3 {
            margin-right: 10px;
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: min-content;
            grid-column-gap: 20px;
        }
    }

    @media only screen and (max-width: 1000px) {
        .edit-price-container {
            display: flex;
            flex-direction: column;
        }
        .edit-item-c1, .edit-item-c2, .edit-item-c3 {
            margin-right: 10px;
        }
        .edit-item-grid {
            display: flex;
            flex-direction: column;
        }
        .edit-item-c3 {
            display: flex;
            flex-direction: column;
        }
    }

/* COMP-16 <<@------------------------ Edit Item Components ------------------------@>>*/

/* content */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 16px;
    background-color: transparent;
}
.close-btn:hover {
    background-color: rgba(217, 217, 217, 0.1);
}
.edit-item-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 100;
    display: flex;
    justify-content: center; /* Középre igazításhoz */
    align-items: center; /* Függőleges középre igazításhoz */
    background-color: rgba(165, 165, 165, 0.2);
}

.edit-item-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit; /* Örökli a szülő háttér színét */
    backdrop-filter: blur(10px); /* Az elmosás mértéke */
    z-index: -1; /* Háttérbe helyezi a blur elemet */
}
.edit-item {
    position: relative;
    height: calc(100% - 110px);
    width: calc(100% - 110px);
    border-radius: 16px;
    background-color: rgba(22, 22, 22, 1);
}
.edit-item-grid {
    height: calc(100% - 82px);
    width: calc(100% - 80px);
    display: grid;
    margin: 32px 40px 0 40px;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
}
.edit-item-c1, .edit-item-c2, .edit-item-c3 {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.edit-item h1 {
    color: var(--color-white);
    font-weight: 500;
    font-size: var(--poppins-bs-size);
    font-family: var(--poppins);
}
#close-creating-item {
    position: static;
    margin-left: auto;
    cursor: pointer;
}
.edit-item input {
    color: var(--color-white);
    width: 100%;
    margin: 0 5px;
    border: 0;
    background-color: transparent;
}
.edit-item input:focus {
    outline: none;
}
.edit-item textarea {
    color: var(--color-white);
    height: 150px;
    width: calc(100% - 10px);
    resize: none;
    margin: 5px;
    border: 0;
    background-color: transparent;
}
.edit-item textarea:focus {
    outline: none;
}
.set-name {
    height: 50px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.details {
    height: 150px;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.tag-container {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.tag {
    height: 25px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 16px;
    background-color: rgba(64, 57, 57, 0.5);
}
.tag-txt {
    color: var(--color-white);
}
.tag-icon {
    height: 13px;
    width: 13px;
}
.edit-item-body-footer {
    position: absolute;
    bottom: 0;
    z-index: 1;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 0 0 16px 16px;
    background-color: rgba(22, 22, 22, 1);
}
.edit-item-body-footer img {
    height: 14px;
    width: 14px;
    margin-left: 40px;
}
.edit-item-body-footer p {
    color: var(--color-white);
    margin-left: 4px;
    font-size: 12px;
    font-family: var(--poppins);
}
.edit-item-body-footer button {
    color: var(--color-white);
    height: 32px;
    width: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500px;
    font-size: 12px;
    font-family: var(--poppins);
}
.edit-item-body-footer button span {
    margin: 5px 20px;
}
.edit-item-cancel-btn {
    margin-left: auto;
    margin-right: 16px;
    border: 1px solid var(--color-white) !important;
    background-color: transparent;
}
.edit-item-next-btn {
    margin-right: 40px;
    background-color: rgba(31, 70, 144, 1);
}

/* text-editor */
.text-editor {
    height: fit-content;
    flex-wrap: wrap;
    width: 360px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.text-editor button {
    margin: 5px 0;
    cursor: pointer;
    border: 0;
    background-color: transparent;
}
/* description */
.description {
    height: 300px;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}

.slider-switch.round:before {
    border-radius: 50%;
}
/* cic color-container */
.cic-prop-txt {
    color: rgba(217, 217, 217, 0.4);
    font-size: 12px;
    font-family: var(--inter);
}
.cic-color-container {
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.color {
    height: 22px;
    width: 22px;
    margin-left: 3px;
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
}
.c1 {
    background-color: rgba(0, 0, 0, 1);
}
.c2 {
    background-color: rgba(165, 42, 42, 1);
}
.c3 {
    background-color: rgba(128, 128, 128, 1);
}
.c4 {
    background-color: rgba(255, 255, 255, 1);
}
.c5 {
    background-color: rgba(255, 0, 0, 1);
}
.c6 {
    background-color: rgba(255, 192, 203, 1);
}
.c7 {
    background-color: rgba(0, 128, 0, 1);
}
.c8 {
    background-color: rgba(0, 0, 255, 1);
}
.c9 {
    background-color: rgba(0, 255, 255, 1);
}
.c10 {
    background-color: rgba(255, 165, 0, 1);
}
.c11 {
    background-color: rgba(255, 255, 0, 1);
}
.c12 {
    background-color: rgba(128, 0, 128, 1);
}
/* dropdown menu 2 */
.dropdown-menu2 {
    top: 40px;
    display: none;
    width: 100%;
    position: absolute;
    background-color: transparent;
    z-index: 1;
}
.dd-container2 {
    width: 100%;
    background-color: rgb(51, 51, 51);
    border-radius: 16px;
}

.dropdown-menu2 ul {
    list-style-type: none;
    padding: 0;
}

.dropdown-menu2 ul li {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dd-container2 li button {
    color: var(--color-white);
    height: 50px;
    width: calc(100% - 10px);
    display: flex;
    align-items: center;
    margin: 0 5px;
    border: 0;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    font-family: var(--hind-vadodara);
    background-color: transparent;
}
.dd-container2 li button:hover {
    background-color: #56555586;
}
.dd-container2 li button input {
    height: 16px;
    width: 16px;
    margin: 0 10px;
}
.dd-container2 ul:first-child li:first-child button {
    margin-top: 5px;
}
.dd-container2 ul:last-child li:last-child button {
    margin-bottom: 5px;
}
.lang {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 20px;
}

/* Ikon elforgatása, amikor a menü nyitva van */
.sort-by-btn.active .sort-by-icon {
    transform: rotate(180deg);
}

/* Legördülő menü megjelenítése */
.sort-by-btn:hover .dropdown-menu2,
.sort-by-btn:focus .dropdown-menu2 {
    display: block;
}
.sort-by-btn {
    position: relative;
    height: 50px;
    width: 200px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 16px;
    background-color: rgba(217, 217, 217, 0.06);
    transition: border 0.3s;
}
.sort-by-txt {
    color: #ffffff;
    margin-left: 10px;
    margin-right: 30px;
    white-space: nowrap;
    font-weight: 500;
    font-size: var(--inter-bs-size);
    font-family: var(--inter);
}
.sort-by-btn h1 {
    color: var(--color-white);
    padding: 0;
    margin-left: 14px;
    margin-right: auto;
    font-weight: bold;
    font-size: var(--inter-bs-size);
    font-family: var(--inter);
}
.sort-by-icon {
    margin-left: auto;
    margin-right: 10px;
    transition: transform 0.3s; /* Animáció hozzáadása */
}
.event-container {
    height: 318px;
    display: flex;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.event-adder {
    height: fit-content;
    margin-top: 15px;
    display: flex;
    width: 100%;
    justify-content: center;
}
.add-event {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    border-radius: 16px;
    background-color: rgba(217, 217, 217, 0.06);
}
.add-event:hover {
    background-color: rgba(217, 217, 217, 0.09);
}
#when, #then {
    height: 45px !important;
    width: 150px !important;
}
.event-txt-container {
    display: flex;
    align-items: center;
}
.event-txt {
    color: var(--color-white);
    padding: 0;
    margin: 0 6px;
    font-weight: bold;
    font-size: var(--inter-tiny-size);
    font-family: var(--inter);
}

/* price */
.edit-price-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}
.price-container2 {
    height: 50px;
    width: 100%;
    display: flex;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.price-container2 input {
    color: var(--color-white);
    width: 100%;
    margin: 0 5px;
    border: 0;
    background-color: transparent;
}
.price-container2 input[type="number"]::-webkit-outer-spin-button,
.price-container2 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.chain-container {
    height: fit-content;
    width: 100%;
    display: flex;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.chains {
    width: calc(100% - 10px);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px;
}
.chain {
    cursor: pointer;
    height: 24px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background-color: rgb(54, 129, 94);
}
.chain img {
    height: 16px;
    width: 16px;
    margin-left: 5px;
}
.chain p {
    color: var(--color-white);
    margin: 0 10px;
    font-size: var(--inter-tiny-size);
    font-family: var(--inter);
}
.token-container {
    height: fit-content;
    width: 100%;
    display: flex;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.tokens {
    width: calc(100% - 10px);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px;
}
.token {
    cursor: pointer;
    height: 24px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background-color: rgb(54, 129, 94);
}
.token img {
    height: 16px;
    width: 16px;
    margin-left: 5px;
}
.token p {
    color: var(--color-white);
    margin: 0 10px;
    font-size: var(--inter-tiny-size);
    font-family: var(--inter);
}

/* upload container */
.upload-container {
    height: 188px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgb(47, 47, 47);
    margin-bottom: 10px;
    border-radius: 16px;
    cursor: pointer;
}
.uploaded-image-container {
    height: 73px;
    width: 100%;
    border: 2px solid rgb(47, 47, 47);
    border-radius: 16px;
}
.upload-header {
    margin-top: 12px;
    margin-left: 12px;
    display: flex;
}
.icon-img {
    height: 36px;
    width: 36px;
    border-radius: 8px;
}
.upload-description {
    display: flex;
    width: 100%;
}
.upload-description img {
    height: 20px;
    width: 20px;
    margin-right: 12px;
    margin-left: auto;
}
.u-text-container p {
    margin: 0 10px;
}
.u-header {
    color: var(--color-white);
    margin: 0 10px;
    font-size: 12px;
    font-family: var(--poppins);
}
.u-description {
    color: rgba(150, 157, 178, 1);
    margin: 0 10px;
    font-size: 10px;
    font-family: var(--poppins);
}
.status-bar-container {
    width: calc(100% - 24px); /* Full width */
    margin-top: 8px;
    margin-left: 12px;
    margin-bottom: 12px;
    background-color: var(--color-grey-light); /* Background color of the container */
    border-radius: 5px; /* Rounded corners for the container */
    overflow: hidden; /* Clip inner content to fit the container's rounded corners */
    position: relative; /* Position relative to position the status text */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.status-bar {
    width: 100%; /* Full width */
    background-color:#423C3C; /* Background color */
    border-radius: 5px; /* Rounded corners */
    height: 5px; /* Height of the status bar */
}
.status-fill {
    width: 100%; /* Change this width to reflect the actual progress */
    background-color:#2196F3; /* Fill color */
    height: 100%; /* Full height */
    border-radius: 5px 0 0 5px; /* Rounded corners on the left */
    transition: width 0.3s ease; /* Smooth transition for the width */
}

/* summary */
.c-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 126px 1fr;
    grid-column-gap: 10px;
}
.c-c1 {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.c-img {
    height: 126px;
    width: 126px;
    border-radius: 16px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.c-c2 {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
}
.c-price-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}
.c-price, .c-price-chains {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.c-price-chains-al {
    margin-left: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.c-price-chains-al img {
    height: 16px;
    width: 16px;
}
.c-price p {
    color: var(--color-white);
    width: 100%;
    margin: 0 5px;
    border: 0;
    font-size: var(--inter-bs-size);
    font-family: var(--inter);
    background-color: transparent;
}
.descriptions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.short-description {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.short-description p, .long-description p {
    color: var(--color-white);
    width: 100%;
    margin: 5px;
    border: 0;
    font-size: var(--inter-tiny-size);
    font-family: var(--inter);
    background-color: transparent;
}
.long-description {
    height: 157px;
    width: 100%;
    display: flex;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}
.c-tag-container {
    width: 100%;
    display: flex;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1); 
}
.c-tokens {
    height: 66px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: rgba(32, 32, 32, 1);
}

/* hidden */
.hidden {
    display: none;
}

/* Create item end */
/* optimalization */
@media only screen and (max-height: 953px) {
    .edit-item-grid {
        overflow-y: scroll;
    }  
    .edit-item-grid {
        overflow-x: hidden;
    }   
    .edit-item-c3 {
        margin-right: 10px;
    } 
}
@media  only screen and (max-width: 1380px ) {
    .edit-price-container {
        display: flex;
        flex-direction: column;
    }
    .edit-item-c2 {
        margin-right: 10px;
    }
    .edit-item-grid {
        grid-template-columns: 1fr 1fr;
    }
    .edit-item-c3 {
        margin-right: 10px;
        grid-column: span 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content;
        grid-column-gap: 20px;
    }
}

@media only screen and (max-width: 1000px) {
    .edit-price-container {
        display: flex;
        flex-direction: column;
    }
    .edit-item-c1, .edit-item-c2, .edit-item-c3 {
        margin-right: 10px;
    }
    .edit-item-grid {
        display: flex;
        flex-direction: column;
    }
    .edit-item-c3 {
        display: flex;
        flex-direction: column;
    }
}

/* PAGE-0 <<@------------------------ Mainpage ------------------------@>>*/
    .info-container {
        position: relative;
        height: 400px;
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: grid;
        grid-template: 400px / 1fr 1fr;
        grid-gap: 19px;
    }

    .watcher-container {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-gap: 19px;
    }
        /* auction watcher */
    .auction-watcher {
        display: grid;
        grid-template-rows: 1fr 1fr;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
        /* first row */
    .auction-watcher-first-row {
        display: inline-flex;
        margin: 11px;
        justify-content: space-between;
    }
    .auction-watcher-title-container {
        display: inline-flex;
        height: fit-content;
        align-items: center;
    }
    .auction-watcher-title-txt {
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
        color: var(--color-white);
    }
    .auction-watcher-title-status {
        height: 16px;
        width: 16px;
        margin-left: 6px;
        border-radius: 16px;
        background-color: var(--color-light-green);
    }
    .auction-watcher-calendar {
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: var(--color-gray-02);
    }
    .auction-watcher-calendar:hover {
        background-color: transparent;
    }
    .auction-watcher-calendar-img {
        height: 22px;
        width: 22px;
    }
        /* second row */
    .auction-watcher-second-row {
        display: inline-flex;
        margin: 11px;
        justify-content: space-between;
        align-items: flex-end;
    }
    .auction-watcher-price {
        color: var(--color-white);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .auction-watcher-slider-status {
        margin: 0 !important;
    }
        /* event watcher */
    .event-watcher {
        display: grid;
        grid-template-rows: 1fr 1fr;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
        /* first row */
    .event-watcher-first-row {
        display: inline-flex;
        margin: 11px;
        justify-content: space-between;
    }
    .event-watcher-title-container {
        display: flexbox;
        height: fit-content;
        align-items: center;
    }
    .event-watcher-title-txt {
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
        color: var(--color-white);
    }
    .event-watcher-title-al-txt {
        margin: 3px 0 0 0;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
        color: var(--color-white);
    }
    .event-watcher-calendar {
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: var(--color-gray-02);
    }
    .event-watcher-calendar:hover {
        background-color: transparent;
    }
    .event-watcher-calendar-img {
        height: 22px;
        width: 22px;
    }
        /* second row */
    .event-watcher-second-row {
        display: inline-flex;
        margin: 11px;
        justify-content: space-between;
        align-items: flex-end;
    }
    .event-watcher-slider-status {
        margin: 0 !important;
    }
        /* top list */
    .top-list {
        border-radius: 16px;
        background-color: var(--color-gray-02);
    }
        /* top list - header */
    .top-list-header {
        display: flex;
        align-items: center; 
        width: 100%;
    }
    .top-list-type-selector {
        height: var(--area-standard);
        margin: 4px 0 0 4px;
        display: inline-flex;
        border-radius: 16px;
        background-color: var(--color-dark-gray);
    }
    .top-list-btn-type {
        height: var(--area-standard);
        width: var(--area-standard);
        border-width: 0px;
        border-radius: 16px;
        color: var(--color-white);
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }
    .top-list-btn-type:focus {
        background-color: var(--color-dark-gray-focused);
    }
    .top-list-btn-img {
        height: 24px;
        width: 24px;
    }
    .top-list-btn-txt {
        text-align: center;
        font-family: var(--press-start-2p);
        font-weight: normal;
        font-size: 10px;
    }
    .top-list-time-line {
        height: var(--area-standard);
        margin: 4px 4px 0 auto;
        display: inline-flex;
        border-radius: 16px;
        background-color: var(--color-dark-gray);
    }
    .top-list-btn-time {
        height: var(--area-standard);
        width: var(--area-standard);
        font-size: var(--inter-bs-size);
        font-weight: var(--inter-font-weight-semi-bold);
        font-family: var(--inter);
        border-width: 0px;
        border-radius: 16px;
        color: var(--color-white);
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }
    .top-list-btn-time:focus {
        background-color: var(--color-black-06);
    }
        /* top-list list (items) */
    .top-list-list {
        display: grid;
        width: calc(100% - 8px);
        grid-template: repeat(5, 60px) / 1fr 1fr;
        grid-auto-flow: column;
        grid-column-gap: 13px;
        grid-row-gap: 8px;
        margin: 10px 4px 4px 4px;
    }
    .top-list-item {
        height: 60px;
        width: 100%;
        display: inline-flex;
        border-radius: 16px;
        align-items: center;
        background-color: var(--color-black-06);
    }
    .top-list-item-num-container {
        height: var(--area-big);
        width: var(--area-big);
        margin-left: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .top-list-item-num {
        color: var(--color-white);
        font-size: var(--press-start-2p-mid-size);
        font-family: var(--press-start-2p);
    }
    .top-list-item-img {
        height: var(--area-big);
        width: var(--area-big);
        border-radius: 16px;
    }
    .top-list-item-text {
        color: var(--color-white);
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
        margin-left: 7px;
    }
    /* toplist phone opt */
    .top-list-time-line2 {
        display: none;
        height: var(--area-standard);
        margin: 0px 4px 0 auto;
        border-radius: 16px;
        background-color: var(--color-dark-gray);
    }

    /* <<@---------- Recently Added - Tech - Fashion - gaming - nft - accesories ----------@>> */
    .category-container {
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-shrink: 1;
        grid-template: 1fr 1fr / repeat(3, auto);
        grid-column-gap: max-content;
        grid-row-gap: 61px;
    }
    .category-header-txt {
        color: rgba(255, 255, 255, 0.4);
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
        /* recently added */
    #recently-added {
        display: flex;
        flex-direction: column;
    }
    .rectechfash-recently-added {
        position: relative;
        display: grid;
        height: 305px;
        width: 602px;
        grid-template: 136px 136px / repeat(4, 136px);
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        background-color: rgba(51, 71, 89, 1);
    }
    .rectechfash-img {
        height: 136px;
        width: 136px;
        border-radius: 16px;
    }
        /* tech */
    #tech {
        display: flex;
        flex-direction: column;
    }
    .rectechfash-tech {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-big rectechfash-img-big rectechfash-img-lay rectechfash-img-lay"
            "rectechfash-img-big rectechfash-img-big rectechfash-img-1 rectechfash-img-2";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(115, 78, 176, 1);
    }
        /* fashion */
    #fashion {
        display: flex;
        flex-direction: column;
    }
    .rectechfash-fashion {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-vertical-1 rectechfash-img-vertical-2 rectechfash-img-1 rectechfash-img-2"
            "rectechfash-img-vertical-1 rectechfash-img-vertical-2 rectechfash-img-3 rectechfash-img-4";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(142, 135, 122, 1);
    }

        /* items */
    .rectechfash-img-big {
        height: 283px;
        width: 283px;
        border-radius: 16px;
        grid-area: rectechfash-img-big;
    }
    .rectechfash-img-lay {
        height: 136px;
        width: 283px;
        border-radius: 16px;
        grid-area: rectechfash-img-lay;
    }
    .rectechfash-img-1, .rectechfash-img-2, .rectechfash-img-3, .rectechfash-img-4 {
        height: 136px;
        width: 136px;
        border-radius: 16px;
    }
    .rectechfash-img-1{
        grid-area: rectechfash-img-1;
    }
    .rectechfash-img-2{
        grid-area: rectechfash-img-2;
    }
    .rectechfash-img-3 {
        grid-area: rectechfash-img-3;
    }
    .rectechfash-img-4 {
        grid-area: rectechfash-img-4;
    }
    .rectechfash-img-vertical-1, .rectechfash-img-vertical-2 {
        height: 283px;
        width: 136px;
        border-radius: 16px;
    }
    .rectechfash-img-vertical-1 {
        grid-area: rectechfash-img-vertical-1;
    }
    .rectechfash-img-vertical-2 {
        grid-area: rectechfash-img-vertical-2;
    }

    /* <<@---------- NFT - Gaming - Accessories ----------@>> */
    .nft-gaming-accessories-container {
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: grid;
        grid-template: 1fr 305px / repeat(3, 1fr);
        grid-column-gap: 19px;
    }
    .nft-gaming-accessories-header-txt {
        color: var(--color-white);
        font-size: var(--press-start-2p-large-size);
        font-family: var(--press-start-2p);
    }
        /* Gaming */
    #gaming {
        display: flex;
        flex-direction: column;
    }
    .gaming {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-big rectechfash-img-big rectechfash-img-1 rectechfash-img-2"
            "rectechfash-img-big rectechfash-img-big rectechfash-img-lay rectechfash-img-lay";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(51, 97, 80, 1);
    }

        /* NFT */
    #nft {
        display: flex;
        flex-direction: column;
    }
    .nft {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-big rectechfash-img-big rectechfash-img-1 rectechfash-img-2"
            "rectechfash-img-big rectechfash-img-big rectechfash-img-3 rectechfash-img-4";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(44, 36, 36, 1);
    }
        /* Accessories */
    #accessories {
        display: flex;
        flex-direction: column;
    }
    .accessories {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-1 rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
            "rectechfash-img-3 rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(1, 46, 66, 1);
    }


    /* <<@---------- Slider Events ----------@>> */
    .slider-events {
        height: 335px;
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 19px;
        grid-template-areas: "slider-events-watcher slider-mid slider-mid";
    }
        /* slider event watcher */
    .slider-events-watcher {
        height: 335px;
        border-radius: 16px;
        background-color: var(--color-home-item);
        grid-area: slider-events-watcher;
        background-color: rgba(255, 255, 255, 0.01);
    }
        /* slider event watcher - header */
    .slider-events-watcher-header {
        height: var(--area-standard);
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid var(--color-light-gray-02); 
    }
    .slider-events-watcher-h-txt {
        justify-content: center;
        margin-left: 20px;
        color: var(--color-white);
        font-weight: bold;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .slider-events-watcher-bar {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        margin-right: 5px;
        gap: 11px;
    }
    .slider-events-watcher-action-view{
        height: 40px;
        width: fit-content;
        border-width: 0px;
        border-radius: 16px;
        background-color: black;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .slider-events-watcher-action-view-txt {
        color: var(--color-white);
        font-family: var(--inter);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: 13px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 11px;
    }
    .slider-events-watcher-action-view-img {
        margin-left: 10px;
    }
    .slider-events-watcher-action-information:hover{
        background-color: var(--color-black-04);
    }
    .slider-events-watcher-action-information{
        height: 40px;
        width: 40px;
        border-radius: 16px;
        background-color: black;
        color: var(--color-white);
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-width: 0px;
    }
    .events-watcher-info-icon{
        width: 22px;
        height: 22px;
    }
        /* slider event watcher - item container & items */
    .slider-events-watcher-item-container {
        height: calc(100% - var(--area-standard));
        width: calc(100% - 10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .slider-events-watcher-item {
        height: 60px;
        width: calc(100% - 10px);
        display: flex;
        flex-shrink: 1;
        align-items: center;
        margin: 5px;
        border-radius: 16px;
        background-color: var(--color-dark-brown);
    }
    .slider-events-watcher-item-pfp-img {
        height: var(--area-big);
        width: var(--area-big);
        margin-left: 3px;
        border-radius: 16px;
    }
    .slider-events-watcher-item-txt-container {
        display: flexbox;
        justify-content: center;
        margin-left: 3px;
        margin-right: auto;
    }
    .slider-events-watcher-item-txt {
        color: var(--color-white);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
        margin-bottom: 3px;
    }
    .slider-events-watcher-item-date {
        color: var(--color-white);
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .slider-events-watcher-item-status-img {
        height: 20px;
        width: 20px;
    }
    .slider-events-watcher-item-notify-img {
        height: 20px;
        width: 20px;
        margin: 15px;
        cursor: pointer;
    }
        /* slider mid */
    .slider-mid {
        flex-shrink: 4;
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        border-radius: 16px;
        background-image: url(../elements/recently-added.webp);
        background-position: center center;
        background-size: cover;
        grid-area: slider-mid;
    }
    .slider-mid-first {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .slider-mid-pfp-container {
        justify-self: flex-start !important;
        align-self: flex-start !important;
    }
    .slider-mid-txt {
        margin: 22px;
        color: var(--color-white);
        font-weight: bold;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .slider-mid-action-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .slider-mid-action {
        margin: 22px;
        justify-self: flex-end;
        align-self: flex-end;
    }
    .slider-status-mid {
        justify-self: center;
    }

    /* <<@---------- Popular books - Top Courses ----------@>>*/
    .books-courses-container {
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: flex;
        justify-content: space-between;
        /* grid-template: 1fr 305px / 2fr 1fr; */
    }
    .books {
        position: relative;
    }
    .book-item-container {
        height: 305px;
        width: 1200px;
        overflow-x: scroll;
        position: relative;
        border-radius: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 12px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-padding-right: 10px;
    }

    .book-item-container::-webkit-scrollbar {
        display: none;
    }
    .books-left, .books-right {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 3;
        top: calc(50% - 100px);
        height: 200px;
        width: 40px;
        cursor: pointer;
        border: 0;
        border-radius: 8px;
        background-color: rgba(167, 167, 167, 0.2);
        opacity: 0;
        transition: opacity 0.5s, background-color 0.6s;
    }
    .books:hover .books-left, .books:hover .books-right {
        opacity: 1;
    }
    .books-left:hover, .books-right:hover {
        background-color: rgba(217, 217, 217, 0.4);
    }
    .books-left {
        left: -20px;
    }
    .books-right {
        right: -20px;
    }
    .book-item {
        height: 283px;
        width: 190px;
        border-radius: 16px;
    }
    .courses-container2 {
        display: none;
    }
    .courses {
        position: relative;
        display: grid;
        height: 305px;
        width: 602px;
        grid-template: 136px 136px / repeat(4, 136px);
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 1);
    }

    /* <<@----------  Watches - Toys - Gifts ----------@>>*/
    .category-container2 {
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-shrink: 1;
        grid-template: 1fr 1fr / repeat(3, auto);
        grid-column-gap: max-content;
        grid-row-gap: 61px;
    }
    .watches {
        position: relative;
        display: grid;
        height: 305px;
        width: 602px;
        grid-template: 136px 136px / repeat(4, 136px);
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        background-color: rgba(86, 231, 118, 0.12);
    }
    .toys {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-big rectechfash-img-big rectechfash-img-1 rectechfash-img-2"
            "rectechfash-img-big rectechfash-img-big rectechfash-img-lay rectechfash-img-lay";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(191, 49, 215, 0.36);
    }
    .gifts {
        position: relative;
        display: grid;
        grid-template: 136px 136px / repeat(4, 136px);
        grid-template-areas:
            "rectechfash-img-1 rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
            "rectechfash-img-3 rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
        justify-content: center;
        align-content: center;
        grid-gap: 11px;
        border-radius: 16px;
        height: 305px;
        width: 602px;
        background-color: rgba(215, 119, 49, 0.36);
    }

    /* <<@----------  Top Collections ----------@>>*/
    .academy {
        height: 250px;
        width: var(--c-standard-width);
        margin: 67px var(--c-s-m-n);
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 16px;
        background-color: var(--color-gray-02);
    }
    .academy-txt-container {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .academy-txt-header {
        color: var(--color-white);
        text-align: center;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-very-big-size);
        font-family: var(--inter);
    }
    .academy-txt {
        color: var(--color-white);
        text-align: justify;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-small-size);
        font-family: var(--inter);
        margin: 0 75px;
    }
    .academy-item-container {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
    }
    .academy-item-img {
        height: 227px;
        width: 200px;
        border-radius: 16px;
    }
    /* <<@---------- Optimalisations ----------@>> */
    /* for you */
    @media only screen and (max-width: 875px) {
        .books-left, .books-right {
            display: none;
        }
        .mp-home-item {
            width: 270.5px;
            flex-shrink: 0;
        }
        .books {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
    }
    /* info container */
    @media only screen and (max-width: 1425px) {
        .info-container {
            position: relative;
            height: 600px;
            width: var(--c-standard-width);
            margin: 67px var(--c-s-m-n);
            display: grid;
            grid-template: 400px 200px / 1fr;
            grid-template-areas: "list"
                                "watcher";
            grid-gap: 19px;
        }

        .watcher-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
            grid-gap: 19px;
            grid-area: watcher;
        }
        .top-list {
            grid-area: list;
        }
    }
    @media only screen and (max-width: 1225px) {
        .info-container {
            position: relative;
            height: 838px;
            width: var(--c-standard-width);
            margin: 67px var(--c-s-m-n);
            display: grid;
            grid-template: 400px 438px / 1fr;
            grid-template-areas: "list"
                    "watcher";
            grid-gap: 19px;
        }

        .watcher-container {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 19px;
            grid-area: watcher;
        }
        .top-list {
            grid-area: list;
        }
    }

    @media only screen and (max-width: 725px) {
        .info-container {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
        .top-list {
            justify-content: center;
            -ms-overflow-style: none;
            scrollbar-width: none;
            overflow: hidden;
            grid-template-rows: 1fr 1fr;
            background-color: transparent;
        }
            /* top list - header */
        .top-list-header {
            height: 58px;
            border-radius: 16px;
            width: calc(100% - 20px);
            margin: 0 10px;
            background-color: var(--color-gray-02);
        }
        .top-list-type-selector {
            margin: 0 0 0 4px;
            border-radius: 16px;
            background-color: var(--color-dark-gray);
        }
        .top-list-time-line {
            margin: 0 4px 0 auto;
        }
            /* top-list list (items) */
        .top-list-list {
            overflow-x: auto;
            -ms-overflow-style: none; /* IE és Edge */
            scrollbar-width: none;
        }
        .top-list-item {
            width: 500px;
        }
    }
    @media only screen and (max-width: 575px) {
        .top-list-time-line {
            display: none;
        }
        .top-list-time-line2 {
            display: inline-flex;
        }
    }

    /* CATEGORY CONTAINE */
    @media only screen and (min-width:1912px) {
        .rectechfash-recently-added {
            width: 602px;
            grid-template: 136px 136px / repeat(4, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: flex;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: flex;
        }
    }
    @media only screen and (min-width: 1800px) and (max-width: 1912px) {
        /* 1800 is jó btw */
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
    }
    @media only screen and (min-width: 1700px) and (max-width: 1800px) {
        /* 1800 is jó btw */
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .rectechfash-tech :nth-child(2) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .nft :nth-child(4), .nft :nth-child(5) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .toys :nth-child(2) {
            display: none;
        }
    }
    @media only screen and (min-width: 1650px) and (max-width: 1700px) {
        /* 1800 is jó btw */
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .rectechfash-tech :nth-child(2) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .nft :nth-child(4), .nft :nth-child(5) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .toys :nth-child(2) {
            display: none;
        }
    }
    @media only screen and (min-width: 1520px) and (max-width: 1650px) {
        /* 1800 is jó btw */
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .rectechfash-tech :nth-child(2) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .nft :nth-child(4), .nft :nth-child(5) {
            display: none;
        }
        .accessories {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
                "rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
            width: calc(602px - 136px);
        }
        .accessories :nth-child(1), .accessories :nth-child(3) {
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-vertical-2 rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px);
        }
        .rectechfash-fashion :nth-child(1) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .toys :nth-child(2) {
            display: none;
        }
        .gifts {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
                "rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
            width: calc(602px - 136px);
        }
        .gifts :nth-child(1), .gifts :nth-child(3) {
            display: none;
        }
    }
    @media only screen and (min-width: 1403px) and (max-width: 1520px) {
        /* 1800 is jó btw */
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .rectechfash-tech :nth-child(2) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .nft :nth-child(4), .nft :nth-child(5) {
            display: none;
        }
        .accessories {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px*2);
        }
        .accessories :nth-child(1), .accessories :nth-child(3) {
            display: flex;
        }
        .accessories :nth-child(5) {
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1"
                "rectechfash-img-vertical-2 rectechfash-img-2";
            width: calc(602px - 136px*2);
        }
        .rectechfash-fashion :nth-child(1), .rectechfash-fashion :nth-child(5), .rectechfash-fashion :nth-child(6) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .toys :nth-child(2) {
            display: none;
        }
        .gifts {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px*2);
        }
        .gifts :nth-child(1), .gifts :nth-child(3) {
            display: flex;
        }
        .gifts :nth-child(5) {
            display: none;
        }
    }
    @media only screen and (min-width: 1310px) and (max-width: 1403px) {
        /* basic van */
    }
    @media only screen and (min-width: 1170px) and (max-width: 1310px) {
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .nft :nth-child(4), .nft :nth-child(5) {
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-vertical-2 rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px);
        }
        .rectechfash-fashion :nth-child(1) {
            display: none;
        }
        .courses {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .toys :nth-child(2) {
            display: none;
        }
    }
    @media only screen and (min-width: 1035px) and (max-width: 1170px) {
        .rectechfash-recently-added {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .nft :nth-child(4), .nft :nth-child(5) {
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-vertical-2 rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px);
        }
        .rectechfash-fashion :nth-child(1) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .rectechfash-tech :nth-child(2) {
            display: none;
        }
        .accessories {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
                "rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
            width: calc(602px - 136px);
        }
        .accessories :nth-child(1), .accessories :nth-child(3) {
            display: none;
        }
        .courses {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .toys :nth-child(2) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .gifts {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
                "rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
            width: calc(602px - 136px);
        }
        .gifts :nth-child(1), .gifts :nth-child(3) {
            display: none;
        }
    }
    @media only screen and (min-width: 845px) and (max-width: 1035px) {
        .rectechfash-recently-added {
            width: calc(602px - 136px*2);
            grid-template: 136px 136px / repeat(2, 136px);
        }
        .rectechfash-recently-added :nth-child(5) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(6) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-3"
                "rectechfash-img-2 rectechfash-img-4";
            width: calc(602px - 136px*2);
        }
        .nft :nth-child(1) {
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1"
                "rectechfash-img-vertical-2 rectechfash-img-2";
            width: calc(602px - 278px);
        }
        .rectechfash-fashion :nth-child(5), .rectechfash-fashion :nth-child(6) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1"
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .gaming :nth-child(4){
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1"
                "rectechfash-img-vertical-2 rectechfash-img-2";
            width: calc(602px - 136px*2);
        }
        .rectechfash-fashion :nth-child(1), .rectechfash-fashion :nth-child(5), .rectechfash-fashion :nth-child(6) {
            display: none;
        }
        .accessories {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
                "rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
            width: calc(602px - 136px);
        }
        .accessories :nth-child(1), .accessories :nth-child(3) {
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-big rectechfash-img-big rectechfash-img-1 "
                "rectechfash-img-big rectechfash-img-big rectechfash-img-2";
            width: calc(602px - 136px);
        }
        .rectechfash-tech :nth-child(2) {
            display: none;
        }
        .courses {
            width: calc(602px - 136px*2);
            grid-template: 136px 136px / repeat(2, 136px);
        }
        .courses :nth-child(5) {
            display: none;
        }
        .courses :nth-child(6) {
            display: none;
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-lay rectechfash-img-lay";
            width: calc(602px - 136px*2);
        }
        .toys :nth-child(1) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .gifts {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-2 rectechfash-img-big rectechfash-img-big"
                "rectechfash-img-4 rectechfash-img-big rectechfash-img-big";
            width: calc(602px - 136px);
        }
        .gifts :nth-child(1), .gifts :nth-child(3) {
            display: none;
        }
    }
    @media only screen and (min-width: 705px) and (max-width: 845px) {
        .rectechfash-recently-added {
            width: calc(602px - 136px*2);
            grid-template: 136px 136px / repeat(2, 136px);
        }
        .rectechfash-recently-added :nth-child(5) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(6) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(7) {
            display: none;
        }
        .rectechfash-recently-added :nth-child(8) {
            display: none;
        }
        .nft {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-3"
                "rectechfash-img-2 rectechfash-img-4";
            width: calc(602px - 136px*2);
        }
        .nft :nth-child(1) {
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(3, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-vertical-2 rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px);
        }
        .rectechfash-fashion :nth-child(1) {
            display: none;
        }
        .gaming {
            position: relative;
            display: grid;
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-lay rectechfash-img-lay";
            width: calc(602px - 136px*2);
        }
        .gaming :nth-child(1){
            display: none;
        }
        .rectechfash-fashion {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-vertical-2 rectechfash-img-1"
                "rectechfash-img-vertical-2 rectechfash-img-2";
            width: calc(602px - 136px*2);
        }
        .rectechfash-fashion :nth-child(1), .rectechfash-fashion :nth-child(5), .rectechfash-fashion :nth-child(6) {
            display: none;
        }
        .accessories {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px*2);
        }
        .accessories :nth-child(1), .accessories :nth-child(3) {
            display: flex;
        }
        .accessories :nth-child(5) {
            display: none;
        }
        .rectechfash-tech {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-lay rectechfash-img-lay"
                "rectechfash-img-1 rectechfash-img-2";
            width: calc(602px - 136px*2);
        }
        .rectechfash-tech :nth-child(1) {
            display: none;
        }
        .courses {
            width: calc(602px - 136px*2);
            grid-template: 136px 136px / repeat(2, 136px);
        }
        .courses :nth-child(5) {
            display: none;
        }
        .courses :nth-child(6) {
            display: none;
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
        .toys {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-lay rectechfash-img-lay";
            width: calc(602px - 136px*2);
        }
        .toys :nth-child(1) {
            display: none;
        }
        .watches {
            width: calc(602px - 136px*2);
            grid-template: 136px 136px / repeat(2, 136px);
        }
        .watches :nth-child(5) {
            display: none;
        }
        .watches :nth-child(6) {
            display: none;
        }
        .watches :nth-child(7) {
            display: none;
        }
        .watches :nth-child(8) {
            display: none;
        }
        .gifts {
            grid-template: 136px 136px / repeat(2, 136px);
            grid-template-areas:
                "rectechfash-img-1 rectechfash-img-2"
                "rectechfash-img-3 rectechfash-img-4";
            width: calc(602px - 136px*2);
        }
        .gifts :nth-child(1), .gifts :nth-child(3) {
            display: flex;
        }
        .gifts :nth-child(5) {
            display: none;
        }
    }
    @media only screen and (min-width: 0px) and (max-width: 705px) {
        /* basic van */
    }

    /* SLIDER EVENTS */
    @media only screen and (max-width: 1310px) {
        .slider-events {
            height: fit-content;
            width: var(--c-standard-width);
            margin: 67px var(--c-s-m-n);
            display: flex;
            flex-direction: column;
            row-gap: 20px;
        }
    }

    /* BOOKS AND COURSES */
    @media only screen and (min-width: 1780px) and (max-width: 1905px) {
        .courses {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
    }
    @media only screen and (min-width: 1715px) and (max-width: 1780px) {
        .courses {
            width: calc(602px);
            grid-template: 136px 136px / repeat(4, 136px);
        }
        .courses :nth-child(7) {
            display: flex;
        }
        .courses :nth-child(8) {
            display: flex;
        }
        .book-item-container {
            width: 998px;
        }
    }
    @media only screen and (min-width: 1580px) and (max-width: 1715px) {
        .courses {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
        .book-item-container {
            width: 998px;
        }
    }
    @media only screen and (min-width: 1403px) and (max-width: 1580px) {
        .courses {
            width: calc(602px - 136px);
            grid-template: 136px 136px / repeat(3, 136px);
        }
        .courses :nth-child(7) {
            display: none;
        }
        .courses :nth-child(8) {
            display: none;
        }
        .book-item-container {
            width: 796px;
        }
    }
    @media only screen and (min-width: 800px) and (max-width: 1403px) {
        .courses-container {
            display: none;
        }
        .books {
            width: calc(100vw - 90px);
        }
        .book-item-container {
            width: 100%;
            overflow-x: scroll;
        }
    }
    @media only screen and (max-width: 1403px) {
        .courses-container2 {
            display: block;
        }
    }

/* PAGE-1 <<@------------------------ Profile page ------------------------@>>*/
    /* banner */
    .banner-container {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .banner {
        position: relative;
        height: 230px;
        width: calc(100% - 76px);
        border-radius: 16px;
        display: flex;
        align-items: center;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .profile-img {
        /* margin-left: 20px; */
        margin-right: 10px;
        height: 84px;
        width: 84px;
        border: 4px solid var(--bg-nav);
        border-radius: 100%;
    }
    .social-media-container {
        height: 50px;
        margin-left: auto;
        align-self: flex-end;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.2);
    }
    .social-media-btn {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .social-media-icon {
        height: 25px;
        width: 25px;
    }
    .user-name-container {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 84px;
        width: 100%;
        display: flex;
        align-items: center;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    .user-name {
        color: var(--color-white);
        margin: 0;
        padding: 0;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .user-badge {
        top: 2px;
        position: relative;
        height: 25px;
        width: 25px;
        margin-left: 5px;
    }
    /* action menu */

    .action-menu {
        display: flex;
        flex-direction: column;
        width: calc(100% - 76px);
        margin: 0 38px;
        justify-content: center;
    }

    /* user container */
    .user-container {
        margin-top: 10px;
        margin-bottom: 10px;
        height: 50px;
        width: calc(100% - 76px);
        margin: 0 38px;
        display: flex;
        align-items: center;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    .share {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        border: 0;
        border-radius: 16px;
        cursor: pointer;
        background-color: transparent;
    }
    .more-btn {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 0;
        cursor: pointer;
        background-color: transparent;
    }
    .share:hover, .more-btn:hover {
        background-color: rgba(217, 217, 217, 0.1);
    }
    .share-icon, .more-icon {
        height: 20px;
        width: 20px;
    }
    /* selector button container */
    .selector-container {
        height: 55px;
        width: 100%;
        display: flex;
        align-items: center;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    .selector-btn-container {
        width: fit-content;
        display: flex;
    }
    .selector-btn {
        color: var(--color-white);
        height: 50px;
        width: fit-content;
        cursor: pointer;
        border-radius: 16px;
        border: 0;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .selector-btn span {
        margin: 0 10px;
    }
    .selector-btn:focus {
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Shop */
    .shop {
        display: flex;
        width: calc(100% - 76px);
        margin: 0 38px;
    }

    /* Blog */
    .blog {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .make-post {
        width: 1000px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .post-profile {
        height: 50px;
        margin: 12px;
        display: flex;
        align-items: center;
    }
    .make-post-pfp {
        height: 50px;
        width: 50px;
        border-radius: 100%;
    }
    .make-post-username {
        color: var(--color-white);
        margin-left: 8px;
        margin-right: 2px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .make-post-badge {
        height: 16px;
        width: 16px;
    }
    .make-post-input {
        color: var(--color-white);
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
        border: 0;
        background-color: transparent;
    }
    .make-post:focus {
        border: 0;
        outline: none;
    }
    textarea {
        resize: none;
    }
    .post-btn-container {
        margin: 12px;
        display: flex;
        margin-top: auto;
        gap: 12px;
    }
    .post-btn {
        height: 40px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
    }
    .post-send-btn {
        color: var(--color-white);
        margin-left: auto;
        background-color: rgba(57, 106, 151, 1);
    }
    .post {
        width: 1000px;
        margin-bottom: 20px;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .mpu2, .mpb2 {
        margin-top: 5px;
        align-self: start;
    }
    .post-createdAt {
        color: var(--color-white);
        margin-left: 12px;
        align-self: flex-start;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }
    .post-txt {
        color: var(--color-white);
        margin: 12px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .post-img {
        margin: 12px;
        border-radius: 16px;
    }
    .vote {
        width: calc(100% - 24px);
        margin: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .vote-label {
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 1);
    }
    #vote1 {
        height: 100%;
        width: 92%;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    #vote2 {
        height: 100%;
        width: 8%;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    .vote-txt {
        position: absolute;
        color: black;
        margin: 12px;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .post-btn2 {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background-color: transparent;
    }
    .hidden { display: none; }

/* PAGE-2 <<@------------------------ Settings page ------------------------@>>*/
    .settings {
        display: flex;
        height: calc(100vh - 71px);
        overflow-y: hidden;
    }
    /* Selector container */
    .settings-selector-container {
        height: 100%;
        width: 267px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .settings-category-selectors {
        width: 200px;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    }
    .settings-h1 {
        color: var(--color-white);
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .settings-al-category-selector {
        display: flex;
        flex-direction: column;
    }
    .category-btn2 {
        color: var(--color-white);
        height: 59px;
        width: 200px;
        gap: 13px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .category-btn2.active {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .category-btn1.active2 {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .al-category-selector.active2 {
        display: flex;
    }

    /* Settings container profile */
    .s-h1 {
        color: var(--color-white);
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .images {
        display: flex;
        gap: 24px;
    }
    .pfp-img {
        height: 106px;
        width: 106px;
        border: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: filter 0.3s ease;
    }
    .pfp-img:hover {
        filter: brightness(70%);
    }
    .banner-img {
        height: 106px;
        width: 640px;
        border: 0;
        cursor: pointer;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: filter 0.3s ease;
    }
    .banner-img:hover {
        filter: brightness(70%);
    }
    .user-info-container {
        display: flex;
    }
    .settings-header-txt {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .label1 {
        height: 50px;
        width: 322px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .label1 input {
        color: var(--color-white);
        height: 20px;
        width: calc(100% - 10px);
        margin: 0 5px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border: 0;
        background-color: transparent;
    }
    .label1 input:focus {
        outline: none;
    }
    .label1 input[type="number"]::-webkit-outer-spin-button,
    .label1 input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .label2 {
        height: 162px;
        width: 322px;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .label2 textarea {
        color: var(--color-white);
        height: calc(100% - 10px);
        width: calc(100% - 10px);
        margin: 5px;
        resize: none;
        border: 0;
        box-sizing: border-box;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .label2 textarea:focus {
        outline: none;
    }
    .adress {
        height: 50px;
        width: 322px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .copy-adress {
        height: 46px;
        width: 46px;
        display: flex;
        margin-left: 2px;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        justify-content: center;
        align-items: center;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .copy-adress:hover {
        background-color: rgba(217, 217, 217, 0.3);
    }
    .adress-txt {
        margin-left: 4px;
        color: var(--color-white);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .user-additionals-container {
        margin-left: 17px;
    }
    .save {
        height: 64px;
        width: 158px;
        color: var(--color-white);
        background-color: #0075FF;
        border: 0;
        cursor: pointer;
        border-radius: 16px;
        margin-top: 40px;
        font-size: var(--press-start-2p-mid-size);
        font-family: var(--press-start-2p);
    }
    /* Connections */
    .settings-profile-container {
        display: none;
    }
    /* előző cucc display none */
    .settings-connections-container {
        display: none;
        overflow-y: scroll;
    }
    .connect-info {
        height: 138px;
        width: 603px;
        display: block;
        margin-bottom: 25px;
        border-radius: 16px;
        background-color: rgba(84, 72, 72, 0.3);
    }
    .connect-txt-header {
        color: var(--color-white);
        margin-top: 20px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
        /* info box */
    .connect-info-txt {
        position: relative;
        top: 5px;
        margin-left: 20px;
        margin-right: 20px;
        color: var(--color-white);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .click-content {
        cursor: pointer;
        color: #0075FF;
    }
    .click-content:hover {
        color: #3392ff;
    }
    .connect-apps {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px;
        margin-top: 25px;
        gap: 7px;
    }
    .app {
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        cursor: pointer;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.32);
    }

    /* privacy and safety */
    .settings-connections-container{
        display: none;
        overflow-y: scroll;
    }
    /* előző cucc offolása */
    .settings-privacy-and-safety {
        display: block;
    }
    .safety-header-txt {
        color: var(--color-white);
        margin-top: 20px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .safety-container {
        display: grid;
        grid-template-columns: 1fr 55px;
        grid-template-rows: 35px;
        width: 250px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .safety-txt {
        color: var(--color-white);
        text-align: left;
        margin-left: 10px;
        font-weight: normal;
        font-family: var(--inter);
        font-size: var(--inter-small-size);
    }
    .delete-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .delete-search-histroy {
        color: var(--color-white);
        height: 45px;
        width: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
        background-color: rgba(217, 217, 217, 0.2);
    }
    .delete-search-histroy:hover {
        background-color: rgba(217, 217, 217, 0.3);
    }
    .delete-account {
        color: var(--color-white);
        height: 45px;
        width: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
        background-color: #890000;
    }
    .delete-account:hover {
        border: 2px solid #c60000;
        background-color: rgba(255, 0, 0, 0.2);
    }

    /* Inventory */
    .settings-privacy-and-safety {
        display: none;
    }
    /* előző cucc offolásda xd */
    .settings-inventory-container {
        display: block;
    }
    .inventory {
        height: 750px;
        width: 1318px;
        display: grid;
        grid-template: repeat(4, 1fr) / repeat(4, 1fr);
        align-items: center;
        justify-items: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .inv-item {
        height: 150px;
        width: 300px;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 1);
    }

    /* Earnings */
    .settings-inventory-container {
        display: none;
    }
    /* előző cucc offolásda xd */
    .settings-earnings-container {
        display: block;
    }
    h2 {
        color: var(--color-white);
        margin-top: 20px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .earnings-container {
        height: 110px;
        width: 396px;
        display: flex;
        flex-direction: column;
        margin-bottom: 28px;
    }
    .earnings-txt {
        color: var(--color-white);
        margin: 0;
        font-weight: normal;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .earnings-btn {
        color: var(--color-white);
        height: 43px;
        width: 106px;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        font-weight: normal;
        font-size: var(--press-start-2p-bs-size);
        font-family: var(--press-start-2p);
        background-color: #0075FF;
    }
    .align-right {
        align-self: flex-end;
    }
    .seller-btn {
        margin-top: 15px;
    }

    /* Notifications (privacy & safety dizájnjával dolgozik lmfao) */
    .settings-earnings-container {
        display: none;
    }
    /* előző cucc offolásda xd */
    .settings-notification-container {
        display: block;
    }

    /* Developer */
    .settings-notification-container {
        display: none;
    }
    /* előző cucc offolásda xd */
    .settings-developer-container {
        display: block;
    }
    .dev-api-container {
        display: flex;
    }
    .refresh-btn {
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        border: 0;
        border-radius: 16px;
        cursor: pointer;
        background-color: #0075FF;
    }

    /* Support */
    .settings-developer-container {
        display: none;
    }
    /* előző cucc offolásda xd */
    .settings-support-container {
        display: block;
    }
    .support-container {
        height: 80px;
        width: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 24px;
        border-radius: 16px;
        background-color: rgba(84, 72, 72, 0.3);
        overflow: hidden; /* Az overflow kezelése a lenyíló részéhez */
        transition: height 0.3s ease; /* Átmenet a magasság változásához */
    }

    .support-container.open {
        height: auto; /* Lenyitott állapotban a magasság automatikusra áll */
    }

    .support-header {
        display: flex;
        height: 80px;
        align-items: center;
    }

    .support-txt {
        color: var(--color-white);
        margin-left: 17px;
        margin-right: auto;
        font-weight: bold;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
        cursor: pointer; /* Mutató beállítása kattintható elemre */
    }

    .support-icon {
        margin-right: 17px;
        margin-left: auto;
        transition: transform 0.3s ease; /* Átmenet a forgatáshoz */
    }

    .support-content {
        display: none;
        padding: 10px;
    }

    .expanded {
        transform: rotate(180deg); /* Forgatás a lenyíló ikon számára */
    }

    /* off */
    .settings-support-container {
        display: none;
    }
    .settings-viewer {
        width: calc(100% - 20px - 267px); /* 20px a margin miatt 267px a category selector miatt. */
        margin-left: 20px;
        display: none;;
    }
    .settings-viewer.active {
        display: block;
    }

/* PAGE-3 <<@------------------------ Shop page ------------------------@>>*/
    .shop-content {
        display: flex;
        flex-direction: column;
    }
    /* Set bar */
    .set-bar {
        height: 55px;
        width: calc(100% - 76px);
        display: flex;
        align-items: center;
        margin: 0 38px;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    #type-selector {
        flex-shrink: 0;
        width: 150px;
        margin-left: auto;
    }

/* PAGE-4 <<@------------------------ Stats page ------------------------@>>*/

    .stats-h1 {
        color: var(--color-white);
        margin-left: 38px;
        font-weight: bold;
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    /* content */

    .stats-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* category container */
    .set-bar {
        height: 55px;
        width: 100%;
        display: flex;
        align-items: center;
        width: calc(100% - 76px);
        margin: 0 38px;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    #stats-type-selector {
        flex-shrink: 0;
        width: 145px;
    }
    #stats-status {
        width: 200px !important;
        flex-shrink: 0;
    }
    .category-container {
        display: flex;
        gap: 5px;
    }
    .selector-container {
        margin-left: 38px;
        width: fit-content;
        display: flex;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1);
    }
    /* time-line */
    .time-line {
        height: fit-content;
        width: fit-content;
        margin-left: auto;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .stats-top-list-time-line {
        height: var(--area-standard);
        display: inline-flex;
        border-radius: 16px;
        background-color: var(--color-dark-gray);
    }
    .stats-top-list-btn-time {
        height: var(--area-standard);
        width: var(--area-standard);
        font-size: var(--inter-bs-size);
        font-weight: var(--inter-font-weight-semi-bold);
        font-family: var(--inter);
        border-width: 0px;
        border-radius: 16px;
        color: var(--color-white);
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }
    .h4 {
        display: grid;
        height: 60px;
        grid-template-columns: repeat(6, 1fr);
    }
    h4 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }

/* PAGE-5 <<@------------------------ 404 page ------------------------@>>*/

    .err-content {
        height: 100%;
        width: 100%;
        display: flex;
        flex-shrink: 1;
        align-items: center;
        justify-content: center;
    }
    .err-content img {
        flex-shrink: 1;
        max-width: 80%;
        max-height: 100%;
    }

/* PAGE-6 <<@------------------------ Auction page ------------------------@>>*/

/* PAGE-7 <<@------------------------ Check-out page ------------------------@>>*/

    .checkout-content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        background-color: var(--bg-nav);
    }

    /* item container */
    .item-container {
        position: sticky;
        height: calc(100vh - 71px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* item */
    .item1 {
        height: 500px;
        width: 500px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
    }
    .delete-btn {
        height: 50px;
        width: 50px;
        margin: 20px;
        margin-bottom: auto;
        border: 0;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .quantity {
        height: 50px;
        width: 200px;
        margin: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.2);
    }
    .minus-btn {
        height: 46px;
        width: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 8px;
        background-color: rgba(255, 0, 0, 0.4);
    }
    .plus-btn {
        height: 46px;
        width: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        border-radius: 8px;
        background-color: rgba(33, 199, 70, 0.4);
    }
    .custom-quantity {
        color: var(--color-white);
        height: 46px;
        width: 100px;
        text-align: center;
        border: 0;
        border-radius: 8px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .custom-quantity:focus {
        outline: none;
    }

    /* details bar */
    .details-bar {
        top: 0;
        position: sticky;
        height: calc(100vh - 71px);
        display: flex;
        border-radius: 16px;
        background-color: rgba(17, 69, 56, 1);
    }
    .shipping-h1 {
        color: var(--color-white);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    .shipping-h2 {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .shipping-h3 {
        margin-top: 50px;
        margin-bottom: 29px;
        color: var(--color-white);
        font-weight: bold;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .shipping-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 36px;
    }
    .input-container {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        margin-bottom: 50px;
    }
    .shipping-input-container {
        height: 50px;
        width: 100%;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        border-radius: 16px;
        background-color: var(--color-white);
    }
    .shipping-input {
        height: 30px;
        width: calc(100% - 4px);
        margin: 0 4px;
        display: flex;
        border: 0;
        border-radius: 16px;
    }
    .shipping-input:focus {
        outline: none;
    }
    .shipping-input-container input::placeholder {
        color: rgba(165, 165, 165, 1);
        font-weight: bold;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .input-container label {
        color: white;
        margin: 8px 0;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .country-selector {
        margin-right: 42px;
    }
    .state-postal-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 10px;
        /* grid-template-rows: ; */
    }

    /* action bar */
    .action-bar {
        position: absolute;
        bottom: 0;
        height: 71px;
        width: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: center;
        border-top: 2px solid rgba(64, 57, 57, 0.5);
        background-color: rgba(22, 22, 22, 1);
    }
    .action-btn-container {
        display: flex;
    }
    .back-btn {
        height: 50px;
        margin-left: 38px;
        margin-right: auto;
        border: 0;
        border-radius: 16px;
        background-color: var(--color-white);
    }
    .next-btn {
        height: 50px;
        margin-right: 38px;
        border: 0;
        border-radius: 16px;
        background-color: var(--color-white);
    }
    .action-txt {
        color: black;
        margin: 30px;
        font-weight: bold;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }

    /* Payment details */
    .payment-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 36px;
    }
    .payment-methold {
        height: 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px 16px 0 0;
        background-color: rgba(161, 167, 181, 1);
    }
    .ocelot-txt {
        color: rgba(66, 60, 60, 1);
        margin-right: auto;
        margin-left: auto;
        font-weight: bold;
        font-size: 32px;
        font-family: var(--inter);   
    }
    .pay-color {
        color: rgba(0, 117, 255, 1);
    }
    .edit-btn {
        height: 50px;
        width: 50px;
        margin-right: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 1);
    }
    .payment-edit {
        height: 100px;
        width: 100%;
        display: grid;
        grid-column-gap: 7px;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr 1fr 1fr;
        border-radius: 0 0 16px 16px;
        background-color: rgba(66, 80, 108, 1);
    }
    .payment-edit p {
        color: var(--color-white);
        align-self: flex-end;
        font-weight: bold;
        font-size: var(--inter-small-size);
        font-family: var(--inter);  
    }
    .p-btn {
        color: black;
        height: 50px;
        margin-bottom: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        font-weight: bold;
        font-size: var(--inter-small-size);
        font-family: var(--inter);  
    }
    #pay-chain, .pay-chain {
        margin-left: 14px;
    }
    #gas {
        margin-right: 14px;
    }
    .promotion-code-container {
        height: 50px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 1);
    }
    .promo-input {
        height: 30px;
        width: calc(100% - 4px);
        margin: 0 14px;
        display: flex;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .promo-input:focus {
        outline: none;
    }
    .promo-btn {
        height: var(--area-standard);
        width: var(--area-standard);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0 16px 16px 0;
        background-color: #0075FF;
    }
    .promo-input::placeholder {
        color: rgba(165, 165, 165, 1);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }

    /* Checkout details */
    .checkout-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 36px;
    }
    .summary-container {
        height: 200px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .shipping-h4 {
        color: var(--color-white);
        margin: 5px 10px;
        font-weight: normal;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .total-container {
        height: 50px;
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* addictional css */

    .step {
        display: none; /* Alapértelmezetten minden lépést elrejtünk */
    }

    .active {
        display: flex; /* Az aktív lépés megjelenítése */
    }

/* PAGE-8 <<@------------------------ Collection page ------------------------@>>*/

    /* banner */
    .banner-container2 {
        display: flex;
        align-items: flex-end;
        width: 100%;
        justify-content: center;
    }
    .banner2 {
        position: relative;
        height: 314px;
        width: calc(100% - 76px);
        display: flex;
        align-items: center;
        border-radius: 16px 16px 0 0;
        background: url('/elements/banner.jpg') center center / cover no-repeat;
    }

    .banner2::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-nav) 95%);
        border-radius: 16px 16px 0 0;
        z-index: 1;
    }

    .profile-img {
        /* margin-left: 20px; */
        margin-right: 10px;
        height: 64px;
        width: 64px;
        border: 2px solid var(--bg-nav);
        border-radius: 16px;
    }
    .social-media-container {
        height: 50px;
        margin-left: auto;
        align-self: flex-end;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.2);
    }
    .social-media-btn {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .social-media-icon {
        height: 25px;
        width: 25px;
    }
    .user-name-container2 {
        position: absolute;
        z-index: 2;
        margin: 10px 48px;
        width: calc(100% - 96px);
        display: flex;
        flex-direction: column;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }
    .collection, .user {
        display: flex;
        align-items: center;
    }
    .collection-name {
        color: var(--color-white);
        margin-top: 15px;
        margin-bottom: 8px;
        padding: 0;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .collection-badge {
        top: 4px;
        position: relative;
        height: 25px;
        width: 25px;
        margin-left: 5px;
    }
    .user-badge {
        position: relative;
        height: 16px;
        width: 16px;
        margin-left: 3px;
    }
    .user h1 {
        color: rgba(255, 255, 255, 0.6);
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .stat-container {
        position: absolute;
        right: 68px;
        display: flex;
        justify-content: center;
        z-index: 2;
        gap: 32px
    }
    .stat-container div {
        display: grid;
        grid-column: repeat(5, 1fr);
        grid-row: 1fr 1fr;
    }
    .stat-container h1 {
        color: rgba(255, 255, 255, 0.6);
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .stat-container p {
        color: var(--color-white);
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    /* action menu */

    .action-menu2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
    }

    /* user container */
    .user-container2 {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 38px;
        height: 50px;
        width: calc(100% - 76px);
        display: flex;
        align-items: center;
        /* background-color: rgba(84, 72, 72, 0.3); */
    }

    .hidden { display: none; }

/* PAGE-9 <<@------------------------ Coming-soon page ------------------------@>>*/
    .coming-soon {
        overflow: hidden;
    }

    .coming-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* header */
    header h1 {
        padding: 0;
        margin: 0;
        margin-bottom: 20px;
        font-size: 50px;
        font-family: var(--hind-vadodara);
        background: linear-gradient(to right, #521990, #06926197);
        -webkit-background-clip: text;
        color: transparent;
    }

    /* counter */
    .coming-container {
        position: relative;
        height: 200px;
        width: 653px;
        border-radius: 16px;
    }

    .container::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 5px;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        background: rgba(138, 43, 226, 0.5); /* Lila szín */
        filter: blur(20px); /* Állítsd be az elkenés mértékét */
        z-index: -1;
    }

    .counter {
        position: relative;
        z-index: 1;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(31, 31, 31, 1);
        /* A border-t eltávolítjuk, és a pseudo-elemmel helyettesítjük */
    }

    .counter::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px; /* Kövesse a .counter border-radius értékét */
        padding: 1px; /* Állítsd be a border vastagságát */
        background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 204, 255, 0.3)); /* Gradient border */
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude; /* A maszkolással csak a border részt jelenítjük meg */
        z-index: -1;
    }

    .time-container {
        display: flex;
        justify-content: center;
    }
    .time-container {
        margin: 0 52px;
        width: calc(100% - 104px);
        display: flex;
        justify-content: space-between;
    }
    .time {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .time h1 {
        padding: 0;
        margin: 0;
        color: var(--color-white);
        font-size: 70px;
        font-weight: normal;
        font-family: var(--open-sans);
    }
    .time p {
        margin: 0;
        padding: 0;
        color: var(--color-white);
        font-size: 24px;
        font-weight: normal;
        font-family: var(--open-sans);
    }

/* PAGE-10 <<@------------------------ Dashboard ------------------------@>>*/

    /* Content */

    .dashboard-content {
        height: calc(100vh - 71px);
        width: 100vw;
        display: flex;
    }

    /* Selector container */
    .dash-selector-container {
        height: 100%;
        width: 267px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dash-category-selectors {
        width: 200px;
        margin-bottom: 15px;
        display: flex;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    }
    .category-btn1 {
        color: var(--color-white);
        height: 59px;
        width: 95px;
        margin-bottom: 15px;
        gap: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .al-category-selector {
        display: none;
        flex-direction: column;
    }
    .category-btn2 {
        color: var(--color-white);
        height: 59px;
        width: 200px;
        gap: 13px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: transparent;
    }
    .category-btn2.active {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .category-btn1.active2 {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .al-category-selector.active2 {
        display: flex;
    }

    /* Viewer */

    .viewer-section.active {
        display: grid;
    }
    .viewer-section {
        display: none; /* alapértelmezetten minden tartalmi elem rejtve */
    }

    /* Page tab buttons */
    .viewer {
        overflow-y: scroll;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.03);
    }
    .viewer-header {
        height: 46px;
        width: calc(100% - 48px);
        margin: 13px 38px 13px 10px;
        display: flex;
        align-items: center;
    }
    .tab-button-container {
        display: none;
        gap: 10px;
    }
    .tab-button-container.active {
        display: flex;
        gap: 10px;
    }
    .tab-btn-simple.active, .tab-btn-icon.active {
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.8); /* Aláhúzás színe */
        text-decoration-thickness: 2px; /* Aláhúzás vastagsága */
    }
    .tab-btn-simple {
        height: 46px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .tab-btn-simple:hover, .tab-btn-icon:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .tab-btn-simple p {
        color: var(--color-white);
        padding: 0;
        margin: 8px;
        font-weight: normal;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .tab-btn-icon {
        height: 46px;
        width: 46px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .quick-menu {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: auto;
    }
    .quick-menu-btn {
        height: 46px;
        width: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        cursor: pointer;
        border-radius: 16px;
        background-color: transparent;
    }
    .quick-menu-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* PERSONAL HOME */
    /* home banner */
    #personal-home {
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-template: 250px / repeat(3, 1fr);
        grid-auto-rows: 1fr;
        grid-gap: 10px;
    }
    .home-banner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: 1 / 3;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .hb1 {
        margin: 40px 0 0 40px;
    }
    .hb1 img {
        height: 124px;
        width: 124px;
        margin-top: 10px;
        border-radius: 16px;
    }
    .hb1 h1 {
        color: var(--color-white);
        font-weight: 400;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .hb1 h2 {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: Arial;
    }
    .hb2 {
        margin-right: 40px;
        margin-bottom: 16px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 18px;
    }
    .general-info {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .general-info img {
        height: 20px;
        width: 20px;
    }

    /* notificatios */
    .notifications {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-image: linear-gradient(rgba(113, 42, 138, 0.3) 0%, rgba(79, 68, 102, 0) 100%);
    }
    .notification-header {
        height: 63px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .notification-header h1 {
        color: var(--color-white);
        padding: 0;
        margin-left: 40px;
        margin-right: auto;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .more-btn {
        height: 50px;
        width: 50px;
        margin-right: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .more-btn img {
        height: 20px;
        width: 20px;
    }
    .notification-items {
        height: 100%;
        width: calc(100% - 80px);
        margin: 0 40px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }
    .notification {
        height: 54px;
        width: 248px;
        display: flex;
        gap: 8px;
    }
    .notification-icon {
        height: 24px;
        width: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background-color: var(--color-white);
    }
    .notification img {
        height: 16px;
        width: 16px;
    }
    .notification-txt-container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .notification-txt-container h1 {
        color: var(--color-white);
        font-weight: normal;
        font-size: 14px;
        font-family: var(--inter);
    }
    .notification-txt-container h2 {
        color: rgba(255, 255, 255, 0.4);
        font-weight: normal;
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }

    /* recommended */
    .recommended {
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .recommended-header {
        height: 63px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .recommended-header h1 {
        color: var(--color-white);
        padding: 0;
        margin-left: 40px;
        margin-right: auto;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .dash-sort-by-btn {
        position: relative;
        height: 50px;
        width: 200px;
        margin-left: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.06);
        transition: border 0.3s;
    }
    .dash-sort-by-txt {
        color: #ffffff;
        margin-left: 10px;
        margin-right: 30px;
        white-space: nowrap;
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .dash-sort-by-btn h1 {
        color: var(--color-white);
        padding: 0;
        margin-left: 14px;
        margin-right: auto;
        font-weight: bold;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .dash-sort-by-icon {
        margin-left: auto;
        margin-right: 10px;
        transition: transform 0.3s; /* Animáció hozzáadása */
    }
    .recommended-grid {
        width: calc(100% - 80px);
        margin: 30px 40px 40px 40px;
        display: grid;
        grid-template-columns: repeat(4, minmax(50px, 1fr));
        grid-template-rows: auto;
        gap: 14px;
    }
    .recommended-item {
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: lightblue;
    }

    /* auction watcher */
    .auction-watcher {
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .auction-header {
        height: 63px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .auction-header h1 {
        color: var(--color-white);
        padding: 0;
        margin-left: 40px;
        margin-right: auto;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .auction-status {
        height: 50px;
        width: calc(100% - 80px);
        margin: 0 40px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.06);
    }
    .auction-status img {
        height: 25px;
        width: 25px;
        margin: 0 20px;
        border-radius: 8px;
    }
    .auction-status p {
        color: rgba(119, 119, 119, 1);
        font-weight: 500;
        font-size: calc(1.01vw);
        font-family: var(--hind-vadodara);
    }
    .auction-grid {
        width: calc(100% - 80px);
        margin: 30px 40px 40px 40px;
        display: grid;
        grid-template-columns: repeat(4, minmax(50px, 1fr));
        grid-template-rows: auto;
        gap: 14px;
    }

    .auction-item {
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: lightblue;
    }

    /* Order History */
    .order-history {
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .order-header {
        height: 63px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .order-header h1 {
        color: var(--color-white);
        padding: 0;
        margin-left: 40px;
        margin-right: auto;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .order-grid {
        width: calc(100% - 80px);
        margin: 0 40px 40px 40px;
        display: grid;
        grid-template-rows: 50px;
        grid-auto-rows: 50px;
        grid-row-gap: 10px;
    }
    .order-item {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .order-item img {
        height: 50px;
        width: 50px;
        border-radius: 16px;
    }
    .item-txt-container {
        height: 50px;
        margin-left: 8px;
        display: flex;
        flex-direction: column;
    }
    .item-txt-container h2 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--hind-vadodara-bs-size);
        font-family: var(--hind-vadodara);
    }
    .item-txt-container p {
        color: rgba(255, 255, 255, 0.4);
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }
    .item-price {
        height: 50px;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(63, 184, 169, 1);
    }
    .item-price p {
        color: var(--color-white);
        margin: 0 12px;
        font-weight: 500;
        font-size: var(--hind-vadodara-bs-size);
        font-family: var(--hind-vadodara);
    }

    /* Watch history */
    .watch-history {
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .watch-history-header {
        height: 63px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .watch-history-header h1 {
        color: var(--color-white);
        padding: 0;
        margin-left: 40px;
        margin-right: auto;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .watch-history-grid {
        width: calc(100% - 80px);
        margin: 30px 40px 40px 40px;
        display: grid;
        grid-template-columns: repeat(4, minmax(50px, 1fr));
        grid-template-rows: auto;
        gap: 14px;
    }
    .watch-history-item {
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: lightblue;
    }

    /* Social */
    .social {
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .social-grid {
        width: calc(100% - 80px);
        margin: 0 40px;
    }
    .social-item {
        display: flex;
        gap: 12px;
        margin-bottom: 30px;
    }
    .social-item-pfp {
        height: 36px;
        width: 36px;
        border-radius: 100%;
    }
    .social-item-txt-container {
        display: flex;
        flex-direction: column;
    }
    .social-item-txt-header {
        display: flex;
        align-items: center;
    }
    .social-item-txt-header h2 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .social-item-txt-header p {
        color: rgba(152, 152, 152, 1);
        font-weight: normal;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .badge {
        height: 12px;
        width: 12px;
        margin-left: 4px;
        margin-right: auto;
    }
    .social-item-comment {
        display: flex;
        margin-top: 10px;
    }
    .social-item-comment p {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }

    /* PERSONAL ORDERS */
    #personal-orders {
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-row-gap: 24px;
    }
    .personal-oders-header {
        display: flex;
        height: 50px;
        grid-column: 1 / 4;
    }
    .bar-input {
        color: var(--color-white);
        width: 100%;
        border: 0;
        background-color: transparent;
    }
    .bar-input:focus {
        outline: none;
    }
    #order-filter{
        margin: 0 !important;
    }
    #order-order-by, #impact-filter {
        margin-left: 10px;
    }
    .order-table {
        width: 100%;
        grid-column: 1 / 4;
        border-collapse: collapse;
    }
    .order-table th {
        color: var(--color-white);
        height: 50px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: rgba(255, 255, 255, 0.05);
    }

    .order-table td {
        color: var(--color-white);
        height: 50px;
        text-align: center;
        padding: 10px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Elválasztó vonal minden sor alatt */
    }
    .product-preview {
        height: 40px;
        width: 40px;
        margin: auto;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .processing {
        height: 40px;
        width: fit-content;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 1px solid rgba(110, 231, 183, 1);
        background-color: rgba(209, 250, 229, 1);
    }
    .processing p {
        color: rgba(6, 95, 70, 1);
        margin: 10px 10px;
    }
    .processing img  {
        margin-left: 10px;
    }
    .shipping-service {
        display: flex;
        justify-content: center;
    }
    .shipping-service .service-icon {
        height: 40px;
        max-width: 100px;
        min-width: 40px;
        padding: 2px 8px;
        border-radius: 16px;
        background-color: azure;
    }
    .more-detail {
        position: relative;
        height: 40px;
        width: 40px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .more-detail img {
        height: 24px;
        width: 24px;
    }

    /* PERSONAL WATCHER */
    #personal-watcher {
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
    }
    .personal-watcher-container {
        display: none;
    }
    .personal-watcher-container.active {
        display: flex;
        flex-direction: column;
    }
    .personal-watcher-header {
        display: flex;
        height: 50px;
        margin-bottom: 24px;
        grid-column: 1 / 4;
    }
    .watcher-table {
        width: 100%;
        grid-column: 1 / 4;
        border-collapse: collapse;
    }
    .watcher-table th {
        color: var(--color-white);
        height: 50px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: rgba(255, 255, 255, 0.05);
    }
    .watcher-table td {
        color: var(--color-white);
        height: 50px;
        text-align: center;
        padding: 10px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Elválasztó vonal minden sor alatt */
    }
    .home-item-star-container {
        display: inline-flex;
    }
    .home-item-star {
        height: 12px;
        width: 12px;
    }
    .more-detail2 {
        position: relative;
        height: 40px;
        width: 40px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .more-detail2 img {
        height: 14px;
        width: 14px;
    }

    /* PERSONAL SOCIAL */
    #personal-social {
        grid-row-gap: 24px;
    }
    .personal-social-container {
        display: none;
    }
    .personal-social-container.active {
        display: flex;
        flex-direction: column;
    }
    .comments {
        margin: 0 38px 0 10px;
        height: fit-content;
        grid-column: 1 / 4;
        grid-row: 1 / 3
    }
    .calendar {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .comment-grid {
        margin-top: 30px;
        display: grid;
    }
    .comment {
        width: fit-content;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
        margin-bottom: 15px;
    }
    .social-item2 {
        display: flex;
        width: fit-content;
        margin: 10px;
        gap: 12px;
    }
        /* following post */
    .post-profile {
        height: 50px;
        margin: 12px;
        display: flex;
        align-items: center;
    }
    .make-post-pfp {
        height: 50px;
        width: 50px;
        border-radius: 100%;
    }
    .make-post-username {
        color: var(--color-white);
        margin-left: 8px;
        margin-right: 2px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .make-post-badge {
        height: 16px;
        width: 16px;
    }
    .make-post-input {
        color: var(--color-white);
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
        border: 0;
        background-color: transparent;
    }
    .make-post:focus {
        border: 0;
        outline: none;
    }
    textarea {
        resize: none;
    }
    .post-btn-container {
        margin: 12px;
        display: flex;
        margin-top: auto;
        gap: 12px;
    }
    .post-btn {
        height: 40px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
    }
    .post-send-btn {
        color: var(--color-white);
        margin-left: auto;
        background-color: rgba(57, 106, 151, 1);
    }
    .post {
        width: 1000px;
        margin-bottom: 20px;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.2);
    }
    .mpu2, .mpb2 {
        margin-top: 5px;
        align-self: start;
    }
    .post-createdAt {
        color: var(--color-white);
        margin-left: 12px;
        align-self: flex-start;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }
    .post-txt {
        color: var(--color-white);
        margin: 12px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .post-img {
        margin: 12px;
        border-radius: 16px;
    }
    .vote {
        width: calc(100% - 24px);
        margin: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .vote-label {
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 1);
    }
    #vote1 {
        height: 100%;
        width: 92%;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    #vote2 {
        height: 100%;
        width: 8%;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    .vote-txt {
        position: absolute;
        color: black;
        margin: 12px;
        font-weight: var(--inter-font-weight-semi-bold);
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .post-btn2 {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background-color: transparent;
    }

    /* PERSONAL EXTENSIONS */
    #personal-extensions {
        grid-row-gap: 24px;
    }
    .personal-extensions-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: fit-content;
        grid-column: 1 / 4;
        grid-row: 1 / 3
    }
    .personal-extensions-container h1 {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    .personal-extensions-container h2 {
        color: rgba(255, 255, 255, 0.6);
        width: 736px;
        text-align: center;
        font-weight: normal;
        font-size: var(--roboto-mid-size);
        font-family: var(--roboto);
    }
    .extensions-search {
        height: 50px;
        width: 736px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background-color: transparent;
    }
    .extensions-search-input {
        color: rgba(255, 255, 255, 0.4);
        width: 98%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border: 0;
        background-color: transparent;
    }
    .extensions-search .search-form {
        width: 100%;
    }
    .category-btn-container {
        height: 50px;
        width: 736px;
        margin-top: 15px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
    }
    .category-btn-container button {
        color: rgba(255, 255, 255, 0.4);
        height: 50px;
        padding: 19px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: normal;
        font-size: 14px;
        font-family: var(--inter);
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .category-btn-container button:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }
        /* top extension */
    .extensions-category-top {
        display: flex;
        width: 736px;
        flex-direction: column;
    }
    .extensions-category-top h3 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .extensions-category-top h4 {
        color: rgba(255, 255, 255, 0.6);
        padding: 3px 0;
        font-weight: normal;
        font-size: var(--roboto-bs-size);
        font-family: var(--roboto);
    }
    .top-extensions {
        height: 300px;
        width: 736px;
        display: grid;
        grid-template: repeat(2, 1fr) / repeat(2, 1fr);
        grid-gap: 12px;
    }
    .extension-big-item {
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1);
    }
    .extension-big-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .extension-big-item .icon {
        height: 100px;
        width: 100px;
        flex-shrink: 0;
        margin-left: 22px;
        border-radius: 100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .extension-big-item-txt {
        height: 100px;
        margin-right: 22px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
    .extension-big-item-txt h1 {
        font-size: var(--inter-bs-size) !important;
    }
    .extension-big-item-txt p {
        color: rgba(255, 255, 255, 0.8);
        width: 100%;
        text-align: left;
        font-weight: normal;
        font-size: 10px;
        font-family: var(--inter);
    }
    .extension-big-item-txt h5 {
        color: rgba(255, 255, 255, 0.4);
        margin-top: 0px;
        font-weight: normal;
        font-size: 10px;
        font-family: var(--roboto);
    }
        /* extensions bs */
    .extensions-category {
        display: flex;
        width: 736px;
        margin-top: 30px;
        flex-direction: column;
    }
    .extensions-category h3 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .extensions-category h4 {
        color: rgba(255, 255, 255, 0.6);
        padding: 3px 0;
        font-weight: normal;
        font-size: var(--roboto-bs-size);
        font-family: var(--roboto);
    }
    .extensions {
        width: 736px;
        display: grid;
        grid-template: repeat(3, 110px) / repeat(2, 1fr);
        grid-gap: 12px;
    }
    .extension-item {
        display: flex;
        align-items: center;
        border-radius: 16px;
    }
    .extension-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .extension-item .index {
        height: 65px;
        width: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .extension-item .index p {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .extension-item .icon {
        height: 65px;
        width: 65px;
        flex-shrink: 0;
        border-radius: 100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .extension-item-txt {
        height: 65px;
        margin-right: 12px;
        margin-left: 8px;
        display: flex;
        flex-direction: column;
    }
    .extension-item-txt h1 {
        font-size: var(--inter-tinier-size) !important;
    }
    .extension-item-txt p {
        color: rgba(255, 255, 255, 0.8);
        width: 100%;
        text-align: left;
        font-weight: normal;
        font-size: 8px;
        font-family: var(--inter);
    }
    .extension-item-txt h5 {
        color: rgba(255, 255, 255, 0.4);
        margin-top: 0px;
        font-weight: normal;
        font-size: 8px;
        font-family: var(--roboto);
    }

    /* VERIFICATION */
    #personal-verification {
        grid-row-gap: 24px;
    }
    .personal-verification-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: fit-content;
        grid-column: 1 / 4;
        grid-row: 1 / 3
    }
    .personal-verification-container h1 {
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    .personal-verification-container h2 {
        color: rgba(255, 255, 255, 0.6);
        width: 736px;
        text-align: center;
        font-weight: normal;
        font-size: var(--roboto-mid-size);
        font-family: var(--roboto);
    }
    .verification-item-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .badge-container {
        position: relative;
        z-index: 1;
        width: 875px;
        display: flex;
        justify-content: space-between;
    }
    .badge-container img, .badge-container div {
        height: 100px;
        width: 100px;
    }
    .verification-details-grid {
        position: absolute;
        margin-top: 50px;
        z-index: 0;
        display: grid;
        width: 1084;
        grid-template-columns: repeat(3,310px);
        grid-gap: 77px;
    }
    .verification-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 16px;
        border: 1px solid rgba(119, 119, 119, 1);
        background-color: rgba(255, 255, 255, 0.03);
    }
    .verification-item-header {
        width: 275px;
        display: flex;
        margin-top: 57px;
        padding-bottom: 10px;
        margin-bottom: 20px;
        justify-content: center;
        border-bottom: 1px solid rgba(119, 119, 119, 1);
    }
    .verification-item-header h3 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .verification-item p {
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .verification-item button {
        color: var(--color-white);
        height: 50px;
        width: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border: 0;
        border-radius: 16px;
        background-color: rgba(97, 102, 212, 1);
    }
    .verification-item button:hover {
        background-color: rgba(97, 102, 212, 0.7);
    }

    /* HELP CENTER */
    .personal-help-center-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: fit-content;
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-column: 1 / 4;
        grid-row: 1 / 3
    }
    .personal-help-center-container h1 {
        color: var(--color-white);
        margin: 38px 0;
        font-weight: normal;
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    .personal-help-center-container h2 {
        color: var(--color-white);
        margin: 38px 0;
        font-weight: 500;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .personal-help-center-container h3 {
        color: var(--color-white);
        width: 760px;
        margin-bottom: 48px;
        line-height: 150%;
        text-align: center;
        font-weight: normal;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .banner {
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .help-search {
        height: 50px;
        width: 500px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1);
    }
    .help-input {
        color: var(--color-white);
        width: 100%;
        border: 0;
        background-color: transparent;
    }
    .help-input::placeholder {
        color: rgba(255, 255, 255, 0.3);;
    }
    .help-input:focus {
        outline: none;
    }
    .help-center-item-container {
        margin-bottom: 30px;
        display: flex;
        gap: 30px;
    }
    .help-center-item {
        height: 260px;
        width: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 0;
        border-radius: 16px;
        cursor: pointer;
        background-color: var(--color-white);
    }
    .help-center-item:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }
    .help-center-item img {
        height: 100px;
        width: 100px;
        margin-top: 30px;
    }
    .help-center-item h4 {
        margin: 13px 0 6px 0;
        font-weight: 500;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .help-center-item span {
        color: rgba(119, 119, 119, 1);
        margin: 0 18px;
        font-weight: 500;
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }

    /* STUDIO HOME */
    #studio-home {
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-template: 250px 445px 320px / repeat(3, 1fr);
        grid-auto-rows: 1fr;
        grid-gap: 10px;
    }
        /* studio mode banner */
    .smb {
        grid-column: 1 / 4 !important;
    }
    .smb-container {
        display: flex;
        margin-top: 14px;
        margin-bottom: 16px;
        gap: 17px;
    }
    .smb-item {
        position: relative;
        height: 130px;
        width: 300px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-image: linear-gradient(rgba(0, 0, 0, 0.89) 0%, rgba(41, 41, 41, 0.75) 100%);
    }
    .smb-icon {
        height: 30px;
        width: 30px;
        margin: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background-color: rgba(64, 57, 57, 0.5);
    }
    .smb-icon img {
        height: 24px;
        width: 24px;
        margin: 0;
    }
    .smb p {
        color: rgba(119, 119, 119, 1);
        font-weight: 500;
        font-size: var(--hind-vadodara-bs-size);
        font-family: var(--hind-vadodara);
    }
    .smb-txt-container {
        position: absolute;
        top: 17px;
        right: 8px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .smb-txt {
        color: rgba(156, 163, 175, 1) !important;
        font-size: 40px !important;
    }
    .smb-txt span { 
        color: rgba(33, 199, 70, 0.62);
    }
    .sales-overview {
        grid-column: 1 / 3;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .sales-overview-header {
        margin: 16px 0 0 24px;
        display: flex;
        flex-direction: column;
    }
    .sales-overview-header h2 {
        color: white;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .sales-overview-header p {
        color: rgba(160, 174, 192, 1);
        font-weight: bold;
        font-size: 14px;
        font-family: var(--plus-jakarta-sans);
    }
    .sales-overview-header span {
        color: rgba(1, 181, 116, 1);
    }
    .canvas-container {
        display: flex;
        margin: 0 24px;
        height: 300px;
        width: calc(100% - 48px);
    }
        /* Most liked products */
    .most-liked-products {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .most-liked-products .chart-container {
        margin: 16px 24px;
    }
    .most-liked-products h2 {
        color: white;
        margin-bottom: 24px;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }

        /* traffic by location */
    .traffic-by-location {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    .traffic-by-location h2 {
        color: var(--color-white);
        margin: 16px 24px;
        font-weight: 500;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .traffic-by-location .chart-container {
        display: flex;
        margin: 24px;
    }
    .traffic-by-location .chart-container canvas {
        height: 120px;
        width: 120px;
    }
    .legend {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
    }
    .legend-item {
        color: var(--color-white);
        display: flex;
        align-items: center;
        margin: 5px 0;
        font-size: var(--inter-tiny-size);
        font-family: var(--inter);
    }
    .legend-color {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
    }
        /* Notifications */
    #studio-home .notifications {
        background-color: rgba(0, 0, 0, 0.22);
        background-image: none !important;
    }
    /* STUDIO ITEMS */
    .studio-items-list-container {
        display: none;
        height: auto;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
        overflow: hidden;
    }
    .studio-items-list-container.active {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .list-element-container::-webkit-scrollbar {
        display: none; /* WebKit browsers */
    }
    .list-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 36px;
    }
    .list-item h1 {
        margin-top: 0;
        margin-bottom: 12px;
        margin-left: 27px;
        padding: 0;
        color: var(--color-white);
        line-height: 150%;
        font-weight: normal;
        font-size: 32px;
        font-family: var(--hind-vadodara);
    }
    .list {
        position: relative;
        height: 207px;
        display: flex;
        align-items: center;
    }
    .list-left-btn, .list-right-btn {
        position: absolute;
        z-index: 10;
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .list-left-btn {
        top: 82px;
        left: 2px;
    }
    .list-right-btn {
        top: 82px;
        right: 12px;
    }
    .list-left-btn:hover, .list-right-btn:hover {
        background-color: rgba(217, 217, 217, 0.3);
    }
    .list-element-container {
        display: flex;
        height: 207px;
        width: calc(100% - 65px);
        margin: 0 38px 0 27px;
        align-items: center;
        gap: 8px;
        overflow: hidden;
    }
    .list-element {
        height: 180px;
        width: 240px;
        display: flex;
        justify-content: flex-end;
        flex-shrink: 0;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #161616;
        position: relative; /* Positioning context for pseudo-element */
        transition: transform 0.3s ease; /* Smooth transition for transform and shadow */
    }

    .list-element::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px;
        border: 3px solid rgba(255, 255, 255, 0.4);
        opacity: 0;
        pointer-events: none; /* Ensures pseudo-element doesn't interfere with hover state */
        box-sizing: border-box; /* Include border in size */
        transition: opacity 0.3s ease; /* Smooth transition for opacity */
    }

    .list-element:hover {
        transform: translateY(-10px); /* Move element up by 10px */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Optional: add a shadow to enhance the effect */
    }

    .list-element:hover::after {
        opacity: 1; /* Show border on hover */
    }
    .list-element button {
        height: 40px;
        width: 40px;
        margin: 7px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 0;
        background-color: transparent;
    }
    .list-element button:hover {
        height: 40px;
        width: 40px;
        border-radius: 16px;
        border: 0;
        background-color: rgba(217, 217, 217, 0.4);
    }

    /* STUDIO ORDERS */
    #studio-orders {
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-row-gap: 24px;
    }
    .personal-oders-header {
        display: flex;
        height: 50px;
        grid-column: 1 / 4;
    }
    .dashboard-bar-search {
        height: 50px;
        width: 500px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .bar-input {
        color: var(--color-white);
        width: 100%;
        border: 0;
        background-color: transparent;
    }
    .bar-input:focus {
        outline: none;
    }
    .order-table {
        width: 100%;
        grid-column: 1 / 4;
        border-collapse: collapse;
    }
    .order-table th {
        color: var(--color-white);
        height: 50px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        background-color: rgba(255, 255, 255, 0.05);
    }

    .order-table td {
        color: var(--color-white);
        height: 50px;
        text-align: center;
        padding: 10px;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Elválasztó vonal minden sor alatt */
    }
    .product-preview {
        height: 40px;
        width: 40px;
        margin: auto;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .processing {
        height: 40px;
        width: fit-content;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        border: 1px solid rgba(110, 231, 183, 1);
        background-color: rgba(209, 250, 229, 1);
    }
    .processing p {
        color: rgba(6, 95, 70, 1);
        margin: 10px 10px;
    }
    .processing img  {
        margin-left: 10px;
    }
    .shipping-service {
        display: flex;
        justify-content: center;
    }
    .shipping-service .service-icon {
        height: 40px;
        max-width: 100px;
        min-width: 40px;
        padding: 2px 8px;
        border-radius: 16px;
        background-color: azure;
    }
    .more-detail {
        position: relative;
        height: 40px;
        width: 40px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .more-detail img {
        height: 24px;
        width: 24px;
    }

    /* STUDIO AUCTION */
    .studio-auction-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }
    .studio-auction-header {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .auction-stat {
        height: 30px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .auction-stat div {
        height: 12px;
        width: 12px;
        margin: 9px;
        border-radius: 100%;
    }
    .auction-stat p {
        color: var(--color-white);
        margin: 3px 9px 3px 0;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .studio-auction-body {
        display: flex;
        flex-direction: column;
    }
        /* studio auction item */
    .studio-auction-item {
        width: 735px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 21px;
        border-radius: 16px;
        background-color: rgba(22, 22, 22, 1);
    }
    .studio-auction-item-container {
        margin: 10px;
        display: flex;
    }
    .studio-auction-item-img {
        height: 180px;
        width: 220px;
        margin-right: 5px;
        display: flex;
        cursor: pointer;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .studio-auction-item-status {
        height: 12px;
        width: 12px;
        margin: 9px;
        border-radius: 100%;
    }
    .studio-auction-item-content {
        display: flex;
        flex-direction: column;
    }
    .studio-auction-item-header {
        height: 50px;
        width: 487px;
        margin-bottom: 9px;
        display: flex;
    }
    .studio-auction-name {
        height: 50px;
        width: 428px;
        display: flex;
        align-items: center;
        margin-right: auto;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .studio-auction-name h1 {
        color: var(--color-white);
        margin-left: 8px;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .studio-auction-item-header button {
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .studio-auction-item-detail {
        display: flex;
        align-items: center;
        height: 121px;
        width: 487px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.02);
    }
    .auction-item-detail-grid {
        width: calc(100% - 10px);
        margin-left: 10px;
        display: grid;
        grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    }
    .studio-auction-item-detail h2 {
        color: rgba(119, 119, 119, 1);
        margin: 0;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .studio-auction-item-detail p {
        color: var(--color-white);
        margin: 0;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    /* STUDIO SOCIAL */

    /* STUDIO EVENTS */
    /* Studio event container */
    .studio-event-container {
        display: none;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }
    .studio-event-container.active {
        display: flex;
    }
    .studio-event-header {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .event-stat {
        height: 30px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .event-stat div {
        height: 12px;
        width: 12px;
        margin: 9px;
        border-radius: 100%;
    }
    .event-stat p {
        color: var(--color-white);
        margin: 3px 9px 3px 0;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .studio-event-body {
        display: flex;
        flex-direction: column;
    }
    .studio-event-online {
        display: flex;
        flex-direction: column;
        margin-bottom: 90px;
    }
    .studio-event-drafts {
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
        /* studio event item */
    .studio-event-item {
        width: 846px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 21px;
        border-radius: 16px;
        background-color: rgba(22, 22, 22, 1);
    }
    .studio-event-item-container {
        margin: 10px;
        display: flex;
    }
    .studio-event-item-img {
        height: 180px;
        width: 220px;
        margin-right: 5px;
        display: flex;
        cursor: pointer;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .studio-event-item-status {
        height: 12px;
        width: 12px;
        margin: 9px;
        border-radius: 100%;
    }
    .studio-event-item-content {
        display: flex;
        flex-direction: column;
    }
    .studio-event-item-header {
        height: 50px;
        width: 601px;
        gap: 7px;
        margin-bottom: 9px;
        display: flex;
    }
    .studio-event-name {
        height: 50px;
        width: 433px;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .studio-event-name h1 {
        color: var(--color-white);
        margin-left: 8px;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .studio-event-item-header button {
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    #delete-event:hover {
        background-color: rgba(255, 0, 0, 0.49);
    }
    .event-item-detail-grid {
        height: 121px;
        width: 100%;
        display: grid;
        grid-template-columns: 343px 1fr;
        grid-gap: 9px;
    }
    .studio-event-item-detail {
        height: 100%;
        width: 100%;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.02);
    }
    .studio-event-item-detail p {
        color: rgba(119, 119, 119, 1);
        margin: 10px;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }
    .event-item-date-container {
        height: 100%;
        width: 100%;
        display: grid;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.02);
    }
    .studio-event-item-dates {
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .studio-event-item-dates h2 {
        color: rgba(119, 119, 119, 1);
        margin: 0;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .studio-event-item-dates p {
        color: var(--color-white);
        margin: 0;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .event-item-text-container {
        display: flex;
    }
    .event-item-date-container {
        display: flex;
    }
        /* Studio event container2 (calendar) */
    .calendar-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 7fr 3fr;
        grid-column-gap: 20px;
    }
        /* calendar content */
    .calendar-content {
        width: 100%;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }
    .studio-event-calendar-header {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .studio-event-calendar-header .sort-by-btn {
        height: 42px !important;
        margin-left: 4px !important;
    }
    .dash-gird-selector {
        display: flex;
        margin-left: auto;
        margin-right: 4px;
        border-radius: 16px;
        background-color: rgba(217, 217, 217, 0.1);
    }
    .dash-grid-btn {
        height: 42px;
        width: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }
    .dash-grid-btn:focus {
        background-color: rgba(10, 9, 9, 0.49);
    }
    .calendar-event-body {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
        /* calendar-event-item */
    .calendar-event-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 21px;
        border-radius: 16px;
        background-color: rgba(22, 22, 22, 1);
    }
    .calendar-event-item-container {
        width: 100%;
        margin: 10px;
        display: flex;
    }
    .calendar-event-item-img {
        height: 180px;
        width: 220px;
        margin-right: 5px;
        display: flex;
        cursor: pointer;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .calendar-event-item-content {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .calendar-event-item-header {
        height: 50px;
        width: 100%;
        gap: 7px;
        margin-bottom: 9px;
        display: flex;
    }
    .calendar-event-name {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .calendar-event-name h1 {
        color: var(--color-white);
        margin-left: 8px;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--hind-vadodara-big-size);
        font-family: var(--hind-vadodara);
    }
    .calendar-event-item-header button {
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .event-item-detail-grid {
        height: 121px;
        width: 100%;
        display: grid;
        grid-template-columns: 343px 1fr;
        grid-gap: 9px;
    }
    .calendar-event-item-detail {
        height: 100%;
        width: 100%;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.02);
    }
    .calendar-event-item-detail p {
        color: rgba(119, 119, 119, 1);
        margin: 10px;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-tinier-size);
        font-family: var(--inter);
    }
    .calendar-event-item-dates {
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .calendar-event-item-dates h2 {
        color: rgba(119, 119, 119, 1);
        margin: 0;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .calendar-event-item-dates p {
        color: var(--color-white);
        margin: 0;
        padding: 0;
        line-height: 150%;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .event-item-text-container {
        width: 100%;
        display: flex;
    }
    .event-item-date-container {
        display: flex;
    }

        /* calendar */
    .calendar-item {
        width: 100%;
    }
    .calendar-item-header {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .calendar-item-header button {
        height: 30px;
        width: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background-color: transparent;
    }

    .calendar-item-header h1 {
        color: var(--color-white);
        margin: 4px;
        font-weight: 500;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .calendar-item-body {
        display: grid;
        grid-template: repeat(8, 1fr) / repeat(7, 1fr);
    }
    .calendar-item-body-days {
        grid-column: 1 / 8;
        grid-row: 1 / 1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    }
    .calendar-item-body button {
        color: rgba(224, 224, 224, 1);
        height: 100%;
        width: 100%;
        cursor: pointer;
        aspect-ratio: 1 / 1;
        border: 0;
        border-radius: 16px;
        font-weight: 500;
        font-size: 18px;
        font-family: var(--inter);
        background-color: transparent;
    }
    .calendar-item-body button:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .calendar-item-body button:focus {
        border: 1px solid rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, 0.05);
    }
    .calendar-item-body .holiday {
        color: red;
    }

    /* STUDIO STATS */
    .studio-stats-chart-container {
        width: calc(100% - 38px);
        margin: 0 38px 0 10px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }
    .chart-item {
        height: 300px;
        width: 100%;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.22);
    }
    #sales-overview2 {
        grid-column: 1 / 3;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
    }
    .chart-container2 {
        height: 445px;
        width: 300px;
        padding: 20px;
        border-radius: 10px;
    }

    .chart-container2 h2 {
        font-size: 18px;
        margin-bottom: 10px;
        text-align: center;
    }

    .chart-container2 canvas {
        background-color: #fff;
        border-radius: 10px;
    }

    /* STUDIO AFFILIATE */
    .studio-affiliate-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: calc(100% - 48px);
        margin: 0 38px 0 10px;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }
    .affiliate-banner {
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .studio-affiliate-container h1 {
        color: var(--color-white);
        margin: 38px 0;
        font-weight: normal;
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    .affiliate-score {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1);
    }
    .affiliate-score p {
        color: rgba(255, 255, 255, 0.7);
        margin: 0 50px;
        font-size: var(--inter-huge-size);
        font-family: var(--inter);
    }
    .affiliate-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-column-gap: 30px;
    }
    .affiliate-detail h2 {
        margin: 0;
        margin-top: 25px;
        color: var(--color-white);
        font-weight: normal;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
    }
    .affiliate-detail p {
        color: var(--color-white);
        margin-top: 15px;
        margin-bottom: 50px;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .affiliate-leaderboard {
        height: 500px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 25px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .affiliate-leaderboard h1 {
        color: var(--color-white);
        margin: 15px;
        padding: 0;
        font-weight: normal;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .leaderboard-table {
        width: calc(100% - 20px);
        margin: 10px;
    }
    .leaderboard-table th {
        color: var(--color-white);
        height: 25px;
        font-weight: normal;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
        background-color: rgba(255, 255, 255, 0.05);
    }
    .leaderboard-table td {
        border-collapse: separate;
        border-spacing: 10px 20px;
    }
    .leaderboard-table td p {
        color: var(--color-white);
        margin: 0 10px;
        display: flex;
        justify-content: center;
        font-weight: normal;
        font-size: var(--inter-small-size);
        font-family: var(--inter);
    }
    .affiliate-video-embed {
        height: 400px;
        width: 700px;
        border-radius: 16px;
        background-color: #423C3C;
    }

/* INFO-11 <<@------------------------ Item page ------------------------@>>*/

    /* content */
    .content {
        display: grid;
        width: calc(100% - 76px);
        margin: 0 38px;
        grid-template-columns: 1fr 2fr;
        grid-column-gap: 20px;
    }
    .item-side, .user-side {
        display: flex;
        width: 100%;
        flex-direction: column;
        row-gap: 10px;
    }
    .container {
        width: 100%;
        border-radius: 16px;
        background-color: rgb(29, 29, 29);
    }
    .c-header {
        height: 50px;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .c-header img {
        margin-left: 10px;
    }
    .c-header h1 {
        color: var(--color-white);
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .c-body {
        width: calc(100% - 10px);
        margin: 0 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .c-body p {
        color: var(--color-white);
        margin: 15px 0;
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    /* item side */
    .item-image {
        position: relative;
        aspect-ratio: 1/1;
    }
    .item-image-img {
        height: 100%;
        width: 100%;
        border-radius: 16px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .img-bar {
        opacity: 0;
        position: absolute;
        display: flex;
        visibility: hidden;
        justify-content: flex-end;
        gap: 3px;
        bottom: 10px;
        height: 75px;
        width: calc(100% - 20px);
        margin: 0 10px;
        transition: opacity 1s ease, visibility 1s ease;
        /* background-color: #2196F3; */
    }
    .item-image:hover .img-bar {
        opacity: 1;
        visibility: visible;
    }
    .img-bar div {
        height: 100%;
        width: 100px;
        cursor: pointer;
        border-radius: 16px;
        background-color: #423C3C;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* .description {

    }
    .tags {

    } */
    .tag-container {
        height: 36px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .tag {
        height: 25px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 16px;
        background-color: rgba(64, 57, 57, 0.5);
    }
    .tag-txt {
        color: var(--color-white);
    }
    .tag-icon {
        height: 13px;
        width: 13px;
    }
    /* .colors {

    } */
    .color-container {
        margin: 10px 0;
        gap: 2px;
        display: flex;
        flex-wrap: wrap;
    }

    /* user-side */
    .names {
        margin-bottom: 50px;
    }
    .names h1 {
        color: var(--color-white);
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
        font-weight: 500;
        font-size: var(--inter-big-size);
        font-family: var(--inter);
    }
    .collection-name, .item-name {
        display: flex;
        gap: 5px;
    }
    .item-name img {
        position: relative;
        top: 3px;
        height: 24px;
        width: 24px;
    }
    .collection-name img {
        position: relative;
        top: 3px;
        height: 16px;
        width: 16px;
    }
    .names h2 {
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
        cursor: pointer;
    }
    .names h2:hover {
        color: rgba(255, 255, 255, 0.7);
    }
    .star-container {
        display: flex;
        margin-top: 10px;
    }
    .item-star {
        height: 20px;
        width: 20px;
    }
    .buy {
        display: flex;
        flex-direction: column;
    }
    .buy .c-body {
        flex-direction: column;
        align-items: flex-start;
    }
    .item-price-container p {
        color: rgba(255, 255, 255, 0.5);
        font-weight: normal;
        font-size: var(--inter-bs-size);
        font-family: var(--inter);
    }
    .price {
        color: var(--color-white) !important;
        font-weight: 500 !important;
        font-size: var(--inter-very-big-size) !important;
        font-family: var(--inter) !important;
    }
    .buy-metholds {
        display: flex;
        gap: 10px;
    }
    .buy-now-btn {
        color: var(--color-white);
        height: 50px;
        width: 250px;
        margin-bottom: 10px;
        font-weight: 500;
        font-size: var(--inter-mid-size);
        font-family: var(--inter);
        border-radius: 16px;
        border: 0;
        cursor: pointer;
        background-color: rgba(0, 117, 255, 1);
    }
    .cart-btn {
        color: var(--color-white);
        height: 50px;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 0;
        border-radius: 16px;
        background-color: rgba(0, 117, 255, 1);
    }
    .cart-btn:hover, .buy-now-btn:hover {
        background-color: rgb(54, 148, 255);
    }
    .cart-btn img {
        height: 24px;
        width: 24px;
    }
    .price-history {
        display: flex;
        flex-direction: column;
    }
    .chart-container {
        height: 200px;
        width: 80%;
    }
    .item-comments {
        display: flex;
        flex-direction: column;
    }