@font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            src: url('/static/images/Roboto.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            font-display: swap;
        }

        @font-face {
            font-family: 'Roboto';
            src: url('/static/images/Roboto-Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            font-display: swap;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0px;
            position: relative;
            min-height: 100%;
            top: 0px;
            background-color: #f9f9ff;
            font-size: 12px;
            font-family: 'Roboto', sans-serif;
        }

        a {
            text-decoration: none;
            color: black;
        }

        textarea:focus,
        input:focus,
        select:focus {
            outline: none;
        }

        @supports (-webkit-hyphens:none) {

            input,
            select {
                -webkit-appearance: none;
            }

            select {
                background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
                appearance: none;
                padding: 5px;
                padding-left: 10px;
                padding-right: 25px !important;
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            all: unset;
            display: flex;
            margin-block-start: initial;
            margin-block-end: initial;
            margin-inline-start: initial;
            margin-inline-end: initial;
        }

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

        .flex-column {
            display: flex;
            flex-direction: column;
        }

        .text-danger {
            color: #dc3545;
        }

        .bg-danger {
            background-color: #dc3545;
        }

        .bg-success {
            background-color: #589c40;
        }

        .shadowBox {
            box-shadow: 0 0 6px 0 #cecece;
            background-color: #fff;
            color: #444;
        }

        .borderBox {
            border: 1px solid #cecece;
            background-color: #fff;
            color: #444;
        }

        .border {
            border: 1px solid #cecece;
        }

        .spin {
            animation: spin 0.5s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @font-face {
            font-family: 'FontAwesome';
            src: url('https://sarkaelektronik.com.tr/Public/standart/web/dist/v2/css/fonts/FontAwesome.eot?obrjhp');
            src: url('https://sarkaelektronik.com.tr/Public/standart/web/dist/v2/css/fonts/FontAwesome.eot?obrjhp#iefix') format('embedded-opentype'), url('/static/images/FontAwesome.ttf?obrjhp') format('truetype'), url('/static/images/FontAwesome.woff') format('woff'), url('/static/images/FontAwesome.svg?obrjhp#FontAwesome') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        [class^="fa-"],
        [class*=" fa-"] {
            /* use !important to prevent issues with browser extensions that change fonts */
            font-family: 'FontAwesome' !important;
            speak: never;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .fa-bell:before {
            content: "\f0f3";
        }

        .fa-commenting:before {
            content: "\f4a3";
        }

        .fa-exclamation-circle:before {
            content: "\f06a";
        }

        .fa-info-circle:before {
            content: "\f05a";
        }

        .fa-user-circle:before {
            content: "\f2bd";
        }

        .fa-user-shield:before {
            content: "\f505";
        }

        .fa-power-off:before {
            content: "\e91b";
        }

        .fa-plus:before {
            content: "\e91c";
        }

        .fa-list:before {
            content: "\e91a";
        }

        .fa-history:before {
            content: "\e919";
        }

        .fa-coins:before {
            content: "\e918";
        }

        .fa-phone:before {
            content: "\e914";
        }

        .fa-chevron-down:before {
            content: "\e913";
        }

        .fa-thumbs-down:before {
            content: "\e912";
        }

        .fa-thumbs-up:before {
            content: "\e911";
        }

        .fa-twitch:before {
            content: "\e910";
        }

        .fa-youtube:before {
            content: "\e90e";
        }

        .fa-rss:before {
            content: "\e90f";
        }

        .fa-trash:before {
            content: "\e90d";
        }

        .fa-envelope:before {
            content: "\e90c";
        }

        .fa-question-circle:before {
            content: "\e900";
        }

        .fa-shopping-cart:before {
            content: "\e902";
        }

        .fa-cart-plus:before {
            content: "\e903";
        }

        .fa-info:before {
            content: "\e904";
        }

        .fa-chevron-right:before {
            content: "\e905";
        }

        .fa-home:before {
            content: "\e906";
        }

        .fa-gamepad:before {
            content: "\e907";
        }

        .fa-cubes:before {
            content: "\e908";
        }

        .fa-gavel:before {
            content: "\e909";
        }

        .fa-search:before {
            content: "\e90a";
        }

        .fa-bars:before {
            content: "\e90b";
        }

        .fa-star-o:before {
            content: "\e901";
        }

        .fa-clipboard:before {
            content: "\e9b8";
        }

        .fa-arrow-down:before {
            content: "\ea3e";
        }

        h2 {
            display: none;
        }

        h3 {
            display: none;
        }

        .mainContainer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .headerNavigationMenu {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px
        }

        .headerNavigationMenu .headerContentBox {
            text-decoration: none;
            position: relative;
            height: 47px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 2px;
            border-radius: 6px;
            flex: 1 1 0;
        }

        .headerContentBox .imgBox {
            position: relative;
            width: 30px;
            height: 34px;
            margin-left: 2px
        }

        .headerContentBox .imgBox img {
            width: 30px;
            height: 30px;
            position: absolute
        }

        @media (hover:hover) and (pointer:fine) and (min-width:1024px) {
            .headerContentBox .imgBox img:first-child {
                left: 0;
                transform: scale(1)
            }

            .headerContentBox .imgBox img:nth-child(2) {
                left: -30px;
                transform: scale(.4);
                opacity: 0
            }
        }

        .headerContentBox .rightBox {
            height: 32px;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 4px;
            transform: translateY(2px)
        }

        .headerContentBox .rightBox .subTitle,
        .headerContentBox .rightBox .title {
            font-size: 12px
        }

        .headerContentBox .rightBox .title {
            font-weight: 500
        }

        @media screen and (min-width:1024px) and (max-width:1540px) {
            .headerNavigationMenu {
                padding: 6px
            }
        }

        @media screen and (max-width:1352px) {
            .headerNavigationMenu .headerContentBox {
                min-width: 146px
            }
        }

        @media screen and (max-width:425px) {
            .headerNavigationMenu .headerContentBox {
                height: 40px
            }
        }

        .footerMainContainer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 4px;
            margin-top: 24px
        }

        .footerContainer {
            display: flex;
            flex-direction: column;
            align-items: start;
            overflow: hidden
        }

        @media screen and (max-width:790px) {
            .stickyFooterNavigation {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 78px;
                display: flex;
                align-items: center;
                gap: 12px;
                justify-content: space-between;
                z-index: 10;
                padding: 4px 6px;
                overflow: hidden
            }
        }

        .mainHeroSwiperContainer {
            display: flex;
            align-items: start;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
        }

        .mainBoxHeroSwiper .swiper-slide:first-child {
            position: relative;
            opacity: 1;
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            transform: scale(1);
            transition: none
        }

        .leftSwiperContainer,
        .mainSwiperContainer,
        .rightSwiperSlideContainer {
            margin-left: auto;
            margin-right: auto;
            position: relative;
            padding: 0;
            display: block;
            width: 100%;
            height: 100%
        }

        .leftSwiperContainer,
        .mainBoxHeroSwiper .swiper-wrapper,
        .rightSwiperSlideContainer .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            box-sizing: content-box
        }

        .rightSwiperSlideContainer .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
            display: block
        }

        @media screen and (max-width:768px) {
            .mainBoxHeroSwiper .mainSwiperContainer {
                height: 100%
            }
        }

        #darkness {
            background-color: #00000080;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            z-index: 2;
        }

        body>.skiptranslate {
            display: none !important;
        }

        body {
            top: 0px !important;
        }

        #alert {
            color: #fff;
            top: 30px;
            right: 20px;
            padding: 15px 50px;
            position: fixed;
            z-index: 99;
            max-width: 50%;
            overflow-wrap: break-word;
            border-radius: 4px;
            display: none
        }

        #appDownload {
            display: none;
        }

        .topContainer {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0px !important;
            min-height: 42px;
        }

        .topBox {
            display: flex;
            align-items: center;
            border: 1px solid #ced4da;
            font-size: 10px;
            padding: 5px 6px 5px 1px;
            color: #5c5c5c;
            text-align: center;
            border-radius: 3px;
            background-color: #ffffff;
        }

        .midContainer {
            padding: 10px 10px 0px 10px;
            box-shadow: 0 2px 3px 0 rgb(0 0 0 / 16%);
            background-color: #ffffff;
        }

        .midBottomContainer {
            height: 45px;
        }

        .midBottom {
            height: 45px;
            width: 100%;
            position: relative;
            align-items: stretch;
        }

        .badge {
            position: absolute;
            right: -10px;
            top: -5px;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 1.1;
            color: #fff;
            border-radius: 50%;
            border: 1px solid #fff;
            padding: 2px;
            font-size: 10px;
            font-weight: 500;
            width: 15px;
            height: 15px;
            background-color: #ff9100;
            z-index: 1;
        }

        .searchBoxContainer {
            height: 46px;
            align-items: stretch;
            margin-top: 20px;
            margin-bottom: 10px;
            position: relative;
        }

        .searchBox {
            border-radius: 0px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
        }

        #searchBoxResults {
            position: absolute;
            top: 46px;
            left: 0px;
            right: 0px;
            height: 400px;
            border: 1px solid #ddd;
            background-color: #fafafa;
            z-index: 2;
            display: none;
        }

        #searchBoxResultsList {
            padding: 10px 0px 10px 0px;
            flex-grow: 1;
            overflow: auto;
        }

        #searchBoxResultsList a {
            padding: 10px 15px 10px 15px;
            background-color: #f4f4f4;
            margin-bottom: 5px;
            font-size: 13px;
            overflow-wrap: break-word;
        }

        #searchBoxResultsList>a>span:last-child {
            color: #55378D;
        }

        .button {
            all: unset;
            flex-grow: 1;
            height: 45px;
            background-color: #ff8d14;
            color: #ffffff;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            cursor: pointer;
        }

        .menuHolder {
            position: relative;
        }

        .basketMenu {
            position: absolute;
            top: 25px;
            right: -10px;
            width: 240px;
            padding: 10px;
            background-color: #fff;
            border-radius: 10px;
            display: none;
            z-index: 3;
        }

        .basketMenu:before {
            content: '';
            position: absolute;
            right: 1%;
            display: block;
            height: 10px;
            top: -16px;
            border-style: solid;
            border-width: 0 15px 15px 15px;
            border-color: transparent transparent #fff transparent;
        }

        .basketInnerDesc {
            align-self: stretch;
            justify-content: space-between;
            margin-left: 5px;
            margin-right: auto;
        }

        .guestMenu {
            padding-bottom: 10px;
            border-bottom: 1px solid #bbbbbb;
        }

        .userMenu {
            border-bottom: 1px solid #dddddd;
            justify-content: flex-start;
            padding: 10px 0px;
            position: relative;
        }

        .userMenuItem {
            align-items: stretch;
            border: 1px solid #dddddd;
            padding: 5px 12px 5px 12px;
            border-radius: 8px;
        }

        .userMenuProfile {
            margin-left: auto;
            margin-right: 10px;
            font-size: 14px;
            color: #707070;
            display: flex;
            align-items: center;
            align-self: stretch;
        }

        .userModal {
            position: absolute;
            top: 45px;
            right: 10px;
            background-color: #fff;
            width: 80%;
            z-index: 3;
            padding-bottom: 15px;
            border-radius: 7px;
            display: none;
        }

        .userModal:before {
            content: '';
            position: absolute;
            right: 10%;
            display: block;
            height: 10px;
            top: -20px;
            border-style: solid;
            border-width: 0 15px 15px 15px;
            border-color: transparent transparent #fff transparent;
        }

        .userModal>a {
            height: 40px;
            display: flex;
            align-items: center;
            margin: 0px 20px 0px 20px;
            padding-left: 20px;
        }

        .userModal>a:nth-child(odd) {
            background-color: #fff;
        }

        .userModal>a:nth-child(even) {
            background-color: #f5f5f5;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .userModalBalance {
            align-items: stretch;
            background-color: #f3ffef;
            margin: 15px 0px 15px 0px;
            padding: 20px 15px 20px 15px;
        }

        .userModalBalanceButton {
            display: flex;
            align-items: center;
            background-color: #589c40;
            height: 35px;
            flex-grow: 0;
            padding: 0px 10px 0px 10px;
            align-self: center;
        }

        .midMenuItem {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            margin-right: 20px;
            text-decoration: none;
        }

        .midMenuItem i {
            margin-top: 3px;
        }

        .midMenuItem .fa-gamepad {
            margin-top: 2px;
        }

        .midMenuItem span {
            margin-left: 3px;
        }

        .gameMenu {
            text-decoration: none;
            flex-grow: 1;
            display: flex;
            justify-content: center;
        }

        .basketIcon {
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: relative;
        }

        #leftMenuClose {
            cursor: pointer;
        }

        #leftGameMenu {
            background-color: #fafafa;
            position: fixed;
            width: 80%;
            max-width: 300px;
            height: 100%;
            z-index: 2;
            display: none;
        }

        #leftGameMenu a {
            padding-left: 10px;
            font-size: 13px;
            font-weight: bold;
            color: #333333;
            border-bottom: 1px solid #ddd;
            line-height: 30px;
        }

        .gameMenuHeader {
            padding: 10px 20px 10px 20px;
            background-color: #15284b;
            color: #fff;
            font-size: 14px;
        }

        #gameMenuSearch {
            padding: 10px;
            margin: 10px;
            border: 1px solid #ddd;
        }

        #gameMenuList {
            overflow: auto;
        }

        .desktop {
            display: none !important;
        }

        .btnSearch {
            background-color: #707070;
            padding-left: 15px;
            padding-right: 15px;
        }

        .searchArrow {
            position: absolute;
            left: 113px;
            top: 18px;
            font-size: 10px;
        }

        .canliDestekImg {
            position: fixed;
            right: 0;
            bottom: 0;
            z-index: 9
        }

        #FixedLogo {
            display: none;
            align-self: center;
            margin: 0px 10px;
        }

        .midBottomList::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #F5F5F5;
            border-radius: 5px;
        }

        .midBottomList::-webkit-scrollbar {
            height: 5px;
            background-color: #F5F5F5;
        }

        .midBottomList::-webkit-scrollbar-thumb {
            background-color: #777;
            border: 2px solid #888;
            border-radius: 5px;
        }

        #mobileFixed {
            height: 50px;
            background-color: #fff;
            position: fixed;
            z-index: 9;
            bottom: 0px;
            right: 0px;
            left: 0px;
            border-top: 1px solid #ddd;
            box-shadow: 0 2px 3px 0 rgb(0 0 0 / 16%);
            justify-content: space-around;
            align-items: flex-end;
        }

        .container {
            margin: 0px 10px;
        }

        @media (max-width:1024px) and (min-width:800px) {
            select.searchBox {
                padding: 0px 20px 0px 10px;
            }

            .searchArrow {
                left: 63px;
            }
        }

        @media only screen and (min-width: 1550px) {
            .container {
                max-width: 1534px;
                padding: 0px;
                margin: auto;
            }
        }

        @media only screen and (min-width: 800px) {
            .topContainer {
                min-height: unset;
            }

            form {
                margin-block-end: 0px;
            }

            .mobile {
                display: none !important;
            }

            .desktop {
                display: flex !important;
                align-items: center;
            }

            select.topBox {
                margin-left: auto;
                margin-right: 20px;
            }

            .basketIcon {
                flex-grow: 0;
                margin-right: 25px;
                margin-left: 5px;
                cursor: pointer;
            }

            .gameMenu {
                flex-grow: 0;
            }

            #logoImg {
                width: 217px;
                height: 46px;
            }

            .midTop {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-self: center;
                align-items: center;
                width: 100%;
                padding: 5px 0px 15px 0px;
            }

            .gButton {
                padding: 0px 20px 0px 20px;
                background-color: #fff !important;
                color: #333;
                border: 1px solid #d9d9d9;
                height: 40px;
                white-space: nowrap;
            }

            .userModalBalance {
                padding: 20px;
            }

            .basketMenu {
                top: 15px;
                width: 250px;
            }

            .guestMenu {
                padding-bottom: 0px;
                border-bottom: 0px;
            }

            .searchBoxContainer {
                margin-top: 0px;
                margin-bottom: 0px;
                flex-grow: 1;
                max-width: 600px;
                margin-left: 20px;
            }

            select.searchBox {
                font-size: 12px;
                -webkit-appearance: none;
                -moz-appearance: none;
            }

            .rLink {
                margin-top: 5px;
            }

            .midMenuItem {
                font-size: 13px;
                margin-right: 30px;
            }

            .midMenuItem:first-child {
                margin-left: 50px;
            }

            .midBakiye {
                position: absolute;
                right: 0px;
            }

            .btnSearch {
                padding: 0 10px;
                background-color: transparent;
                font-size: 20px;
                color: #707070;
                height: 46px !important;
                border-radius: 0;
                border: none;
                border-width: 1px 1px 1px 0px;
                border-color: #ccc;
                border-style: solid;
                padding-top: 10px;
                cursor: pointer;
            }

            .btnSearch>i {
                color: #666 !important;
            }

            .userMenu {
                border-bottom: 0px;
            }

            .userModal {
                width: 300px;
            }

            .userMenuProfile {
                font-size: 16px;
                border-left: 1px solid #aaaaaa;
                align-self: stretch;
                padding-left: 15px;
                cursor: pointer;
            }

            .userMenuItem {
                border: 0px;
                cursor: pointer;
            }

            .fixedHeader {
                position: fixed;
                display: none;
                width: 100%;
                background-color: #fff;
                box-shadow: 0 2px 3px 0 rgb(0 0 0 / 16%);
                z-index: 3;
            }

            .fixedHeader .gameMenu {
                display: none !important;
            }

            .fixedHeader #FixedLogo {
                display: block;
            }

            .fixedHeader .midMenuItem {
                font-size: 12px;
                margin-right: 25px;
            }

            .fixedHeader .userMenuProfile {
                font-size: 13px !important;
            }

            .fixedHeader .fa-commenting,
            .fixedHeader .fa-bell {
                font-size: 14px !important;
            }

            .fixedHeader .fa-shopping-cart {
                font-size: 22px !important;
            }
        }

        #signalNotification {
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            display: flex;
            z-index: 9;
            display: none;
        }

        #signalNotification .fa-bell {
            border-radius: 50%;
            font-size: 30px;
            text-align: center;
            background-color: #5d83ca;
            padding: 12px 10px;
            color: #fff;
            align-self: flex-start;
        }

        .signalContainer {
            width: calc(100vw - 20px);
            max-width: 460px;
            margin: auto;
            background-color: #fff;
            padding: 30px 25px 20px 10px;
            border: 5px solid #bbb;
            position: relative;
        }

        #signalClose {
            font-weight: bold;
            font-size: 18px;
            position: absolute;
            right: 3px;
            top: 3px;
            padding: 5px 10px;
            background-color: #909090;
            color: #fff;
            border: 2px solid #fff;
            cursor: pointer;
        }

        .signalHeader {
            font-size: 14px;
            color: #5d83ca;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .signalBody {
            font-size: 12px;
            color: #333;
            line-height: 14px;
            margin-bottom: 10px;
        }

        #signalNotification .button {
            height: 37px;
            border-radius: 0px;
            flex-grow: 0;
            width: 45%;
        }

        @media only screen and (min-width: 800px) {
            #signalNotification {
                top: 60px;
            }

            #signalNotification .fa-bell {
                font-size: 50px;
                padding: 20px 15px;
            }

            .signalHeader {
                font-size: 19px;
                margin-bottom: 15px;
            }

            .signalBody {
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 10px;
            }

            #signalClose {
                right: -18px;
                top: -18px;
                border-radius: 50%;
            }

            #signalNotification .button {
                width: 40%;
            }
        }

        .cookieNotify {
            background-color: rgba(27, 27, 27, .90);
            color: #fff;
            position: fixed;
            bottom: 20px;
            left: 20px;
            border-radius: 10px;
            padding: 20px;
            max-width: 320px;
            line-height: 16px;
            z-index: 9;
        }

        .cookieNotifyClose {
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 18px;
            cursor: pointer;
            color: #AAA;
        }

        @media only screen and (max-width: 800px) {
            .cookieNotify {
                left: 10px;
                right: 10px;
                bottom: 55px;
                max-width: unset;
            }
        }

        .headerBar {
            background-color: #ffffff;
            /* black */
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .headerBarMid {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            justify-content: center;
            height: 50px;
            display: block;
        }

        .headerBarMid>img {
            transition: 0.5s linear;
        }

        @media only screen and (min-width: 800px) and (max-width: 1440px) {
            .headerBarRight {
                display: none !important;
            }

            .headerBarMid {
                left: unset;
                right: -80px;
            }
        }

        @media only screen and (max-width: 800px) {
            .headerBar {
                justify-content: center;
            }

            .headerBarMid {
                position: unset;
            }

            .headerBarMid>img {
                width: 100%;
            }

            .headerBarRight,
            .headerBarLeft {
                display: none;
            }

            .headerBarMid>img {
                margin-top: 10px;
            }
        }

        /* ═══ BreadCrumb ═══ */
        .breadCrumbContainer {
            justify-content: flex-start;
            margin-top: 20px;
            margin-bottom: 20px;
            position: relative;
        }

        .breadCrumbItem {
            margin-left: 15px;
        }

        .breadCrumbModal {
            position: absolute;
            border: 1px solid #666;
            background-color: #fdfdfd;
            padding: 10px 20px 20px 20px;
            top: 20px;
            left: 10px;
            right: 10px;
            z-index: 2;
            display: none;
        }

        .breadCrumbModalItem {
            line-height: 30px;
            font-size: 14px;
            align-self: baseline;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .breadCrumbModal .breadCrumbModalItem:nth-child(2) { margin-left: 5%; }
        .breadCrumbModal .breadCrumbModalItem:nth-child(3) { margin-left: 10%; }
        .breadCrumbModal .breadCrumbModalItem:nth-child(4) { margin-left: 15%; }
        .breadCrumbModal .breadCrumbModalItem:nth-child(5) { margin-left: 20%; }

        @media only screen and (min-width: 800px) {
            .breadCrumbContainer .fa-chevron-right {
                margin-right: 10px;
                margin-top: 2px;
            }

            .breadCrumbContainer {
                margin-top: 10px;
                margin-bottom: 10px;
            }

            .breadCrumbModalItem {
                font-size: 12px;
            }
        }

        /* ═══ Shared ═══ */
        .sBox {
            box-shadow: 0 0 6px 0 #cecece;
            background-color: #fff;
        }

        /* ═══ Category Page ═══ */
        .catContainer {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .catLeft {
            flex: 1;
            min-height: 100px;
            padding: 15px;
            margin-right: 10px;
            align-self: flex-start;
            min-width: 300px;
        }

        .catRight {
            flex: 3;
            min-height: 100px;
            align-self: stretch;
        }

        .catItemList {
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .catItem {
            padding: 10px;
            align-items: center;
            margin: 0px 0px 14px 14px;
            max-width: 190px;
        }

        .catItem:hover {
            box-shadow: 0 0 6px 0 #666;
        }

        .catItemName {
            font-weight: bold;
            line-height: 35px;
            max-width: 95%;
            overflow: hidden;
            white-space: pre;
        }

        @media (max-width: 800px) {
            .catContainer {
                flex-direction: column;
            }

            .catLeft {
                margin-right: 0px;
                min-width: unset;
            }

            .catItemList {
                justify-content: space-between;
            }

            .catItem {
                width: 45vw;
                margin: 0px;
                margin-top: calc(20vw - 60px);
            }

            .catItem img {
                width: 100%;
                height: 100%;
            }
        }

        /* ═══ Product Page ═══ */
        .bgImage {
            width: 100%;
        }

        .productBox {
            margin-bottom: 10px;
            align-self: stretch;
            padding: 15px;
            box-shadow: 0 0 6px 0 #cecece;
            background-color: #fff;
        }

        .productText {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .productText2 {
            font-size: 11px;
            color: red;
        }

        .productText3 {
            font-size: 12px;
            color: #1360bf;
            font-weight: bold;
        }

        .platormContainer {
            align-items: stretch;
            height: 40px;
            flex-wrap: wrap;
            overflow: hidden;
            justify-content: flex-start;
        }

        .productGroup {
            background-color: #929292;
            color: #fff;
            font-size: 15px;
            margin-bottom: 10px;
            padding: 10px;
            text-align: center;
        }

        @media only screen and (min-width: 800px) {
            .productBox {
                margin: 0px 10px 10px 10px;
            }

            .productGroup {
                margin: 0px 10px 10px 10px;
            }

            .productImg {
                width: 84px;
                height: 116px;
            }

            .platormContainer {
                margin-top: auto;
            }

            .productText {
                margin-bottom: 0px;
                font-size: 15px;
            }

            .priceContainer {
                margin-top: -7px;
            }

            .priceContainer div {
                margin-top: 2px;
            }
        }

        /* ═══ Footer ═══ */
        .footer-itemNew {
            margin-left: 20px;
            justify-content: flex-start;
            font-size: 12px;
            margin-top: 10px;
        }

        .footerLinks {
            border-top: 1px solid #dddddd;
            margin-top: 30px;
            padding-left: 15px;
            padding-right: 15px;
            flex-wrap: wrap;
            align-items: stretch;
        }

        .footerCell {
            margin-top: 15px;
            justify-content: flex-start;
            flex-grow: 1;
        }

        .footerLinks a {
            text-decoration: none;
            color: #404040;
            font-size: 12px;
            line-height: 20px;
            padding: 12px 0px;
        }

        .socialTitle {
            text-align: center;
            margin-top: 30px;
            margin-bottom: 5px;
        }

        .socialMedia {
            justify-content: center;
        }

        .socialMedia img {
            margin-right: 5px;
        }

        .footerBanner {
            margin-top: 20px;
            justify-content: center;
        }

        .footerBanner img {
            margin-right: 20px;
        }

        .footerContact {
            padding: 0px 20px;
            margin-top: 30px;
        }

        .footerContact a {
            text-decoration: none;
            color: #404040;
        }

        .footerMail {
            margin-top: 10px;
            padding-top: 5px;
            padding-bottom: 10px;
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
        }

        .footerContainer {
            display: flex;
            flex-direction: column;
        }

        @media only screen and (max-width: 800px) {
            .footerLinks a {
                padding: 12px 0px;
            }
        }

        @media only screen and (min-width: 800px) {
            .footerIcons {
                flex-direction: row;
                justify-content: space-between;
            }

            .footer-itemNew {
                margin-left: 0px;
            }

            .footerContainer {
                border-top: 1px solid #ddd;
                flex-direction: row;
                margin-top: 30px;
            }

            .footerLinks {
                border-top: 0px;
                flex-grow: 1;
                margin-top: 0px;
                padding-left: 0px;
            }

            .footerLinks a {
                padding: unset;
            }

            .footerMail {
                border-bottom: 0px;
            }

            .footerBanner img {
                width: 127px;
                height: 40px;
            }

            .footerContact {
                margin-right: 0px;
            }
        }