.dice-roller {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: fixed !important;
    left: 1rem !important;
    bottom: 1.5rem !important;
    max-width: 350px;
    overflow: hidden;
    z-index: 19;
    min-width: 350px;
    align-items: flex-start;
    row-gap: 0px !important;
}


/* Cache Update Loading */


/*.cache-loader--disabled > div > div > span > img {
    filter: invert(58%) sepia(98%) saturate(409%) hue-rotate(71deg) brightness(97%) contrast(92%);
}

 .cache-loader--disabled > div > div > span {
    animation: cache-spinner 5s linear infinite;
}


@keyframes cache-spinner {
  
  0% {
      translate: 0px;
    }
  
    25% {
      translate: -100px;
    }
  
      75% {
      translate: 100px;
    }
  
  
}

*/

.cache-loader--disabled > div > div {
    position: relative;
}

.cache-loader--disabled > div > div:before {
    content: "Character Engine Updates Found";
    color: white;
    display: flex;
    position: absolute;
    top: -36px;
    width: 300px;
    height: 118px;
    font-family: 'vendetta';
    letter-spacing: .5px;
    padding: 8px;
    align-items: flex-start;
    justify-content: center;
    background-image: url(https://content.demiplane.com/nexus/demiplane/cache-loading-pulse.webp), linear-gradient(0deg, #272831, #1b1c22);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    text-align: center;
    line-height: 1.2;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid #4f98f3;
    animation: cache-updates 30s linear infinite alternate;
}

@keyframes cache-updates {
  
    0% {
      content: "Character Engine Updates Found";
      color: white;
    }
  

    25% {
      content: "Retrieving Character Engine Updates...";
      color: white;
    }
  


    50% {
      content: "Applying Character Engine Updates...";
      color: white;
    }
 
      75% {
      content: "Optimizing Character Cache...";
      color: white;
    }


}


/* TEMP Bottom White Bar Fix */


@media (min-width: 1200px) and (max-width: 1366px) {
    
    
        div#layout-root {
            height: calc(100vh - 72px) !important;
        }

}


/* Unlock Container Drawer */


.drawer-container .unlock__title {
    font-size: 20px;
    color: var(--co-clr-base-1);
}

.drawer-container .purchase-content__title {
    color: var(--co-clr-off-white);
}

.drawer-container .purchase-content__product-name {
    color: var(--co-clr-base-1) !important;
    font-size: 16px !important;
}

.drawer-container .purchase-content__price {
    color: var(--co-clr-off-white);
}

.drawer-container .purchase-content__meta-description {
    font-family: 'vendetta';
    font-size: 20px;
    line-height: 1.2;
}

.drawer-container .purchase-content__actions-block {
    justify-content: center;
}


li.select-block__menu-item {
    color: white;
    font-family: 'vendetta';
    font-size: 20px;
}


.premade-select--view-permission > div:first-child > div {
    gap: 6px;
}



/* Tooltip Fixes */


.tooltip-container .element-tooltip-header-inner > div:nth-child(2) span {
    display: none !important;
}

.tooltip-container .element-tooltip-header-inner {
    display: grid;
    grid-template-columns: 0px 1fr 1fr;
}



.tooltip-container .tooltip-sidebar-unlock-title {
    font-size: 20px;
    color: var(--co-clr-base-1) !important;
    font-family: 'Quelity-Bold';
}

.tooltip-container .purchase-content__title {
    color: var(--co-clr-off-white);
}

.tooltip-container .purchase-content__product-name {
    color: var(--co-clr-base-1);
    font-size: 16px !important;
}

.tooltip-container .purchase-content__price {
    color: var(--co-clr-off-white);
}

.tooltip-container .tooltip-sidebar-unlock-desc {
    font-family: 'vendetta';
    font-size: 20px;
    line-height: 1.2;
    color: var(--co-clr-off-white);
}

.tooltip-container .purchase-content__actions-block {
    justify-content: center;
}

.tooltip-sidebar-unlock-container {
    gap: 24px;
}


.tooltip-sidebar-unlock-unlock-btn {
    color: var(--co-clr-base-5);
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-secondary-button-middle.png?format=webp) !important;
    background-size: cover !important;
    background-repeat: repeat-x !important;
    background-position: top center !important;
    position: relative;
    width: 170px;
    position: absolute;
    top: 91%;
    left: 50%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
    height: 40px;
}

.tooltip-sidebar-unlock-unlock-btn:before {
    content: '';
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-secondary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.tooltip-sidebar-unlock-unlock-btn:after {
    content: '';
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-secondary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}





/* END TEMP */



button.icon-button__button {
    min-width: unset;
}


.drawer-container button.gear--in-use-button {
    color: var(--co-clr-base-1);
    border: 1px solid var(--co-clr-base-3);
    font-family: 'vendetta';
    width: 90px;
}

.drawer-container button.gear--in-use-button.gear-selected {
    background: var(--co-clr-base-5);
}



.drawer-container .select-block__select {
    color: white;
}

.drawer-content-container--custom-gear > div:nth-last-child(2) {
    flex-direction: column;
    gap: 16px;
}


.filter-input-control.algolia-select-element-table-filter-input {
    margin-top: 0px !important;
    margin-bottom: 8px;
}



/* Button / Checkbox Flashing Fix */



div#character-sheet-drawer .center-drive-resistance-row--wrapper .checkbox-block__checkbox--disabled.checkbox-block__checkbox--active:after {
    border: none !important;
    height: 20px !important;
    width: 20px !important;
    border-radius: 0px !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/res-triangle-white.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}


.button-component .button-component__button--disabled {
    filter: none !important;
    color: gray !important;
}




.header-illumination-items .checkbox-block__checkbox--disabled.checkbox-block__checkbox--active:after {
    background: var(--co-clr-brass) !important;
    border-radius: 0px;
    rotate: 45deg;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.journal-container .grid-table-row__block--disabled {
    filter: none !important;
}


.drawer-container .button-component .button-component__button--disabled {
    filter: grayscale(.5) opacity(.5) !important;
}


/* Sidebar Drawers */



.drawer h5 {
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 16px;
    margin-bottom: 4px;
    color: var(--co-clr-base-1);
}


.drawer-container .main-holder table thead {
    color: var(--co-clr-base-2);
}

.drawer-container .main-holder table tbody tr:nth-child(even) {
    font-weight: normal;
    background-color: var(--co-clr-base-5);
}

.drawer-container .main-holder table p {
    line-height: 1.3;
    padding: 2px !important;
}





/* Add Scar from Sheet Middle */


.mark-is-max .tracker-add-button {
    display: none;
}
  
.mark-add-scar-button {
    margin-left: -6px;
    rotate: 45deg;
    display: none;
}

.mark-is-max + .mark-add-scar-button {
    background: var(--co-clr-maroon) !important;
    height: 26px !important;
    width: 27px !important;
    font-family: 'vendetta';
    font-size: 11px !important;
    letter-spacing: 0px;
    border-color: var(--co-clr-off-white) !important;
    display: block;
    padding: 5px;
    position: relative;
    border: 1px solid var(--co-clr-off-white);
    cursor: pointer;
}

.mark-is-max + .mark-add-scar-button:hover {
    filter: brightness(1.2);
}

.mark-is-max + .mark-add-scar-button div {
    pointer-events: none;
}

.mark-add-scar-button-label {
    rotate: -45deg;
    position: relative;
    top: 4px;
    left: -2px;
    pointer-events: none;
}




/* SCARS Drawer */



.drawer-container .scar-list {
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--co-clr-base-3);
    gap: 16px;
}


.drawer-content-container--scars > div:first-child > div:first-child {
    gap: 16px;
    margin-bottom: 16px;
}

.drawer-container .scar--header {
    justify-content: space-between;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    color: var(--co-clr-base-1);
    font-weight: 700;
    font-size: 18px;
    align-items: center;
}

.drawer-container .scar--details-description {
    font-size: 20px;
    font-family: 'vendetta';
    color: var(--co-clr-off-white);
}

.drawer-container .scar--details-bonus-penalty {
    font-family: 'vendetta';
    font-size: 20px;
    color: var(--co-clr-base-2);
}

.drawer-container .scar--details {
    gap: 8px;
}

.drawer-container .scar-list > div {
    border: 1px solid var(--co-clr-brass);
    padding: 6px 8px;
}


/* General */



.drawer-container {
    padding-bottom: 40px !important;
}



/* Element Display */

.element-display-drawer-base-desktop .element-display-drawer-outer-content-container {
    padding-left: 16px;
    padding-right: 16px;
}

.general-element-display-footer-float {
    padding: 16px;
}


/* END */


.drawer-section-container--roll-section {
    margin-top: 16px;
}

.drawer-section-container--roll-section button {
    cursor: url(https://content.demiplane.com/nexus/vampire/vtm-single-die-pointer.svg) 0 20, auto;
  }
  
.drawer-container .drawer-popout-content-box > div:first-child > div:first-child {
    margin-top: 0px !important;
}


.drawer-notes-content {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.drawer-container__content-block > div:first-child {
    padding-bottom: 24px;
}

.drawer-container .drawer-popout-content-box > div:first-child {
    row-gap: 0px;
}

.character-sheet-drawer {
    position: unset !important;
    padding-bottom: 60px;
    background: var(--even-darker-p-color);
}

.element-display-drawer-base-desktop {
    top: 0px !important;
    height: 100vh !important;
    border-radius: 0px !important;
}

div#character-sheet + div {
    height: calc(100% - 28px);
}

.drawer-header__close {
    position: relative !important;
    right: 0px;
    top: 2px;
    padding: 0px;
}

.drawer-header__back {
    padding: 0px !important;
    top: 2px !important;
}

.drawer-note-item-subtitle.text-block__text {
    margin-top: 16px;
    color: var(--co-clr-base-1);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: -8px !important;
    font-family: 'mrs-eaves';
}

.drawer-note-item-content.characters-html {
    color: var(--vtm-white);
    font-size: 18px;
    line-height: 1.3;
    font-family: 'EBGaramond';
}

.drawer-note-item-content p {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    font-family: 'vendetta';
    font-size: 20px;
    line-height: 1.2;
}

.sheet-bottom-container div#box-content::-webkit-scrollbar {
    display: block !important;
    width: 8px;
}

.sheet-bottom-container div#box-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.sheet-bottom-container div#box-content::-webkit-scrollbar-thumb {
    background-color: var(--co-clr-base-2);
    pointer-events: all;
}

.drawer-container .stat-component-label.text-block__text {
    color: rgb(31, 52, 77);
}

.builder-table-overflow-block:before {
    content: "Shift + Wheel or Swipe to Scroll";
    font-family: 'vendetta';
    font-size: 14px;
    color: var(--vtm-red);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: block;
    margin-bottom: -4px;
}



.Tabell-1---standard th, .Tabell-2---neg th {
    min-width: 100px;
}


.drawer-container .main-holder .vtm-dot-table p {
    font-size: 19px !important;
    line-height: 1.3 !important;
}

.drawer-container .main-holder table p {
    font-size: 17px !important;
    line-height: 1.3 !important;
}

.drawer strong {
    color: inherit !important;
    font-size: inherit !important;
}

.main-holder H2 {
    font-size: 28px;
    margin-top: 32px;
    margin-bottom: -8px;
}


.drawer-container h3 {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--co-clr-base-1);
    font-family: 'mrs-eaves';
    margin-top: 24px;
    margin-bottom: 4px;
}

.drawer-container .main-holder strong {
    color: inherit !important;
}



.drawer-compendium-list-item-header-text.text-block__text {
    font-family: 'Bodoni72';
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vtm-red);
    margin-top: 16px;
    margin-bottom: -8px;
    word-spacing: 5px;
}

.drawer-five-dot-tracker .tracker {
    justify-content: flex-start;
}

.drawer-five-dot-tracker .tracker > div {
    height: 12px;
    width: 12px;
}


.drawer table strong {
    color: inherit !important;
    font-size: 16px !important;
}


.infinite-grid-table {
    gap: 8px;
}



/* EXPERIENCE Progression Trackers */



.drawer-container .dots-incremental-select {
    justify-content: flex-start;
}

.drawer-container button.icon-button__button {
    min-width: 24px;
    background: var(--darker-p-color);
    z-index: 9;
    padding: 4px;
    border: 1px solid var(--co-clr-base-4);
    border-radius: 0px;
}

.drawer-container .drawer-section-container--dot-purchase {
    grid-column-end: span 1;
    grid-column-start: 1;
    grid-row-end: span 2;
    justify-content: center;
}

.drawer-container .dots-incremental-select-tracker {
    min-width: 80px;
    max-width: 80px !important;
    justify-content: center !important;
    gap: 8px;
    align-self: start;
    font-family: 'EBGaramond';
    font-size: 18px;
    color: #CFCFCF;
    line-height: 1.5;
    border-radius: 1px;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
}

.drawer-container .dots-tracker {
    justify-content: flex-start;
    display: flex !important;
    align-items: center;
    color: #CFCFCF;
}

.drawer-container .dots-incremental-select .exp-cost-container {
    column-gap: 4px;
    justify-content: center;
}

.drawer-container .tracker {
    grid-column-start: level;
    grid-column-end: tracker;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    width: fit-content;
}

.drawer-container .exp-cost-container {
    font-family: 'vendetta';
    font-size: 10px;
    text-transform: uppercase;
    line-height: 1;
}

.drawer-container .dots-incremental-select-total-dot-container {
    font-family: 'vendetta';
    font-size: 10px;
    text-transform: uppercase;
    line-height: 1;
    color: #CFCFCF;
}

.drawer-container .dots-incremental-select .parsed-html-block {
    position: relative;
    left: -26px;
    top: 18px;
    min-width: 80px;
    margin-left: -80px;
}


.drawer-container .dots-incremental-select:after {
    content: "";
    display: block;
    height: 0.5px;
    width: 100%;
    background: #333333;
    position: relative;
    top: 16px;
    right: -12px;
}

.drawer-container .dots-tracker > div:first-child {
    padding-right: 8px;
}


.drawer-container .drawer-full-dot-tracker .tracker {
    background: #0d0d0d;
    position: relative;
    z-index: 99;
    width: fit-content;
}

.drawer-container .dots-tracker:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 32px);
    background: #333333;
    position: relative;
    top: 0px;
    left: 0px;
}





.drawer-container:is(:has(.infinite-grid-table)) {
    overflow: hidden;
}


.character-sheet-drawer > div:first-child > div:nth-child(2):is(:has(.infinite-grid-table)) {
    overflow: hidden;
    padding-right: 0px;
    margin-right: 0px;
}



.drawer-container .elem-disp-header-name-listingRow, .drawer-container .elem-disp-header-name-page {
    font-family: MinionPro-Regular !important;
    text-transform: capitalize !important;
    font-weight: 700 !important;
    color: var(--co-clr-white) !important;
    font-size: 20px;
}


/* Drawer Scrollbars */




.infinite-grid-table__table-block::-webkit-scrollbar-thumb:hover {
    background: var(--co-clr-base-4) !important;
}


.infinite-grid-table__table-block::-webkit-scrollbar-thumb {
    background-color: var(--co-clr-base-4) !important;
}

.infinite-grid-table__table-block::-webkit-scrollbar-track {
    background: transparent !important;
}


@media screen and (min-width: 1920px) {

    .character-sheet-drawer > div:first-child > div:nth-child(2) {
          padding-right: 8px;
          margin-right: -12px;
    }
    
    
    .character-sheet-drawer > div:first-child > div:nth-child(2)::-webkit-scrollbar {
        display: block !important;
        width: 8px;
    }
    
    .character-sheet-drawer > div:first-child > div:nth-child(2)::-webkit-scrollbar-track {
        background-color: transparent;
    }
    
    .character-sheet-drawer > div:first-child > div:nth-child(2)::-webkit-scrollbar-thumb {
        background-color: var(--co-clr-base-4);
        pointer-events: all;
    }
    


}



@media screen and (min-width: 1920px) and (min-height: 1080px) {

    
    
    .character-sheet-drawer:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 1px;
        left: 1px;
        background: linear-gradient(0deg, var(--even-darker-p) 25%, transparent);
        height: 80px;
        width: calc(100% - 2px);
        pointer-events: none;
        z-index: 9;
    }



}



@media screen and (max-width: 1919px) {
  
    div#drawer-title-container {
        max-width: 385px;
        padding-right: 16px !important;
    }
    
    .character-sheet-drawer > div:nth-child(3) {
      padding-bottom: 92px !important;
    }
    
    .character-sheet-drawer > div:nth-child(3):after {
        content: "";
        display: block;
        position: fixed;
        bottom: 0px;
        right: 8px;
        background: linear-gradient(0deg, #101010, transparent);
        height: 50px;
        width: 366px;
        pointer-events: none;
        z-index: 9;
    }
    
    .drawer-container.infinite-grid-table__table-block {
        padding-right: 8px;
    }

}



.character-sheet-drawer > div:nth-child(3)::-webkit-scrollbar {
    display: block !important;
    width: 8px;
}

.character-sheet-drawer > div:nth-child(3)::-webkit-scrollbar-track {
    background-color: transparent;
}

.character-sheet-drawer > div:nth-child(3)::-webkit-scrollbar-thumb {
    background-color: var(--co-clr-base-4);
    pointer-events: all;
    min-height: 160px;
}


.character-sheet-drawer {
  scrollbar-width: none;
}




.infinite-grid-table__table-block {
    padding-bottom: 120px;
}





.drawer-compendium-list-container {
    margin-top: 12px !important;
}



.drawer-section-header-text {
    display: none;
}



/* Drawer Grid */



.drawer-container .drawer-popout-content-box > div:first-child {
    gap: 0px;
    padding-bottom: 60px;
}


/*


.drawer-container__content-block > div:first-child {
    display: grid;
    grid-template-columns: [left] 2fr [right] min-content;
    gap: 16px 0px;
}


*/

.drawer-section-container {
    grid-column-end: span 3;
    font-family: 'EBGaramond';
    font-size: 19px;
    color: var(--vtm-white);
}

.drawer-section-container--dots {
    grid-row-end: span 2;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: span 2;
    display: flex;
    justify-content: center;
}

.drawer-container button.icon-button__button:after {
    content: "Modify";
    font-size: 12px;
    font-family: 'mrs-eaves';
    color: var(--co-clr-base-1);
    padding-left: 8px;
    padding-right: 8px;
}




/* Skill Drawer */


.drawer-section-container--specialties {
    margin-top: 16px !important;
}

.drawer-skill-specialty-header.text-block__text {
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'vendetta';
    color: var(--vtm-red);
    font-weight: 700;
}

.drawer-skill-specialty-list.text-block__text {
    font-family: 'vendetta';
    color: #CFCFCF;
    text-transform: uppercase;
    font-size: 13px;
    line-height: normal;
}


.drawer-skill-specialty-header-container {
    justify-content: space-between;
}

.drawer-skill-specialty-header-container button {
    border: none;
    padding: 0px;
    color: gray;
    background: transparent;
}

.drawer-skill-specialty-header-container button:hover {
    background-color: transparent !important;
    color: var(--vtm-red);
}

.drawer-skill-specialty-input-container {
    gap: 8px;
}

.drawer-skill-specialty-container {
    gap: 8px;
}



/* Modify Section */



.drawer-modify-section-row--container {
    flex-flow: column !important;
    gap: 8px;
    max-width: fit-content;
}

.drawer-modify-section-row--default-container {
    color: gray;
    font-size: 13px;
}

.drawer-modify-section-row--right-content {
    flex-flow: row !important;
    gap: 8px;
}



.drawer-modify-section-row--label.text-block__text {
    color: var(--co-clr-base-1);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    font-family: 'mrs-eaves';
}

.drawer-modify-section-row--right-content > div:first-child {
    margin-top: -10px;
}

.drawer-modify-section-row--right-content button {
    color: var(--co-clr-base-2);
    font-size: 14px;
}





/* Input Blocks */


.drawer-container input {
    font-size: 13px;
    font-weight: 400;
    font-family: 'JMH Typewriter' !important;
    color: var(--darker-p-color) !important;
    background: var(--co-clr-off-white) !important;
    height: 16px;
}

.drawer-container input::placeholder {
    font-family: 'JMH Typewriter' !important;
    font-size: 13px;
    color: var(--co-clr-base-5);
}


.drawer-container textarea {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    color: var(--darker-p-color);
}

.drawer-container .MuiInputBase-multiline {
    background-color: var(--co-clr-off-white) !important;
}


/* Purchase Unlock Drawer */



.unlock__title {
    font-size: 20px;
}







/* EXPERIENCE Drawer */



/* EXP Tracker */



.experience-manager-container {
    margin-top: 16px !important;
    gap: 16px;
}

.experience-manager-top-values-container {
    background: #010101;
    padding: 8px;
    border: 1px solid var(--vtm-dark-red);
}

.experience-manager-section-container div {
    justify-content: center;
    text-align: center;
}

.experience-manager-section--header.text-block__text {
    font-family: 'vendetta';
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vtm-red);
}

.experience-manager-section--value.text-block__text {
    font-family: 'vendetta';
    color: white;
}

.drawer-container .drawer-section-container--value:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 36px);
    background: #333333;
    position: relative;
    top: -40%;
    right: 0px;
}

.drawer-basic-value > div:first-child {
    padding-left: 8px;
    padding-right: 8px;
    background: #0d0d0d;
    position: relative;
    z-index: 99;
    color: #CFCFCF;
    border: 1px solid var(--vtm-dark-red);
}

.additional-exp-input-container {
    gap: 8px;
    max-width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.additional-exp-input-container button.button-component__button {
    background: var(--vtm-red) !important;
    color: white !important;
    border-radius: 1px;
    font-weight: 700;
    font-size: 18px;
    padding: 0px;
    min-width: 40px;
    height: 40px;
    border: none !important;

}

.additional-exp-input-container .button-component {
    align-items: flex-end;
    display: flex;
}

.additional-exp-container input {
    text-align: center;
}

.additional-exp-input-container label {
    min-width: 100% !important;
}

.additional-exp-button-container div:first-child button {
    background: var(--vtm-teal);
    color: white;
    font-size: 12px;
    border-radius: 0px;
    padding-left: 12px;
    padding-right: 12px;
    font-family: 'vendetta';
}

.additional-exp-button-container {
    margin-top: 16px !important;
    gap: 16px;
}

.additional-exp-button-container div:nth-child(2) button {
    font-size: 12px;
    border-radius: 0px;
    font-family: 'vendetta';
}

.experience-spend-breakdown-container {
    margin-top: 16px;
}

.experience-spend-breakdown-header.text-block__text {
    text-align: left;
    text-transform: uppercase;
    font-size: 18px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}

.experience-spend-breakdown-container p {
    font-family: 'vendetta';
    text-transform: uppercase;
    text-align: left;
    margin-top: 16px;
    font-size: 13px;
    color: var(--vtm-red);
}



.drawer-content-container {
    color: var(--co-clr-off-white);
    position: relative;
}


.drawer-container .center-marks-trackers {
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 16px;
    margin-bottom: 24px;
}



/* Character Drawer */



.header-character-name-container div {
    pointer-events: none;
}

.drawer-content-container--my-character .divider-block {
    display: none;
}

.drawer-content-container--my-character {
    gap: 12px !important;
}

.my-character-drawer {
    row-gap: 16px !important;
    display: flex !important;
    
}

.theme-switch__gradiant {
    background: linear-gradient(90deg, var(--co-clr-base-5) 40%, rgba(42, 42, 42, 0) 80%) !important;
    width: 100% !important;
}

.theme-switch__option-block--active .theme-switch__option {
    border: 1px solid var(--vtm-red);
    z-index: 9;
    border-radius: 0px;
    position: relative;
}
.theme-switch__option-block .theme-switch__option {
    width: 100%;
}

.theme-switch__selected-icon {
    background: var(--co-clr-brass);
    display: flex !important;
    border: 1px solid var(--co-clr-base-2);
}


/*
ul[role="listbox"] {
    background: #fdfdfd;
}

ul[role="listbox"] li {
    color: black;
}

/*

ul.MuiList-root.MuiList-padding.MuiMenu-list li {
    font-family: 'vendetta';
    font-size: 14px;
    color: #FDFDFD;
}

*/

.portrait-upload-mini__label {
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

button.portrait-upload-mini__button {
    background: var(--co-clr-base-3) !important;
    border: 1px solid var(--co-clr-base-2) !important;
    border-radius: 0px !important;
}

button.portrait-upload-mini__button:hover {
    filter: brightness(1.2);
}



.portrait-upload-mini__avatar {
    border-radius: 0px;
}

a.builder-button__link {
    text-decoration: none;
}

.builder-button__button {
    text-transform: uppercase !important;
    font-size: 14px !important;
    height: 50px !important;
    width: 240px !important;
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    background-origin: padding-box;
    font-weight: 700 !important;
    font-family: 'vendetta' !important;
    background-size: cover;
    justify-content: center !important;
    border-radius: 0px !important;
}

.builder-button__button:hover {
    filter: brightness(1.2);
}

.my-character-name-section {
    display: block !important;
}

.my-character-name-section label {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}



h3.portrait-upload__label {
    font-family: 'vendetta';
    font-size: 13px;
    font-weight: 700;
}

.portrait-upload__button {
    background-color: #192735 !important;
    border: 1px solid #cbbd7d !important;
}

.portrait-upload__button:hover {
    filter: brightness(1.2) !important;
    background-color: #192735 !important;
}

.portrait-upload__icons.MuiBox-root {
    max-height: 72px;
    overflow-y: hidden;
}

.theme-switch {
    width: 100%;
}

h3.theme-switch__label {
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 4px;
}

h3.theme-switch__name {
    color: white;
    font-family: 'vendetta';
    font-size: 18px;
    margin-top: 0px;
    pointer-events: none;
}




/* Sharing Banner Height Calculations */


@media (min-width: 1024px) and (min-height: 1080px) {


    .viewingBannerSticky + .MuiBox-root .sheet-bottom-container > div:first-child {
        height: calc(100vh - 686px);
    }
  
}





/* END */





/* Share Section */


.drawer-content-container--my-character > div:last-child {
    margin-top: 24px;
}

button.permissions__link {
    background: transparent;
    font-size: 13px;
    font-family: 'vendetta';
    color: var(--vtm-red);
}

button.permissions__link:hover {
    background: transparent;
    filter: brightness(1.2);
}

.drawer-character-sharing-section {
    margin-top: 24px !important;
}

.drawer-character-sharing-header h4 {
    color: var(--vtm-white);
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Cormorant';
    font-weight: 700;;
}

.drawer-character-sharing-button-container {
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 12px 0 !important;
}

.drawer-character-sharing-button-container .button-component {
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.drawer-character-sharing-button-container button {
    background: transparent;
    box-shadow: none;
    color: #CFCFCF;
    border-radius: 0px;
    border: 1px solid var(--vtm-teal);
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'vendetta';
    width: 100%;
    border: 1px solid var(--co-clr-base-2);
}

.drawer-character-sharing-button-container button:hover {
    color: var(--co-clr-off-white);
    box-shadow: none;
    background: var(--co-clr-base-5);
    border: 1px solid var(--co-clr-base-2) !important;
}

.permissions__view-block label {
    font-family: 'vendetta';
    color: #192736;
}

div#viewing-permissions {
    font-size: 18px;
    color: var(--co-clr-off-white);
    font-family: 'vendetta';
}

.premade-select--view-permission svg {
    color: var(--co-clr-base-2);
}


.drawer-content-container--gear .MuiSelect-select {
    color: var(--co-clr-off-white);
    font-family: 'vendetta';
    font-size: 18px;
}

.gear-input-save button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    left: 8px;
    min-width: 88px !important;
}

.gear-input-save button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.gear-input-save button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}


/* Resonance Drawer */


.drawer-resonance-input-container {
    grid-template-rows: [res] 1fr [reset] 1fr [dyc] 1fr;
    display: grid !important;
}

.drawer-resonance-select-inputs-container div {
    width: 100%;
}

.drawer-resonance-select-inputs-container {
    gap: 16px;
}

.drawer-resonance-input-container .button-component {
    grid-row-start: reset;
    margin-top: 16px;
}

.drawer-resonance-input-container label {
    margin-top: 0px;
}




/* Manage Drawers General */



.manage-drawer-header-toggles-container p {
    font-size: 12px !important;
    text-transform: uppercase;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: 'vendetta' !important;
    font-weight: 700 !important;
    color: #CFCFCF;
    line-height: 1;
}

.manage-drawer-header-toggles-container {
    flex-flow: row !important;
    flex-wrap: wrap !important;
}


.manage-drawer-header-toggles-container label.MuiFormControlLabel-root.switch-block__switch-control.MuiFormControlLabel-labelPlacementEnd {
    flex-flow: row-reverse;
    margin-left: 4px;
    justify-content: flex-start;
    margin-right: 8px;
}

.drawer-container .Mui-checked {
    color: var(--co-clr-base-1) !important;
}

.drawer-container .Mui-checked + .MuiSwitch-track {
    background-color: var(--co-clr-base-1) !important;
}


.drawer-manage-element-list-container--ability > div:first-child {
    flex-direction: column;
    color: var(--co-clr-base-1);
}



/* Items Drawer */


/* Add Custom Item */


.drawer-content-container--gear {
    row-gap: 16px !important;
}


.drawer-content-container--gear > div:nth-last-child(n-1) {
    flex-direction: column;
    row-gap: 16px;
}


.drawer-manage-element-list-container {
    row-gap: 8px !important;
}

.drawer-content-container--add-custom-item {
    display: flex !important;
    row-gap: 16px !important;
}

.drawer-add-custom-item-button-container {
    gap: 8px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}


/* END */


.drawer-section-container--item-name .input-block label {
    margin-top: 0px;
}

.drawer-container .drawer-manage-element-list-container--item .builder-table-row {
    grid-template-columns: 1fr min-content;
    gap: 4px;
}



/* Disciplines & Powers Manage Drawer */



.drawer-discipline-power-section-table-header.text-block__text {
    text-transform: uppercase;
    font-size: 16px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
    word-spacing: 5px;
    color: gray;
    background: #0d0d0d !important;
    position: relative;
    z-index: 9;
    padding-right: 8px;
}

.drawer-discipline-power-section-table-header-container {
    justify-content: space-between;
    margin-top: 16px !important;
}

.drawer-discipline-power-section-table-header.text-block__text:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - -138px);
    background: #333333;
    position: relative;
    top: -14px;
    right: -72px;
}





.drawer-container .drawer-manage-element-list-container--discipline .builder-table-row {
    grid-template-columns: 1fr minmax(80px, auto) [expand] 36px;
}

.drawer-container .drawer-manage-element-list-container--discipline .builder-table-row .dots-single-select-tracker {
    min-width: unset !important;
}

.drawer-container .drawer-manage-element-list-container--discipline .builder-table-row .dots-incremental-select {
    min-width: unset !important;
}

.drawer-container .drawer-manage-element-list-container--discipline .builder-table-row .exp-spent-cell {
    display: none !important;
}


.drawer-container .drawer-manage-element-list-container--discipline .builder-table-row .tracker {
    justify-content: flex-end;
}






.drawer-container .drawer-manage-element-list-container--power .builder-table-row {
    grid-template-columns: 1fr [button] minmax(80px, auto) [level] 16px [expand] 36px;
}

.drawer-container .drawer-manage-element-list-container--power .builder-table-row > div:nth-child(2) {
    grid-column-start: level;
    justify-self: end;
}

.drawer-container .drawer-manage-element-list-container--power .builder-table-row > div:nth-child(3) {
    grid-column-start: button;
    grid-row-start: 1;
}


.drawer-container .drawer-manage-element-list-container--power .builder-table-row .dots-single-select-tracker {
    min-width: unset !important;
}

.drawer-container .drawer-manage-element-list-container--power .builder-table-row .dots-incremental-select {
    min-width: unset !important;
}

.drawer-container .drawer-manage-element-list-container--power .builder-table-row .exp-spent-cell {
    display: none !important;
}

.drawer-container .drawer-manage-element-list-container--power .builder-table-row .tracker {
    justify-content: flex-end;
}


.drawer-container .drawer-manage-element-list-container--power .builder-table-row .dots-single-select-container {
    grid-column-start: 3;
}



/* Merits and Flaws Manage Drawer */



.drawer-container .drawer-manage-element-list-container {
    grid-template-columns: none !important;
}

.drawer-container .drawer-manage-element-list-container--advantage .builder-table-row {
    grid-template-columns: 1fr minmax(80px, auto) [expand] 36px;
}

.drawer-container .drawer-manage-element-list-container--background .builder-table-row {
    grid-template-columns: 1fr minmax(80px, auto) [expand] 36px;
}

.drawer-container .drawer-manage-element-list-container--loresheet .builder-table-row {
    grid-template-columns: 1fr minmax(80px, auto) [expand] 36px;
}

.drawer-container .drawer-manage-element-list-container--advantage .builder-table-row .dots-single-select-tracker {
    min-width: unset !important;
}

.drawer-container .drawer-manage-element-list-container--advantage .builder-table-row .dots-incremental-select {
    min-width: unset !important;
}

.drawer-container .drawer-manage-element-list-container--advantage .builder-table-row .exp-spent-cell {
    display: none !important;
}


.drawer-container .drawer-manage-element-list-container--advantage .builder-table-row .tracker {
    justify-content: flex-end;
}


.exp-cost-value.text-block__text {
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: gray !important;
}

.exp-cost-label.text-block__text {
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: gray !important;
}



.drawer-background-merit-section-table-header.text-block__text {
    text-transform: uppercase;
    font-size: 16px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
    word-spacing: 5px;
    color: gray;
    background: #0d0d0d !important;
    position: relative;
    z-index: 9;
    padding-right: 8px;
}

.drawer-background-merit-section-table-header-container {
    justify-content: space-between;
}

.drawer-background-merit-section-table-header.text-block__text:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - -138px);
    background: #333333;
    position: relative;
    top: -14px;
    right: -72px;
}


.drawer-background-merit-table--empty.text-block__text {
    color: gray;
    margin-top: 8px;
    margin-bottom: 16px;
    text-align: center;
}








/* Loresheets Drawer */


.drawer-container .loresheet-block-label {
    display: none;
}

.drawer-container .loresheet-block-border {
    background: none !important;
    padding: 0px;
    clip-path: none !important;
}

.drawer-container .loresheet-block {
    padding: 0px;
    clip-path: none !important;
    background: transparent;
}

.drawer-container .loresheet-description-block h1 {
    display: none;
}

.drawer-container p.loresheet-subtitle {
    font-size: 14px;
}



/* Humanity Drawer */


.number-tracker-subtract-button {
    background: var(--vtm-red) !important;
    color: white !important;
    border-radius: 1px;
    font-weight: 700;
    font-size: 18px;
    padding: 0px;
    min-width: 40px !important;
    height: 40px !important;
    border: none !important;
}

.number-tracker-add-button {
    background: var(--vtm-red) !important;
    color: white !important;
    border-radius: 1px;
    font-weight: 700;
    font-size: 18px;
    padding: 0px;
    min-width: 40px !important;
    height: 40px !important;
    border: none !important;
}

.drawer-humanity-number-tracker > div:nth-child(2) {
    justify-content: center;
    max-width: 180px;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px;
}

.drawer-humanity-number-tracker {
    max-width: 260px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.number-tracker-inner-label.text-block__text {
    color: white;
    text-transform: uppercase;
    font-size: 14px;
    align-items: center;
    display: flex;
}

.number-tracker-value.text-block__text {
    color: var(--vtm-red);
    text-transform: uppercase;
    font-size: 14px;
    align-items: center;
    display: flex;
}

.drawer-humanity-number-tracker > div:nth-child(2) > div {
    display: flex;
    align-items: center;
}





/* Stats Drawer */

.drawer-stat-component-container {
    padding: 8px;
}

.stat-component-label {
    font-variant: small-caps;
    font-size: 20px;
}

.drawer-stat-breakdown-text p {
    color: #1a2737;
    font-family: 'vendetta';
    font-size: 14px;
}







.mastery-control-button-container .mastery-control-button--selected {
    background: rgb(31, 52, 77);
    filter: none !important;
    border-radius: 0px;
    font-size: 11px;
    color: white !important;
}

.mastery-control-button-container .mastery-control-button {
    filter: none;
    border-radius: 0px;
    font-size: 11px;
    font-weight: 700;
    color: #1f344d;
}


@media screen and (min-width: 1920px) {
  
    .character-sheet-drawer {
        background-color: var(--even-darker-p-color);
        border-radius: 0px !important;
        background-image: none;
        border: 1px solid var(--co-clr-base-2);
        height: calc(100vh - 164px) !important;
        position: sticky !important;
    }


}


.character-sheet-drawer > div:nth-child(3) {
    background-color: var(--even-darker-p-color);
    border-radius: 0px !important;
    background-image: none;
    border: 1px solid var(--co-clr-base-2);
}

.drawer-container {
    font-family: 'vendetta';
    font-size: 20px;
    padding-top: 0px !important;
    height: unset !important;
    color: var(--darker-p-color);
}


.drawer-container .element-display-header-top-row {
    margin-top: 16px;
    margin-bottom: 8px;
}


div#drawer-title-container {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    background: var(--co-clr-base-5);
    color: white;
    padding-left: 16px;
    padding-right: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--co-clr-base-2);
    margin-bottom: 16px;
    position: sticky;
    top: 0px;
    z-index: 99 !important;
}

p.drawer-header__category {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--co-clr-base-2);
    font-family: 'mrs-eaves';
    font-size: 12px;
}

h1.drawer-header__title {
    font-size: 18px;
    font-family: 'MinionPro-Regular';
}

svg.drawer-header__close-icon {
    border: 1px solid var(--co-clr-base-1);
    border-radius: 50%;
    background: var(--co-clr-base-3);
    height: 26px;
    width: 26px;
}

svg.drawer-header__close-icon path {
    color: white;
}

.input-block.drawer-status-search-input {
    min-width: 100%;
}

.drawer-container svg[data-testid="SearchIcon"] {
    color: #cbbd7d;
}




.drawer-section-container .primer-body-container > div:first-child {
    margin-top: 0px;
    padding-left: 8px;
    padding-right: 8px;
    border: none;
    background: transparent;
}


/* Clan Drawer */


.primer-body-container .main-holder > div:nth-last-child(1) {
    display: none;
}

.primer-body-container .main-holder > div:nth-last-child(2) {
    display: none;
}



/* Drawer Grid Rows */



.drawer-container .builder-table-row > div:first-child div {
    font-size: 13px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}


.drawer-container .builder-table-row__expanded .element-display-container-display {
    border: 1px solid var(--co-clr-base-3);
    position: relative;
    left: 2px;
    top: -2px;
    background: var(--darker-p-color);
    padding-top: 8px;
}

.drawer-container .primer-body-container {
    max-width: 339px;
    position: relative;
    left: 2px;
    top: -2px;
}

.drawer-container .display-inner-holder {
  padding: 0px;
  color: #CFCFCF;
}


.sheet-bottom-container > div:first-child div#box-content {
    background: transparent;
    overflow-x: hidden;
    padding-bottom: 48px;
}

.sheet-bottom-container > div:first-child div#box-content > div:first-child {
    gap: 16px;;
}

.sheet-bottom-container > div:first-child div#box-content:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 20px;
    background: linear-gradient(0deg, var(--co-clr-off-white), transparent);
    height: 50px;
    width: calc(100% - 30px);
    pointer-events: none;
    z-index: 9;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}



.drawer-container .grid-table__column button svg {
    color: var(--co-clr-base-2);
}

.drawer-container .grid-table__column button {
    height: 8px;
}

.drawer-container .builder-table-row {
    color: var(--co-clr-off-white);
    line-height: 1.2;
    border-radius: 0px !important;
    border: 1px solid var(--co-clr-base-3);
    background-color: var(--co-clr-base-5);
    position: relative;
    background-repeat: no-repeat;
    background-position: top 3px left 3px, top 3px right 3px;
    background-size: 12px, 12px;
    font-family: 'MinionPro-Regular';
    padding: 0px !important;
    min-height: 44px;
    display: grid !important;
    grid-template-columns: 3fr min-content min-content;
    align-items: center;
    position: relative;
    gap: 2px;
}


.drawer-container .toggle-button__button {
    background: var(--co-clr-off-white);
    color: var(--darker-p-color);
    border: 1px solid var(--co-clr-base-3);
    font-family: 'vendetta';
    font-weight: 700;
    font-size: 11px;
    border-radius: 0px;
    height: 32px;
    box-shadow: none;
    min-width: 64px;
    max-width: 64px;
    white-space: break-spaces;
    line-height: 1;
}

.drawer-container .toggle-button__button:hover {
    background: var(--co-clr-base-3);
    color: white;
    border: 1.5px solid var(--co-clr-base-3);
    filter: brightness(1.2);
    box-shadow: none;
}

.drawer-container .toggle-button__button--active {
    background: var(--co-clr-base-3);
    color: white;
    border: 1.5px solid var(--co-clr-base-3);
}

.drawer-container .toggle-button__button--disabled {
    background: #333333 !important;
}

.drawer-container .builder-table-row > div:first-child {
    padding-left: 16px;
    overflow-wrap: anywhere;
}






.drawer-notes-header-container {
    color: #192736;
    font-variant: small-caps;
    font-size: 14px !important;
    align-items: center;
}

.drawer-notes-header-text {
    font-size: 16px !important;
}

.drawer-compendium-header {
    color: #192736;
    font-variant: small-caps;
    font-size: 16px !important;
    margin-bottom: 4px;
    align-items: center;
}

.drawer.main-holder {
  padding: 0px;
  background: transparent !important;
}

.drawer-inner-holder.inner-holder {
    margin: 0px;
    padding: 0px;
}


/* QR CODE */

.drawer-qr-code-container {
    font-family: 'vendetta';
    color: #CFCFCF;
    text-transform: uppercase;
    font-size: 13px;
    line-height: normal;
    flex-direction: column !important;
}

.drawer-qr-code-container .qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    margin-top: 32px !important;
}

.drawer-qr-code-container .qr-code svg {
    width: 256px !important;
    height: 256px !important;
    padding: 16px;
    border: 1px solid var(--vtm-red);
}





/* END Drawers */



.dice-history-expanded-container .dice-roller-button {
    position: absolute;
    top: 8px;
    right: 8px;
}

.dice-history-reroll-button {
    min-height: 36px !important;
    min-width: unset !important;
    border-radius: 0px !important;
    color: var(--co-clr-base-2);
    background: var(--co-clr-base-5) !important;
    font-family: 'mrs-eaves';
    font-size: 13px;
    width: 88px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at top right, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom right, transparent 0, transparent 6px, black 7px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at top right, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom right, transparent 0, transparent 6px, black 7px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
    padding-top: 12px;
    padding-bottom: 0px;
}

.dice-history-reroll-button:before {
  content: "RESISTANCE";
  position: absolute;
  font-family: 'JMH Typewriter';
  display: block;
  font-size: 8px;
  color: var(--co-clr-base-1);
  top: 4px;
}


.dice-pool-roll-button {
    min-height: 42px !important;
    min-width: unset !important;
    border-radius: 0px !important;
    color: var(--co-clr-base-1);
    font-family: 'mrs-eaves';
    width: 100px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
    cursor: url(https://content.demiplane.com/nexus/candelaobscura/co-dice-T2.svg) 0 20, auto !important;
}

.dice-pool-header-label {
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Quelity-Bold';
    font-size: 14px !important;
}



button.dice-roller-button__button {
    min-height: 48px;
    min-width: 48px !important;
    border-radius: 50%;
    border: 1.5px solid var(--co-frame-border-menu);
    background: var(--co-clr-base-4);
}


.dice-roller.dice-roller--closed {
    flex-direction: row;
    align-items: flex-end;
    column-gap: 8px;
    justify-content: flex-start;
}

.dice-roller-pool.dice-closed-group-list-container {
    flex-flow: row !important;
    max-width: 240px;
    justify-content: flex-start;
    column-gap: 4px;
    width: fit-content;
    overflow: hidden;
    background: var(--marvel-bg-crimson) !important;
    position: relative;
    background-repeat: repeat !important;
    background-position: bottom center !important;
    background-size: 100% auto !important;
    padding: 4px;
    padding-left: 8px;
    padding-right: 40px;
    border: 1px solid var(--co-frame-border-menu);
    position: absolute;
    left: 54px;
    bottom: 8px;
}

.dice-roller-pool.dice-closed-group-list-container:after {
    content: "";
    display: block;
    position: absolute;
    height: 32px;
    width: 48px;
    background: linear-gradient(270deg, var(--marvel-red) 4px, transparent 48px);
    right: 0px;
    top: -1px;
}

.dice-roller-pool.dice-closed-group-list-container .dice-roller-pool__pool-seperator svg {
    color: var(--marvel-red);
    width: 16px;
}

.dice-roller-pool.dice-closed-group-list-container .dice-roller-pool__pool {
    width: fit-content;
}

.dice-roller-pool.dice-closed-group-list-container .dice-roller-pool__pool-seperator {
    display: flex;
}


button.dice-open-button {
    min-height: 48px !important;
    min-width: 48px !important;
    border-radius: 50%;
    border: 1.5px solid var(--co-frame-border-menu);
    background: var(--co-clr-green);
}

button.dice-close-button {
    min-height: 48px;
    min-width: 48px !important;
    padding: 0px !important;
    position: relative;
    border-radius: 50%;
    background: var(--co-clr-green);
    border: 1.5px solid var(--co-frame-border-menu);
}

.dice-roller-button-container {
    align-items: center;
}


p.dice-pool-zero-state-label {
    color: gray;
    font-family: 'Aptifer Sans LT Pro';
    font-size: 12px;
    text-transform: uppercase;
}

.dice-history-top-line-container {
    justify-content: space-between;
}

button.dice-history-re-roll-button {
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Aptifer Sans LT Pro';
    font-size: 11px !important;
    color: var(--vtm-white);
    padding: 0px;
}

button.dice-history-re-roll-button:hover {
    background: transparent !important;
    color: var(--marvel-red);
}

p.dice-roller-pool__pool-label {
    color: var(--co-clr-base-1);
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'mrs-eaves';
    font-weight: 700;
    margin-right: auto;
    line-height: 1;
}

.dice-roller-pool__pool {
    row-gap: 4px !important;
}


.dice-roller-pool__pool-seperator {
    display: none;
}

.dice-roller-dice--active .dice-roller-dice__block {
    border-color: var(--co-clr-base-2);
    background: var(--co-clr-base-5);
}


.dice-roller-grid {
    flex-flow: row !important;
    align-items: center;
    column-gap: 8px;
}

figure.dice-roller-dice__image-block {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-green-die-2.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #2e7476;
}

.dice-roller-dice figure img {
    display: none;
}

.dice-roller-center-container--reroll .dice-roller-button-container {
    justify-content: flex-end;
    color: var(--co-clr-off-white);
}

.dice-roll-button {
    text-transform: uppercase !important;
    font-size: 13px !important;
    height: 42px !important;
    width: 100px;
    min-height: 42px !important;
    line-height: 1 !important;
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--co-clr-base-3) !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: center;
    display: flex !important;
    background-origin: padding-box;
    padding: 8px !important;
    font-weight: 600 !important;
    font-family: 'mrs-eaves';
    justify-content: center !important;
    border-radius: 1px !important;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at top right, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom right, transparent 0, transparent 6px, black 7px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at top right, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom left, transparent 0, transparent 6px, black 7px), radial-gradient(circle at bottom right, transparent 0, transparent 6px, black 7px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
}

p.dice-reroll-text {
    font-family: 'vendetta';
    font-size: 17px;
    line-height: 1;
}

.dice-roller-reroll--from-preview {
    gap: 4px;
}

.dice-reroll-text:before {
    content: "🡅";
    color: var(--co-clr-base-2);
    position: absolute;
    margin-left: -20px;
}

.dice-end-turn-button {
    text-transform: uppercase !important;
    font-size: 13px !important;
    height: 48px !important;
    width: 100px;
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--marvel-red) !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: center;
    display: flex !important;
    background-origin: padding-box;
    padding: 8px !important;
    font-weight: 600 !important;
    font-family: 'Aptifer Sans LT Pro' !important;
    background-size: cover;
    justify-content: center !important;
    letter-spacing: .1em !important;
    text-shadow: 0 2px 10px #000;
    outline: 0.5px solid black !important;
    outline-offset: -4px;
    border-radius: 1px !important;
}




.dice-enter-reroll-state-button {
    padding: 8px !important;
    font-weight: 600 !important;
    font-family: 'Aptifer Sans LT Pro' !important;
    font-size: 13px !important;
    width: 100px !important;
}

.dice-enter-reroll-state-button:hover {
    background: transparent !important;
    color: var(--marvel-red);
}


.dice-cancel-reroll-button {
    padding: 8px !important;
    font-weight: 600 !important;
    font-family: 'mrs-eaves';
    font-size: 14px !important;
    border-radius: 0px !important;
    background: transparent !important;
    color: var(--co-clr-base-2) !important;
}

.dice-cancel-reroll-button:hover {
    color: var(--marvel-red);
    background: none !important;
}

.dice-roller-center-container {
    flex-direction: column !important;
    row-gap: 8px;
    padding: 8px;
    background: var(--even-darker-p-color);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
}

.dice-roller-center-container .dice-pool-container {
    flex-direction: column !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-top-green.jpg?format=webp) !important;
    position: relative;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    background-size: cover !important;
    padding: 8px !important;
    padding-bottom: 16px !important;
    border: 2px ridge var(--co-clr-green);
}

.dice-pool-header-container {
    color: white;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 100% !important;
    margin-bottom: 8px !important;
    height: 24px;
}



.dice-pool-header-container button {
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'mrs-eaves';
    font-size: 13px !important;
    color: var(--co-clr-base-2);
    background: transparent;
}

.dice-pool-header-container button:hover {
    background: none !important;
    filter: brightness(1.2);
}



.dice-roller-dice--gilded figure.dice-roller-dice__image-block {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-gold-die-1.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #cbbd7d;
}

.dice-roller-dice--drive figure.dice-roller-dice__image-block {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-green-die-1.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #2e7476;
}

.history-item-result__die img {
    display: none;
}



.history-item-result__die {
    display: flex;
    flex-direction: column;
    position: relative;
}




.history-item-result > div:nth-child(odd).history-item-result__die figure {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-green-die-1.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #2e7476;
}

.history-item-result > div:nth-child(even).history-item-result__die figure {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-green-die-2.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #2e7476;
}


.dice-history-expanded-container .history-item-result__die--drive:before, .dice-history-expanded-container .history-item-result__die--drive-6:before {
    content: "DRIVE";
    position: absolute;
    color: var(--co-clr-accent-2);
    font-size: 8px;
    top: -18px;
}

.dice-history-expanded-container .history-item-result__die--gilded:before, .dice-history-expanded-container .history-item-result__die--gilded-6:before {
    content: "GILDED";
    position: absolute;
    color: #58ffff;
    font-size: 8px;
    top: -18px;
}

.history-item-result > div:nth-child(odd).history-item-result__die--drive figure, .history-item-result > div:nth-child(odd).history-item-result__die--drive-6 figure {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-green-die-2.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #2e7476;
}

.history-item-result > div:nth-child(even).history-item-result__die--drive figure, .history-item-result > div:nth-child(even).history-item-result__die--drive-6 figure {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-green-die-1.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
    border: 2px outset #2e7476;
}


.dice-history-item-origin {
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    font-size: 12px;
    color: var(--co-clr-base-2) !important;
}


.dice-history-main-container > div:first-child {
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent -10px, black 0px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent -10px, black 0px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
}


.dice-pool-take-lowest-label {
    line-height: normal;
    font-family: 'vendetta';
    margin-top: 12px;
    color: var(--co-clr-base-1);
}

.dice-roller-pool__pool-label {
    font-size: 22px !important;
    font-family: 'Quelity-Bold';
    text-transform: none !important;
    color: var(--co-clr-off-white) !important;
    margin-top: 16px;
}


.history-item-result > div:nth-child(odd).history-item-result__die--gilded figure, .history-item-result > div:nth-child(odd).history-item-result__die--gilded-6 figure {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-gold-die-1.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
        border: 2px outset #cbbd7d;
}

.history-item-result > div:nth-child(even).history-item-result__die--gilded figure, .history-item-result > div:nth-child(even).history-item-result__die--gilded-6 figure {
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/co-gold-die-2.png?format=webp);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    height: 32px !important;
    width: 32px !important;
        border: 2px outset #cbbd7d;
}

.dice-history-item-name--action {
    font-family: 'Quelity-Bold';
    font-size: 20px;
}

.dice-history-item-name-container > div:first-child {
    height: 16px;
    position: relative;
    margin-top: -8px;
    margin-bottom: 8px;
}


/* Dice Critical Display */


.history-item-calculated--Standard {
    display: none;
}

.history-item-calculated--Critical {
    width: 100%;
    background: linear-gradient(0deg, var(--co-clr-green), transparent);
    position: relative;
}

.history-item-calculated--Critical:before {
    content: "";
    width: 30%;
    margin-right: auto;
    border-bottom: 4px dotted var(--co-clr-base-2);
    display: block;
    position: absolute;
    bottom: 8px;
    left: 0px;
    z-index: 0;
}

.history-item-calculated--Critical:after {
    content: "";
    width: calc(30% + 8px);
    margin-left: auto;
    border-bottom: 4px dotted var(--co-clr-base-2);
    display: block;
    position: absolute;
    bottom: 8px;
    right: 0px;
    z-index: 0;
}

.history-item-calculated--Critical p {
    text-transform: uppercase;
    font-family: 'Quelity-Bold';
    position: relative;
    bottom: -8px;
    text-align: center;
    padding-right: 8px;
    font-size: 16px;
    color: var(--co-clr-off-white);
}

.history-item-calculated--Critical p:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-center-divider-left.png?format=webp);
    display: block;
    position: absolute;
    height: 24px;
    width: 30px;
    left: calc(30%);
    top: -2px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  
}


.history-item-calculated--Critical p:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-center-divider-right.png?format=webp);
    display: block;
    position: absolute;
    height: 24px;
    width: 30px;
    right: calc(30% + 8px);
    top: -2px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  
}



/* END */




.circle-resources-wrapper {
    gap: 16px;
}

.drawer-header__sbutitle {
    font-family: 'vendetta';
    font-size: 18px;
    font-style: italic;
    color: var(--co-clr-base-1);
}

.dice-history-item-name--custom-dice-container {
    flex-wrap: nowrap;
}


.dice-history-collapsed-container {
    border-radius: 0px !important;
    background: var(--darker-p-color);
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: 16px;
}

.dice-history-collapsed-container .history-item-result {
    justify-content: flex-end !important;
    display: flex;
}


.history-item-result > div:nth-child(odd).history-item-result__die figure {
    height: 24px !important;
    width: 24px !important;
}

.history-item-result > div:nth-child(even).history-item-result__die figure {
    height: 24px !important;
    width: 24px !important;
}


.history-item-result > div:nth-child(odd).history-item-result__die--gilded figure {
    height: 24px !important;
    width: 24px !important;
}

.history-item-result > div:nth-child(even).history-item-result__die--gilded figure {
    height: 24px !important;
    width: 24px !important;
}



.history-item-result__die figure + p {
    font-family: 'MinionPro-Regular';
    height: 10px;
    line-height: 1;
    margin-top: 2px;
    text-align: center;
}



.dice-roller-dice--1 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-1.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--2 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-2.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--3 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-3.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--4 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-4.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--5 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-5.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--6 figure.dice-roller-dice__image-block:after {
    content: "";
    display: block !important;
    height: 82% !important;
    width: 82% !important;
    position: absolute !important;
    top: 2% !important;
    left: 8% !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/die-6.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}



.dice-roller-dice--gilded.dice-roller-dice--1 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-1-gilded.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--gilded.dice-roller-dice--2 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-2-gilded.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--gilded.dice-roller-dice--3 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-3-gilded.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--gilded.dice-roller-dice--4 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-4-gilded.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--gilded.dice-roller-dice--5 figure.dice-roller-dice__image-block:after {
  content: "";
  display: block !important;
  height: 72% !important;
  width: 72% !important;
  position: absolute !important;
  top: 8% !important;
  left: 14% !important;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-5-gilded.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}

.dice-roller-dice--gilded.dice-roller-dice--6 figure.dice-roller-dice__image-block:after {
    content: "";
    display: block !important;
    height: 82% !important;
    width: 82% !important;
    position: absolute !important;
    top: 2% !important;
    left: 8% !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/die-6-gilded.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99;
    background-repeat: no-repeat !important;
}





.history-item-result__die--1:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-1.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--2:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-2.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--3:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-3.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--4:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-4.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--5:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-5.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--6:after {
    content: "";
    display: block;
    height: 82%;
    width: 82%;
    position: absolute;
    top: 2%;
    left: 8%;
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/die-6.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}


.history-item-result__die--gilded.history-item-result__die--1:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-1-gilded.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--gilded.history-item-result__die--2:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-2-gilded.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--gilded.history-item-result__die--3:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-3-gilded.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--gilded.history-item-result__die--4:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-4-gilded.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--gilded.history-item-result__die--5:after {
  content: "";
  display: block;
  height: 72%;
  width: 72%;
  position: absolute;
  top: 8%;
  left: 14%;
  background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-5-gilded.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.history-item-result__die--gilded.history-item-result__die--6:after, .history-item-result__die--gilded-6.history-item-result__die--6:after {
    content: "";
    display: block;
    height: 82%;
    width: 82%;
    position: absolute;
    top: 3%;
    left: 9%;
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/die-6-g.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}


.dice-roller button:hover {
    filter: brightness(1.2);
    background: var(--co-clr-base-4);
}

.dice-roller-dice--in-pool figure.dice-roller-dice__image-block {
    height: 32px !important;
    width: 32px !important;
    border-width: 2px;
}

.dice-roller-pool {
    row-gap: 12px;
    flex-wrap: wrap !important;
    justify-content: center;
}

.dice-roller-dice__block {
    justify-content: center;
    align-items: center;
    gap: 4px !important;
}

.dice-roller-dice__block p {
    color: #CFCFCF;
    font-family: 'Aptifer Sans LT Pro';
    text-transform: uppercase;
    font-size: 9px;
    line-height: 1.3;
}


.dice-history-main-container {
    gap: 8px;
    flex-direction: column !important;
    color: var(--co-clr-off-white);
}

.dice-history-main-container > div:last-child > div:first-child {
    background: var(--even-darker-p-color) !important;
    border-color: var(--co-clr-base-2);
    row-gap: 12px;
}

p.history-item-static__value {
    font-family: 'mrs-eaves';
    font-size: 18px;
    color: var(--co-clr-base-1);
    text-transform: uppercase;
}

.dice-history-expanded-container {
    border-radius: 0px !important;
    background: #151515 !important;
    border: 1px solid var(--marvel-red);
    padding: 8px;
    position: relative;
    row-gap: 12px;
}

.dice-roller-dice--gilded figure.dice-roller-dice__image-block:after {
    content: "";
    display: block;
    height: 85% !important;
    width: 85% !important;
    position: absolute;
    top: 7% !important;
    left: 8% !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/die-6-g.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    z-index: 99 !important;
    background-repeat: no-repeat !important;
}

.dice-roller-dice figure.dice-roller-dice__image-block:after {
    content: "";
    display: block;
    height: 80%;
    width: 80%;
    position: absolute;
    top: 8%;
    left: 7%;
    background: url(https://content.demiplane.com/nexus/candelaobscura/character/dice/pip-1.png?format=webp);
    background-size: contain;
    background-position: top center;
    z-index: 99;
    background-repeat: no-repeat;
}

.dice-precommit-history-main-container .dice-history-expanded-container {
    margin-bottom: 16px !important;
}

.history-item-calculated__value.dice-history-name {
    font-family: 'LTAuthenticSans';
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: var(--marvel-red);
}

.history-item-result {
    justify-content: flex-start !important;
    row-gap: 16px;
}


.dice-history-expanded-top-container {
    border-color: var(--marvel-red) !important;
}


.history-item-container.dice-history-successes-container {
    gap: 4px;
}

.history-item-result__label {
    font-family: 'Aptifer Sans LT Pro';
    font-size: 14px;
}

.history-item-calculated__value.dice-history-result-label {
    font-family: 'Aptifer Sans LT Pro';
    text-transform: uppercase;
    font-size: 12px;
}


.history-item-static__value.dice-history-successes-label {
    font-family: 'Aptifer Sans LT Pro';
    text-transform: uppercase;
    font-size: 14px;
    color: var(--vtm-pure-white), white;
    font-weight: 700;
    letter-spacing: .5px;
}

.history-item-calculated__value.dice-history-successes-value {
    font-family: 'Aptifer Sans LT Pro';
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
  color: var(--marvel-red);
}





/* Reader Container */


.drawer-container .box-block:after {
    background: var(--co-clr-base-5);
    
}

.drawer-container {
    background: var(--even-darker-p);
    
}

.drawer-container .main-holder ul {
    font-family: 'vendetta';
    font-size: 20px;
    color: var(--co-clr-off-white);
    list-style-type: none;
}

.drawer-container .main-holder h3 {
    color: var(--co-clr-off-white);
    font-size: 18px;
}

.drawer-container .main-holder p {
    color: var(--co-clr-off-white);
    font-size: 20px;
    font-family: 'vendetta';
}

.box-block {
    margin: 16px 0px !important;
    margin-top: 8px !important;
    padding: 24px;
}

.quote p {
    margin: 0px !important;
}

.body-background, .primer-body-container {
    background: transparent !important;
    
}

.main-holder h3 {
    font-family: mrs-eaves;
    color: var(--true-black);
    font-size: var(--font-size-3);
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    font-size: 20px !important;
    letter-spacing: 0px;
}

.parsed-html-block ul {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 24px;
}

.parsed-html-block ul li {
    list-style: none;
}

.parsed-html-block ul li:before {
    content: "";
    width: 12px;
    height: 12px;
    position: relative;
    display: inline-block;
    margin-right: 8px;
    font-size: 20px;
    font-weight: 700;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-diamond-bullet.svg);
}


/* Top Header */



.sheet-header-experience-values {
    justify-content: center;
    font-family: 'vendetta';
    font-weight: 700;
    font-size: 28px;
    color: var(--vtm-red);
}

.sheet-header-experience-remaining-value.text-block__text {
    justify-content: center;
    font-family: 'vendetta';
    font-weight: 700;
    font-size: 28px;
    color: var(--vtm-red);
}

.sheet-header-experience-values > div:nth-child(2) div {
    color: gray;
    font-size: 18px;
    display: flex;
    padding-left: 4px;
}

div#sheet-desktop-header {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 16px;
    padding-right: 16px;
}

.header-character-container {
    gap: 16px;
    max-width: unset !important;
    cursor: pointer;
}

.header-character-name-container {
    margin-top: 12px;
}

.header-character-name-container .text-block__text {
    font-family: Quelity-Bold;
    text-transform: uppercase;
    font-size: 22px;
    color: var(--co-clr-white);
    letter-spacing: 0px;
    font-weight: 700;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0px 0px 6px #010101;
}

.header-character-name-container > .sheet-header-character-subtitle .text-block__text {
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    font-size: 14px !important;
    text-align: left;
    color: var(--co-clr-base-2);
    letter-spacing: 0px;
    font-weight: 700;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0px;
}

.sheet-header-character-dividor {
    color: var(--co-clr-accent-2) !important;
    margin-left: 4px;
    margin-right: 4px;
}

.sheet-header-character-role {
    color: var(--co-clr-base-1) !important;
}

.sheet-header-character-specialty {
    color: var(--co-clr-base-1) !important;
}

.sheet-header-character-subtitle {
    gap: 4px;
}

.header-character-avatar-container {
    flex-basis: 100px !important;
    min-width: 80px;
    margin-left: -12px !important;
}

.sheet-header-experience-container {
    max-width: unset !important;
    cursor: pointer;
}

.sheet-header-experience-container > div:nth-child(1) {
    font-family: 'vendetta';
    font-weight: 700;
    color: gray;
    font-size: 18px;
    display: flex;
    padding-left: 4px;
    cursor: pointer;
}

.sheet-header-experience-container > div:nth-child(1) div {
    cursor: pointer;
}

.sheet-header-experience-container > div:nth-child(2) {
    color: #CFCFCF;
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
}


/* Center Drives Section */



.center-drive--header {
    outline: 2px solid var(--co-clr-base-3);
    background: var(--co-clr-base-3);
    color: white;
    font-family: 'Quelity-Bold';
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 44px;
}

.center-drive-name {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
    padding-left: 16px;
}

.center-drive-tracker--wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 16px;
    position: relative;
    right: -2px;
}

.center-drive-tracker--value-wrapper {
    font-size: 14px;
    color: white;
    padding-right: 8px;
    text-align: right;
    font-family: 'vendetta';
    line-height: 1.2;
}

.bar-tracker-container button {
    background: var(--co-clr-base-4) !important;
    border-radius: 0px !important;
    font-size: 14px !important;
    color: white !important;
    min-width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--co-clr-base-2) !important;
}

.dot-tracker-container button {
    background: var(--co-clr-base-3);
    border-radius: 0px;
    font-size: 14px;
    color: white;
    min-width: 36px !important;
    border: 1.5px solid var(--co-clr-base-2);
}

.bar-tracker-container {
    align-items: center;
    gap: 3px;
    width: fit-content;
    z-index: 1;
}

.center-drive-tracker--value-amount {
    font-size: 14px;
    font-family: 'Quelity-Bold';
}

.tracker.bar-tracker .tracker__item {
    border-radius: 0px !important;
    width: 8px !important;
    background-color: #9D9184;
    border: 1.5px solid var(--co-clr-base-3);
    position: relative;
    top: 0px;
    height: 30px;
}

.tracker.bar-tracker .tracker__item--primary {
    background-color: var(--co-clr-accent-2) !important;
}

.tracker.bar-tracker .tracker__item--tertiary {
    border-radius: 0px !important;
    width: 8px !important;
    background-color: var(--co-clr-base-5) !important;
    border: 1px solid var(--co-clr-base-3) !important;
}


.center-drives--wrapper > div:first-child {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px;
    border: 2px solid var(--co-clr-base-2);
}


.center-drives--wrapper > div:nth-child(2) {
    border: 2px solid var(--co-clr-base-2);
}

.center-drives--wrapper > div:last-child {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px;
    border: 2px solid var(--co-clr-base-2);
}


.center-drives--wrapper > div:first-child:after {
    content: "";
    width: 36px;
    height: 100px;
    position: absolute;
    background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-bl.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    bottom: 8px;
    left: 0px;
}

.center-drives--wrapper > div:last-child:after {
    content: "";
    width: 36px;
    height: 100px;
    position: absolute;
    background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-br.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    bottom: 8px;
    right: -7px;
}

.center-drives--wrapper > div:first-child {
    border-top-left-radius: 28px !important;
}

.center-drives--wrapper > div:first-child > div:first-child {
    border-top-left-radius: 22px !important;
}


.center-drives--wrapper > div:last-child {
    border-top-right-radius: 28px !important;
}

.center-drives--wrapper > div:last-child > div:first-child {
    border-top-right-radius: 22px !important;
}


.center-drive-action-row--wrapper {
    font-family: 'Quelity-Bold';
    line-height: normal;
    margin-top: 8px;
    padding-left: 2px;
    padding-right: 8px;
}

.center-drive-action-row--wrapper > div {
    display: grid !important;
    grid-template-columns: 30px 1fr 90px;
    align-items: start;
}

.center-drive-action-row--wrapper > div > div:last-child {
    display: grid !important;
    cursor: url(https://content.demiplane.com/nexus/candelaobscura/co-dice-T1.svg) 0 20, auto;
}

.dot-tracker {
    flex-wrap: nowrap !important;
    display: flex !important;
    height: 100%;
    width: 82px;
    justify-content: space-between;
    justify-self: center;
    height: fit-content;
    padding-top: 8px;
}

.gilded-tracker {
    grid-column-start: gilded;
    grid-row-start: 1;
    grid-row-end: span 2;
    width: 30px;
    justify-content: center;
    cursor: pointer;
}

.gilded-tracker > div:first-child {
    border-radius: 0px !important;
    height: 14px;
    width: 14px;
}

.center-drive-action--gilded {
    width: 30px;
    align-items: flex-start;
    padding-top: 8px;
}

.tracker__item--tertiary {
    background-color: var(--co-clr-off-white) !important;
    border-radius: 50%;
    border: 1px solid var(--co-clr-base-5);
    position: relative;
    top: 1px;
    height: 20px;
    width: 20px;
}

.tracker__item.tracker__item--primary {
    background-color: var(--co-clr-base-1);
    border-radius: 50%;
    border: 2px solid var(--co-clr-base-2);
    position: relative;
    top: 1px;
    height: 24px;
    width: 24px;
}

.tracker__item.tracker__item--secondary {
    background-color: var(--co-clr-accent-2);
    border-radius: 50%;
    border: 2px solid var(--co-clr-base-2);
    position: relative;
    top: 1px;
    height: 24px;
    width: 24px;
}


.center-drive-action--label-desc {
    font-family: 'vendetta';
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    color: var(--co-clr-base-3);
}

.center-drive-action--label-wrapper {
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.center-drive-action--label-wrapper div {
    pointer-events: none;
}






/* Dice Rolling Pointers */


.center-trait-row--dots-group {
    cursor: url(https://content.demiplane.com/nexus/vampire/add-dice-pointer.svg) 0 20, auto;
}

.center-trait-row--dot-raw-value.text-block__text {
    cursor: url(https://content.demiplane.com/nexus/vampire/add-dice-pointer.svg) 0 20, auto;
}

.header-rouse-button-container button {
    cursor: url(https://content.demiplane.com/nexus/vampire/roll-dice-pointer.svg) 0 20, auto;
}




/* Mobile Menu FAB */
.mobile-menu,
.mobile-menu__close-block {
    border-radius: 50%;
    border: 1.5px solid var(--co-gold); 
}

button.mobile-menu__open-button,
button.mobile-menu__close-button {
    background: var(--co-clr-green);
    color: var(--co-clr-cream);
}

button.mobile-menu__open-button:hover,
button.mobile-menu__close-button:hover {
    background: var(--co-clr-green);
    filter: brightness(1.3);
}

.mobile-menu__drawer .MuiDrawer-paper.MuiDrawer-paperAnchorBottom {
    max-width: max-content;
    padding: 40px;
    margin-left: auto;
    margin-bottom: 50px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-mobile-menu-paper.png?format=webp);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    box-shadow: none;
}

h1.mobile-menu__label {
    font-size: 20px;
    font-family: 'QUELITY-BOLD';
    color: var(--co-clr-base-3);
    position: relative;
}

h1.mobile-menu__label:hover {
    color: var(--co-clr-brass);
}

h1.mobile-menu__label:hover:before,
.mobile-menu__item--active h1.mobile-menu__label:before {
    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 20px;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-eye.png?format=webp);
    background-size: 28px auto;
    background-repeat: no-repeat;
    background-position: top center;
    left: -31px;
    top: 0px;
}
.mobile-menu__item--active h1.mobile-menu__label:before {
        filter: invert(27%) sepia(33%) saturate(255%) hue-rotate(132deg) brightness(50%) contrast(93%);
}


.mobile-menu__item--active h1.mobile-menu__label {
    color: var(--co-clr-green);
}






/* Sheet Edge Flourishes */




.sheet-center-content-container {
    position: relative;
}

.sheet-center-grouping--skills {
    position: relative;
}

.sheet-center-content-container > div:last-child {
    position: relative;
}


@media screen and (min-width: 743px) {
  
      .sheet-center-grouping--attributes:before {
          content: "";
          display: block;
          height: 18px;
          width: 50px;
          position: absolute;
          background-image: url(https://content.demiplane.com/nexus/vampire/sheet-divider-outer-left.png?format=webp) !important;
          background-position: left center;
          background-repeat: no-repeat;
          background-size: contain;
          left: -8px;
          top: -10px;
      }
      
      .sheet-center-grouping--attributes:after {
          content: "";
          display: block;
          height: 18px;
          width: 50px;
          position: absolute;
          background-image: url(https://content.demiplane.com/nexus/vampire/sheet-divider-outer-right.png?format=webp) !important;
          background-position: left center;
          background-repeat: no-repeat;
          background-size: contain;
          right: -16px;
          top: -10px;
      }
      
      .sheet-center-grouping--skills:before {
          content: "";
          display: block;
          height: 18px;
          width: 50px;
          position: absolute;
          background-image: url(https://content.demiplane.com/nexus/vampire/sheet-divider-outer-left.png?format=webp) !important;
          background-position: left center;
          background-repeat: no-repeat;
          background-size: contain;
          left: -8px;
          top: -10px;
      }
      
      .sheet-center-grouping--skills:after {
          content: "";
          display: block;
          height: 18px;
          width: 50px;
          position: absolute;
          background-image: url(https://content.demiplane.com/nexus/vampire/sheet-divider-outer-right.png?format=webp) !important;
          background-position: left center;
          background-repeat: no-repeat;
          background-size: contain;
          right: -20px;
          top: -10px;
      }

}


.sheet-center-grouping--skills + div:before {
    content: "";
    display: block;
    height: 18px;
    width: 50px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/vampire/sheet-divider-outer-left.png?format=webp) !important;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    left: -8px;
    top: -30px;
}

.sheet-center-grouping--skills + div:after {
    content: "";
    display: block;
    height: 18px;
    width: 50px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/vampire/sheet-divider-outer-right.png?format=webp) !important;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    right: -20px;
    top: -30px;
}


.sheet-center-grouping--attributes {
    padding-top: 0px !important;
}


.sheet-center-grouping--attributes .sheet-center-grouping-header:before {
    content: "";
    display: block;
    height: 18px;
    width: 40px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/vampire/sheet-inner-left.png?format=webp) !important;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    left: calc(50% - 73px);
    top: 4.5px;
}

.sheet-center-grouping--attributes .sheet-center-grouping-header:after {
    content: "";
    display: block;
    height: 18px;
    width: 40px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/vampire/sheet-inner-right.png?format=webp) !important;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    right: calc(50% - 81px);
    top: 4.5px;
}




.sheet-center-grouping--skills .sheet-center-grouping-header:before {
    content: "";
    display: block;
    height: 18px;
    width: 40px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/vampire/sheet-inner-left.png?format=webp) !important;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    left: calc(50% - 52px);
    top: 4.5px;
}

.sheet-center-grouping--skills .sheet-center-grouping-header:after {
    content: "";
    display: block;
    height: 18px;
    width: 40px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/vampire/sheet-inner-right.png?format=webp) !important;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    right: calc(50% - 60px);
    top: 4.5px;
}


div#tabs-container:before {
    content: "";
    display: block;
    height: calc(100% - 488px);
    width: 150px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-corner-top-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-corner-bottom-left.png?format=webp) !important;
    background-position: top 8px left 8px, bottom left 8px;
    background-repeat: no-repeat;
    background-size: 150px, 150px;
    z-index: 9;
    left: -16.5px;
    bottom: -8px;
    pointer-events: none;
}

div#tabs-container:after {
    content: "";
    display: block;
    height: calc(100% - 488px);
    width: 150px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-corner-top-right.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-corner-bottom-right.png?format=webp) !important;
    background-position: top 8px right 8px, bottom right 8px;
    background-repeat: no-repeat;
    background-size: 150px, 150px;
    z-index: 9;
    right: -16.5px;
    bottom: -8px;
    pointer-events: none;
}







/* Top Content Container - Drives */






.sheet-center-content-container {
    background: transparent !important;
    color: var(--darker-p-color) !important;
    padding-left: 0px !important;
}


.center-drive--wrapper {
    background: var(--co-clr-off-white);
}

.center-drives--wrapper {
    gap: 16px;
}






.sheet-center-grouping-content-container {
    margin-top: -24px !important;
    padding-top: 16px;
    justify-content: center;
    row-gap: 16px;

}

.sheet-center-grouping-content-container .sheet-box-component {
    padding-right: 16px;
    padding-left: 16px;
    min-width: 300px;
    max-width: 600px;
}


.center-trait-row--attribute-container {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    gap: 8px;
    background: #101010;
    margin-bottom: 4px !important;
    margin-top: 4px !important;
    padding: 4px;
    padding-left: 16px;
    display: grid !important;
    grid-template-columns: 1fr 24px 88px;
}

.sheet-center-grouping--skills .sheet-box-component-content {
    margin-top: 4px;
    background: #101010;
}


.center-trait-row--skill-container {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    column-gap: 8px;
    margin-bottom: 4px !important;
    margin-top: 4px !important;
    padding: 0px;
    padding-left: 16px;
    display: grid !important;
    grid-template-columns: 1fr 24px 88px;
}

.center-trait-row--dot-raw-value.text-block__text {
    color: #c82434;
}

.sheet-box-component-header {
    text-transform: uppercase !important;
    font-size: 16px !important;
    color: gray !important;
}

.center-trait-row--label-group {
    gap: 8px;
    display: grid !important;
    grid-template-columns: max-content min-content min-content;
    align-items: center;
    color: #CFCFCF;
}

span.override-indicator {
    color: var(--vtm-teal);
}

.center-trait-row--dots-group .tracker {
    justify-content: flex-end;
    padding-right: 16px;
    flex-wrap: nowrap;
}

.skill-row-specialty-container {
    grid-column-end: span 3;
}

.skill-row-specialty-container .text-block__text {
    font-family: 'vendetta';
    font-size: 10px;
    line-height: 1.4;
}




/* Skills Expand and Collapse */




.sheet-center-grouping--skills .sheet-center-grouping-content-container--collapsed .skill-row-specialty-container {
    display: none;
}

.sheet-center-grouping--skills .sheet-center-grouping-content-container--collapsed .sheet-box-component-content {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #101010;
    padding-top: 4px;
    padding-bottom: 4px;
}

.sheet-center-grouping--skills .sheet-center-grouping-content-container--collapsed .center-trait-row--skill-container .center-trait-row--dots-group {
    display: none;
}

.sheet-center-grouping--skills .sheet-center-grouping-content-container--collapsed .center-trait-row--skill-container {
    grid-template-columns: 1fr 24px;
}





/* Bottom Center - Health & Willpower Block */


.sheet-center-content-container > div:nth-child(3) {
    margin-bottom: 16px;
    padding-bottom: 4px;
    gap: 24px;
}

span.checkbox-block__checkbox {
    padding: 0px;
}

span.checkbox-block__checkbox path {
    fill: #393636;
}

.sheet-center-content-container > div:nth-child(3) > div {
    width: fit-content;
}

.bottom-row-group--health-willpower > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px;
    align-items: center;
}

.bottom-row-group--humanity-hunger > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px;
    align-items: center;
}

.checkbox-group--humanity {
    width: fit-content;
}

.bottom-row-group--blood-potency-resonance > div {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px;
    align-items: center;
}

.bottom-row-group--blood-potency-resonance > div > div:nth-child(2) {
    font-size: 14px;
    font-family: 'vendetta';
}

.bottom-row-group--blood-potency-resonance > div > div:first-child {
    cursor: pointer;
    color: #CFCFCF;
}

.trait-pool-label-container {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    justify-content: flex-end !important;
    gap: 4px;
    cursor: pointer;
    width: fit-content !important;
    justify-self: end;
}

.trait-pool-label {
    color: #CFCFCF;
}

.trait-pool-label-container div {
    cursor: pointer;
}

.trait-pool-label-value.text-block__text {
    color: var(--vtm-red);
}

.sheet-center-blood-potency--value {
    color: var(--vtm-red);
}

.sheet-center-resonance--value {
    color: var(--vtm-red);
}

.sheet-center-blood-potency--label {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    justify-content: flex-end !important;
    gap: 4px;
    cursor: pointer;
    width: fit-content !important;
    justify-self: end;
}

.sheet-center-resonance--label {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    justify-content: flex-end !important;
    gap: 4px;
    cursor: pointer;
    width: fit-content !important;
    justify-self: end;
}



/* Center Marks Bar */


.center-marks--wrapper {
    background: var(--co-clr-base-3);
    border-radius: 16px;
    color: var(--co-clr-off-white);
    font-family: 'vendetta';
    max-width: 930px !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: -16px !important;
    gap: 16px
}

.center-drives--wrapper > div {
    padding-bottom: 24px;
}

.center-marks--wrapper > div:first-child {
    font-family: 'Quelity-Bold';
    font-size: 22px;
    align-items: center;
    justify-content: center;
}

.center-marks-trackers {
    gap: 32px;
    line-height: normal;
    min-height: 64px;
    align-items: center;
}

.center-marks-trackers > div {
    gap: 12px;
    height: 30px;
    align-items: center;
    width: fit-content;
    margin-right: auto;
}

.center-marks--wrapper > div:last-child {
    font-size: 22px;
    align-items: center;
    justify-content: center;
}

button.center-marks-scars-button.button-component__button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 13px;
    line-height: normal;
    height: 36px;
    border: none;
}

button.center-marks-scars-button.button-component__button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

button.center-marks-scars-button.button-component__button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}




/* Tabs */



.tabs {
    background: transparent;
    position: relative;
    background-repeat: repeat !important;
    background-position: bottom center !important;
    background-size: 100% auto !important;
    padding: 8px !important;
    margin-top: 32px;
    margin-bottom: 8px;
}

.tabs__container {
    overflow-y: hidden;
}

h3.tabs__label {
    font-weight: 400;
    font-size: 28px;
    font-family: 'AntiquarianScribe';
    text-transform: none;
}

div#tabs-container > div:first-child {
    padding-left: 88px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}


.tabs__tab--selected:after {
    content: "";
    height: 26px;
    width: 180px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-edge-divider.svg);
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    left: -21px;
    top: -16px;
    filter: brightness(0.85);
    margin-bottom: -26px;
}

.tabs__tab {
    width: 140px;
    text-align: center;
}

span.checkbox-block__checkbox:hover {
    background-color: inherit !important;
}



.center-drive-resistance-row--wrapper {
    align-items: center;
    font-family: 'vendetta';
    width: fit-content;
    margin: auto;
    gap: 8px;
}





.center-drive-resistance-row--wrapper .checkbox-block__checkbox--active:after {
    border: none !important;
    height: 20px !important;
    width: 20px !important;
    border-radius: 0px !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/res-triangle-white.png?format=webp) !important;
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}



div#character-sheet .center-drive-resistance-row--wrapper .checkbox-block__checkbox--active svg {
    background: url(https://content.demiplane.com/nexus/candelaobscura/res-triangle.png?format=webp) !important;
    height: 20px !important;
    width: 20px !important;
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 0px !important;
}



.center-drive-resistance-row--wrapper .checkbox-block__checkbox svg {
    background: url(https://content.demiplane.com/nexus/candelaobscura/res-triangle-filled.png?format=webp) !important;
    height: 20px !important;
    width: 20px !important;
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 0px !important;
}


.center-drive-resistance-row--tracker > div:not(:last-child) > div:first-child:after {
    content: "";
    height: 2px;
    width: 20px;
    background: var(--co-clr-base-2) !important;
    position: relative;
    left: -9px;
    top: -2px;
    margin-right: -18px !important;
    border-radius: 0px;
}



.center-drive-resistance-row--label {
    font-family: JMH Typewriter;
    font-size: 13px;
}


/* Checkboxes */



span.checkbox-block__checkbox {
  color: transparent !important;
    padding: 4px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.checkbox-block__checkbox svg {
    background: var(--co-clr-off-white);
    height: 16px;
    width: 16px;
    border: 1px solid #333333 !important;
    border-radius: 50%;
}

.checkbox-block__checkbox svg path {
    color: transparent;
    background: transparent;
    fill: transparent;
}

.checkbox-group--humanity .checkbox--disabled svg {
    color: white !important;
    background: #838383 !important;
}

.checkbox-block__checkbox--active:not(.checkbox-block__checkbox--disabled) svg {
    color: white !important;
}

.checkbox--checked-state-1:not(.checkbox-block__checkbox--disabled):after {
    content: "";
    color: var(--vtm-red) !important;
    font-weight: 700;
    font-family: 'vendetta';
    display: flex;
    height: 12px;
    width: 12px;
    background: var(--co-clr-accent-2);
    position: relative;
    background-repeat: repeat !important;
    background-position: bottom center !important;
    background-size: 100% auto !important;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.checkbox-block__checkbox--active:after {
    content: "";
    color: var(--co-clr-base-1);
    font-weight: 700;
    font-family: 'vendetta';
    display: flex;
    height: 12px;
    width: 12px;
    background: var(--co-clr-accent-2);
    border-radius: 50%;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.checkbox-block__checkbox--disabled svg path {
    fill: transparent;
    opacity: 0.5;
}




/* Grid Rows */



.builder-table-row > div:first-child div {
    text-transform: uppercase !important;
    font-weight: 700;
    line-height: 1 !important;
    font-family: 'MinionPro-Regular' !important;
}


.builder-table-row > div:first-child {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 14px;
    padding-left: 16px;
    cursor: pointer;
    line-height: 1;
}

.grid-table__columns {
    margin-bottom: -8px;
}

.builder-table-row {
    background-color: #202020;
    padding: 0px;
    margin: 2px !important;
    min-height: 44px;
    align-items: center;
    border: 1px solid var(--vtm-dark-red);
    cursor: auto;
    display: grid !important;
    grid-template-columns: 1fr min-content;
    gap: 8px;
}


.builder-table-row--expanded {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.disciplines-and-powers-box-component .builder-table-row--collapsed {
    display: grid !important;
    grid-template-columns: [name] minmax(70px, 1fr) [level] 38px [desc] 1fr [expand] 40px;
    background-color: #202020;
    padding: 0px;
    margin: 2px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    min-height: 52px;
    align-items: center;
    border: 1px solid var(--vtm-dark-red);
    cursor: auto;
    gap: 8px;
}

.builder-table-row .text-block__text {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-family: 'vendetta' !important;
    text-transform: none !important;
    font-weight: 400;
    color: var(--co-clr-off-white);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



div#character-sheet .toggle-button__button {
    background: #2b2b2b !important;
    color: #CFCFCF !important;
    font-family: 'vendetta';
    border: 1px solid var(--vtm-red) !important;
    font-weight: 700;
    font-size: 10px;
    height: 32px;
    border-radius: 0px;
    box-shadow: none;
    min-width: 64px !important;
    max-width: 64px !important;
}



div#character-sheet .toggle-button__button:hover {
    background: var(--vtm-red) !important;
}


div#character-sheet .toggle-button__button--active {
    background: var(--vtm-red) !important;
}


div#character-sheet .toggle-button__button--disabled {
    color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}





/* Sheet Bottom */



.circle-sheet-tab-content .sheet-bottom-container:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 30px;
    left: 20px;
    height: 50px;
    width: calc(100% - 30px);
    background: linear-gradient(0deg, var(--co-clr-cream), transparent);
    pointer-events: none;
    z-index: 9;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.sheet-bottom-container {
    background: #010101 !important;
    padding: 16px !important;
    height: calc(100vh - 16px);
    position: relative;
}

.sheet-bottom-container {
    overflow: auto;
}


.sheet-bottom-container .sheet-box-component-content {
    gap: 16px;
    padding-bottom: 40px !important;
}



@media (min-width: 1024px) and (min-height: 1080px) {
  
    .sheet-bottom-container > div:first-child {
        height: calc(100vh - 646px);
    }
  
}

@media (min-width: 1024px) and (max-height: 1079px) {
  
        div#character-sheet div#tabs-container:before {
            content: "";
            display: block;
            height: calc(100% - 515px);
            width: 150px;
            position: absolute;
            background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-corner-top-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-corner-bottom-left.png?format=webp) !important;
            background-position: top 8px left 8px, bottom left 8px;
            background-repeat: no-repeat;
            background-size: 150px, 150px;
            z-index: 9;
            left: -16.5px;
            bottom: 17px;
            pointer-events: none;
        }
        
        div#character-sheet div#tabs-container:after {
            content: "";
            display: block;
            height: calc(100% - 515px);
            width: 150px;
            position: absolute;
            background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-corner-top-right.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-corner-bottom-right.png?format=webp) !important;
            background-position: top 8px right 8px, bottom right 8px;
            background-repeat: no-repeat;
            background-size: 150px, 150px;
            z-index: 9;
            right: -16.5px;
            bottom: 17px;
            pointer-events: none;
        }
        
        
        div#character-sheet .sheet-bottom-container {
            background-color: transparent !important;
            color: var(--darker-p-color);
            padding: 16px !important;
            height: calc(100vh - 16px);
            background-image: linear-gradient(180deg, var(--co-clr-off-white), var(--co-clr-off-white), transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-bottom-varnish.png?format=webp) !important;
            background-position: top center, bottom -50px center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-size: cover, 115% auto !important;
            border: 2px solid var(--co-clr-base-2);
            -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            -webkit-mask-position: top left, top right, bottom left, bottom right;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 51% 51%;
            mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            mask-position: top left, top right, bottom left, bottom right;
            mask-repeat: no-repeat;
            mask-size: 51% 51%;
            margin-bottom: 24px !important;
            overflow: hidden;
        }

        
        div#character-sheet div#tabs-container > div:first-child:after {
            content: "";
            display: block;
            position: absolute;
            bottom: 26px;
            left: 20px;
            background: linear-gradient(0deg, var(--co-clr-cream), transparent);
            height: 50px;
            width: calc(100% - 30px);
            pointer-events: none;
            z-index: 9;
            -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
            -webkit-mask-position: top left, top right, bottom left, bottom right;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 51% 51%;
            mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
            mask-position: top left, top right, bottom left, bottom right;
            mask-repeat: no-repeat;
            mask-size: 51% 51%;
        }
        
        .circle-sheet-tab-content .sheet-bottom-container:after {
              display: none;
        }
        
        div#character-sheet div#abilities-and-gear-tab-content:after {
              display: none;
        }
        
        div#character-sheet .tabs {
            background: url(https://content.demiplane.com/nexus/candelaobscura/mobile-tabs-bg.png?format=webp);
            position: relative;
            background-repeat: no-repeat !important;
            background-position: bottom center !important;
            background-size: 100% auto !important;
            padding: 8px !important;
            margin-top: 32px;
            margin-bottom: 8px;
        }
        
        div#character-sheet .details-tab-content .sheet-bottom-container {
            background-color: transparent !important;
            color: var(--darker-p-color);
            padding: 16px !important;
            height: calc(100vh - 16px);
            background: var(--co-clr-off-white) !important;
            background-position: top center, bottom -20px center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-size: cover, 115% auto !important;
            border: 2px solid var(--co-clr-base-2);
            -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            -webkit-mask-position: top left, top right, bottom left, bottom right;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 51% 51%;
            mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            mask-position: top left, top right, bottom left, bottom right;
            mask-repeat: no-repeat;
            mask-size: 51% 51%;
        }
        
        div#character-sheet .relationships-tab-content .sheet-bottom-container {
            background-color: transparent !important;
            color: var(--darker-p-color);
            padding: 16px !important;
            height: calc(100vh - 16px);
            background-image: linear-gradient(180deg, var(--co-clr-off-white), var(--co-clr-off-white), transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-bottom-relationship.png?format=webp) !important;
            background-position: top center, bottom -20px center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-size: cover, 115% auto !important;
            border: 2px solid var(--co-clr-base-2);
            -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            -webkit-mask-position: top left, top right, bottom left, bottom right;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 51% 51%;
            mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            mask-position: top left, top right, bottom left, bottom right;
            mask-repeat: no-repeat;
            mask-size: 51% 51%;
        }
        
        div#character-sheet .journal-tab-content .sheet-bottom-container {
            background-color: transparent !important;
            color: var(--darker-p-color);
            padding: 16px !important;
            height: calc(100vh - 16px);
            background-image: linear-gradient(180deg, var(--co-clr-off-white), var(--co-clr-off-white), transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-bottom-journal.png?format=webp) !important;
            background-position: top center, bottom -20px center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-size: cover, 115% auto !important;
            border: 2px solid var(--co-clr-base-2);
            -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            -webkit-mask-position: top left, top right, bottom left, bottom right;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 51% 51%;
            mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            mask-position: top left, top right, bottom left, bottom right;
            mask-repeat: no-repeat;
            mask-size: 51% 51%;
        }
        
        div#character-sheet .circle-sheet-tab-content .sheet-bottom-container {
            background-color: transparent !important;
            color: var(--darker-p-color);
            padding: 16px !important;
            height: calc(100vh - 16px);
            background: var(--co-clr-off-white) !important;
            background-position: top center, bottom -20px center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-size: cover, 115% auto !important;
            border: 2px solid var(--co-clr-base-2);
            -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            -webkit-mask-position: top left, top right, bottom left, bottom right;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 51% 51%;
            mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
            mask-position: top left, top right, bottom left, bottom right;
            mask-repeat: no-repeat;
            mask-size: 51% 51%;
        }

  
}


div#relationships-tab-content {
    min-height: 280px;
}


.center-marks--wrapper:after {
    content: "";
    height: 36px;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/sheet-center-divider-middle.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/sheet-center-divider-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/sheet-center-divider-right.png?format=webp);
    background-size: 640px 36px, contain, contain;
    background-position: top center, top left, top right;
    background-repeat: no-repeat;
    width: 700px;
    position: absolute;
    bottom: -63px;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}


div#tabs-container > div:first-child:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 20px;
    background: linear-gradient(0deg, var(--co-clr-cream), transparent);
    height: 50px;
    width: calc(100% - 30px);
    pointer-events: none;
    z-index: 9;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}



.sheet-bottom-container > div:first-child {
      padding: 12px;
      padding-top: 2px;
      padding-right: 8px;
      padding-bottom: 0px;
}




/* Abilities & Gear Section */




.gear-top-holder span.checkbox-block__checkbox svg {
    border-radius: 0px !important;
    rotate: 45deg;
    position: relative;
    height: 12px;
    width: 12px;
}

.gear-top-holder > div:last-child > div label {
    color: var(--co-clr-base-3);
}

.gear-top-holder .checkbox-block__checkbox--active:after {
    content: "";
    color: var(--co-clr-base-1);
    font-weight: 700;
    font-family: 'vendetta';
    display: flex;
    height: 8px;
    width: 8px;
    top: 2px;
    background: var(--co-clr-brass);
    border-radius: 0px;
    rotate: 45deg;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.gear-top-holder > div:last-child > div {
    gap: 4px;
    pointer-events: all !important;
}

.gear-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

div#abilities-and-gear-tab-content div#box-content {
    background: transparent;
    overflow-x: hidden;
    padding-top: 0px;
    padding-bottom: 48px;
}



div#abilities-and-gear-tab-content:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 20px;
    background: linear-gradient(0deg, var(--co-clr-off-white), transparent);
    height: 50px;
    width: calc(100% - 30px);
    pointer-events: none;
    z-index: 9;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}



div#abilities-and-gear-tab-content > div:first-child {
    gap: 36px;
}

.gear-list-wrapper {
    margin-top: 16px;
    gap: 16px;
}

.gear-wrapper {
    display: flex;
    background: var(--co-clr-off-white);
    flex-direction: column;
    color: var(--darker-p-color);
    font-family: 'vendetta';
    font-size: 20px;
    background: var(--co-clr-base-3);
    padding: 16px;
    padding-bottom: 12px;
    border: 1px solid var(--co-clr-base-3);
    line-height: normal;
    row-gap: 8px;
    position: relative;
  -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    cursor: pointer;
}

.gear-wrapper .checkbox-group {
    flex-wrap: wrap;
    gap: 4px;
}

.gear-wrapper.gear--active:after {
    background: var(--co-clr-cream);
}

.gear-wrapper .gear-top-holder div:not(.button-component) {
    align-items: center;
    pointer-events: none;
}

.ability-wrapper .ability-top-holder div:not(.checkbox-block) {
    align-items: center;
}


.gear-wrapper .text-block {
    pointer-events: none;
}

.ability-wrapper .text-block {
    pointer-events: none;
}


.abilities-empty {
    color: var(--co-clr-base-2);
    font-family: 'vendetta';
    font-size: 20px;
    font-weight: 700;
}

.gear-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-off-white);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.gear-list-wrapper .gear-remove button {
    background: var(--co-clr-base-1);
    border-radius: 50%;
    height: 24px;
    padding: 0px;
    min-width: 24px;
    color: var(--co-clr-base-3);
    font-family: 'Quelity-Bold';
    font-size: 14px;
    font-weight: 700;
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
}

.gear-empty {
    color: var(--co-clr-base-2);
    font-family: 'vendetta';
    font-size: 20px;
    font-weight: 700;
}

.gear-list-wrapper .gear-remove button:hover {
    filter: brightness(1.2);
    border-color: var(--co-clr-base-3);
    background-color: var(--co-clr-accent-3);
    color: white;
}

.gear-wrapper > div:first-child + div {
    border-top: 1px solid var(--co-clr-base-2);
    padding-top: 8px;
    pointer-events: none;
    width: 100%;
}

.gear-type,
.gear-wrapper .circle-gear {
    font-size: 19px;
    font-style: italic;
    font-family: 'vendetta';
    color: var(--darker-p-color);
    font-weight: 400;
    padding-right: 8px;
    gap: 3px
}

.gear-wrapper .circle-gear {
    display: flex;
}

.gear-wrapper > div:first-child > div:first-child {
    font-family: MinionPro-Regular;
    margin-top: -6px;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    color: var(--co-clr-base-3);
    display: grid;
    grid-template-columns: minmax(190px, 1fr) .5fr 70px;
    gap: 8px;
    align-items: center;
    padding-right: 8px;
}



/* In Use Button */


.gear-wrapper button.gear--in-use-button {
    width: 74px;
    height: 28px !important;
    position: absolute;
    top: 4px;
    right: 3px;
    padding-top: 8px;
    font-size: 11px;
    font-family: 'vendetta' !important;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent 0px, black 0px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent 0px, black 0px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.gear-wrapper button.gear--in-use-button.gear-selected {
    background: var(--co-clr-base-1);
}

.gear-wrapper button.gear--in-use-button:hover {
    background: var(--co-clr-base-1) !important;
    filter: none !important;
}

.gear-wrapper button.gear--in-use-button.gear-selected:hover {
    background: var(--co-clr-base-3) !important;
    color: transparent;
}

.gear-wrapper button.gear--in-use-button.gear-selected:hover:after {
    content: "Unselect";
    color: white;
    position: absolute;
    padding-right: 2px;
}







.gear-wrapper > div:first-child > div:first-child > div:first-child {
    padding-top: 2px;
    pointer-events: none;
}

.gear-wrapper > div:first-child {
    gap: 8px;
}



.abilities-list-wrapper {
    color: black;
    margin-top: 16px;
    margin-bottom: 8px;
    font-family: 'vendetta';
    font-size: 20px;
    gap: 16px;
}

.drawer-container label {
    color: var(--co-clr-base-1);
}

.ability-wrapper {
    background: var(--co-clr-base-3);
    padding: 16px;
    padding-bottom: 12px;
    border: 1px solid var(--co-clr-base-3);
    line-height: normal;
    row-gap: 8px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
    cursor: pointer;
    color: var(--darker-p-color);
}


.ability-wrapper > div:first-child + div {
    border-top: 1px solid var(--co-clr-base-2);
    padding-top: 8px;
}


.ability-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-off-white);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.gear-header-amount {
    font-size: 16px;
    color: var(--co-clr-base-2);
    padding-top: 1px;
}


.ability-name {
    font-family: MinionPro-Regular;
    font-weight: 700;
    font-size: 17px;
    color: var(--co-clr-base-3);
    line-height: 1;
}

.ability-source {
    font-size: 19px;
    font-style: italic;
    width: unset;
}

.ability-top-holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: -6px;
}

.ability-top-holder > div:first-child {
    flex-flow: row;
    justify-content: space-between;
}

.ability-wrapper > div:first-child > div:first-child > div:first-child {
    padding-top: 2px;
}

.ability-source + div {
    border-top: 1px solid var(--co-clr-base-2);
    padding-top: 8px
}

.abilities-header-wrapper {
    color: var(--darker-p-color);
    display: grid;
    grid-template-columns: 1fr max-content;
    font-size: 22px;
    font-family: 'Quelity-Bold';
    align-items: center;
}

.gear-header-wrapper {
    color: var(--darker-p-color);
    display: grid;
    grid-template-columns: min-content 1fr max-content max-content min-content;
    gap: 8px;
    font-size: 22px;
    font-family: 'Quelity-Bold';
    align-items: center;
}

.abilities-header-wrapper .abilities-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    right: 8px;
}

.abilities-header-wrapper .abilities-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.abilities-header-wrapper .abilities-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}


.gear-header-wrapper .gear-header-button button.manage-button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-3) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-empty-button-m.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    right: 8px;
}

.gear-header-wrapper .gear-header-button button.manage-button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-empty-button-l.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.gear-header-wrapper .gear-header-button button.manage-button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-empty-button-r.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

button.reset-button {
    font-size: 13px !important;
    color: var(--co-clr-base-3) !important;
}

button.reset-button:hover {
    color: var(--co-clr-brass) !important;
    background: transparent;
}


.gear-uses-label {
    font-size: 15px;
    text-transform: uppercase;
}

.ability-extra-info-label {
    margin-left: 4px;
    font-size: 18px;
    font-weight: 700;
}


/* Relationships Section */



.no-relationship-label {
    font-size: 22px;
    font-family: 'vendetta';
    text-align: center;
    margin-top: 24px;
}


div#relationships-tab-content .grid-block > .button-component {
    margin: auto !important;
}


div#relationships-tab-content  > div:first-child {
    gap: 16px;
}

div#relationships-tab-content button:not(.icon-component__button) {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    right: 8px;
    left: 8px;
}

.relationship-remove-button {
    justify-content: center;
    display: flex;
}

.relationship-remove-button button {
    height: 28px;
    border: 1px solid var(--co-clr-base-3);
    width: 64px;
    border-radius: 0px;
}

.relationship-remove-button button svg {
    display: none;
}

.relationship-remove-button button:after {
    content: "Remove";
    color: var(--darker-p-color);
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    font-size: 13px;
    position: absolute;
}

.relationship-remove-button button:hover {
    background: var(--co-clr-off-white);
}

div#relationships-tab-content button:not(.icon-component__button):before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

div#relationships-tab-content button:not(.icon-component__button):after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.relationship-row-container {
    flex-direction: column;
    row-gap: 16px;
    background: var(--co-clr-base-2);
    border: 1.5px solid var(--co-clr-base-2);
    padding: 16px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
}

.relationship-row-container:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: rgb(241 229 214);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at top right, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom left, transparent 0, transparent 10px, black 11px), radial-gradient(circle at bottom right, transparent 0, transparent 10px, black 11px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}





/* Details Section */



.input-block__input .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary:has(input[readonly]) {
    background: transparent !important;
}

.details--illumination-keys {

    gap: 16px;
    background: var(--co-clr-base-3);
    padding: 16px;
    position: relative;
}

.details--illumination-keys input {
    color: var(--co-clr-off-white) !important;
}

.details--illumination-keys {
      background-image: linear-gradient(90deg, var(--co-clr-base-5) 30%, transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-ik-bg.png?format=webp) !important;
    background-size: 1200px !important;
    background-position: top left, top -180px left !important;
    background-repeat: no-repeat !important;
    background-color: var(--co-clr-base-5);
    border: 1px solid var(--co-clr-base-4);
}

.details--illumination-keys label {
    color: var(--co-clr-base-1) !important;
}

div#details-tab-content div input[readonly] {
    background: var(--co-clor-off-white) !important;
    font-size: 20px;
    font-family: 'vendetta';
    font-weight: 700;
    color: var(--co-clr-off-white) !important;
}

div#details-tab-content input[readonly] + fieldset {
    border: none !important;
    background: transparent !important;
}

div#details-tab-content .divider-block hr {
    padding-top: 0px;
    width: calc(100% - 32px);
    margin-left: 16px !important;
    margin-bottom: 8px !important;
    height: 28px;
    margin: 0px 0px 0px 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-eye-middle-long.png?format=webp);
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 900px;
    border: none !important;
}

div#details-tab-content .divider-block hr:before {
    content: "";
    display: block;
    height: 16px;
    width: 32px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-eye-left.png?format=webp);
    position: absolute;
    top: 3px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

div#details-tab-content .divider-block hr:after {
    content: "";
    display: block;
    height: 16px;
    width: 32px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-eye-right.png?format=webp);
    position: absolute;
    top: 3px;
    right: 0px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}


div#details-tab-content > div:first-child {
    gap: 16px;
}

div#details-tab-content > div:first-child > div:first-child {
    gap: 16px;
}


div#details-tab-content div {
    gap: 16px;
}


/* Journal Section */


button.journal-container__delete {
    background: var(--co-clr-maroon) !important;
    left: 0px !important;
    right: 0px !important;
}

button.journal-container__delete:before {
    display: none !important;
}

button.journal-container__delete:after {
    display: none !important;
}

.drawer-container .journal-container {
    color: var(--co-clr-off-white);
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px;
    position: relative;
    line-height: normal;
    letter-spacing: normal;
    gap: 8px;
}

.drawer-container .journal-container__delete-container {
    position: absolute;
    top: calc(100% + 16px);
}

.drawer-container .journal-container__content-title-container {
    margin-top: 16px !important;
}

.drawer-container .journal-container__last-modified-label {
    font-family: 'mrs-eaves';
    line-height: normal;
    letter-spacing: normal;
}

.drawer-container .journal-container__loading-container {
    margin-left: 0px;
    background: linear-gradient(0deg, var(--co-clr-base-3), transparent);
}

.drawer-container .journal-container__loading-container img {
    filter: invert(68%) sepia(26%) saturate(62%) hue-rotate(347deg) brightness(121%) contrast(92%);
}

.journal-container {
    padding-left: 16px;
    padding-right: 16px;
    color: var(--darker-p-color);
    font-family: 'vendetta';
    font-size: 20px;
    flex-direction: column;
    flex-wrap: nowrap;
}

.journal-container__loading-container {
    margin-left: -48px;
    background: linear-gradient(0deg, var(--co-clr-off-white), transparent);
}

.journal-container__loading-container > div:first-child {
    background: #ffffff00;
}

.journal-container__loading-container > div:first-child img {
    filter: invert(68%) sepia(26%) saturate(62%) hue-rotate(347deg) brightness(121%) contrast(92%);
}

.journal-container__no-results {
    text-align: center;
    margin-top: 32px;
    color: var(--darker-p-color);
    font-family: vendetta;
    line-height: normal;
    letter-spacing: normal;
    font-size: 18px;
    text-shadow: 0px 0px 6px var(--co-clr-accent-2);
}

.journal-container .grid-table__columns {
    grid-template-columns: 1fr 150px 1fr;
    color: var(--co-clr-base-2);
    margin-top: 16px;
    gap: 16px;
}

.journal-container .grid-table__columns > div:first-child {
    padding-left: 16px;
}

.journal-container .grid-table-row__block {
    grid-template-columns: 1fr 150px 1fr;
    gap: 16px;
    border: 2px solid var(--co-clr-base-2) !important;
    border-radius: 0 !important;
    background: var(--co-clr-base-2) !important;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
    z-index: 0;
    min-height: 55px;
    font-family: 'vendetta';
    color: var(--darker-p-color);
}

.journal-container .grid-table-row__block:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-off-white);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.journal-container .grid-table-row__block:hover {
    translate: 1px 1px;
}

.journal-container .grid-table-row__block:hover:after {
    background: var(--co-clr-white);
}

.journal-container .grid-table-row__block > div:first-child {
    font-family: 'MinionPro-Regular';
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    width: unset;
    padding-left: 16px;
}

.journal-container .grid-table-row__block > div {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    font-weight: 400;
    width: unset;
    text-transform: none;
    pointer-events: none;
    color: var(--darker-p-color);
}

.journal-container .grid-table-row__block > div p {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    font-weight: 400;
    width: unset;
    text-transform: none;
    pointer-events: none;
    color: var(--darker-p-color);
}

.journal-container .grid-table-row__block .text-block__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
    color: var(--darker-p-color);
}


.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-fullWidth.MuiInputBase-formControl {
    border-radius: 0px;
}


.journal-container button:not(.icon-component__button):not(.grid-table__column button) {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    right: 8px;
    left: 8px;
    box-shadow: none !important;
}

.journal-container button:not(.icon-component__button):not(.grid-table__column button):hover {
    filter: brightness(1.2);
}

.journal-container button:not(.icon-component__button):not(.grid-table__column button):before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.journal-container button:not(.icon-component__button):not(.grid-table__column button):after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}







/* Circle Sheet Section */




.circle-advancement-builder-button {
    margin-top: 16px;
}




.circle--resources-wrapper {
    gap: 16px;
}

.circle--resources-wrapper > div:not(:first-child) {
    border: 2px solid var(--co-clr-base-2) !important;
    border-radius: 0 !important;
    background: var(--co-clr-base-2) !important;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
    z-index: 0;
    min-height: 55px;
    font-family: 'MinionPro-Regular';
    color: var(--darker-p-color);
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.circle--resources-wrapper > div:not(:first-child):after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-white);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 9px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 9px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.circle--resources-wrapper > div:not(:first-child) > div:first-child {
    font-family: 'MinionPro-Regular';
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-left: 16px;
}

.circle--resources-wrapper > div:not(:first-child) > div:first-child + div {
      gap: 12px;
    height: 30px;
    align-items: center;
    width: fit-content;
    padding-right: 24px
}

.circle-abilities-header {
    justify-content: space-between !important;
    align-items: center;
}

.circle-abilities-wrapper,
.circle-abilities-list {
    gap: 16px;
    align-items: center;
}

.circle-gear-wrapper,
.circle-gear-list {
    gap: 16px;
    align-items: center;
}

.circle--advancement-wrapper + div {
    gap: 24px;
}

.circle--advancement-wrapper + div > div {
    gap: 24px;
}


div#circle-sheet-tab-content {
    color: var(--darker-p-color);
    font-family: vendetta;
    font-size: 20px;
    line-height: normal;
    padding: 16px;
    padding-top: 0px;
}

div#circle-sheet-tab-content > div:first-child {
    gap: 36px;
}

div#circle-sheet-tab-content > div:first-child > div {
    gap: 16px;
}

div#circle-sheet-tab-content > div:first-child > div > div {
    gap: 16px;
}

div#circle-sheet-tab-content > div:first-child > div > div > div {
    gap: 16px;
}

.circle--resources-wrapper > div:first-child {
    flex-flow: row;
    gap: 4px;
    font-weight: 700;
    font-size: 18px;
    color: var(--co-clr-base-3);
    text-transform: uppercase;
}

.circle--resources-wrapper > div:first-child .text-block {
    cursor: pointer;
}

.circle-abilities-label {
    font-weight: 700;
    font-size: 18px;
    color: var(--co-clr-base-3);
    text-transform: uppercase;
}

.circle-advancement-label {
    font-weight: 700;
    font-size: 18px;
    color: var(--co-clr-base-3);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.circle-gear-label {
    font-weight: 700;
    font-size: 18px;
    color: var(--co-clr-base-3);
    text-transform: uppercase;
}

.circle-gear-header {
    justify-content: space-between;
    align-items: center;
}


.builder-button__button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1);
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

.builder-button__button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.builder-button__button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}



/*.dot-tracker-center-container .tracker__item {*/
/*    position: absolute;*/
/*    top: 51%;*/
/*    left: 51%;*/
/*    width: 14px;*/
/*    height: 14px;*/
/*    margin: -8px;*/
/*    line-height: 10px;*/
/*}*/

.bar-tracker-container button {
    background: var(--co-clr-base-4) !important;
    border-radius: 0px !important;
    font-size: 14px !important;
    color: white !important;
    min-width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--co-clr-base-2) !important;
}

div#circle-sheet-tab-content .dot-tracker-container button {
    background: var(--co-clr-base-1);
    border-radius: 0px;
    font-size: 16px;
    color: var(--co-clr-base-3);
    min-width: 28px !important;
    height: 28px;
    border: 1.5px solid var(--co-clr-base-2);
}


.circle--advancement-wrapper {
    display: grid !important;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    position: relative;
    padding-bottom: 36px;
    margin-bottom: 24px;
}

.circle--advancement-wrapper:after {
    content: "";
    display: block;
    max-width: 600px;
    width: 100%;
    height: 28px !important;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-eye-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-eye-right.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-eye-middle.png?format=webp);
    background-size: 40px auto, 40px auto, auto 100%;
    background-repeat: no-repeat;
    background-position: top 4px left, top 4px right, top center;
    position: absolute;
    margin: 0 !important;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    bottom: -20px;
}

.circle--advancement-details {
    gap: 12px;
}

.circle--advancement-details > div:first-child {
    font-family: 'Quelity-Bold';
    font-size: 20px;
    justify-content: space-between;
    align-items: center;
}

/*

div#circle-sheet-tab-content .circle--advancement-manage-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    min-width: 130px;
}

div#circle-sheet-tab-content .circle--advancement-manage-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

div#circle-sheet-tab-content .circle--advancement-manage-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


div#circle-sheet-tab-content .abilities-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

div#circle-sheet-tab-content .abilities-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

div#circle-sheet-tab-content .abilities-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


div#circle-sheet-tab-content .gear-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

div#circle-sheet-tab-content .gear-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

div#circle-sheet-tab-content .gear-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

*/

.circle--advancement-label {
    font-weight: 700;
    font-size: 18px;
    color: var(--co-clr-base-3);
}

.circle--advancement-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.tracker--value-wrapper {
    font-size: 20px;
    font-family: 'vendetta';
    line-height: 1;
}


.drawer-header {
    font-family: 'Quelity-Bold';
    color: var(--co-clr-base-1);
}


.header-button-block {
    display: grid !important;
    grid-template-columns: min-content 1fr max-content;
    gap: 16px;
    font-family: 'vendetta';
    font-size: 20px;
}


.drawer-container .empty-state-text {
    font-size: 20px;
    font-family: 'vendetta';
    color: var(--co-clr-base-2);
}




/* Bottom Section Backgrounds */


.sheet-bottom-container {
    background-color: transparent !important;
    color: var(--darker-p-color);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: linear-gradient(180deg, transparent 0px, var(--co-clr-off-white) calc(0%), rgb(1 1 1 / 0%) 100%, transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-bottom-varnish.png?format=webp) !important;
    background-position: top center, bottom -50px center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, 115% auto !important;
    border: 2px solid var(--co-clr-base-2);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}


.relationships-tab-content .sheet-bottom-container {
    background-color: transparent !important;
    color: var(--darker-p-color);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: linear-gradient(180deg, transparent 0px, var(--co-clr-off-white) calc(0%), rgb(1 1 1 / 0%) 100%, transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-bottom-relationship.png?format=webp) !important;
    background-position: top center, bottom -20px center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, 115% auto !important;
    border: 2px solid var(--co-clr-base-2);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}


.details-tab-content .sheet-bottom-container {
    background-color: transparent !important;
    color: var(--darker-p-color);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: linear-gradient(180deg, transparent 0px, var(--co-clr-off-white) calc(0%), rgb(1 1 1 / 0%) 100%, transparent) !important;
    background-position: top center, bottom -20px center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, 115% auto !important;
    border: 2px solid var(--co-clr-base-2);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.journal-tab-content .sheet-bottom-container {
    background-color: transparent !important;
    color: var(--darker-p-color);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: linear-gradient(180deg, transparent 0px, var(--co-clr-off-white) calc(0%), rgb(1 1 1 / 0%) 100%, transparent), url(https://content.demiplane.com/nexus/candelaobscura/co-bottom-journal.png?format=webp) !important;
    background-position: top center, bottom -20px center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, 115% auto !important;
    border: 2px solid var(--co-clr-base-2);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.circle-sheet-tab-content .sheet-bottom-container {
    background-color: transparent !important;
    color: var(--darker-p-color);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: linear-gradient(180deg, transparent 0px, var(--co-clr-off-white) calc(0%), rgb(1 1 1 / 0%) 100%, transparent) !important;
    background-position: top center, bottom -20px center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, 115% auto !important;
    border: 2px solid var(--co-clr-base-2);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at top right, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom left, transparent 0, transparent 30px, black 31px), radial-gradient(circle at bottom right, transparent 0, transparent 30px, black 31px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}





/* Items & Inventory */



.inventory-box-component .builder-table-row {
    grid-template-columns: 2fr 1fr [remove] 32px;
}

.inventory-box-component .builder-table-row .icon-component {
    grid-column-start: remove;
}

.sheet-bottom-container .inventory-box-component .sheet-box-component-content > div:nth-child(2) {
    gap: 0px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.sheet-bottom-container .inventory-box-component .sheet-box-component-content > div:nth-child(2) > .grid-table__columns {
    display: none;
}


.sheet-bottom-container .inventory-box-component .sheet-bottom-section-header-container {
    grid-template-columns: 1fr max-content;
    display: grid;
}

.sheet-bottom-container .inventory-box-component .sheet-box-component-content > div:nth-child(3) {
    grid-column-end: span 2
}

.inventory-box-component .builder-table-row > div:nth-child(2) {
    justify-self: flex-start;
}


.inventory-box-component svg.icon-component__icon {
    border: 1px solid var(--vtm-dark-red);
    border-radius: 50%;
    background: #101010;
    height: 20px;
    width: 20px;
}

.inventory-box-component svg.icon-component__icon path {
    fill: #101010;
}

.inventory-box-component .icon-component__button:after {
    border-radius: 50%;
    content: "";
    color: var(--vtm-red) !important;
    font-weight: 700;
    font-family: 'vendetta';
    display: flex;
    height: 12px;
    width: 12px;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-x-icon.png?format=webp) !important;
    position: relative;
    background-repeat: repeat !important;
    background-position: bottom center !important;
    background-size: 100% auto !important;
    position: absolute;
    justify-content: center;
    align-items: center;
    filter: grayscale(1);
}

.inventory-box-component .icon-component__button:hover:after {

    filter: none !important;
}





/* Disciplines & Powers */




.disciplines-and-powers-inner-container {
    gap: 8px;
}

.sheet-discipline-accordion .accordian__summary {
    color: white;
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    display: grid;
    grid-template-columns: 1fr 36px;
    padding: 0px;
    min-height: 56px;
    margin-bottom: -8px;
}

.sheet-discipline-accordion .accordian__summary > div:first-child {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 16px;
    justify-items: start;
    min-height: 44px;
    margin: 0px;
}


.sheet-discipline-accordion .accordian__details {
    color: #CFCFCF;
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    padding: 0px;
}

.sheet-discipline-accordion .accordian__details .builder-table-row {
    display: grid;
    grid-template-columns: [name] minmax(220px, .5fr) [rouse] 1fr [roll] 1fr [desc] 2fr [level] 36px;
    gap: 16px;
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(1) {
    grid-column-start: name;
    grid-row-end: span 2
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(2) {
    grid-column-start: level;
    grid-row-end: span 2
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(3) {
    grid-column-start: desc;
    grid-row-end: span 2;
    grid-row-start: 1;
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(3) div {
    font-weight: 400;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-family: 'vendetta' !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sheet-discipline-accordion .accordian__details .grid-table-row {
    margin-top: 4px;
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:first-child > div:first-child {
    text-transform: uppercase !important;
    font-weight: 700;
}

.sheet-discipline-subheader {
    text-transform: uppercase;
    font-size: 16px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
    color: gray;
    position: relative;
    z-index: 9;
    padding-right: 8px;
    text-shadow: 0 0 16px #101010;
}

.sheet-discipline-inner-table--ritual .sheet-discipline-subheader:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 72px);
    background: #333333;
    position: relative;
    top: -12px;
    right: -72px;
}

.sheet-discipline-inner-table--ceremony .sheet-discipline-subheader:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 106px);
    background: #333333;
    position: relative;
    top: -12px;
    right: -106px;
}

.sheet-discipline-inner-table--formula .sheet-discipline-subheader:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 92px);
    background: #333333;
    position: relative;
    top: -12px;
    right: -92px;
}

.sheet-discipline-inner-table--power .sheet-discipline-subheader:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 204px);
    background: #333333;
    position: relative;
    top: -12px;
    right: -204px;
}



.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(5) div {
    font-weight: 700;
    color: var(--vtm-red);
}



.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(3) {
    grid-column-start: desc;
    grid-row-end: span 2;
    grid-row-start: 1;
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(4) {
    grid-column-start: rouse;
    grid-row-end: span 2;
    grid-row-start: 1;
}

.sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(5) {
    grid-column-start: roll;
    grid-row-end: span 2;
    grid-row-start: 1;
}




.sheet-discipline-accordion .accordian__component {
    background: transparent !important;
}

.sheet-discipline-accordian > .accordian__summary {
    background: #010101 !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--vtm-dark-red) !important;
    display: grid;
    grid-template-columns: 1fr 36px;
}

.sheet-discipline-accordian > .accordian__summary {
    background: #010101 !important;
    text-transform: uppercase;
    border-bottom: 1px solid #68111a !important;
}

.sheet-discipline-table-row--container > .accordian__summary > div:first-child {
    font-size: 14px !important;
    font-family: 'vendetta' !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: normal !important;
    display: grid;
    color: #CFCFCF;
    grid-template-columns: min-content 1fr;
    gap: 16px;
}

.sheet-discipline-table-row--name-container {
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.sheet-discipline-table-row--name-container div {
    cursor: pointer;
}


.sheet-discipline-table-row--container > .accordian__summary > div:first-child .dots-tracker {
     justify-self: flex-start;
}

.sheet-discipline-accordian .accordian__details {
    background: #010101;
}



/* Advantages & Flaws */



.sheet-advantage-table-header.text-block__text {
    text-transform: uppercase;
    font-size: 16px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
    color: gray;
    position: relative;
    z-index: 9;
    padding-right: 8px;
}


.sheet-advantage-table-container--merit .grid-table__columns {
    grid-template-columns: 2fr 1.2fr .5fr;
}

.sheet-advantage-table-container--merit .builder-table-row {
    grid-template-columns: 2fr 1fr .5fr;
    padding-right: 16px;
}

.sheet-advantage-table-container--background .builder-table-row {
    grid-template-columns: 2fr max-content;
    padding-right: 16px;
}

.sheet-advantage-table-container--loresheet .builder-table-row {
    grid-template-columns: 2fr max-content;
    padding-right: 16px;
}


.sheet-advantage-table-container--merit .sheet-advantage-table-header--container:after {
    content: "";
    display: block;
    height: 0.5px;
    left: 64px;
    width: calc(100% - 130px);
    background: #333333;
    position: absolute;
}

.sheet-advantage-table-container--background .sheet-advantage-table-header--container:after {
    content: "";
    display: block;
    height: 0.5px;
    left: 124px;
    width: calc(100% - 190px);
    background: #333333;
    position: absolute;
}

.sheet-advantage-table-container--loresheet .sheet-advantage-table-header--container:after {
    content: "";
    display: block;
    height: 0.5px;
    left: 106px;
    width: calc(100% - 172px);
    background: #333333;
    position: absolute;
}



.sheet-advantage-table-header--container {
    align-items: center;
    position: relative;
}







/* TEMP */


.sheet-center-content-container {
    background: #101010;
    color: #CFCFCF;
}

.sheet-bottom-container {
    background: #101010;
    color: white;
}

.sheet-center-content-container {
  z-index: 10;
}


/* END TEMP */






/* General */



.center-trait-row--label.text-block__text {
    cursor: pointer;
    line-height: 1.5;
}

.header-character-name-container > div {
    cursor: pointer;
}



button.button-component__button {
    font-family: 'mrs-eaves';
    font-weight: 700;
    font-size: 11px;
    border-radius: 0px;
    height: 32px;
    box-shadow: none;
    min-width: 48px;
}

button.button-component__button:hover {
    filter: brightness(1.2);
}


.add-button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    right: 8px;
    margin-left: 16px;
}

.add-button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.add-button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}



.manage-button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-3) !important;
    font-family: 'mrs-eaves' !important;
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-empty-button-m.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    letter-spacing: 0px;
    line-height: normal;
    border: none;
    right: 8px;
    margin-left: 16px;
}

.manage-button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-empty-button-l.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.manage-button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-empty-button-r.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}


.manage-button:hover {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    border: none;
    right: 8px;
    margin-left: 16px;
}

.manage-button:hover:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.manage-button:hover:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}





.entitlement_loading {
    height: 48px;
    background-image: url(https://content.demiplane.com/nexus/vampire/spinner.svg);
    background-position: center;
    background-size: auto 90%;
    background-repeat: no-repeat;
    border: none !important;
    filter: brightness(0) saturate(100%) invert(21%) sepia(76%) saturate(4584%) hue-rotate(344deg) brightness(82%) contrast(88%);
}

.builder-header-template__mobile .badge-component .icon-button + span {
    background: #0770a2;
    border: 1px solid #99bce2;
    color: white;
}

.builder-middle-column .builder-table-row > div {
    cursor: pointer;
}

.builder .main-holder p {
  padding: 0px;
}

.builder h3 {
    font-size: 26px;
    font-family: var(--font-cormorant);
    margin-top: 24px;
    margin-bottom: 8px !important;
}

.builder h3 + p {
    margin-top: 0px;
}

.grid-table__sort-block {
    flex-direction: column !important;
}


.divider-block hr {
    border-bottom: 1px solid var(--co-clr-base-3);
    padding-top: 8px;
    width: 100%;
    margin: 0px 0px 8px 0px;
}

.builder-left-column .button-component .button-component__button--disabled {
    filter: none !important;
}

button.begin-or-sheet-button.button-component__button--disabled {
    filter: none !important;
}


.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiPaper-root.MuiMenu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper {
    border-radius: 0px;
    min-width: unset !important;
}


/* 
.MuiList-root.MuiList-padding.MuiMenu-list li {
    font-family: 'vendetta';
    font-size: 20px;
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    line-height: 1.2;
}

ul:not(.profile-menu) > .MuiList-root.MuiList-padding.MuiMenu-list li:hover {
    background-color: var(--co-clr-base-2);
    color: white;
}

*/



/* Firefox Scrollbars */

@supports(-moz-appearance:none) {
    
        div {
          scrollbar-width: thin;
        }
        
        
        .builder-left-column {
            scrollbar-color: #757d89 #1c2a3d !important;
        }
        
        .builder__left-paper {
          scrollbar-width: none;
        }
        
        .builder__center-paper {
          scrollbar-width: none;
        }
        
        .builder__right-paper {
          scrollbar-width: none;
        }
        
        .builder-right-column {
          scrollbar-width: none;
        }

}


div#character-sheet-scrollbar::-webkit-scrollbar {
    display: block;
    width: 8px;
}

div#character-sheet-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--co-clr-base-2);
  z-index: 99;
}







.rare-asterisk {
    font-family: GandhiSansBold !important;
    font-size: 18px;
    top: -1px;
    position: relative;
    line-height: 1;
}



.grid-table-row__block--disabled {
    filter: grayscale(1) brightness(1.5) opacity(0.35) !important;
}

.builder-left-column .grid-table-row__block--disabled {
    filter: none !important;
}


.header-character-name-container .character-menu-icon {
    flex-basis: max-content;
    min-width: 16px;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-character-menu-icon.png?format=webp) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 8px;
    margin-right: 16px;
}


.builder-middle-column .icon-button {
    max-width: 24px;
    justify-content: center;
    display: flex;
}

.builder-middle-column .icon-component__button {
    max-width: 24px;
    justify-content: center;
    display: flex;
}


.sheet-background:before {
    content: "";
    width: 100%;
    height: 240px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-top-green.jpg?format=webp), linear-gradient(180deg, #0f181a 370px, rgba(255, 255, 255, 0) 370px) !important;
    background-position: top 0px center, top center !important;
    background-repeat: no-repeat !important;
    background-size: 1980px, cover !important;
}



@media screen and (max-width: 767px) {
    
    .sheet-background:before {
        display: none;
    }
    
}



.sheet-background {
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-page-body.jpg?format=webp) !important;
    background-blend-mode: screen !important;
    background-size: cover !important;
    background-position: top 240px center !important;
    background-repeat: no-repeat !important;
}

.MuiStepConnector-vertical.Mui-completed span {
    border-color: #6db16d !important;
}


div#builder-three-column-grid {
    column-gap: 24px;
}

.scroll-component-grid::-webkit-scrollbar {
    display: block;
    width: 8px;
}

.scroll-component-grid::-webkit-scrollbar-thumb {
    background-color: #252525;
}



.builder-left-column::-webkit-scrollbar {
    display: block;
    width: 8px;
}

.builder-left-column::-webkit-scrollbar-thumb {
    background-color: #252525;
}


/*
.button-component .button-component__button--disabled {
      filter: grayscale(1) opacity(0.35) !important;
}

*/

div#generic-right-content-container .drawer-inner-holder.inner-holder {
    padding-bottom: 0px !important;
}




button.element-block__clamp-button {
    font-size: 11px;
    font-weight: 700;
    border-top: 1px solid #c82434;
    border-radius: 0px;
    font-family: 'vendetta';
    color: #CFCFCF;
}


.grid-table__pagination {
    justify-content: center;
}

.grid-table__pagination button {
    color: var(--co-clr-base-1);
    font-family: 'Quelity-Bold';
}

button.MuiPaginationItem-previousNext {
    background: var(--co-clr-green);
    color: white;
}

.grid-table-pagination__item--selected {
    background: var(--co-clr-base-4) !important;
    color: white !important;
}




/* Show More / Collapse */


.show-more__expand-button {
    border-radius: 0px !important;
    font-size: 11px !important;
    color: #e3e8ed !important;
    font-family: 'vendetta' !important;
    font-weight: 700 !important;
    padding: 4px !important;
    padding-left: 8px !important;
    border: none !important;
    background: transparent !important;
    text-shadow: 0px 0px 20px #192736;
}

.show-more__expand-block {
    background: linear-gradient(360deg, #192736 0%, rgba(32, 32, 32, 0) 100%) !important;
}

.show-more__collapse-button {
    border-radius: 0px !important;
    font-size: 11px !important;
    color: #e3e8ed !important;
    font-family: 'vendetta' !important;
    font-weight: 700 !important;
    padding: 4px !important;
    padding-left: 8px !important;
    border: none !important;
    background: transparent !important;
    text-shadow: 0px 0px 20px #192736;
}


/* END Show More */





/* Purchase Dialog */

.purchase-modal .MuiDialog-paper {
    max-width: 380px;
    border: 2px solid var(--co-clr-base-2) !important;
    border-radius: 0 !important;
    background: var(--co-clr-base-2) !important;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
}

.purchase-modal .MuiDialog-paper:after {
    content: "";
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-off-white);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.purchase-modal h2.purchase-modal__title {
    color: #fff;
    font-size: 20px;
    background: var(--co-clr-base-5);
    content: "";
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 100%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right;
    mask-repeat: no-repeat;
    mask-size: 51% 100%;
    z-index: 1;
    font-family: Quelity-Bold;
}

.purchase-modal div.purchase-content__title {
    margin-top: 16px;
    font-size: 18px;
    font-family: vendetta;
    color: var(--darker-p-color);
}

.purchase-modal p.purchase-content__meta-description {
    margin-top: 8px;
    font-size: 17px;
    font-family: vendetta;
    color: var(--darker-p-color);
}

.purchase-content__product-name {
    color: #202020 !important;
    font-size: 16px !important;
}

.purchase-content__price {
    color: var(--co-lighter-p);
    font-family: JMH Typewriter;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 32px;
}

.purchase-modal div.purchase-content__actions-block {
  margin-bottom: 8px;
  justify-content: center;
}

button.purchase-content__add-to-cart {
    background: #388e3c;
    color: white;
    font-size: 12px;
    border-radius: 0px;
    padding-left: 12px;
    padding-right: 12px;
    border: 1px solid #cbbd7d;
    box-shadow: none;
}

button.purchase-content__add-to-cart:hover {
    filter: brightness(1.2);
    box-shadow: none;
}

button.purchase-content__cancel {
    font-size: 12px;
    border-radius: 0px;
    background: transparent;
    box-shadow: none;
    color: var(--co-lighter-p);
    
}

button.purchase-content__cancel:hover {
    box-shadow: none;
    background: var(--co-clr-accent-3);
    color: var(--co-clr-white);
}



/* RESPONSIVE Additions */



@media screen and (min-width: 1024px) and (max-width: 1599px) {


    div#builder-techniques-center-text-container + div {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .grid-block.techniques-session-switch-container {
        justify-content: center !important;
    }
    
    .techniques-mastery-counts-container div {
        justify-content: center !important;
    }
    
    .builder-growth-middle-section > div:first-child {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
      

}

@media screen and (min-width: 663px) and (max-width: 824px) {


    div#builder-techniques-center-text-container + div {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .grid-block.techniques-session-switch-container {
        justify-content: center !important;
    }
    
    .techniques-mastery-counts-container div {
        justify-content: center !important;
    }
    
    .builder-growth-middle-section > div:first-child {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
      

}

@media screen and (max-width: 499px) {


    div#builder-techniques-center-text-container + div {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .grid-block.techniques-session-switch-container {
        justify-content: center !important;
    }
    
    .techniques-mastery-counts-container div {
        justify-content: center !important;
    }
    
    .builder-growth-middle-section > div:first-child {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    
    .inventory-box-component .builder-table-row > div:nth-child(2) {
        display: none;
    }
      


}



@media screen and (max-width: 1599px) {
  
  
  .builder-middle-column div#playbook-middle-content-container .grid-table-row__block {
    grid-template-columns: 3fr max-content max-content !important;
  }
  
  .builder-middle-column div#playbook-middle-content-container .grid-table-row__block > div:nth-child(2) {
    display: none;
  }
  
  .builder-middle-column div#playbook-middle-content-container .grid-table__columns > div:nth-child(2) {
    display: none;
  }
  
  div#playbook-selected-middle-header-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  

}


@media screen and (max-width: 1400px) {
  
  div#getting-started-button-container > div:first-child button {
    width: 250px !important;

  }
  
  
  .header-name-holder > div:nth-child(2) {
      font-size: 32px !important;
  }
  
  .builder-header {
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      max-width: 350px !important;
      align-content: stretch !important;
      margin-left: 16px !important;
  }
  
  
    div#generic-right-content-container .generic-techniques-table .builder-table-row > div:nth-child(2) {
        display: none;
    }
    
    div#generic-right-content-container .generic-techniques-table .grid-table__columns > div:nth-child(2) {
        display: none;
    }
    
    div#generic-right-content-container .generic-techniques-table .builder-table-row {
        grid-template-columns: 3fr 1fr 24px !important;
        padding-right: 12px;
    }
    
    div#builder-right-column-content-grid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .builder-right-column {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    div#builder-three-column-grid > div:nth-child(2) > div:first-child {
        padding-left: 8px !important;
        padding-right: 0px !important;
    }
  
  
}


  
@media screen and (max-width: 1023px) {



    .sheet-discipline-accordion .accordian__details .builder-table-row {
        grid-template-columns: [name] minmax(220px, .5fr) [rouse] 1fr [roll] 1fr [desc] 0fr [level] 36px;
    }
    
    .sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(3) {
        display: none;
    }

    .sheet-center-grouping-content-container {
        flex-wrap: wrap !important;
    }
    
    .sheet-center-content-container > div:nth-child(3) {
        flex-wrap: wrap !important;
    }
 
     div#builder-right-column-content-grid div#generic-right-content-container .main-holder {
        padding-left: 0px;
        padding-right: 0px;
    }
 
     .builder__right-drawer-header {
        background: #192736;
        margin-bottom: 8px;
        border-bottom: 4px double #cbbd7d;
        justify-content: flex-start !important;
    }
    
    .builder__right-drawer-header svg {
        background-color: transparent !important;
        color: transparent;
        border: none !important;
    }
    
    .builder__right-drawer-header button {
        width: 100px;
        border-radius: 0px !important;
    }
    
    .builder__right-drawer-header button:after {
        content: "< Back";
        font-family: 'vendetta';
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 700;
        position: absolute;
        width: 60px;
        left: 16px;
    } 
  
    .builder__right-drawer-paper {
        background-color: #e3e8ed !important;
    }
  
  div#builder-three-column-grid > div:nth-child(2) {
    max-width: 640px;
  }
  
  div#builder-three-column-grid {
      padding-left: 16px;
      padding-right: 8px;
  }
  
  div#builder-three-column-grid > div:nth-child(2) {
    min-width: unset !important;
  }
  
  
  .builder__right-drawer-header + div#right-column-template > div:first-child > div:first-child > div:first-child {
      margin-bottom: 8px !important;
      margin-top: 8px !important;
  }
  
}


/*SMALL TABLET*/

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sheet-center-content-container > div:last-child {
      flex-direction: column-reverse;
  }
  
  .center-drive--wrapper {
    max-width: 352px !important;
    position: relative;
  }

  .center-drives--wrapper {
    flex-wrap: wrap !important;
    justify-content: center;
  }
  
  .center-marks--wrapper {
        margin-top: 0px !important;
        margin-bottom: 12px;
  }
  
  .center-drives--wrapper > div:first-child:after {
        bottom: -60px;
        left: -2px;
  }
  
  .center-drives--wrapper > div:last-child:after {
      display: none;
  }
  
  .center-drives--wrapper > div:nth-child(2):after {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-br.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        bottom: -60px;
        right: -8.5px;
    }
    
    .center-drives--wrapper > div:nth-child(2) {
        border-top-right-radius: 28px !important;
        border-bottom-right-radius: 30px;
    }
    
    .center-drives--wrapper > div:nth-child(2) > div:first-child {
        border-top-right-radius: 22px !important;
    }
    
    .center-drives--wrapper > div:last-child {
        border-bottom-left-radius: 30px;
    }
    
    .center-drives--wrapper > div:last-child > div:first-child {
        border-radius: 0 !important;
    }
    
    div#tabs-container:after,
    div#tabs-container:before {
        height: calc(100% - 800px);
    }
}



@media screen and (max-width: 767px) {
    
    .sheet-background {
        background-position: top center !important;
    }
    
     div#drawer-title-container {
        max-width: 510px;
        padding-right: 24px !important;
        width: calc(100% + 32px) !important;
    }
    
    .character-sheet-drawer > div:nth-child(3):after {
        max-width: 500px;
        width: 100%;
    }

    div#sheet-desktop-header {
        display: none;
    }
    
    .header-character-container {
        padding-left: 20px;
        display: grid;
        grid-template-columns: 80px 1fr;
    }
    
    .mobile-bottom-content {
        padding: 8px;
        padding-bottom: 140px;
        padding-top: 24px !important;
    }
    
    .mobile-header-button-holder {
        border-top: 1px solid var(--co-gold);
        border-bottom: 1px solid var(--co-gold);
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
    }
    
    .mobile-header-button-holder .button-component:not(:last-child) {
        border-right: 1px solid var(--co-gold);
    }
    
    .mobile-header-button-holder .mobile-header-button {
        font-size: 15px;
        width: 100%;
        color: var(--co-clr-base-1);
        height: 40px;
        line-height: normal;
    }
    
    .sheet-header-container {
        padding: 4px 0 0 !important;
        margin: 4px 0 0 !important;
        gap: 16px;
        align-items: center;
        background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-top-green.jpg?format=webp), linear-gradient(180deg, #0f181a 370px, rgba(255, 255, 255, 0) 370px) !important;
        background-position: top 0px center !important;
        background-repeat: no-repeat !important;
        background-size: auto 100% !important;
        border-radius: 0 !important;
        height: auto !important;
    }
    .header-character-name-container {
        margin-top: 8px;
    }
    
    .sheet-center-grouping--skills .sheet-center-grouping-header {
        margin-top: -30px;
        position: relative;
    }
  
    .tab-content-container--mobile .sheet-center-grouping--attributes + div {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 16px;
    }
    
    .tab-content-container--mobile .sheet-center-grouping--attributes + div div {
        width: auto;
    }
    
    .center-drive--wrapper {
        max-width: 600px !important;
      }
      
      .center-drives--wrapper {
        align-items: center;
        gap: 16px;
      }
    
    .center-drives--wrapper > div {
        padding-bottom: 12px;
    }
    
    .center-drives--wrapper > div:first-child {
        border-bottom-left-radius: 0px !important;
        border-top-right-radius: 28px !important;
        position: relative;
            
    }
    
    .center-drives--wrapper > div:first-child > div:first-child {
        border-top-right-radius: 22px !important;
    }
    
    .center-drives--wrapper > div:last-child {
        border-bottom-left-radius: 28px !important;
        border-top-right-radius: 0px !important;
        position: relative;
    }
    
    .center-drives--wrapper > div:last-child > div:first-child {
         border-top-right-radius: 0px !important;
    }
    
    .center-drives--wrapper > div:first-child:after {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-tl.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        top: -21px;
        left: -2px;
    }
    
    .center-drives--wrapper > div:first-child:before {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-tr.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        top: -21px;
        right: -8px;
    }
    .center-drives--wrapper > div:last-child:after {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-bl.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        bottom: -38px;
        left: -2px;
    }
    
    .center-drives--wrapper > div:last-child:before {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/sheet-top-br.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        bottom: -38px;
        right: -8px;
    }
    
    div#abilities-and-gear-tab-content:after {
        display: none;
    }
    
    .gear-header-amount {
        font-size: 20px;
    }
    
    .journal-container .grid-table__columns,
    .journal-container .grid-table-row__block {
        grid-template-columns: 1fr 80px 1fr;
    }

    .journal-container__header-input-container {
        max-width: 75% !important;
    }
    .journal-container__new-container {
        max-width: 30% !important;
        flex-basis: 22%;
    }
    
    .circle--advancement-wrapper {
        display: flex !important;
        flex-direction: column;
    }
}

  

@media screen and (max-width: 664px) {
  
  
    .mobile-bottom-content .sheet-box-component-content {
        gap: 16px;
        margin-top: 16px;
    }
  
    .sheet-header-experience-container {
        grid-column-start: exp;
        grid-row-start: top;
    }

    .popover-display__popover .grid-block.builder-header {
        background: #192736;
        padding: 8px;
        margin-left: 0px !important;
        gap: 8px;
        border: 1px solid #cbbd7d;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 16px;
    }
    
    .builder__left-drawer > div:nth-child(3) {
        background: url(https://content.demiplane.com/nexus/avatarlegends/sidebar-bg.jpg?format=webp);
        position: relative;
        background-repeat: repeat;
        padding-bottom: 24px;
        background-color: rgb(54 73 99) !important;
    }
    
    .builder__left-drawer .builder-left-column {
        background-image: none;
    }
  
    .builder-header-template__mobile {
        gap: 8px !important;
    }
    
    div#builder-three-column-grid > div:nth-child(2) {

        min-height: calc(100% + 32px) !important;
        max-height: calc(100% + 32px) !important;

    }
    
    div#builder-header-grid > div:first-child {
        max-height: 80px;
        min-height: 80px;
        justify-content: flex-start;
    }
    
    div#top-header-grid {
        justify-content: space-between;
        margin-bottom: 16px;
    }
    
    div#builder-header-grid {
        justify-content: flex-start;
    }
    
    .builder-header-template__mobile .text-block__text {
        color: #e3e8ed;
        font-family: 'Komikazoom';
        font-size: 22px;
        letter-spacing: 1px;
        font-weight: 400;
        line-height: .9;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .builder-header-template__mobile .icon-button__button {
        padding: 0px !important;
    }
    
    .builder-header-template__mobile svg {
        border-radius: 50%;
        height: 54px;
        width: 54px;
        background-color: rgb(31, 52, 77) !important;
        color: #e3e8ed;
        border: 1px solid #cbbd7d;
        background: url(https://content.thethedemiplane.com/nexus/avatarlegends/builder-menu-icon.svg);
        background-size: auto 50%;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .builder-header-template__mobile svg path {
      display: none;
    }
    
    .builder-header-template__mobile .popover-display__button {
        background: url(https://content.demiplane.com/nexus/avatarlegends/circle-frame.png?format=webp);
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        color: #e3e8ed;
        height: 60px;
        width: 60px;
        font-size: 12px;
    }


} 
  
  


@media screen and (max-width: 599px) {
  

    .sheet-discipline-accordion .accordian__details .builder-table-row {
        grid-template-columns: [name] minmax(160px, .5fr) [rouse] 0fr [roll] 2fr [desc] 0fr [level] 36px;
    }

    .sheet-discipline-accordion .accordian__details .builder-table-row > div:nth-child(4) {
        display: none;
    }
    
    .background-table .builder-table-row {
        grid-template-columns: 5fr min-content min-content min-content !important;
    }
    
    .backgrounds .grid-table__column:nth-of-type(2) {
        display: none;
    }
    
    .background-table .builder-table-row > div:nth-child(2) {
        display: none;
    }  
  
  
}




@media screen and (max-width: 499px) {

    .sheet-concept-section-container--details .sheet-concept-section-content-container > div {
        grid-column-end: span 2;
    }
    
    .sheet-concept-section-container--beliefs .sheet-concept-section-content-container > div {
        grid-column-end: span 2;
    }
    
    .sheet-concept-section-container--coterie .sheet-concept-section-content-container > div {
        grid-column-end: span 2;
    }

}
  
  
  
/* END Responsive */



label.MuiFormControlLabel-root.switch-block__switch-control p {
    font-family: 'vendetta';
    font-size: 20px;
}

label.MuiFormControlLabel-root.switch-block__switch-control {
    padding-left: 8px;
}


.drawer-container .grid-table__column {
    color: var(--co-clr-base-2);
}


/* Gilded Drawer */

.gilded-drawer-top {
    padding-left: 2px;
}

.action--label-name {
    font-family: 'Quelity-Bold';
}

.drawer-container .gilded-drawer-top .tracker {
    align-items: flex-start;
    padding-top: 2px;
    padding-left: 2px;
}

.action--wrapper {
    line-height: normal;
    margin-bottom: 16px;
}

.action--label-desc {
    font-style: italic;
    font-size: 22px;
}


/* Unentitled */


.grid-table-row__not-entitled button {
    background: #467346;
    border: 1px solid var(--co-clr-accent-2);
    color: var(--co-clr-white);
    font-size: 11px !important;
    padding: 4px;
    font-family: 'vendetta';
    font-weight: 700;
    border-radius: 0px;
    height: 32px;
    box-shadow: none;
    min-width: 64px;
    max-width: 64px;
    text-transform: uppercase;
    position: relative;
    right: -1px;
}

.grid-table-row__not-entitled button svg {
    height: 10px;
    width: 10px;
    position: relative;
    top: -1.5px;
    margin-right: 2px;
    color: #CFCFCF;
}

.grid-table-row__not-entitled button:hover {
    background: #467346;
    filter: brightness(1.1);
    box-shadow: none;
}

.element-block__not-entitled button {
    margin-top: 16px;
    background: #467346;
    border: 1px solid #CFCFCF;
    color: #CFCFCF;
    font-size: 10px !important;
    padding-top: 6px !important;
    padding: 4px;
    padding-right: 8px;
    font-family: 'vendetta';
    font-weight: 700;
    border-radius: 0px;
    height: 32px;
    box-shadow: none;
    min-width: 64px;
    max-width: 220px;
}

.element-block__not-entitled button svg {
    height: 16px;
    width: 16px;
    position: relative;
    margin-right: 2px;
    top: -1px;
    color: #CFCFCF;
}

.element-block__not-entitled button:hover {
    filter: brightness(1.1);
    background: #467346;
    box-shadow: none;
}

.grid-table-row__not-entitled {
    justify-content: flex-end;
    display: flex;
}

.grid-table-row__not-entitled:last-of-type {
    min-width: 44px;
}



.builder-table-row__expanded .element-display-container-display .element-block__not-entitled button {
    background: #467346;
    border: 1px solid #cbbd7d;
    color: #e3e8ed;
    font-size: 10px !important;
    padding-top: 6px !important;
    padding: 4px;
    padding-right: 8px;
    font-family: 'vendetta';
    font-weight: 700;
    border-radius: 0px;
    height: 32px;
    box-shadow: none;
    min-width: 64px;
    max-width: 64px;
    margin-bottom: 16px;
}

.builder-table-row__expanded .element-display-container-display .element-block__not-entitled button svg {
    height: 12px;
    width: 12px;
    position: relative;
    top: -1px;
    margin-right: 2px;
    color: #cbbd7d;
}

.builder-table-row__expanded .element-display-container-display .element-block__not-entitled button:hover {
    filter: brightness(1.1);
    background: #467346;
    box-shadow: none;
}

.builder-table-row__expanded .element-display-container-display .element-block__not-entitled:before {
    content: "Visit the Marketplace to Unlock This Content";
    display: block;
    margin-bottom: -8px;
    margin-top: 16px;
    color: rgb(31, 52, 77);
    font-family: 'vendetta';
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
}

.builder-table-row__expanded .element-display-container-display .element-block__not-entitled {
    flex-direction: column;
}




/* Confirmation Dialog */


.confirmation-modal .MuiDialog-paper {
    max-width: 480px;
    border: 2px solid var(--co-clr-base-2) !important;
    border-radius: 0 !important;
    background: var(--co-clr-base-2) !important;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    position: relative;
}

.confirmation-modal .MuiDialog-paper:after {
    content: "";
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-off-white);
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.advancement-add-modal .MuiDialog-paper:after {
    background: var(--co-clr-green) !important;
}

.advancement-add-modal h2.confirmation-modal__title {
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-top-green.jpg?format=webp) !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}


.confirmation-modal h2.confirmation-modal__title {
    color: var(--co-clr-base-1);
    text-transform: uppercase;
    font-size: 22px;
    font-family: Quelity-Bold;
    font-weight: 700;
    font-variant: none;
    padding-bottom: 8px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 100%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right;
    mask-repeat: no-repeat;
    mask-size: 51% 100%;
    z-index: 1;
    background: var(--co-clr-base-4);
}

.confirmation-modal h2.confirmation-modal__title svg {
    color: #fff;
}

.confirmation-modal div.confirmation-modal__content-block {
    margin-top: 16px;
    font-size: 19px;
    font-family: 'vendetta';
    color: var(--darker-p-color);
    padding: 16px;
    padding-top: 0px;
    line-height: normal;
    font-weight: 700;
}

.confirmation-modal__content-block .text-block:first-child {
    margin-bottom: 12px;
}

.confirmation-modal div.confirmation-modal__actions-block {
  margin-bottom: 12px;
  position: relative;
}

.confirmation-modal__actions-block.advancement-add-modal-actions:before {
    content: "";
    display: block;
    width: 90%;
    height: 100%;
    max-width: 600px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-eye-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-eye-right.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-eye-middle.png?format=webp);
    background-size: auto 18px, auto 18px, 500px;
    background-repeat: no-repeat;
    background-position: top left, top right, top center;
    position: absolute;
    margin: 0 !important;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}



.journal-container__delete-button {
    background-color: var(--co-clr-base-1);
    border-radius: 1px;
    max-width: 240px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: top center;
    position: relative;
    font-size: 15px;
    min-height: 40px;
    box-shadow: none;
}

.journal-container__delete-button:hover {
    filter: brightness(1.2) !important;
    box-shadow: none;
}

.journal-container__delete-button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.journal-container__delete-button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}



.journal-container__cancel-button {
    font-size: 13px;
    border-radius: 0px;
    font-family: 'mrs-eaves';
    font-weight: 700;
    min-height: 40px;
    box-shadow: none;
    text-transform: uppercase;
    background: transparent;
    color: var(--co-clr-base-4);
    border: none;
}

.journal-container__cancel-button:hover {
    color: var(--co-clr-white);
    background-color: var(--co-clr-accent-3);
    box-shadow: none;
}



.confirmation-modal div.confirmation-modal__actions-block > div:first-child {
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.advancement-add-modal .MuiDialog-paper {
    max-width: 600px !important;
}

.advancement-add-modal .MuiDialog-paper:after {
    background: var(--even-darker-p-color);
}
.advancement-add-modal-title {
    border-bottom: 2px solid var(--co-clr-base-2);

}


/* Input Blocks */



.drawer-container .input-block label {
    color: var(--co-clr-base-1);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    font-family: 'mrs-eaves';
    position: absolute;
    top: -28px;
    left: -12px;
    margin-top: 0px !important;
    min-width: calc(100%);
}

.drawer-container .input-block {
    padding: 0px;
    margin-top: 32px;
}

.input-block {
    align-items: center;
    display: flex;
    width: 100%;
}

div#character-sheet input {
    font-size: 13px;
    font-weight: 400;
    font-family: 'JMH Typewriter';
    color: var(--darker-p-color) !important;
    background: var(--co-clr-white);
    padding: 4px 8px;
}


.infinite-grid-table__filter-block .input-block {
    margin-top: 0px !important;
}

.right-content-container--character-properties > .grid-block {
    gap: 16px;
}

div#global-search-input-container {
    height: unset;
}

.input-block {
    align-items: center;
    display: flex;
    width: 100%;
    margin-top: 20px;
}

div#character-sheet .input-block label {
    color: var(--co-clr-base-4);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
    font-family: 'mrs-eaves';
    position: absolute;
    top: -44px;
    left: -12px;
}

div#character-sheet .input-block__input textarea {
    font-family: 'JMH Typewriter';
    letter-spacing: 0px;
    line-height: normal;
    color: var(--darker-p-color);
    font-size: 13px;
}

.drawer-container .MuiOutlinedInput-notchedOutline {
    border: 1px solid var(--co-clr-base-2) !important;
}

div#character-sheet .MuiOutlinedInput-notchedOutline {
    border: 1px solid var(--co-clr-base-2) !important;
}


div#character-sheet input {
    font-size: 13px;
    font-weight: 400;
    font-family: 'JMH Typewriter';
    color: var(--darker-p-color);
    background: var(--co-clr-off-white);
    padding: 4px 8px;
    min-height: 28px;
}

div#character-sheet input {
    font-size: 13px;
    font-weight: 400;
    font-family: 'JMH Typewriter';
    color: var(--darker-p-color) !important;
    background: var(--co-clr-white);
    padding: 4px 8px;
}

div#character-sheet input::placeholder {
    font-family: 'JMH Typewriter';
    color: var(--co-clr-base-5);
}

.input-block label {
    font-family: 'vendetta';
    font-size: 13px;
    font-weight: 700;
    color: rgb(44, 74, 109);
    margin-top: 16px;
}

.input-block label + div {
    border-radius: 0px;
}

.input-block__input > div:first-child {
    border-radius: 0px;
    background: var(--co-clr-off-white);
    font-family: 'vendetta';
    font-size: 16px !important;
    margin-top: 8px;
}

div#character-sheet .input-block__input > div:first-child {
    border-radius: 0px;
    background: var(--co-clr-white);
    font-family: 'vendetta';
    font-size: 16px !important;
    margin-top: 8px;
}

.input-block__input > div:first-child svg path {
    fill: var(--co-clr-base-4);
}

.input-block__input > div:first-child input {
    font-family: 'vendetta';
    font-size: 16px;
}

.input-block__input > div:first-child input::placeholder {
    font-family: 'vendetta';
    color: var(--co-clr-base-5);
}

.campaign-html + div .input-block__input > div:first-child {
    margin-left: 0px;
    width: 100%;
}

div#getting-started-name-container input::placeholder {
    font-size: 16px;
    font-family: 'vendetta';
    color: var(--co-clr-base-5);
}



/* Top Header */



.header-illumination-wrapper {
    flex-flow: column;
    color: var(--co-clr-off-white);
    font-family: 'Quelity-Bold';
    font-size: 15px;
    line-height: normal;
    gap: 8px;
    text-shadow: 0px 0px 6px #010101;
}

.header-illumination-items span.checkbox-block__checkbox svg {
    border-radius: 0px !important;
    rotate: 45deg;
    position: relative;
    top: -2px;
    height: 12px;
    width: 12px;
}

.header-illumination-items .checkbox-block__checkbox--active:after {
    content: "";
    color: var(--co-clr-base-1);
    font-weight: 700;
    font-family: 'vendetta';
    display: flex;
    height: 8px;
    width: 8px;
    top: 0px;
    background: var(--co-clr-brass);
    border-radius: 0px;
    rotate: 45deg;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.character-header-illumination-label {
    color: var(--co-clr-base-2);
    padding-left: 8px;
}

.header-illumination-items {
    gap: 12px;
}

.header-illumination-items .checkbox-block__element-block {
    gap: 2px;
}

.header-illumination-items label {
    color: var(--co-clr-off-white);
    font-family: 'MinionPro-Regular';
    text-transform: none;
    font-size: 15px;
    font-weight: 400;
    max-width: 160px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.drawer-container .header-illumination-items label {
    color: var(--co-clr-off-white);
    font-family: 'MinionPro-Regular';
    text-transform: none;
    font-size: 15px;
    font-weight: 400;
    max-width: unset;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.builder-experience-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 100px !important;
}

.builder-experience-values {
    justify-content: center;
    font-family: 'vendetta';
    font-weight: 700;
    font-size: 32px;
    color: #c82434;
}

.builder-experience-values > div:nth-child(2) div {
    color: gray;
    font-size: 18px;
    display: flex;
    padding-left: 4px;
}

.builder-experience-values + div {
    color: #CFCFCF;
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 12px;
}





.ability-header-container > div {
    max-width: 120px !important;
}

.ability-header-container {
    justify-content: flex-end !important;
}

.ability-header-container > div div {
    justify-content: flex-end;
    gap: 4px;
}

.ability-label.text-block__text {
    font-family: 'Garamond';
    text-transform: uppercase;
    color: var(--marvel-sheet-bg-ow);
    font-size: 14px;
    letter-spacing: 0;
}

.ability-value.text-block__text {
    color: white;
    font-family: 'vendetta';
    font-weight: 700;
}


.header-name-holder {
    flex-basis: 65%;
    flex-wrap: wrap;
}



.builder-header {
    gap: 32px;
}

.header-misc-attribute-container {
    display: flex;
    align-items: flex-end;
    flex-basis: 320px !important;
    max-width: 320px !important;
}



.header-health-willpower-container {
    gap: 16px;
    font-family: 'vendetta';
    color: #CFCFCF;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    justify-content: flex-end;
    min-width: 300px;
}

.header-humanity-bloodpotency-container {
    gap: 16px;
    font-family: 'vendetta';
    color: #CFCFCF;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    justify-content: flex-end;
    min-width: 300px;
}

.header-single-attribute-container {
    gap: 6px;
    justify-content: flex-end;
}

.header-single-attribute-label {
    padding: 0px;
}

.header-single-attribute-container > div:nth-child(2) {
    color: #c82434;
}




.header-item {
    justify-content: flex-start;
    gap: 12px;
    flex-basis: unset;
    max-width: unset;
}

.header-name-holder > div:nth-child(2) {
    font-family: var(--font-cormorant);
    text-transform: uppercase;
    font-size: 32px;
    color: white;
    letter-spacing: 0px;
    font-weight: 700;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-name-holder {
    align-items: center;
}

.header-name-holder > div:first-child {
    min-height: 82px;
    min-width: 82px;
    margin: 0px 12px 0px -6px;
    align-items: flex-start;
}

div#avatar-box {
    border-radius: 0px;
    height: 64px;
    width: 64px;
    position: relative;
    top: 14px;
    left: 17px;
    border: none !important;
}







/* Left Column */



.builder-left-column div#grid-table-component .builder-table-row {
    grid-template-columns: 1fr min-content 24px;
    overflow-x: hidden;
    border: none !important;
    gap: 8px;
}

.builder__left-pane .builder-table-row__open .builder-table-row .section-button {
    background: none;
    background-color: #010101 !important;
    filter: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.builder__left-pane .builder-table-row__open .builder-table-row .section-button > div:first-child p {
    font-size: 16px;
}

.builder__left-pane .builder-table-row__open .builder-table-row .section-button:hover > div:first-child p:first-child {
    color: #c82434 !important;
}



.section-button__description {
    color: #CFCFCF !important;
    font-family: 'vendetta' !important;
    font-weight: 700 !important;
    font-size: 10px !important;
}







.builder-table-row__open .section-button--active {
    background: linear-gradient(0deg, #68111a80 5%, transparent 100%) !important;
    border: 1.5px solid #c82434 !important;
}

div#progression-section-button + div + div {
    display: none;
}

div#progression-section-button-container {
    grid-template-columns: 1fr 24px min-content !important;
}

.available-exp-cell.available-exp-cell {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end;
    align-items: center;
    margin-left: 8px;
    width: 100%;
    height: 42px;
    background: #010101;
    border-radius: 4px;
}

.available-exp-cell.available-exp-cell--positive span.available-exp-value {
    color: #c82434;
    font-family: 'vendetta';
    font-size: 16px;
    text-align: center;
    position: relative;
    top: 6px;
}

.available-exp-cell.available-exp-cell--positive span.available-exp-label {
    color: white;
    font-family: 'vendetta';
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -2px;
}

.available-exp-cell.available-exp-cell--zero span.available-exp-value {
    color: gray;
    font-family: 'vendetta';
    font-size: 16px;
    text-align: center;
    position: relative;
    top: 6px;
}

.available-exp-cell.available-exp-cell--zero span.available-exp-label {
    color: gray;
    font-family: 'vendetta';
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -2px;
}

.available-exp-cell.available-exp-cell--negative span.available-exp-value {
    color: gray;
    font-family: 'vendetta';
    font-size: 16px;
    text-align: center;
    position: relative;
    top: 6px;
}

.available-exp-cell.available-exp-cell--negative span.available-exp-label {
    color: #c82434;
    font-family: 'vendetta';
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -2px;
}

.builder-left-column div#grid-table-component div#creation-section-button-container .builder-table-row__open .builder-table-row {
    grid-template-columns: 1fr 0px 24px;
    overflow-x: hidden;
    border: none !important;
    gap: 8px;
}


div#concept-lore-section-button + div + div .remaining-points:after {
    display: none;
}

div#concept-lore-section-button-active + div + div .remaining-points:after {
    display: none;
}


div#progression-section-button-container + div .remaining-points__container {
    display: none;
}

div#progression-attributes-section-button-container {
    grid-template-columns: 1fr 24px min-content !important;
}

div#progression-disciplines-section-button-container {
    grid-template-columns: 1fr 24px min-content !important;
}

div#progression-advantages-section-button-container {
    grid-template-columns: 1fr 24px min-content !important;
}

div#progression-blood-potency-section-button-container {
    grid-template-columns: 1fr 24px min-content !important;
}

span.spent-exp-value {
    color: #c82434;
    font-family: 'vendetta';
    font-size: 14px;
    text-align: center;
    position: relative;
    top: 6px;
}

span.spent-exp-label {
    color: white;
    font-family: 'vendetta';
    font-size: 10px;
    text-align: center;
    position: relative;
    top: -2px;
    text-transform: uppercase;
}


.builder-middle-column span.spent-exp-value {
    top: 0px;
}

.builder-middle-column span.spent-exp-label {
    top: -.5px;
    margin-left: 8px;
    margin-right: 16px;
}



.builder__left-pane .builder-table-row__open .builder-table-row .section-button + div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #010101;
    width: 32px;
    border-radius: 4px;
}


.remaining-points:after {
    content: "";
    height: 32px;
    width: 4px;
    background: #353535;
    display: block;
    position: absolute;
    transform: translate(9px, 6px);
}

.builder__left-pane .builder-table-row__open .builder-table-row .remaining-points:after {
    transform: translate(9px, 5px);
    height: 28px;
}

.remaining-points--completed:after {
    content: "";
    height: 32px;
    width: 4px;
    background: #007d3e;
    display: block;
    position: absolute;
    transform: translate(9px, 6px);
}

.builder__left-pane .builder-table-row__open .builder-table-row .remaining-points--completed:after {
    transform: translate(9px, 5px);
    height: 28px;
}

.builder-table-row--expanded .remaining-points:after {
    display: none;
}

div#advantages-and-flaws-section-button-container .remaining-points:after {
    display: none;
}




.builder__left-pane {
    min-width: 320px;
    background: #68111a;
    border-radius: 1px;
    padding: 1px !important;
    min-height: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
}



.section-button {
    padding-left: 12px !important;
}

div#builder-three-column-grid > div:first-child > div:first-child {
    background: transparent;
    box-shadow: none;
    border-radius: 1px;
}

span.MuiStepLabel-iconContainer.Mui-completed > div:first-child {
    background-color: #246279 !important;
    border: none;
    padding-bottom: 0px;
}

span.MuiStepLabel-iconContainer.Mui-completed > div:first-child svg {
    stroke: white !important;
}

span.MuiStepLabel-iconContainer > div {
    font-family: 'vendetta';
    font-size: 12px;
    padding-bottom: 0px;
    background-color: #c82434;
    border: 1.5px solid #68111a;
}

div#getting-started-era-selection-container > div:nth-child(2) > div:first-child {
    font-size: 16px;
    line-height: normal;
}

.builder-left-column {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-left-bg.png?format=webp);
    position: relative;
    background-color: #010101;
    background-repeat: no-repeat;
    background-position: bottom 166px center;
    background-size: 100% auto;
    overflow-y: auto;
    padding: 8px;
    padding-bottom: 24px;
}

.builder-left-column > div:first-child > div:first-child {
    padding: 0px;
    padding-left: 6px;
    position: relative;
    top: -4px;
}

.builder-left-column > div:first-child > div:nth-child(2) > div:first-child {
    display: flex;
    flex-direction: column;
}

.builder-left-column button:not(.sheet-button__button) {
    text-transform: uppercase !important;
    font-size: 14px;
    height: 50px !important;
    width: 280px !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #246279 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    background-origin: padding-box;
    padding: 1.25rem 3.125rem;
    font-weight: 600 !important;
    font-family: 'vendetta';
    background-size: cover;
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    box-shadow: 0 1px 21px 5px #000;
    outline: 0.5px solid black;
    outline-offset: -4px;
    border-radius: 1px;
}

.builder-left-column button:not(.sheet-button__button):hover {
    transform: translateY(-2px);
    transition: transform .2s ease-in-out;
}

a.sheet-button__link {
    text-decoration: none;
}

.builder-left-column button.sheet-button__button {
    text-transform: uppercase !important;
    font-size: 14px;
    height: 50px !important;
    width: 280px !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px !important;
    background-color: #c4171d !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 120% auto;
    display: flex;
    background-origin: padding-box;
    padding: 1.25rem 3.125rem;
    font-weight: 600 !important;
    font-family: 'vendetta';
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    box-shadow: 0 1px 21px 5px #000;
    outline: 0.5px solid black;
    outline-offset: -4px;
    border-radius: 1px;
}

.builder-left-column button.sheet-button__button:hover {
    transform: translateY(-2px);
    transition: transform .2s ease-in-out;
}




/* Section Buttons */


.section-button {
    border-radius: 1px !important;
    background-color: #333333 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp);
    background-size: cover;
    border: 1px solid #636363 !important;
}

.section-button__content-block p:first-child {
    font-family: var(--font-cormorant);
    font-weight: 700;
    font-size: 18px;
    color: #CFCFCF;
}





/* INACTIVE */

div#getting-started-section-button {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-gs-i.png?format=webp), linear-gradient(0deg, #333333, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 97px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

div#creation-section-button {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-creation.png?format=webp), linear-gradient(0deg, #333333, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 97px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

div#concept-lore-section-button {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-concept-i.png?format=webp), linear-gradient(0deg, #333333, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 104px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

div#progression-section-button {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-prog.png?format=webp), linear-gradient(0deg, #333333, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 95.5px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}



/* HOVER */


div#getting-started-section-button:hover {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-gs-a.png?format=webp) !important;
    position: relative;
    background-position: center left 110px !important;
    background-repeat: no-repeat !important;
    background-size: 183px auto !important;
    background-color: #101010 !important;
}

div#creation-section-button:hover {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-creation-active.png?format=webp) !important;
    position: relative;
    background-position: center left 105px !important;
    background-repeat: no-repeat !important;
    background-size: 183px auto !important;
    background-color: #101010 !important;
}

div#concept-lore-section-button:hover {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-concept-a.png?format=webp) !important;
    position: relative;
    background-position: center left 112px !important;
    background-repeat: no-repeat !important;
    background-size: 183px auto !important;
    background-color: #101010 !important;
}

div#progression-section-button:hover {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-prog-a.png?format=webp) !important;
    position: relative;
    background-position: center left 109px !important;
    background-repeat: no-repeat !important;
    background-size: 183px auto !important;
    background-color: #101010 !important;
}





/* ACTIVE */


div#getting-started-section-button-active {
    border: 1.5px solid #c82434 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-gs-a.png?format=webp), linear-gradient(0deg, #246279, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 110px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

div#getting-started-section-button-active .section-button__content-block p:first-child {
  color: white;
  font-variant: none;
  text-transform: uppercase;
}

.builder-table-row--expanded div#creation-section-button {
    border: 1.5px solid #c82434 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-creation-active.png?format=webp), linear-gradient(0deg, #246279, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 104px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

.builder-table-row--expanded div#creation-section-button .section-button__content-block p:first-child {
  color: white;
  font-variant: none;
  text-transform: uppercase;
}

div#concept-lore-section-button-active {
    border: 1.5px solid #c82434 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-concept-a.png?format=webp), linear-gradient(0deg, #246279, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 111.5px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

div#concept-lore-section-button-active .section-button__content-block p:first-child {
  color: white;
  font-variant: none;
  text-transform: uppercase;
}

.builder-table-row--expanded div#progression-section-button {
    border: 1.5px solid #c82434 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-prog-a.png?format=webp), linear-gradient(0deg, #246279, transparent), url(https://content.demiplane.com/nexus/vampire/vtm-marble-grey-bg.jpg?format=webp) !important;
    position: relative;
    background-position: center left 108px, top center, top 30% left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 183px auto, cover, 280% auto !important;
}

.builder-table-row--expanded div#progression-section-button .section-button__content-block p:first-child {
  color: white;
  font-variant: none;
  text-transform: uppercase;
}




/* Middle Column */




.builder-middle-column .element-block p {
    font-family: 'Garamond';
    font-size: 18px;
    color: #CFCFCF;
    line-height: 1.5;
}

.builder-middle-column .advantages-and-flaws-container .builder-table-row {
    grid-template-columns: 2fr 1fr max-content min-content;
    padding-right: 8px;
}


.builder-middle-column .builder-table-row__open .builder-table-row {
    background-color: #450b11 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    filter: drop-shadow(0px 0px 4px #101010);
    grid-template-columns: 2fr 1fr minmax(max-content, min-content) min-content;
    padding-right: 16px;
}



.builder-middle-column .builder-table-row__open .builder-table-row div {
    font-size: 12px;
    line-height: normal;
    font-family: 'vendetta';
    
}

.builder-middle-column:after {
    content: "";
    display: block;
    height: 50px;
    width: 100%;
    position: absolute;
    z-index: 99;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(360deg, #30090eb3 25%, #30090e91 50%, transparent 100%);
    background-size: 100%;
    background-repeat: repeat-x;
    pointer-events: none;
}

.sea-of-time-benefits-container {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 13px;
    line-height: normal;
    margin-top: 16px !important;
}

span.sea-of-times-adjustments-label {
    font-weight: 700;
    color: #c82434;
}

.builder-getting-started-container > div:first-child > div:first-child {
    padding: 0px;
    margin-top: 8px;
}

.builder__center-pane h3 {
    font-size: 18px;
    font-family: var(--font-cormorant);
    color: white;
    letter-spacing: 0px;
}


/* Clan Selection */


.builder-middle-column .clan-select-list-container .builder-table-row {
    background-color: #2b2b2b !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    border: 1px solid #68111a !important;
    border-radius: 1px !important;
    min-height: 52px;
    background: linear-gradient(90deg, #2b2b2b calc(100% - 150px), transparent calc(100% - 110px)), url(https://content.demiplane.com/nexus/vampire/vtm-brujah.jpg?format=webp);
    background-size: auto 150%;
    background-position: right -24px center;
    background-repeat: no-repeat;
}

.builder-middle-column .clan-select-list-container .builder-table-row:hover {
    border: 1px solid #c82434 !important;
    transition: ease all .3s;
    filter: brightness(1.2);
}

.builder-middle-column .grid-table-row .builder-table-row--selected {
    border: 1.5px solid #c82434 !important;
    outline: 4px solid #68111a;
    outline-offset: -5.5px;
}



/* CLAN Backgrounds */


div#select-row-banu-haqim.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-banu-haqim.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -45px right -20px;
    background-repeat: no-repeat;
}

div#select-row-banu-haqim.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-banu-haqim.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -45px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-brujah.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-brujah.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -45px right -20px;
    background-repeat: no-repeat;
}

div#select-row-brujah.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-brujah.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -45px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-caitiff.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-caitiff.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -25px right -20px;
    background-repeat: no-repeat;
}

div#select-row-caitiff.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-caitiff.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -25px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-gangrel.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-gangrel.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -55px right -20px;
    background-repeat: no-repeat;
}

div#select-row-gangrel.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-gangrel.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -55px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-hecata.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-hecata.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -15px right -20px;
    background-repeat: no-repeat;
}

div#select-row-hecata.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-hecata.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -15px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-lasombra.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-lasombra.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -45px right -40px;
    background-repeat: no-repeat;
}

div#select-row-lasombra.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-lasombra.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -45px right -40px !important;
    background-repeat: no-repeat;
}



div#select-row-malkavian.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-malkavian.jpg?format=webp);
    background-size: auto 100%, auto 350%;
    background-position: left center, top -25px right -90px;
    background-repeat: no-repeat;
}

div#select-row-malkavian.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-malkavian.jpg?format=webp) !important;
    background-size: auto 100%, auto 350% !important;
    background-position: left center, top -25px right -90px !important;
    background-repeat: no-repeat;
}



div#select-row-nosferatu.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-nosferatu.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -15px right -20px;
    background-repeat: no-repeat;
}

div#select-row-nosferatu.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-nosferatu.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -15px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-ravnos.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-ravnos.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -45px right -20px;
    background-repeat: no-repeat;
}

div#select-row-ravnos.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-ravnos.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -45px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-salubri.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-salubri.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top 0px right -30px;
    background-repeat: no-repeat;
}

div#select-row-salubri.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-salubri.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top 0px right -30px !important;
    background-repeat: no-repeat;
}



div#select-row-the-ministry.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 280px, transparent calc(100% - 0px)), url(https://content.demiplane.com/nexus/vampire/vtm-ministry.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -25px right -50px;
    background-repeat: no-repeat;
}

div#select-row-the-ministry.builder-table-row--active {
    background: linear-gradient(90deg, #151515 280px, transparent calc(100% - 0px)), url(https://content.demiplane.com/nexus/vampire/vtm-ministry.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -25px right -50px !important;
    background-repeat: no-repeat;
}



div#select-row-thin-blooded.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-thinblood.jpg?format=webp);
    background-size: auto 100%, auto 300%;
    background-position: left center, top -16px right -80px;
    background-repeat: no-repeat;
}

div#select-row-thin-blooded.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-thinblood.jpg?format=webp) !important;
    background-size: auto 100%, auto 300% !important;
    background-position: left center, top -16px right -80px !important;
    background-repeat: no-repeat;
}



div#select-row-toreador.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-toreador.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -25px right -20px;
    background-repeat: no-repeat;
}

div#select-row-toreador.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-toreador.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -25px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-tremere.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-tremere.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -46px right -20px;
    background-repeat: no-repeat;
}

div#select-row-tremere.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-tremere.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -46px right -20px !important;
    background-repeat: no-repeat;
}



div#select-row-tzimisce.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-tzimisce.jpg?format=webp);
    background-size: auto 100%, auto 300%;
    background-position: left center, top -45px right -40px;
    background-repeat: no-repeat;
}

div#select-row-tzimisce.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-tzimisce.jpg?format=webp) !important;
    background-size: auto 100%, auto 300% !important;
    background-position: left center, top -45px right -40px !important;
    background-repeat: no-repeat;
}



div#select-row-ventrue.builder-table-row {
    background: linear-gradient(90deg, #2b2b2b 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-ventrue.jpg?format=webp);
    background-size: auto 100%, auto 250%;
    background-position: left center, top -45px right -20px;
    background-repeat: no-repeat;
}

div#select-row-ventrue.builder-table-row--active {
    background: linear-gradient(90deg, #151515 240px, transparent calc(100% - 50px)), url(https://content.demiplane.com/nexus/vampire/vtm-ventrue.jpg?format=webp) !important;
    background-size: auto 100%, auto 250% !important;
    background-position: left center, top -45px right -20px !important;
    background-repeat: no-repeat;
}




/* Getting Started */


.getting-started-data-container {
    row-gap: 24px;
}

button.begin-or-sheet-button {
    text-transform: uppercase !important;
    font-size: 16px !important;
    height: 50px !important;
    width: 300px !important;
    position: relative;
    left: -2px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    background: #007d3e;
    display: flex;
    box-shadow: none;
    font-weight: 700 !important;
    font-family: var(--font-cormorant);
    background-size: cover;
    justify-content: center;
    letter-spacing: 0px;
    border-radius: 0px;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0% 100%);
}

button.begin-or-sheet-button:hover {
    background: #007d3e;
    filter: brightness(1.2);
    transition: ease all .3s;
}

.gs-rank-avatar-holder {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.gs-top-holder {
    flex-basis: 64%;
    flex-direction: row-reverse !important;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
}


.total-rank-holder {
    justify-content: flex-start;
    margin-right: 8px !important;
    background: url(https://content.demiplane.com/nexus/marvelrpg/rank-bg.png?format=webp) !important;
    background-size: calc(100%) auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    max-width: 80px;
    min-width: 80px;
    min-height: 80px;
    row-gap: 4px;
    padding-top: 8px;
}


.rank-label.text-block__text {
    text-align: center;
    font-family: 'Garamond';
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
}

.rank-value.text-block__text {
    font-family: 'Garamond';
    font-weight: 700;
    font-size: 32px;
    text-align: center;
}

.select-block__label {
    color: var(--co-clr-base-4);
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
    font-family: 'mrs-eaves';
}

div#character-sheet .select-block__select .MuiInputBase-input {
    border-radius: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 400;
    font-family: 'vendetta';
    color: var(--darker-p-color);
    background-color: var(--co-clr-white);
}



div#character-sheet .select-block__select svg {
    color: var(--co-clr-base-2);
    height: calc(100% + 0px);
    width: 32px;
    top: 0px;
    right: 0px;
    padding-right: 8px;
    background: var(--co-clr-white);
}

.select-block__select {
    border-radius: 0px !important;
    background-color: transparent !important;
}








.getting-started-intro-container {
    flex-direction: column !important;
}

.character-unselected .getting-started-intro-image {
    background: url(https://content.demiplane.com/nexus/marvelrpg/mm-getting-started-bg.png?format=webp);
    min-width: 100%;
    min-height: 600px;
    background-size: 100% auto;
    background-position: top 0px left -10px;
    background-repeat: no-repeat;
}


.getting-started-divider {
    text-align: center;
    margin: 8px auto;
    color: white;
    padding: 0px 8px;
    background: transparent;
    font-size: 16px;
    z-index: 99;
    position: relative;
    top: -2px;
}

.getting-started-divider:before {
    content: "";
    display: block;
    width: 48px;
    height: 16px;
    position: relative;
    background: #004b87;
    left: calc(50% - 24px);
    z-index: -1;
    top: 24px;
    border-radius: 8px;
}

.getting-started-divider:after {
    content: "";
    display: block;
    border-top: 2px solid var(--marvel-bg-gold);
    position: relative;
    top: -12px;
    z-index: -99;
}


.builder-middle-column .getting-started-button-container button.button-component__button {
    text-transform: uppercase !important;
    font-size: 14px;
    height: 50px !important;
    width: 280px !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px !important;
    background-color: #c4171d !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 120% auto;
    display: flex;
    background-origin: padding-box;
    padding: 1.25rem 3.125rem;
    font-weight: 600 !important;
    font-family: 'vendetta';
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    box-shadow: 0 0px 6px #000;
    outline: 0.5px solid black;
    outline-offset: -4px;
    border-radius: 1px;
}

.builder-middle-column button.button-component__button:hover {
    transform: translateY(-2px);
    transition: transform .2s ease-in-out;
}


.sea-of-time-select-container {
    margin-top: 8px;
}

.sea-of-time-select-header.text-block__text {
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 18px;
    font-family: var(--font-cormorant);
}



.portrait-upload__icons {
    max-height: 200px;
    overflow: hidden;
}

.portrait-upload__premade {
    border-color: #c82434 !important;
}

.portrait-upload__button {
    background: #246279 !important;
    border: 1px solid #CFCFCF !important;
}

.portrait-upload__button:hover {
    background: #246279;
    filter: brightness(1.2);
    transition: ease all .3s;
}

.portrait-upload__premade:hover {
    filter: brightness(1.2);
    border: 2px solid #c82434 !important;
    transition: ease all .3s;
}



.character-select-list-container .builder-table-row > div:first-child {
    padding-left: 0px;
}


.builder-middle-column div#playbook-middle-content-container .grid-table-row__block {
  grid-template-columns: 3fr 3fr 72px;
}

.builder-middle-column div#playbook-middle-content-container .grid-table__columns {
  grid-template-columns: 3fr 3fr 72px;
}

.builder__center-pane {
    min-width: 320px;
    background: #68111a;
    border-radius: 1px;
    padding: 1px !important;
    padding-bottom: 2px !important;
    min-height: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
}


.builder__center-paper {
    background: url(https://content.demiplane.com/nexus/vampire/vtm-center-bottom.png?format=webp), url(https://content.demiplane.com/nexus/vampire/vtm-marble-red.jpg?format=webp) !important;
    position: relative;
    background-repeat: no-repeat, repeat !important;
    background-position: bottom center, top center !important;
    background-size: 100% auto !important;
    overflow-y: auto !important;
    padding: 8px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    border-radius: 1px !important;
}

.builder-middle-column > div:first-child div[role="heading"] {
    font-family: var(--font-cormorant) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    letter-spacing: 0px !important;
    color: white;
    text-transform: uppercase !important;
    font-variant: none !important;
    padding-left: 0px;
}

.builder-middle-column > div:first-child {
    width: calc(100% - 16px) !important;
    align-items: center;
}

.builder-middle-column > div:first-child > div:first-child {
    align-items: center;
    justify-content: space-between;
    display: grid;
    grid-template-columns: 1fr min-content min-content;
    padding: 0px;
    min-height: 44px;
}

.builder-middle-column > div:first-child .icon-button__button {
    padding: 0px;
}



/* Upload Portrait */



.portrait-upload-mini-modal .portrait-upload-mini__container {
    border: 2px solid var(--co-clr-base-2);
    background-color: var(--co-clr-base-2);
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.image-crop-padding-container {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background-color: #202020 !important;
    z-index: -1;
    top: 0px;
    right: 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.image-crop-content-grid {
    max-width: 150px;
}

.image-crop-content-container {
    flex-basis: 50% !important;
    max-width: 50% !important;
}

.image-crop-grid-container {
    gap: 8px;
}

.image-crop-content-grid {
    max-width: 150px;
}

.image-crop-button-container label {
    width: calc(100% - 8px);
    background: var(--co-clr-base-2);
    border-radius: 0px;
    font-size: 14px;
    font-weight: 700;
    color: var(--darker-p-color);
    border: 1px solid var(--co-clr-base-1);
    font-family: MinionPro-Regular;
}

.image-crop-button-container label:hover {
    background: var(--co-clr-accent-2);
}

.image-crop-message-container p {
    color: white;
    font-size: 14px;
    text-align: center;
    width: calc(100% - 8px);
    line-height: normal;
}

.image-crop-grid-container + div label {
    color: white;
    font-family: 'vendetta';
    font-size: 14px;
}

.portrait-upload-mini-modal__upload-block {
    top: -75px;
}

.portrait-upload-mini-modal__upload {
    font-size: 14px !important;
    height: 40px !important;
    width: 350px !important;
    margin-bottom: 24px !important;
    border-radius: 0px !important;
    background-color: var(--co-clr-base-1);
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    line-height: normal;
}

.portrait-upload-mini-modal__upload:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.portrait-upload-mini-modal__upload:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.portrait-upload-mini-modal__upload:hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

/* END */




.builder-middle-column > div:nth-child(3) > div:first-child {
    align-content: space-between;
}


.builder-middle-column > div:nth-child(3) > div:first-child > div:first-child {
    row-gap: 16px;
    color: #CFCFCF;
    font-size: 18px;
    padding: 0px;
}

.builder-middle-column {
    max-height: calc(100% - 8px);
    color: #161616;
}

div#getting-started-era-selection-container {
    padding: 0px;
}

div#getting-started-portrait-container button {
    background-color: #192735;
    border: 1px solid #cbbd7d;
}

div#getting-started-portrait-container button:hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

div#getting-started-portrait-container > div:first-child > div:first-child div > div:hover {
  filter: brightness(1.2);
  transition: ease all .3s;
}



div#getting-started-era-selection-container > div:nth-child(3) {
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

div#getting-started-era-selection-container button {
    padding: 0px;
    margin: 5px;
}

div#getting-started-era-selection-container button > div:first-child {
    height: 80px;
    width: 62px;
    background-size: contain;
    margin-top: 16px;
    outline: 1px solid #cbbd7d;
    outline-offset: -2px;
}

div#getting-started-era-selection-container button > div:first-child:hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

div#getting-started-era-selection-container button > div:nth-child(2) {
    color: white;
    font-size: 10px;
    max-width: 64px;
    line-height: normal;
    margin-top: 6px;
}

div#getting-started-portrait-container h3 {
    color: #98bae2;
    font-family: 'vendetta';
    font-size: 14px;
}


div#getting-started-button-container {
  align-items: center;
  flex-direction: column-reverse;
  margin-top: 16px;
  
}

div#getting-started-button-container > div:first-child button {
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: bold !important;
    height: 50px !important;
    width: 300px;
    position: relative;
    background-color: transparent !important;
    background-image: url(https://content.demiplane.com/nexus/avatarlegends/aln-button-bg-main.png?format=webp) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: calc(100% - 20px) !important;
    border-image-source: url(https://content.demiplane.com/nexus/avatarlegends/aln-button-border-main.png?format=webp) !important;
    border-image-slice: 40 140 40 140 !important;
    border-image-width: 10px 40px 10px 40px !important;
    border-image-repeat: stretch stretch !important;
    border: solid;
    margin-left: auto;
    margin-right: auto;
}

div#getting-started-button-container > div:first-child button:hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

.campaign-details-button button {

    height: 48px;
    margin-bottom: 24px;
    border-radius: 0px;
    font-size: 12px;
    font-weight: 700;
    outline: 1px solid #cbbd7d;
    outline-offset: -4px;
    background-color: #192735;
    color: white;
    border: none;
    background-image: radial-gradient(#192735 20px, transparent 40%), url(https://content.demiplane.com/nexus/avatarlegends/campaign-details-bg.jpg?format=webp);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    text-shadow: 0px 0px 12px #192735;

}

.campaign-details-button button:hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

div#getting-started-era-selection-container > div:first-child > div:first-child {
    color: #98bae2;
    font-family: 'vendetta';
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 8px;
}


div#getting-started-name-container label {
    font-family: 'vendetta';
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    color: #98bae2;
    margin-top: 10px;
}

div#getting-started-name-container input {
    background: #e3e8ed;
    font-family: 'vendetta';
    font-size: 16px;
}

div#getting-started-name-container label + div {
    border-radius: 0px;
    border: 1px solid #cbbd7d;
}

.image-button-group__item--active {
    background: transparent !important;
}

.image-button-group__item--active .image-button-group__image {
    border: 3px solid #cbbd7d;
    filter: drop-shadow(0px 0px 8px #b9cfeb);
}

.builder-middle-column > div:first-child > div:first-child > div {
    text-transform: none;
    font-variant: small-caps;
    font-family: 'vendetta';
    font-weight: 300;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.00833em;
}





/* Grid Column Header */



.grid-table__column {
    font-family: 'mrs-eaves';
    color: var(--co-clr-base-3);
    text-transform: uppercase;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    margin-bottom: 4px;
}

.grid-table__column button {
    height: 8px;
}

.grid-table__column svg {
    color: gray;
    height: 12px;
}



/* END Header */




/* Grid Rows */



.builder-middle-column .builder-table-row:hover {
    border: 1px solid #c82434 !important;
    transition: ease all .3s;
    filter: brightness(1.2);
}






.builder-middle-column .grid-table-row .builder-table-row--active {
    border: 1.5px solid #c82434 !important;
    background: #151515 !important;
}


.builder-middle-column .builder-table-row:hover:after {
    background-color: var(--marvel-sheet-bg-white) !important;
    transition: ease all .3s;
}



.builder-middle-column .builder-table-row > div:first-child {
    padding-left: 16px;
    gap: 12px;
}

.builder-middle-column .builder-table-row {
    background-color: #2b2b2b !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    border: 1px solid #68111a !important;
    border-radius: 1px !important;
    min-height: 52px;
}

.builder-middle-column .builder-table-row:after {
    content: "";
    position: absolute;
    background-color: var(--marvel-sheet-bg-ow);
    padding: 0px;
    padding-right: 16px;
    z-index: -1;
    margin: 2px !important;
    min-height: 48px;
    align-items: center;
    pointer-events: none;
    width: calc(100% - 12px);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0% 100%);
}

.builder-middle-column .builder-table-row > div:first-child > div {
    font-size: 14px;
    font-family: 'vendetta';
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: normal !important;
}


.builder-middle-column .grid-table-row__block {
    border-radius: 0px !important;
    border: 1px solid #838ca9 !important;
    background-color: #192736 !important;
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    margin-left: 8px;
    margin-right: 8px;
    color: #e3e8ed;
    font-family: 'vendetta';
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 48px;
    width: calc(100% - 16px);
}

.builder-middle-column .grid-table-row__block:not(.grid-table-row__block--disabled):hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

.builder-middle-column .grid-table-row__block--active {
    border: 2px solid #cbbd7d !important;
    padding: 7px;
}



.builder__left-pane .builder-table-row__open .builder-table-row {
    width: calc(100% - 18px);
}



.builder-middle-column .builder-table-row__open .builder-table-row--active {
    background-color: #101010 !important;
    border-color: #cbbd7d;
}

.builder-table-row__open .builder-table-row button {
    background: transparent;
    color: #888888;
    font-family: 'vendetta';
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 12px;
}

.builder-table-row__open .builder-table-row button:hover {
    color: white;
    transform: none !important;
}



/* ATTRIBUTES SECTION */


.attributes-options-list-header.text-block__text {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 16px;
}

.skills-options-list-header.text-block__text {
    text-transform: uppercase;
    font-size: 18px;
}

.skill-distribution--filter-button-group-container {
    flex-direction: column !important;
    color: #c82434 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
    font-family: 'vendetta' !important;
}


.filter-button-group {
    justify-content: space-between;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.builder-middle-column .filter-button-group button.button-component__button {
    text-transform: uppercase !important;
    font-size: 10px;
    height: 40px !important;
    width: 140px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    line-height: normal;
    display: flex;
    font-weight: 600 !important;
    font-family: 'vendetta';
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    border-radius: 1px;
    border: 1px solid #68111a;
}

.builder-middle-column .filter-button-group button.filter-button--active {
    background-color: #68111a;

}




/* END */



/* PREDATOR TYPE Section */



.predator-select-discipline-preamble.text-block__text {
    margin-top: 16px;
    margin-bottom: 16px;
}

.predator-select-specialty-preamble.text-block__text {
    margin-top: 16px;
    margin-bottom: 16px;
}

.predator-select-specialty-table .builder-table-row {
    grid-template-columns: 1fr 1fr 1fr .5fr 48px !important;
}


.center-section-header-button-container {
    align-items: center;
    justify-content: flex-end;
}

.center-section-header-button-container .change-button {
    text-transform: uppercase !important;
    font-size: 11px !important;
    position: relative;
    color: #cfcfcf !important;
    display: flex;
    font-weight: 400 !important;
    font-family: 'vendetta';
    justify-content: center;
    letter-spacing: .1em;
    line-height: normal;
    min-width: 180px;
}

.builder-middle-column > div:first-child button.button-component__button {
    color: #CFCFCF !important;
    background: transparent;
    font-weight: 400 !important;
    font-size: 11px !important;
}

.builder-middle-column > div:first-child button.button-component__button:hover {
    color: #c82434 !important;
    transform: none !important;
}

.predator-select-specialty-table .builder-table-row .text-block div {
    text-transform: uppercase !important;
    font-size: 11px !important;
}


.predator-select-specialty-table .grid-table__columns {
    grid-template-columns: 1fr 1fr 1fr .5fr 64px;
}


/* END */





/* SPECIALTIES */




.tracker {
    justify-content: center;
}

.specialties-selection-skill-and-text-container .tracker {
    justify-content: flex-start;
}

.specialties-selection-skill-container {
    flex-direction: column !important;
    align-items: flex-start !important;
}

.specialties-selection-skill-container .specialties-selection-skill-text {
    font-family: 'vendetta' !important;
    color: #c82434 !important;
}

.specialties-selection-skill-and-text-container > div:nth-child(2) {
    flex-basis: calc(50% - 16px);
    align-items: flex-start;
}

.specialties-selection-main-container .specialties-intro-label {
    color: #c82434 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
    font-family: 'vendetta' !important;
    margin-top: 16px;
    margin-bottom: 16px;
}
.specialties-selection-skill-rows-container {
    row-gap: 16px;
}


.specialties-selection-skill-and-text-container {
    gap: 16px;
}

.specialties-selection-skill-container {
    gap: 16px;
    flex-basis: calc(50% - 48px);
}

.specialties-selection-single-row-container {
    gap: 16px;
    border-top: 1px solid #c82434;
    padding-top: 16px;
    margin: 0px;
    margin-bottom: 24px !important;
}

.specialties-selection-skill-container .select-block {
    min-width: 200px;
    width: 100%;
    font-family: 'vendetta' !important;
}

.specialties-selection-skill-and-text-container div {
    margin: 0px !important;
}

.specialties-selection-skill-container .tracker {
    width: 120px;
}

.specialties-selection-example-text.text-block__text {
    font-family: 'vendetta' !important;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 13px !important;
}


.specialties-selection-main-container {
    gap: 24px;
}

.specialties-selection-button-container {
    margin-top: 24px;
}

.specialties-selection-button-container button.button-component__button {
    text-transform: uppercase !important;
    font-size: 12px;
    height: 40px !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #246279 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    background-origin: padding-box;
    padding: 1.25rem 1rem;
    font-weight: 600 !important;
    font-family: 'vendetta';
    background-size: cover;
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    box-shadow: 0 1px 21px 5px #000;
    outline: 0.5px solid black;
    outline-offset: -4px;
    border-radius: 1px;
}


/* END */








div#character-sheet .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input.MuiOutlinedInput-input {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px !important;
    font-weight: 400;
    font-family: 'JMH Typewriter';
    display: flex;
    align-items: center;
    min-height: 28px;
    white-space: break-spaces;
    line-height: normal;
}


.input-block__input .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    font-weight: 400;
    color: var(--darker-p-color) !important;
    background: var(--co-clr-white);
}



div#character-sheet .filter-button-group {
    justify-content: flex-start !important;
    gap: 16px;
}

.center-section-header-button-container {
    align-items: center;
    justify-content: flex-end;
}

.center-section-header-button-container .change-button {
    text-transform: uppercase !important;
    font-size: 11px !important;
    position: relative;
    color: #cfcfcf !important;
    display: flex;
    font-weight: 400 !important;
    font-family: 'vendetta';
    justify-content: center;
    letter-spacing: .1em;
    line-height: normal;
    min-width: 180px;
}






div#character-sheet .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input.MuiOutlinedInput-input {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px !important;
    font-weight: 400;
    font-family: 'JMH Typewriter';
    display: flex;
    align-items: center;
    min-height: 28px;
}

div#character-sheet .select-block__select .MuiInputBase-input {
    border-radius: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 400;
    font-family: 'vendetta';
    color: var(--darker-p-color);
    background-color: var(--co-clr-white);
}


.builder-middle-column div#playbook-middle-content-container .grid-table-row__block .text-block {
    pointer-events: none;
}


div#builder-techniques-center-main-container div#grid-table-component .builder-table-row__open .builder-table-row {
    background: #192736 !important;
    border-left: 6px solid #9aa2bf !important;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 24px;
    width: calc(100% - 32px) !important;
    min-height: 42px;
    grid-template-columns: 3fr 2fr max-content;
}

div#builder-techniques-center-main-container div#grid-table-component .builder-table-row__open .builder-table-row--active {
  border-left-color: #cbbd7d !important;
}

div#builder-techniques-center-main-container .builder-table-row__open button:last-child {
    border: 1px solid #e3e8ed;
    color: #e3e8ed !important;
    border-radius: 0px;
    height: 28px;
    font-size: 10px;
    font-family: 'vendetta';
    font-weight: 700;
    letter-spacing: 0px;
    margin-right: 8px;
}

div#builder-techniques-center-main-container .builder-table-row__open button:last-child:hover {
    background: rgb(44, 74, 109);
    color: white !important;
    transition: ease all .3s;
}

div#builder-techniques-center-text-container {
    font-size: 16px;
    line-height: normal;
    margin-left: 8px;
    width: calc(100% - 16px);
    margin-bottom: 8px !important;
}

div#builder-techniques-center-text-container + div {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px;
    width: calc(100% - 16px);
}

.techniques-session-switch--filter-button-group {
    gap: 8px;
    justify-content: center;
    width: fit-content !important;
}

.techniques-session-switch--filter-button {
    background: #192736 !important;
    border-radius: 0px !important;
    font-size: 11px !important;
    font-family: 'vendetta' !important;
    color: #e3e8ed !important;
    font-weight: 700 !important;
    border: 1px solid #838ca9 !important;
}

button.techniques-session-switch--filter-button--active {
    background: #77aae3 !important;
}

.techniques-session-switch--filter-button-group-container {
    line-height: 1;
    font-size: 14px;
    font-variant: small-caps;
    font-family: 'vendetta';
    align-items: center;
    text-align: center;
    gap: 8px;
    flex-direction: column !important;
    justify-content: center;
    width: fit-content !important;
}

.techniques-mastery-counts-mastered-container {
    justify-content: flex-end;
    margin-top: 2px;
    font-size: 14px;
    font-variant: small-caps;
    font-family: 'vendetta';
    gap: 8px;
    align-items: center;
}

.techniques-mastery-counts-learned-container {
    justify-content: flex-end;
    margin-top: 2px;
    font-size: 14px;
    font-variant: small-caps;
    font-family: 'vendetta';
    gap: 8px;
    align-items: center;
}

div#playbook-selected-middle-header-container {
    display: grid;
    grid-template-columns: 3fr max-content max-content;
    padding-bottom: 4px;
}

div#playbook-selected-middle-header-name-container {
    align-items: self-start;
    column-gap: 8px;
}

div#playbook-selected-middle-header-name-container .image-display {
    position: relative;
    top: -8px;
}

div#playbook-selected-middle-header-container .button-component:not(:last-of-type) button {
    color: #98bae2;
    font-size: 10px;
    line-height: 1.2;
}

div#playbook-selected-middle-header-container .button-component:last-of-type button {
    color: #cbbd7d;
    font-size: 10px;
    line-height: 1.2;
}

div#playbook-selected-middle-content-container div#grid-table-component .builder-table-row__open .builder-table-row {
    background: #192736 !important;
    border-left: 6px solid #9aa2bf !important;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 24px;
    width: calc(100% - 32px) !important;
    min-height: 42px;
    grid-template-columns: 3fr 2fr max-content;
}

div#playbook-selected-middle-content-container div#grid-table-component .builder-table-row__open .builder-table-row--active {
  border-left-color: #cbbd7d !important;
}




.builder-growth-middle-section div#grid-table-component .builder-table-row__open .builder-table-row {
    background: #192736 !important;
    border-left: 6px solid #9aa2bf !important;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 24px;
    width: calc(100% - 32px) !important;
    min-height: 42px;
    grid-template-columns: 5fr 2fr max-content;
}

.builder-growth-middle-section div#grid-table-component .builder-table-row__open .builder-table-row--active {
  border-left-color: #cbbd7d !important;
}




/* Training Section */


.builder-trainings-table .text-block__text {
    font-variant: small-caps;
}

.builder-trainings-table .grid-table-row__block--selected .text-block__text {
    color: #cbbd7d;
}



.builder-trainings-table > div {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    row-gap: 24px;
}

div#training-counter-container {
    margin-top: 2px;
    font-size: 14px;
    font-variant: small-caps;
    font-family: 'vendetta';
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.builder-trainings-table > div > div {
    width: 130px;
}

.builder-trainings-table .grid-table-row__block {
    background-color: transparent !important;
    border: none !important;
    background-image: url(https://app.thedemiplane.com/_next/image?url=https%3A%2F%2Fhttps://content.demiplane.com%2Fcompendium%2Favatarlegends%2Fcore-book%2FjsAohOSqF903Kuas%2F03-13-AvatarRPG-VerticalFrame-4x12picas-Water.png&w=128&q=90);
    background-size: auto calc(100% - 32px);
    background-position: top 32px center;
    background-repeat: no-repeat;
    height: 300px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-between;
}

.builder-trainings-table > div > div > .grid-table-row__block--active {
    border: 2px solid #cbbd7d !important;
    background-color: #192736 !important;
    filter: none !important;
    transition: ease all .3s;
}

.builder-trainings-table > div > div > .grid-table-row__block--disabled {
    filter: grayscale(.75) opacity(0.5) !important;
}

.builder-trainings-table > div > div#training-row-airbending > div {
     background-image: url(https://content.demiplane.com/nexus/avatarlegends/al-airbending-banner.webp);
}

.builder-trainings-table > div > div#training-row-earthbending > div {
     background-image: url(https://content.demiplane.com/nexus/avatarlegends/al-earthbending-banner.webp);
}

.builder-trainings-table > div > div#training-row-firebending > div {
     background-image: url(https://content.demiplane.com/nexus/avatarlegends/al-firebending-banner.webp);
}

.builder-trainings-table > div > div#training-row-technology > div {
     background-image: url(https://content.demiplane.com/nexus/avatarlegends/al-technology-banner.webp);
}

.builder-trainings-table > div > div#training-row-waterbending > div {
     background-image: url(https://content.demiplane.com/nexus/avatarlegends/al-waterbending-banner.webp);
}

.builder-trainings-table > div > div#training-row-weapons > div {
     background-image: url(https://content.demiplane.com/nexus/avatarlegends/al-weapons-banner.webp);
}



.builder-trainings-table > div > div > div > div:first-child > div:nth-child(2) {
    display: flex;
    justify-content: center;
}



/* END Training */



.avatar {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    display: flex;
    height: 82px;
    width: 82px;
    overflow: visible;
}

.avatar:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/candelaobscura/portrait-frame.png?format=webp) !important;
    height: 92px;
    width: 92px;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block;
    position: absolute;
}

.avatar:hover div#avatar-box:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/avatarlegends/character-gear-overlay.png?format=webp);
    display: block;
    position: relative;
    height: 100%;
    background-position: center left 0px;
    width: 100%;
    background-size: 100% auto;
    z-index: 9;
    pointer-events: none;
    transition: background 0.3s ease 0s;
}


.image-text {
    gap: 12px;
    padding-left: 8px !important;
}

.image-text__image-block {
    height: 34px !important;
    width: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
}

.image-text__text {
    font-family: 'vendetta';
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 700;
}

.select-list-container div#grid-table-component {
    margin-top: 16px;
}


div#playbook-right-header-button-container {
    flex-basis: 50%;
    justify-content: flex-end;
    gap: 24px;
}

.reader-container p.Support_Logline {
    margin-top: 24px;
    padding-right: 8px;
}


.points-display {
    padding-right: 8px;
}


div#grid-table-component .points-display > div:first-child {
    padding: 0px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 1px;
    background: #101010;
    color: white;
    font-size: 11px;
    font-family: 'vendetta';
    border: 1.5px solid #c82434;
}

div#grid-table-component .points-display--equals > div:first-child {
    border: 1px solid #246279;
}




.points-display__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}



/* END Rows */




.builder-middle-column .progression-disciplines-container .builder-table-row {
    grid-template-columns: 1fr 1fr min-content min-content;
    padding-right: 16px;
}


.builder-improve-disciplines-header.builder-improve-disciplines--discipline-section-header {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: -16px;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}


.builder-improve-disciplines--power-section-header-container {
    margin-top: 16px;
    font-weight: 700;
    gap: 24px;
    align-items: center;
}

.builder-improve-disciplines-header {
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}

.dots-cell.dots-cell--combined {
    flex-direction: column;
    padding-right: 16px;
}



.dots-single-select-container {
    display: grid !important;
    grid-template-columns: [tracker-text] auto [button] 66px;
    grid-template-rows: [spent] auto [cost] auto;
    column-gap: 8px;
    align-items: center;
    grid-column-start: 2;
}

.dots-single-select-container .dots-single-select-tracker {
    grid-row-start: 1;
    grid-row-end: span 2;
    grid-column-start: tracker-text;
    display: flex;
    flex-direction: column !important;
    row-gap: 2px;
}

.dots-single-select-tracker .grid-block.dots-tracker {
    align-items: center;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
}

.builder-right-column .builder-table-row .dots-single-select-tracker .exp-cost-container {
    grid-column-start: tracker-text;
    align-items: center;
    flex-wrap: nowrap !important;
    min-width: 80px;
}

.dots-single-select-tracker .exp-cost-container > div > div {
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: gray !important;
}



.dots-tracker--advantage {
    margin-left: 4px;
}

.dots-tracker {
    justify-content: flex-end;
}


.builder-right-column .builder-improve-disciplines-table.builder-improve-disciplines--discipline-section-table .builder-table-row {
    grid-template-columns: 1fr 1fr min-content min-content;
    padding-right: 8px;
}

.builder-middle-column .builder-table-row__open .builder-table-row div:not(:first-child) {
    justify-content: flex-end !important;
    display: flex;
}

.points-display__text-block {
    max-width: fit-content;
}


.disciplines-purchase-button-container button.button-component__button {
    text-transform: uppercase !important;
    font-size: 12px;
    height: 40px !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #246279 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    background-origin: padding-box;
    padding: 1.25rem 1rem;
    font-weight: 600 !important;
    font-family: 'vendetta';
    background-size: cover;
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    box-shadow: 0 0px 12px 0px #000;
    outline: 0.5px solid black;
    outline-offset: -4px;
    border-radius: 1px;
}




/* Right Column */




.builder-right-column .builder-predator-advantages-section--choice .builder-table-row {
    grid-template-columns: 3fr 1fr min-content min-content;
    column-gap: 8px;
}

.builder-right-column .builder-predator-advantages-section--choice .builder-table-row div {
    justify-content: flex-end;
}

.builder-predator-advantages-section-tablebuilder-predator-advantages-section-table--grants .builder-table-row {
    grid-template-columns: 3fr 1fr min-content min-content;
    column-gap: 8px;
}

.builder-predator-advantages-section-tablebuilder-predator-advantages-section-table--grants .builder-table-row div {
    justify-content: flex-end;
}

.grid-block.dot-flaw-group {
    flex-wrap: nowrap !important;
}





.accordian__summary > div p {
    font-family: 'Bodoni72' !important;
    font-weight: 700 !important;
    word-spacing: 5px;
}

.accordian__summary svg {
    color: #c82434;
}

.element-block__clamp-block {
    margin-top: -24px !important;
}


.element-block__clamp-block:before {
    content: "";
    display: block;
    height: 32px;
    width: 100%;
    position: relative;
    top: -8px;
    background: linear-gradient(0deg, #0f0f0f, transparent);
}

.merit-accordian-inner-content .element-block__clamp-block:before {
    content: "";
    display: block;
    height: 32px;
    width: 100%;
    position: relative;
    top: -8px;
    background: linear-gradient(0deg, #2d2827, transparent);
}



div#builder-right-column-content-grid .input-block__input label {
    color: #c82434;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13px;
    font-family: 'vendetta';
}

div#builder-right-column-content-grid .button-component {
    justify-self: flex-end !important;
}



div#builder-right-column-content-grid .button-component {
    justify-self: flex-end !important;
}




/* Blood Potency */



.builder-table-overflow-block {
    overflow-x: auto;
}

.builder-table-overflow-block::-webkit-scrollbar {
    display: block;
    height: 8px !important;
}

.builder-table-overflow-block::-webkit-scrollbar-thumb {
    background-color: #252525;
}



.blood-potency-edit-label-value-container {
    gap: 8px;
}

.blood-potency-edit-label-value-container > div:first-child div {
    text-transform: uppercase;
    font-size: 18px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}

.blood-potency-edit-label-value-container > div:nth-child(2) div {
    text-transform: uppercase;
    font-size: 18px !important;
    font-weight: 700;
    color: #c82434 !important;
}

.blood-potency-edit-top-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.blood-potency-edit-tracker-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
}


.blood-potency-edit-tracker-container .button-component__button {
    background: #c82434;
    color: white !important;
    border-radius: 1px;
    font-weight: 700;
    font-size: 18px;
    padding: 0px;
    min-width: 32px;
    height: 32px;
}

.blood-potency-edit-tracker-container .exp-cost-container {
    column-gap: 4px;
    justify-content: center;
}

.drawer-section-container--value {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-column-end: 1;
    grid-row-end: span 2;
}

.blood-potency-edit-tracker-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    max-width: 160px;
    color: #CFCFCF;
    align-items: center;
    position: relative;
    z-index: 99;
    background: #0d0d0d;
    padding-right: 12px;
}

.blood-potency-edit-tracker-center-container div {
    justify-content: center !important;
    display: flex;
    font-family: 'vendetta';
}

.blood-potency-edit-tracker-container .exp-cost-container div {
    font-family: 'vendetta' !important;
    font-size: 10px !important;
    align-items: center;
    display: flex;
    font-weight: 700;
}

.blood-potency-edit-tracker-container .exp-spent-cell {
    gap: 8px;
    align-items: center;
}

.blood-potency-edit-tracker-container .exp-spent-cell > div:first-child div {
    font-family: 'vendetta' !important;
    font-size: 14px !important;
    font-weight: 700;
    color: #c82434 !important; 
}

.blood-potency-edit-tracker-container .exp-spent-cell > div:nth-child(2) div {
    font-family: 'vendetta' !important;
    text-transform: uppercase;
    font-size: 14px !important;
    font-weight: 700;
}


.builder .blood-potency-edit-container table {
    border: none;
    margin-top: 24px;
    min-width: 640px;
}

.builder .blood-potency-edit-container table p {
    line-height: normal;
    font-size: 14px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    text-align: center;
}

.builder .blood-potency-edit-container table tr td:last-child p {
    text-align: left;
}

.builder .blood-potency-edit-container table tr th:last-child p {
    text-align: left;
}

.builder .blood-potency-edit-container th p {
    font-size: 14px !important;
    line-height: 1 !important;
}

.builder .blood-potency-edit-container .Tabell-1---standard th, .builder .blood-potency-edit-container .Tabell-2---neg th {
    min-width: 48px;
}

.builder .blood-potency-edit-container .Tabell-1---standard td, .builder .blood-potency-edit-container .Tabell-2---neg td {
    padding: 8px !important;
    border: none !important;
}







/* Right Pane Loading */


.builder-right-column .skeleton-fallback > div:not(:first-child) {
    display: none;
}

.builder-right-column .skeleton-fallback > div:first-child {
    min-width: 100% !important;
}

.builder-right-column .skeleton-fallback > div:first-child > span {
    height: 48px !important;
}

.builder-right-column .skeleton-fallback {
    justify-content: flex-end;
}

.skeleton-fallback > div:first-child > span {
    background-color: #252525;
}





/* Dot Incremental Tracker */


.dot-purchase-single-type-select-table .builder-table-row {
    grid-template-columns: 1fr 1fr 48px !important;
}


.dots-incremental-select-container {
    flex-wrap: nowrap !important;
    align-items: center;
}

.dots-incremental-select button {
    background: #c82434;
    color: white !important;
    border-radius: 1px;
    font-weight: 700;
    font-size: 18px;
    padding: 0px;
    min-width: 32px;
    height: 32px;
}

.dots-incremental-select button:hover {
    filter: brightness(1.2);
    background: #c82434;
    transition: ease all .3s;
}

.dots-incremental-select {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
}

.dots-incremental-select-tracker {
    min-width: 100px;
    max-width: 100px;
    justify-content: center !important;
    gap: 8px;
}

.dots-incremental-select .exp-cost-container {
    column-gap: 4px;
    justify-content: center;
}

.dots-incremental-select-container .exp-spent-cell {
    justify-content: center;
    gap: 4px;
    align-items: center;
    min-width: 100px;
}


.dots-single-select-tracker {
    min-width: 200px;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 16px;
    flex-direction: row-reverse !important;
}

.dots-single-select-tracker .exp-cost-container {
    gap: 4px;
    justify-content: flex-end !important;
}

.builder-right-column .builder-table-row .dots-single-select-tracker .exp-cost-container > div > div {
    text-transform: uppercase !important;
    font-size: 11px !important;
}



.builder-right-column .dots-incremental-select-container .exp-cost-container .text-block__text.exp-cost-label {
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.builder-right-column .dots-incremental-select-container .exp-cost-container .text-block__text.exp-cost-value {
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.builder-right-column .dots-incremental-select-container .exp-spent-cell .text-block__text.exp-spent-subtitle {
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.builder-right-column .dots-incremental-select-container .exp-spent-cell .text-block__text.exp-spent-title {
    color: #c82434 !important;
}






/* Disciplines & Powers */



.disciplines-options-list-no-clan {
    margin-top: 16px;
}

.disciplines-options-list-container {
    row-gap: 16px;
}

.disciplines-options-list-header {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 16px;
}


.powers-options-list-container {
    row-gap: 16px;
}

.powers-options-list-header {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 16px;
}



.builder-right-column .powers-select-list .builder-table-row {
    grid-template-columns: 5fr 2fr 1fr min-content min-content;
}

.builder-right-column .rituals-select-list .builder-table-row {
    grid-template-columns: 5fr 2fr 1fr min-content min-content;
}

.powers-select-list .grid-table__columns {
    grid-template-columns: 5fr 2fr 1fr 100px 48px;
}

.rituals-select-list .grid-table__columns {
    grid-template-columns: 5fr 2fr 1.5fr 80px 48px;
}






/* END */




/* CONCEPT & LORE */




.right-content-container--character-details .grid-block {
    gap: 24px;
    row-gap: 8px;
}

.right-content-container--character-details .input-block {
  flex-basis: calc(50% - 14px);  
  max-width: calc(50% - 14px);
}


.builder-right-column .input-block__input .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    font-weight: 400;
    color: #CFCFCF !important;
    background: #010101;
}

.right-content-container--character-details .input-block:nth-last-child(1) {
    flex-basis: 100%;
    max-width: 100%;
}

.right-content-container--character-details .input-block:nth-last-child(2) {
    flex-basis: 100%;
    max-width: 100%;
}

.right-content-container--character-details .input-block:nth-last-child(3) {
    flex-basis: 100%;
    max-width: 100%;
}




.sheet-concept-section-header .text-block__text {
    text-transform: uppercase;
    font-size: 16px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
    color: gray;
    position: relative;
    z-index: 9;
    padding-right: 8px;
    margin-top: 16px
}


.sheet-concept-section-header .text-block__text:after {
    content: "";
    display: block;
    height: 0.5px;
    width: calc(100% - 72px);
    background: #333333;
    position: relative;
    top: -14px;
    right: -72px;
}

.sheet-concept-section-container--details > div:first-child > div:first-child {
    margin-top: 0px;
}


.sheet-concept-section-content-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sheet-bottom-container .concept-and-lore-box-component .sheet-box-component-content {
    row-gap: 16px;
}

.concept-input input {
    border-radius: 0px;
    background-color: #010101 !important;
    font-family: 'vendetta' !important;
    font-size: 15px !important;
    color: #CFCFCF !important;
    -webkit-text-fill-color: #CFCFCF !important;
}

.sheet-concept-section-container--details .sheet-concept-section-content-container > div:first-child {
    grid-column-end: span 2;
}

.sheet-concept-section-container--details .sheet-concept-section-content-container > div:nth-last-child(2) {
    grid-column-end: span 2;
}

.sheet-concept-section-container--details .sheet-concept-section-content-container > div:nth-last-child(3) {
    grid-column-end: span 2;
}

.sheet-concept-section-container--details .sheet-concept-section-content-container > div:last-child {
    grid-column-end: span 2;
}

.concept-input label {
    margin-top: 0px !important;
}

.sheet-concept-coterie-domain-container {
    grid-column-end: span 2;
    gap: 16px;
}

.concept-input .MuiOutlinedInput-notchedOutline {
    border: 1px solid #333333!important;
    border-radius: 0px !important;
}

.concept-input .MuiInputBase-multiline.Mui-readOnly textarea {
    border-radius: 0px;
    background: #010101;
    font-family: 'vendetta' !important;
    font-size: 15px !important;
    color: #CFCFCF !important;
    -webkit-text-fill-color: #CFCFCF !important;
}

sheet-concept-coterie-domain-container {
    grid-column-end: span 2 !important;
    gap: 16px;
}

.sheet-concept-coterie-domain-chasse-label.text-block__text {
    font-family: 'vendetta';
    font-size: 13px;
    font-weight: 700;
    color: var(--vtm-red) !important;
    text-transform: uppercase;
}

.sheet-concept-coterie-domain-chasse-value.text-block__text {
    border-radius: 0px;
    background: #010101;
    font-family: 'vendetta' !important;
    font-size: 15px !important;
    color: #CFCFCF !important;
    padding: 8px;
    border: 1px solid #333333;
}

.sheet-concept-section-container--coterie .sheet-concept-section-content-container > div:nth-last-child(5) {
    grid-column-end: span 2;
}

.sheet-concept-section-container--coterie .sheet-concept-section-content-container > div:nth-last-child(4) {
    grid-column-end: span 2;
}

.sheet-concept-section-container--coterie .sheet-concept-section-content-container > div:nth-last-child(3) {
    grid-column-end: span 2;
}

.sheet-concept-section-container--coterie .sheet-concept-section-content-container > div:nth-last-child(2) {
    grid-column-end: span 2;
}

.sheet-concept-section-container--coterie .sheet-concept-section-content-container > div:last-child {
    grid-column-end: span 2;
}






/* ADVANTAGES & FLAWS */




.sheet-bottom-container .merits-and-flaws-box-component .sheet-box-component-content {
    gap: 8px 24px;
    padding-bottom: 40px !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sheet-bottom-container .merits-and-flaws-box-component .sheet-box-component-content .grid-table__columns {
    display: none;
}

.sheet-bottom-container .merits-and-flaws-box-component .sheet-box-component-content .input-block {
    grid-column-end: span 2;
}

.sheet-advantage-table-container--merit {
    grid-column-start: 1;
    grid-row-end: span 2;
}

.sheet-advantage-table-container--background {
    grid-column-start: 2;
}

.sheet-advantage-table-container--loresheet {
    grid-column-start: 2;
}

.builder-background-merits-container {
    margin-top: 16px;
}

.builder-background-merit-section-header {
    text-transform: uppercase;
    font-size: 18px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
    margin-top: 16px;
    margin-bottom: -8px;
}

.builder-right-column .select-background-table .builder-table-row {
    grid-template-columns: 2fr 2fr min-content min-content;
}

.builder-right-column .select-loresheet-table .builder-table-row {
    grid-template-columns: 2fr 2fr min-content min-content;
}


span.merit-source-text {
    font-weight: 700;
}

.advantages-and-flaws-container .dots-cell {
    padding-right: 24px;
    flex-direction: column;
}

.advantages-and-flaws-container .dots-cell > div {
    justify-content: flex-end;
}

.advantages-and-flaws-container .dots-cell > div .tracker.tracker--overflow {
    justify-content: flex-end;
}

.advantages-and-flaws-container .dots-cell > div .tracker.tracker--overflow:after {
    content:"+";
    display: block;
    position: absolute;
    font-size: 14px;
}


.advantages-and-flaws-container .dots-cell > div .dots-tracker--advantage {
    margin-left: -4px;
}


.advantages-and-flaws-middle-content-container {
    margin-top: 16px !important;
}

.advantages-and-flaws-summary-text {
    margin-top: 16px !important;
}




.right-content-container .merit-list-container {
    display: grid;
    margin-top: 16px !important;
}


.builder-right-column p.loresheet-block-label {
    margin-top: 4px !important;
}



.select-background-table .grid-table__columns {
    grid-template-columns: 2fr 2fr min-content min-content;
}

.select-loresheet-table .grid-table__columns {
    grid-template-columns: 2fr 2fr min-content min-content;
}


.advantages-and-flaws-middle-content-container {
    margin-top: 16px;
}

.dot-spend-tracker-header {
    text-transform: uppercase;
    font-size: 18px !important;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}


.builder-right-column .main-holder {
    padding-top: 0px !important;
    padding-bottom: 24px;
}



.builder-right-column:after {
    content: "";
    display: block;
    height: 60px;
    width: 100%;
    position: absolute;
    z-index: 99;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(360deg, #0f0f0f 50%, transparent);
    background-size: 100%;
    background-repeat: repeat-x;
    pointer-events: none;
}
  



.builder-right-column > div:first-child div[role="heading"] {
    font-family: var(--font-cormorant);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0;
    color: white;
    font-variant: none;
    text-transform: uppercase;
    padding-left: 0px;
    line-height: 1;
}

div#builder-right-scroll-component-grid div {
    font-family: 'Garamond';
    font-size: 18px;
    color: #CFCFCF;
    line-height: 1.5;
    border-radius: 1px;
    flex-direction: row;
    flex-wrap: wrap;
}


.select-feature-right-header-container {
    padding: 0px !important;
    align-items: center;
}

.builder-right-column .drawer-inner-holder.inner-holder {
    padding-bottom: 0px;
    margin: 0px;
}



.builder__right-pane {
    min-width: 320px;
    background: #68111a;
    border-radius: 1px;
    padding: 1px !important;
    padding-bottom: 2px !important;
    min-height: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
}


.builder__right-paper {
    position: relative;
    overflow-y: auto !important;
    padding: 8px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    border-radius: 1px !important;
}



.builder-right-column .drawer {
    background-color: transparent !important;
}

.builder-right-column {
    max-height: calc(100% - 8px);
}

    
div#right-column-template > div:first-child > div:first-child {
    background: transparent;
    min-height: 44px;
    align-items: center;
}

div#builder-right-column-content-grid {
    padding-bottom: 40px;
    padding-right: 8px;
}
    
   
    
div#right-column-template > div:first-child > div:first-child > div:first-child {
    padding: 0px;
    align-items: center;
    position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
}

.right-header-buttons {
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
}

.icon-component__button:hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}

svg[data-testid="SettingsIcon"] path {
    fill: var(--co-clr-base-2);
}

svg[data-testid="CancelIcon"] {
    border: 3px solid #68111a;
    border-radius: 50%;
    background: #CFCFCF;
    height: 32px;
    width: 32px;
}

svg[data-testid="CancelIcon"]:hover {
    border-color: #c82434;
    transition: ease all .3s;
}

.icon-component__button {
    padding: 0px !important;
}

.icon-component__button svg path {
    color: #68111a;
}

.builder-right-column > div:first-child > div:first-child > div:first-child > div:first-child > div {
    font-variant: none;
    line-height: 1;
    text-transform: uppercase;
}

div#right-column-template > div:first-child > div:first-child > div:first-child button:not(.MuiIconButton-root) {
    text-transform: uppercase !important;
    font-size: 12px;
    height: 40px !important;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #246279 !important;
    background: url(https://content.demiplane.com/nexus/vampire/vtm-button-distress.png?format=webp);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    background-origin: padding-box;
    padding: 1.25rem 1rem;
    font-weight: 600 !important;
    font-family: 'vendetta';
    background-size: cover;
    justify-content: center;
    letter-spacing: .1em;
    text-shadow: 0 2px 10px #000;
    box-shadow: 0 1px 21px 5px #000;
    outline: 0.5px solid black;
    outline-offset: -4px;
    border-radius: 1px;
}

div#right-column-template > div:first-child > div:first-child > div:first-child button:not(.MuiIconButton-root):hover {
    filter: brightness(1.2);
    transition: ease all .3s;
}


/* Settings Rows */

.builder-settings-row {
    align-items: center;
}

.builder-settings-row-label {
    font-size: 16px !important;
    font-variant: small-caps;
    margin-top: 16px;
    margin-bottom: 8px;
}

.builder-settings-row-subtitle {
    font-family: 'Garamond';
    font-size: 16px;
    margin-bottom: 16px;
    margin-top: -4px;
}

.builder-settings-row-checkbox .checkbox-block__checkbox {
    color: #002c5e;
}


/* Techniques Mastery Block */

.mastery-control-button-container {
    justify-content: flex-start;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    margin-left: 16px !important;
}

.mastery-control-button-container .mastery-control-button {

    filter: none;
    border-radius: 0px;
    font-size: 11px;
    font-weight: 700;
    color: #1f344d;
}

.mastery-control-button-container .mastery-control-button--selected {
    background: rgb(31, 52, 77);
    filter: none !important;
    border-radius: 0px;
    font-size: 11px;
    color: white !important;
}
    
    
/* History Questions */


.history-question-no-playbook-wrapper {
    margin-top: 36px !important;
    font-size: 17px;
}

.history-question-no-playbook-wrapper .image-display {
    justify-content: center;
    display: flex;
}

.history-question-no-playbook-wrapper .image-display .image-display__image-block {
    margin-top: 24px;
    width: 500px;
    height: 405px;
}

.grid-block.history-question-wrapper {
    font-size: 16px;
    line-height: normal;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    margin-bottom: 24px;
}

.grid-block.history-question-input-wrapper div {
    width: 100%;
}

.grid-block.history-question-input-wrapper .input-block__input {
    margin-top: 12px;
}

.grid-block.history-question-input-wrapper div label {
    display: none;
}
    
.grid-block.history-question-input-wrapper .input-block__input input {
    font-size: 14px;
    font-weight: 700;
    font-family: 'vendetta';
} 
    
    
    
/* Grid Rows */


.builder-right-column .builder-table-row .text-block__text {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-family: 'vendetta' !important;
    text-transform: none !important;
    font-weight: 400;
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
    overflow: hidden;
}

.builder-right-column .stacked-title {
    padding-left: 16px;
    padding-right: 8px;
}

.builder-right-column .stacked-title__title {
    font-size: 14px !important;
    font-variant: none;
    text-transform: uppercase;
    font-family: 'vendetta' !important;
    letter-spacing: 1px;
    font-weight: 700;
}


.builder-right-column .stacked-title__description {
    font-size: 10px !important;
    font-variant: none;
    text-transform: uppercase;
    font-family: var(--font-cormorant) !important;
    color: gray !important;
    letter-spacing: 0.5px;
    font-weight: 700;
    line-height: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


div#generic-right-content-container .grid-table__column {
    font-family: var(--font-cormorant);
    color: #c82434;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 12px;
}

div#generic-right-content-container div#grid-table-component {
    margin-top: 16px;
}

div#generic-right-content-container .grid-table__column:first-of-type {
    padding-left: 16px;
}

.builder-right-column .builder-table-row {
    background-color: #2b2b2b;
    padding: 0px;
    margin: 2px !important;
    min-height: 52px;
    align-items: center;
    border: 1px solid #68111a;
    cursor: auto;
    display: grid !important;
    width: calc(100% - 8px);
    gap: 8px;
    grid-template-columns: 2fr 1fr min-content min-content;
}

.builder-dot-placement-header {
    align-items: center;
}

.dot-placement-cell {
    font-family: 'vendetta';
    color: #CFCFCF;
    font-weight: 700;
    font-size: 15px;
}

button.expand-button {
    width: 30px;
    height: 30px;
    justify-self: center;
    margin: 4px;
    grid-column-start: expand;
    padding: 0px !important;
}

button.expand-button svg {
    color: #666666;
}

.dot-placement-single-type-header {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: -16px;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}

.dot-purchase-single-type-header {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: -16px;
    font-family: 'Bodoni72' !important;
    word-spacing: 5px;
}








/* Grid Template Columns */



.occupations-select-table .grid-table__columns {
    grid-template-columns: 2fr 2fr 100px 50px;
}

div#generic-right-content-container .generic-boost-table .builder-table-row {
    grid-template-columns: 4fr 2fr 1fr 24px;
}

div#generic-right-content-container .generic-boost-table .grid-table__columns {
    grid-template-columns: 3fr 2fr 1fr 1fr 24px;
}

div#generic-right-content-container .generic-boost-table .grid-table__column:nth-child(2) {
    justify-content: center;
}




div#generic-right-content-container .generic-moves-table .builder-table-row {
    grid-template-columns: 4fr 1fr 1fr 24px;
}

div#generic-right-content-container .generic-moves-table .grid-table__columns {
    grid-template-columns: 4fr 1fr 1fr 24px;
}




div#generic-right-content-container .generic-techniques-table .builder-table-row {
    grid-template-columns: 3fr 2fr 1fr 24px;
}

div#generic-right-content-container .generic-techniques-table .grid-table__columns {
    grid-template-columns: 3fr 2fr 1fr 24px;
}


.bar-tracker {
    flex-flow: nowrap !important;
    gap: 0px;
}

.tracker.bar-tracker > div:not(:last-child):nth-child(3n) {
    margin-right: 4px;
}
   

.bar-tracker .tracker__item {
    border-radius: 0% !important;
    height: 32px;
}
.gilded-tracker .tracker__item {
    border-radius: 0% !important;
    transform: rotate(45deg);
}


/*Circle Tracker */
.right-content-container--circle-details > div:first-child {
    row-gap: 16px;
}

.circle--advancement-circle {
    justify-content: center;
}

.circle--advancement-circle-tracker {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 16px !important;
    gap: 24px !important;
}

.circle--advancement-circle .dot-tracker-center-container {
    --circle-radius: 72px;
    width: calc(var(--circle-radius)*2);
    height: calc(var(--circle-radius)*2);
    border-radius: 51%;
    position: relative;
}

.circle--advancement-circle .dot-tracker-center-container::before {
    content: '';
    position: absolute;
    left: 46%;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-circle-sheet-cirlce-top.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 24px;
    width: 24px;
    top: -12px;
}

.circle--advancement-circle .dot-tracker-center-container:after {
    content: '';
    position: absolute;
    left: 50%;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-circle-candle.svg), #ffc484db;
    background-repeat: no-repeat;
    background-size: auto 64px;
    background-position: center;
    height: 72px;
    width: 36px;
    top: 50%;
    bottom: 50%;
    right: 50%;
    transform: translate(-46%, -50%);
    border-radius: 100%;
    box-shadow: 0 0 2px #ffc484d1, 0 0 10px #ffc484d1, 0 0 20px #ffc484d1, 0 0 30px #ffc484d1, 0 0 40px #ffc484d1, 0 0 50px #ffc484d1;
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item {
    position: absolute;
    top: 51%;
    left: 51%;
    width: 14px;
    height: 14px;
    margin: -8px;
    line-height: 10px;
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(1) {
    transform: rotate(-74.6deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(2) {
    transform: rotate(-60.2deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(3) {
    transform: rotate(-45.8deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(4) {
    transform: rotate(-31.4deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(5) {
    transform: rotate(-17.0deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(6) {
    transform: rotate(-2.6deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(7) {
    transform: rotate(11.8deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(8) {
    transform: rotate(26.2deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(9) {
    transform: rotate(40.6deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(10) {
    transform: rotate(55.0deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(11) {
    transform: rotate(69.4deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(12) {
    transform: rotate(83.8deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(13) {
    transform: rotate(98.2deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(14) {
    transform: rotate(112.6deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(15) {
    transform: rotate(127.0deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(16) {
    transform: rotate(141.4deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(17) {
    transform: rotate(155.8deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(18) {
    transform: rotate(170.2deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(19) {
    transform: rotate(184.6deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(20) {
    transform: rotate(199.0deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(7n) {
    border: 4px double var(--co-clr-green);
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(21) {
    transform: rotate(213.4deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(22) {
    transform: rotate(227.8deg) translate(var(--circle-radius));
}

.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(23) {
    transform: rotate(242.2deg) translate(var(--circle-radius));
}


.circle--advancement-circle .dot-tracker-center-container .tracker__item:nth-of-type(24) {
    transform: rotate(256.6deg) translate(var(--circle-radius));
}

.circle--advancement-circle-current {
    font-size: 22px;
    font-family: 'Quelity-Bold';
}

.circle--advancement-circle-desc {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}




.viewing-banner {
    z-index: 9;
}

.viewingBannerContainer {
    border-bottom: 2px solid var(--co-clr-base-3);
    border-top: 1px solid var(--co-gold);
    padding: 8px;
    margin-bottom: 4px;
    color: var(--co-clr-base-1);
    gap: 16px;
}

.viewingBannerTitle {
    font-family: MinionPro-Regular;
    font-size: 14px;
    color: var(--co-clr-base-1);
}

button.viewing-banner__copy {
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 12px;
    line-height: normal;
    top: -2px;
    height: 24px;
    border: none;
    min-width: 80px;
    padding: 0px 8px;
}

h4.viewingBannerTitleReadOnly.viewing-banner__title-readonly {
    color: var(--co-clr-base-2);
    font-size: 12px;
    margin-right: 8px;
    position: relative;
    top: 0px;
}

.viewing-banner__copy-block {
    position: relative;
    right: unset;
}

button.viewing-banner__copy:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

button.viewing-banner__copy:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

button.viewing-banner__copy:hover {
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-secondary-button-middle.png?format=webp);
    color: var(--co-clr-base-5) !important;
    background-color: transparent;
    border: none;
}

button.viewing-banner__copy:hover:before {
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-secondary-button-left.png?format=webp);
}

button.viewing-banner__copy:hover:after {
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-secondary-button-right.png?format=webp);
}





/* THEMES */





/* GILDED THEME */



.theme-gilded .journal-container .grid-table-row__block > div:first-child {
    font-family: 'MinionPro-Regular';
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    width: unset;
    padding-left: 16px;
}

.theme-gilded .journal-container .grid-table-row__block > div {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    font-weight: 400;
    width: unset;
    text-transform: none;
    pointer-events: none;
    color: var(--co-clr-off-white);
}

.theme-gilded .journal-container .grid-table-row__block > div p {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    font-weight: 400;
    width: unset;
    text-transform: none;
    pointer-events: none;
    color: var(--co-clr-off-white);
}

.theme-gilded .journal-container .grid-table-row__block .text-block__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
    color: var(--co-clr-off-white);
}


.theme-gilded .journal-container__loading-container > div:first-child {
    background: #021a1cb8;
}

.theme-gilded .journal-container__no-results {
    color: var(--co-clr-off-white);
}

.theme-gilded .resistances-empty {
    color: var(--co-clr-off-white);
}

.theme-gilded h3.tabs__label {
    font-weight: 400;
    font-size: 28px;
    font-family: 'AntiquarianScribe';
    text-transform: none;
    filter: drop-shadow(2px 4px 6px #101010);
    text-shadow: 0px 0px 6px #101010;
}

.theme-gilded div#character-sheet .center-drives--wrapper .center-drive--header:before {
    content: "";
    display: block;
    position: absolute;
    height: 16px;
    width: 16px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/g-triangle-tl.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    left: -4px;
    top: -4px;
    filter: drop-shadow(0px 0px 6px black);
}

.theme-gilded div#character-sheet .center-drives--wrapper .center-drive--header:after {
    content: "";
    display: block;
    position: absolute;
    height: 16px;
    width: 16px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/g-triangle-tr.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    right: -4px;
    top: -4px;
    filter: drop-shadow(0px 0px 6px black);
}


.theme-gilded div#character-sheet .center-drives--wrapper > div:first-child .center-drive--header:before {
    content: "";
    display: block;
    position: absolute;
    height: 64px;
    width: 64px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-tt-l.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    left: -10px;
    top: -10px;
    filter: drop-shadow(0px 0px 6px black);
}

.theme-gilded div#character-sheet .center-drives--wrapper > div:last-child .center-drive--header:after {
    content: "";
    display: block;
    position: absolute;
    height: 64px;
    width: 64px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-tt-r.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    right: -10px;
    top: -10px;
    filter: drop-shadow(0px 0px 6px black);
}

.theme-gilded div#character-sheet .tabs {
    background: transparent !important;
}
  
.theme-gilded .gear-wrapper button.gear--in-use-button {
      color: var(--co-clr-base-2);
}

.theme-gilded .gear-wrapper button.gear--in-use-button.gear-selected {
    background: var(--co-clr-base-3);
    color: var(--co-clr-base-1);
}

.theme-gilded .gear-wrapper button.gear--in-use-button:hover {
    background: var(--co-clr-base-3) !important;
    color: var(--co-clr-base-1);
    filter: none !important;
}

.theme-gilded .gear-wrapper button.gear--in-use-button.gear-selected:hover {
    background: var(--co-clr-base-4) !important;
    color: transparent;
}


.theme-gilded .tabs__tab--selected:after {
    content: "";
    height: 26px;
    width: 180px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/g-edge-divider.png?format=webp);
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    left: -21px;
    top: -16px;
    filter: brightness(0.85);
    margin-bottom: -26px;
}


.theme-gilded .gear-wrapper button.gear--in-use-button.gear-selected:hover:after {
    content: "Unselect";
    color: white;
    position: absolute;
    padding-right: 2px;
}

.theme-gilded .center-marks--wrapper:after {
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-center-divider-middle.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-center-divider-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-center-divider-right.png?format=webp);
}

.theme-gilded .center-drives--wrapper > div:last-child:after {
    content: "";
    width: 36px;
    height: 100px;
    position: absolute;
    background: url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-top-br.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    bottom: -42px;
    right: -9px;
}


.theme-gilded .center-drives--wrapper > div:first-child:after {
    content: "";
    width: 36px;
    height: 100px;
    position: absolute;
    background: url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-top-bl.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    bottom: -42px;
    left: -2px;
}

.theme-gilded div#character-sheet div#tabs-container:before {
    content: "";
    display: block;
    height: calc(100% - 483px);
    width: 150px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/g-corner-top-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/g-corner-bottom-left.png?format=webp) !important;
    background-position: top 8px left 8px, bottom left 8px;
    background-repeat: no-repeat;
    background-size: 150px, 150px;
    z-index: 9;
    left: -16.5px;
    bottom: -8px;
    pointer-events: none;
}

.theme-gilded div#character-sheet div#tabs-container:after {
    content: "";
    display: block;
    height: calc(100% - 483px);
    width: 150px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/g-corner-top-right.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/g-corner-bottom-right.png?format=webp) !important;
    background-position: top 8px right 8px, bottom right 8px;
    background-repeat: no-repeat;
    background-size: 150px, 150px;
    z-index: 9;
    right: -16.5px;
    bottom: -8px;
    pointer-events: none;
}

@media (min-width: 1024px) and (max-height: 1079px) {
    .theme-gilded div#character-sheet div#tabs-container:before,
    .theme-gilded div#character-sheet div#tabs-container:after {
        height: calc(100% - 509px);
        bottom: 17px;
    }
}

.theme-gilded .circle-sheet-tab-content .sheet-bottom-container:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    height: 50px;
    width: calc(100% - 30px);
    background: linear-gradient(0deg, var(--co-clr-green), transparent);
    pointer-events: none;
    z-index: 9;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.theme-gilded div#circle-sheet-tab-content .circle--advancement-manage-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    min-width: 130px;
}

.theme-gilded div#circle-sheet-tab-content .circle--advancement-manage-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.theme-gilded div#circle-sheet-tab-content .circle--advancement-manage-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


.theme-gilded div#circle-sheet-tab-content .abilities-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

.theme-gilded div#circle-sheet-tab-content .abilities-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.theme-gilded div#circle-sheet-tab-content .abilities-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


.theme-gilded div#circle-sheet-tab-content .gear-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

.theme-gilded div#circle-sheet-tab-content .gear-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.theme-gilded div#circle-sheet-tab-content .gear-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


.theme-gilded .manage-button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves' !important;
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    letter-spacing: 0px;
    line-height: normal;
    border: none;
    right: 8px;
    margin-left: 16px;
}

.theme-gilded .manage-button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.theme-gilded .manage-button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}


.theme-gilded .manage-button:hover {
    filter: brightness(1.2);
}

.sheet-background.theme-gilded:before {
      display: none !important;
}

.sheet-background.theme-gilded {
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-body-bg.jpg?format=webp) !important;
   background-blend-mode: normal !important;
    background-size: 2240px !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #101010 !important;
}

.theme-gilded div#tabs-container > div:first-child {
      background: none !important;
   background-blend-mode: normal !important;
    background-size: 180px !important;
    background-position: top -114px left calc(50% + 48px) !important;
    background-repeat: no-repeat !important;
}

.theme-gilded .avatar {
    top: -6px;
}

.theme-gilded .avatar:after {
    display: none;
}

.theme-gilded .avatar:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-portrait.png?format=webp) !important;
    height: 82px;
    width: 82px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    top: 4px;
    left: 4px;
    display: block;
    position: absolute;
    filter: drop-shadow(0px 0px 6px black);
}

.theme-gilded div#avatar-box {
    height: 58px;
    width: 58px;
    position: relative;
    top: 17px;
    left: 17px;
    border: none !important;
    border-radius: 50%;
}

.theme-gilded .center-drive--wrapper {
    background-color: var(--co-clr-dark-green);
    background: url(https://content.demiplane.com/nexus/candelaobscura/g-green-bg.jpg?format=webp);
    background-size: auto;
    background-position: top left;
    border: solid !important;
    border-image-slice: 12 12 12 12 !important;
    border-image-width: 4px 4px 4px 4px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/candelaobscura/g-frame-T1.webp) !important;
    border-radius: 0 !important;
}

.theme-gilded .tabs__tab--selected h3.tabs__label {
    color: var(--co-clr-accent-2);
}

.theme-gilded h3.tabs__label {
    color: var(--co-clr-off-white);
}

.theme-gilded .center-marks--wrapper {
        background: url(https://content.demiplane.com/nexus/candelaobscura/g-silver-bg.jpg?format=webp) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border: solid !important;
    border-image-slice: 12 12 12 12 !important;
    border-image-width: 4px 4px 4px 4px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: stretch stretch !important;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/candelaobscura/g-frame-T1.webp) !important;
}

.theme-gilded .center-drive-action--label-wrapper {
    color: var(--co-clr-off-white);
}

.theme-gilded .center-drive-action--label-desc {
    color: var(--co-clr-base-2);
}

.theme-gilded .center-drive-resistance-row--label {
    color: var(--co-clr-off-white);
}

.theme-gilded div#character-sheet .center-drive--header {
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-metal-bg.jpg?format=webp) !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border: solid !important;
    border-image-slice: 12 12 12 12 !important;
    border-image-width: 4px 4px 4px 4px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/candelaobscura/g-frame-T1.webp) !important;
}

.theme-gilded .sheet-header-container {
    padding-left: 0px !important;
    margin-top: 0px;
    background: linear-gradient(90deg, transparent calc(100% - 180px), #101010 calc(100% - 42px), transparent calc(100% - 4px)), url(https://content.demiplane.com/nexus/candelaobscura/gold-dust-T1.webp);
    background-size: cover, 934px;
    background-position: top center, top center;
    background-repeat: no-repeat;
    border-bottom-right-radius: 50px;
    height: 82px;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .theme-gilded div#character-sheet .center-drives--wrapper > div:nth-child(2) .center-drive--header:after {
      content: "";
        display: block;
        position: absolute;
        height: 64px;
        width: 64px;
        background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-tt-r.png?format=webp) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        right: -10px;
        top: -10px;
        filter: drop-shadow(0px 0px 6px black);
    }
    
    .theme-gilded div#character-sheet .center-drives--wrapper > div:last-child .center-drive--header:after {
        content: "";
        display: block;
        position: absolute;
        height: 16px;
        width: 16px;
        background: url(https://content.demiplane.com/nexus/candelaobscura/g-triangle-tr.png?format=webp) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        right: -4px;
        top: -4px;
        filter: drop-shadow(0px 0px 6px black);
    }
    
    .theme-gilded .center-drives--wrapper > div:last-child:after {
        display: none;
    }
    
    .theme-gilded div#character-sheet .center-drives--wrapper > div:nth-child(2):after {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-top-br.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        bottom: -42px;
        right: -9px;
    }
    
    .theme-gilded div#character-sheet div#tabs-container:before,
    .theme-gilded div#character-sheet div#tabs-container:after {
        height: calc(100% - 793px);
    }
}

@media screen and (max-width: 767px) {
    .theme-gilded .sheet-header-container {
        background-image: linear-gradient(270deg, transparent calc(100% - 180px), #101010 calc(100% - 42px), transparent calc(100% - 0px)), url(https://content.demiplane.com/nexus/candelaobscura/gold-dust-T1.webp) !important;
        background-size: cover, auto 102px !important;
    }
    
    .theme-gilded .mobile-header-button-holder {
        background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-metal-bg.jpg?format=webp) !important;
        background-size: auto !important;
        background-repeat: repeat !important;
    }
    
    .theme-gilded .center-drives--wrapper > div:first-child:before,
    .theme-gilded .center-drives--wrapper > div:first-child:after {
        display: none;
    }
    
    .theme-gilded div#character-sheet .center-drives--wrapper > div:first-child .center-drive--header:after {
        content: "";
        display: block;
        position: absolute;
        height: 64px;
        width: 64px;
        background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-tt-r.png?format=webp) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        right: -10px;
        top: -10px;
        filter: drop-shadow(0px 0px 6px black);
    }
    
    .theme-gilded div#character-sheet .center-drives--wrapper > div:last-child .center-drive--header:after,
    .theme-gilded div#character-sheet .center-drives--wrapper > div:nth-child(2) .center-drive--header:after {
        content: "";
        display: block;
        position: absolute;
        height: 16px;
        width: 16px;
        background: url(https://content.demiplane.com/nexus/candelaobscura/g-triangle-tr.png?format=webp) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        right: -4px;
        top: -4px;
        filter: drop-shadow(0px 0px 6px black);
    }
    
    .theme-gilded .center-drives--wrapper > div:last-child:after {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-top-br.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        bottom: -42px;
        left: unset;
    }
    
    .theme-gilded .center-drives--wrapper > div:last-child:before {
        content: "";
        width: 36px;
        height: 100px;
        position: absolute;
        background: url(https://content.demiplane.com/nexus/candelaobscura/g-sheet-top-bl.png?format=webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
        bottom: -42px;
        left: -2px;
    }
}

.theme-gilded div#character-sheet .sheet-bottom-container {
    background-color: transparent !important;
    color: var(--co-clr-off-white);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/g-green-top.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/g-green-seamless.jpg?format=webp) !important;
    background-position: top -64px center, top center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: cover, auto !important;
    border: solid !important;
    border-image-slice: 12 12 12 12 !important;
    border-image-width: 4px 4px 4px 4px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/candelaobscura/g-frame-T1.webp) !important;
}

.theme-gilded .sheet-bottom-container > div:first-child div#box-content:after {
    background: linear-gradient(0deg, var(--co-clr-green), transparent) !important;
}

.theme-gilded div#character-sheet div#tabs-container > div:first-child:after {
    content: "";
    background: linear-gradient(0deg, var(--co-clr-green), transparent);
}

.theme-gilded div#abilities-and-gear-tab-content:after {
    content: "";
    background: linear-gradient(0deg, var(--co-clr-green), transparent);
}

.theme-gilded .abilities-header-wrapper {
    color: var(--co-clr-off-white);
}

.theme-gilded .gear-header-wrapper {
    color: var(--co-clr-off-white);
}

.theme-gilded button.reset-button {
    color: var(--co-clr-base-1) !important;
}

.theme-gilded .sheet-bottom-container div#box-content::-webkit-scrollbar-thumb {
    background-color: var(--co-clr-base-5) !important;
    pointer-events: all;
}

.theme-gilded .ability-wrapper {
    background: var(--co-clr-base-2);
    padding: 16px;
    padding-bottom: 12px;
    border: 1px solid var(--co-clr-base-2);
    color: var(--co-clr-off-white);
}

.theme-gilded .ability-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-metal-bg.jpg?format=webp) !important;
    background-size: auto !important;
    background-repeat: repeat !important;
}

.circle--resources-wrapper > div:not(:first-child):after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--co-clr-white);

}

.theme-gilded .ability-name {
    color: var(--co-clr-base-1);
}

.theme-gilded .ability-wrapper > div:first-child > div:first-child {
    color: var(--co-clr-base-2);
}

.theme-gilded .gear-wrapper {
    background: var(--co-clr-base-2);
    padding: 16px;
    padding-bottom: 12px;
    border: 1px solid var(--co-clr-base-2);
    color: var(--co-clr-off-white);
}

.theme-gilded .gear-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: url(https://content.demiplane.com/nexus/candelaobscura/gilded-metal-bg.jpg?format=webp) !important;
    background-size: auto !important;
    background-repeat: repeat !important;
}

.theme-gilded .gear-wrapper .gear-top-holder .text-block__text {
    color: var(--co-clr-base-1);
}

.theme-gilded .gear-wrapper .circle-gear {
    color: var(--co-clr-base-2);
}

.theme-gilded .gear-top-holder > div:last-child > div label {
    color: var(--co-clr-base-2);
}

.theme-gilded .relationship-row-container:after {
    content: '';
    background: var(--co-clr-base-5);
}

.theme-gilded .relationship-remove-button button {
    border: 1px solid var(--co-clr-base-2);
}

.theme-gilded .relationship-remove-button button:after {
    content: "Remove";
    color: var(--co-clr-base-1);
}

.theme-gilded div#character-sheet .input-block label,
.theme-gilded div#character-sheet .select-block label {
    color: var(--co-clr-base-1) !important;
}

.theme-gilded .grid-table__column {
    font-family: 'mrs-eaves';
    color: var(--co-clr-base-1);
}

.theme-gilded .journal-container .grid-table-row__block {
    color: var(--co-clr-off-white);
}

.theme-gilded .journal-container .grid-table-row__block:after {
    content: '';
    background: var(--co-clr-base-5);
}

.theme-gilded .circle--advancement-wrapper,
.theme-gilded div#circle-sheet-tab-content {
    color: var(--co-clr-off-white);
}

.theme-gilded .circle--advancement-label {
    color: var(--co-clr-base-1);
}

.theme-gilded .circle-abilities-label {
    color: var(--co-clr-base-1);
}

.theme-gilded .circle--resources-wrapper > div:first-child {
    color: var(--co-clr-base-1);
}

.theme-gilded .circle--resources-wrapper > div:not(:first-child):after {
    content: '';
    background: var(--co-clr-base-5);
}

.theme-gilded .circle--resources-wrapper > div:not(:first-child) {
    color: var(--co-clr-off-white);
}

.theme-gilded .circle-advancement-label {
    color: var(--co-clr-base-1);
}

.theme-gilded .circle-gear-label {
    color: var(--co-clr-base-1);
}

.theme-gilded .circle-abilities-wrapper + div {
    color: var(--co-clr-off-white);
}

.theme-gilded .circle-gear-empty.empty-state-text {
    color: var(--co-clr-off-white);
}

.theme-gilded .parsed-html-block ul li:before {
    filter: invert(1);
}


/* END Gilded */






/* LIGHTHOUSE THEME */



.theme-lighthouse .journal-container .grid-table-row__block > div:first-child {
    font-family: 'MinionPro-Regular';
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    width: unset;
    padding-left: 16px;
}

.theme-lighthouse .journal-container .grid-table-row__block > div {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    font-weight: 400;
    width: unset;
    text-transform: none;
    pointer-events: none;
    color: var(--co-clr-off-white);
}

.theme-lighthouse .journal-container .grid-table-row__block > div p {
    font-family: 'JMH Typewriter';
    font-size: 13px;
    font-weight: 400;
    width: unset;
    text-transform: none;
    pointer-events: none;
    color: var(--co-clr-off-white);
}

.theme-lighthouse .journal-container .grid-table-row__block .text-block__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
    color: var(--co-clr-off-white);
}


.theme-lighthouse .journal-container__loading-container > div:first-child {
    background: #282523c2;
}

.theme-lighthouse .journal-container__no-results {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .resistances-empty {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .gear-wrapper button.gear--in-use-button {
      color: var(--co-clr-base-2);
}

.theme-lighthouse .gear-wrapper button.gear--in-use-button.gear-selected {
    background: var(--co-clr-base-3);
    color: var(--co-clr-base-1);
}

.theme-lighthouse .gear-wrapper button.gear--in-use-button:hover {
    background: var(--co-clr-base-3) !important;
    color: var(--co-clr-base-1);
    filter: none !important;
}

.theme-lighthouse .gear-wrapper button.gear--in-use-button.gear-selected:hover {
    background: var(--co-clr-base-4) !important;
    color: transparent;
}

.theme-lighthouse .gear-wrapper button.gear--in-use-button.gear-selected:hover:after {
    content: "Unselect";
    color: white;
    position: absolute;
    padding-right: 2px;
}

.theme-lighthouse div#character-sheet .tabs {
    background: transparent !important;
}


.theme-lighthouse div#character-sheet div#tabs-container:before {
    content: "";
    display: block;
    height: calc(100% - 479px);
    width: 150px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-corner-top-left.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-corner-bottom-left.png?format=webp) !important;
    background-position: top 8px left 8px, bottom left 8px;
    background-repeat: no-repeat;
    background-size: 150px, 150px;
    z-index: 9;
    left: -16.5px;
    bottom: -8px;
    pointer-events: none;
}

.theme-lighthouse div#character-sheet div#tabs-container:after {
    content: "";
    display: block;
    height: calc(100% - 479px);
    width: 150px;
    position: absolute;
    background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-corner-top-right.png?format=webp), url(https://content.demiplane.com/nexus/candelaobscura/co-corner-bottom-right.png?format=webp) !important;
    background-position: top 8px right 8px, bottom right 8px;
    background-repeat: no-repeat;
    background-size: 150px, 150px;
    z-index: 9;
    right: -16.5px;
    bottom: -8px;
    pointer-events: none;
}

@media (min-width: 1024px) and (max-height: 1079px) {
    .theme-lighthouse div#character-sheet div#tabs-container:before,
    .theme-lighthouse div#character-sheet div#tabs-container:after {
        bottom: 17px;
        height: calc(100% - 507px);
        
    }
    
    
}

.theme-lighthouse .circle-sheet-tab-content .sheet-bottom-container:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    height: 50px;
    width: calc(100% - 30px);
    background: linear-gradient(0deg, #555555, transparent);
    pointer-events: none;
    z-index: 9;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 0px, black 0px), radial-gradient(circle at top right, transparent 0, transparent 0px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

.theme-lighthouse div#circle-sheet-tab-content {
    color: var(--co-clr-off-white);
}

.theme-lighthouse div#circle-sheet-tab-content .circle--advancement-manage-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
    min-width: 130px;
}

.theme-lighthouse div#circle-sheet-tab-content .circle--advancement-manage-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.theme-lighthouse div#circle-sheet-tab-content .circle--advancement-manage-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


.theme-lighthouse div#circle-sheet-tab-content .abilities-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

.theme-lighthouse div#circle-sheet-tab-content .abilities-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.theme-lighthouse div#circle-sheet-tab-content .abilities-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


.theme-lighthouse div#circle-sheet-tab-content .gear-header-button button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves';
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    line-height: normal;
    height: 36px;
    border: none;
}

.theme-lighthouse div#circle-sheet-tab-content .gear-header-button button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}

.theme-lighthouse div#circle-sheet-tab-content .gear-header-button button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -16px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    display: block;
}


.theme-lighthouse .manage-button {
    background-color: var(--co-clr-base-1);
    border-radius: 0px;
    color: var(--co-clr-base-1) !important;
    font-family: 'mrs-eaves' !important;
    text-transform: uppercase;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-middle.png?format=webp);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    font-size: 11px;
    letter-spacing: 0px;
    line-height: normal;
    border: none;
    right: 8px;
    margin-left: 16px;
}

.theme-lighthouse .manage-button:before {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    left: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-left.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}

.theme-lighthouse .manage-button:after {
    content: "";
    width: 36px;
    height: 100%;
    position: absolute;
    right: -18px;
    top: 0px;
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-primary-button-right.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
}


.theme-lighthouse .manage-button:hover {
    filter: brightness(1.2);
}

.sheet-background.theme-lighthouse:before {
      display: none !important;
}

.sheet-background.theme-lighthouse {
    background: url(https://content.demiplane.com/nexus/candelaobscura/co-lighthouse-bg.jpg?format=webp) !important;
   background-blend-mode: normal !important;
    background-size: 1880px !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #081414 !important;
}

.theme-lighthouse div#tabs-container > div:first-child {
      background: url(https://content.demiplane.com/nexus/candelaobscura/co-lh-middle-bg.png?format=webp) !important;
   background-blend-mode: normal !important;
    background-size: 180px !important;
    background-position: top -114px left calc(50% + 48px) !important;
    background-repeat: no-repeat !important;
}

.theme-lighthouse .avatar {
    top: -6px;
}

.theme-lighthouse .avatar:after {
    display: none;
}

.theme-lighthouse .avatar:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/candelaobscura/portrait-lh.png?format=webp) !important;
    height: 92px;
    width: 92px;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block;
    position: absolute;
}

.theme-lighthouse div#avatar-box {
    height: 58px;
    width: 58px;
    position: relative;
    top: 17px;
    left: 17px;
    border: none !important;
    border-radius: 50%;
}

.theme-lighthouse .center-drive--wrapper {
    background: var(--even-darker-p-color);
}

.theme-lighthouse .tabs__tab--selected h3.tabs__label {
    color: var(--co-clr-accent-2);
}

.theme-lighthouse h3.tabs__label {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .center-marks--wrapper {
    background: var(--co-clr-green);
}

.theme-lighthouse .center-drive-action--label-wrapper {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .center-drive-action--label-desc {
    color: var(--co-clr-base-2);
}

.theme-lighthouse .center-drive-resistance-row--label {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .center-drive--header {
    background: var(--co-clr-green);
    outline-color: var(--co-clr-base-2) !important;
}

.theme-lighthouse .sheet-header-container {
    padding-left: 0px !important;
    margin-top: 0px;
    background-image: linear-gradient(90deg, transparent calc(100% - 180px), #173c3dcc calc(100% - 42px), transparent calc(100% - 4px)), url(https://content.demiplane.com/nexus/candelaobscura/co-lh-T2.webp);
    background-size: cover, 934px;
    background-position: top center, top center;
    background-repeat: no-repeat;
    border-bottom-right-radius: 50px;
    height: 82px;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .theme-lighthouse .sheet-center-content-container {
        background: url(https://content.demiplane.com/nexus/candelaobscura/co-lh-middle-bg.png?format=webp) !important;
        background-blend-mode: normal !important;
        background-size: 125px !important;
        background-position: top 52px left calc(50% + 0px) !important;
        background-repeat: no-repeat !important;
    }
    
    .theme-lighthouse div#character-sheet div#tabs-container:after,
    .theme-lighthouse div#character-sheet div#tabs-container:before {
        height: calc(100% - 792px);
    }
}

@media screen and (max-width: 767px) {
    .theme-lighthouse .sheet-header-container {
        background-image: linear-gradient(270deg, #0c1c1c69 calc(100% - 180px), #000000cc calc(100% - 0px), transparent calc(100% - 4px)), url(https://content.demiplane.com/nexus/candelaobscura/co-lh-T2.webp) !important;
        background-size: cover, auto 102px !important;
        background-position: top center, top left 25% !important; 
    }
    
    .theme-lighthouse .mobile-header-button-holder {
        border-top: 1px solid var(--co-gold);
        border-bottom: 1px solid var(--co-gold);
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        background-image: url(https://content.demiplane.com/nexus/candelaobscura/co-top-green.jpg?format=webp), linear-gradient(180deg, #0f181a 370px, rgba(255, 255, 255, 0) 370px) !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
        background-size: auto 100% !important;
    }
}

.theme-lighthouse div#character-sheet .sheet-bottom-container {
    background-color: transparent !important;
    color: var(--co-clr-off-white);
    padding: 16px !important;
    height: calc(100vh - 16px);
    background-image: linear-gradient(180deg, var(--even-darker-p-color) calc(20%), rgb(1 1 1 / 0%) 100%, transparent), linear-gradient(0deg, #77777777 calc(0%), rgb(1 1 1 / 0%) 100%, transparent), url(https://content.demiplane.com/nexus/candelaobscura/lh-mid-bg-T1.webp) !important;
    background-position: top center, top center, bottom left calc(50% + 4px) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: cover, cover, 1064px !important;
}

.theme-lighthouse .sheet-bottom-container > div:first-child div#box-content:after {
    background: linear-gradient(0deg, #555555, transparent) !important;
}

.theme-lighthouse div#character-sheet div#tabs-container > div:first-child:after {
    content: "";
    background: linear-gradient(0deg, #555555, transparent);
}

.theme-lighthouse div#abilities-and-gear-tab-content:after {
    content: "";
    background: linear-gradient(0deg, #555555, transparent);
}

.theme-lighthouse .abilities-header-wrapper {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .gear-header-wrapper {
    color: var(--co-clr-off-white);
}

.theme-lighthouse button.reset-button {
    color: var(--co-clr-base-1) !important;
}

.theme-lighthouse .sheet-bottom-container div#box-content::-webkit-scrollbar-thumb {
    background-color: var(--co-clr-base-5) !important;
    pointer-events: all;
}

.theme-lighthouse .ability-wrapper {
    background: var(--co-clr-base-2);
    padding: 16px;
    padding-bottom: 12px;
    border: 1px solid var(--co-clr-base-2);
    color: var(--co-clr-off-white);
}

.theme-lighthouse .ability-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--darker-p-color);
}

.theme-lighthouse .ability-name {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .ability-wrapper > div:first-child > div:first-child {
    color: var(--co-clr-base-2);
}

.theme-lighthouse .gear-wrapper {
    background: var(--co-clr-base-2);
    padding: 16px;
    padding-bottom: 12px;
    border: 1px solid var(--co-clr-base-2);
    color: var(--co-clr-off-white);
}

.theme-lighthouse .gear-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: var(--darker-p-color);
}

.theme-lighthouse .gear-wrapper .gear-top-holder .text-block__text {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .gear-wrapper .circle-gear {
    color: var(--co-clr-base-2);
}

.theme-lighthouse .gear-top-holder > div:last-child > div label {
    color: var(--co-clr-base-2);
}

.theme-lighthouse .relationship-row-container:after {
    content: '';
    background: var(--co-clr-base-5);
}

.theme-lighthouse .relationship-remove-button button {
    border: 1px solid var(--co-clr-base-2);
}

.theme-lighthouse .relationship-remove-button button:after {
    content: "Remove";
    color: var(--co-clr-base-1);
}

.theme-lighthouse div#character-sheet .input-block label, 
.theme-lighthouse div#character-sheet .select-block label {
    color: var(--co-clr-base-1) !important;
}

.theme-lighthouse .grid-table__column {
    font-family: 'mrs-eaves';
    color: var(--co-clr-base-1);
}

.theme-lighthouse .journal-container .grid-table-row__block {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .journal-container .grid-table-row__block:after {
    content: '';
    background: var(--co-clr-base-5);
}

.theme-lighthouse .circle--advancement-wrapper {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .circle--advancement-label {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .circle-abilities-label {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .circle--resources-wrapper > div:first-child {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .circle--resources-wrapper > div:not(:first-child):after {
    content: '';
    background: var(--co-clr-base-5);
}

.theme-lighthouse .circle--resources-wrapper > div:not(:first-child) {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .circle-advancement-label {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .circle-gear-label {
    color: var(--co-clr-base-1);
}

.theme-lighthouse .circle-abilities-wrapper + div {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .circle-gear-empty.empty-state-text {
    color: var(--co-clr-off-white);
}

.theme-lighthouse .parsed-html-block ul li:before {
    filter: invert(1);
}

/* END Lighthouse */