/* Main */
        html {
            display: block;
            width: 100%;
            height: 100%;
        }

        body {
            background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #0b151a);
            font-family: 'Barlow', sans-serif;
            font-size: 18px;
            margin: 0;
            color: #fff;
            background-color: #0b151a;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        h1 {
            font-family: 'Barlow', sans-serif;
            font-size: 34pt;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-block-start: 0;
            margin-block-end: 0;
            margin-right: 10px;
            margin-left: 10px;
        }

        h2 {
            font-size: 28pt;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 10px;
            font-family: 'Barlow', sans-serif;
            color: #ececec;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-top: 70px;
            margin-right: 10px;
            margin-left: 10px;
        }

        .h2style {
            font-size: 28pt;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
            font-family: 'Barlow', sans-serif;
            color: #ececec;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-right: 10px;
            margin-left: 10px;
        }

        h3 {
            font-size: 22pt;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
            font-family: 'Barlow', sans-serif;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-right: 10px;
            margin-left: 10px;
            border-bottom: 6px solid #1a303d;
            max-width: fit-content;
        }

        h4 {
            font-size: 18pt;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
            font-family: 'Barlow', sans-serif;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-right: 10px;
            margin-left: 10px;
        }

        ol {
            padding-inline-end: 20px;
        }

        header {
            background-color: #1c1f21;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        a:hover {
            transform: scale(1.02);
            transition: transform 0.3s ease;
            z-index: 1;
        }

        p {
            font-family: 'Barlow', sans-serif;
            font-size: 14pt;
            color: rgb(216, 216, 216);
            line-height: 1.5;
            margin-right: 10px;
            margin-left: 10px;
        }

        a {
            color: #66c0f4;
            cursor: pointer;
            text-decoration: none;
        }

        .subtag {
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 0;
            font-family: 'Barlow', sans-serif;
            color: #a1a1a1;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-right: 10px;
            margin-left: 10px;
        }

        section {
            margin-bottom: 2vh;
        }

        .fixed {
            position: fixed;
        }

        .stattrak {
            color: rgb(207, 106, 50);
        }

        .souvenir {
            color: rgb(255, 215, 0)
        }

        ::-webkit-scrollbar {
            height: 12px;
            width: 14px;
            background: rgb(11 21 26);
            z-index: 12;
            overflow: visible;
        }

        ::-webkit-scrollbar-corner {
            background: #202020;
        }

        ::-webkit-scrollbar-thumb {
            width: 10px;
            background-color: #434953;
            border-radius: 10px;
            z-index: 12;
            border: 4px solid rgba(0, 0, 0, 0);
            background-clip: padding-box;
            transition: background-color .32s ease-in-out;
            margin: 4px;
            min-height: 32px;
            min-width: 32px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #1a303d;
            border-radius: 25px;
        }

        ::-webkit-scrollbar-track {
            background-color: #1a303d00;

        }

        ::selection {
            background: #54a5d4;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, .6666666667);
            color: #fff;
        }

        .FlexboxRow {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            margin: 10px;
        }

        .Row {
            display: flex;
            flex-direction: row;
            align-items: stretch;
        }

        .RowInline {
            display: flex;
            flex-direction: row;
            align-items: stretch;
        }

        .ArticlesRow {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .hero {
            color: #ffffff;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: -webkit-fill-available;
            justify-content: end;
            background-image: url(../Images/Index/main9.webp), linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #0b151a);
            background-size: cover;
            background-position: bottom;
            background-blend-mode: lighten;
        }

        .hero img {
            height: 300px;
            width: 300px;
            padding-left: 100px;
        }

        .herotextimg {
            max-width: 1200px;
            min-width: 640px;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-right: 30px;
            display: flex;
            align-items: center;
        }

        .herocontainer {
            max-width: 1200px;
            min-width: 640px;
            padding: 30px;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .herobuttons {
            display: flex;
            max-width: 1200px;
            min-width: 640px;
            width: 100%;
        }

        .herotile {
            flex: 1;
            background-color: #2c2f33;
            outline: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
            border-radius: 8px;
            padding: 0;
            margin: 5px;
            cursor: pointer;
            text-decoration: none;
            color: #ffffff;
            text-overflow: clip;
            position: relative;
        }

        .herotile img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            margin-right: 0;
            padding-left: 0;
        }

        .herobuttons .Textbox {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: auto;
            justify-content: center;
        }

        .herobuttons h2 {
            font-size: 18pt;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 10px;
            font-family: 'Barlow', sans-serif;
            color: #ececec;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-top: 0;
            margin-right: 10px;
            margin-left: 10px;
        }

        .TitleboxIndex {
            text-align: left;
        }

        .TitleboxIndex p {
            text-shadow: 1px 2px 4px rgb(0 0 0);
        }

        .TitleboxIndex h1 {
            text-shadow: 1px 2px 1px rgb(0 0 0);
            font-family: 'Oxanium', sans-serif;
            text-transform: capitalize;
            margin-top: 20px;
        }

        footer {
            margin-top: auto;
        }

        .FlexboxRowFooter {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #1a303d);
            border: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            z-index: 5;
            margin-left: 55px;
            margin-top: 60px;
        }

        .FlexboxRowFooter a {
            display: block;
            color: #b9b9b9;
            /* Set your desired link color */
            text-decoration: none;
            margin-bottom: 10px;
            /* Adjust spacing between links */
            font-size: 9pt;
        }

        .FlexboxRowFooter p {
            display: block;
            color: #fff;
            /* Set your desired link color */
            text-decoration: none;
            margin-bottom: 10px;
            /* Adjust spacing between links */
            font-size: 12px;
            justify-content: flex-start;
            margin-left: 0;
        }

        .FlexboxFooter {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .FlexboxSubFooter {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

        #Flexbox {
            display: flex;
            justify-content: center;
            flex-direction: column;
            flex: none;
            height: 100%;
            width: 50%;
            max-width: 27.5vw;
            align-items: stretch;
        }

        .Container {
            display: flex;
        }

        /* Header */
        .icon {
            display: inline-flex;
            margin-right: 25px;
            width: 28px;
            height: 28px;
            align-items: center;
        }

        .Burgericon {
            display: none;
            margin-right: 10px;
            width: 28px;
            height: 28px;
            align-items: center;
        }

        .navicon {
            width: 35px;
            height: 35px;
        }

        .logo {
            display: flex;
            height: 36px;
            align-items: center;
        }

        .logo img {
            width: 36px;
            height: 36px;
            margin-right: 20px;
        }

        .logotext {
            font-family: 'Oxanium', sans-serif;
            font-size: 24px;
            color: #ffffff;
            text-transform: uppercase;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .logosubtext {
            font-family: 'Oxanium', sans-serif;
            font-size: 24px;
            color: #ffffff;
            text-transform: uppercase;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .socialicon {
            width: 30px;
            height: 30px;
        }

        button {
            height: 24px;
            line-height: 24px;
            background-color: #1a303d;
            border: 1px transparent;
            border-radius: 3px;
            cursor: pointer;
            padding: 0px 16px;
            color: #66c0f4;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 5px;
            margin-right: 5px;
            font-family: 'Oxanium';
        }

        .search-container {
            background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #1a303d);
            border: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 999;
        }

        .main-container {
            height: 100vh;
            width: calc(60% - 56px);
            display: inline-flex;
            margin-left: 55px;
            justify-content: center;
        }

        .search-Buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            margin-right: 32px;
            border: 1px transparent;
            border-radius: 3px;
            width: 532px;
        }

        .categorySelect {
            display: inline-block;
            line-height: 24px;
            background-color: rgba(103, 193, 245, 0.2);
            border: 1px transparent;
            border-radius: 3px;
            cursor: pointer;
            padding: 0px 16px;
            color: #66c0f4;
            width: 100%;
            margin: 5px;
            font-family: 'Oxanium';
            outline: 1px solid #66c0f400;
        }

        option {
            color: #66c0f4;
            background-color: #292929;
        }

        #searchInput {
            line-height: 30px;
            background-color: rgba(103, 193, 245, 0.2);
            outline: 1px solid #ffffff00;
            border: 1px transparent;
            border-radius: 3px;
            cursor: pointer;
            user-select: none;
            padding: 0px 16px;
            margin: 5px;
            color: #66c0f4;
            width: 100%;
            font-family: 'Oxanium';
        }

        .Input {
            height: 24px;
            background-color: #66c0f40a;
            border: 1px transparent;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
            text-align: center;
            padding-left: 15px;
            color: #66c0f4;
            width: -webkit-fill-available;
            margin: 5px;
            outline: 1px solid #66c0f4;
        }

        .search-Input {
            line-height: 24px;
            border: 1px transparent;
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .dropdown-divider {
            border-top: 0.2px solid #cccccc00;
            margin-top: 1px;
            margin-bottom: 1px;
        }

        .search-options {
            width: 100%;
        }

        .search-container input[type="text"],
        .search-container select {
            height: 30px;
            padding: 5px;
            border: 1px solid #3a3e43;
            border-radius: 3px;
            background-color: #1c1f21;
            color: #ffffff;
        }

        .search-container input[type="text"] {
            margin-right: 5px;
        }

        .search-container select {
            width: 120px;
        }

        .tickbox-milspec {
            width: 10px;
            height: 10px;
            outline: 0.8px solid rgb(75, 105, 255);
        }

        .tickbox-restricted {
            width: 10px;
            height: 10px;
            outline: 0.8px solid rgb(136, 71, 255);
        }

        body .classified input[type="checkbox"] {
            width: 10px;
            height: 10px;
            outline: 0.8px solid rgb(211, 44, 230);
            display: inline-block;
            position: relative;
            top: 3px;
            background-color: rgba(255, 100, 216, 0.124);
        }

        .tickbox-covert {
            width: 10px;
            height: 10px;
            outline: 0.8px solid rgb(235, 75, 75);
        }





        /* Customize the label (the container) */
        .container {
            display: inline;
            position: relative;
            padding-left: 20px;
            margin-left: 10px;
            margin-right: 10px;
            cursor: pointer;
            font-size: 12px;
            font-family: 'Oxanium';
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 10px;
            width: 10px;
            outline: 0.8px;
            background-color: #eeeeee00;
        }

        .check-milspec {
            outline: 0.8px solid rgb(75, 105, 255);
        }

        .container-milspec:hover input~.checkmark {
            background-color: rgb(75, 105, 255, 0.40);
        }

        .container-milspec input:checked~.checkmark {
            background-color: rgb(75, 105, 255);
        }

        .check-restricted {
            outline: 0.8px solid rgb(136, 71, 255);
        }

        .container-restricted:hover input~.checkmark {
            background-color: rgb(136, 71, 255, 0.40);
        }

        .container-restricted input:checked~.checkmark {
            background-color: rgb(136, 71, 255);
        }

        .check-classified {
            outline: 0.8px solid rgb(211, 44, 230);
        }

        .container-classified:hover input~.checkmark {
            background-color: rgb(211, 44, 230, 0.40);
        }

        .container-classified input:checked~.checkmark {
            background-color: rgb(211, 44, 230);
        }

        .check-covert {
            outline: 0.8px solid rgb(235, 75, 75);
        }

        .container-covert:hover input~.checkmark {
            background-color: rgba(235, 75, 75, 0.40);
        }

        .container-covert input:checked~.checkmark {
            background-color: rgb(235, 75, 75);
        }

        .Consumer-Grade {
            color: rgb(176, 195, 217);
        }

        .Industrial-Grade {
            color: rgb(94, 152, 217);
        }

        .Mil-Spec-Grade {
            color: rgb(75, 105, 255);
        }

        .Restricted {
            color: rgb(136, 71, 255);
        }

        .Classified {
            color: rgb(211, 44, 230);
        }

        .Covert {
            color: rgb(235, 75, 75);
        }

        .Contraband {
            color: rgb(228, 174, 57);
        }

        input[type="text"]::placeholder {
            color: rgb(167, 167, 167);
            /* You can use any color value here */
        }

        .clear-icon {
            color: #66c0f4;
            position: absolute;
            right: 10px;
            cursor: pointer;
            z-index: 10;
        }

        /* Hover effect for the "x" icon */
        .clear-icon:hover {
            color: #b7cfdd;
        }

        /* Grid */
        .grid-item {
            background-color: #1c1f21;
            outline: 0.8px solid rgb(228, 228, 228);
            text-align: center;
            padding: 0px;
            cursor: pointer;
            display: flex;
            padding-bottom: 100%;
            align-items: stretch;
            justify-content: space-evenly;
            border-radius: 5px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 0.45vw;
            padding: 0.45vw;
            background-color: #000000;
            border: 1px solid #2c2c2d;
            max-width: 520px;
        }

        .grid-item.droppable {
            position: relative;
            /* Add any other styles you need */
        }

        .grid-item.droppable img {
            max-width: 100%;
            max-height: 100%;
            cursor: pointer;
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            margin: auto;
            overflow: clip;
        }

        .steamitem {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            margin: auto;
            overflow: clip;
        }

        .remove-button {
            position: absolute;
            top: 10px;
            left: 10px;
            color: rgb(255, 255, 255);
            font-weight: bold;
            cursor: pointer;
            display: none;
            z-index: 5;
        }

        .droppable:hover .remove-button {
            display: block;
        }

        .Burgermenu {
            display: flex;
            font-size: 24px;
            align-items: center;
            user-select: none;
        }

        /* Left Sidebar (Navigation) */
        .NavButton {
            display: flex;
            -ms-flex-item-align: baseline;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            height: 70px;
            padding: 10px;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #ffffff;
            vertical-align: baseline;
            text-decoration: none;
        }

        #NavigationSidebar {
            padding-top: 65px;
            position: fixed;
            top: 0;
            left: 0;
            width: 55px;
            height: 100%;
            background: #1c1f21;
            border: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            color: white;
            z-index: 7;
            transition: width 0.3s ease;
            overflow: hidden;
        }

        #NavigationSidebar .NavButton {
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }

        #NavigationSidebar .NavButton .icon {
            margin-right: 20px;
            opacity: 0.7;
        }

        #NavigationSidebar .NavButton .text {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            font-family: 'Barlow', sans-serif;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-left: 10px;
        }

        #NavigationSidebar.collapsed .text {
            display: none;
        }

        #NavigationSidebar.expanded {
            width: 300px;
        }

        #NavigationSidebar.expanded .text {
            display: inline;
            opacity: 0.7;
        }

        #NavigationSidebar.expanded .NavButton .text {
            display: inline;
        }


        /* Right Sidebar (Search Results) */
        #resultsList {
            margin-top: 100px;
            display: grid;
            margin-left: -35px;
            grid-template-columns: repeat(5, 1fr);
            padding-right: 10px;
        }

        .result-item {
            cursor: pointer;
            user-select: none;
            display: flex;
            flex-direction: column;
            margin: 0px 0px 8px 8px;
            background-color: #2c2f33;
            border: 8px solid #2c2f33;
            outline: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
        }

        .result-item:hover p {
            animation: scrollText 5s linear infinite;
        }

        @keyframes scrollText {
            0% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-100%);
            }
        }


        .result-item img {
            max-width: 100%;
        }

        .result-item p {
            text-align: center;
            user-select: all;
            margin: 0;
            text-indent: 0;
            font-size: 12pt;

        }

        #sidebar {
            float: right;
            width: 40%;
            height: auto;
            color: white;
            margin-top: 58px;
            overflow-y: visible;
            position: relative;
            background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #1a303d);
            outline: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .searchandfilter {
            position: fixed;
            width: -webkit-fill-available;
            padding: 10px;
            background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #1a303d);
            outline: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .switch {
            margin-left: 10px;
            position: relative;
            display: inline-block;
            width: 30px;
            height: 17px;
        }

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

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

        .slider:before {
            position: absolute;
            content: "";
            height: 13px;
            width: 13px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

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

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

        input:checked+.slider:before {
            -webkit-transform: translateX(13px);
            -ms-transform: translateX(13px);
            transform: translateX(13px);
        }

        .slider.round {
            border-radius: 17px;
        }

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

        /* Body */
        .Titlebox {
            width: 100%;
        }

        .Titlebox h1 {
            margin-bottom: 10px;
        }

        .content-container {
            position: relative;
        }

        .star {
            font-size: 12px;
            /* Adjust the size of the star */
            color: transparent;
            /* Initial clear color for the star (no fill) */
            position: absolute;
            /* Absolute positioning to place the star above other content */
            top: 2px;
            /* Adjust the top position to overlay the star */
            left: 2px;
            /* Adjust the left position to overlay the star */
            cursor: pointer;
            /* Show pointer cursor when hovering over the star */
            outline: 2px solid transparent;
            /* Initial transparent outline */
            z-index: 1;
            /* Ensure the star is above other content */
        }


        /* Add this style to enlarge the result item */
        .result-item:hover {
            transform: scale(1.07);
            /* Enlarge the item by 10% */
            transition: transform 0.3s ease;
            /* Add a smooth transition effect */
            z-index: 1;
            /* Ensure the hovered item appears on top */
        }

        /* Add this style to enlarge the icon */
        .icon:hover {
            transform: scale(1.07);
            /* Enlarge the item by 10% */
            transition: transform 0.3s ease;
            /* Add a smooth transition effect */
            z-index: 1;
            /* Ensure the hovered item appears on top */
        }

        /* Add this style to enlarge the NavButton */
        .NavButton:hover {
            transform: scale(1.02);
            /* Enlarge the item by 10% */
            transition: transform 0.3s ease;
            /* Add a smooth transition effect */
            z-index: 1;
            /* Ensure the hovered item appears on top */
        }

        option {
            font-weight: normal;
            display: block;
            min-height: 1.2em;
            padding: 0px 20px 10px;
        }

        .Social {
            margin-right: 0;
        }

        .BlogImageMain {
            max-width: 100%;
            min-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            position: relative;
            border-radius: 25px;
        }

        .BlogImage {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            border-radius: 8px;
        }

        .SideImage {
            width: calc(50% - 5px);
            display: block;
            margin: 0 auto;
            border-radius: 8px;
            object-fit: cover;
            aspect-ratio: 16/9;
        }

        .SideImageFig {
            width: calc(100% - 5px);
            display: block;
            margin: 0 auto;
            border-radius: 8px;
            object-fit: cover;
            aspect-ratio: 16/9;
            cursor: zoom-in;
        }

        figure {
            width: 100%;
            left: 0;
            display: block;
            margin: 0 auto;
            position: relative;
            border-radius: 25px;
            margin-bottom: 30px;
        }

        figcaption {
            font-family: 'Barlow', sans-serif;
            font-size: 14pt;
            color: rgb(216, 216, 216);
            line-height: 1.5;
            margin-right: 10px;
            margin-left: 10px;
            text-align: right;
            font-style: italic;
        }

        .info-container {
            position: relative;
        }

        .info-icon {
            cursor: pointer;
            height: 32px;
            max-height: 21px;
        }

        .info-text {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
            z-index: 1;
        }

        .info-container:hover .info-text {
            display: block;
        }

        .blogtile {
            flex: 1;
            background-color: #2c2f33;
            outline: 1px solid #3a3e43;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
            border-radius: 8px;
            padding: 0;
            margin: 5px;
            cursor: pointer;
            text-decoration: none;
            color: #ffffff;
            text-overflow: clip;
            position: relative;
        }

        .blogtile img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            position: relative;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .blogtileblue {
            width: 100%;
            flex: 1;
            background-color: #00bfff0a;
            border: 1px solid #dddddd16;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            padding: 0;
            margin: 5px;
            cursor: pointer;
            text-decoration: none;
            color: #ffffff;
            text-overflow: clip;
            position: relative;
        }

        .blogtileblue img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            position: relative;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

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

        .titleanddescription h2 {
            font-size: 20pt;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 0px;
            font-family: 'Barlow', sans-serif;
            color: #ececec;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-right: 10px;
            margin-left: 10px;
        }

        .outline {
            outline: #ffffff1a;
            outline-width: 1px;
            outline-style: solid;
        }

        /* Style the list */
        ul.breadcrumb {
            list-style: none;
            margin-block-start: 0;
            padding-inline-start: 10px;
            margin-block-end: 0;
            margin-inline-start: 0;
            margin-inline-end: 0;
        }

        /* Display list items side by side */
        ul.breadcrumb li {
            display: inline;
            font-size: 18px;
        }

        /* Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li+li:before {
            padding-left: 8px;
            padding-right: 8px;
            color: #a1a1a1;
            content: "\226B";
        }

        /* Add a color to all links inside the list */
        ul.breadcrumb li a {
            color: #a1a1a1;
            text-decoration: none;
        }

        /* Add a color on mouse-over */
        ul.breadcrumb li a:hover {
            color: #66c0f4;
        }

        .category-tags {
            margin-top: 10px;
        }

        .category-tag {
            display: inline-block;
            background: #66c0f4;
            color: #fff;
            padding: 5px 10px;
            margin-right: 10px;
            border-radius: 5px;
        }

        #table-of-contents {
            background-color: #00bfff0a;
            border: 1px solid #dddddd16;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            max-width: 300px;
            padding-top: 10px;
            padding-bottom: 10px;
            overflow-wrap: normal;
        }

        #table-of-contents ul {
            list-style-type: none;
            padding: 0;
        }

        #table-of-contents li {
            margin: 5px 0;
        }

        #table-of-contents a {
            text-decoration: none;
            color: #ffffff;
            transition: color 0.3s;
            padding-right: 20px;
        }

        #table-of-contents a:hover {
            color: #66c0f4;
        }

        table {
            display: table;
            border-collapse: separate;
            box-sizing: border-box;
            text-indent: initial;
            border-spacing: 2px;
            border-color: gray;
        }

        tbody {
            display: table-row-group;
            vertical-align: middle;
        }

        .table_component {
            overflow: auto;
            width: 100%;
        }

        .table_component table {
            height: 100%;
            width: 100%;
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 1px;
            text-align: center;
            overflow-wrap: break-word;
            margin-bottom: 30px;
        }

        .table_component caption {
            caption-side: top;
            text-align: left;
        }

        .table_component td {
            border-bottom: 1px solid #dddddd16;
            color: #ffffff;
            padding: 5px;
        }




        /* Ultrawide */
        @media (min-width: 3200px) {
            #resultsList {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        /* 2xl */
        @media (max-width: 1536px) {
            #resultsList {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* xl */
        @media (max-width: 1320px) {
            .herocontainer {
                max-width: 80%;
                margin-left: calc(5% + 60px);
                margin-right: 5%;
                min-width: 0;
                padding: 0;
                display: flex;
                align-items: center;
            }

            .herobuttons {
                min-width: 0px;
            }

            .herotextimg {
                max-width: 1200px;
                min-width: 0px;
                padding: 0;
                display: flex;
                align-items: center;
            }
        }

        /* lg */
        @media (max-width: 1024px) {
            #resultsList {
                grid-template-columns: repeat(3, 1fr);
            }

            .FlexboxFooter {
                padding-left: 30px;
            }

            .Row {
                display: flex;
                flex-direction: column;
                align-items: inherit;
                flex: 1;
            }

            .ArticlesRow {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex: 1;
            }

            .nomobileimg {
                display: none;
            }

            .herocontainer {
                margin-left: 0;
                margin-right: 0;
            }
        }

        /* md */
        @media (max-width: 768px) {
            #resultsList {
                grid-template-columns: repeat(5, 1fr);
            }

            #Flexbox {
                display: flex;
                justify-content: flex-start;
                flex-direction: column;
                flex: none;
                height: 100%;
                width: 90%;
                left: 5%;
            }

            .Burgericon {
                display: inline-flex;
                margin-right: 10px;
                width: 28px;
                height: 28px;
                align-items: center;
            }

            .Social {
                margin-right: 20px;
            }

            .Mainbox {
                display: flex;
            }

            .fixed {
                position: relative;
            }

            h1 {
                font-size: 30pt;
                font-weight: bold;
                margin-bottom: 10px;
            }

            h2 {
                margin-top: 10px;
            }

            h4 {
                font-size: 15pt;
                margin-bottom: 5px;
            }

            .icon {
                margin-right: 15px;
            }

            .categorySelect {
                display: inline-block;
                line-height: 24px;
                background-color: rgba(103, 193, 245, 0.2);
                border: 1px transparent;
                border-radius: 3px;
                cursor: pointer;
                user-select: none;
                padding: 0px 16px;
                color: #66c0f4;
                width: 50%;
            }

            #NavigationSidebar {
                width: 0px;
            }

            #NavigationSidebar.expanded {
                width: 250px;
                /* Adjust the width as needed */
            }

            #NavigationSidebar .NavButton {
                display: flex;
                align-items: center;
                height: 70px;
                padding: 10px;
                font-size: 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #ffffff;
                vertical-align: baseline;
                text-decoration: none;
                cursor: pointer;
                /* Add cursor pointer to indicate it's clickable */
            }

            #NavigationSidebar .NavButton .icon {
                margin-right: 20px;
                opacity: 0.7;
            }

            #NavigationSidebar .NavButton .text {
                opacity: 0;
                transition: opacity 0.3s ease;
                font-family: 'Barlow', sans-serif;
                color: #ffffff;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
                margin-left: 10px;
            }

            #NavigationSidebar.expanded .text {
                opacity: 0.7;
            }

            #menuToggle {
                justify-content: center;
                /* Center the icon and text horizontally */
            }

            #menuToggle.collapsed .text {
                display: none;
            }

            .socialicon {
                width: 25px;
                height: 25px;
            }

            .FlexboxRowFooter {
                flex-direction: row;
                margin-left: 0;
                padding-left: 20px;
                flex-wrap: wrap;
            }

            .FlexboxFooter {
                padding: 5px;
            }

            body {
                background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #0b151a);
                font-family: 'Barlow', sans-serif;
                font-size: 18px;
                margin: 0;
                color: #fff;
                background-color: #0b151a;
            }

            #resultsList {
                grid-template-columns: repeat(5, 1fr);
                margin-top: 10px;
            }

            .FlexboxRow {
                display: flex;
                flex-direction: column;
                align-items: inherit;
                flex: 1;
            }

            #sidebar {
                width: 100%;
                height: auto;
                color: white;
                margin-top: 58px;
                overflow-y: visible;
                position: relative;
                background: rgba(0, 0, 0, 0);
                outline: 1px rgba(0, 0, 0, 0);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
            }

            .main-container {
                height: fit-content;
                width: 100%;
                display: inline-flex;
                margin-left: 0;
                justify-content: center;
            }

            .searchandfilter {
                display: flex;
                position: relative;
                width: 100%;
                padding: 0;
                background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #1a303d);
                border-bottom: 1px solid #3a3e43;
                outline: 1px solid #3a3e4300;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                z-index: 2;
                margin-top: -60px;
                overflow-y: hidden;
                flex-direction: column;
                align-items: center;
            }

            .search-Input {
                width: 95%;
                margin: 0 5px;
            }

            .search-options {
                width: 95%;
                margin-bottom: 10px;
            }

            .InputSticker {
                line-height: 24px;
                background-color: rgba(103, 193, 245, 0.2);
                border: 1px transparent;
                border-radius: 3px;
                cursor: pointer;
                color: #66c0f4;
                width: 70px;
                display: none;
            }

            .FlexboxSubFooter {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
            }

            h3 {
                margin-top: 10px;
            }

            p {
                margin-block-start: 0.5em;
            }

            .herocontainer {
                max-width: 90%;
            }
        }

        /* sm */
        @media (max-width: 640px) {
            .nomobile {
                display: none;
            }
        }

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

            .hero {
                height: fit-content;
            }
        }

        /* xs */
        @media (max-width: 475px) {
            h1 {
                font-size: 28pt;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            .icon {
                margin-right: 10px;
                width: 18px;
            }

            .categorySelect {
                display: inline-block;
                line-height: 24px;
                background-color: rgba(103, 193, 245, 0.2);
                border: 1px transparent;
                border-radius: 3px;
                cursor: pointer;
                padding: 0px 2px;
                color: #66c0f4;
                width: 50%;
            }

            .FlexboxRowFooter {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-evenly;
                background: linear-gradient(90deg, #1c1f21 11.38%, #1c1f21 25.23%, #1a303d);
                border: 1px solid #3a3e43;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                z-index: 5;
                margin-left: 0px;
                margin-top: 60px;
                align-items: center;
            }

            .FlexboxFooter {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
            }

            .FlexboxFooter p {
                margin-left: 0;
                margin-right: 0;
            }

            .footer {
                position: inherit;
                bottom: 0;
                left: 0;
                width: 100%;
            }

            .logosubtext {
                display: none;
            }

            #resultsList {
                grid-template-columns: repeat(4, 1fr);
            }

            .BlogImageMain {
                width: 100%;
                left: 0;
                display: block;
                margin: 0 auto;
                position: relative;
                border-radius: 25px;
            }
        }

        @media (max-width: 360px) {
            .logotext {
                display: none;
            }

            #resultsList {
                grid-template-columns: repeat(3, 1fr);
            }

            .RowInline {
                align-items: center;
                flex-direction: column;
                width: 100%;
            }

            #FlexboxOptions {
                flex-direction: column;
            }

            .categorySelect {
                width: 90%;
            }

            .Button {
                margin: 5px;
            }
        }

        @media (max-width: 227px) {
            .Social {
                display: none;
            }
        }