* {
    font-family: sans-serif, Verdana, Arial, Helvetica;
}
html {
    scroll-padding-top: 50px;
    scroll-behavior: smooth;
}
body {
    background-attachment: fixed;
    background-color: #000000;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("https://crackingtheARV.com/styles/cta-bootstrap/assets/images/background.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 100vh;
    text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
}

/************************************************ Screen Width Breakpoints *****************************************/

/************************************************ Extra Small ******************************************************/
button.navbar-toggler {
    display: block;
}
div#homepage div#site-navigation,
div#forum div#site-navigation, 
div#topic div#site-navigation, 
div#phpbb-pages-ext div#site-navigation, 
div#posting div#site-navigation {
    background-color: rgba(0, 0, 0, 0.85);
    max-height: calc(100dvh - 62px);
    min-height: calc(100dvh - 62px);
    overflow-y: auto;
    position: fixed;
    top: 68px;
}
/* Tooltip Background */
.tooltip {
    --bs-tooltip-bg: #FFFFFF;
    --bs-tooltip-opacity: 1;
}
/*
.topic-grid {
    display: flex;
    align-items: flex-start;
}

.topic-left {
    flex: 0 0 auto;
}

.topic-right {
    flex: 1 1 auto;
    min-width: 0;
}

.topic-badges {
    list-style: none;
}

.topic-badges li {
    margin-bottom: .5rem;
}*/

/************************************************ Small ************************************************************/
@media (min-width: 576px) { 
    .topic-grid {
        display: grid !important;
        grid-template-columns: auto auto auto 1fr;
        grid-template-rows: min-content 1fr;
        grid-template-areas:
            "image title badges ."
            "image snippets snippets snippets";
        align-items: start;
    }
    div.topic-badges-image,
    div.topic-name-snippets {
        display: contents;
    }
    a.topic-image {
        grid-area: image;
    }
    div.topic-title {
        grid-area: title;
    }
    ul.topic-badges {
        grid-area: badges;
    }
    ul.topic-snippets {
        grid-area: snippets;
    }
}

/************************************************ Medium ***********************************************************/
@media (min-width: 768px) {
}

/************************************************ Large ************************************************************/
@media (min-width: 992px) {
    body:has(#homepage) button.navbar-toggler,
    body:has(#forum) button.navbar-toggler,
    body:has(#phpbb-pages-ext) button.navbar-toggler,
    body:has(#posting) button.navbar-toggler,
    body:has(#topic) button.navbar-toggler {
        display: none;
    }
    div#homepage div#site-navigation, 
    div#forum div#site-navigation, 
    div#phpbb-pages-ext div#site-navigation, 
    div#posting div#site-navigation,
    div#topic div#site-navigation {
        background: transparent;
        position: static;
    }
}

/************************************************ Extra Large ******************************************************/
@media (min-width: 1200px) {
}

/************************************************ Extra Extra Large ************************************************/
@media (min-width: 1400px) {
    div#forum div#site-navigation, 
    div#topic div#site-navigation {
        background: transparent;
        position: static;
    }
}

/*************************************************** Dynamic Font Sizes ********************************************/

@media (max-width: 2599px) {
    .dynamic-header-font {
        font-size: 2.5rem;
    }
    .dynamic-font {
        font-size: 2rem;
    }
}
/*@media (max-width: 2399px) {
    .dynamic-header-font {
        font-size: 2.25rem;
    }
    .dynamic-font {
        font-size: 2rem;
    }
}*/
@media (max-width: 2199px) {
    .dynamic-header-font {
        font-size: 2.25rem;
    }
    .dynamic-font {
        font-size: 1.75rem;
    }
}
/*@media (max-width: 1999px) {
    .dynamic-header-font {
        font-size: 2rem;
    }
    .dynamic-font {
        font-size: 1.75rem;
    }
}*/
@media (max-width: 1799px) {
    .dynamic-header-font {
        font-size: 2rem;
    }
    .dynamic-font {
        font-size: 1.5rem;
    }
}
/*@media (max-width: 1599px) {
    .dynamic-header-font {
        font-size: 1.75rem;
    }
    .dynamic-font {
        font-size: 1.5rem;
    }
}*/
@media (max-width: 1399px) {
    .dynamic-header-font {
        font-size: 1.75rem;
    }
    .dynamic-font {
        font-size: 1.25rem;
    }
}
/*@media (max-width: 1199px) {
    .dynamic-header-font {
        font-size: 1.5rem;
    }
    .dynamic-font {
        font-size: 1.25rem;
    }
}*/
@media (max-width: 991px) {
    .dynamic-header-font {
        font-size: 1.5rem;
    }
    .dynamic-font {
        font-size: 1rem;
    }
}
/*@media (max-width: 767px) {
    .dynamic-header-font {
        font-size: 1.25rem;
    }
    .dynamic-font {
        font-size: 1rem;
    }
}
@media (max-width: 575px) {
    .dynamic-header-font {
        font-size: 1.25rem;
    }
    .dynamic-font {
        font-size: 1rem;
    }
}*/

/*************************************************** index_body.html ***********************************************/





@media (max-width: 767px) {
    div#homepage div.carousel-caption h5.fs-2 {
        font-size: 1.25rem !important;
    }
}
@media (max-width: 575px) {
    div#homepage h2#top-call-to-action span.fs-4 {
        font-size: 1.25rem !important;
    }
    div#homepage div.carousel-caption h5.fs-2 {
        font-size: 1rem !important;
    }
    div#tldr {

    }
}

div.carousel-item img {
    max-width: 1300px;
}



/*************************************************** header.html ***************************************************/


/*************************************************** site-navigation.html *******************************************/



/************************************************* main - viewforum.html / viewtopic.html *******************************/

main#article > .mw-parser-output {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
    column-gap: 20px;
    align-items: start;
}
main#article > .mw-parser-output > #toc {
    grid-column: 1;
    grid-row: 1 / span 9999;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Place every article element in the right 75% column */
main#article > .mw-parser-output > :not(#toc) {
    grid-column: 2;
}

main#article > .mw-parser-output > #toc {
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

main#article > .mw-parser-output > #toc {
    grid-column: 1;
    grid-row: 1 / span 9999;
    position: sticky;
    top: 60px;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-sizing: border-box;
}

main#article #toc .toctitle {
    display: block;
    width: 100%;
}

main#article #toc .toctitle h2 {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

main#article #toc > ul {
    display: block;
    width: 100%;
    clear: both;
}

@media (max-width: 991px) {
    main#article > .mw-parser-output {
        display: block;
    }

    main#article > .mw-parser-output > #toc {
        position: static;
        width: 100%;
        max-height: none;
        margin-bottom: 20px;
    }
}











/************************************************************************************************************************/

#pills-primer > .mw-parser-output {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
    column-gap: 20px;
    align-items: start;
}

/* Place the Contents in the left 25% column */
#pills-primer > .mw-parser-output > #toc {
    grid-column: 1;
    grid-row: 1 / span 9999;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Place every article element in the right 75% column */
#pills-primer > .mw-parser-output > :not(#toc) {
    grid-column: 2;
}

#pills-primer > .mw-parser-output > #toc {
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

#pills-primer > .mw-parser-output > #toc {
    grid-column: 1;
    grid-row: 1 / span 9999;
    position: sticky;
    top: 60px;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-sizing: border-box;
}

#pills-primer #toc .toctitle {
    display: block;
    width: 100%;
}

#pills-primer #toc .toctitle h2 {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

#pills-primer #toc > ul {
    display: block;
    width: 100%;
    clear: both;
}

@media (max-width: 991.98px) {
    #pills-primer > .mw-parser-output {
        display: block;
    }

    #pills-primer > .mw-parser-output > #toc {
        position: static;
        width: 100%;
        max-height: none;
        margin-bottom: 20px;
    }
}



/************************************************************************************************************************/









div#search-box-mobile {
    display: none;
}
div#navbarForumList {
    font-weight: normal;
}
div#navbarForumList li {
    list-style-type: none;
}
div#navbarForumList ol.top-10-uap-personalities li {
    list-style-type: decimal;
}

.navbar .dropdown-menu {
    max-width: 100vw;
    right: 0;
    left: auto;
    position: absolute;
    z-index: 1; 
}


div#toc {
    background: rgba(255,255,255,0.250);
    backdrop-filter: blur(6px) brightness(1.5) saturate(1.1);
    border-radius: 6px;
    /*background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px) brightness(1.5) saturate(1.1);
    border-radius: 6px;*/
    display: block;
    margin-bottom: 18px; 
    padding: 4px 4px 1px 4px;
    width: 25%;
}
div.toctitle {
    margin: 0px;
    padding: 0px;
}
h2#mw-toc-heading {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0px;
    padding: 7px 0px 0px 8px;
}
span.toctogglespan {
    display: none;
}

div.toc ul { font-size: 0.875rem; font-weight: bold; list-style-type: decimal; list-style-position: outside; padding-left: 24px; }
div.toc ul ul { list-style-type: lower-alpha; }
div.toc ul ul ul { list-style-type: lower-roman; }
div.toc ul ul ul ul { list-style-type: disc; }
div#toc ul li {
    color: #FFFFFF;
    font-size: 0.875rem;
    padding: 1px 0px 1px 4px;
}
div#toc ul a {
    color: #FFFFFF;
    font-size: 0.875rem;
    text-decoration: none;
}
.tocnumber {
    display: none;
}


.fs-7 {
    font-size: 0.875rem;
}
.fs-8 {
    font-size: 0.75rem;
}
.glass-background {
    background: rgba(255,255,255,0.250);
    backdrop-filter: blur(6px) brightness(1.5) saturate(1.1);
    border-radius: 6px;
}
.glass-background .btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}
.glass-background .btn-success:hover {
  background-color: #157347 !important; /* Bootstrap’s hover shade */
  border-color: #146c43 !important;
}
.glass-background .btn-success:active,
.glass-background .btn-success:focus {
  background-color: #146c43 !important;
  border-color: #13653f !important;
  box-shadow: 0 0 0 .25rem rgba(25,135,84,.5);
}
.dark-glass-background {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(6px) brightness(1.5) saturate(1.1);
    border-radius: 6px;
}
.hover-glass-background:hover {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(6px) brightness(1.5) saturate(1.1);
    border-radius: 6px;
}
div.wiki-embed {
    
}
div.learn-more {
    margin-bottom: 30px;
}
div#collapseWikiText {
    margin-top: 12px;
}
button.expand-bar {
    width: 100%;
}
button.expand-bar img {
    height: 20px;
}

img.navbar-icons {
    height: 30px;
    width: 30px
}

button#logged-in-avatar img {
    height: 38px;
    width: 38px;
}

ul.list-style-type-none {
    list-style-type: none;
}

a.no-underline, a.no-underline:hover {
    text-decoration: none;
}

a:link, a:visited {
    color: #FFFFFF;
}
a:hover {
    text-decoration: underline dotted;
}
br.clear {
    clear: both;
}
.hidden {
    display: none;
}



.pills-secondary .nav-link:not(.active) {
  background-color: var(--bs-secondary);
  color: var(--bs-white);
}
.pills-secondary .nav-link.active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}


div.topic-description ul li {
  list-style-type: disc;
}

/* Homepage SNIPPET */
/*div.homepage-snippet div div ul {
    list-style-type: none;
}
div.homepage-snippet div div ul li:first-child {
    margin-top: 6px;
}
div.homepage-snippet div div ul li {
    line-height: 105%;
    margin-bottom: 8px;
    margin-right: 8px;
}
div.homepage-snippet div div ul li:last-child {
    margin-bottom: 0px;
}
img.snippet-thumbnail {
    height: 133px;
    width: 100px;
}
div.homepage-snippet div.badges a, div.badges span {
    color: #000000 !important;
    text-decoration: none;
}
@media (max-width: 576px) {
    div.homepage-snippet div.badges {
        margin-left: 0.5rem;
    }
    div.homepage-snippet div.badges a:first-child {
        margin-left: 0.25rem;
    }
}*/


/* SNIPPET */
img.snippet-thumbnail {
    height: 133px;
    width: 100px;
}
ul.badges-horizontal, ul.badges-horizontal li, ul.badges, ul.badges li {
    display: inline;
}
ul.badges-vertical {
    display: none;
    list-style-type: none;
}
@media (max-width: 576px) {
    ul.badges-horizontal, div.badges-horizontal {
        display: none;
    }
    ul.badges-vertical {
        display: block;
    }
}
/* TLDR */
div.group-members a {
    text-decoration: none;
}
img.tldr-portrait {
    max-height: 800px;
}
img.tldr-logo {
    max-height: auto;
    max-width: 600px;
}
ul.badges-tldr li {
    display: inline;
}
ul.badges-tldr li a {
    color: #000000 !important;
    text-decoration: none;
}
/* SNIPPET and TLDR */
ul.badges {
    color: #000000 !important;
    text-decoration: none;
}
div.topic-snippet div div ul.snippets, div.topic-tldr div div ul.tldrs, ul.tldrs, ul.snippets {
    list-style-type: none;
}
div.topic-snippet div div ul.snippets li:first-child, div.topic-tldr div div ul.tldrs li:first-child, ul.tldrs li:first-child, ul.snippets li:first-child {
    margin-top: 6px;
}
div.topic-snippet div div ul.snippets li, div.topic-tldr div div ul.tldrs li, ul.snippets li, ul.tldrs li {
    line-height: 105%;
    margin-bottom: 8px;
    margin-right: 8px;
}
div.topic-snippet div div ul.snippets li:last-child, div.topic-tldr div div ul.tldrs li:last-child, ul.snippets li:last-child, ul.tldrs li:last-child {
    margin-bottom: 0px;
}

/* Media */
.youtube-cover {
    height: 100%;
    position: absolute;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.youtube-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-play-button {
    background-image: url("https://uapedia.wiki/styles/ufo-bootstrap/assets/images/youtube-play-button.webp");
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
}


/* Depricated */
ul.badges li a, div.badges-horizontal a, ul.badges-horizontal li a, ul.badges-vertical li a {
    color: #000000 !important;
    text-decoration: none;
}
@media (max-width: 576px) {
    div.badges-horizontal {
        margin-left: 0.5rem;
    }
    div.badges-horizontal a:first-child {
        margin-left: 0.25rem;
    }
}
/* Legacy SNIPPT */
ul.topic-snippet {
    list-style-type: none;
}
ul.topic-snippet li:first-child {
    margin-top: 6px;
}
ul.topic-snippet li {
    line-height: 105%;
    margin-bottom: 8px;
    margin-right: 8px;
}
ul.topic-snippet li:last-child {
    margin-bottom: 0px;
}
/* Legacy TLDR */
div.container div.mw-content-ltr ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
div.container div.mw-content-ltr ul li:first-child {
    margin-top: 6px;
}
div.container div.mw-content-ltr ul li {
    /*font-size: 1rem;*/
    line-height: 105%;
    margin-bottom: 8px;
    margin-right: 8px;
}
div.container div.mw-content-ltr ul li:last-child {
    margin-top: 6px;
}
div.badges a, ul.badges li a {
    color: #000000 !important;
    text-decoration: none;
}




/* Mediawiki Image Wrapper Classes */
span.img-fluid img {
    max-width: 100%;
    height: auto;
    display: block;
}
span.portrait img {
    height: auto;
    width: 200px;
}
header.tagline {
    font-size: 1.5rem;
}
@media (max-width: 1200px) { /* md and up */
    header.tagline {
        font-size: 0.875rem;
    }
    span.w-100 img {
        height: auto;
        width: 100%;
    }
}

/* Items to Display on Mobile Devices */
@media (max-width: 1200px) {
    div#account-info-mobile {
        display: block !important;
    }
    div#search-box-mobile {
        display: block;
    }
    .expand-bar {
        width: 100%;
    }
    div#toc {
        width: 100% !important;
    }
}
@media (max-width: 576px) {
#pills-tab .nav-link{
    min-height: 7.0rem;          /* tweak until it matches your 3-line pills */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;         /* allow wrapping */
    text-align: center;
}
}
div#account-info-mobile {
    display: none;
}
/* Items to Not Display on Mobile Devices */
@media (max-width: 1200px) {
    div#search-box-top {
        display: none;
    }
    div#account-info-top {
        display: none !important;
    }
    span.create-post-text {
        display: none;
    }
    span.create-reply-text {
        display: none;
    }
    span.search-button-text {
        display: none;
    }
    span.advanced-search-button-text {
        display: none;
    }
    span.comment-text {
        display: none;
    }
    a.navbar-brand img.uap-image {
        /*display: none;*/
    }
    ul.select-content li button i, ul.select-content li button svg {
        display: none;
    }
}

img.avatar {
    border-radius: 50%;
    max-height: 75px;
    max-width: 75px;
}
button#google-add-preferred-source-site-nav-btn {
    max-width: 275px;
}
ul#tabs {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
}
button#google-add-preferred-source-site-nav-btn img, button#google-add-preferred-source-btn img {
    height: 20px;
    width: 20px;
}

.navbar-toggler-icon {
    font-size: 1em;
}
.navbar-brand img {
    height: 50px;
}