/*********

    Varibles

*********/


/*********

    Bootstrap extensions

*********/

.br-30{
    border-radius:30px!important;
}

.b-none{
    border:none!important;
}

.br-none{
    border-radius: 0%!important;
}


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

    Font definitions

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

@font-face {
    font-family: Roboto Condensed;
    src: url(../webfonts/RobotoCondensed-Regular.ttf)
}
@font-face {
    font-family: Lato;
    src: url(../webfonts/Lato-Regular.ttf)
}

@font-face {
    font-family: DPDorkDiary;
    src: url(../webfonts/DorkDiary.ttf)
}

@font-face {
    font-family: Autour One;
    src: url(../webfonts/AutourOne-Regular.ttf)
}

@font-face {
    font-family: Bubbly-Regular;
    src: url(../webfonts/Playpen.ttf)
}

@font-face {
    font-family: Bubbly-Regular;
    src: url(../webfonts/Bubbly-Regular.ttf)
}


@font-face {
    font-family: Unicorn Scribbles;
    src: url(../webfonts/UnicornScribbles-eLmg.ttf)
}


@font-face {
    font-family: Cuddlebugs;
    src: url(../webfonts/Cuddlebugs\ Outline.ttf)
}

@font-face {
    font-family: Lighthand;
    src: url(../webfonts/lighthead.ttf)
}

@font-face {
    font-family: Lighthand;
    src: url(../webfonts/lighthead.ttf)
}

@font-face {
    font-family: Shantell Sans Light;
    src: url(../webfonts/Shantell.ttf)
}

@font-face {
    font-family: Philosopher;
    src: url(../webfonts/Philosopher-Regular.ttf)
}

@font-face {
    font-family: Playpen Sans Thin;
    src: url(../webfonts/Playpen.ttf)
}
/**************************************************************************************************

    Base styles

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

/* width */
::-webkit-scrollbar {
    width: 7px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--primary-green); 
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary-green); 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--lightest-brown); 
  }



h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: Unicorn Scribbles; 
    font-weight: bold;
    color: var(--darkest-brown)
}


.page-title{
    text-transform: uppercase;
    font-family: Unicorn Scribbles; 
    font-weight: bold;
    font-size: 50px;
    text-align:center;
}

.pagination{
    justify-content:center;
}

.site-page-content h1::before{
    content: ""!important;
}

.site-page-content h1{
    display:block;
    border-bottom: solid 4px var(--darkest-brown);
}

.chickenpaint-main-section h5{
    font-size:20px!important;
}

.chickenpaint-main-section .modal-header{
    background:transparent!important
}

/*.site-page-content a{
    color:var(--primary-green);
}*/


.site-page-content h2, .site-page-content h3, .site-page-content h4, .site-page-content h5{
    padding-left: 10px;
}

.site-page-content p{
    display:block;
}

h1 a, h2 a, h4 a, h5 a,
a.h1, a.h2, a.h3, a.h4, a.h5, a.h6 {
    color: var(--primary-green);
}

h3 a{
    color: #E9EADB;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover,
a.h1:hover, a.h2:hover, a.h3:hover, a.h4:hover, a.h5:hover {
    color: inherit;
    text-decoration: none;
}

a {
    color: var(--primary-green);
    transition: .25s ease-in-out;
}

.nabvar a{
    color: #E9EADB!important;
}

.nav-link{
    color: #E9EADB;
}

.not-unlocked{
    background-color: var(--darker-brown);
    color: var(--main-brown)!important;
}

a:hover {
    color: white;
    text-decoration: none;
}

body {
    
    background-size:cover;
    background-position:center;
    font-family: 'Playpen Sans Thin'; 
    min-height: 100vh;
    font-size: 80%;
  /*  perspective:1px;
    perspective-origin: center center;
    overflow-x:hidden;
    position: absolute; */
}

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

    Helpers

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

.hide {
    display: none !important;
}

.grecaptcha-badge { visibility: hidden !important; }

.parsed-text img {
    max-width: 100% !important;
    height: auto !important;
}

.event-border{
    border:dashed 4px var(--primary-green)
}

.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

.regular{
    font-family: 'Playpen Sans Thin'
}

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

    Layout

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


#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('https://media.discordapp.net/attachments/720091120381722695/1241110550763540480/Untitled3385_20240517153006.png?ex=664901c6&is=6647b046&hm=c781ce4f9c1a4da64adf318a1be31e8fb97d3376bbbb3014fb5df65dcc65d749&=&format=webp&quality=lossless&width=1191&height=670');
    background-size: cover!important;
    background-color: rgb(115, 179, 214);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right top;
}

a.display-trait{
    color: #E9EADB!important;
}

.badge-primary{
    background-color: var(--primary-green)!important;
}

.card-body.row{
    margin:0!important;
}


main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
}

main > .row {
    flex-grow: 1;
}

.main-content {
    display: flex;
    flex-direction: column;
    padding:0!important;
    min-height:100%;
}

.otherwise{
    border: double 17px var(--lighter-brown);
    box-shadow: 14px 6px 6px 3px rgba(0,0,0,0.1);
    padding:30px!important;
    min-height:100vh;
    border-radius: 70px; 
    margin-top: 50px;
    height:100%!important;
}

/* Header */

.site-header-image {
    /*background-color: #eee;*/
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
    height: 55px!important;
}

.sidebar ul{
	width: 100%!important;
    margin-top:5%;
}

.navbar .navbar-brand, .navbar .nav-item {
    text-transform: lowercase;
    font-family: Autour One, serif;
    font-size: 90%;
}

.navbar .navbar-brand{
    font-family: Unicorn Scribbles;
}


.navbar .row { width: 100%; }

#headerNav{
    border: solid 3px var(--darkest-brown);
    border-radius: 30px; 
    max-height: 70px;
}

.rounded-outside{
    border-radius: 30px
}

@media (max-width: 767px) {
    #headerNav{
        max-height: 400px!important;
    }

    .rounded-outside{
        border-radius:0!important;
    }

    .dia-blank{
        max-width:100%!important
    }
}

.dia-blank{
    max-width:50%
}

#visuals{
    height: 600px;
}


@media (max-width: 900px) {
    .greyscale{
        display:none;
    }

    #dialouge-start{
        padding:0!important
    }

    .dialogue #text-container{
        overflow-y: scroll;
        overflow-x:hidden;
    }

    .dia-bubble{
        border-radius: 40px!important;
        margin: 5px;
    }
    
}

#next-button{
    width:40px;
    top:-6px
}
/* Sidebar */

.sidebar {
    text-align: left!important;
    padding-right: 0px;
}

.sidebar ul {
    list-style-type: none;
    display: inline-block;
}


.sideimg {
    height: 90px;
    width: 100%;
    background-image: url(https://i.imgur.com/qdJQ8kC.png);
    background-repeat: space;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -9px;
    left: -24px;
    z-index: 3;
}



.sidebar ul li {
    background-color: var(--lighter-brown);
    padding: 0.4em 0;
    font-family: Autour One, serif!important;
    border: solid 4px var(--main-brown);
}

.sidebar .sidebar-header,
.sidebar .sidebar-section .sidebar-section-header {
    text-transform: lowercase;
    font-family: Unicorn Scribbles; 
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    border-radius: 30px!important
}


.sidebar-section-header{
    background:var(--main-brown);
    margin-bottom: 3px;
    padding-top: 8px
}

.sidebar-section-header:before{
    content: '✿';
    font-size: 13px;
    margin-right: 5px;
    font-weight:normal;
}

.sidebar-section-header:after{
    content: '✿';
    font-size: 13px;
    margin-left: 5px;
    font-weight:normal;
}

.world-cards{
    background:var(--ligher-brown);
    border-radius: 150px;
}

.world-cards .list-group-item{
    border:0!important;
    margin:0!important;
    border-top: solid 3px var(--main-brown)!important;
}

.world-cards .list-group-item a{
    color: #E9E4C6;
    font-weight:bold;
}

.admin-sidebar-section{
    border-color: #6CB2EB!important;
    background: #9bc5e8!important;
    color: var(--darker-brown);
}

.admin-sidebar-section a{
    color: var(--darker-brown)!important;
    
}

.sidebar-section{
    
    border-radius: 30px!important;
    margin-top:10px
}
.card{
    border-radius:20px!important;
}

.card-body{
    background-color: var(--lighter-brown)!important;
    border-radius:inherit;
}

.featured-border{
   border: dotted 5px white;
}

.list-group-item{
    background-color: var(--main-brown);
}

.sidebar .sidebar-header {
    background-color: var(--darker-brown);
    border: none;
    border-radius: 30px 0px 0px 30px;
}

.sidebar .sidebar-header a {
    background: transparent;
   border-radius: 30px 0px 0px 30px; 
    transition: all .45s ease;
}
.sidebar .sidebar-header a:hover {
    background: linear-gradient(40deg, var(--darkest-brown), var(--darker-brown));
    color: rgba(255,255,255,0.8);
    margin-left: 10px;
   /**  border-radius: 30px 0px 0px 30px; **/
    transition: all .45s ease;
}

.sidebar a,
.sidebar-section-header {
    display: block;
    padding: 0.1em 1em;
}

.sidebar a {
    text-transform: lowercase;
    font-family: Autour One;
}
.sidebar a:hover {
    color: var(--main-brown);
    border-radius: 30px!important
}
.sidebar a:hover, .sidebar a:active, .sidebar a:focus, .sidebar a:link {
    text-decoration: none;
}
.sidebar a:hover {
    text-decoration: none;
}
.sidebar a.active, .sidebar a.active:hover {
    color: #E9EADB;
    background-color: var(--darker-brown);
    border-radius: 30px!important
}

.site-mobile-header {
    display: none;
    /*padding: 10px 20px;*/

    
}


@media (max-width: 767px) {
	.site-mobile-header {
        display: block;
		top: 0px !important;
        width: 100%
    }
    
    h1, h2{
        text-align:center!important;
    }

    .site-mobile-header #headerNav{
        border-radius: 0;
        border-top: none;
    }

    .sidebar{
        background-color: var(--main-brown)!important;
        padding-top: 100px;
        overflow:hidden;
    }

    .sidebar-section-header{
        text-align: left!important;
        padding-top: 7px!important;
    }

    .background-p-character{
        padding: 0!important;
    }

    .otherwise{
        padding: 9px!important;
        padding-top: 30px!important;
        margin: 5px;
        border: double 9px var(--lighter-brown);
    }

    .timestamp {
		margin-left: 1rem!important;
		margin-right: 1rem!important;
	}

}
#rightSidebar{
    margin-top:300px;
}
.table-toc {
    position:sticky;
    top:0;
}
.table-toc a{
    color: #58544d;
}

.toc-h1{
    margin-top:0px!important
}
.table-toc ul {
    border-left:solid 2px #D9D2C4;
    padding-left:10px
}
@media (max-width: 991px) {
    .site-header-image {
        display: none;
    }

    .navbar-brand{
        display:none!important;
    }

    .site-mobile-header {
        display: block;
		top: 0px;
        z-index: 100;
        width: 100%;
        padding:10px;
        left:0;
    }

    #headerNav {
        position: relative;
        z-index: 5;
        width: 100%;
    }

   .breadcrumb{
    font-size: 90%;
   }


    main.container-fluid > .row {
        position: relative;
    }
    .sidebar {
        position: absolute;
        padding-left: 0px;
        text-align: left;
        background-color: var(--main-brown);
        z-index: 5;
        right: 0px;
        bottom: 0px;
        top: 0px;
        overflow-y: scroll;
        overflow-x:hidden;
        left: -100%;
        transition: left 0.2s;
        border:solid 5px var(--lighter-brown);
        padding: 10px;
        padding-top: 100px
    }

    .mobile-site-header{
        z-index: 3;
        top:0;
    }
    .sidebar.active {
        left: 0%;
        overflow-x: hidden;
    }

    #rightSidebar {
        position: absolute;
        padding-left: 0px;
        text-align: left;
        border:solid 5px var(--lighter-brown);
        background-color: var(--main-brown);
        padding-top: 150px!important;
        z-index: 5;
        right: 0px;
        bottom: 0px;
        top: 0px;
        margin-top:0;
        overflow-y: scroll;
        right: -100%;
        padding: 10px;
        transition: right 0.2s;
    }
    #rightSidebar.active {
        right: 0%;
    }

    .sidebar.active {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .sidebar.active::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }

    .sidebar > ul {
        padding-top: 0px;
    }

    .sidebar ul {
        list-style-type: none;
        display: block;
        padding-top: 30px;
        padding-left: 0px;
    }

    .sidebar ul li {
        background-color: var(--main-brown);
        border-radius: 0;
        margin-bottom: 1em;
        padding: 0.4em 0;
        box-shadow: none;
    }

	/*fix for screen being over-wide on mobile*/
	.row {
		margin:0; max-width:100%;
	}

    .sidebar .sidebar-header{
        border-radius:30px!important;
    }

	.container-fluid {
		padding:0px;
	}

    .regular-site-header{
        display:none;
    }

	.site-footer .navbar .navbar-nav {
		flex-wrap: wrap; justify-content: center;
	}
}

/* Footer */

.site-footer {
    text-align: center;
    background-color: var(--darker-brown);
    padding: 5px;
    margin-top: 0px;
}

.site-footer .navbar {
    padding-bottom: 0;
}
.site-footer .navbar .navbar-nav {
    flex-direction: row;
}
.site-footer .navbar .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    color: #E9EADB;
}

.site-footer .copyright {
    padding: 0 1rem 1rem;
}

.mce-content-body {
    padding: 20px;
}

.ui-datepicker-inline {
    position: fixed;
}

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

    Content

**************************************************************************************************/
.modal-header {
    border-bottom: 0px;
    background:var(--main-brown)!important;
}
.modal-header .modal-title {
    line-height: 1em;
}

.modal-header, .modal-body, .modal-content{
    border-radius: 30px;
}

.modal-content{
    border: double 8px var(--lighter-brown);
    background: var(--main-brown);
}

.tooltip-inner {
    max-width: 350px !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--main-brown);
    border-width: 2px 2px 0px 2px!important;
    font-weight:bold;
    color: var(--darkest-brown);
    border-color: var(--darker-brown);
}

.nav-tabs .nav-link:hover{
    background-color: var(--main-brown);
    border-width: 2px 2px 0px 2px!important;
    border-color: var(--lighter-brown);
}

.nav-tabs .nav-link {
    text-transform: uppercase;
    font-family: Unicorn Scribbles;

    border-width: 2px 2px 0px 2px!important;
}

.border-bottom{
    border-bottom: solid 4px var(--darkest-brown)!important;
}

.nav-tabs .staff:hover{
    color: white!important;
}

.nav-tabs .staff{
    border-color: #6CB2EB!important;
    background: #9BC5E8!important;
    color: #4D3539;
    font-weight:bold;
}

.display-user, .display-character {
    font-weight: bold;
}

.help-icon {
    /*vertical-align: middle;*/
    cursor: pointer;
    margin: 0 5px;
    color: var(--primary-green)
}

.breadcrumb {
    background-color: transparent;
    color: #E9EADB!important;
    padding: 0;
    font-family: Autour One;
    text-transform: uppercase;
    align-items: center;
    justify-content:center;
}
.breadcrumb a {
    color: #4D3539;
}
.breadcrumb a:hover {
    color: rgba(0,0,0,0.4);
    text-decoration: none;
}
.breadcrumb-item+.breadcrumb-item:before {
    content: "/";
    color: var(--darker-brown)!important;
    font-weight:bold;
  
}

.breadcrumb-item.active{
    font-weight: bold;
}


.breadcrumb-item.active{
    background:transparent
}

.breadcrumb-item.active::before{
    content: "//";
}

.collapse-title {
    position: relative;
}
.collapse-title:after {
    content: '';
    display: inline-block;
    position: absolute;
    right: -20px;
    top: 0.425em;
    border: 0.3em solid rgba(0,0,0,0.3);
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
}

.image, .image-thumb {
    max-width: 100%;
}

.image{
    max-height: 500px!important;
}

.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline-danger{
    border-color: #C76C72!important;
    color: #C76C72!important;
}

.btn-danger, .badge-danger{
    background-color:#C76C72!important;
    border-color:#C76C72;
}

.pagination {
    flex-wrap: wrap;
}

.circle{
    border-radius:50%;
    
}

/* Chrome, Safari, Edge, Opera */
.pagination-popover input::-webkit-outer-spin-button,
.pagination-popover input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.pagination-popover input[type=number] {
  --moz-appearance: textfield;
}

.spoiler {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-bottom: 1rem;
    background: transparent;
    margin-top: 0px;
}
.spoiler-toggle {
    font-weight: bold;
    background-color: #f5f5f5;
    cursor: pointer;
    padding: .3rem 1.25rem;
    font-size: .9rem;
    font-family: Unicorn Scribbles;
    color: inherit;
    text-transform: uppercase;
}
.spoiler-text {
    padding: .75rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.text-break {
    overflow-wrap: break-word;
    word-break: break-word;
}
.small-icon {
    height: 2rem;
    padding-right: .5rem;
}

/* NOTIFICATIONS *********************************************************************************/

.notifications-table .unread, .notifications-table .unread td {
    background-color: var(--main-brown);
}

/* BROWSE ****************************************************************************************/

.world-entry-image {
    text-align: center;
}

.character-browse{
    border:solid 4px var(--darker-brown)!important;
}

.world-entry-image img {
    max-width: 100%;
}

.masterlist-search-field {
    display: inline-block;
    align-items: center;
    margin-right: 1.25rem;
    margin-bottom: 1.25rem;
}
.masterlist-search-field label {
    margin-bottom: 0px;
    margin-right: 10px;
}
.masterlist-search-field input[type=text], .masterlist-search-field select {
    width: 300px;
}

/* ADMIN ****************************************************************************************/

.ranks-table tbody tr > td:last-of-type {
    text-align: right;
}

.sortable .handle {
    color: var(--darker-brown);
}
.sortable .sortable-placeholder {
    background-color: rgba(0,0,0,0.1);
}


/* LOGS ******************************************************************************************/
tr.inflow {
    background-color: #fafaff;
}
tr.outflow {
    background-color: #fffafa;
}

/* These are not truly tables, but divs styled to look like tables */
.logs-table .logs-table-header {
    border-top: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    font-weight: bold;
    padding: 0px;
    flex-wrap: wrap;
}
.logs-table .logs-table-header .logs-table-cell,
.logs-table .logs-table-body .logs-table-cell {
    padding: .3rem;
}
.logs-table .logs-table-body > .logs-table-row:first-of-type {
    border-top-width: 0;
}
.logs-table .logs-table-body > .logs-table-row,
.logs-table-row .logs-table-row {
    border-top: 1px solid #dee2e6;
}
.logs-table .logs-table-body .logs-table-cell .inflow,
.logs-table .logs-table-body .logs-table-cell .outflow {
    width: 33px;
    line-height: 33px;
    text-align: center;
    position: relative;
    top: -.3rem;
    margin-bottom: -.6rem;
    vertical-align: middle;
    color: #fff;
}


/* PROFILE ***************************************************************************************/

.profile-assets-card .card-body {
    display: flex;
    flex-direction: column;
}
.profile-assets-card .card-body .profile-assets-content {
    flex-grow: 1;
}

.profile-assets .profile-inventory .profile-inventory-item img {
    max-width: 100%;
}

.character-bio .nav-tabs.card-header-tabs .active {
    background: var(--lightest-brown);
    border-color: transparent!important;
}

.card-header-tabs{
    margin-bottom:0!important
}

.card-header{
    padding-bottom:0!important;
    border-radius: 20px !important;
}

.nav-link{
    border-radius: 30px!important;
}

.selectable-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

/* INVENTORY *************************************************************************************/

.inventory-category .inventory-body .inventory-item img {
    max-width: 100%;
}
.inventory-stack-name, .inventory-character-name {
    color: var(--darkest-brown);
}
.inventory-stack-name:hover, .inventory-character-name:hover {
    color: inherit;
    text-decoration: none;
}
tr.accountbound {
    background-color: var(--darkest-brown);
    border-radius: .25rem;
}

/* CHARACTERS ************************************************************************************/

.image-nav .nav-item a {
    border: 5px solid transparent;
    border-radius: .25rem;
    display: block;
}
.image-nav .nav-item a.active {
    border: 5px solid #ddd;
}

@keyframes copy-to-check {
    from {
        opacity: 1;
        content: '\f0c5';
        font-weight: 400;
    }
    50% {
        opacity: 0;
        content: '\f0c5';
        font-weight: 400;
    }
    51% {
        opacity: 0;
        content: '\f00c';
        font-weight: 900;
    }
    to {
        opacity: 1;
        content: '\f00c';
        font-weight: 900;
    }
}

@keyframes check-to-copy {
    from {
        opacity: 1;
        content: '\f00c';
        font-weight: 900;
    }
    50% {
        opacity: 0;
        content: '\f00c';
        font-weight: 900;
    }
    51% {
        opacity: 0;
        content: '\f0c5';
        font-weight: 400;
    }
    to {
        opacity: 1;
        content: '\f0c5';
        font-weight: 400;
    }
}

.toCheck::before {
    animation-name: copy-to-check;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.toCopy::before {
    animation-name: check-to-copy;
    animation-iteration-count: 1;
    animation-duration: 1s;
}

/* TRANSFERS *************************************************************************************/

.transfer-row, .submission-character-row {
    display: flex;
    align-items: stretch;
}
.transfer-info, .submission-character-info {
    flex-grow: 1;
}
.transfer-info .card-body, .submission-character-info .card-body {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}
.transfer-info-content, .submission-character-info-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.transfer-info-content .transfer-info-body, .submission-character-info-content .submission-character-info-body {
    flex-grow: 1;
}

.collapse-toggle {
    position: relative;
}
.collapse-toggle:after {
    display: block;
    content: '';
    border: 0.3rem solid rgba(0,0,0,0.5);
    border-color: transparent transparent transparent rgba(0,0,0,0.5);
    position: absolute;
    right: -0.85rem;
    top: 0.45rem;
    transform: rotateZ(90deg)translateX(0.25rem);
}
.collapse-toggle.collapsed:after {
    transform: none;
}
.user-items .inventory-item, .user-characters .character-item {
    padding: 10px;
}

.user-items .inventory-stack, .user-characters .character-stack {
    cursor: pointer;
}
.user-items .inventory-item img, .user-characters .character-item img {
    max-width: 100%;
}
.user-characters .character-item.disabled, .user-characters .character-item.disabled .character-stack  {
    opacity: 0.5;
    cursor: not-allowed;
}
.user-items .category-selected .inventory-item, .user-characters .category-selected .character-item {
    background-color: #4D3539;
    border-radius: .25rem;
}
.user-items .category-selected.select-item-row {
    background-color: #4D3539;
}

/* SHOPS *****************************************************************************************/
.shops-row img {
    max-width: 100%;
}
.shops-row .shop-name a {
    font-weight: bold;
}

.shop-header{
    background-color: var(--main-brown);
    border-radius: 30px;
    padding: 5px;
    margin: 0 auto!important;
    text-align: center;
}

.shop-header a{
    color: var(--primary-green);
    font-weight:bold
}

/* TRADES ****************************************************************************************/
.trade-offer .currency-item {
    background-color: var(--main-brown);
}

/* BOOKMARKS *************************************************************************************/
.bookmark-table {
    min-width: 1000px;
}

.bookmark-table .bookmark-thumbnail {
    min-width: 115px;
    width: 115px;
}

.bookmark-table .bookmark-info {
    width: 20%;
}

.bookmark-table .bookmark-notifications {
    width: 18%;
}

.bookmark-table .bookmark-actions {
    width: 18%;
}

.emote-img{
    max-height:40px
}

.bookmark-table .img-thumbnail {
    width: 100px;
}

.img-thumbnail{
    max-height:200px;
}

@media (min-width: 768px) {
    .fb-md-50 { flex-basis:50%; }
}

/* BOOTSTRAP TABLES *************************************************************************************/
.ubt-bottom {
  border-bottom:1px solid #dee2e6;
}

.ubt-top {
  border-top:1px solid #dee2e6;
}

.ubt-texthide {
  width:100%;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* COMMENTS *************************************************************************************/
.comment_replies {
        padding-left: 3rem;
        border-left-width: 2px!important;
    }

    .comment-card{
        border-radius: .25rem !important
    }

    .comment-card button{
        font-size: 10px;
        font-weight:bold
    }

    .comment-card .border-top{
        border-color: var(--main-brown)!important;
        border-width: 3px!important
    }

    .comment>p>img {
        max-width: 100%;
        height: auto;
    }

@media only screen and (max-width: 600px) {
    .comment_replies { padding-left:1rem;}
}

.clock-styling {
    padding: 5px 15px;
    border-radius: 15px 15px!important;
   
    color: #E9EADB!important;
    letter-spacing: .05em;
    
}

/* grey-text mashing ****************************************************/



/* bootstrap styling **************************************************/

.b-0{
    border: none!important;
    border-radius: 0!important
}

.bg-secondary, .bg-faded{
    background-color: var(--lightest-brown)!important;
}
.bg-dark{
    background-color: var(--darker-brown)!important;
}

.bg-secondary a, .bg-faded a{
    /*color: var(--darker-brown); */
}


.btn.bg-btn-faded{
    opacity: 70%;
    color:var(--darker-brown);
}

.btn.active{
    filter: brightness(0.80);
    transition: .23s ease
}
.btn.bg-btn-faded.active{
    opacity:100%;
    font-weight:bold;
    transition: .23s ease;
}

.bg-danger{
    background-color: #C76C72!important;
}

.bg-success{
    background-color: #659F7F!important;
}

.bg-warning{
    background-color: #DAC785!important;
}

.bg-primary{
    background-color:var(--primary-green)!important;
}

.text-primary{
    color: var(--primary-green)!important;
}

.text-secondary{
    color: var(--lighter-brown)!important;
}

.text-success{
    color: #62A27E!important;
}

.text-danger{
    color: #ed8386!important;
}

.text-warning{
    color: #DAC689!important;
}

.text-info{
    color: #83B8C3!important;
}

.text-light{
    color: #CEBBC1!important;
}

.text-dark{
    color: #5F4751!important;
}

.text-muted{
    opacity: 75%;
    color: #e4e4e4!important;
}

.text-faded{
    opacity: 75%!important;
}

/* hover animations */

.img-thumbnail{
    transition: all .45s ease;
    border: solid 2px #659F7F;
    margin-bottom: .2rem!important;
    padding: .45rem;
}

.img-thumbnail:hover{
    border-radius: 50%;
    color: #fff;
    letter-spacing: .05em;
    border-color:white!important;
}

.ace_editor {
    height: 100%;
}

/* force color updates! **************************************************/

.alert-warning{
    color: black;
    background-color:#4A9A6F!important;
    border: solid 1px var(--primary-green);
}

.alert-secondary{
    background:var(--lighter-brown)!important;
}

.alert-info a{
    color: var(--darker-brown);
    font-weight:bold;
}

.alert-info a:hover{
    text-decoration: underline;
}
.dropdown-item{
    color: #E9EADB;    
}

.dropdown-menu.card{
    background: var(--lightest-brown)!important;
}


.dropdown-item:hover{
    color: var(--main-brown)!important;
    background-color: #E9EADB;
}

a.dropdown-item::before{
    content: "\2726 ";
}

.dropdown-divider{
    border-color: var(--darker-brown);
    border-width:3px;

}

.modal-header{
    font-size: 50px;
}

.close{
    font-size: 2.35rem;
    text-shadow: none!important;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(2.19rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: .9rem;
    line-height: 1.6;
    color: white!important;
    background-color: var(--main-brown)!important;
    background-clip: padding-box;
    border: 3px solid var(--lighter-brown);
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33);
    border-radius: 0rem!important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.selectize-input.full {
    background-color: var(--main-brown)!important;
    border: solid 3px #E9EADB;
    color: white;
    border-radius: 0px!important;

}

.selectize-input, .selectize-control{
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33)!important;
    border: 3px solid var(--main-brown);
    background-color: var(--main-brown)!important;
    color: #E9EADB!important;
}

.selectize-input [data-selectable]{
    background-color: var(--main-brown)!important;
    color: #E9EADB!important;
}

.selectize-input.focus{
    box-shadow: none!important;
    border: solid 3px #96C391!important;

}

.world-map:hover{
    transition: 1s;
    opacity:30%;
}

.world-map{
    background:white;
    transition:1s;
    opacity:0%
}

.image-dia{
    max-height:300px
}

::placeholder {
    color: #CB9BAA!important;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: #CB9BAA!important;
  }


/* styling for world buttons */
.world-link-button {
    background-color: var(--main-brown)!important;
    border: solid 4px var(--lighter-brown);
    border-radius:30px!important;
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33);
    margin: 0 auto!important;
    white-space: normal;
}

.world-link-button .active{
    border: solid 3px white!important;
}

.world-info-box{
    padding: 40px;
    margin-bottom: 20px;
}


.world-link-card {
    padding: 0px 0px 10px 0px;
}

.forage-denied{
    border: solid 4px var(--main-brown);
}

.big{
    font-size: 16px
}

/* parllax settup */
.nav-link:hover {
    color: var(--primary-green)!important;
}

.pagedoll{
    position: absolute;
    bottom: 0;
    right: 0;
}

.para-content{
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 10px;
}

.stuff{
    position:relative;
    display:flex;
    height:100%;
    transform-style: preserve-3d;
    z-index:-1;
}

.background, .middle, .foreground{
    position:absolute;
    height: 100%;
    width:100%;
    object-fit: cover;
}

.background{
    transform: translateZ(-10px) scale(2);
}

.middle{
    transform: translateZ(-5px) scale(1.5);
}

.foreground{
    transform: translateZ(-2.5px) scale(1.25);
}

.footer-image{
    position:absolute;
    bottom:0;
    z-index:-1;
    object-fit:cover;
    height:50%;
    width:100%;

}

.without-para-content{
    position:absolute;
    z-index:10;
    top:0;
    width:100%;

}

 /* tinybox recolors */
 .tox-tinymce{
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33)!important;
    border: solid 4px var(--lighter-brown)!important;
 }

 .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary{
    background-color: var(--lighter-brown);

 }

 .tox .tox-toolbar__group:not(:last-of-type) {
    border: solid 3px var(--lighter-brown)!important;
    margin:1.5px!important;
    background-color: var(--lightest-brown)
}
.tox .tox-edit-area__iframe {
    border: solid 4px var(--lightest-brown)!important;
    background-color:transparent!important;
}

 .tox .tox-menu, .tox .tox-statusbar {
    border:none!important;
    background: var(--lighter-brown)!important;
}

.tox .tox-tbtn svg {
    fill: #E9EADB!important;
}

body#tinymce{
    background: var(--main-brown)!important;
}

.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary{
    background: var(--ligher-brown)!important;
}

.tox .tox-edit-area{
    margin-top: 2.5px!important;
    border:0!important;
}

.tox .tox-tbtn:hover{
    background:#E9EADB!important;
}

.tox .tox-tbtn svg:hover {
    fill: var(--ligher-brown)!important;
}

.btn-outline-secondary{
    border-color: var(--darker-brown)!important;
    color:var(--darker-brown);
}

.btn-primary{
    border: 0
}

.btn-faded{
    background-color: #CEBBC1!important
}

.border{
    border: 3px dashed var(--main-brown)!important;
}

  /* Dashboard content */

  .dashboard-card{
    box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
    border-radius: 0px;
    border: solid 4px var(--darker-brown); 
  }

  .dashboard-card-smaller{
    box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
    border-radius: 0px;
    border: solid 10px var(--darker-brown); 
  }

  .quickjump-item{
    background-color: var(--main-brown);
    border: solid 4px var(--main-brown);
    border-radius: 0;
    box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
  }

  .clock{
    background:var(--main-brown)!important;
    box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1)!important;
  }

  .carousel-indicators .active {
    background-color: var(--primary-green);
    transform: translateY(-3px);
    z-index:3!important;
}

.carousel-indicators li {
    background-color: var(--main-brown);
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 26%);
    transition: .15s ease-in-out;
}

.carousel-indicators{
   z-index:2!important; 
}

.navbar-nav{
    justify-content: space-around;
    display:flex;
}

.navbar.admin-navbar{
    border: 0!important;
    border-radius: 30px!important
}

.nav-content{
    padding: 0!important;
}

.figure-card{
    border: solid 10px var(--darker-brown);
    border-radius: 0;
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33);
}

/* dialouge stylings */
.quip-box{
    border-radius: 100px;
    background-color: #e9eadb!important;
    max-width: 700px;
    margin: 0 auto;
    width:100%; 
    display: flow-root; 
    max-width: 800px; 
    margin: 0 auto;
    color: var(--darker-brown);
}
.quip-box .floatable{
    shape-outside: circle(50%);
    margin: 0px; 
    float:right;
}

.quip-box h3 a{
    color: var(--darker-brown)!important; 
}

.quip-box img{
    max-height: 150px
}

.quip-box .text{
    float:none;
}

@media only screen and (max-width: 600px) {
    .quip-box img{
        max-width: 100px;
    }
    
    .quip-box{
        font-size: 13px;
    }
}


@keyframes breathing{
    0% { height:100%; }
    50%  { height: 98%; }
    100%   { height: 100%  }
}

@-moz-keyframes breathing{
    0% { height:100%; }
    50%  { height: 98%; }
    100%   { height: 100%  }
}

@-webkit-keyframes breathing{
    0% { height:100%; }
    50%  { height: 98%; }
    100%   { height: 100%  }
}

.breathing{
    animation: breathing 4s infinite ease-in-out;
    -webkit-animation: breathing 4s infinite ease-in-out;
    -moz-animation: breathing 4s infinite ease-in-out;
}

.dia-text-box{
    border-radius: 30%!important;
}

.dialogue-text-container{
    margin-top: -20px!important;
    position: relative;
    z-index: 99;
}

.greyscale{
    opacity:80%;
    transform: scale(.99);
    transition: 4s ease;
}

.grayscale{
    opacity:80%;
    transform: scale(.99);
    transition: 4s ease;
    filter: grayscale(1);
}


.flip-vert{
    transform: scaleX(-1);
}


.dialogue-container{
    border: solid 6px var(--main-brown);
    border-radius:0px!important;
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33);

}

.dialogue-speaker{
    padding-top: 8px!important;
    padding-bottom: 0px!important;
    padding-left: 8px;
}


.dialogue-text-container{
    color: black;
}

.dia-bubble{
    
    box-shadow: 1px 3px 6px rgba(0,0,0,0.33);
    border-radius: 30em;
}

.recipe-image {
    width: 150px;
}

/*----------------research-tree----------*/

.research-scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}
.research-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e4e4e4;
}

/*
    Credit to Preimpression for all of this code. You can find their github here:
    https://github.com/preimpression

    Branch where the code is from:
    https://github.com/preimpression/lorekeeper/tree/extension/research_trees
*/

.children-scroll::-webkit-scrollbar, .research-scroll::-webkit-scrollbar-thumb  {
    width: 5px;
    height: 8px;
}
.children-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e4e4e4;
}
.children-scroll::-webkit-scrollbar-thumb {
    background: #212121;
    border-radius: 10px;
    transition: 0.5s;
}
.research-scroll::-webkit-scrollbar-thumb:hover ,
.children-scroll::-webkit-scrollbar-thumb:hover {
    background: #d5b14c;
    transition: 0.5s;
}


/*----------------research-tree----------*/
.research-body{
    white-space: nowrap;
    overflow-y: hidden; 
}
.research-tree ul ,
.children-body{
    white-space: nowrap;
    overflow-y: hidden; 
}
.children-skill ul {
    padding-top: 20px; 
    position: relative;
    padding-left: 0px;
    display: flex;
}
.research-tree li ,
.children-skill li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}
.research-tree li::before, .research-tree li::after,
.children-skill li::before, .children-skill li::after{
    content: '';
    position: absolute; 
    top: 0; 
    right: 50%;
    border-top: 2px solid #ccc;
    width: 50%; 
    height: 18px;
}
.research-tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
}
.research-tree li:only-child::after, .research-tree li:only-child::before {
    display: none;
}
.research-tree li:only-child{ 
    padding-top: 0;
}
.research-tree li:first-child::before, .research-tree li:last-child::after{
    border: 0 none;
}
.research-tree li:last-child::before,
.children-skill li::after{
    right: 50%;
    left: auto;
    border-right: 2px solid #ccc;
}
.children-skill li:only-child::after, .children-skill li:only-child::before {
    display: none;
}
.children-skill li:only-child{ 
    padding-top: 0;
}
.children-skill li:first-child::before, .children-skill li:last-child::after{
    border: 0 none;
}
.children-skill li:last-child::before{
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.research-tree li:first-child::after,
.children-skill li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
.research-tree ul ul::before,
.children-skill ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #ccc;
    width: 0; height: 20px;
}
.research-tree li a,
.children-skill li a{
    text-decoration: none;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.research-tree li a:hover+ul li::after, 
.research-tree li a:hover+ul li::before, 
.research-tree li a:hover+ul::before, 
.research-tree li a:hover+ul ul::before,
.children-skill li a:hover+ul li::after, 
.children-skill li a:hover+ul li::before, 
.children-skill li a:hover+ul::before, 
.children-skill li a:hover+ul ul::before{
    border-color:  #fbba00;
}

/*--------------memeber-card-design----------*/
.member-view-box{
    padding:0px 20px;
    text-align: center;
    border-radius: 4px;
    position: relative;
}
.member-image{
    position: relative;
}

.promptimg{
    max-width: 300px;
}


.currencies-front p{
    margin-bottom:0!important;
    margin-top:0;
}

.strike{
    text-decoration: line-through;
}


.border-solid{
    border: solid 4px
}

.border-white{
    border-color: white;
}

.stat-entry {
    transition: background-color 0.2s;
}

.stat-entry:hover {
    /* darken bg-color */
    background-color: rgba(0,0,0,0.05) !important;
}

.collectionnotunlocked {               
    opacity: 0.4;
    filter: alpha(opacity=40);
    max-height: 150px;
    zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
 }



 /* additional sidebar */
 .to-do {
    width: 0!important;
    transition: 0.5s;
    overflow-x:hidden;
    white-space: nowrap;
  }
  
  
  
  .to-do a:hover {
    color: #f1f1f1;
  }

  #to-do .card{
    background:#E9EADB!important;
    min-height: 300px;
  }

  .new{
    color: #DAC689;
  }

  .new::before{
    font-family: 'Font Awesome 5 Free';
    content: '\f0f3 ';
    color: #DAC689
  }
  
  
  .toDoButton {
    font-size: 20px;
    cursor: pointer;
    border: none;
  }
  
  #toDoButton:hover {
    background-color: #444;
  }
  
  .nowActive{
    width: 100%!important;
  }

  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }


.avatar {
    border: 16px solid rgba(0, 0, 0, .0); 
}



.avatar-border .border-avatar{
    right:55%;
    left:0%;
}

.avatar-border img{
    height:100%;
    width:auto
}

.home image {
    fill: var(--darker-brown)
}

.home.hoverable image:hover{
    filter: brightness(85%);
    cursor:pointer;
}


.home.hoverable rect{
    fill:black;
    opacity:40%;
}

.home rect:not(.keep){
    opacity:0%
}

.collection-view .home.hoverable a rect.flashing{
    stroke: #2e2121 !important;
    stroke-width: 15px;
    cursor:not-allowed;
}

.collection-view .home.hoverable a rect.flashing:hover{
    fill: inherit!important;
}

.home.hoverable rect.flashing{
    opacity:40%;
    animation: fade 2s infinite;
}

.home.hoverable rect.flashing:hover{
    opacity:50%;
    fill:#C3D4F3;
    animation: none;
}

@keyframes fade {
  0%,100% { opacity: 40% }
  50% { opacity: 30% }
}


.user-profile-image .avatar-border .avatar, 
.user-profile-image .avatar-border, 
.user-profile-image .border-avatar{
    height:250px;
    width:250px
}

.avatar-border .avatar, .avatar-border, .border-avatar{
    height:150px;
    width:150px
}


/* tf you so light for huh */
tr.inflow{
    background:var(--main-brown)!important;
}

.chapterButtons {
    border-radius: 50%;
    background: var(--main-brown);
    padding: 1px 6px;
    border: solid;
}

.hinter {
    position: relative;
    display: inline-block;
  }
  .hinter .hintertext {
    visibility: hidden;
    background-color: #4D3539;
    color: #E9EADB;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    transition: .45s ease-in-out;
    opacity: 0;
    width: 400px;
    top: 50%;
      left: 50%;
      
    box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
    /* Position the tooltip */
    position: fixed;
    z-index: 1;
    z-index: 1001;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
    border-radius: 30px;
    font-size: 17px!important;
    font-family: 'Playpen Sans Thin'!important;
    font-weight:normal;

  }
  
  .hinter-icon{
    animation: 3s infinite pulse;
  }

  @keyframes pulse {
    0% {color:var(--primary-green)
          }
  
    50% {color:#E9EADB
           }

    100% {color:var(--primary-green)
            }
  }

  .hinter:hover .hintertext {
    visibility: visible;
    opacity: 100%;
  }

  .tinter{
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-green);
    z-index: 1000;
    opacity: 0;
    
    transition: 1s ease;
  }

  .hinter:hover ~ .tinter{
    visibility: visible;
    opacity: 0.4;
  }

  .category-wrapper{
    display: flex;
    justify-content: center;
  }

  .crafting-cat{
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-size: 10px;
    padding-top: 9px;
    margin:-4px
  }

  #weather{
    background-attachment: fixed;
  }

  .weather-tile{
    background-repeat:repeat;
  }

  .weather-cover{
    background-size:cover;
    background-repeat:no-repeat;

  }

  .tab-content:has(> .blur-tint){
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

    div:has(> .tab-content .blur-tint) {
    box-shadow: inset 0px 0px 10px 20px var(--main-brown);
  }

  .tutorial-card{
    position:fixed;
    bottom:0;
    left:5%;
    z-index:999;
    display:flex;
    align-items: flex-end;
    height:10px;
  }

  .tutorial-card .card{
    width: 450px; 
    height:150px;
    position: relative;
    right: 80px;
    box-shadow: 7px 6px 6px 3px rgba(0,0,0,0.1);
    border:solid 2.5px #E9EADB;
  }

  .tutorial-card div img{
    max-height:300px;

  }

  .faded{
    opacity:40%
  }

  .faded:hover{
    opacity:100%;
    transition: ease-in-out .5s
  }

  
@media (max-width: 740px) {
    .tutorial-card{
        left:0
    }

    .tutorial-card .card{
        width: 90%; 
        right: 0px;
      }

      .tutorial-card .card, .tutorial-card .card .card-body{
        background: #96726ccb!important;
      }

      .tutorial-card div img{
        position:absolute;
        bottom:150px;
        height:180px;
      }
}
.image-info-box {
    overflow-y: auto;
      max-height: 60vh;
  }

[id^="comment"] .user-avatar {
    margin-right: 0.25rem;
}

  /* USER BORDERS *****************************************************************************************/

.user-avatar {
    position: relative;
    margin: auto;
    z-index: 0;
}

.comment-pfp .user-avatar{
    width: 135px!important;
}

.comment-pfp .user-avatar .avatar{
    width:135px!important;
    height: 135px
}

/* @media (max-width: 991px) {
    .user-avatar {
        max-width: 125px;
    }
} */

.user-avatar .avatar {
    aspect-ratio: 1 / 1;
    border: 15px solid transparent;
    border-radius: 50%;
    max-width: 100%;
    width: 300px;
}

.user-avatar .avatar-border {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height:100%
}

.avatar-border.top {
    z-index: 1;
}

.avatar-border.under {
    z-index: -1;
}

.avatar-border.bottom {
    z-index: -2;
}

.ttt .col-4{
    border:solid 10px transparent;
    
    border: groove 9px #D8C68D;
}


.ttt .col-4:nth-child(1), .ttt .col-4:nth-child(3), .ttt .col-4:nth-child(7), .ttt .col-4:nth-child(9){
    border-width: 0px;
}

.ttt .col-4:nth-child(2), .ttt .col-4:nth-child(8){
    border-width: 0px 9px 0px 9px;
}

.ttt .col-4:nth-child(4), .ttt .col-4:nth-child(6){
    border-width: 9px 0px 9px 0px;
}

.content-warning {
    filter: blur(2px) grayscale(60%);
    transition: filter 0.25s ease;
}

.content-warning:hover {
    filter: none;
}

.text-faded{
    opacity:25%!important
}
.collectionnotunlocked {               
    opacity: 0.4;
    filter: alpha(opacity=40);
    zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
 }
 
 .greyscale {
    filter: grayscale(40%);
    opacity: 0.5;
 }
 


.square-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
}

.square-grid > div {
    flex: 0 0 12%;
}


.square-grid.lg > div {
    flex: 0 0 30%;
}

.square-grid.xl > div {
    flex: 0 0 47%;
}

.square-grid .square-column img {
    max-width: 100%;
    max-height: 100%;
}

.square-grid .square-column .img-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}
/* RESPONSIVE BORDERS https://stackoverflow.com/questions/46412541/applying-borders-on-elements-depending-on-device-size-with-bootstrap */
@media (min-width: 576px) {
    .border-sm-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-sm-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-sm-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-sm-top-0 {
      border-top: 0 !important;
    }
    .border-sm-right-0 {
      border-right: 0 !important;
    }
    .border-sm-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-sm-left-0 {
      border-left: 0 !important;
    }
    .border-sm-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-sm {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }

  @media (min-width: 768px) {
    .border-md-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-md-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-md-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-md-top-0 {
      border-top: 0 !important;
    }
    .border-md-right-0 {
      border-right: 0 !important;
    }
    .border-md-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-md-left-0 {
      border-left: 0 !important;
    }
    .border-md-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-md {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }

  @media (min-width: 992px) {
    .border-lg-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-lg-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-lg-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-lg-top-0 {
      border-top: 0 !important;
    }
    .border-lg-right-0 {
      border-right: 0 !important;
    }
    .border-lg-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-lg-left-0 {
      border-left: 0 !important;
    }
    .border-lg-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-lg {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }

  @media (min-width: 1200px) {
    .border-xl-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-xl-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-xl-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-xl-top-0 {
      border-top: 0 !important;
    }
    .border-xl-right-0 {
      border-right: 0 !important;
    }
    .border-xl-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-xl-left-0 {
      border-left: 0 !important;
    }
    .border-xl-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-xl {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }