@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-message {
    font-size: 16px;
    color: var(--text-color);
    text-align: center;
    margin-top: 20px;
    align-items: center;
    gap: 10px;
    text-align: center;
    border: 3px solid transparent;
    justify-content: center;
    display: flex;
}

h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--background-third-color);
    background-color: var(--second-color);
    text-align: left;
    padding: 6px 0px 6px 4px;
    margin: 0px 0px 0px 0px;
}
h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--second-color);
    background-color: transparent;
    text-align: left;
    border-radius: 0px;
    border: 3px solid transparent;
    padding: 0px 0px 0px 0px;
    margin:0px 0px 5px 0;
}
#table_of_contents h1::after {
    content: "▾";
    margin-left: 0px;
    margin-right: 0px;
    font-size: 33px;
    display: inline-block;
    color: var(--background-third-color);
}
h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--second-color);
    background-color: transparent;
    text-align: left;
    border-radius: 0px;
    border: 3px solid transparent;
    padding: 0px 0px 0px 0px;
    margin:0px 0px 5px 0;
}
h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--second-color);
    border-bottom: 1px solid var(--second-color);
    text-align: left;
    padding: 6px 0px 6px 4px;
    margin: 0px 0px 0px 0px;
}
.resource_long {
    border: 3px solid var(--second-color);
    border-radius: 10px;
    background: var(--second-color);
}
.resource_item {
    margin: 10px 0px 15px 10px;
    border-radius: 10px;
    display: block;
}
.resource_item ul {
    margin: 0px 15px
}
.resource_short {
    background: var(--background-second-color);
    border-radius: 10px;
    margin: 10px 0;
    transition: ease-in-out 1s;
    position: relative;
    padding: 5px;
}
.resource_short p {
    padding: 10px;
}
.resource_longcontain {
    padding: 1px 10px 1px 10px;
    background: var(--background-first-color);
    border-radius: 8px;
    margin: 0px;
}
.resource_contain {
    padding: 5px 0px 5px 0px;
    display: inline-block;
}
.expand_identifier {
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}
.expand_identifier.expanded {
    max-height: 10000px;
    transition: max-height 0.5s ease-in-out;
    border-bottom: 2px double var(--second-color);
}
.resource_contain p {
    margin: 0;
    padding: 10px;
}
.resource_contain ul {
    margin: 10px 0 10px 10px;
}
.expand-link a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: grid;
}
.expand-link {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px 4px 4px 10px;
    display: grid;
    grid-template-columns: auto;
    align-content: space-around;
    text-align: center;
}
.expand-set {
    font-weight: bold;
    font-size: 36px;
    color: var(--second-color);
}
.expand-plus {
    --expand-content: "EXPAND"; /* Default content */
    position: relative;
    display: inline-block;
    padding: 5px 5px 10px 65px;;
    cursor: pointer;
    color: var(--link-color); /* Use --link-color for text color */
    font-size: 16px; /* Font size for the main text */
    overflow: hidden;
    position: absolute;
    top: -8px;
    right: 5px;
    margin: 5px 0;
}
.expand-plus::before {
    content: var(--expand-content);
    position: absolute;
    top: 50%;
    right: -100%; /* Initially positioned to the left, outside of .expand-set */
    transform: translateY(-50%);
    color: var(--link-color); /* Use --link-color for text color */
    font-size: 12px; /* Font size for the EXPAND text in ::before */
    white-space: nowrap;
    transition: right 0.3s ease-in-out; /* Smooth slide-in effect */
}
  
.expand-plus:hover::before {
    right: 50px; /* Slide into view */
}
.expand-link:hover .expand-plus::before {
    right: 50px; /* Slide into view */
}
a:hover.expand_ .expand-set {
    color: var(--link-color) !important;
}
.active-header {
    border-radius: 10px;
    margin: 10px 0;
    transition: ease-in-out 1s;
    border: 3px solid var(--link-color);
    transition: ease-in-out 1s;
    background: #067a871f;
}
.active-header h2 {
    opacity: .85;}
#resources {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 16px; 
}
#table_of_contents {
    transition: all 0.3s ease-in-out;
    border: 3px solid var(--second-color);
    top: 25px;
    margin-top: 44px;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    z-index: 5;   
    background-color: var(--second-color);
    border-radius: 8px;
    overflow: hidden;
    align-self: start;
    max-width: 450px;
}
#table_of_sitemap {
    transition: all 0.3s ease-in-out;
    border: 3px solid var(--second-color);
    background-color: var(--second-color);
    border-radius: 8px;
}
.resource_doc {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 10px;
}
#breadcrumbs {
    display: flex;
    align-items: center;
}
#toc_content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
    background-color: var(--background-second-color);
    border-radius: 8px;
}
#toc_sitemap {
    overflow-y: auto;

    transition: max-height 0.3s ease, opacity 0.3s ease;
    background-color: var(--background-second-color);
    border-radius: 8px;
}
  
#toc_content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}
#table_of_contents.fixed #toc_content {
    max-height: 80vh;
    overflow-y: auto;
    z-index: 9999;
} 
#table_of_contents h2 {
    font-size: 30px;
    margin: 0px;
}

#table_of_contents ul,
#table_of_sitemap ul {
    list-style-type: none;
    padding: 0;
    margin-left: 15px;
}
#table_of_contents ul ul,
#table_of_sitemap ul ul {
    list-style-type: none;
    margin-left: 25px;
}

#table_of_contents li,
#table_of_sitemap li {
    padding: 5px 0;
}

#table_of_contents .tableh1 {
    font-weight: bold;
    font-size: 1.5em;
}

#table_of_contents .tableh2 {
    font-weight: bold;
    font-size: 1.2em;
}

#table_of_contents .tableh3 {
    font-size: 1em;
}

#table_of_contents .tableh4 {
    font-size: 0.9em;
}
.example_con,
.example_con_bonus,
.example_con_alert {
    border-radius: 8px;
    width: fit-content;
    margin: 10px 10px 10px 0px
}
.example_con {
    border: 2px solid var(--second-color);
}
.example_head {
    padding: 5px;
    font-size: 24px;
    font-weight: bold;

}
.example_con .example_head {
    color: var(--background-second-color);
    background-color: var(--second-color);
}
.example_con_alert .example_head {
    color: var(--background-second-color);
    background-color: orange;
}
.example_con_bonus .example_head {
    color: var(--background-second-color);
    background-color: green;
}
.example_text {
    padding: 10px;
}
.example_text ul {
    padding-left: 30px;
    margin:0px;
}
.example_con_bonus {
    border: 2px solid green;
}
.example_con_alert {
    border: 2px solid orange;
}
  
  @media screen and (max-width: 1000px) {
    #table_of_contents {
        border: 3px solid var(--second-color);
        outline: 6px solid var(--background-second-color);
        font-size: 20px;
    }
    #table_of_contents.fixed {
        top: 10px;
        z-index: 9999;
        position: fixed;
        grid-column: 1;
        left: 10px;
        right: 10px; 
        width: calc(100% - 20px); 
        margin-top: 0px;
    }
    .resource_doc {
        margin-top:10px;
        grid-column: 1;
        grid-row: 2;
    }
    #resources {
        grid-template-columns: auto;
        gap: 0px;
    }
    #toc_content {
        font-size: 24px;
    }
    #toc_content.collapsed {
        max-height: calc(80vh - 3px) !important;
        opacity: 1;
        pointer-events: all;
    }
  
    #table_of_contents.fixed #toc_content:not(.collapsed),
    #toc_content:not(.collapsed) {
        max-height: 0px;
        opacity: 0;
        pointer-events: auto;
        z-index: 9999;

    }
    .resource_contain {
        font-size: 20px;
    }
    .resource_contain ul li {
        padding-bottom: 5px;
    }
    .media {
        width: 100%;
    }
  }

  .crumb,
  .crunbtop {
    text-transform: capitalize;
    font-weight: bold;
    color: var(--second-color);

  }
  .crumbbit {
	font-size: 15pt;
	border-radius: 6px;
	color: var(--second-color);
	text-align: center;
	align-items: center;
	padding: 4px 6px;
	width: fit-content;
	margin: 2px;
}
  
.loading-message::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 4px solid var(--second-color);
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
#resultsArea {
    display: none;
}
.results-container {
    text-align: center;
}
body {
    background-color: var(--main-color);
    color: var(--text-color);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    font-size: 24px;
}

a:link,a:visited {
    color: var(--second-color);
    transition: opacity .3s ease;
    text-decoration: none!important
}

a:active,a:hover {
    color: var(--link-color);
    opacity: 1;
    text-decoration: none!important
}

.reset {
    padding: 3px 10px;
    font-size: 14px;
    cursor: pointer
}

.reset a,.reset a:hover {
    color: var(--link-color);
    text-decoration: none
}

.reset a:hover {
    color: var(--hover-color)
}

.container {
    margin: 0 auto;
    width: 50%
}

.contenttitle,.posttitle {
    font-weight: 700;
    color: var(--link-color);
    /* background-color: var(--background-second-color); */
    text-align: left;
    border-bottom: 1px solid var(--background-main-color)
}
.subtitle {
    font-weight: 700;
    color: var(--link-color);
    /* background-color: var(--background-second-color); */
    text-align: left;
}

.contenttitle {
    font-size: 34px;
    padding: 10px 5px;
    margin: 5px 0 10px 0px;
    justify-content: space-between;
    display: flex;
}
.hwstitle {
 font-size: 34px;
  padding: 10px 5px;
  justify-content: space-between;
  display: flex;
  font-weight: 700;
  color: var(--background-second-color);
  text-align: left;
  border-bottom: 1px solid var(--background-second-color);
  margin-bottom: 15px;
}

.posttitle,.subtitle {
    font-size: 20px
}

.subtitle {
    /* padding: 15px 10px; */
    justify-content: space-between;
    display: flex
}
.maintitle {
    font-size: 30px;
    color: var(--alt-hover-color);
    background: var(--background-main-color);
    border-radius: 10px;
}

.posttitle {
    border-radius: 4px;
    padding: 6px 10px
}
.posted {
    font-size: 19px;
    font-weight: 400
}

.dateposted {
    font-weight: 400
}
.dateposted a {
    font-weight: bold;
    font-size: 19px;
}
.maintitle .dateposted a {
    color: var(--alt-hover-color);
}
.dateposted a:hover {
    color: var(--alt-link-color);
}
.pagecontent,.userpagecontent {
    padding: 5px;
    display: flow-root;
    position: relative;
    transition: max-height .3s ease-in-out;
    overflow: hidden;
}
.discordlimbo {
    color: var(--text-color);
    font-size: 19px;
    padding: 1px;
}
.flaircount {
    margin: 0;
    color: var(--background-alt-color);
    font-weight: normal;
    border-radius: 5px;
}
.flairuser {
    color: var(--second-color);
    margin: 0;
    font-weight: bold;
}
.notifyfont {
    font-size: 18px;
}
.flairuser:hover {
    color: var(--text-color);
    font-weight: 600;
}
.userpagecontent {
    padding: 10px
}
.welcometag {
    text-align: left;
    margin: auto;
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0000000f; */
    font-weight: bold;
    /* text-shadow: 0px 0px 36px #00c3d9; */
    color: var(--background-second-color);
    font-size: 18px;
}
.invitetag {
    text-align: left;
    margin-top: 20px
}

.overflow_elip {
    display: block !important;
    color: var(--link-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div,span {
    box-sizing: border-box
}

.postcontent {
    padding: 15px 10px;
    font-size: 12px
}

.postcontent ul {
    list-style: none;
    padding-left: 0;
    margin: 0
}
.flair_trade_log {
    max-width: 600px;
}

.list_space {
    margin: 5px 0px;
    display: block;
    align-items: center;
    display: grid;
    gap: 5px;
    grid-template-columns: auto 1fr auto auto;
}
.iconset-trade {
    color:var(--text-color);
}

.post_log_reddit a:hover .reddit {
    color: var(--reddit-color);
    background-color: transparent;
}

.post_log_discord a:hover .discord {
    color: var(--discord-color);
    background-color: transparent;
}


.postcontent li {
    padding: 3px
}

.content {
    border-radius: 10px;
    padding: 10px 10px 0px 10px;
    position: relative;
}

.guidecontent,.helpcontent,.resourcecontent,.widecontent {
    display: grid;
    justify-content: space-between;
    gap: 15px;
    margin: 10px 5px
}

.helpcontent {
    grid-template-columns: 1fr 1fr 1fr;
}

.guidecontent {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.widecontent {
    grid-template-columns: 1fr;
}

.resourcecontent {
    grid-template-columns: 1fr 1fr 1fr;
}

.support_contact {
    grid-template-rows: 1fr;
}

.support_contact,
.support_guide,
.support_hit,
.support_contact:visited,
.support_guide:visited,
.support_hit:visited {
    background-color: var(--second-color);
    border-radius: 10px;
    outline: 4px solid var(--second-color);
    color: var(--background-second-color) !important;
    padding: 10px;
    display: grid;
    transition: .3s ease-in-out!important;
    box-shadow: inset 5px 6px 27px #00000012;
    outline: 4px solid var(--background-second-color);
}
.support_contact:hover,
.support_guide:hover,
.support_hit:hover,
.support_resources:hover {
    outline: 4px solid var(--second-color);
    background-color: var(--background-third-color);
    color: var(--second-color) !important;
    transition: .3s ease-in-out!important;
}

#resources ul li a {
    color: var(--second-color);
}
#resources ul li a:hover {
    color: var(--link-color) !important;
}
.support_resources {
    border-radius: 10px;
    color: var(--alt-title-color);
    padding: 10px;
    display: grid;
    transition: .3s ease-in-out!important;
    box-shadow: inset 5px 6px 27px #00000012;
    text-align: center;
}
.support_hit,.support_resources {
    grid-template-rows: 1fr;
}

.support_hit {
    font-size: 16px;
    height: 120px;
}

.support_guide {
    height: 80px;
    grid-template-rows: 1fr;
}

.support_contact,.support_resources {
    height: 60px;
}


.subheader,.subheader_guide {
    font-size: 28px;
    font-weight: 700;
    /* text-shadow: 1px 1px 2px var(--alt-hover-color) */
}

.subheader_guide {
    font-size: 22px
}

.info_help {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.commontext {
    font-size: 18pt;
    color: var(--text-alt-color);
    display: inline-block;
    font-weight: normal;
}

.plus {
    font-size: 12pt
}

.plusplus {
    font-size: 20pt;
    gap: 10px
}

.datalist {
    font-size: 18pt;
    color: var(--text-alt-color)
}

.dataitem,.datanumber {
    font-size: 20pt;
    color: var(--link-color)
}

.datanumber {
    font-size: 16pt;
    font-weight: 600
}

.profile_grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 15px;
    margin: 10px 0;
    text-align: center;
    align-items: center
}

#nextButton,#prevButton {
    font-size: 30px
}

.pageList {
    margin: 3px 0;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--second-color);
    text-align: center
}

.flair_trade_page {
    display: flex;
    grid-gap: 10px;
    align-items: center
}


.trade-option {
    cursor: pointer;
    margin: 0 5px;
    padding: 5px;
}

.trade-option.active {
    font-weight: bold;
    color: var(--alt-hover-color);
    background-color: var(--hover-color);
    border-radius: 4px;
}

.page-prev, .page-next {
    cursor: pointer;
    padding: 5px;
}

.page-number {
    cursor: pointer;
    padding: 5px;
}

.page-number.active {
    font-weight: bold;
    color: var(--alt-hover-color);
    background-color: var(--hover-color);
    border-radius: 4px;
}
.trade_page_top, .trade_page_bottom {
    margin: 5px 0;
}

.profile_pic {
    list-style: none;
    padding-left: 0;
    text-align: center
}

.profile {
    padding-left: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
    text-align: left
}

.profile_data {
    text-align: left;
    min-width: auto;
    padding: 0
}

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

.listuser,.profile li,.profile_data {
    list-style: none
}

.listuser a,.listuser a:hover {
    text-decoration: none;
    color: var(--base-color)
}

.listuser a:hover {
    color: var(--hover-color)
}
#footer {
    margin-top:80px;
}
.footer {
    padding: 5px 0;
    text-align: center;
    font-size: 10pt
}

.footer_links ul,.footer_social ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
    width: fit-content;
    align-items: center;
    padding: 0;
    margin: 10px auto;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px
}

.footer,.footer_links ul a,.footer_social ul a {
    color: var(--text-alt-color)
}

.footer_links ul a:hover,.footer_social ul a:hover {
    color: var(--link-color)
}

.footer-item,.footer-item:hover {
    border: 1px solid var(--background-first-color)
}

.footer-item {
    text-align: center;
    align-items: center;
    font-size: 22px;
    padding: 10px;
    border-radius: 11px;
    outline: 4px solid var(--background-third-color);
    opacity: .4
}

.footer-item:hover {
    outline: 4px solid var(--link-color);
    opacity: .8
}

#searchForm,#searchForm2 {
    margin: 15px
}

.search-area {
    background: none;
    border-radius: 0px;
    border: 0px !important;
    color: var(--second-color);
    height: 45px;
    padding: 0px;
    /* margin: 4px; */
    transition: background-color .3s ease;
    /* width: calc(100% - 110px); */
    font-size: 18px;
}

.title_page {
    background: var(--second-color);
    border-radius: 15px;
    padding: 0px 10px 10px 10px;
    color: var(--main-color);
}

.title-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: fit-content;
    opacity: 1;
    color: #fff;
    padding: 5px;
    margin: 0;
    box-shadow: inset 25px 11px 19px #0000001c;
    border-radius: 10px;
    text-align: right;
    text-shadow: 0 2px 1px var(--alt-title-color);
    font-weight: 700;
    font-size: 17px
}

.text-area {
    background-color: var(--background-first-color);
    border-radius: 4px;
    border: 1px solid var(--border-main-color);
    color: var(--second-color);
    padding: 8px;
    margin: 4px;
    transition: background-color .3s ease
}

.search-area:focus-visible,.text-area:focus-visible {
    outline: 0;
    color: var(--text-title-color)
}

.form-btn,.search-btn {
    padding: 5px 10px;
    background-color: var(--second-color);
    color: var(--text-title-color);
    border: 0;
    border-radius: 5px
}

.search-btn {
    cursor: pointer;
    transition: background-color .3s ease
}

.form-btn {
    margin: 5px
}

.form-btn,.page-btn,.page-btn:hover {
    cursor: pointer;
    transition: background-color .3s ease
}

.page-btn {
    color: var(--second-color);
    margin: 5px
}

.page-btn:hover {
    color: var(--text-title-color)
}

.form-btn:hover {
    background-color: var(--background-first-color);
    color: var(--text-title-color)
}

.trade-btn {
    width: 100px;
    height: 38px
}

.trade-area {
    width: 50%;
    min-width: 200px;
    max-width: 330px
}

.delete-btn {
    padding: 5px 10px;
    background-color: var(--second-color);
    color: var(--text-title-color);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .3s ease
}

.header-btn {
    padding: 4px;
    color: var(--alt-title-color);
    border: 0;
    cursor: pointer;
    transition: color .3s ease;
    font-size: 15pt;
}

.delete-btn:hover {
    background-color: red;
    color: #fff
}

.deleteion-btn {
    text-align: right;
    margin: 10px 0
}

.search-btn:hover {
    background-color: var(--background-main-color);
    color: var(--alt-hover-color)
}

.header-btn:hover {
    color: var(--background-main-color)
}

.toggle-btn {
    display: inline-block;
    padding: 5px;
    background-color: var(--contrast-color);
    color: var(--text-alt-color);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .3s ease
}

.reminderreport {
    width: 100%;
    margin: 10px 0
}

.scamuser a:hover,.toggle-btn.active {
    background-color: var(--link-color);
    color: var(--text-title-color)
}

.scam-user {
    font-size: 11px;
    color: var(--text-alt-color)
}

.scamuser {
    font-size: 14px;
    padding-left: 5px
}

.scammer-item {
    margin: 6px
}

.scamuser a {
    color: var(--text-link-color);
    text-decoration: none;
    font-weight: 600;
    padding: 3px;
    border-radius: 3px
}

.scamuser a:hover {
    background-color: var(--hover-color);
    transition: background-color .3s ease
}

.scamreason {
    font-size: 12px;
    padding-left: 5px
}

.headerimg {
    width: 250px;
}
.titleheaderimg {
    width: 450px;
}
.logoimage {
    align-items: center;
    display: flex;
    margin-bottom: -7px;

}
.titlelogoimage {
    text-align: left;
}

.header-field {
    background: var(--text-title-color);
    border-radius: 25px;
    color: var(--second-color);
    margin: 4px;
    transition: background-color .3s ease;
    box-shadow: 2px 3px 8px #0000002e;
    width: 240px;
    justify-content: space-between;
    display: flex;
    padding: 10px;
    cursor: text;
}
.search_label {
    padding-left: 12px;
}

.container {
    width: 80%;
}
.logo {
    grid-template-columns: 1fr auto;
    color: var(--main-color);
    padding: 0;
    box-shadow: inset 252px 112px 190px #0000005c;
    background-color: var(--second-color);
}
a.userlog, a.userlog:visited {
    color: var(--text-title-color);
    font-weight: bold;
}
a.userlog:hover {
    color: var(--alt-title-color);
    font-weight: bold;

}
.nav_container {
    grid-template-columns: auto 1fr auto;
    display: grid;
    align-items: center;
    padding: 0 15px 0 0;
    gap: 20px;
    height: 80px;
}

.nav-menu {
    grid-template-columns: auto auto
}

.nav-item {
    text-align: center;
}


.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
/* .main-menu ul li a {
    text-decoration: none;
    color: var(--text-title-color);
    white-space: nowrap;
    font-weight: 700;
    font-size: 22px;
    transition: background-color .3s ease
} */
/* .main-menu ul li a:hover {
    text-decoration: none !important;
    background: #ffffff17;
} */

.main-menu .sub-menus {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
}
.main-menu .sub-menus a {
    color: var(--text-color);
}
.sub-menus {
    background-color: var(--background-second-color);
    overflow: hidden;
}

.main-menu > ul > li > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-title-color);
    white-space: nowrap;
    font-weight: 700;
    font-size: 22px;
    transition: background-color .3s ease;
    padding: 8px 14px;
    border-radius: 7px;
}
.main-menu > ul > li > a:hover {
    color: var(--second-color);
    text-decoration: none !important;
    background: var(--background-third-color);
}
.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    text-align: left;
}
li.head.bit {
    text-align: left;
    padding: 5px 0;
    border-bottom: 1px solid var(--background-main-color);
    color: var(--second-color);
    margin: 10px 5px;
    font-size: 1.3em;
    font-weight: bold;
}

.nav-menu a,.right-flex a {
    text-decoration: none;
    color: var(--text-color);
    white-space: nowrap;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 18px;
    /* max-height: 38px; */
    transition: background-color .3s ease
}

.right-flex a {
    font-size: 13px!important
}

.right-flex {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: 20px
}
.align-half {
    width: 20px;
}
.align-full {
    width: 50px;
}

.nav-menu a:hover,.right-flex a:hover {
    color: var(--link-color);
    text-shadow: 0 2px 1px #8080803d
}

.discord_feed_data .sub-content-element .commontext,
.reddit_feed_data .sub-content-element .commontext,
.sub-content-details .sub-content-element .commontext,
.right-menu {
    text-align: center;
    width: auto;
    display: block ruby;
}

.commondata {
    text-align: right;
    width: auto;
    display: block ruby;
}
.sub-content-post {
    padding: 5px;
    display: grid;
}
.sub-post {
    padding: 5px 10px 5px 0px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    align-content: center;
}
.sub-post .fa-brands {
    grid-row: 1/3;
    grid-column: 1;
    width: 44px;
}
.sub-post .sub-content-link {
    grid-row: 1;
    grid-column: 2 / 4;
    text-align: left;
}
.sub-post .sub-limbo {
    grid-column: 2;
    text-align: left;
}
.sub-content-link {
    grid-column: 1;
    grid-row: 1;
}
.sub-limbo {
    color: var(--text-color);
    font-size: 19px;
    padding: 1px;
    grid-row: 2;
    grid-column: 1;
}
.sub-content-date {
    /* grid-column: 2; */
    grid-row: 2;
    color: var(--text-color);
    font-size: 19px;
    padding: 1px;
    display: grid;
}

.new-post-notification {
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
}

.user_cap,.username {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--link-color)
}
.username_title {
    font-size: 1.8em;
    font-weight: normal;
}
.tradetier1,.tradetier2,.tradetier3,.tradetier4,.user_cap,.user_id,.username,.usersearch_user {
    text-transform: capitalize
}
.tradetier1 {
    font-size: 1.5em;
    font-weight: bold;
}
.tradetier2 {
    font-size: 1.1em;
    font-weight: normal;
}
.tradetier3 {
    font-size: .8em;
    font-weight: lighter;
}
.usersearch_user {
    font-size: 1.1em
}

.user_post::after,.user_post:hover::after {
    padding: 0 4px;
    transition: .3s ease,opacity .3s ease
}

.user_post_discord::after,
.user_post_reddit::after {
    content: "";
    position: absolute;
    display: flex;
    background-color: var(--background-main-color);
    border-radius: 2px;
    margin-top: -25px;
    margin-left: 37px;
    color: var(--alt-hover-color);
    font-size: 15px;
    max-width: 0
}

.user_post_discord:hover::after,
.user_post_reddit:hover::after {
    max-width: fit-content;
    outline: 4px solid var(--second-color)
}
.user_post_discord:hover::after {
    content: "Open Discord Post";
}
.user_post_reddit:hover::after {
    content: "Open Reddit Post";
}
.username_link {
text-transform: capitalize;
font-size: 34px;
}
.username_link a span:hover {
    color: var(--hover-color);
}

.trade-user::before {
    content: "WITH";
    margin: 0 4px 0 10px;
    font-size: 10px
}

.trade-date {
    color: var(--text-color);
    display: inline-block;
    text-align: left;
    font-size: 14px;
    margin-left: 4px
}

.flair_trade {
    margin: 5px 0px;
    display: block;
    align-items: center;
    display: grid;
    gap: 5px;
    grid-template-columns: auto auto 1fr auto;    
}
.open {
    display: block
}

.hidden {
    display: none
}

.ban_alert,.search_alert {
    margin: 15px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--link-color);
    background-color: var(--background-second-color);
    border-radius: 4px;
    padding: 6px 10px;
    text-align: left
}

.ban_alert {
    color: var(--contrast-color)
}

.global_close {
    font-size: 30pt;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    color: var(--text-color)
}

.feedback_link {
    cursor: pointer;
    color: var(--link-color)
}

.feedback_link:hover {
    color: var(--alt-link-color)
}

.feedbackContainerGlobal.open,.mapContainerGlobal.open,.searchContainerGlobal.open,.tradeContainerGlobal.open {
    max-height: 100%;
    height: 100vh;
    overflow: scroll!important
}

.feedbackContainerGlobal,.mapContainerGlobal,.searchContainerGlobal,.tradeContainerGlobal {
    position: absolute;
    top: 0;
    overflow: hidden;
    right: 0;
    width: 100%;
    background-color: var(--main-color);
    z-index: 9999;
    transition: max-height .3s ease-in-out;
    max-height: 0
}

.reset_field span:link,
.reset_suggestions:link,
.reset_field span:link {
    font-size: 20px;
    color: var(--second-color);
}
.reset_field span:visited,
.reset_suggestions:visited,
.reset_field span:visited {
    font-size: 20px;
    color: var(--second-color);
}
.reset_field span:hover,
.reset_suggestions:hover,
.close_reset_field span:hover {
    color: var(--link-color);
}
.search-enter_button {
    color: var(--second-color);
    grid-column: 4;
    font-size: 16pt;
    border-radius: 6px;
    text-align: center;
    align-items: center;
    width: fit-content;
    margin: 2px;
}

.feedback_alert,.over_alert,.trade_alert {
    margin: 80px auto auto;
    /* background-color: var(--background-third-color); */
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    max-width: 60%
}
.alerts_log_status {
    background: #FFA50059;
    border-radius: 8px;
    padding: 0px 10px 10px 10px;
    color: #e38f36 !important;
}
.alerts_log_status .contenttitle {
    color: #a88e03;
    border-bottom: 1px solid #a88e03;
}

.global_close:hover,.trade_close:hover {
    color: var(--link-color)
}

.feedback_close,.trade_close {
    font-size: 18pt;
    cursor: pointer;
    color: var(--text-color)
}

#tradeFieldTrigger {
    cursor: pointer
}

#searchResults {
    margin: 10px 4px;
    border-radius: 8px;
    padding: 5px;
    left: 0
}
#searchPosts {
    border-radius: 8px;
    padding: 5px;
    left: 0
}
pre {
    position: relative;
    margin: 0;
    padding: 0;
    }
/* .escaped_code::before {
    top: -15px;
    left: 3px;
    content: "Code:";
    font-size: 23px;
    font-weight: bold;
    color: var(--text-color);
    position: absolute;
} */
.escaped_code {
    padding: 10px;
    background: var(--background-main-color);
    font-size: 20px;
    border: 2px solid var(--second-color);
    border-radius: 7px;
    margin: 15px 15px 15px 0;
    color: var(--text-title-color);
    display: inline-block;
    white-space: pre;
}
.search_bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    background: var(--background-first-color);
    border-radius: 6px;
    border: 0px !important;
    color: var(--second-color);
    transition: background-color .3s ease;
    gap: 3px;
    padding: 5px;
    margin: 8px;
}
.location_filter {
    color: var(--text-color);
    font-size: 20px;
}
.sourceLabel {
    font-size: 20px; 
}
.sourceLabel.active {
    transition: background-color .3s ease,opacity .3s ease;
    margin: 6px 2px;
    padding: 4px 5px;
    border-radius: 5px;
    color: var(--alt-hover-color);
    cursor: pointer;
    opacity: 1;
    background-color: var(--second-color);
}
.categoryLabel {
    font-size: 20px; 
}
.categoryLabel.active {
    transition: background-color .3s ease,opacity .3s ease;
    margin: 6px 2px;
    padding: 4px 5px;
    border-radius: 5px;
    color: var(--alt-hover-color);
    cursor: pointer;
    opacity: 1;
    background-color: var(--second-color);
}
#sourceLabel {
    font-size: 20px; 
}
.reset-all-filters {
    padding: 5px;
    font-size: 20px;
    border: 3px solid;
    color: var(--background-third-color);
    background-color: var(--second-color);
    border-radius: 8px;
}
.reset-all-filters:hover {
    border: 3px solid var(--second-color);
    color: var(--second-color);
    background-color: var(--background-third-color);
    cursor: pointer;
}

.search_bar:focus-within .filter-btn {
    background-color: var(--background-third-color);
    color: var(--second-color);    
}
.search_bar:focus-within .search-enter_button {
    color: var(--background-third-color);
}

.search_bar:focus-within .account-item:hover,
.search_bar:focus-within .filterset:hover {
    color: var(--link-color);
}

.search_bar:focus-within .sourceLabel.active,
.search_bar:focus-within .categoryLabel.active {
    color: var(--alt-hover-color);
}
.search_bar:focus-within .filterset {
    color: var(--background-third-color);
}
.search_bar:focus-within .settings-toggle:hover {
    color: var(--link-color) !important;
}
.search_bar:focus-within {
    background-color: var(--second-color);
    /* color: var(--text-title-color);  */
}
.search_bar:focus-within #categoryLabel,
.search_bar:focus-within .reset_field span {
    color: var(--background-third-color);
}
.search_bar:focus-within .reset_field span:hover {
    color: var(--link-color);
}
.filter_sugg_container {
    display: grid;
    margin: 10px 4px;
    padding: 5px;
    left: 0;
    grid-gap: 5px;
    grid-template-columns: auto 1fr;
}
.suggestions-container {
    display: inline-table;
}
#categoryLabel {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    color: var(--second-color);
}
.reset_suggestions {
    font-size: 18px;
    color: var(--second-color);
}
.suggestions-message {
    font-size: 18px;
    color: var(--second-color) !important;
}
.filter-search {
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
}
.search_header {
    margin: 0 5px;
}
.buffer {
    height: 10px
}
.account-menu {
    display: none;
    position: absolute;
    background-color: var(--background-third-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0 10px 10px 10px;
    right: 10px;
    top:75px;
    width: 240px;
    text-align: left;
    border-radius: 8px;
    border: 1px solid transparent;
    z-index: 9999;
}
.account-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.account-menu ul li {
    padding: 4px 0px;
    margin: 0;
}
.account-item.spacer {
    padding-left:10px;
}
.account-item {
    color: var(--second-color);
    font-size: 18px;
    font-weight: normal;
    display: flex;
  }
.account-menu a, .account-item a {
    color: var(--second-color);
    font-size: 18px;
    font-weight: normal;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
}
.account-item a:hover {
    color: var(--link-color);
    background-color: #ffffff17;

}
/* .account-menu ul li a:hover {
    color: var(--link-color);
} */
.account-menu-title {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--second-color);
    font-size: 22px;
    padding: 5px 0px;
    font-weight: 700;
    color: var(--link-color);
    text-align: left;
    border-bottom: 1px solid var(--background-main-color);
}


.filter-menu {
    display: none;
    position: absolute;
    background-color: var(--background-third-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0 10px 10px 10px;
    width: 400px;
    text-align: left;
    border-radius: 8px;
    border: 1px solid transparent;
    z-index: 9999;
    top: 50px;
    margin: 5px;
    left: -10px;
}
.filter-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.filter-menu ul li {
    padding: 4px 0px;
    margin: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}
.filter-menu ul li a, .account-item {
    color: var(--second-color);
    font-size: 18px;
    font-weight: normal;
    display: flex;
}
.filter-menu-title {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--second-color);
    font-size: 22px;
    padding: 5px 0px;
    font-weight: 700;
    color: var(--link-color);
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.search_filters {
    position: relative;
}


.account-theme {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.styleswitcher {
    border: 1px solid var(--border-main-color)
}
.styleswitcher {
    background-color: var(--background-first-color);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
    border-radius: 10px;
    color: var(--text-color);
    z-index: 9999;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 10px;
    width: 400px
}

.picker {
    color: #fff
}

.site-map-cat {
    color: var(--link-color);
    font-size: 16px;
    font-weight: 700
}

.site-map {
    list-style: none;
    padding-left: 5px;
    margin: 0;
}

.site-map-list {
    list-style: none;
    padding: 8px
}

.site-map-list a {
    color: var(--text-color);
    padding-left: 3px
}

.site-map-list a:hover {
    border-left: 3px solid var(--link-color)
}

.sub-menus a {
    white-space: nowrap;
    display: grid;
    grid-template-columns: auto 1fr;
    /* width: 100%; */
    padding: 5px;
    border-radius: 2px;
}

.sub-menus li {
    position: relative
}
/* .sub-menus li a {
    grid-template-columns: 25px 1fr;
    gap: 15px;
} */

.main-menu .sub-menus a:hover {
    color: var(--background-main-color);
    /* background: #ffffff17; */

}
.sub-menus a:hover span {
    background: transparent;
}

.main-menu a.dropdown-arrow:after {
    content: "▾";
    margin-left: 5px;
    display: inline-block
}

.dropdown-arrow,.nav_control {
    cursor: pointer
}

.nav_control {
    display: none;
    font-size: 30px;
    cursor: pointer;
    z-index: 9999;
    width: 30px;
}

.nav-menu {
    position: fixed;
    top: 80px;
    left: 0;
    background: var(--background-second-color);
    z-index: 9998;
    max-width: 0;
    transition: max-width .3s ease-in-out;
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.nav-menu.open {
    max-width: 100%;
    padding: 0;
}

.sub-menus a {
    text-decoration: none;
    white-space: nowrap;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 5px 10px;
}

.nav-menu li {
    display: grid;
    margin: 0;
}
.flair_text {
    font-size: 42pt;
}
.nav-menu ul ul {
    display: grid
}

.nav_close {
    display: none!important
}
.header_close {
    height: 80px;
}
.nav_open {
    display: none;
}
.account_loggedout, .right-flex,.account_loggedin {
    display: grid;
    align-items: center;
    grid-template-columns: auto 35px;
    gap: 12px;
    margin: 0 5px;
}
.account_loggedout {
    display: none;
}
@media (max-width:1700px) {
  

    .headerimg {
        max-height: 85px;
        max-width: 380px
    }

    .nav-menu ul li:hover>ul {
        right: 18px;
        width: 200px
    }
}
    .main-menu ul li {
        position: relative;
        display: flex;
        margin: 0;
        gap: 15px;
        justify-content: space-between;
        align-items: center;
    }

    .main-menu ul li:hover>ul {
        display: grid;
        text-align: left
    }

    .main-menu ul ul {
        display: none;
        position: absolute;
        top: 42px;
        z-index: 9999;
        left: 0;
        padding: 15px;
        border-radius: 8px;
        row-gap: 5px;
    }

@media (max-width:1000px) {
    body {
        font-size: 14px;
    }
    .maintitle {
        font-size: 20px;
    }
    .contenttitle {
        font-size: 20px;
    }
    .dateposted a {
        font-size: 14px;
    }
    .nav_control {
        display: flex;
    }
    .headerimg {
        max-height: 80px;
        width: 200px
    }
    .titleheaderimg {
        width: 100%;
    }
    .nav_container {
        margin: 0 10px;
        height: 75px;
        gap: 0px !important;

    }
    .sub-content-details {
        margin: 2px !important;
        padding: 5px !important;
    }
    .inline_link, .commondata {
        font-size: 14px !important;
    }
    .resourcecontent {
        grid-template-columns: 1fr;
    }
    .logo {
        grid-template-columns: 30px 1fr auto;
        background-image: none;
        height: 80px;
        border-radius: 0px;
    }
    .main-menu {
        display: none;
    }
    .sub-content-tabs {
        display: inherit!important
    }
    .nav_open {
        display: block ;
    }
    .account_loggedin .settings-account, .welcome-account {
        display: none;
    }
    .userpfp_small {
        margin-top: 6px !important;
    }
    .account_loggedin {
        grid-template-columns: auto;
    }
    .search_label {
        display: none;
    }

    .feedbackContainerGlobal,.mapContainerGlobal,.tradeContainerGlobal {
        display: block;
        overflow: scroll;
        position: fixed
    }

    .flair_trade_page {
        display: grid;
        grid-template-columns: auto 1fr auto
    }

    #prevButton {
        margin-left: 30px
    }

    #nextButton {
        margin-right: 30px
    }
    .notify, .privacy {
        grid-template-columns: 1fr 50px !important;
    }
    .account {
        grid-template-columns:  1fr auto !important;
    }
    .settings-core > .commontext {
        text-align: right;
    }
    .settings-toggle {
        text-align: right;
    }
    .feedback_alert,.over_alert,.trade_alert {
        margin: 5px;
        max-width: 100%
    }

    .profile_pic {
        grid-column: 1;
        grid-row: 1/3;
        display: grid!important;
        margin-left: 10%
    }

    .flair_text {
        color: var(--link-color);
        font-weight: 700;
        font-size: 26pt !important;
    }

    .support_contact,.support_hit {
        height: 110px
    }

    .helpcontent {
        grid-template-columns: auto;
        justify-content: inherit
    }
    .account-menu {
        /* display: none; */
        position: absolute;
        right: 0px;
        top: 85px;
        width: 100%;
        height: 100%;
        border-radius: 0px;
        z-index: 9999;
    }
    /* .account-menu ul li {
    } */
    /* .account-menu ul li a, .account-item {
        font-size: 30px;
        font-weight: normal;
    } */
    .account-menu-title {
        font-size: 24px;
    }
    .guidecontent,.nav-menu ul ul {
        grid-template-columns: 1fr 1fr
    }

    .nav-menu a,.right-flex a {
        transition: background-color .3s ease
    }
    .nav-menu ul {
        margin: 0 10px;
        flex-direction: column;
        padding: 0;
        gap: 5px
    }
    .nav-menu ul ul {
        margin: 0;
    }

    .right-flex {
        margin: 10px;
        width: auto
    }
    .header-field {
        cursor: pointer;
        color: transparent;
        background-color: transparent;
        border: 0px;
        box-shadow: none;
        width: auto;
    }
    .header-btn {
        color: var(--text-title-color);
        font-size: 26px;
        padding: 5px;
        transition: padding .3s ease
    }

    .header-btn:hover {
        color: var(--alt-title-color)
    }

    .nav-menu .dropdown-arrow {
        color: var(--link-color)
    }

    .nav-menu a {
        font-size: 14px;
        border-radius: 5px
    }

    .nav-menu a:hover,.sub-menus a:hover {
        border-radius: 5px;
        color: var(--link-color)
    }

    .dropdown-arrow {
        text-align: left;
        cursor: auto;
        pointer-events: none
    }

    .container {
        margin: 0 auto;
        width: 100%
    }

    .content {
        margin-top: 0;
        border-radius: 0;
        border: 0
    }

    header {
        border-radius: 0!important
    }

    .user-block-name {
        display: none
    }

    .nav_control:hover {
        color: var(--alt-title-color)
    }

    .profile_grid {
        display: grid;
        grid-template-columns: repeat(3,1fr)
    }

    .profile_alias {
        text-align: left
    }

    .profile .dataitem,.profile .datalist,.profile_data .dataitem,.profile_data .datalist {
        font-size: 16px
    }

    .profile .datanumber {
        font-size: 34px
    }

    .userreview {
        grid-template-columns: 100px 1fr auto!important
    }

    .reviewpfp {
        display: none
    }

    .nav-menu ul li:hover>ul {
        width: auto
    }

    .locate-mobile {
        grid-column: 2/4;
        grid-row: 1
    } 

    .join-mobile {
        grid-column: 2;
        grid-row: 2
    }
    .join-mobile_discord {
        grid-column: 2/4;
        grid-row: 2;
    }
    .commontext {
        font-size: 15px;

    }
    .dataitem, .datanumber {
        font-size: 16pt;
    }
    .join-mobile_reddit {
        grid-column: 2/4;
        grid-row: 3
    }
    .join-mobile_post {
        grid-column: 1;
        grid-row: 2/4;
    }
    .flair_text_mobile {
        grid-column: 1;
        grid-row: 1/3;
        display: grid !important;
    }

    .star-review {
        grid-template-columns: 1fr!important
    }

    #filterPosts {
        grid-row: 2;

    }
    .search-enter_button {
        grid-column: 4;
    }
    .suggestion-item {
        font-size: 18px;
        margin-top: 0px !important;
    }

    .filter-menu {
        position: fixed;
        left: 0;
        width: 100%;
        top: 150px;
        border-radius: 0px;
        margin: 0px;
    }
    .postflair {
        font-size: 15px;
    }
    .content {
        padding: 0 10px;
    }

}

.register-form,.support-form {
    display: grid;
    grid-template-columns: 90px minmax(30%,200px);
    align-items: center
}

.register-form {
    grid-template-columns: 180px minmax(30%,200px)
}

.spacer {
    margin: 10px 0
}

.plussize {
    padding: 10px!important;
    width: 190px!important
}

.pwalert {
    color: var(--contrast-color)
}

.faq_list {
    color: var(--link-color);
}

.faq_list_item {
    padding-left: 5px
}

.faq_list>li>span {
    font-size: 16px;
    font-weight: 700;
    margin: 5px 0
}

.faq_list>li::marker {
    color: var(--link-color);
    font-weight: 700
}

.faq_list_item li {
    list-style-type: none
}

.faqterms {
    background-color: var(--background-second-color);
    color: var(--link-color);
    padding: 3px 5px;
    margin: 2px 3px;
    font-weight: 700;
    border-radius: 5px;
    font-size: 14px
}

.center_faqs {
    text-align: center
}

.faqterms:hover {
    background-color: var(--link-color);
    color: var(--background-second-color)
}

.question {
    color: var(--link-color);
    margin: 6px 5px 2px 0;
    font-size: 14px!important
}

.question::before {
    content: "Q. ";
    margin: 0 0 0-20px;
    font-size: 16px!important;
    font-weight: 700
}

.answer {
    margin: 2px 5px 6px 0;
    font-size: 13px!important
}

.answer:before {
    content: "A. ";
    margin: 0 0 0-20px;
    font-weight: 700
}

.answer:before,.statement {
    font-size: 16px!important
}

.aboutus {
    font-size: 16px;
    font-weight: 700;
    margin: 25px 10px 10px 0px;
    color: var(--link-color)
}

.grid {
    display: grid
}

.dropdown {
    display: flex
}

.dropdown,.postCheckdropdown,.postdropdown,.tradedropdown,.usernamedropdown {
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px
}

.tradecontent {
    padding: 10px;
    display: flow-root;
    position: relative;
}
.tabviewhide {
    display: none; 
    max-height: 0;
}

.tabviewshow {
    display: block; 
    max-height: 100%;
}

.toggletabexpand:after {
    content: "▾";
    margin-left: 5px;
    display: inline-block
}
.toggletabshow:after {
    content: "▴";
    margin-left: 5px;
    display: inline-block
}
.dropdown-btn,.dropdown-btn-post,.dropdown-btn-postCheck,.dropdown-btn-trade {
    background-color: var(--background-first-color);
    border: 1px solid var(--border-main-color);
    padding: 8px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color .3s ease;
    width: fit-content;
}

.filter-btn {
    padding: 8px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color .3s ease;
    width: fit-content;
}

.style-btn,.username-btn {
    transition: background-color .3s ease
}

.username-btn {
    padding: 8px;
    cursor: pointer;
    border-radius: 5px;
    width: 150px
}

.style-btn {
    font-size: 18px!important;
    font-weight: 700
}

.dropdown-btn-post:hover,.dropdown-btn-postCheck:hover,.dropdown-btn-trade:hover,.dropdown-btn:hover,.dropdown-content a,.username-btn:hover {
    background-color: var(--background-main-color);
    color: var(--text-title-color)
}
.dropdown-container {
    position: absolute;
    border: 1px solid var(--border-main-color);
    background-color: var(--background-first-color);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
    z-index: 1;
    border-radius: 6px;
    overflow: hidden
}

.dropdown-content,.dropdown-post,.dropdown-postCheck,.dropdown-trade,.dropdown-username{
    display: none;
    top: 30px
}

.dropdown-content a:hover, .dropdown-content a:hover,.dropdown-post a:hover,.dropdown-filter a:hover,.dropdown-trade a:hover,.option:hover {
    background-color: var(--background-second-color)
}

.dropdown-style  {
    display: none;
    right: 10px;
    font-size: 18px;
    font-weight: 700
}

.dropdown-filter  {
    display: none;
    font-size: 18px;
    font-weight: 700;
    max-height: 210px;
    overflow-y: auto;
    position: absolute;
    right: 10px;
    top: 22px;
}

.dropdown-content a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    background-color: var(--second-color)
}

.feedback_tabs a,.option {
    padding: 10px;
    cursor: pointer;
    color: var(--link-color);
    white-space: nowrap;
    transition: background-color .3s ease,opacity .3s ease
}

.option:hover {
    color: var(--hover-color);
    opacity: 1
}

.selected-option {
    font-size: 17px
}

.tradetier4,.user_id {
    font-size: 12pt
}

.tradetier1,.tradetier2,.tradetier3,.tradetier4,.user_id {
    display: inline-block;
    transition: background-color .3s ease,opacity .3s ease;
    margin: 6px 2px;
    padding: 4px 5px;
    border-radius: 5px;
}
.usersearch_user {
    display: inline-block;
    transition: background-color .3s ease,opacity .3s ease;
    margin: 6px 5px;
    padding: 5px 10px;
    border-radius: 4px;
}
.no-suggestions {
    display: inline-block;
    margin: 6px 5px;
}

.usersearch_discord,.usersearch_reddit, .suggestion-item {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 5px;
    border-radius: 5px;
    transition: .3s ease,opacity .3s ease;
    margin-top: -5px;
}

.tradetier1 a:hover,
.tradetier1:hover a,
.tradetier2 a:hover,
.tradetier2:hover a,
.tradetier3 a:hover,
.tradetier3:hover a,
.tradetier4 a:hover,
.tradetier4:hover a,
.user_id a:hover,
.user_id:hover a,
.usersearch_discord a:hover,
.usersearch_discord:hover a,
.usersearch_reddit a:hover,
.usersearch_reddit:hover a {
    color: var(--alt-hover-color);
}

.suggestion-item:hover, .tradetier1:hover,.tradetier2:hover,.tradetier3:hover,.tradetier4:hover,.user_id:hover,.usersearch_discord:hover, .usersearch_reddit:hover {
    color: var(--alt-hover-color);
    cursor: pointer;
    opacity: 1;
    background-color: var(--second-color)
}

.lineheight1 {
    margin: 5px 0
}

.feedback_tabs {
    margin-top: -10px;
}
.feedback_tabs a {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    text-decoration: none;
    margin: 0 5px;
    padding: 8px 20px;
    font-size: 22px;
    max-height: 38px;
    transition: background-color .3s ease;
    display: inline-block
}

.feedback_tabs a:hover {
    color: var(--hover-color)
}

/* .active {
    background-color: var(--background-main-color);
} */
a.active {
    color: var(--background-second-color);
    font-weight: bold;
}

.inactive {
    background-color: transparent
}

.ulreview,.ultradereview {
    list-style: none;
    padding-left: 0
}

.review-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    grid-auto-rows: auto;
}
.map-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    grid-auto-rows: auto;
}
.home-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    grid-auto-rows: auto;   
}

.map_area {
    width: 75%;
    height: 400px
}

.userreview {
    grid-template-columns: auto 1fr auto
}

.userfeedbackreview,.userreview {
    padding: 6px 4px;
    display: grid;
    grid-gap: 25px;
    align-items: center
}

.userfeedbackreview a,.userreview a {
    text-decoration: none;
    font-weight: 700;
    width: 20%;
    font-size: 14pt;
    align-items: center;
    display: flex
}

.tradereview,.tradereview a {
    text-align: left;
    align-items: center;
    display: flex
}

.tradereview {
    padding: 6px 4px;
    grid-gap: 10px
}

.tradereview a {
    text-decoration: none;
    font-size: 9pt
}

.reviewpfp,.tradepfp,.userpfp,.userpfp_small {
    border-radius: 50%;
    background-color: var(--background-first-color);
    border: 1px solid var(--second-color);
    outline: 4px solid var(--border-main-color)
}

.account_loggedin .userpfp_small:hover {
    cursor: pointer;
    opacity: 30%;
}

.userpfp {
    height: 90px;
    width: 90px
}
.userpfp_small {
    height: 35px;  
    width: 35px;
    margin-top: -10px;
}

.userreview .reviewpfp {
    height: 50px;
    width: 50px;
    margin-right: 10px
}

.tradereview .tradepfp {
    height: 25px;
    width: 25px;
    margin-right: 10px
}

.form-btn:hover,.search_bar:hover,.search-btn:hover,.text-area:hover,.tradereview a:hover .tradepfp,.userpfp:hover,.userreview a:hover .reviewpfp,.userreview:hover {
    outline: 4px solid var(--background-main-color)
}

.feedback-area {
    width: 90%;
    height: 150px
}

.userreview:hover {
    border-radius: 8px
}

.reviewfield {
    font-size: 14pt;
    color: var(--text-alt-color)
}

.review_communication,.review_description,.review_shipping {
    padding: 2px
}

.sub-content-left {
    grid-column: 1;
    margin-bottom: 10px;
}

.sub-content-right {
    grid-column: 2
}

.sub-content-element {
    display: grid
}

.sub-content-tabs {
    width: 100%;
    min-width: 0;
    padding-top: 5px;
    grid-template-columns: 50% 50%;
    display: grid
}

.sub-content-details {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 5px 10px;
    text-align: center;
    margin: 0px 4px;
}

.sub-content-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: var(--background-alt-color);
    background-size: 50%;
    grid-gap: 8px;
    align-items: center;
    color: var(--text-title-color);
    margin: 3px 30px 3px 3px;
    padding: 3px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700
}

.sub-content-info {
    text-align: left;
    padding-left: 5px
}

.sub-content-data {
    text-align: right
}
.content_left, .content_right {
    grid-row: 2;
}
#title_left, #title_right {
    grid-row : 1;
}



@media (max-width: 1000px) {
    /* .content_left, .content_right {
        display: grid;

    } */
    #title_left, #title_right {
        cursor: pointer;
        padding: 10px;
        text-align: center;
        transition: background-color 0.3s ease-in-out;
        grid-row: 1;
    }
    .content_left, .content_right {
        max-width: 0;
        opacity: 0;
        transition: max-width 0.5s ease, opacity 0.5s ease;
        overflow: hidden;
        grid-column: span 1;
        grid-column: 1/3;
        height: auto;
        visibility: hidden;
        position: relative;
        z-index: 1;
    }
    
    .content_left.show, .content_right.show {
        max-width: 1000px;
        opacity: 1;
        visibility: visible;
        grid-column: 1/3;
        background-color: var(--main-color);
        z-index: 10;
    }
    
    .contenttitle.active {
        background-color: var(--second-color);
        color: var(--background-second-color);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .home-tabs {
        grid-template-columns: 1fr !important

    }
    .map-tabs {
        display: block;
        grid-template-columns: 1fr;
        gap: 5px;
        grid-auto-rows: auto;
    }
}


.posts-preview {
    text-align: left;
    grid-template-columns: auto 1fr auto;
    background: #00000005;
    border-radius: 10px;
    justify-content: space-between;
    display: grid;
    box-shadow: inset 27px 2px 24px #00000008;
    margin: 2px 0;
    align-items: center;
}
.inline_link, .commondata {
    font-size: 18px;
}
#filterPosts, #searchTerms {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 5px;
    margin: 0 5px;
    align-content: center;
}
.filter-maintain {
    display: block;
    position: relative;
}

.half-width {
    grid-template-columns: 50% 50% !important
}

.data-right {
    position: relative;
    right: -40px;
    color: var(--link-color)
}
.nav-map,
.rule-map,
.bot-map,
.up-map {
    margin-bottom: 10px;
}
.nav-map {
    grid-column: 1;
}
.rule-map {
    grid-column: 1;
}
.guide-map {
    grid-column: 2;
}
.bot-map {
    grid-column: 2;
}
.up-map {
    grid-column: 1;
}

.settings-page ul {
    list-style: none;
    padding: 0
}

.settings-core {
    display: grid;
    align-items: center
}

.account {
    grid-template-columns: minmax(330px, 40%) 1fr;
    row-gap: 10px;
}

.notify,.privacy {
    grid-template-columns: minmax(330px, 40%) 50px;
}

.saved-posts {
    grid-template-columns: 50px 1fr;
    margin-top: 10px
}
.ham-saved {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 4px;
}
.ham-saved a {
    padding: 0px;
    font-size: 18px;
}
.ham-saved:hover .username {
    color: var(--background-third-color);
}
.ham-saved:hover .username:hover {
    color: var(--link-color);
}
.ham-saved:hover {
    background-color: var(--second-color);
    border-radius: 8px;
}
.ham-saved .remove_save {
    color: #b80000;
    background-color: transparent;
}
.ham-saved .remove_save:hover {
    color: var(--background-third-color);
    background-color: #b80000;
}

.settings-title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px
}

.settings-title>.commontext {
    margin-bottom: 10px
}

.settings-title,.settings-toggle:hover,.toggle-on,.user-block a:hover, .filter-btn:hover {
    color: var(--link-color) !important;
}

.toggle-off {
    color: var(--text-alt-color)
}

.settings-core {
    margin: 15px;
}
.settings-account {
    margin: 5px 0;
    grid-column: 1;
    color: var(--second-color);
    font-size: 28px;
    font-weight: bold;
}
.welcome-account {
    font-weight: normal;
    font-size: 15px;
    grid-column: 1;
    margin-bottom: -25px;
}

.settings-toggle {
    font-size: 26px !important;
    cursor: pointer;
    text-align: left;
}

.progress-bar {
    border: 0;
    background-color: var(--background-alt-color,var(--background-main-color));
    height: 9px;
    max-width: 100%;
    margin: 14px 0;
    border-radius: 3px
}

.star-rating {
    display: grid;
    grid-template-columns: repeat(5,auto);
    gap: 5px;
    background-color: var(--background-second-color);
    border-radius: 5px;
    text-align: center;
    color: var(--text-alt-color);
    padding: 3px;
    -webkit-text-stroke: 1px var(--text-alt-color)
}

.rating-block,.star-rating {
    font-size: 12px
}
.trade_alert .star-rating {
	font-size: 22px;
}

.star-review,.star-review-feedback {
    display: grid;
    grid-template-columns: minmax(auto,auto) auto;
    grid-gap: 0;
    align-items: center
}

.star-review-feedback {
    grid-gap: 30px
}

.reviewlink {
    white-space: nowrap
}

.iconset {
	font-size: 16pt;
	border-radius: 6px;
	color: var(--main-color);
	text-align: center;
	align-items: center;
	padding: 4px 6px;
	width: fit-content;
	margin: 2px;
}
.iconset-reddit, .iconset-discord {
	border-radius: 6px;
	color: var(--main-color);
	text-align: center;
	align-items: center;
	padding: 4px 6px;
	width: 30px;
	margin: 2px;
}
.iconset-notif {
	border-radius: 6px;
    font-size: 16pt;
	color: var(--main-color);
	text-align: center;
	align-items: center;
	padding: 4px 6px;
	width: 30px;
	margin: 2px;
}
.iconset-discord {
	font-size: 16pt;
	color: var(--discord-color);
}
.iconset-notif.error {
	color: red; 
}
.iconset-notif.success {
	color: green; 
}
.iconset-notif.update {
	color: rgb(156, 0, 122); 
}
.sort-icons {
    position: relative;
}
.sort-icons span:hover {
    color: var(--second-color);
    cursor: pointer;
}
.sort-settings {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    position: absolute;
    background-color: var(--background-third-color);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid;
    right: -5px;
    z-index: -1;
}
.sort-settings.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s;
    z-index: 11;
}
.sort-settings-contain {
    display: grid;
    gap: 5px;
    width: 140px;
    box-shadow: inset 5px 6px 27px #00000012;
}
.success_message {
    position: fixed;
    right: 40px;
    bottom: 40px;
    padding: 30px;
    border: 4px solid var(--second-color);
    border-radius: 8px;
    background: var(--background-third-color);
    box-shadow: inset 5px 6px 27px #00000012;
}
#notification-container {
    position: fixed;
    bottom:  60px;
    right: 20px;
    width: 300px;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    /* padding-bottom: 50px; */
    z-index: 15;
}
.notification {
    position: relative;
    background: var(--background-second-color);
    border: 1px solid var(--second-color);
    border-radius: 8px;
    padding: 10px 20px 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slide-in 0.4s ease-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
}
.notification-close {
    position: absolute;
    top: 1px;
    right: 5px;
    cursor: pointer;
    font-weight: bold;
    color: var(--second-color);
    font-size: 22px;
}
.close_notify_button {
    color: var(--link-color);
}
.close_notify_button:hover {
    color: var(--link-color);

}
.notifytitle {
    font-size: 20px;
    font-weight: bold;
    color: var(--second-color);
    margin-left: 10px;
}
.notifytitlebar {
    display: flex;
    align-content: center;
    align-items: center;
}

.notification.dragging {
    opacity: 0.8;
    transition: transform 0.2s ease;
}
.notification {
    transition: all 0.3s ease;
}

.notification-success {
    border-left: 4px solid green;
}

.notification-info {
    border-left: 4px solid blue;
}

.notification-error {
    border-left: 4px solid red;
}

.notification.hide {
    opacity: 0;
    transform: translateY(-10px);
}

.notification {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification.closing {
    opacity: 0;
    transform: translateX(180px); 
}

#close-all-notifications {
    position: fixed;
    bottom: 5px;
    right: 20px;
    background-color: #f44336;
    color: white;
    border-radius: 5px;
    width: 300px;
    cursor: pointer;
    z-index: 1000;
    display: none;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

#close-all-notifications.show {
    display: block;
}

#close-all-link {
    color: white;
    display: block;
    height: 100%;
    padding: 10px 20px;
    border-radius: 5px;
  }

#close-all-link:hover {
    text-decoration: underline;
}
#close-all-notifications #close-all-link:hover {
    background-color: #85120a;

}



.close-all-btn:hover {
    background-color: #d32f2f;
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.notification.hide {
    animation: slide-out 0.4s ease-out forwards;
}

.sort-menu {
    font-size: 18px;
    color: var(--text-alt-color);
}
.delete_save_feed,
.save_feed {
    justify-content: space-between;
    align-content: center;
    gap: 15px;
    color: var((--second-color));
    grid-template-columns: 100px auto;
    padding: 8px;
    border-radius: 6px;
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.delete_save_feed:hover,
.save_feed:hover {
    color: var(--link-color);
    cursor: pointer;
    background: #ffffff12;
}
.delete_save_feed:hover,
.save_feed:hover,
.delete_save_feed:hover span,
.save_feed:hover span {
    color: var(--second-color);
    cursor: pointer;
}
.sort-icon,
.sort-discord,
.sort-reddit {
    font-size: 18pt;
    color: var(--link-color);
}
.sort-icon.disabled {
    color: var(--text-alt-color);
}
.sort-discord {
	color: var(--discord-color);
}.sort-reddit {
	color: var(--reddit-color);
}
.sort-discord.disabled,
.sort-reddit.disabled {
    color: var(--text-alt-color) !important;
}
.iconset-reddit {
	font-size: 18pt;
	color: var(--reddit-color);

}
.loginset {
    font-size: 13.5px;
    border-radius: 6px;
	color: var(--main-color);
    text-align: center;
}
.loginwrapper {
    align-items: center;
    margin: 2px;
    width: fit-content;
    display: flex;
    padding: 10px 13px;
    white-space: nowrap;
    text-align: center;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;

}
.loginwrapper:hover.reddit {
    border: 2px solid var(--reddit-color);
}
.loginwrapper:hover.discord {
    border: 2px solid var(--discord-color);
}
.loginwrapper:hover.discord span {
    color: var(--discord-color);
}
.loginwrapper:hover.reddit span {
    color: var(--reddit-color);
}
.filterset {
	font-size: 16pt;
	border-radius: 6px;
	color: var(--second-color);
	text-align: center;
	align-items: center;
	padding: 4px 6px;
	width: fit-content;
	margin: 2px;
    cursor: pointer;
}
.filterset:hover {
    color: var(--link-color);

}
.loginset.reddit {
    background-color: var(--reddit-color);
}
.loginset.discord {
    background-color: var(--discord-color);
}
.iconset-text {
    font-size: 12pt;
    margin-left: 5px;
    text-transform: capitalize!important;
    font-family: verdana;
    font-weight: 700
}
.caps {
    text-transform: uppercase;
}
.blockiconset,.user-block a {
    color: var(--text-alt-color);
    transition: color .3s
}

.blockiconset {
    font-size: 12pt;
    text-align: left
}

.user-block-name {
    margin-left: 5px
}

.user-block a:hover .link-block {
    color: green
}

.user-block a:hover .star-block {
    color: gold
}

.user-block a:hover .report-block {
    color: red
}

.profile_alias {
    list-style: none;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: 12pt;
    color: var(--text-alt-color);
    padding: 10px
}

.profile_flare {
    position: absolute;
    top: 10px;
    right: 10px
}

.user-block {
    display: flex;
    float: right;
    list-style: none;
    margin: 0;
    position: relative;
    padding: 0;
}


.user-block a {
    font-size: 14pt;
    cursor: pointer;
    margin: 0 5px;
}

.verified {
    background-color: var(--verified);
}

.synced {
    background-color: var(--sync);
}

.settings_button {

	font-size: 26px;
	border-radius: 6px;
	color: var(--main-color);
	text-align: center;
	align-items: center;
	padding: 4px 6px;
	width: fit-content;
	margin: 2px;

}
.settings_button:hover {
    opacity: 50%;
}
.remove_welcome {
    font-size: 28px;
}
.remove_welcome:hover {
    color: var(--link-color);
    cursor: pointer;
}
.welcome_ {
    display: block;
}
.welcome_seen {
    display: none;
}
.welcome_seen_updates {
    grid-column: 1/3;
}
.banned, .remove_save {
    background-color: #b80000;
}
.remove_save:hover {
    background-color: #1d1111;
}
.moderator {
    background-color: var(--mod);
}

.coded {
    background-color: #00f;
}

.star {
    color: gold
}

.discord {
	background-color: var(--discord-color);
	color: var(--main-color);
	font-weight: bold;
}

.Discord,.discord:hover {
    color: var(--discord-color);
    background-color: transparent;
}
.discord_invite, .reddit_invite {
    border-radius: 8px;
    margin: 8px;
    padding: 14px;
    font-size: 25px;
    width: auto !important;
    text-align: center;
}
.invite_align {
    width: 280px;

}


.Discord {
    font-weight: 700;
	color: var(--main-color);
}

.reddit {
	background-color: var(--reddit-color);
	color: var(--main-color);
	font-weight: bold;
}

.Reddit,.reddit:hover {
    color: var(--reddit-color);
    background-color: transparent;
}

.Reddit {
    font-weight: 700;
    font-size: 1.1em;
    color: #333;
}

.heatware {
	background-color: var(--heatware);
	color: var(--main-color);
	font-weight: bold;
}

.heatware:hover {
    color: var(--heatware);
    font-weight: 700;
    background-color: transparent;
}

.hws_discord, .hws_reddit {
    text-align: center;
    font-size: 20pt;
    text-transform: capitalize !important;
    font-family: verdana;
    font-weight: 700;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    animation: spin 2s linear infinite;
    position: relative;
    top: 27px;
    left: 50%;
    transform: translate(-50%,-50%)
}