@import url('https://fonts.cdnfonts.com/css/futura-pt');

@font-face {
    font-family: "Tw Cen MT";
    src: url("./assets/fonts/Tw\ Cen\ MT.ttf");
}
@font-face {
    font-family: 'Futura';
    font-style: normal;
    font-weight: 400;
    src: local('Futura'), url('https://fonts.cdnfonts.com/s/37773/FUTURA55REGULAR.woff') format('woff');
}

#category-dropdown,
#section-dropdown,
#item-dropdown {
    text-align: center;
}

.bordered-text {
    border: 2px solid #DCBD88;
    padding: 7px;
    border-radius: 10px;
}

#loader, #loaderLBL {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    color: rgba(255, 255, 200, 255) !important;
    filter: drop-shadow(1px 1px 1px black) drop-shadow(0 0 2px black);
    }
#loaderHL {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: example;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}
html {
    background-color: #05080B;
}
body {
    color: rgba(255, 255, 200, 255);
    background-color: #05080B;
    font-family: "Futura PT", "Tw Cen MT", sans-serif;
    font-weight: 450;
    font-size: 0.92rem;
    line-height: 22px;
    /* line-height: 1.8vh; */
}
.nav-tabs {
    border: 0;
}

.nav-tabs .nav-link {
    border: none;
    background: transparent;
    padding: 0px 2px 0px 2px;
}


.nav-tabs .nav-link img {
    width: 48px;
    /* width: 2.5vw; */
}

.nav-item .nav-link {
    margin-top: 8px;
}

.nav-item .nav-link:hover,
.nav-item .nav-link.active {
    margin-top: 0px;
    background: none;
}

.nav-tabs .nav-item .active img,
.nav-tabs .nav-item .nav-link:hover img {
    filter: grayscale(0);
}


#civilopedia-topbar {
    border-width: 0px 38;
    border-image: url("./assets/images/fancytrim1024.png");
    border-image-width: 2rem 5rem;
    border-image-slice: 19 50 fill;
    border-image-repeat: initial;
    font-size: 1.5rem;
}



.subheading {
    background-image: url("./assets/images/civilopediatoptitle.png");
}

.subheading-row {
    border: 3px solid #E3C37D;
}

.subheading-middle {
    border-left: 0.2rem solid #E3C37D;
    border-right: 0.2rem solid #E3C37D;
}

.accordion {
    background-color: #041514;
    border-left: 0.3rem solid #E3C37D;
    border-right: 0.3rem solid #E3C37D;
    min-height: calc(100vh - 130px);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.desktop-content-area{
    border-right: 0.3rem solid #E3C37D;
    min-height: calc(100vh - 130px);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}


#desktop-content {
    --mwidth: 100vw;
}

@media only screen and (min-width: 1280px) {
    #desktop-content{
        margin-left: 9.5vw;
        margin-right: 9.5vw;
        --mwidth: 81vw;
    }
}

@media only screen and (min-width: 1366px) {
    #desktop-content{
        margin-left: 12.5vw;
        margin-right: 12.5vw;
        --mwidth: 75vw;
    }
}

@media only screen and (min-width: 1440px) {
    #desktop-content{
        margin-left: 14vw;
        margin-right: 14vw;
        --mwidth: 72vw;
    }
}

@media only screen and (min-width: 1680px) {
    #desktop-content{
        margin-left: 19vw;
        margin-right:19vw;
        --mwidth: 62vw;
    }
}

@media only screen and (min-width: 1920px) {
    #desktop-content{
        margin-left: 23vw;
        margin-right:23vw;
        --mwidth: 56vw;
    }
}

.accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right: 0.5em;
    background-image: url("./assets/images/icon_images/Civ5Icon.Plus.png");
    transition: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("./assets/images/icon_images/Civ5Icon.Minus.png");
}

.accordion-button {
    border-width: 0px 38px;
    border-image: url("./assets/images/listheader_normal.png");
    border-image-width: 8px 0px;
    border-image-slice: 30% 40% fill;
    border-image-repeat: initial;
    font-size: 1rem;
    font-weight: 450;
    color: rgba(255, 255, 200, 255) !important;
}

.accordion-button:hover {
    border-width: 0px 38px;
    border-image: url("./assets/images/listheader_active.png");
    border-image-width: 8px 0px;
    border-image-slice: 30% 48% fill;
    border-image-repeat: initial;
}

.accordion-item {
    background-color: #082927;
}

.collapsing {
    transition: none;
}

#language-dropdown-desktop {
    color: rgba(255, 255, 200, 255);
}

.list-group-item {
    background-color: #041514;
    padding: 0px;
    padding-left: 15px !important;
    margin: 1px 0px 1px 0px;
    font-size: 1rem;
    color: rgba(255, 255, 200, 255) !important;
}

.list-group-item:hover, .dropdown-item:hover {
    border-image: url("./assets/images/civilopediasidebuttons272x22hl.png");
    border-image-width: 8px 0px;
    border-image-slice: 30% 40% fill;
    border-image-repeat: initial;
    font-size: 1rem;
    color: rgba(255, 255, 200, 255) !important;
    animation-name: example;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}


@keyframes example {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.65;
    }
}

::-webkit-scrollbar {
    width: 1.15rem;
    border: 1px solid #B19455;
}

::-webkit-scrollbar-thumb {
    width: 1rem;
    border-top: 2px solid #B19455;
    border-bottom: 2px solid #B19455;
    background-color: #0C3631;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    background-clip: content-box;
}


::-webkit-scrollbar-button:single-button:vertical:decrement {
    background: url("./assets/images/scrollbarup_icon.png") no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background: url("./assets/images/scrollbarup_icon_active.png") no-repeat;
}


::-webkit-scrollbar-button:single-button:vertical:increment {
    background: url("./assets/images/scrollbardown_icon.png") no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background: url("./assets/images/scrollbardown_icon_active.png") no-repeat;
}

.accordion-button {
    border-width: 0px 38px;
    border-image: url("./assets/images/listheader_normal.png");
    border-image-width: 8px 0px;
    border-image-slice: 30% 40% fill;
    border-image-repeat: initial;
    font-size: 1rem;
    color: rgba(255, 255, 200, 255) !important;
}

.accordion-button:hover {
    border-width: 0px 38px;
    border-image: url("./assets/images/listheader_active.png");
    border-image-width: 8px 0px;
    border-image-slice: 30% 48% fill;
    border-image-repeat: initial;
}

.accordion .list-group-item.active {
    border-image: url("./assets/images/civilopediasidebuttons272x22hl.png");
    border-image-width: 8px 0px;
    border-image-slice: 30% 40% fill;
    border-image-repeat: initial;
    border-top-width: 0;
    margin-top: 1px;
}

* {
    cursor: url("./assets/images/Pointer.png"), auto !important;
}


.item-title{
    font-size: 1.25rem;
    border-width: 0px 38px;
    border-image: url("./assets/images/civilopediatitle_copy.png");
    border-image-width: 32px 50px;
    border-image-slice: 18 30 fill;
    border-image-repeat: initial;
}
.info-box-title{
    font-size: 1.1rem;
}

.info-box-content{
    font-size: 1.0rem;
}


/* .small-image:hover{
    border-radius: 50%;
    background-color: #E3C37D;
} */


.icon{
    width: 1.3rem;
    height: 1.3rem;
}


/* CSS for Top Category Nav Tabs */
.nav-link.active img[src*="category_home_icon"],
.nav-link:hover img[src*="category_home_icon"] {
    content: url(./assets/images/category_home_icon_active.png);
}

.nav-link.active img[src*="category_concepts_icon"],
.nav-link:hover img[src*="category_concepts_icon"] {
    content: url(./assets/images/category_concepts_icon_active.png);
}

.nav-link.active img[src*="category_tech_icon"],
.nav-link:hover img[src*="category_tech_icon"] {
    content: url(./assets/images/category_tech_icon_active.png);
}

.nav-link.active img[src*="category_units_icon"],
.nav-link:hover img[src*="category_units_icon"] {
    content: url(./assets/images/category_units_icon_active.png);
}

.nav-link.active img[src*="category_promotions_icon"],
.nav-link:hover img[src*="category_promotions_icon"] {
    content: url(./assets/images/category_promotions_icon_active.png);
}

.nav-link.active img[src*="category_buildings_icon"],
.nav-link:hover img[src*="category_buildings_icon"] {
    content: url(./assets/images/category_buildings_icon_active.png);
}

.nav-link.active img[src*="category_wonders_icon"],
.nav-link:hover img[src*="category_wonders_icon"] {
    content: url(./assets/images/category_wonders_icon_active.png);
}

.nav-link.active img[src*="category_social_icon"],
.nav-link:hover img[src*="category_social_icon"] {
    content: url(./assets/images/category_social_icon_active.png);
}

.nav-link.active img[src*="category_great_icon"],
.nav-link:hover img[src*="category_great_icon"] {
    content: url(./assets/images/category_great_icon_active.png);
}

.nav-link.active img[src*="category_civs_icon"],
.nav-link:hover img[src*="category_civs_icon"] {
    content: url(./assets/images/category_civs_icon_active.png);
}

.nav-link.active img[src*="category_citystates_icon"],
.nav-link:hover img[src*="category_citystates_icon"] {
    content: url(./assets/images/category_citystates_icon_active.png);
}

.nav-link.active img[src*="category_terrain_icon"],
.nav-link:hover img[src*="category_terrain_icon"] {
    content: url(./assets/images/category_terrain_icon_active.png);
}

.nav-link.active img[src*="category_resources_icon"],
.nav-link:hover img[src*="category_resources_icon"] {
    content: url(./assets/images/category_resources_icon_active.png);
}

.nav-link.active img[src*="category_improvements_icon"],
.nav-link:hover img[src*="category_improvements_icon"] {
    content: url(./assets/images/category_improvements_icon_active.png);
}

.nav-link.active img[src*="category_religion_icon"],
.nav-link:hover img[src*="category_religion_icon"] {
    content: url(./assets/images/category_religion_icon_active.png);
}

.nav-link.active img[src*="category_congress_icon"],
.nav-link:hover img[src*="category_congress_icon"] {
    content: url(./assets/images/category_congress_icon_active.png);
}

#pedia-search {
    background-color: inherit;
    border: none;
    color: inherit;
    width: 150px;
}

.search-area {
    display: inline-grid;
}

.ui-menu-item-wrapper {
    background-color: #041514;
    color: rgba(255, 255, 200, 255);
    font-family: "Futura PT", "Tw Cen MT", sans-serif;
    font-weight: 450;
    font-size: 0.92rem;
    line-height: 22px;
}

.ui-menu-item-wrapper.ui-state-active {
    background: #0C3631;
    border: none;
    color: rgba(255, 255, 200, 255);
    font-weight: inherit;
    margin: 0;
}

.ui-widget.ui-widget-content {
    background-color: #041514;
    border: 1px solid #E3C37D;
}

.ui-autocomplete {
    max-height: calc(max(30vh, 200px));
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
}

#backbutton, #forwardbutton {
    background-color: inherit;
    border: none;
    margin-bottom: -3px;
    margin-top: -3px;
}

#backbutton:hover, #forwardbutton:hover {
    filter: drop-shadow(0 0 4px rgb(255, 255, 200));
}
#backbutton:active, #forwardbutton:active {
    transform: scale(0.9);
}

.tt-no-bg .tooltip-inner {
    background: #0000;
    color: rgba(255, 255, 200, 255);
    filter: drop-shadow(0 0 5px #ffffffff);
    font-family: "Futura PT", "Tw Cen MT", sans-serif;
    font-weight: 450;
    font-size: 0.92rem;
    line-height: 22px;
}

.img-fluid {
    transform: scale(1.2);
}

.dropdown-menu {
    background: #041514;
}

.dropdown-item {
    color: rgba(255, 255, 200, 255);
}

.patch-changelog ul {
    margin-bottom: 0;
}

.patch-changelog sub {
    color: rgb(255,76,76);
    font-size: 0.8rem;
    line-height: 2rem;
}

.strike, del {
    text-decoration: underline;
    text-underline-offset: -0.6ex;
    text-decoration-skip-ink: none;
}

del img:not(.icon) {
    filter: drop-shadow(0 0 3px red) drop-shadow(0 0 3px red) drop-shadow(0 0 3px red);
}

ins {
    text-decoration: none;
    font-style: italic;
}

ins img:not(.icon) {
    filter: drop-shadow(0 0 3px green) drop-shadow(0 0 3px green) drop-shadow(0 0 3px green);
}

ins.small-image, del.small-image {
    width: calc(var(--mwidth)/20);
    min-width: 40px;
}

#current_heading, h1, h2, h3, h4, h5, h6 {
    font-weight: 450;
}
.icon-cont {
    position: relative;
}
del .icon-cont::after {
    position: absolute;
    content: '';
    border-bottom: 1px solid rgb(255, 255, 200);
    left: -1px;
    right: -1px;
    bottom: 1.2ex;
}
 a {
     color: inherit;
 }

 a:hover {
     color: rgba(255, 255, 140, 255);
 }

 .tooltip-inner a {
     text-decoration-line: none;
 }