section {
            margin: 5rem auto;
            overflow: hidden;
            width: 100%;
        }

        .nav .brand {
            color: var(--color-primary);
        }

        hr {
            background-color: #efefef;
        }

        header {
            border-bottom: 1px solid #efefef;
        }

        .is-inline {
            display: inline-block;
        }

        .is-block {
            display: block;
        }

        .is-no-style {
            list-style: none;
        }

        .mtr-15 {
            margin: 15px 15px 0 0;
        }

        .mtr-5 {
            margin: 5px 5px 0 0;
        }

        .mtrb-15 {
            margin: 15px 15px 15px 0;
        }

        .mt-15 {
            margin: 15px 0 0 0;
        }

        .mb-15 {
            margin: 0 0 15px 0;
        }

        .mb0 {
            margin-bottom: 0;
        }

        .mrb-15 {
            margin: 0 15px 15px 0;
        }

        .is-less-padding {
            padding: 1rem 1.4rem;
        }

        .is-small-text {
            font-size: 0.8em;
        }

        .button {
            white-space: nowrap;
        }

        .cathome .button+.button {
            margin-left: 0;
        }

        /* LIST APP */
        .listapp {
            min-height: 85px;
            padding-top: 10px;
        }

        .listapp figure,
        .app_header figure {
            margin: 0 15px 15px 0;
        }

        .fs-14 {
            font-size: 1em;
        }

        .fs-13 {
            font-size: 0.9em;
        }

        .fs-16 {
            font-size: 1.25em;
        }

        ul.clear-list {
            list-style: none;
            padding-left: 0;
        }

        h2,
        h3 {
            font-size: 1.35em;
        }

        section {
            margin: 1.5rem auto 2rem auto;
        }

        ul.catlisting {
            list-style: none;
        }

        ul.catlisting li a {
            display: block;
        }

        .section-link {
            text-decoration: none;
            color: var(--color-darkGrey) !important;
            display: flex;
            align-content: center;
            justify-content: space-between;
            align-items: center;
        }

        .section-link span {
            display: block;
            padding: 0.5rem 1rem;
            background: var(--bg-secondary-color);
            color: var(--color-primary);
            border-radius: 5px;
            font-size: 0.8em;
        }


        /* SINGLE APP */

        .screenshots {
            overflow: hidden;
            overflow-y: hidden;
            white-space: nowrap;
            margin-bottom: 25px;
            margin-top: 17px;
            overflow-x: scroll;
            position: relative;
            width: 100%;
        }

        .screenshots a,
        .screenshots img {
            display: inline-block;
            max-width: none;
            min-height: 200px;
            max-height: 200px;
        }

        #versions h4 {
            font-size: 1em;
        }

        #versions p {
            font-size: 0.8em;
        }

        section h2,
        aside h2 {
            margin-bottom: 0.2em;
        }


        section a.section-link h2 {
            margin-bottom: 0;
            padding-bottom: 0;
            margin-top: 0;
            padding-top: 0;
        }

        .dnld-list-app {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            margin: 0.8rem 0;
            padding: 1rem;
            border-radius: 8px;
            background: var(--bg-secondary-color);
        }

        .dnld-list-app h3 {
            font-weight: bold;
        }

        .dnld-list-name {
            flex-grow: 1;
        }

        .dnld-list-icon {
            min-width: 40px;
            padding-right: 2rem;
        }

        .dnld-list-app figure,
        .dnld-list-app figure img {
            height: 60px;
            width: 60px;
            max-width: none;
            padding: 0;
        }

        .dnld-list-name {
            overflow: auto;
        }

        i.icon,
        i.icon+span {
            display: table-cell;
        }

        .icon {
            width: 1em;
            height: 1em;
            fill: currentColor;
            position: relative;
        }

        .dnld-list-icon i.icon.dnld-blue {
            height: 40px;
            width: 40px;
            background-size: 40px 40px;
        }

        i.dnld-blue {
            background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM0ZTQxZGIiIGQ9Ik03IDE3aDEwdi0ySDd6bTUtM2w0LTRsLTEuNC0xLjRsLTEuNiAxLjU1VjZoLTJ2NC4xNUw5LjQgOC42TDggMTB6bTAgOHEtMi4wNzUgMC0zLjktLjc4OHQtMy4xNzUtMi4xMzdUMi43ODggMTUuOVQyIDEydC43ODgtMy45dDIuMTM3LTMuMTc1VDguMSAyLjc4OFQxMiAydDMuOS43ODh0My4xNzUgMi4xMzdUMjEuMjEzIDguMVQyMiAxMnQtLjc4OCAzLjl0LTIuMTM3IDMuMTc1dC0zLjE3NSAyLjEzOFQxMiAyMiIvPjwvc3ZnPg==
) center no-repeat;
        }

        .file-spec-body {
            display: flex;
            margin: 1rem 0;
            padding-bottom: 1rem;
            flex-direction: column;
            gap: 0.5rem;
            color: var(--color-grey);
        }

        .file-spec-body strong {
            color: var(--color-darkGrey);
        }

        .file-spec-body span.long-span {
            overflow: scroll;
        }

        /* INDEX */

        .app-list {
            height: auto;
            overflow-x: auto;
            overflow-y: hidden;
            margin: 0;
            white-space: nowrap;
            position: relative;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            box-sizing: border-box;
            scrollbar-width: none;
            scroll-direction: horizontal;
            padding: 0 0 5px;
        }

        .app-list a {
            width: 87px;
            padding: 5px 5px 8px;
            line-height: 1.2;
            display: inline-block;
            white-space: normal;
            vertical-align: top;
        }

        .app-list a>figure {
            width: auto;
            margin: 0 0 10px 0;
            text-align: center;
            cursor: pointer;
        }

        .app-list a>figure img {
            width: 80px;
            height: 80px;
        }

        .app-list>a>p:nth-child(2) {
            font-size: 0.9em;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            min-height: 19px;
            max-height: 34px;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0;
            text-overflow: ellipsis;
        }

        .app-list>a>p:nth-child(3) {
            color: #838383;
            font-size: 0.8em;
            margin: 5px 0 0 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            min-height: 32px;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* SIDEBAR */

        .sidebar-apps a {
            width: 100%;
            padding: 0 10px 10px 0;
            display: inline-block;
            vertical-align: top;
            white-space: normal;
            position: relative;
            line-height: 1.2;
        }

        .sidebar-apps a p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0 0 0 60px;
            height: 56px;
        }

        .sidebar-apps figure {
            position: absolute;
            width: 52px;
            height: 52px;
        }

        .sidebar-apps a span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
            margin-bottom: 3px;
        }

        .content-list {
            overflow: hidden;
        }

        a.list-item {
            width: 100%;
            padding: 10px;
            display: inline-block;
            vertical-align: top;
            white-space: normal;
            position: relative;
            line-height: 1.2;
            min-height: 84px;
        }

        .list-item figure {
            width: 64px;
            height: 64px;
            position: absolute;
        }

        .list-item p.list-info {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0 0 0 74px;
        }

        .list-item .list-info>span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
            margin-bottom: 1px;
        }

        .list-item .list-info .name {
            font-size: 15px;
            font-weight: 500;
        }

        .list-item .list-info .desc {
            font-size: 12px;
            color: #6f6f6f;
        }

        nav.breadcrumb {
            white-space: nowrap;
            overflow-x: auto;
            font-size: 14px;
        }

        nav.breadcrumb p {
            display: inline-block;
            position: relative;
            margin: 10px 0;
        }

        .breadcrumb p:not(:first-child):before {
            content: "";
            border: solid #6f6f6f;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            margin: 0 8px 0 2px;
        }

        #paging {
            margin: 30px 0 20px 0;
            text-align: center !important;
        }

        #paging a {
            display: inline-block;
            padding: 8px 0.75em;
            cursor: pointer;
            text-decoration: none;
            font-size: 16px;
            justify-content: center;
            text-align: center;
            vertical-align: top;
            line-height: 1.5rem;
            border: 1px solid #ccc;
            align-items: baseline;
            white-space: nowrap;
            margin: 0 2px;
        }

        #paging a:active {
            border-color: #5b7876;
            background-color: #5b7876;
        }

        #paging a[disabled] {
            background-color: #eee;
            color: #7a7a7a;
            cursor: not-allowed;
        }

        #paging a.active-page {
            background-color: var(--color-primary);
            color: #fff;
        }

        .seemore {
            float: right;
        }

        .button.outline.small-button {
            font-size: 0.8em;
            padding: 0.5em 0.5em;
            margin-right: 0.6em;
        }

        .button.outline.small-button+.button.outline.small-button {
            margin-left: 0;
            margin-right: 0.6em;
            margin-bottom: 0.7em;
        }

        #searchapps {
            max-width: 300px;
        }

        .nav .button.clear {
            color: inherit;
            padding: 1rem 0.3rem;
            font-weight: 500;
        }

        .button.fs-16 {
            padding: 1.2rem 2.5rem;
        }

        .donate-button {
            display: flex;
            gap: 1rem;
            align-content: center;
            align-items: center;
        }

        .donate-logo {
            padding: 1rem;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background: var(--color-primary);
            color: #fff;
            display: flex;
            align-content: center;
            justify-content: center;
            align-items: center;
        }

        .nav details.dropdown>:last-child {
            left: -176px;
            width: 300px;
            padding: 0;
            box-shadow: none;
            -webkit-box-shadow: none;
            border: 1px solid var(--color-lightGrey);
            margin-top: 10px;
            display: flex;
            flex-direction: row;
        }

        details.lang-select {
            z-index: 200;
        }

        details.lang-select summary::marker {
            content: "";
        }

        details.lang-select summary::-webkit-details-marker {
            display: none;
        }

        .card-col {
            width: 50%;
        }

        .nav details.dropdown>:last-child a {
            padding: 1rem 1rem 1rem 2rem;

        }

        .nav .button.outline {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: var(--color-darkGrey);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 1rem 2rem;
            text-decoration: none;
            margin: 1rem;
        }

        @media (hover: hover) {
            .listapp:hover {
                background-color: #efefef;
            }

            #paging a:hover {
                border-color: var(--color-primary);
            }

            .nav details.dropdown>:last-child a:hover {
                background-color: var(--bg-secondary-color);
            }

        }

        @media only screen and (min-width: 601px) {
            .sidebar-apps a {
                width: 50%;
            }

            .sidebar-apps {
                display: flex;
                flex-wrap: wrap;
            }

            .content-list a.list-item {
                width: 49%;
            }
        }

        @media only screen and (min-width: 901px) {
            .sidebar-apps a {
                width: 100%;
            }

            .nav a.brand {
                padding-left: 0;
            }

            .nav a.button.clear.text-primary {
                color: var(--font-color) !important;
                padding: 1rem 0.3rem;
                font-weight: 500;
            }
        }


        @media only screen and (max-width: 900px) {
            :root {
                --grid-gutter: 3rem;
            }

            .nav-left {
                justify-content: space-between;
                max-width: none;
            }

            .nav .brand {
                padding-left: 0;
            }

            .nav-mobile {
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            .nav-right {
                flex-direction: column;
                align-items: flex-end;
            }

            .nav-right input {
                margin-top: 8px;
            }

            .nav {
                padding-top: 5px;
                padding-bottom: 5px;
                flex-direction: column;
            }

            section h2 {
                padding-bottom: 0.1rem;
            }

            section p {
                margin-bottom: 0.4rem;
            }

            section.app_header p.text-grey {
                margin-bottom: 1rem;
            }

            .app-list a>figure {
                margin: 0 0 5px 0;
            }

            .app-list>a>p:nth-child(3) {
                min-height: 16px;
            }

            a.list-item {
                padding: 15px 0 0 0;
            }
        }


        @media only screen and (max-width: 600px) {
            :root {
                --grid-gutter: 2rem;
            }

            .col-8,
            .col-4,
            .col-8-md,
            .col-8-lg,
            .col-4-md,
            .col-4-lg {
                overflow: hidden;
            }

            h1 {
                font-size: 1.3em;
            }

            h2,
            h3 {
                font-size: 1.2em;
            }

            .nav .brand {
                padding-left: 0;
            }

            .nav details.dropdown>:last-child {
                left: -179px;
                width: 300px;
                padding: 0;
                box-shadow: none;
                -webkit-box-shadow: none;
                border: 1px solid var(--color-lightGrey);
                margin-top: 0;
                display: flex;
                flex-direction: row;
            }

            .tabs>.dropdown>summary,
            .tabs>a {
                padding: 1rem 1.7rem;
                font-size: 15px;
            }

            .seemore {
                display: none;
            }

            .app_header figure {
                margin: 0 15px 0 0;
            }

            section.app_header {
                margin: 0 auto;
            }

            section {
                margin: 1.5rem auto 0 auto;
            }

            .app-list a {
                width: 70px;
                padding-bottom: 0;
            }

            .app-list a>figure img {
                width: 60px;
                height: 60px;
            }

            .index-hero p.grouped {
                margin-bottom: 0;
            }

            .app_header figure img {
                width: 80px;
                height: 80px;
            }

            section.cathome {
                margin-top: 0;
            }

            a.list-item {
                padding: 8px 0 0 0;
            }

            .dnld-list-icon {
                min-width: 30px;
                padding-right: 0.5rem;
            }

            .dnld-list-icon i.icon.dnld-blue {
                width: 30px;
                height: 30px;
                background-size: 30px 30px;
            }

            body {
                line-height: 1.4;
            }

            .index-hero p {
                font-size: 1em;
            }
        }

        @media only screen and (max-width: 599px) {
            .specifications .col-4 {
                flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
            }
        }

        @media only screen and (max-width: 599px) {

            .catlisting .col-6,
            .footcols .col-6 {
                flex: 0 0 calc(50% - var(--grid-gutter));
            }
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #191E23;
                --bg-secondary-color: #3d3d3d;
                --color-darkGrey: rgb(232, 234, 237);
                --color-grey: #858585;
                --font-color: rgb(232, 234, 237);
                --color-lightGrey: hsl(210, 15%, 35%);
                --color-primary: #9da2ff;
            }

            hr {
                background-color: #4E5966;
            }

            header {
                border-bottom: 1px solid #4E5966;
            }

            .dnld-list-app {
                background: #2a343f;
            }

            .dnld-list-app.listapp:hover {
                background: inherit;
                opacity: 0.75;
            }

            #paging a[disabled] {
                background-color: #2a343f;
            }

            input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
            select,
            textarea,
            textarea[type="text"] {
                background: none;
                color: var(--font-color);
            }

            i.dnld-blue {
                background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik03IDE3aDEwdi0ySDd6bTUtM2w0LTRsLTEuNC0xLjRsLTEuNiAxLjU1VjZoLTJ2NC4xNUw5LjQgOC42TDggMTB6bTAgOHEtMi4wNzUgMC0zLjktLjc4OHQtMy4xNzUtMi4xMzdUMi43ODggMTUuOVQyIDEydC43ODgtMy45dDIuMTM3LTMuMTc1VDguMSAyLjc4OFQxMiAydDMuOS43ODh0My4xNzUgMi4xMzdUMjEuMjEzIDguMVQyMiAxMnQtLjc4OCAzLjl0LTIuMTM3IDMuMTc1dC0zLjE3NSAyLjEzOFQxMiAyMiIvPjwvc3ZnPg==
) center no-repeat;
            }
        }