/* Variables */

:root {
    --tag-genre-bg-colour: #05050546;
    --tag-genre-text-colour: #F1F1F1;

    --info-bg-colour: #050505c2;
    --info-text-colour: #2020208b;
    --tag-varies-bg-colour: #0A0A0A;
    --tag-authorized-bg-colour: #24ff413f;
    --tag-authorized-text-colour: #efefd8;
    --tag-anime-bg-colour: #ffaa2b71;
    --tag-anime-text-colour: #ffe8a1;
    --tag-vpn-recommended-bg-colour: #ff74243f;
    --tag-vpn-recommended-text-colour: #fdd9c5;
    --tag-vpn-required-bg-colour: #ff483b3f;
    --tag-vpn-required-text-colour: #ffbfb7;
    
    --tag-russian-bg-colour: #994001;
    --tag-russian-text-colour: #f59023;
    --tag-estonian-bg-colour: #344028;
    --tag-estonian-text-colour: #89e007;
    --tag-irish-bg-colour: #587617;
    --tag-irish-text-colour: #c6f431;
    --tag-korean-bg-colour: #71008e;
    --tag-korean-text-colour: #fb72f2;
    --tag-english-bg-colour: #0f4dc0;
    --tag-english-text-colour: #d1ddf5;
    --tag-arabic-bg-colour: #6c9213;
    --tag-arabic-text-colour: #dcedd8;
    --tag-italian-bg-colour: #d94835;
    --tag-italian-text-colour: #dfe4b4;
    --tag-portuguese-bg-colour: #c3c912;
    --tag-portuguese-text-colour: #3d4c46;
    --tag-hindi-bg-colour: #5ac815;
    --tag-hindi-text-colour: #fcfe86;
    --tag-sinhala-bg-colour: #613716;
    --tag-sinhala-text-colour: #d5db69;
    --tag-german-bg-colour: #6b1518;
    --tag-german-text-colour: #ffd519;
    --tag-french-bg-colour: #f6b904;
    --tag-french-text-colour: #fbf6b5;
    --tag-swedish-bg-colour: #137bbb;
    --tag-swedish-text-colour: #babacd;
    --tag-norwegian-bg-colour: #b6bb1f;
    --tag-norwegian-text-colour: #dfe4d1;
    --tag-spanish-bg-colour: #dc6750;
    --tag-spanish-text-colour: #fcc5be;
    --tag-polish-bg-colour: #61c7ae;
    --tag-polish-text-colour: #e0facb;
    --tag-romanian-bg-colour: #fe8c00;
    --tag-romanian-text-colour: #f9fe78;
    --tag-japanese-bg-colour: #331f7c;
    --tag-japanese-text-colour: #b1e540;
    --tag-turkish-bg-colour: #eb3d12;
    --tag-turkish-text-colour: #e0f0d1;
    --tag-afrikaans-bg-colour: #3f63f3;
    --tag-afrikaans-text-colour: #d6f7c4;
    --tag-albanian-bg-colour: #b94e33;
    --tag-albanian-text-colour: #ebe484;
    --tag-basque-bg-colour: #a3a926;
    --tag-basque-text-colour: #e9eccd;
    --tag-valencian-bg-colour: #9a1923;
    --tag-valencian-text-colour: #fec5d2;
    --tag-cantonese-bg-colour: #ea262c;
    --tag-cantonese-text-colour: #e7fba6;
    --tag-catalan-bg-colour: #ec4d26;
    --tag-catalan-text-colour: #d5eb12;
    --tag-dutch-bg-colour: #0f44b5;
    --tag-dutch-text-colour: rgb(147, 236, 222);
    --tag-taiwanese-bg-colour: #e15452;
    --tag-taiwanese-text-colour: #ffc6c6;
    --tag-persian-bg-colour: #8ed305;
    --tag-persian-text-colour: #415212;
    --tag-tamil-bg-colour: #66150d;
    --tag-tamil-text-colour: #ddd8d5;
    --tag-telugu-bg-colour: #8a3f02;
    --tag-telugu-text-colour: #cde94f;
    --tag-ukranian-bg-colour: #20b0c9;
    --tag-ukranian-text-colour: #def27b;
    --tag-mandarin-bg-colour: #f8f18f;
    --tag-mandarin-text-colour: #4d3322;
    --tag-vietnamese-bg-colour: #6e1e1f;
    --tag-vietnamese-text-colour: #ea87b5;
    --tag-czech-bg-colour: #a7034a;
    --tag-czech-text-colour: #fd9c95;
    --tag-hungarian-bg-colour: #bedc43;
    --tag-hungarian-text-colour: #45614a;
    --tag-finnish-bg-colour: #01217c;
    --tag-finnish-text-colour: #d7e9ef;
    --tag-hebrew-bg-colour: #14823e;
    --tag-hebrew-text-colour: #b6d4a1;
    --tag-icelandic-bg-colour: #bbd5fc;
    --tag-icelandic-text-colour: #0044c1;
    --tag-lakota-bg-colour: #692e2a;
    --tag-lakota-text-colour: #fd9729;
    --tag-danish-bg-colour: #f9e26f;
    --tag-danish-text-colour: #3e2835;
    --tag-bulgarian-bg-colour: #ab3325;
    --tag-bulgarian-text-colour: #ffcdc0;
    --tag-greek-bg-colour: #c1c4d8;
    --tag-greek-text-colour: #2118c4;
    --tag-slovak-bg-colour: #9fcab9;
    --tag-slovak-text-colour: #0e6843;
    --tag-slovene-bg-colour: #feb9c1;
    --tag-slovene-text-colour: #283f9b;
    --tag-uzbek-bg-colour: #0d6d80;
    --tag-uzbek-text-colour: #2cd0ac;
    --tag-thai-bg-colour: #322196;
    --tag-thai-text-colour: #cac1de;
    --tag-indonesian-bg-colour: #bf5658;
    --tag-indonesian-text-colour: #f4f3f3;
    --tag-croatian-bg-colour: #de340e;
    --tag-croatian-text-colour: #fecdd4;
    --tag-tagalog-bg-colour: #7ffdcd;
    --tag-tagalog-text-colour: #27525d;
    --tag-bengali-bg-colour: #b0e739;
    --tag-bengali-text-colour: #285635;
    --tag-kannada-bg-colour: #a80305;
    --tag-kannada-text-colour: #dec1c8;
    --tag-malayalam-bg-colour: #bbef37;
    --tag-malayalam-malayalamext-colour: #2c3a2f;
    --tag-marathi-bg-colour: #b9049b;
    --tag-marathi-text-colour: #ffbabe;
    --tag-punjabi-bg-colour: #6a019b;
    --tag-punjabi-text-colour: #e19f06;
    --tag-hokkien-bg-colour: #600a35;
    --tag-hokkien-text-colour: #c78acc;
    --tag-malay-bg-colour: #77462f;
    --tag-malay-text-colour: #e2b253;
    --tag-bhojpuri-bg-colour: #551624;
    --tag-bhojpuri-text-colour: #e8cecb;
    --tag-odia-bg-colour: #c0ea37;
    --tag-odia-text-colour: #186702;
    --tag-urdu-bg-colour: #ee9d24;
    --tag-urdu-text-colour: #714b06;
}

/* General Styling */

#bg-img {
    background-image: linear-gradient(transparent 0%, var(--dark-primary) 90%), url(../../ASSETS/resource-imgs/world-flags.jpg);
    background-size: cover;
}

.page-note #buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* List Styling */

:root {
    --list-item-content-sections: 5;
}

.list-wrapper {
    margin-bottom: 256px;
}

.list-content-section {
    width: calc(100% / var(--list-item-content-sections));
}

/* LIST SECTIONS */

.list-section-tags {
    width: calc(100% / var(--list-item-content-sections));
    display: flex;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

.list-section-media-tags {
    display: flex;
    flex-wrap: wrap;
    white-space: wrap;
}

.list-section-tags {
    display: flex;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

.list-item-title {
    margin: 0px;
    padding: 0px;
    font-size: 24px;
    font-weight: 600;
}

.list-item-title sup a {
    text-decoration: none !important;
}

.link-additional {
    font-size: 20px;
}

.list-media-tag, .list-language-tag, .list-sort-tag {
    margin: 4px !important;
    height: 24px;
    padding: 4px 6px 4px 6px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
}

.list-tag, .list-tag-show-more {
    height: auto;
    margin: 4px 4px 4px 0px;
    padding: 4px 6px 4px 6px;
    border-radius: 8px;
    outline: 2px solid transparent;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    
    transition: outline .25s ease-in-out;
}

#transition-block {
    animation: fadeOutDelay 2s;
}

.list-tag:focus-visible {
    outline: 2px solid var(--dark-white) !important;
    
    transition: outline .25s ease-in-out;
}

.list-tag-show-more {
    background-color: var(--dark-black-8b);
}

.list-media-tag, .list-sort-tag {
    height: auto;
}

.tag-icon {
    width: 16px;
    cursor: pointer;
}

.icon-flag {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    filter: drop-shadow(0px 0px 4px var(--dark-black));
    outline: 2px solid transparent;
    
    cursor: initial;
    transition: outline .25s ease-in-out;
}

img.icon-flag {
    width: 24px;
    height: 24px;
}

img.flag-unknown {
    cursor: pointer !important;
}

img.icon-flag:focus-visible {
    outline: 2px solid var(--dark-white) !important;
    
    transition: outline .25s ease-in-out;
}

/* List Icons */

.list-media-tags-icon {
    width: 16px;
    padding-right: 8px;
    filter: drop-shadow(0px 0px 8px var(--dark-white));
    
    cursor: pointer !important;
}
/* Sort & Filter Menu */

.filter-menu .list-section-tags, .sort-menu .list-section-tags, .filter-menu .list-section-tags, .sort-menu .list-section-tags {
    width: auto;
}

.tag-sort {
    margin: 0 !important;
    /* background-color: var(--dark-primary); */
    color: var(--dark-white);
}

.menu-language-options {
    height: 100%;
    width: 25%;
    margin: 0px !important;
}

.menu-captions-options {
    height: 100%;
    width: 25%;
    margin: 0px !important;
}

.menu-tag .list-language-tag, .menu-tag .list-tag {
    margin: 0px !important;
}

.menu-content-section {
    width: 100%;
    display: flex;
}

/* .sort-button-group, .menu-sort-ascending-buttons, .menu-sort-descending-buttons, .menu-tags-checklist {
    width: 24%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.filter-menu .menu-tags-checklist {
    width: 48%;
} */

.sort-button-group, .menu-sort-ascending-buttons, .menu-sort-descending-buttons, .menu-tags-checklist {
    width: auto;
    display: flex;
    justify-content: flex-end;
    
    cursor: auto;
}

#menu-checkbox-filters-all, #menu-checkbox-filters-all ~ button,  #menu-checkbox-filters-all + span {
    cursor: not-allowed !important;
}

/* Tables */

.sort-menu table, .filter-menu table {
    position: relative;
    box-shadow: none;
}

.sort-menu table td, .filter-menu table td {
    font-size: 16px;
    overflow: hidden;
    text-transform: initial;
}

.sort-menu table tr td:first-of-type, .filter-menu table tr td:first-of-type {
    max-width: 50%;
    width: 50%;
}

.sort-menu table tr td:not(table tr td:first-of-type) {
    max-width: 25%;
    width: 25%;
    text-align: right;
}

.filter-menu table tr td:not(table tr td:first-of-type) {
    min-width: 50%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

/* Tooltip Themes (List-Specific) */

.tippy-tooltip.info-theme {
    background-color: var(--info-bg-colour);
    border: 1px solid var(--info-text-colour);
}

.tippy-popper[x-placement^=top] .tippy-tooltip.info-theme .tippy-arrow {
    border-top: 7px solid var(--info-text-colour);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.info-theme .tippy-arrow {
    border-bottom: 7px solid var(--info-text-colour);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.tippy-tooltip.tag-authorized-theme {
    background-color: var(--tag-authorized-bg-colour);
    color: var(--tag-authorized-text-colour);
    border: 1px solid var(--tag-authorized-bg-colour);
}

.tippy-tooltip.tag-authorized-theme .tippy-backdrop {
    background-color: var(--tag-authorized-bg-colour);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.tag-authorized-theme .tippy-arrow {
    border-bottom: 7px solid var(--tag-authorized-bg-colour);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.tippy-tooltip.tag-anime-theme {
    background-color: var(--tag-anime-bg-colour);
    color: var(--tag-anime-text-colour);
    border: 1px solid var(--tag-anime-bg-colour);
}

.tippy-tooltip.tag-anime-theme .tippy-backdrop {
    background-color: var(--tag-anime-bg-colour);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.tag-anime-theme .tippy-arrow {
    border-bottom: 7px solid var(--tag-anime-bg-colour);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.tippy-tooltip.tag-vpn-recommended-theme {
    background-color: var(--tag-vpn-recommended-bg-colour);
    color: var(--tag-vpn-recommended-text-colour);
    border: 1px solid var(--tag-vpn-recommended-bg-colour);
}

.tippy-tooltip.tag-vpn-recommended-theme .tippy-backdrop {
    background-color: var(--tag-vpn-recommended-bg-colour);
}

.tippy-tooltip.tag-vpn-required-theme {
    background-color: var(--tag-vpn-required-bg-colour);
    color: var(--tag-vpn-required-text-colour);
    border: 1px solid var(--tag-vpn-required-bg-colour);
}

.tippy-tooltip.tag-vpn-required-theme .tippy-backdrop {
    background-color: var(--tag-vpn-required-bg-colour);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.tag-vpn-required-theme .tippy-arrow {
    border-bottom: 7px solid var(--tag-vpn-required-bg-colour);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

/* Tags */

.tag-none {
    background-color: var(--dark-black);
    color: var(--dark-white);
    opacity: 0;
}

.tag-all {
    background-color: var(--dark-black);
    color: var(--dark-white);
}

.tag-authorized {
    background-color: var(--tag-authorized-bg-colour);
    color: var(--tag-authorized-text-colour)
}

.tag-anime {
    background-color: var(--tag-anime-bg-colour);
    color: var(--tag-anime-text-colour)
}

.tag-vpn-recommended {
    background-color: var(--tag-vpn-recommended-bg-colour);
    color: var(--tag-vpn-recommended-text-colour)
}

.tag-vpn-required {
    background-color: var(--tag-vpn-required-bg-colour);
    color: var(--tag-vpn-required-text-colour)
}

.tag-varies {
    background-color: var(--tag-varies-bg-colour);
    color: var(--dark-white);
}

.tag-language-all {
    border: 1px solid var(--dark-secondary);
    background-color: var(--dark-primary);
    color: var(--dark-white);
}

.tag-russian {
    background-color: var(--tag-russian-bg-colour);
    color: var(--tag-russian-text-colour);
}

.tag-estonian {
    background-color: var(--tag-estonian-bg-colour);
    color: var(--tag-estonian-text-colour);
}

.tag-irish {
    background-color: var(--tag-irish-bg-colour);
    color: var(--tag-irish-text-colour);
}

.tag-korean {
    background-color: var(--tag-korean-bg-colour);
    color: var(--tag-korean-text-colour);
}

.tag-english, .tag-english-usa, .tag-english-uk, .tag-english-ca {
    background-color: var(--tag-english-bg-colour);
    color: var(--tag-english-text-colour);
}

.tag-arabic {
    background-color: var(--tag-arabic-bg-colour);
    color: var(--tag-arabic-text-colour);
}

.tag-italian {
    background-color: var(--tag-italian-bg-colour);
    color: var(--tag-italian-text-colour);
}

.tag-portuguese, .tag-portuguese-br, .tag-portuguese-pt {
    background-color: var(--tag-portuguese-bg-colour);
    color: var(--tag-portuguese-text-colour);
}

.tag-hindi, .tag-bengali, .tag-kannada, .tag-malayalam, .tag-marathi, .tag-punjabi {
    background-color: var(--tag-hindi-bg-colour);
    color: var(--tag-hindi-text-colour);
}

.tag-sinhala {
    background-color: var(--tag-sinhala-bg-colour);
    color: var(--tag-sinhala-text-colour);
}

.tag-german {
    background-color: var(--tag-german-bg-colour);
    color: var(--tag-german-text-colour);
}

.tag-french, .tag-french-qc, .tag-french-fr {
    background-color: var(--tag-french-bg-colour);
    color: var(--tag-french-text-colour);
}

.tag-swedish {
    background-color: var(--tag-swedish-bg-colour);
    color: var(--tag-swedish-text-colour);
}

.tag-norwegian {
    background-color: var(--tag-norwegian-bg-colour);
    color: var(--tag-norwegian-text-colour);
}

.tag-spanish, .tag-spanish-es, .tag-spanish-la {
    background-color: var(--tag-spanish-bg-colour);
    color: var(--tag-spanish-text-colour);
}

.tag-polish {
    background-color: var(--tag-polish-bg-colour);
    color: var(--tag-polish-text-colour);
}

.tag-romanian {
    background-color: var(--tag-romanian-bg-colour);
    color: var(--tag-romanian-text-colour);
}

.tag-japanese {
    background-color: var(--tag-japanese-bg-colour);
    color: var(--tag-japanese-text-colour);
}

.tag-turkish {
    background-color: var(--tag-turkish-bg-colour);
    color: var(--tag-turkish-text-colour);
}

.tag-afrikaans {
    background-color: var(--tag-afrikaans-bg-colour);
    color: var(--tag-afrikaans-text-colour);
}

.tag-albanian {
    background-color: var(--tag-albanian-bg-colour);
    color: var(--tag-albanian-text-colour);
}

.tag-basque {
    background-color: var(--tag-basque-bg-colour);
    color: var(--tag-basque-text-colour);
}

.tag-valencian {
    background-color: var(--tag-valencian-bg-colour);
    color: var(--tag-valencian-text-colour);
}

.tag-cantonese {
    background-color: var(--tag-cantonese-bg-colour);
    color: var(--tag-cantonese-text-colour);
}

.tag-catalan {
    background-color: var(--tag-catalan-bg-colour);
    color: var(--tag-catalan-text-colour);
}

.tag-dutch {
    background-color: var(--tag-dutch-bg-colour);
    color: var(--tag-dutch-text-colour);
}

.tag-taiwanese {
    background-color: var(--tag-taiwanese-bg-colour);
    color: var(--tag-taiwanese-text-colour);
}

.tag-persian {
    background-color: var(--tag-persian-bg-colour);
    color: var(--tag-persian-text-colour);
}

.tag-tamil {
    background-color: var(--tag-tamil-bg-colour);
    color: var(--tag-tamil-text-colour);
}

.tag-telugu {
    background-color: var(--tag-telugu-bg-colour);
    color: var(--tag-telugu-text-colour);
}

.tag-ukranian {
    background-color: var(--tag-ukranian-bg-colour);
    color: var(--tag-ukranian-text-colour);
}

.tag-mandarin {
    background-color: var(--tag-mandarin-bg-colour);
    color: var(--tag-mandarin-text-colour);
}

.tag-vietnamese {
    background-color: var(--tag-vietnamese-bg-colour);
    color: var(--tag-vietnamese-text-colour);
}

.tag-czech {
    background-color: var(--tag-czech-bg-colour);
    color: var(--tag-czech-text-colour);
}

.tag-hungarian {
    background-color: var(--tag-hungarian-bg-colour);
    color: var(--tag-hungarian-text-colour);
}

.tag-finnish {
    background-color: var(--tag-finnish-bg-colour);
    color: var(--tag-finnish-text-colour);
}

.tag-hebrew {
    background-color: var(--tag-hebrew-bg-colour);
    color: var(--tag-hebrew-text-colour);
}

.tag-icelandic {
    background-color: var(--tag-icelandic-bg-colour);
    color: var(--tag-icelandic-text-colour);
}

.tag-lakota {
    background-color: var(--tag-lakota-bg-colour);
    color: var(--tag-lakota-text-colour);
}

.tag-danish {
    background-color: var(--tag-danish-bg-colour);
    color: var(--tag-danish-text-colour);
}

.tag-bulgarian {
    background-color: var(--tag-bulgarian-bg-colour);
    color: var(--tag-bulgarian-text-colour);
}

.tag-greek {
    background-color: var(--tag-greek-bg-colour);
    color: var(--tag-greek-text-colour);
}

.tag-slovak {
    background-color: var(--tag-slovak-bg-colour);
    color: var(--tag-slovak-text-colour);
}

.tag-slovene {
    background-color: var(--tag-slovene-bg-colour);
    color: var(--tag-slovene-text-colour);
}

.tag-uzbek {
    background-color: var(--tag-uzbek-bg-colour);
    color: var(--tag-uzbek-text-colour);
}

.tag-thai {
    background-color: var(--tag-thai-bg-colour);
    color: var(--tag-thai-text-colour);
}

.tag-indonesian {
    background-color: var(--tag-indonesian-bg-colour);
    color: var(--tag-indonesian-text-colour);
}

.tag-croatian {
    background-color: var(--tag-croatian-bg-colour);
    color: var(--tag-croatian-text-colour);
}

.tag-tagalog {
    background-color: var(--tag-tagalog-bg-colour);
    color: var(--tag-tagalog-text-colour);
}

.tag-bengali {
    background-color: var(--tag-bengali-bg-colour);
    color: var(--tag-bengali-text-colour);
}

.tag-kannada {
    background-color: var(--tag-kannada-bg-colour);
    color: var(--tag-kannada-text-colour);
}

.tag-malayalam {
    background-color: var(--tag-malayalam-bg-colour);
    color: var(--tag-malayalam-text-colour);
}

.tag-marathi {
    background-color: var(--tag-marathi-bg-colour);
    color: var(--tag-marathi-text-colour);
}

.tag-punjabi {
    background-color: var(--tag-punjabi-bg-colour);
    color: var(--tag-punjabi-text-colour);
}

.tag-hokkien {
    background-color: var(--tag-hokkien-bg-colour);
    color: var(--tag-hokkien-text-colour);
}

.tag-malay {
    background-color: var(--tag-malay-bg-colour);
    color: var(--tag-malay-text-colour);
}

.tag-bhojpuri {
    background-color: var(--tag-bhojpuri-bg-colour);
    color: var(--tag-bhojpuri-text-colour);
}

.tag-odia {
    background-color: var(--tag-odia-bg-colour);
    color: var(--tag-odia-text-colour);
}

.tag-urdu {
    background-color: var(--tag-urdu-bg-colour);
    color: var(--tag-urdu-text-colour);
}

/* Media Queries */

@media screen and (max-width: 1000px) {
    .list-media-tag {
        min-height: 24px;
    }

    .list-media-tags-icon {
        width: 16px;
    }
}

@media screen and (max-width: 1200px) {
    .page-note {
        margin: 16px 0px;
        flex-direction: column;
    }

    .page-note button, .page-note h1 {
        padding: 8px;
        margin: 8px;
        font-size: 20px;
    }
}

@media screen and (max-width: 600px) {
    .page-note button, .page-note h1 {
        font-size: 16px;
    }
}