@import <link href= 'https://fonts.googleapis.com/css?family=Poor+Story' rel= 'stylesheet' >;

body,
html,
form {
    margin: 0px;
    padding: 0px;
}

body,
html {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: stretch;
}

img {
    border: 0px;
    behavior: url(/iepngfix.htc);
}

body {
    background-repeat: repeat;
    background-color: #cba753;
    font-family: Verdana, Arial, sans-serif;
    color: #4b4835;
}

a:link {
    color: #926025;
    text-decoration: none;
    font-weight: bold;
}

a:visited {
    color: #926025;
    text-decoration: none;
    font-weight: bold;
}

a:active {
    color: #706d7d;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #1e2e62; /* previous value: #cba753 */
    text-decoration: underline;
    font-weight: bold;
}

#container {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: stretch;

    width: 985px;
    box-sizing: border-box;
    padding: 10px 10px 0 10px;
    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, max-content);
    grid-template-rows: auto auto 1fr auto;

    grid-template-areas:
        'header header'
        'leftsidebar dateuser'
        'leftsidebar main'
        'leftsidebar footer';

    row-gap: 10px;
    column-gap: 10px;

    justify-content: space-between;
}

.loggedOut #container {
    grid-template-rows: auto 1fr auto;

    grid-template-areas:
        'header header'
        'leftsidebar main'
        'leftsidebar footer';
}

@property --progress {
    initial-value: 0%;
    inherits: true;
    syntax: '<percentage>';
}

.progress {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 1px outset black;
    background-clip: padding-box;
    padding: 0;

    width: 100%;
    height: 1.5em;

    isolation: isolate;
    position: relative;

    border-radius: 0.5em;

    text-align: center;

    background: rgba(255, 255, 255, 0.75);
    color: transparent;
    font-weight: bold;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress::before,
.progress::after {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    font-weight: bold;
    content: attr(data-content);
}

.progress::before {
    z-index: 3;

    mask: linear-gradient(black, black 100%) 0 center / var(--progress, 0%) 100% no-repeat;

    pointer-events: none;
    background: linear-gradient(0deg, #007fff, #00afff 100%);

    color: white;
}

.progress::after {
    position: absolute;

    z-index: 1;

    color: rgba(0, 0, 0, 0.6);
}

#header {
    height: 150px;
    margin-bottom: 10px;
    background-image: url(/images/layout_header_banner.png);
    display: flex;
    justify-content: flex-end;
    align-items: center;

    grid-area: header;
}

#dateuser {
    width: 805px;
    height: 40px;
    padding: 7px;
    background: #fff7dc;
    border: 5px #9f9452 double;
    font-size: 9pt;

    grid-area: dateuser;
}

#leftsidebar {
    width: 150px;
    margin-bottom: 10px;

    grid-area: leftsidebar;
}

#currency {
    padding: 5px;
    margin-bottom: 10px;
    background: #fff7dc;
    border: 5px #9f9452 double;
    text-align: center;
    font-size: 8pt;
}

#sidemenu {
    padding: 5px;
    background: #fff7dc;
    border: 5px #9f9452 double;
    text-align: left;
    font-size: 9pt;
    line-height: 1.6em;
}

#sidemenu ul {
    padding: 0;
    margin: 0;
}

#sidemenu li {
    padding: 2px;
    margin: 0;
    list-style-type: none;
    display: block;
}

#sidemenu ul li ul li:not(:last-child) {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(203, 167, 83, 1) 0%, rgba(203, 167, 83, 0) 90%) 1;
}

#sidemenu > ul > li > a {
    background-color: #cba753;
    display: block;
    padding: 2px;
    text-align: center;
    color: #4b4835;
}

#sidemenu > ul > li > ul > li {
    padding: 0;
    margin: 0;
    list-style-type: square;

    font-weight: normal;
}

#main {
    width: 805px;
    min-height: 600px;
    padding: 7px;
    background: #fff7dc;
    border: 5px #9f9452 double;
    color: #4b4835;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8.5pt;
    text-align: left;

    align-self: stretch;
    grid-area: main;

    overflow-wrap: break-word;
}

.loggedOut #main.loginIndex {
    width: 800px;
    min-height: 582px;
    background: #fff7dc url(images/cavelogin.jpg) no-repeat center center;
    background-size: cover;
    overflow: auto;
}

#footer {
    width: 810px;
    /** border-top: 1px #4B4835 dotted; **/
    background: #fff7dc;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 7pt;
    text-align: left;

    grid-area: footer;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25em;
}

#footerLinks {
    display: flex;
    justify-content: space-between;
}

#footerIcons {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

#register {
    z-index: 3;
    background-color: #fff7dc;
    filter: alpha(opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
    color: #4b4835;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: normal;
    text-align: left;
    width: 650px;
    padding: 10px;
    position: absolute;
    top: 160px;
    left: 250px;
    border-style: double;
    border-width: 5px;
    border-color: #b3ad9a;
}

#cpanelcontainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#cpaneluserinfo {
    position: relative;
    width: 285px;
    margin: 10px 10px 10px 10px;
    padding: 0px 10px 10px 10px;
    border: 1px solid;
    min-height: 210px;
}

#cpanelh3meters {
    position: relative;
    width: 425px;
    margin: 10px 10px 10px 10px;
    padding: 0px 10px 10px 10px;
    border: 1px solid;
    min-height: 210px;
}

.cpanelmisc {
    padding: 0px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    border: 1px solid;
    min-height: 210px;
    width: 285px;
}

.cpanelmiscwide {
    padding: 0px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    border: 1px solid;
    min-height: 210px;
    width: 425px;
}

#cpaneleyrie {
    min-height: 210px;
}

td#h3pumaname {
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cpanelbookmarks {
    position: relative;
    width: 425px;
    margin: 0 auto 2em;
    padding: 0px 10px 10px 10px;
    border: 1px solid;
    min-height: 220px;
}

.bold {
    font-weight: bold;
}
.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.italic {
    font-style: italic;
}
.smaller {
    font-size: 8pt;
}
.larger {
    font-size: 9pt;
}
.green {
    color: #30ff00;
}
.red {
    color: #ff0000;
}
.yellow {
    color: #ffb00f;
}
.orange {
    color: #ff6600;
}

.smallermod {
    font-size: 7pt;
    font-weight: normal;
}

.usertype {
    font-size: 9pt;
    font-weight: normal;
}

.status {
    font-size: 8pt;
    font-weight: normal;
}

.warning {
    color: #ff0000;
    font-weight: bold;
}

.online {
    color: #fff7dc;
    font-weight: bold;
}

.offline {
    color: #887700;
    font-weight: bold;
}

.idle {
    color: #fff7dc;
    font-weight: bold;
}

.blank {
    border: 0;
    padding: 0px;
    margin: 0;
    background: transparent;
}

.centerdiv {
    margin: 0 auto;
}

dt {
    width: 10em;
    text-align: right;
    float: left;
    clear: left;
}

dd {
    margin-left: 5px;
}

dl {
    clear: both;
}
dd {
    overflow: hidden;
    clear: right;
    height: 1%;
}
dd.x-form-clear {
    clear: both;
}

table {
    color: #4b4835;
    background-color: #fff7dc;
    border: 2px #cba753 solid;
    border-collapse: collapse;
    border-spacing: 0px;
}

td {
    background-color: #fff7dc;
    border-top: 1px #cba753 solid;
    border-bottom: 1px #cba753 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 5px;
    text-align: left;

    overflow-wrap: break-word;
}

th {
    background-color: #cba753;
    border-bottom: 1px #cba753 solid;
    padding: 5px;
    text-align: left;
    font-size: 10px;
}

select {
    background-color: #fff7dc;
    border: 1px solid;
    color: #4b4835;
    font-size: 11px;
    font-weight: normal;
}

td.sticky {
    background-color: #ffd268;
}

td.newsbody {
    background-color: #fff7dc;
    border: 1px #4b4835 solid;
    border-spacing: 0px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    font-weight: normal;
    vertical-align: top;

    overflow-wrap: break-word;
}

td.newsauthor {
    background-color: #fff7dc;
    border-bottom: 1px #4b4835 solid;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
    font-size: 9px;
    text-align: left;
}

td.newscomments {
    background-color: #fff7dc;
    border-bottom: 1px #4b4835 solid;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
    font-size: 9px;
    text-align: left;
}

td.newscomments > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

td.newscomments > div > div:nth-child(2) {
    text-align: right;
    font-weight: bold;
}

td.newstitle {
    background-color: #cba753;
    border-spacing: 0px;
    font-weight: bold;
    height: 20px;
    padding: 5px;
    font-size: 14px;
    text-align: left;
}

td.commentauthor,
td.commentdate {
    background-color: #cba753;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
}

td.commentauthor {
    text-align: left;
}

td.commentdate {
    text-align: right;
}

.newscomment {
    width: 80%;
    table-layout: fixed;
}

td.commentbody {
    background-color: #fff7dc;
    border-top: 1px #cba753 solid;
    border-bottom: 1px #cba753 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 5px;
    text-align: left;
    font-weight: normal;
    overflow-wrap: break-word;
}

table.firstpost {
    width: 100%;
    color: #302e22;
    background-color: #cba753;
    border: 2px #4b4835 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    table-layout: fixed;
}

td.firstauthor {
    width: 160px;
    background-color: #d9b359;
    border-right: 1px #4b4835 solid;
    border-spacing: 0px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

td.firstbody {
    background-color: #d9b359;
    border-right: 1px #4b4835 solid;
    border-bottom: 1px #4b4835 solid;
    border-spacing: 0px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

td.firstdate {
    background-color: #d9b359;
    border-bottom: 1px #4b4835 solid;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
    text-align: left;
}

td.firstsignature {
    background-color: #d9b359;
    border-spacing: 0px;
    padding-left: 5px;
    padding-bottom: 7px;
    height: 20px;
    text-align: left;
    font-size: 9px;
    font-weight: normal;
    vertical-align: bottom;
}

table.officialfirstpost {
    width: 100%;
    color: #33371a;
    background-color: #bac65d;
    border: 2px #666d33 solid;
    border-collapse: collapse;
    border-spacing: 0px;
}

td.officialfirstauthor {
    width: 160px;
    background-color: #bac65d;
    border-right: 1px #666d33 solid;
    border-spacing: 0px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

td.officialfirstbody {
    background-color: #bac65d;
    border-right: 1px #666d33 solid;
    border-bottom: 1px #666d33 solid;
    border-spacing: 0px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

td.officialfirstdate {
    background-color: #bac65d;
    border-bottom: 1px #666d33 solid;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
    text-align: left;
}

td.officialfirstsignature {
    background-color: #bac65d;
    border-spacing: 0px;
    padding-left: 5px;
    padding-bottom: 7px;
    height: 20px;
    text-align: left;
    font-size: 9px;
    font-weight: normal;
    vertical-align: bottom;
}

table.posts {
    width: 100%;
    color: #4b4835;
    background-color: #fff7dc;
    border: 2px #cba753 solid;
    border-collapse: collapse;
    border-spacing: 0px;
}

td.postsauthor {
    width: 160px;
    background-color: #fff7dc;
    border-right: 1px #cba753 solid;
    border-spacing: 0px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

td.postsbody {
    background-color: #fff7dc;
    border-right: 1px #cba753 solid;
    border-spacing: 0px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

td.postsdate {
    background-color: #fff7dc;
    border-bottom: 1px #cba753 solid;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
    text-align: left;
}

td.postssig {
    background-color: #fff7dc;
    border-spacing: 0px;
    padding-left: 5px;
    padding-bottom: 7px;
    height: 20px;
    text-align: left;
    font-size: 9px;
    font-weight: normal;
    vertical-align: bottom;
}

table.officialposts {
    width: 100%;
    color: #302e22;
    background-color: #bac65d;
    border: 2px #666d33 solid;
    border-collapse: collapse;
    border-spacing: 0px;
}

td.officialpostsauthor {
    width: 160px;
    background-color: #bac65d;
    border-right: 1px #666d33 solid;
    border-spacing: 0px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

td.officialpostsbody {
    background-color: #bac65d;
    border-right: 1px #666d33 solid;
    border-bottom: 1px #666d33 solid;
    border-spacing: 0px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

td.officialpostsdate {
    background-color: #bac65d;
    border-bottom: 1px #666d33 solid;
    border-spacing: 0px;
    height: 20px;
    padding: 5px;
    text-align: left;
}

td.officialpostssig {
    background-color: #bac65d;
    border-spacing: 0px;
    padding-left: 5px;
    padding-bottom: 7px;
    height: 20px;
    text-align: left;
    font-size: 9px;
    font-weight: normal;
    vertical-align: bottom;
}

table.posts,
table.firstpost table.officialfirstpost,
table.officialposts {
    table-layout: fixed;
}

td.firstbody,
td.postsbody,
td.officialfirstbody,
td.officialpostsbody {
    overflow-x: hidden;
    overflow-wrap: break-word;
}

td:where(.firstbody, .postsbody, .officialfirstbody, .officialpostsbody, .newsbody) img {
    max-width: 100%;
    object-fit: contain;
}

td:where(.firstbody, .postsbody, .officialfirstbody, .officialpostsbody, .newsbody) hr {
    max-width: 75%;
}

table.stafftable {
    color: #4b4835;
    background-color: #acb756;
    border: 2px #666d33 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    align: center;
}

td.staffcell {
    background-color: #acb756;
    border-top: 1px #666d33 solid;
    border-bottom: 1px #666d33 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 5px;
    font-weight: bold;
    text-align: left;
}

th.staffheader {
    background-color: #666d33;
    border-bottom: 1px #666d33 solid;
    color: #fff7dc;
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

table.buddylist {
    color: #4b4835;
    background-color: #acb756;
    border: 2px #666d33 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: auto;
}
th.buddyheader {
    background-color: #666d33;
    border-bottom: 1px #666d33 solid;
    color: #fff7dc;
    padding: 5px;
    text-align: center;
    font-size: 12px;
}
td.buddycell {
    background-color: #acb756;
    border-top: 1px #666d33 solid;
    border-bottom: 1px #666d33 solid;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 5px;
    font-weight: bold;
    text-align: left;
}

#error {
    background-color: #fff7dc;
    color: #4b4835;
    font-size: 10px;
    font-weight: bold;
    width: 95%;
    padding: 5px;
    position: relative;
    margin: auto;
    border: 2px #b3ad9a solid;
    text-align: center;
}

#success {
    background-color: #a6b154;
    color: #393d1d;
    font-size: 10px;
    font-weight: bold;
    width: 95%;
    padding: 5px;
    position: relative;
    margin: auto;
    border: 2px #666d33 solid;
    text-align: center;
}

#randomevent {
    background-color: #ffaa00;
    color: #3c2401;
    font-size: 12px;
    font-weight: bold;
    width: 95%;
    padding: 5px;
    position: relative;
    margin: auto;
    border: 2px #d07d00 solid;
    text-align: center;
}

.view_notifications {
    padding-top: 25px;
    padding-bottom: 25px;
}

.notification_filters {
    padding-bottom: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.notification_filters > div:last-child {
    padding-top: 10px;
    grid-column: 1/-1;
    text-align: center;
}

.vertpad10px {
    padding-top: 10px;
    padding-bottom: 10px;
}

.vertpad25px {
    padding-top: 10px;
    padding-bottom: 10px;
}

.notification {
    display: grid;
    grid-template-columns: 1fr 100px 25px;
    font-size: 12px;
    width: 95%;
    padding: 5px;
    margin: auto;
    text-align: center;
}

.notifunread {
    font-weight: bold;
}

.notification > div:nth-child(2) {
    font-style: italic;
}

.newsnotif {
    background-color: #ff9f98;
    color: #3c2524;
    border: 2px #d0827c solid;
}

.transfernotif {
    background-color: #e398ff;
    color: #37253d;
    border: 2px #bb7dd1 solid;
}

.salesnotif {
    background-color: #ffa069;
    color: #591e00;
    border: 2px #d16100 solid;
}

.breedingnotif {
    background-color: #76dbff;
    color: #003d55;
    border: 2px #5993b4 solid;
}

.statusnotif {
    background-color: #f9ff48;
    color: #30310e;
    border: 2px #ffda4d solid;
}

.workboardnotif {
    background-color: #ebebeb;
    color: #000000;
    border: 2px #ababab solid;
    text-shadow: none;
}

.venturenotif {
    background-color: #61d091;
    color: #253d37;
    border: 2px #3d9b66 solid;
}

#puma_image {
    text-align: center;
}

#pumademo {
    color: #3c2524;
    font-size: 10px;
    width: 95%;
    padding: 5px;
    position: relative;
    margin: auto;
    border: none;
}

#pumademo dt {
    width: 150px;
    padding-right: 10px;
}

#tooltip {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 0.85;
    width: 200px;
}

#tooltip h3,
#tooltip div {
    margin: 0;
}

#tooltip.pumapride {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 0.9;
    width: 175px;
}
#tooltip.transfer {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 1;
    width: 231px;
}
#tooltip.truncatename {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 1;
}
#tooltip.parentimage {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 1;
}
#tooltip.usershop {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 1;
    text-align: center;
    width: 200px;
    height: auto;
}
#tooltip.info {
    position: absolute;
    z-index: 3000;
    font-size: 9px;
    border: 1px solid #4b4835;
    background-color: #fff7dc;
    padding: 5px;
    opacity: 1;
    width: auto;
    max-width: 300px;
}

div.inventory {
    float: left;
    border: 2px solid;
    margin: 10px 10px 10px 10px;
    width: 150px;
    height: 220px;
    padding: 5px;
    text-align: center;
}

div.itemname {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.itemcat {
    font-style: italic;
    font-weight: normal;
    font-size: 9px;
}

.qty {
    text-align: center;
    font-weight: bold;
}

.inventmenu {
    width: 140px;
}

div.bonecollector {
    display: inline-block;
    border: 2px solid;
    margin: 10px 5px 5px 5px;
    min-width: 240px;
    min-height: 180px;
    padding: 5px;
    text-align: center;
}

div.quests {
    float: left;
    border: 2px solid;
    margin: 10px 5px 5px 5px;
    min-width: 240px;
    min-height: 180px;
    padding: 5px;
    text-align: center;
}

#bc_item_area {
    width: 750px;
    padding-left: 10px;
}

#countdown_dashboard {
    height: 110px;
}

.dash {
    width: 110px;
    height: 114px;
    background: transparent url('/images/dash.png') 0 0 no-repeat;
    float: left;
    margin-left: 20px;
    padding-top: 5px;
    position: relative;
}

.dash .digit {
    font-size: 55pt;
    font-weight: bold;
    float: left;
    width: 55px;
    text-align: center;
    font-family: Times;
    color: #3e3c31;
    position: relative;
}

.dash_title {
    position: absolute;
    display: block;
    bottom: 0px;
    right: 6px;
    font-size: 9pt;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.shop {
    float: left;
    border: 2px solid;
    margin: 10px 5px 5px 5px;
    width: 150px;
    height: 260px;
    padding: 5px;
    text-align: center;

    display: flex;

    flex-direction: column;
    justify-content: space-between;
}

.shop > div {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopitemdesc {
    flex-shrink: 99;
    overflow-x: hidden;
    overflow-y: hidden;
}

.shopbutton {
    margin: 0 auto;
    width: 90%;
}

div.shopkeeper {
    float: left;
    border: 0px;
    width: 512px;
    height: 480px;
    padding: 5px;
    text-align: center;
}

div.shopdesc {
    position: relative;
    z-index: 2;
    top: -100px;
    padding: 10px 20px 10px 20px;
    font-weight: bold;
    background: #fff7dc;
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
    border: 0px;
}

div.usershop {
    float: left;
    border: 2px solid;
    margin: 10px 10px 10px 10px;
    width: 150px;
    height: 250px;
    padding: 5px;
    text-align: center;
}

div.pride {
    display: inline-block;
    border: 2px solid;
    margin: 6px 6px 6px 6px;
    width: 235px;
    min-height: 225px;
    padding: 2px;
    padding-bottom: 5px;
    text-align: center;
}

div.pumaname {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 5px;
}

.pumabreed {
    font-style: italic;
    font-weight: normal;
    font-size: 9px;
}

.pridemenu {
    width: 200px;
}

.puma_thumb {
    padding-bottom: 2px;
}

div.customorb {
    float: left;
    border: 2px solid;
    margin: 5px 5px 5px 5px;
    width: 130px;
    padding: 5px;
    min-height: 80px;
    text-align: center;
}

div.games {
    float: left;
    border: 2px solid;
    margin: 10px 5px 5px 5px;
    width: 175px;
    min-height: 260px;
    padding: 5px;
    padding-bottom: 10px;
    text-align: center;
}

div.gamename {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.gamdesc {
    font-style: italic;
    font-weight: normal;
    text-align: left;
    font-size: 9px;
}

.shops_list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    gap: 5px;
}

div.shops {
    border: 1px solid;
    width: 255px;
    height: 100px;
    padding: 2px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    text-align: center;
    overflow-x: hidden;
}

div.shops_content {
    width: 100%;
}

div.shops_content div,
div.shops_content h3 {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shops_image,
.shops_image img {
    height: 75px;
    width: 75px;
}

.shops_image {
    padding: 5px 0;
    float: left;
}

a.forum_category {
    color: #4b4835;
    font-size: 12px;
}

.forum_desc {
    color: #4b4835;
    font-size: 9px;
    font-weight: normal;
}

.last_post {
    color: #4b4835;
    font-size: 10px;
    font-weight: normal;
}

#loading_indicator {
    width: 20px;
    height: 20px;
    background-image: url('/images/icons/loading_indicator_20x20.png');
    background-position: -100px 0;
}

/* USER PROFILE CSS STYLES */

.color-yellow {
    background: #f2bc00;
}
.color-red {
    background: #dd0000;
}
.color-blue {
    background: #148ea4;
}
.color-white {
    background: #dfdfdf;
}
.color-orange {
    background: #f66e00;
}
.color-green {
    background: #666d33;
}

/* Columns section */
#main .column {
    float: left;
    width: 50%;
    /* Min-height: */
    min-height: 400px;
    height: auto !important;
    height: 400px;
}

#main #column1 {
    width: 40%;
}

#main #column1 .widget {
    margin: 30px 30px 0 10px;
}
#main #column2 .widget {
    margin: 30px 30px 0 0;
}
#main .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#main .widget .widget-head {
    color: #fff7dc;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#main .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#main .widget .widget-head a {
    color: #d1db8c;
}
#main .widget .widget-content {
    text-align: center;
    background: #fff7dc;
    padding: 0 5px;
    color: #4b4835;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#main .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #eee;
    font-size: 12px;
}
#main .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#main .widget .widget-content ul li {
    padding: 3px 0;
}
#main .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#main .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#main .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}

.paradigm_box {
    display: inline-block;
    vertical-align: top;
    width: 22%;
    height: 130px;
    border: 2px solid;
    color: #4b4835;
    margin: 5px;
    padding: 5px;
    text-align: center;
}
.paradigm_name {
    display: inline-block;
    height: 25px;
    font-weight: bold;
}
.paradigm_title {
    display: inline-block;
    width: 98.5%;
    background-color: #cba753;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
}

.block_color_title {
    display: inline-block;
    width: 100%;
    background-color: #cba753;
}

.merch_store_box a:link {
    color: #4b4835 !important;
}

.merch_store_box a:visited {
    color: #4b4835 !important;
}

.merch_store_box a:hover {
    color: #926025;
}

select option {
    background-repeat: no-repeat;
    background-position: top left;
}

#resource_box {
    display: inline-block;
    float: left;
    width: 48%;
    border: 1px solid #000;
    margin: 5px;
}
#resource_title {
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
}

#resource_img {
    float: left;
    margin: 2px;
    margin-right: 5px;
    width: 60px;
    height: 60px;
    overflow: hidden;
}

#resource_img img {
    border: 0px;
    width: 100%;
    height: 100%;
}

#resource_body {
    padding: 5px;

    font-size: 14px;
}

#spacer {
    display: inline-block;
    width: 100%;
    height: 30px;
}

#birthdayprivacy,
#stayloggedin,
#changepin,
#sitelayoutstyle,
#changeforumsig,
#alwaysshowads,
#changeuserstatus {
    width: 350px;
    padding: 10px;
    border: 1px solid;
    min-height: 285px;
}

#stayloggedin {
    height: 285px;
    max-height: 285px;
    overflow-y: auto;
}

#changepassword,
#changeemail {
    width: 350px;
    padding: 10px;
    border: 1px solid;
    min-height: 350px;
}

#eyrie_nest {
    display: block;
    width: 100%;
    height: 200px;
    border: 1px solid;
    margin: 2px;
    vertical-align: top;
    padding: 5px;
    background-image: url(/images/dragns/eyrie_background_01.png);
}

#eyrie_nest:nth-child(1) {
    background-image: url(/images/dragns/eyrie_background_01.png);
}
#eyrie_nest:nth-child(2) {
    background-image: url(/images/dragns/eyrie_background_02.png);
}
#eyrie_nest:nth-child(3) {
    background-image: url(/images/dragns/eyrie_background_03.png);
}
#eyrie_nest:nth-child(4) {
    background-image: url(/images/dragns/eyrie_background_04.png);
}
#eyrie_nest:nth-child(5) {
    background-image: url(/images/dragns/eyrie_background_05.png);
}

#dragn_name {
    background-color: #fff7dc;
    padding: 5px;
}

#dragn_status {
    background-image: url(/images/dragns/eyrie_fade_bg_pale_yellow.png);
}
.dragn_text {
    background-color: #fff7dc;
    width: 100%;
    border: 1px solid #4b4835;
}

.dragn_images img {
    filter: drop-shadow(0px 0px 5px rgba(255, 247, 220, 255.5));
    animation: magic 7s infinite;
}

@keyframes magic {
    50% {
        filter: drop-shadow(0px 0px 2px rgba(255, 247, 220, 255.5));
    }
}

#empty_eyrie_title {
    background-color: #fff7dc;
    width: 100%;
    line-height: 24px;
}

#empty_eyrie_text {
    background-image: url(/images/dragns/eyrie_fade_bg_pale_yellow.png);
    width: 100%;
}

.eyrie_interaction {
    display: inline-block !important;
    width: 33%;
}

#interaction_select {
    background-color: #cba753;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}

#puma_image canvas {
    background-image: url(/images/environments/environment_default.png);
    background-origin: padding-box;
    background-repeat: no-repeat;
}

#quickstock {
    width: 100%;
    height: 52px;

    border-left: 1px solid #4b4835;
    border-right: 1px solid #4b4835;
    border-bottom: 1px solid #4b4835;
    display: block;
}

#quickstock:nth-of-type(2) {
    border-top: 1px solid #4b4835;
}

#quickstock_pages form {
    border: none !important;
}

#quickstock input {
    max-width: 55px;
    position: relative;
    top: 16px;
    left: 5px;
}

.quickstock_item_info {
    width: 38%;
}

.quickstock_item_qty {
}

#quickstock div {
    text-align: left;
    vertical-align: middle;
    display: inline-block;
}

.quickstock_img {
    width: 50px;
    height: 50px;
    padding: 1px 5px 1px 2px;
}

.quickstock_inv {
    background-color: #f0dfb2;
    width: 13%;
    height: 100%;
}

.quickstock_inv b {
    position: relative;
    left: 20px;
}

.quickstock_shop {
    height: 100%;
    width: 13%;
}

.quickstock_shop b {
    position: relative;
    left: 35px;
}

.quickstock_cellar {
    background-color: #f0dfb2;
    height: 100%;
    width: 13%;
}

.quickstock_cellar b {
    position: relative;
    left: 13px;
}

.quickstock_shadowbox {
    height: 100%;
    width: 13%;
}

.quickstock_shadowbox b {
    position: relative;
    left: 15px;
}

.quickstock_lower {
    position: relative;
    top: 3px;
}

.table_reminder {
    background-color: #f0dfb2;
}
.table_reminder_dark {
    background-color: #e1c88a;
}

#quickstock_inv_select {
    border: solid 1px;
    width: 23%;
    text-align: center;
    display: inline-block;
    margin: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.page_effect_fireflies1 {
    width: 3px;
    height: 3px;
    position: fixed;
    background-color: #00ff00;
    box-shadow: 0px 0px 10px 2px green;
    border-radius: 20px;
    z-index: 20;
}

div.page_effect_fireflies {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
}

dd#markingsevos button,
button.mup,
button.mdown {
    margin-left: 2px;
}

div#loot {
    display: grid;
    grid-template-columns: repeat(4, 160px);
    grid-template-rows: auto;
    margin: 0 auto;
    width: 640px;
}

div#loot > div {
    border: 2px solid;
    padding: 5px;
    margin: 10px;
    text-align: center;
}

div#loot > div > div > img {
    width: 120px;
    height: 120px;
}

.redeemed {
    filter: grayscale(100%);
}

div#loot > div > div:first-child {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#craft_tool {
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
    top: -290px;
    gap: 1em;
    width: min-content;
    margin: 0 auto;
}

div#crafting_slots {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: center; /* adjusted */
}

.crafting_slot {
    width: 122px;
    overflow-x: hidden;
}

div#crafting_slots > div {
    border: 2px solid;
    padding: 5px;
    text-align: center;
}

#craft_recipe {
    display: flex;

    flex-direction: row;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

#craft_recipe .FancySelectorButton {
    width: 50%;
}

div#craft_options {
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: center;
    align-items: center;
}

.crafting_header {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.crafting_image,
.crafting_image > div {
    width: 120px;
    height: 120px;
    padding: 0;
    margin: 0 auto;
    border: 1px solid black;

    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */

    text-align: center;
    overflow: hidden;
}

.crafting_image::before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    content: '';
    z-index: -1;

    background-image: var(--craft-icon, initial);
    background-repeat: no-repeat;
    background-position: center;
}

.crafting_image.crafting_slot_tag::before {
    filter: grayscale(100%) brightness(0%) contrast(1000%) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white);
}

.crafting_image {
    position: relative;
    background-image: radial-gradient(circle at center 90px, #909090, #303030);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 10px;
    margin-bottom: 10px;
    isolation: isolate;
}

.crafting_image.crafting_slot_missing {
    background-image: radial-gradient(circle at center 90px, #900000, #300000);
    border-color: red;
}

.crafting_label {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.65);
    padding: 5px;
    height: 24px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div#reorder_evo {
    margin: 0 auto;
    width: 400px;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 5px;
}

div#reorder_evo > div:last-child {
    grid-column: 1 / -1;
    text-align: center;
}

div#scarab_designer {
    display: grid;
    grid-template-columns: 20px repeat(4, min-content);
    grid-gap: 5px;
    margin: 0 auto;
    width: 750px;
}

div#scarab_designer div:first-child {
    grid-column: auto / span 3;
}

div#scarab_designer div:last-child {
    grid-column: 1 / -1;
}

div#scarab_designer input[type='text'] {
    font-family: 'Courier New', Courier, monospace;
    width: 57px;
}

div#scarab_designer select[id^='paradigm_'],
div#scarab_designer div:nth-child(3) {
    width: 220px;
    margin-left: 100px;
}

div#scarab_designer_outcomes {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(auto-fill, 40px);
    grid-column-gap: 5px;
    grid-row-gap: 1px;
    text-align: center;
}

div#scarab_designer_outcomes > div,
div#scarab_designer_paradigms > div {
    height: 40px;
}

div#scarab_designer_outcomes div:nth-child(1n + 5) {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 40px;
}

div#scarab_designer_outcomes div:nth-child(1n + 5),
div#scarab_designer_paradigms div:nth-child(1n + 2) {
    text-overflow: ellipsis;
    overflow: hidden;
    color: #ffffff;
    text-shadow: 0 0 3px #000000, 0 0 5px #000000, 0 0 7px #000000;
    font-weight: bold;
}

div#scarab_designer_outcomes_wrapper {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-gap: 20px;
    width: 750px;
    margin: 0 auto;
    border: 1px solid;
}

div#scarab_designer_paradigms {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(auto-fill, 40px);
    grid-column-gap: 5px;
    grid-row-gap: 1px;
    text-align: center;
}

div#scarab_designer_paradigms div:first-child {
    grid-column: 1 / -1;
    height: 40px;
}

div#scarab_designer_buttons {
    margin: 15px auto 25px auto;
}

div#scarab_designer_bottom_button {
    width: 125px;
    margin: 5px auto 5px auto;
}

div#scarab_designer_puma {
    width: 700px;
    height: 550px;
    background-color: grey;
    margin: 15px auto 25px auto;
}

div.campaign_goal_bar {
    height: 100%;

    padding-left: 10px;
    padding-right: 10px;

    overflow: hidden;
}

div.campaign_goal_bar_segment_prev {
    margin: 0 auto 0;
    width: 5px;
    height: 1%;
}

div.campaign_goal_bar_segment_next {
    margin: 0 auto 0;
    width: 5px;
    height: 99%;
}

div.campaign_goal_circle {
    position: relative;
    top: -100%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;

    width: 20px;
    height: 20px;
    border-radius: 50%;
}

div.campaign_goal_desc {
    margin-bottom: 50px;
}

div#campaign_goals {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 75px auto;
}

div.campaign_goal_rewards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin: 0 auto;
    padding: 5px;
}

div.campaign_goal_rewards > div {
    padding: 5px;
    margin: 10px;

    width: 140px;
    border: 2px solid;

    text-align: center;
}

div.campaign_goal_rewards > div > div > img {
    width: 120px;
    height: 120px;
}

div.campaign_goal_rewards > div > div:first-child {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#campaign_goals h3 {
    margin-top: 0;
}

div.campaign_summaries {
    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 50px;
}

div.campaign_summary {
    display: grid;
    grid-template-columns: 150px auto;
    grid-template-rows: auto auto auto auto;
    grid-column-gap: 5px;
}

img.campaign_summary_thumb {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

div.campaign_summary > div:first-child {
    grid-row: 1/-1;
}

div.campaign_summary > div {
    text-align: center;
}

div.campaign_summary_progress {
    width: 90%;
    height: 20px;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}
div.campaign_summary_progress > div:first-child {
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    line-height: 20px;
    text-align: center;
}
div.campaign_summary_progress > div:last-child {
    height: 20px;
    z-index: 2;
    line-height: 20px;
    text-align: center;
    position: relative;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    text-shadow: 0 0 2px black, 0 0 3px black;
}

.pagination {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: bolder;
}

.openable_msg_quote {
    font-style: italic;
    background-color: white;
    border-radius: 25px;
    border: 1px solid black;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 25px;
    margin: 10px 50px;
}

.openable_msg_quote > div:first-child,
.openable_msg_quote > div:last-child {
    font-size: 22px;
    font-weight: bolder;
}

#envirocollectortext {
    box-shadow: 0 0 10px 10px white;
    background-color: white;
    max-height: 475px;
    overflow-y: auto;

    z-index: 2;
    position: relative;
    width: 230px;
    min-height: 300px;
    top: 50px;
    left: 23px;
    text-align: center;
    font-size: 13px;
}

.password {
    text-security: disc; /* IE/Safari */
    -moz-text-security: disc; /* FireFox */
    -webkit-text-security: disc; /* Chrome/Safari  */
}

.p3_env {
    background: repeating-linear-gradient(45deg, #e27c06, #e27c06 10px, #333333 10px, #333333 20px);

    color: white;
    text-shadow: 0 0 6px #000000, 0 0 6px #000000, 0 0 6px #000000;
    font-weight: bolder;
    font-size: 22px;
    text-align: center;
    padding: 10px;
    border: 1px solid white;
}

.p3_env_bg_dev,
.p3_env_bg_test {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
}

.p3_env_bg_dev {
    background: repeating-linear-gradient(45deg, #e2060633, #e2060633 10px, #33333333 10px, #33333333 20px);
}

.p3_env_bg_test {
    background: repeating-linear-gradient(45deg, #e27b0633, #e27c0633 10px, #33333333 10px, #33333333 20px);
}

.inline {
    display: inline;
}

.inlineBlock {
    display: inline-block;
}

.marginTopSmall {
    margin-top: 0.5em;
}

.marginTopMedium {
    margin-top: 2.5em;
}

.marginTopLarge {
    margin-top: 5em;
}

.marginBottomSmall {
    margin-bottom: 0.5em;
}

.marginBottomMedium {
    margin-bottom: 2.5em;
}

.marginBottomLarge {
    margin-bottom: 5em;
}

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

.toolPumaList {
    width: 95%;
    margin: 0 auto;
}

.toolPumaList th {
    text-align: center;
}

.toolPumaList tr > td:first-child {
    width: 20px;
}

.centerFlex {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.spaceAroundFlex {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-around;
}

.spaceAroundTopFlex {
    display: flex;
    align-items: flex-start;
    align-content: center;
    justify-content: space-around;
}

.smallGap {
    gap: 0.5em;
}

.mediumGap {
    gap: 1em;
}

.largeGap {
    gap: 2em;
}

.stretchEvenFlex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
}

.stretchEvenFlex > * {
    flex: 1;
}

.verticalCenterFlex {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.profile_evo_marking tr,
.profile_evo_marking td {
    border-top-style: hidden;
}

.gapSmall {
    gap: 0.5em;
}

.gapMedium {
    gap: 2.5em;
}

.gapLarge {
    gap: 5em;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0); /* fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: saturate(180%) blur(5px);
}

.modalContent {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min-content;
    background-color: #fff7dc;
    margin: 0;
    padding: 1rem;
    border: 0.125rem #cba753 solid;
    border-radius: 1rem;

    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.modalX {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
}

.FancySelectorContainer::after {
    content: 'Double click an icon to apply immediately';
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 0.5rem;
    font-style: italic;
    font-size: 0.75em;
}

@media (hover: none) {
    .FancySelectorContainer::after {
        content: 'Double tap an icon to apply immediately';
    }
}

.FancySelectorContent {
    min-width: 53.125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.FancySelectorSelectedImage {
    margin: 0 auto;
    border: 0.0625rem solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.FancySelectorTags {
    display: block;
    margin-top: 0.5em;
    width: 100%;
}

.FancySelectorEntryListAndTags {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.FancySelectorSelection {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: space-around;
    flex-grow: 1;
}

.FancySelectorSelectedName {
    font-weight: bold;
}

.FancySelectorSelectionTop,
.FancySelectorSelectionBottom {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    gap: 0.5rem;

    text-align: center;
}

.FancySelectorSelectionTop {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 65%;
}

.FancySelectorSelectionBottom {
    align-content: flex-end;
    justify-content: flex-end;
    height: 35%;
}

.FancySelectorSelectionBottom a {
    display: block;
    font-size: 0.75em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.FancySelectorSelectionBottom button {
    width: 100%;
}

.FancySelectorRightContent {
    height: calc(25rem + 1.25rem);
    width: 7.5rem;
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: center;
    align-content: space-around;
}

.FancySelectorRightContent > * {
    border-radius: 0.625rem;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.9375rem 0.3125rem;
}

.FancySelectorEntryListContainer {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-content: stretch;
}

.FancySelectorEntrySearch {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;

    border-radius: 0.625rem;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.3125rem 0.9375rem;
}

.FancySelectorEntrySearchText {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.FancySelectorPages {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.FancySelectorPages input[type='text'] {
    width: 2rem;
    text-align: center;
}

.FancySelectorPages button,
.FancySelectorPages input[type='button'] {
    display: inline-block;
    width: 5rem;
}

.FancySelectorList,
.FancySelectorList > div {
    width: 43.75rem;
    height: 25rem;
}

.FancySelectorList {
    overflow: hidden;
    padding: 0.625rem;
    border-radius: 0.625rem;
    background-color: rgba(0, 0, 0, 0.1);
}

.FancySelectorList > div {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: left;
    align-items: flex-start;
    align-content: flex-start;
    overflow-y: auto;
}

.FancySelectorList > div > div {
    width: calc(9.375rem + 0.3125rem);
    height: calc(7.1875rem + 0.3125rem);
    position: relative;
    border: 0.0625rem solid black;
}

.FancySelectorList > div > div > .FancySelectorFavIcon {
    position: absolute;
    box-sizing: content-box;
    bottom: 0;
    left: 0;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
    cursor: pointer;
}

.FancySelectorList > div > div > .FancySelectorFavIcon::before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    mask: url('/images/icons/star_filled.svg') center / contain no-repeat content-box;
    background: #a0a0a0;
    pointer-events: none;
}

.FancySelectorList > div > div > .FancySelectorFavIcon:hover {
    filter: drop-shadow(0 0 2px #ffa600) drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}

.FancySelectorList > div > div > .FancySelectorFavIconEnabled::before {
    background: #ffa600;
}

.FancySelectorList > div > div > :where(a, span) {
    box-sizing: border-box;
    padding: 0.3125rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
}

.FancySelectorList > div > div > .FancySelectorListDisabled img {
    filter: grayscale(100%) brightness(75%) contrast(75%);
}

.FancySelectorList > div > div > a {
    cursor: pointer;
}

.FancySelectorInfoLine {
    position: absolute;
    text-align: right;
    bottom: 0.25em;
    right: 0.25em;
    padding: 0;
    margin: 0;
    font-style: italic;
    font-size: 0.75em;
    font-weight: bold;
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #fff;
}

.FancySelectorEntryTitleContainer {
    width: 100%;
    height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    text-align: center;
}

.FancySelectorEntryImageContainer {
    width: 6.25rem;
    height: 4.6875rem;
    overflow: hidden;
}

.FancySelectorEntryImageContainer img {
    border: 0;
    padding: 0;
    margin: 0;
    width: 6.25rem;
    height: 4.6875rem;
    object-fit: contain;
}

.FancySelector {
    display: none;
}

.FancySelectorButton {
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.FancySelectorButton > span {
    display: block;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.FancySelectorButtonThumbnail > span {
    margin-right: 3.5em;
}

.FancySelectorButtonThumbnail:after {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0;
    right: 0;

    content: '';
    width: 3em;
    height: 100%;
    background-image: var(--fs-button-thumbnail);
    background-position: center;
    background-size: cover;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.FancySelectorPreviewContainer {
    min-height: 1em;
}

.confirmPopupContent {
    margin: 0 auto;

    box-sizing: border-box;
    min-width: 20em;
    max-width: 75%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;

    font-size: 1.25em;
}

.confirmPopupTextLiteral {
    white-space: pre-wrap;
}

.confirmPopupYesButton,
.confirmPopupNoButton {
    user-select: none;
    font-size: inherit;
    caret-color: transparent;
}

:where(.confirmPopupYesButton, .confirmPopupNoButton):hover {
    transform: scale(1.5);
}

:where(.confirmPopupNoButton, .confirmPopupYesButton):where(:focus, :focus-visible)::before {
    pointer-events: none;
    position: absolute;
    box-sizing: border-box;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);

    content: '';
    border: 2px dotted black;
    border-radius: inherit;
}

:is(.confirmPopupNoButton, .confirmPopupYesButton):is(:focus, :focus-visible) {
    position: relative;
    outline: none;
}

.confirmPopupYesButton:where(:focus, :focus-visible) {
    box-shadow: 0 0 2px 1px #007f00;
}

.confirmPopupNoButton:where(:focus, :focus-visible) {
    box-shadow: 0 0 2px 1px #7f0000;
}

.confirmPopupYesButton:where(:focus, :focus-visible)::before {
    border-color: #003f00;
}

.confirmPopupNoButton:where(:focus, :focus-visible)::before {
    border-color: #3f0000;
}

.confirmPopupButtons {
    display: flex;
    width: 100%;
    justify-content: space-around;
    gap: 1em;
}

.confirmPopupYesHighlight,
.confirmPopupNoHighlight {
    font-weight: bold;
    text-shadow: 1px 0 black;
}

.confirmPopupYesHighlight {
    color: #00cf00;
}

.confirmPopupNoHighlight {
    color: #cf0000;
}

.confirmPopupButtons button {
    min-width: 5em;
}

.shopQuantityPopupContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    text-align: center;
    padding: 1.5em 1.5em 0 1.5em;
}

.shopQuantityPopupContent button {
    caret-color: transparent;
}

.shopQuantityPopupItemImage {
    width: 120px;
    height: 120px;
    border: 1px solid black;
}

.shopQuantityPopupItemText {
    font-weight: bold;
    overflow: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shopQuantityPopupXButton {
    position: absolute;
    top: 0.5em;
    right: 1em;
    width: min-content;
    height: min-content;
}

.shopQuantityPopupQuantityInputContainer::before {
    display: block;
    font-weight: bold;
    content: 'Quantity:';
}

.shopQuantityPopupQuantityInputContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
}

.shopQuantityPopupQuantityInput {
    min-width: 5em;
}

.shopQuantityPopupCostContainer::before {
    display: block;
    font-weight: bold;
    content: 'Cost: ';
}

.shopQuantityPopupCostContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
}

.breedFavorQuantityInput {
    width: 3em;
}

.shopQuantityPopupCurrencyText {
    font-style: italic;
}

.markEvoDemoToolList {
    width: 75%;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.45);
    margin-top: 5em;
}

.markEvoDemoToolList > div:first-child {
    border-top: none;
}

.markEvoDemoToolList > div {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.45);

    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 1em;
    padding-top: 1em;
}

.markEvoDemoToolHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.markEvoDemoToolHeader a {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    padding: 1em;
    align-items: center;
    margin-right: 3em;
}

.markEvoDemoToolHeader img {
    margin-top: 1em;
    width: 100px;
}

.markEvoDemoToolHeader span {
    width: 100px;
    text-align: center;
}

.markEvoDemoMarkEvoList img {
    border-radius: 1em 1em 0 0;
    width: 100px;
}

.markEvoDemoMarkEvoList span {
    width: 94px;
    padding: 3px 3px 3px 2px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    border-radius: 0 0 1em 1em;
}

.markEvoDemoMarkEvoList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-grow: 2;
    border-left: 2px dotted rgba(0, 0, 0, 0.45);
    align-items: center;
}

.markEvoDemoMarkEvoList > div {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    padding-bottom: 0.25em;
    margin: 0.5em;
    align-items: center;
    width: 100px;

    background: rgba(0, 0, 0, 0.15);
    border-radius: 1em;
}

[inert] {
    pointer-events: none;
    cursor: default;
}

[inert],
[inert] * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.shopUserCurrencySummary {
    top: 0;
    margin: 10px 0;
    position: sticky;
    background: inherit;
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    z-index: 3;
    max-height: 150px;
    overflow-y: auto;
    font: inherit;
}

.shopUserCurrencySummaryList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.shopUserCurrencySummaryList > div,
.shopUserCurrencySummaryHeader {
    font: inherit;
    text-align: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15);
    padding: 10px;
}

.shopUserCurrencySummaryHeader {
    width: 97%;
    white-space: nowrap;
    margin: 0 auto;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.progenitor_desc {
    width: 75%;
    margin: 0 auto;
}

.progenitor_desc em {
    font-weight: bolder;
}

.progenitor_desc details {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 1em;
    padding: 0.5em 0.5em 0;
}

.progenitor_desc summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

.progenitor_desc details[open] {
    padding: 0.5em;
}

.progenitor_desc details[open] summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5em;
}

a.LootAvailableText:link,
a.LootAvailableText:visited {
    font-size: 1.5em;
    font-weight: bolder;
}

a.LootAvailableText:link:not(:hover),
a.LootAvailableText:visited:not(:hover) {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

.rainbowText {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
    text-shadow: none;
}

@keyframes rainbow_animation {
    0%,
    100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

.raffleList {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 1em;
    padding: 1em;
    justify-content: center;
}

.raffleListItem {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    width: 14em;
    height: 20em;
    font-size: 1.5em;
    gap: 0.5em;
    text-align: center;
    overflow: hidden;
}

.raffleListItem h3 {
    margin-top: 0;
    padding-top: 0;
}

.grayscale {
    filter: grayscale(100%);
}

.raffleListItem img {
    width: 100%;
}

.raffleBox {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    padding: 1em;
}

.raffleTitle {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 0.5em;
    width: max(50%, min-content);
    margin: 0 auto;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
    align-items: stretch;
}

.raffleTitle > div:first-child {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}

.raffleTitle > div:last-child {
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.raffleTitle > div {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.5em;
}

.raffleTitleText {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.raffleTitleImage {
    width: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.raffleDesc {
    padding-top: 2em;
    padding-bottom: 2em;
}

.rafflePrizes {
    margin-bottom: 1em;
}

.rafflePrizes h2 {
    text-align: center;
}

.rafflePrizesList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.rafflePrizesList > div {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 2px #000;
    border-radius: 0.5em;
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
    width: 25%;
    height: calc(14em + 150px);
}

.rafflePrize {
    font-size: 1.25em;
}

.rafflePrizesList img,
.raffleWinnerPrizeImage img {
    box-sizing: border-box;
    width: 100%;
    object-fit: scale-down;
}

.rafflePrizesList > div > div:last-child {
    margin-top: auto;
    font-style: italic;
}

.raffleWinners {
    margin-bottom: 1em;
}

.raffleWinnersPrizes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1em;
}

.raffleWinnersList {
    width: 45%;
    display: flex;
    gap: 1em;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    box-shadow: 2px 2px 2px #000;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

.raffleWinnersPrizeTitle {
    text-align: center;
    width: 50%;
}

.raffleWinnersUsers {
    max-height: 15em;
    overflow-y: auto;
    width: 50%;
}

.raffleTicketPurchase {
    width: min-content;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.raffleTicketCost {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 1em;
    width: min-content;
    gap: 0.75em;
}
.raffleTicketPurchase h2,
.raffleTicketPurchase h3 {
    margin: 0;
    padding: 0;
}

.raffleTicketCostImage img {
    box-sizing: border-box;
    width: 120px;
    object-fit: scale-down;
}

.raffleTicketsPurchasedCount {
    margin-top: auto;
    font-size: 1.25em;
}

.rpgQuickGuide {
    margin-top: 3em;
}

.rpgQuickGuide li {
    line-height: 1.3em;
    letter-spacing: 0.005em;
}

.rpgQuickGuide ul {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.rpgWeeklyReward {
    display: flex;
    border-radius: 1em;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.1);
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.1em;
    width: fit-content;
    margin: 0.25em auto 1em auto;
    gap: 3em;
}

.rpgWkeelyRewardInnerBox {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    padding: 0.5em;
    box-shadow: 2px 2px 2px #000;
}

.rpgWeeklyRewardPrizeName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 12em;
}

.rpgWeeklyRewardClass {
    font-weight: bold;
    font-size: 1.1em;
}

.rpgWeeklyRewardElement {
    width: 1em;
    object-fit: contain;
}

.rpgWeeklyRewardContent {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1em;
}

.rpgWeeklyRewardPrize {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

.rpgWeeklyRewardPrizeImage img {
    width: 60px;
    object-fit: contain;
}

.rpgWeeklyRewardPrizeImage {
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    overflow: hidden;
    border-radius: 5px;
}

.rpgWeeklyRewardTitle {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 0.25em;
}

.rpgWeeklyRewardPrize .quantity {
    position: absolute;
    text-align: right;
    bottom: 0.25em;
    right: 0.25em;
    padding: 0;
    margin: 0;
    font-style: italic;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #fff;
}

.roundedBox {
    border-radius: 1em;
    padding: 1em;
    display: block;
    background-color: rgba(0, 0, 0, 0.1);
}

.fitContent {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
}

.boxShadow {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.roundedBoxHeader,
.roundedBoxFooter,
.roundedBoxTitle {
    width: 100%;
    padding: 0.5em 1em 0.5em 1em;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: -1em;
    margin-right: -1em;
}

.roundedBoxHeader,
.roundedBoxTitle {
    border-radius: 1em 1em 0 0;
    margin-top: -1em;
    margin-bottom: 1em;
}

.roundedBoxFooter {
    border-radius: 0 0 1em 1em;
    margin-top: 1em;
    margin-bottom: -1em;
}

.textTruncate,
.roundedBoxTitle {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.roundedBoxTitle {
    font-weight: bold;
    text-align: center;
}

.roundedBoxTitle > * {
    font-size: 1.25em;
}

.pumaProfilePumaName {
    font-size: 1.5em;
}

.pumaProfileImage {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: min-content;
    height: min-content;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.pumaProfileImage :is(canvas, img) {
    margin: 0 auto;
    width: 700px;
    height: 550px;
}

.pumaLikeButton {
    background-image: url('/images/like_heart_grey.png');
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    border-radius: 0.25em;
    overflow: hidden;
    background-size: 100%;
    width: 2em;
    height: 2em;
    overflow: hidden;
    cursor: pointer;
}

.pumaLikeButton.pumaIsLiked {
    background-image: url('/images/like_heart_red.png');
}

.tabGroup {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-start;
    gap: 0.25em;
}

.tabGroup > a {
    border: 0;
    margin: 0;
    overflow: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding: 0.5em 1em 0.5em 1em;
    border-radius: 1em 1em 0 0;
    cursor: pointer;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    text-decoration: underline;
}

.tabContent {
    display: none;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0 1em 1em 1em;
    padding: 1em;
}

.tabGroup > a.tabActive {
    background-color: rgba(0, 0, 0, 0.1);
    text-decoration: none;
    pointer-events: none;
}

.leftRightPair > * {
    display: inline-block;
    width: 66%;
    text-align: left;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.leftRightPair > *:first-child {
    text-align: right;
    width: 34%;
    padding-right: 0.5em;
    font-weight: bold;
}

.grid3Col {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-around;
    row-gap: 0.5em;
}

#puma_info .grid3Col .leftRightPair:nth-last-child(-n + 3) {
    border-bottom: none;
}

#puma_info .grid3Col .leftRightPair {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.pumaProfileClowdersAndTagsContainer {
    min-width: 33%;
}

#pumaProfileClowders,
#pumaProfileTags {
    position: relative;
}

.pumaProfileClowderRemoveButton,
.pumaProfileTagRemoveButton {
    width: 1em;
    height: 1em;
    border: 0;
    display: inline-block;
    background-color: none;
    background-image: url('/images/icons/remove.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.pumaProfileGeneticsBox {
    border-radius: 1em;
    display: block;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    overflow-x: hidden;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.pumaProfileGeneticsTitle {
    border-radius: 1em 1em 0 0;
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: bold;
    padding: 1em;
    text-align: center;
}

.pumaProfileGeneticsBox > :not(.pumaProfileGeneticsTitle):not(.pumaProfileGeneticsEntries) {
    text-align: center;
    font-style: italic;
    padding: 1em;
}

.pumaProfileGeneticsEntries > * {
    display: flex;
}

.pumaProfileGeneticsRow:not(:last-child) {
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

.pumaProfileGeneticsRow {
    display: grid;
    grid-template-columns: 5fr 1fr;
    column-gap: 0.5em;
}

.pumaProfileGeneticsRow > * {
    box-sizing: border-box;
}

.pumaProfileGeneticsRow > :nth-child(odd) {
    display: grid;
    grid-template-columns: 3fr 3fr 6fr;
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    align-items: center;
}

.pumaProfileGeneticsRow > :nth-child(odd) > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25em;
}

.pumaProfileGeneticsRow > :nth-child(odd) > :nth-child(2) {
    align-items: center;
    text-align: center;
    font-style: italic;
}

.pumaProfileGeneticsRow > :nth-child(even) {
    display: flex;
    min-width: 80px;
    min-height: 3em;
}

.pumaProfileGeneticsRow > :nth-child(even) > * {
    min-height: 3em;
    flex-grow: 1;
}

.pumaProfileGeneticsRow > :not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.evenFlexSplit > * {
    flex: 1 1 0;
}

.pumaProfileItems {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pumaProfileDetailedItems {
    display: flex;
    flex-direction: column;
    gap: 1em;
    box-sizing: border-box;
    width: 100%;
}

.pumaProfileItems > * {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

    width: 120px;
    height: min-content;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
}

.pumaProfileItems > * > :where(:first-child, .pumaProfileItemFooter) {
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 5px 5px 5px;
}

.pumaProfileItems img {
    object-fit: contain;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.pumaProfileDescEdit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 1em;
}

.pumaProfileDescEdit textarea {
    resize: none;
    min-height: 10em;
}

.pumaProfileDesc {
    margin: 0 auto;
    box-sizing: border-box;
    width: fit-content;
    min-width: 25%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
}

.pumaProfileDescEdit :last-child {
    text-align: center;
}

.pumaProfileSharing textarea {
    resize: none;
    width: 100%;
    height: min-content;
}

.pumaProfileParents {
    display: flex;
    justify-content: space-around;
    gap: 1em;
}

.pumaProfileParents > * {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
}

.pumaProfileParents img {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.pumaProfileChildren {
    display: grid;
    grid-template-columns: repeat(3, 1.75em) auto;
    row-gap: 0.25em;
    max-height: 50em;
    overflow-y: auto;
}

.pumaProfileChildren img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.pumaProfileChildren > * {
    box-sizing: border-box;
    padding: 0.25em 0.125em 0.25em 0.125em;
    margin: 0;
}

.pumaProfileChildren > *:nth-child(4n) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    padding-left: 1em;
}

.pumaProfileChildren > :not(:nth-last-child(-n + 4)) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.pumaProfileChildren img.iconInactive {
    filter: grayscale(100%) contrast(25%) brightness(50%);
    opacity: 0.3;
}

.pumaProfilePreviousOwners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1em;
}

.pumaProfilePreviousOwners > * {
    box-sizing: border-box;
    padding: 0.25em 0.125em 0.25em 0.125em;
    margin: 0;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pumaProfilePreviousOwners > :nth-child(odd) {
    text-align: right;
}

.pumaProfilePreviousOwners > :not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.pinch {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.flexGrow {
    flex-grow: 1;
}

.woodSign {
    min-height: calc(3em * 3);

    position: relative;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 2em 2em 2em 2em;

    z-index: 3;
    isolation: isolate;

    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), 0px -1px 0px rgba(0, 0, 0, 0.7);

    filter: drop-shadow(2px 2px 2px black);
}

.woodSign::before,
.woodSign::after,
.woodPlank::before,
.woodPlank::after {
    pointer-events: none;
    position: absolute;
    box-sizing: border-box;
    inset: 0;
    content: '';
}

.woodSign::before {
    z-index: -2;

    background: linear-gradient(180deg, transparent, transparent 5%, #a76942 5%, #955531 15%, #955531 85%, #63290d 95%, transparent 95%) 0 0 / 100% 3em space,
        linear-gradient(90deg, #361707, #361707 100%) 3em 0 / 3em 100% no-repeat,
        linear-gradient(90deg, #361707, #361707 100%) right 3em top 0 / 3em 100% no-repeat;
}

.woodSign::after {
    -webkit-mask: linear-gradient(180deg, transparent, transparent 5%, black 5%, black 15%, black 85%, black 95%, transparent 95%) 0 25% / 100% 3em space;
    mask: linear-gradient(180deg, transparent, transparent 5%, black 5%, black 15%, black 85%, black 95%, transparent 95%) 0 25% / 100% 3em space;
}

.woodPlank {
    position: relative;
    box-sizing: border-box;

    min-height: 3em;

    width: 100%;
    height: 100%;

    padding: 2em 4em 2em 4em;

    z-index: 3;
    isolation: isolate;

    box-shadow: 2px 2px 2px black;
    font-weight: bold;
    text-align: center;

    background: linear-gradient(180deg, #bf784d, transparent 1em, transparent calc(100% - 1em), #7d3410 100%) 0 0 / 100% 100% no-repeat,
        linear-gradient(90deg, #bf784d, transparent 1em, transparent calc(100% - 1em), #7d3410 100%) 0 0 / 100% 100% no-repeat #ad6439;
}

.woodPlank > *:where(h1, h2, h3, h4, h5) {
    padding: 0;
    margin: 0;
}

.woodPlank::before {
    z-index: 5;

    background: radial-gradient(circle 0.5em at 1.25em center, #c7c8d9, #9c9eb6 80%, #5a5369 80%, #5a5369 99%, transparent 100%),
        radial-gradient(circle 0.5em at calc(100% - 1.25em) center, #c7c8d9, #9c9eb6 80%, #5a5369 80%, #5a5369 99%, transparent 100%);
}

.woodSign::after,
.woodPlank::after {
    z-index: -1;
    background: url('/styles/img/woodgrain.png');
    mix-blend-mode: overlay;
    /*
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 100%) 0 0 / 100% 0.75em space;
    filter: url('/styles/svg/waveFilter.svg#waveFilter');
    */
}

.woodSign::after {
    opacity: 0.5;
}

.woodPlank::after {
    opacity: 0.3;
}

.parchment::before {
    position: absolute;
    box-sizing: border-box;
    inset: 0;
    pointer-events: none;

    padding: 1em;

    background: url('/styles/img/noise.png') 0 0 / 75px 75px repeat, linear-gradient(180deg, #8c6136, transparent 4em),
        linear-gradient(90deg, #8c6136, transparent 4em), linear-gradient(270deg, #8c6136, transparent 4em),
        linear-gradient(0, #8c6136, transparent 4em) #f2d59d;

    background-clip: content-box;
    /* filter: url('/styles/svg/waveFilter.svg#waveFilter') url('/styles/svg/noiseFilter.svg#noiseFilter') drop-shadow(2px 2px 2px black); */
    filter: url('/styles/svg/waveFilter.svg#waveFilter') drop-shadow(2px 2px 2px black);
    z-index: -1;
    content: '';
}

.parchment {
    position: relative;
    padding: 4em;

    color: black;
    z-index: 1;
    isolation: isolate;
    font-size: 14px;
}

.parchmentFancyFirstLetter::first-letter {
    color: red;
    font-weight: bold;
    font-size: 3em;
}

.photo {
    background: #ffffc0;
    padding: 16px;
    box-sizing: border-box;

    color: black;
    font-family: 'Poor Story', 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

img.photo,
.photo img {
    filter: sepia(75%);
}

.photo:not(img) {
    width: min-content;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    overflow: none;
    text-overflow: none;
    white-space: wrap;
    font-size: 1.25rem;
    text-align: center;
    text-shadow: none;
    font-weight: normal;
}

a.photo:is(:visited, :hover, :active, :link),
.photo a:where(:visited, :hover, :active, :link) {
    color: black;
    text-decoration: none;
    text-shadow: none;
    font-weight: normal;
}

.photoOffset1 {
    transform: scale(0.8, 0.8) rotate(6deg);
}

.photoOffset2 {
    transform: scale(0.8, 0.8) rotate(-6deg);
}

.photoOffset3 {
    transform: scale(0.9, 0.9) rotate(-3deg);
}

.photoOffset4 {
    transform: scale(0.85, 0.85) rotate(-4deg);
}

.photoOffset5 {
    transform: scale(0.9, 0.9) rotate(-2deg);
}

.photoOffset6 {
    transform: scale(0.85, 0.85) rotate(4deg);
}

.photo:hover {
    background: white;
    transform: scale(1, 1) rotate(0deg);
    filter: none;
    transition: 0.35s all;
}

.photo:hover img,
img.photo:hover {
    filter: none;
    transition: 0.35s all;
}

.venturePostingsList {
    display: flex;
    column-gap: 3em;
    row-gap: 7em;

    flex-wrap: wrap;
    margin: 0 auto;
}

.venturePostingsList > * {
    box-sizing: border-box;
    min-width: min-content;
    max-width: calc(50% - 1.5em);
}

.venturePostingInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.venturePostingInfoThumbnail {
    float: right;
}

.venturePostingInfoThumbnail {
    padding: 10px;
}
.venturePostingInfoThumbnail img,
.ventureContractsListVenture img {
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    background: rgba(0, 0, 0, 0.2);
}

.venturePostingInfoExtra {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    margin-left: 90px;
}

.venturePostingInfoPuma {
    position: absolute;
    top: 0;
    left: -140px;
    z-index: 10;
}

.venturePostingInfoPuma img,
.ventureContractsListPuma img {
    box-sizing: border-box;
    width: 150px;
    height: 118px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}

.venturePostingInfoSkillList {
    text-align: center;
    width: 100%;
    min-height: 3em;
}
.venturePostingInfoSkillXP {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    text-align: left;
    gap: 0.5em;
    margin-top: 0.5em;
}

.venturePostingInfoSkillXP > *:nth-child(odd) {
    text-align: right;
}

.venturePostingInfoSkillXP > *:nth-child(even) {
    font-style: italic;
}

.venturePostingInfoSkillList h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 0 0.5em 0 0;
}

.venturePostingInfoSkillList h3:not(:first-of-type) {
    margin-top: 1em;
}

.venturePostingInfoReward img {
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    background: rgba(0, 0, 0, 0.2);
}

.venturePostingHelpPuma {
    display: flex;
    gap: 1em;
    margin-top: 2em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.venturePostingHelpPuma :where(h1, h2, h3, h4, h5) {
    margin: 0;
    padding: 0;
    font-weight: bolder;
    letter-spacing: 0.05em;
    font-size: 2em;
}

.venturePostingHelpPuma label {
    font-size: 1.2em;
    letter-spacing: 0.015em;
}

.photo.ventureAnonPhoto img {
    filter: brightness(0%) contrast(20%) sepia(100%);
}

.ventureContractsListPosted,
.ventureContractsListHelping {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: center;
    text-align: center;
    row-gap: 2em;
}

:where(.ventureContractsListPosted, .ventureContractsListHelping) > :nth-child(-n + 4) {
    font-weight: bold;
    text-align: center;
}

:where(.ventureContractsListPosted, .ventureContractsListHelping) > * {
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1em;
    gap: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 0.5em solid rgba(0, 0, 0, 0.2);
}

:where(.ventureContractsListPosted, .ventureContractsListHelping) > :nth-child(4n + 1) {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 1em 0 0 1em;
}

:where(.ventureContractsListPosted, .ventureContractsListHelping) > :nth-child(4n + 4) {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0 1em 1em 0;
}

.ventureCreatePost {
    display: flex;
    gap: 2em;
    justify-content: center;
    align-items: start;
    text-align: center;
}

.ventureCreatePostPreview,
.ventureCreatePostPumaPreview {
    min-width: 25%;
}

:where(.ventureCreatePostPreview, .ventureCreatePostPumaPreview, .ventureCreatePostInfo) > .ventureContent {
    display: flex;
    flex-direction: column;
    gap: 2em;
    justify-content: start;
    align-items: center;
    text-align: center;
}

#ventureCreateFee,
#ventureCreatePostImage,
#ventureCreatePostPumaImage {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    justify-content: start;
    align-items: center;
    text-align: center;
}

:where(#ventureCreatePostImage, #ventureCreatePostPumaImage, #ventureCreateFee) > img {
    width: 120px;
    height: 120px;
    border: 1px solid black;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: collapse wrap;
    word-spacing: 120px;
    line-height: 1.5em;
    font-style: italic;
}

.ventureCreateSkillList {
    display: flex;
    text-align: left;
    flex-direction: column;
    gap: 0.5em;
}

.ventureCreateSkillList .progress:not(.notmet)::before {
    background-image: linear-gradient(0deg, #007f00, #00af00 100%);
}

.ventureCreateSkillList .progress.notmet::before {
    background-image: linear-gradient(0deg, #af0000, #ff0000 100%);
}

#ventureFeeLabel.notmet,
#ventureFeeLabel .notmet,
.ventureCreateSkillList.notmet,
.ventureCreateSkillList .notmet {
    color: #cf0000;
    font-weight: bold;
}

#ventureFeeLabel *:not(:first-child) {
    font-style: italic;
}

#ventureFeeLabel {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
    gap: 0.5em;
}

.pumaProfileVentureSkills {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    gap: 0.5em;
}

.pumaProfileVentureSkills .progress {
    grid-column: 1 / -1;
    margin-bottom: 1em;
    height: 2em;
}

.pumaProfileVentureSkills :where(.skillName, .skillXP) {
    font-weight: bold;
}

.pumaProfileVentureSkills .skillDesc {
    font-style: italic;
    text-align: center;
}

.pumaProfileVentureSkills .skillXP {
    text-align: right;
}

.pumaProfileVentureSkills > :nth-child(-n + 3) {
    font-size: 1.5em;
    font-style: normal;
    margin-bottom: 0.5em;
    font-weight: bolder;
}

.textIcon {
    display: inline-block;
    box-sizing: border-box;
    width: 1.75em;
    height: 1.75em;
    padding: 1px;
    object-fit: contain;
    background-clip: padding-box;
    border: 1px outset rgba(0, 0, 0, 0.6);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.5em;
    overflow: hidden;
    vertical-align: middle;
}

.rpgChangeClass {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 2em;
}
.rpgChangeClassPuma :where(h1, h2, h3, h4, h5) {
    margin: 0;
    padding: 0;
}

.rpgChangeClassPuma {
    width: min-content;
    display: flex;
    gap: 1em;
    margin: 1em auto 1em auto;
    flex-direction: column;
    text-align: center;
}
.rpgChangeClassPuma img {
    display: flex;
    padding: 0;
    width: 231px;
    height: 182px;
    text-align: center;
    word-spacing: 231px;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    border: none;
}

.rpgChangeClass label {
    font-weight: bold;
}

.pumaProfileVentureSkills .progress.pumaTotalVentureLevel::before {
    background-image: linear-gradient(0deg, #007f00, #00af00 100%);
}

#optionsSessionList {
    width: 100%;
}

#optionsSessionList tr > *:first-child {
    text-align: center;
}

#optionsSessionList tr > *:last-child {
    text-align: right;
}

.genericThumbnail,
.paradigmThumbnail {
    position: relative;
    display: inline-block;

    object-fit: contain;
    border: 1px solid black;
    overflow: hidden;
}

.paradigmThumbnail {
    width: 100px;
    height: 79px;
}

.genericThumbnail {
    width: 120px;
    height: 120px;
}

img:is(.genericThumbnail, .paradigmThumbnail):is([src=''], :not([src])) {
    content: linear-gradient(to top, transparent 0%, transparent 100%);
}

.pmpSelectionBox {
    box-sizing: content-box;
    min-width: 200px;
    min-height: 200px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.pmpSliderChoice {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1em;
}
.pmpSliderChoice > * {
    width: 100%;
}
.pmpSliderChoice input[type='range'] {
    width: 75%;
}

.pmpChoices {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 25px;
    gap: 15px;
}

.cookie-consent-banner {
    background: rgba(230, 208, 153, 0.95);
}

#indexAnonLanding {
    box-sizing: border-box;
    padding: 10px;

    display: grid;

    grid-template-columns: 1fr min-content;
    /* grid-template-rows: ; */

    grid-template-areas:
        'video login'
        'sitedesc sitedesc'
        'showcase showcase';

    gap: 15px;

    justify-content: space-between;
}

#indexAnonLogin,
#indexAnonVideo,
#indexAnonShowcase,
#indexAnonSiteDesc {
    border-radius: 15px;
    padding: 10px;

    font-family: Verdana, Arial, sans-serif;
    font-size: 8.5pt;

    background-color: rgba(47, 47, 47, 0.95);
    color: #c7c7c7;
    border: 1px #191919 solid;
    border-radius: 15px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

#indexAnonLogin {
    grid-area: login;

    width: 321px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

#indexAnonLogin form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}

#indexAnonLogin form label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

#indexAnonVideo {
    box-sizing: content-box;
    grid-area: video;
    padding: 0;

    width: 624px;
    height: 352px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

#indexAnonSiteDesc {
    grid-area: sitedesc;
    text-align: center;
}

#indexAnonShowcase {
    padding: 0;
    grid-area: showcase;
}

#indexAnonShowcase .slide {
    padding: 10px 10px 50px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 1em;
}

#indexAnonShowcase .slide h3 {
    padding: 0;
    margin: 0;
}

#indexAnonLogin .button {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    height: 34px;
    padding: 0 22px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    line-height: 32px;
    cursor: pointer;
    border: 0;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    vertical-align: top;
}

#indexAnonLogin .button:link,
#indexAnonLogin .button:active,
#indexAnonLogin .button:visited,
#indexAnonLogin .button {
    background-color: #589623;
    color: #ffffff;
}

#indexAnonLogin .button:hover {
    background-color: #43731a;
    color: #ffffff;
}

.multiFancySelector {
    display: flex;
    flex-wrap: wrap;
    min-height: 1em;
    min-width: 5em;
    padding: 1em;
    gap: 1em;
}

.multiFancySelectorSelection {
    display: flex;
    height: 1em;
    padding: 0.5em 0.5em 0.5em 1em;

    justify-content: space-between;
    align-items: center;

    border-radius: 1em;
    border: 1px solid black;

    background: rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

    gap: 1em;
}

.multiFancySelectorSelection button {
    all: unset;
    display: block;

    width: 1.5em;
    height: 1.5em;

    background: url('/images/icons/remove.png') center / contain;

    cursor: pointer;
}

.faqRoot img {
    max-width: 100%;
    object-fit: contain;
}

.faqRoot li:not(:last-child) {
    margin-bottom: 2em;
}

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

.faqRoot > ul {
    padding: 0;
}

.faqRoot details {
    position: relative;
    padding-left: 2em;
}

.faqRoot .faqCategory .faqCategory:not(:first-child) {
    margin-top: 3em;
}

.faqRoot .faqCategory ~ .faqCategory:not(:first-child) {
    margin-top: 0;
}

.faqRoot summary {
    list-style-type: none;
    cursor: pointer;
    width: fit-content;
    padding: 0.5em 1em 0.5em 1em;
}
.faqRoot summary:hover {
    text-decoration: underline;
}

.faqRoot details[open] > summary {
    margin-bottom: 1em;
}

.faqRoot summary:before {
    content: '▶';
    position: absolute;
    top: 0;
    left: 0.5em;
    padding-top: inherit;
    font-size: 1.5em;
}

.faqRoot details[open] > summary:before {
    content: '▽';
}

.faqRoot .faqArticle {
    position: relative;
}

.faqRoot .faqArticle:before {
    content: '●';
    position: absolute;
    top: -0.18em;
    left: -1em;
    font-size: 1.5em;

    padding-top: inherit;
    display: flex;
    justify-content: center;
    align-items: top;
}

.faqCategory {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 1em;
    padding: 1em;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.faqCategoryTitle {
    font-weight: bolder;
    font-size: 1.75em;
}

.faqArticleTitle {
    font-weight: bold;
    font-size: 1.25em;
    margin-bottom: 0.4em;
}

.faqArticleBody {
    padding-left: 1em;
}

.faqRoot .faqArticleBody il,
.faqRoot .faqArticleBody ul {
    list-style-type: initial;
    position: initial;
    margin: initial;
}

#indexYourActivitiesCarousel .slide {
    position: relative;
    overflow: hidden;
}

#indexYourActivitiesCarousel .slide img {
    object-fit: contain;
}

#indexYourActivitiesCarousel .slide > :last-child {
    all: unset;

    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    font-weight: bold;
    text-align: center;

    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 4px black, 0 0 6px black, 0 0 10px black, 0 0 15px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

#indexYourActivitiesCarousel {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid black;
}

#indexYourActivitiesCarousel .glide__arrow {
    top: unset;
    bottom: 15px;
    transform: unset;
    background-color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    border-radius: 10px;
    padding: 5px;
}

#indexYourActivitiesCarousel .glide__arrow--left {
    left: 15px;
}

#indexYourActivitiesCarousel .glide__arrow--right {
    right: 15px;
}

.gcontainer {
    background-color: rgba(0, 0, 0, 0.2);
    background-size: 0;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: content-box;
    margin: 0 auto;
    animation: gBGFadeIn 0.25s ease-in-out 5s 1 forwards;
}

.gcontainer:not(:first-child) {
    margin-top: 15px;
}

.gcontainer:not(:last-child) {
    margin-bottom: 15px;
}

.gcontainer-728x90 {
    background-image: url('/images/gfallback/728x90.jpg');
    width: 728px;
    height: 90px;
}

.gcontainer-160x600 {
    background-image: url('/images/gfallback/160x600.jpg');
    width: 160px;
    height: 600px;
}

.gcontainer-300x50 {
    background-image: url('/images/gfallback/300x50.jpg');
    width: 300px;
    height: 50px;
}

.gcontainer-320x480 {
    background-image: url('/images/gfallback/320x480.jpg');
    width: 320px;
    height: 480px;
}

.gcontainer-336x280 {
    background-image: url('/images/gfallback/336x280.jpg');
    width: 336px;
    height: 280px;
}

@keyframes gBGFadeIn {
    0% {
        background-size: 0;
    }
    100% {
        background-size: 100%;
    }
}

#dragnsHoardNotifs {
    min-width: 660px;
    width: 100%;
    height: 150px;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#dragnsHoardNotifs > div {
    margin: 0;
    animation: dragnsHoardNotifPopOut 200ms linear;
}

@keyframes dragnsHoardNotifPopOut {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.puma_multiselect_actions {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin: 2em auto 2em auto;
}

.puma_multiselect_action {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.puma_multiselect_action > * {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.puma_multiselect_action > label > * {
    flex: 1 1 0;
}

.puma_multiselect_action > label > *:first-child {
    text-align: right;
    font-weight: bold;
}

.puma_multiselect_clowders_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}

.puma_multiselect_clowders_list > * {
    border-radius: 1em;
    padding: 0.5em 1em;
    background-color: rgba(0, 0, 0, 0.1);
}

.puma_multiselect_clowders_list:not(:empty):before {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    font-weight: bold;
    content: 'Pending Clowder Changes:';
    text-align: center;
}

.puma_multiselect_clowders_list:not(:empty) {
    position: relative;
    border-radius: 1em;
    padding: 2.5em 0.5em 1em 0.5em;
    background-color: rgba(0, 0, 0, 0.1);
}

.puma_multiselect_clowder_entry_add,
.puma_multiselect_clowder_entry_remove {
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
}

.puma_multiselect_clowder_entry_add {
    border: 1px solid green;
}

.puma_multiselect_clowder_entry_add::before {
    content: '+';
    font-weight: bold;
    color: green;
    font-size: 1.25em;
}

.puma_multiselect_clowder_entry_remove {
    border: 1px solid red;
}
.puma_multiselect_clowder_entry_remove::before {
    content: '-';
    font-weight: bold;
    color: red;
    font-size: 1.25em;
}

.puma_multiselect_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    align-items: center;
}

.puma_multiselect_entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: center;
    border-radius: 1em;
    padding: 0.5em 1em;
    background-color: rgba(0, 0, 0, 0.2);
}

.puma_multiselect_entry_image {
    object-fit: contain;
    max-width: 75px;
}

.puma_multiselect_entry *:not(input) {
    text-transform: capitalize;
    font-style: italic;
}

.puma_multiselect_entry_remove {
    position: absolute;
    bottom: 0.5em;
    right: 1em;
}

.puma_multiselect_title {
    margin: 0 auto 0.25em auto;
    font-weight: bold;
    font-size: 1.5em;
}

.puma_multiselect_response_list,
.bulk_form_response_list {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    row-gap: 0.75em;
    column-gap: 0.25em;
    overflow-y: scroll;
    width: 50em;

    justify-content: center;
    align-items: stretch;
    max-height: 30em;
}

.puma_multiselect_response_list > *,
.bulk_form_response_list > * {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.5em;
    background-color: rgba(0, 0, 0, 0.2);
}

.puma_multiselect_response_list > :nth-child(odd),
.bulk_form_response_list > :nth-child(odd) {
    justify-content: end;
    text-align: right;
    font-weight: bold;
}

.puma_multiselect_response_list > :nth-child(odd)::after,
.bulk_form_response_list > :nth-child(odd)::after {
    content: ':';
}

.hasItemInfo {
}

.ItemInfoWindowContent {
    width: 30em;
    max-height: 90svh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    overflow-y: auto;
    margin-left: 1.5em;
    margin-right: 1.5em;
}

.ItemInfoWindowSummary {
    display: flex;
    gap: 1em;
}

.ItemInfoWindowThumbnail {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.ItemInfoWindowSummaryInfo {
    display: flex;
    flex-direction: column;
}

.ItemInfoWindowItemName {
    font-size: 1.5em;
}
.ItemInfoWindowItemType {
    font-style: italic;
    display: flex;
    gap: 3em;
    justify-content: space-between;
    margin-bottom: 0.25em;
}

.ItemInfoWindowItemID {
    font-size: 0.8em;
}

.ItemInfoWindowItemTypeDesc {
    font-style: italic;
    font-size: 0.8em;
    margin-bottom: 1em;
    flex-grow: 1;
}

.ItemInfoWindowDetails {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 1em;
}

.ItemInfoWindowUsableBy {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 0.5em;
}

.ItemInfoWindowUsableBy > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.25em;
}

.ItemInfoWindowUsableBy > div > div:first-child {
    grid-column: 1 / -1;
}

.ItemInfoWindowUsableBy > div > div {
    text-align: center;
}

.ItemInfoWindowUsable {
    background-color: green;
}

.ItemInfoWindowUnusable {
    background-color: red;
}

@property --drop-shadow-size {
    syntax: '<length>';
    initial-value: 0;
    inherits: false;
}

@property --drop-shadow-color {
    syntax: '<color>';
    initial-value: #d47302;
    inherits: false;
}

.hasItemInfo {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.hasItemInfo:hover,
.hasItemInfo:active {
    --drop-shadow-size: 2px;
    filter: drop-shadow(0 0 var(--drop-shadow-size) var(--drop-shadow-color));
}

.hasItemInfo:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.hasItemInfo:active {
    transform: scale(0.9);
}

.puma_trophy_list {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: 2em;
}

.puma_trophy {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    background: rgba(0, 0, 0, 0.1);
    padding: 1em;
    border-radius: 1em;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(
        45deg,
        rgba(180, 118, 107, 1) 0%,
        rgba(203, 143, 131, 1) 30%,
        rgba(244, 203, 174, 1) 50%,
        rgba(242, 201, 171, 1) 70%,
        rgba(201, 138, 130, 1) 100%
    );
    position: relative;
    isolation: isolate;
    z-index: 1;
}

.puma_trophy.puma_trophy_not_earned:before {
    backdrop-filter: grayscale(55%) brightness(45%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    /* background: rgba(0,0,0,); */
    z-index: -1;
    border-radius: inherit;
}

.puma_trophy.puma_trophy_not_earned .puma_trophy_image {
    filter: grayscale(100%) brightness(60%);
}

.puma_trophy_image {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.puma_trophy_image:before {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background-size: 100%;
    background-repeat: no-repeat;
    content: '';
}

@property --puma-trophy-sunburst-color-1 {
    initial-value: teal;
    inherits: true;
    syntax: '<color>';
}

@property --puma-trophy-sunburst-color-2 {
    initial-value: #c0ffff;
    inherits: true;
    syntax: '<color>';
}

@property --puma-trophy-sunburst-angle {
    initial-value: 0deg;
    inherits: true;
    syntax: '<angle>';
}

.puma_trophy_image > div {
    box-sizing: content-box;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid black;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: radial-gradient(circle, var(--puma-trophy-sunburst-color-2) 15%, transparent),
    conic-gradient(from var(--puma-trophy-sunburst-angle), 
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2), var(--puma-trophy-sunburst-color-1),
        var(--puma-trophy-sunburst-color-2)
    );
}
.puma_trophy_image > div > img {
    width: inherit;
    height: inherit;
    object-fit: contain;
}

.puma_trophy_header {
    width: 100%;
    position: relative;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding-left: inherit;
    padding-right: inherit;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: -1em;
    margin-left: -1em;
    margin-right: -1em;
    margin-bottom: 1em;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    color: #dedede;
    text-shadow: 0 0 4px black, 0 0 8px rgba(0, 0, 0, 0.5);
}
.puma_trophy_title {
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
}

.puma_trophy_date {
    position: absolute;
    top: 0;
    right: 2em;
    height: 100%;
    font-style: italic;
    font-size: 1.25em;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.puma_trophy_body {
    display: flex;
    justify-content: stretch;
    gap: 1em;
}

.puma_trophy_points_icon {
    display: inline-block;
    box-sizing: border-box;
    width: 1.75em;
    height: 1.75em;
    padding: 1px;
    overflow: hidden;
    vertical-align: middle;

	mask-image: url('/images/puma_trophies/paw.svg');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: center;
	background: radial-gradient(circle at 50% calc(50% + 0.25em), rgba(180, 118, 107, 1) 5%, rgba(244, 203, 174, 1));
}

.puma_trophy_points {
	isolation: isolate;
	position: relative;
	width: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 2;
	color: white;
	flex-shrink: 0;
}

.puma_trophy_points:before {
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask-image: url('/images/puma_trophies/paw.svg');
	mask-size: 60px 60px;
	mask-repeat: no-repeat;
	mask-position: 50% calc(50% - 1em);
	background: radial-gradient(circle at center, rgba(0,0,0, 0.2) 0%, rgba(0,0,0, 0.6));
	content: '';
}

.puma_trophy_req_container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    flex-grow: 1;
}

.puma_trophy_req_group {
    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr 0.5fr;
    gap: 0.5em;
}

.puma_trophy_req_group > div {
    font-size: 1.5em;
    color: #dedede;
    text-shadow: 0 0 4px black, 0 0 8px rgba(0, 0, 0, 0.5);
}

.puma_trophy_req_stat {
    text-align: right;
}
.puma_trophy_req_sep {
    grid-column: 1 / -1;
}

.puma_trophy_req_sep:before {
    content: '─────  OR ─────';
    text-align: center;
    display: block;
    font-style: italic;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5em;
    margin: 1em;
    border-radius: 1em;
}

.puma_trophy_req_stat:not(.puma_trophy_req_met),
.puma_trophy_req_amount:not(.puma_trophy_req_met) {
    font-style: italic;
    font-weight: normal;
}

.puma_trophy_req_stat.puma_trophy_req_met,
.puma_trophy_req_amount.puma_trophy_req_met {
    font-weight: bold;
}

.puma_trophy_gold {
    background: linear-gradient(
        45deg,
        rgba(108, 53, 14, 1) 0%,
        rgba(207, 146, 44, 1) 30%,
        rgba(229, 192, 85, 1) 50%,
        rgba(197, 146, 58, 1) 70%,
        rgba(151, 80, 20, 1) 100%
    );
    --puma-trophy-sunburst-color-1: purple;
    --puma-trophy-sunburst-color-2: #f8dbff;
}

.puma_trophy_gold:not(.puma_trophy_not_earned) {
    animation: 30.0s linear 0s infinite running pumaTrophySunburstAnim;
}

@keyframes pumaTrophySunburstAnim {
    from {
    }
    to {
          --puma-trophy-sunburst-angle: 360deg;
    }
  }

.puma_trophy_silver {
    background: linear-gradient(
        45deg,
        rgba(56, 61, 67, 1) 0%,
        rgba(124, 129, 135, 1) 30%,
        rgba(161, 166, 172, 1) 50%,
        rgba(124, 129, 135, 1) 70%,
        rgba(56, 61, 67, 1) 100%
    );
    --puma-trophy-sunburst-color-1: #bf3b4d;
    --puma-trophy-sunburst-color-2: #f6e1d4;
}

.puma_trophy_bronze {
    background: linear-gradient(
        45deg,
        rgba(96, 51, 49, 1) 0%,
        rgba(214, 171, 120, 1) 30%,
        rgba(224, 195, 161, 1) 50%,
        rgba(185, 141, 112, 1) 70%,
        rgba(104, 75, 58, 1) 100%
    );
    --puma-trophy-sunburst-color-1: #0a683c;
    --puma-trophy-sunburst-color-2: #d4f6e6;
}

.puma_trophy.frame_laurel_bronze .puma_trophy_image::before {
    background: url('/images/puma_trophies/frame_laurel_bronze.png');
}

.puma_trophy.frame_laurel_silver .puma_trophy_image::before {
    background: url('/images/puma_trophies/frame_laurel_silver.png');
}

.puma_trophy.frame_laurel_gold .puma_trophy_image::before {
    background: url('/images/puma_trophies/frame_laurel_gold.png');
}

.puma_trophy.frame_starburst .puma_trophy_image::before {
    background: url('/images/puma_trophies/frame_starburst.png');
}