.daggerheart.sheet.pc {
    width: 810px !important; // Form won't apply height for some reason

    div[data-application-part] {
        display: flex;
        flex-direction: column;
    
        .pc-sheet-header {
            display: flex;
            gap: @halfMargin;
            height: 120px;
            margin-bottom: @halfMargin;

            .portrait {
                border: 0;
                border-right: @thinBorder solid var(--color-underline-header);
            }

            .class-info {
                flex: 1;
                background: @primaryAccent;
                // -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 55px) 100%, 0px 100%);
                // clip-path: polygon(0 0, 100% 0, calc(100% - 75px) 100%, 0px 100%);

                .portrait {
                    max-width: 120px;
                }

                .class-title {
                    text-align: center;
                    display: flex;
                    justify-content: space-between;

                    span:hover {
                        filter: drop-shadow(0px 0px 3px red);
                        cursor: pointer;
                    }

                    .domain-container {
                        margin-left: @halfMargin;
                    }
                }

                .class-add-container {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    flex: 0;

                    button {
                        height: 22px;
                        width: 22px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-left: @halfMargin;
                        background: @primaryAccent;
                    }
                }

                .domain-title {
                    text-transform: uppercase;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    line-height: 23px;
                    font-weight: bold;
                    font-style: italic;
                }

                .domain-image {
                    height: 30px;
                    flex: 0;
                }
            }
            .general-info {
                flex: 2;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .general-input {
                    position: relative;

                    .general-title {
                        position: absolute;
                        left: 4px;
                        // height: 100%;
                        text-align: center;
                        font-weight: bold;
                        text-transform: uppercase;
                    }
                }

                .pc-tabs {
                    flex: 1;
                    margin: 0;
                }

                .rest-container {
                    flex-wrap: nowrap;
                    display: flex;
                    height: var(--form-field-height);
                    flex: 0;

                    button {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        width: var(--form-field-height);

                        i {
                            font-size: 13px;
                        }
                    }
                }

                .level-container{
                    position: relative;
                    bottom: 4px;
                    flex: none;
                    width: 40px;
                    border: none;
                    outline: none;
                    margin-left: @fullMargin;

                    &.levelup {
                        filter: drop-shadow(0px 0px 3px gold);
                    }

                    img {
                        height: 40px;
                        width: 40px;
                        border: none;
                    }

                    .level-value-container {
                        width: 48px;
                        position: absolute;
                        top: calc(50% - 17px);
                        left: calc(50% - 23px);

                        .level-value {
                            font-weight: bold;
                            font-size: 20px;
                            text-align: center;
                            &:not(:hover), &:not(:focus) {
                                border: none;
                            }
                        }

                        .levelup-marker {
                            position: absolute;
                            top: 0;
                            right: calc(50% - 12px);
                            color: gold;
                            filter: drop-shadow(0px 0px 3px black);

                            &.double-digit {
                                right: calc(50% - 20px);
                            }
                        }
                    }

                    .level-title {
                        position: absolute;
                        bottom: 2px;
                        width: 42px;
                        background-color: black;
                        color: white;
                        left: calc(50% - 21px);
                        text-align: center;
                        border-radius: 5px;
                        font-size: 12px;

                        &.levelup {
                            color:gold;
                            filter: drop-shadow(0px 0px 3px orange);
                            font-weight: bold;
                            cursor: pointer;
                            &:hover {
                                background-color: aliceblue;
                            }
                        }
                    }
                }
            }
        }

        .sheet-body {
            display: flex;
            flex-direction: column;
            flex: 1;

            .tab-container {
                height: 100%;
                display: flex;
                flex-direction: column;

                .tab-inner-container {
                    flex: 1;

                    .body-section {
                        display: flex;
                        flex-direction: column;

                        fieldset {
                            flex: 0;
                        }
                    }
                }
            }

            .system-info {
                font-size: 12px;
                font-style: italic;
                font-weight: bold;
                margin-top: -@halfMargin;
                flex: 0;
            }

            .feature-sheet-body {
                gap: @halfMargin;
            }

            .abilities-container {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                border-radius: 6px;
                padding-left: 0;
                // flex: 2.5;

                legend {
                    margin-left: auto;
                    margin-right: auto;
                    font-weight: bold;
                    text-transform: uppercase;
                    padding: 0 @fullMargin;
                    position: relative;
                }

                .attributes-menu {
                    position: absolute;
                    bottom: calc(50% - 12px);
                    font-size: 24px;
                    left: -8px;
                }

                .attribute {
                    position: relative;
                    padding: 0 0 @fullPadding;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    flex-basis: 33.33%;
                    // flex: 1;
                    
                    .attribute-banner {
                        position: relative;
                        top: 8px;
                        z-index: 2;
                        background: black;
                        color: white;
                        text-transform: uppercase;
                        padding: @smallPadding;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        min-width: 96px;

                        .attribute-roll {
                            position: absolute;
                            width: 16px;
                            transition: transform 0.2s;

                            &:hover {
                                transform: rotate(30deg);
                                filter: drop-shadow(0px 0px 3px red);
                                cursor: pointer;
                            }
                        }

                        .attribute-text {
                            width: 100%;
                            margin-left: @largeMargin;
                            font-size: 12px;
                        }
                    }

                    .attribute-mark {
                        height: 23px;
                        width: 23px;
                        position: absolute;
                        right: -5px;
                        top: 6px;
                        border: 2px solid black;
                        border-radius: 50%;
                        background: white;
                        z-index: 2;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.selectable {
                            border-color: gold;
                            filter: drop-shadow(0 0 3px black);

                            &:hover i {
                                opacity: 0.3;
                            }
                        }

                        & i.selected, &:hover i.selected {
                            color: green;
                            opacity: 1;
                        }

                        i {
                            color: black;
                            font-size: 17px;
                            opacity: 0;
                        }
                    }

                    .attribute-image {
                        position: relative;
                        width: fit-content;
                        display: flex;

                        img {
                            height: 80px;
                            width: 80px;
                            border: none;
                        }

                        .attribute-value {
                            width: 55px;
                            padding-right: 10px;
                            position: absolute;
                            top: calc(50% - 18px);
                            left: calc(50% - 24px);
                            font-weight: bold;
                            font-size: 30px;
                            line-height: 30px;
                            text-align: center;
                            border: none;
                            appearance: none;
                            -moz-appearance: none;
                            -webkit-appearance: none;
                            &.negative {
                                left: calc(50% - 29px);
                            }
                            &.unselected {
                                filter: drop-shadow(0 0 3px @secondaryShadow);
                            }
                        }

                        .attribute-text {
                            width: 47px;
                            position: absolute;
                            top: calc(50% - 22px);
                            left: calc(50% - 24px);
                            font-weight: bold;
                            font-size: 30px;
                            text-align: center;

                            &.negative {
                                left: calc(50% - 29px);
                            }
                        }
                    }

                    .attribute-verb {
                        font-variant: petite-caps;
                    }
                }
            }

            .defense-row {
                height: 100%;
                width: 100%;
                display: flex;
                align-items: baseline;
                justify-content: space-evenly;

                .defense-section {
                    display: flex;
                    align-items: center;
                    margin-right: @fullMargin;

                    .defense-container {
                        position: relative;
                        padding: @fullPadding;
                        max-width: 100px;
                        
                        img {
                            border: none;
                            max-width: 80px;
                        }

                        .defense-value {
                            width: 47px;
                            position: absolute;
                            top: calc(50% - 22px);
                            left: calc(50% - 24px);
                            font-weight: bold;
                            font-size: 30px;
                            text-align: center;
                            &:not(:hover), &:not(:focus) {
                                border: none;
                            }
                        }

                        .defense-banner {
                            position: absolute;
                            bottom: 20px;
                            left: calc(50% - 42px);
                            z-index: 2;
                            background-color: black;
                            color: white;
                            width: 84px;
                            text-align: center;
                        }
                    }
                }

                .armor-marks {
                    max-width: 67px;
                    padding: @fullPadding;
                    align-self: end;
                    margin-left: @halfMargin;

                    .mark {
                        width: 16px;
                        height: 16px;
                        margin: 0px;
                    }

                    .disabled-mark {
                        opacity: 0.6;
                    }
                }
            }

            .left-main-container {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                border-radius: @normalRadius;

                .legend {
                    margin-left: auto;
                    margin-right: auto;
                    font-weight: bold;
                    text-transform: uppercase;
                    padding: 0 @fullPadding;
                    position: relative;
                }
            }
            
            .weapon-section {
                padding-top: 8px;
            }

            .threshold-container {
                position: relative;
                display: flex;
                align-items: center;
                align-self: center;
                
                .threshold-box {
                    position: relative;
                    width: 30px;
                    height: 30px;
                    border: @normalBorder solid black;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    font-weight: bold;
                }

                .threshold-spacer {
                    position: relative;
                    z-index: 2;
                    width: 70px;
                    height: 18px;
                    background-color: darkgray;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .resource-label {
                text-transform: uppercase;
                font-weight: bold;
            }

            .death-save {
                position: absolute;
                right: -22px;
                
                &:hover:not(.disabled) {
                    filter: drop-shadow(0 0 3px @mainShadow);
                    cursor: pointer;
                }

                &.disabled {
                    opacity: 0.4;
                }
            }

            .resource-box {
                width: 20px;
                height: 12px;

                &.stress:nth-child(even) {
                    position: relative;
                    right: 1px;
                }

                .disabled {
                    opacity: 0.6;
                }
            }

            .hope-text {
                font-size: 11.7px;
                margin-right: 6px;
            }

            .hope-container {
                background: darkgray;
                border-radius: 6px;
                display: flex;
                padding: @smallPadding 0px;

                .vertical-separator {
                    border-left: 2px solid white;
                    height: auto;
                    margin: @halfMargin 0;
                    flex: 0;
                }

                .hope-inner-container {
                    position: relative;

                    .hope-value {
                        width: 16px;
                        height: 16px;
                    }

                    .hope-scar {
                        position: absolute;
                        top: calc(50% - 6px);
                        left: calc(50% - 7px);
                        opacity: 0.4;
                        font-size: 12px;
                        -webkit-transform: scaleX(-1);
                        transform: scaleX(-1);
                    }
                }
            }

            .experience-row {
                width: 100%;
                display: flex;
                align-items: flex-end;

                .experience-selector {
                    font-size: 18px;
                    cursor: pointer;
                    margin-right: @halfMargin;
                    opacity: 0.5;

                    &:hover:not(.selected) {
                        filter: drop-shadow(0 0 3px gold);
                    }

                    &.selected {
                        filter: drop-shadow(0 0 3px gold);
                        opacity: 1;
                    }
                }

                .experience-value {
                    margin-left: @fullMargin;
                    width: 30px;
                    border-bottom: @normalBorder solid black;
                    border-radius: 4px;
                    text-align: center;
                    font-weight: bold;

                    &.empty {
                        border: 0;
                    }
                }

                .disabled-experience {
                    border: @thinBorder solid @borderTertiary;
                    background: rgba(0, 0, 0, 0.20);
                }
            }
            .gold-section {
                width: calc(100% - 8px);
                display: flex;
                justify-content: space-between;
                
                fieldset.gold-fieldset {
                    padding-right: 0;
                    padding-left: 0;
                    padding-bottom: @fullPadding;

                    legend {
                        margin-left: auto;
                        margin-right: auto;
                        font-size: 15px;
                        font-variant: all-petite-caps;
                        font-weight: bold;
                    }

                    .gold-column {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        gap: @halfMargin;
                    }

                    .gold-row {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 @fullPadding;
                        gap: @tinyMargin;
                    }

                    .gold-row, .gold-column {
                        img {
                            min-width: 14px;
                            min-height: 14px;
                            height: 14px;
                            border: 0;
                            filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(17%) contrast(103%);

                            &:hover {
                                cursor: pointer;
                                filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(17%) contrast(103%) drop-shadow(0 0 3px @mainShadow);
                            }
                        }

                        i:hover {
                            cursor: pointer;
                            filter: drop-shadow(0 0 3px @mainShadow);
                        }

                        img:not(.owned), i:not(.owned) {
                            opacity: 0.4;
                        }
                    }
                }
            }

            .health-category {
                text-transform: uppercase;
            }

            .class-feature-selectable {
                cursor: pointer;

                &:hover {
                    filter: drop-shadow(0 0 3px @mainShadow);
                }

                &.inactive {
                    opacity: 0.5;
                }
            }

            .features-container {
                width: 100%;
                min-height: 136px;

                .feature-container {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: @fullPadding;
                    margin-bottom: 0;
            
                    .feature-img {
                        max-width: 42px;
                    }

                    .feature-label {
                        font-weight: bold;
                        font-size: 30px;
                    }

                    button {
                        flex: 0;
                    }
                }

                .feature-tick-container {
                    flex: 0;
                    min-width: 56px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: @fullMargin;
                    margin: 0 @threeQuarterMargin;

                    .feature-tick {
                        position: relative;
                        border: @normalBorder solid @borderTertiary;
                        height: 24px;
                        border-radius: 50%;
                        width: 24px;
                        background: rgba(0, 0, 0, 0.05);
                        display: flex;
                        justify-content: center;
                        
                        &:hover:not(.disabled):not(.used){
                            cursor: pointer;
                            filter: drop-shadow(0 0 3px @mainShadow);
                        }

                        &.disabled {
                            opacity: 0.3;
                        }

                        img {
                            border: 0;
                            width: 24px;
                            height: 24px;
                            filter: invert(17%) sepia(0%) saturate(0%) hue-rotate(19deg) brightness(102%) contrast(84%);
                        }

                        .feature-dice-value {
                            font-size: 18px;
                            align-self: center;
                        }

                        &.used::after {
                            position: absolute;
                            content: "/";
                            color: @borderTertiary;
                            font-weight: 700;
                            font-size: 1.7em;
                            left: 4px;
                            top: -5px;
                            transform: rotate(25deg);
                            font-size: 24.5px;
                        }
                    }
                }
            }

            .feature-input {
                border: 0;
                border-bottom: @thinBorder solid @borderTertiary;
                text-align: center;
                height: min-content;
                background: inherit;
                font-size: 20px;
                position: relative;
                bottom: 3px;
            }

            .editor {
                height: 400px;
                width: 100%;
            }

            .weapons-title {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;

                .proficiency-container {
                    width: 176px;
                    height: 20px;
                    position: absolute;
                    bottom: -15px;
                    left: calc(50% - 88px);
                    text-transform: uppercase;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1;
                    clip-path: polygon(11% 100%, 89% 100%, 100% 0%, 0% 0%);
                    font-size: 10px;

                    span {
                        margin-right: @tinyMargin;
                    }

                    .proficiency-dot {
                        background: white;
                        color: white;
                        font-size: 10px;
                        padding: 1px;
                        border-radius: 50%;

                        &.marked {
                            color: black;
                        }

                        &:not(:last-of-type){
                            margin-right: @tinyMargin;
                        }
                    }
                }
            }

            .weapons-burden {
                position: absolute;
                top: -4px;
                right: -56px;
                display: flex;
                align-items: center;

                .weapons-burden-icon {
                    color: white;
                    font-size: 22px;
                    -webkit-text-stroke-width: 1px;
                    -webkit-text-stroke-color: black;

                    &.active {
                        -webkit-text-stroke-color: rgba(0, 0, 0, 0.05);
                        color: black;
                    }

                    &.left {
                        -webkit-transform: scaleX(-1) rotate(20deg);
                        transform: scaleX(-1) rotate(20deg);
                        margin-right: 4px;
                    }

                    &.right {
                        transform: rotate(20deg);
                    }
                }
            }

            .armor-container {
                display: flex;
                align-items: center;

                .active-item-label-chip {
                    margin-left: @halfMargin;
                }
            }

            .item-section {
                .active-item-container {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    padding: @smallPadding 0px;

                    .weapons-label-row {
                        display: flex;
                        align-items: center;

                        .damage-roll {
                            width: 24px;
                            border: none;
                            margin-left: @halfMargin;
                            transition: transform 0.2s;

                            &:hover {
                                transform: rotate(30deg);
                                filter: drop-shadow(0px 0px 3px red);
                                cursor: pointer;
                            }
                        }
                    }
                }

                .active-item-label-chip {
                    width: 62px;
                    border: @normalBorder solid black;
                    border-radius: 6px;
                    background-color: @primaryAccent;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    margin-left: @fullPadding;

                    img {
                        height: 20px;
                    }

                    button {
                        height: 17px;
                        width: 17px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: rgb(122, 121, 113);
                        border-color: black;
                        margin: 0;
                        
                        &:hover {
                            background: red;
                        }

                        i {
                            font-size: 10px;
                            color: black;
                        }
                    }
                }
            }

            .inventory-armor-section, .inventory-weapon-section {
                width: 100%;
                margin-bottom: @fullMargin;
                text-transform: uppercase;

                h2 {
                    width: 100%;
                    display: flex;
                    align-items: center;
                }
            }

            .inventory-legend {
                display: flex;
                align-items: center;
                margin-bottom: @halfMargin;
                
                .page-selector {
                    margin-left: 4px;
                    display: flex;
                    align-items: center;

                    i {
                        &:hover:not(.disabled){
                            cursor: pointer;
                            filter: drop-shadow(0px 0px 3px red);
                        }

                        &.disabled {
                            opacity: 0.4;
                        }
                    }
                }
            }

            .inventory-add-button {
                position: absolute;
                border-radius: 50%;
                height: 15px;
                width: 15px;
                top: -20px;
                background: grey;
                border-color: black;
                right: 6px;
                display: flex;
                font-size: 13px;
                align-items: center;
                justify-content: center;
            }

            .inventory {
                width: 100%;

                .inventory-row {
                    height: 26px;
                    border-bottom: @thinBorder solid @borderTertiary;
                    display: flex;
                    margin-bottom: @fullMargin;
                    border-radius: 8px;

                    .item-container {
                        flex-basis: 25%;
                        margin: 0 @halfMargin @fullMargin;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;

                        &:hover {
                            filter: drop-shadow(0px 0px 3px red);
                        }

                        .inventory-item {
                            background: @primaryAccent;
                            padding: @fullPadding;
                            border: @thinBorder solid black;
                            border-radius: 6px;
                            display: flex;
                            align-items: center;

                            .inventory-item-text {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                flex: 1;
                            }

                            button {
                                height: 16px;
                                width: 16px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex: 0;
                                background: @secondaryBackground;
                                border-color: black;
                                margin-left: @halfMargin;

                                i {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }

                .editor {
                    height: 100px;
                }
            }

            .inventory-items {
                width: 100%;
                flex: 1;
                display: flex; 
                flex-direction: column; 
                justify-content: space-between;
            }

            .domain-card-tab {
                flex: 1;

                .domain-card-body {
                    height: 100%;
                    width: 100%;
                    padding: @largePadding;
                    display: flex;
                    flex-direction: column;

                    .card-row {
                        flex: 1;
                        display: flex;
                    }

                    .domain-card {
                        flex: 0;
                        flex-basis: 33.33%;
                        margin: @fullMargin;
                    }

                    .loadout-body {
                        flex: 1;

                        .loadout-container {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            gap: @fullMargin;

                            .top-card-row {
                                flex: 1;
                                display: flex;
                                justify-content: space-around;  
                            }

                            .domain-card.outlined {
                                border: @normalBorder dotted black;
                                padding: 0;
                                margin: @fullMargin;
                                height: calc(100% - 16px);
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: space-evenly;
                            }
                        }
                    }

                    .vault-container {
                        display: flex;
                        flex-wrap: wrap;
                        overflow-y: auto;
                        height: 100%;
                        
                        .vault-card {
                            flex: 0;
                            flex-basis: calc(33.33% - 16px);
                            margin: 8px;
                            height: calc(50% - 16px);
                            min-height: calc(50% - 16px);
                        }
                    }
                
                    .domain-card-menu {
                        flex: 0;
                        width: 120px;
                        height: 100%;
                        border-width: @normalBorder 0 @normalBorder @normalBorder;
                        border-color: black;
                        border-style: solid;

                        button {
                            margin-bottom: @tinyMargin;
                        }
                    } 
                }
            }

            .loadout-tabs {
                border-top: @thinBorder solid @borderPrimary;
                border-bottom: @thinBorder solid @borderPrimary;
            }

            .abilities-card {
                position: relative;
                border: @thickBorder solid @secondaryAccent;
                border-radius: 6px;
                display: flex;
                flex-direction: column;
                height: 100%;
                font-size: 14px;

                .abilities-card-image-container {
                    position: relative;
                    // height: 50%;
                }

                .abilities-card-image {
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 2;
                }

                .abilities-text-container {
                    flex: 1;
                    position: relative;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    overflow-y: auto;
                    padding: 12px 4px 4px;
                }

                .abilities-card-level {
                    position: absolute;
                    top: 0;
                    left: 12px;
                    color: black;
                    height: 60px;
                    border: @normalBorder solid orange;
                    border-top-width: 0;
                    width: 30px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;
                    background: grey;
                    font-size: 20px;
                    font-weight: bold;

                    img {
                        border: 0;
                        width: 20px;
                    }
                }
                .abilities-card-refresh-cost {
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    color: white;
                    width: 30px;
                    height: 30px;
                    border: @normalBorder solid orange;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: black;
                    font-size: 14px;
                    i {
                        font-size: 11px;
                    }
                }

                .abilities-card-type {
                    flex: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                    position: absolute;
                    left: 0;
                    text-align: center;
                    width: 100%;
                    bottom: -9px;
                    z-index: 1;

                    .abilities-card-type-text{
                        padding: 0px 4px;
                        border: 1px solid black;
                        border-radius: 6px;
                        background: gold;
                    }
                }
                
                .abilities-card-title {
                    flex: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                    font-size: 18px;
                }

                .abilities-card-sub-title {
                    flex: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-style: italic;
                    font-size: 12px;
                }

                .abilities-card-spellcast {
                    flex: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-transform: uppercase;
                    font-size: 12px;

                    .title {
                        font-weight: bold;
                    }
                }

                .abilities-card-description {
                    flex: 0;
                    font-size: 12px;
                    margin-bottom: 4px;
                }

                .abilities-card-effect {
                    cursor: pointer;
                    
                    &:hover {
                        background: rgb(47 79 79 / 25%);
                    }

                    > * {
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }

                .abilities-card-abilities {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    .abilities-card-ability {
                        font-size: 12px;
                        cursor: pointer;

                        &:hover {
                            background: rgb(47 79 79 / 25%);
                        }
                    
                        > * {
                            margin: 0;
                        } 
                    }
                }

                &:hover .abilities-card-menu{
                    height: 40px;
                    left: 0px;
                }

                .abilities-card-menu {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 0;
                    transition: height 0.2s;
                    overflow: hidden;
                    position: absolute;
                    bottom: 0;
                    z-index: 2;
                    width: 100%;
                    background: grey;

                    button {
                        font-weight: bold;
                    }
                }
            }

            .heritage-container {
                height: 100%;
                display: flex;
                flex-direction: column;
                gap: @fullMargin;

                .card-row {
                    height: 50%;
                    display: flex;
                    justify-content: space-around;
                }

                .heritage-card {
                    flex-basis: 33.33%;  
                    margin: @fullMargin;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &.outlined {
                        border: @normalBorder dotted black;
                        font-size: 25px;
                    }
                }
            }

            .empty-ability-container {
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 25px;
                opacity: 0.7;

                .empty-ability-inner-container {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    i {
                        font-size: 48px;
                    }
                }
            }

            .story-container {
                gap: @largeMargin;

                .story-fieldset {
                    border-radius: 6px;
                }

                .story-legend {
                    margin-left: auto;
                    margin-right: auto;
                    padding: 0 8px;
                    font-size: 30px;
                    font-weight: bold;
                }

                .scars-container {
                    .editor {
                        height: 240px;
                    }
                }
            }

            .inventory-container {
                height: 100%;
                overflow: auto;

                .inventory-item-list {
                    list-style-type:none;
                    padding: 0 @largePadding;
                    margin-top: 0;

                    &.inventory-item-header {
                        margin-bottom: 0;
                    }

                    .inventory-title-row-container {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        border-bottom: @thickBorder ridge slategrey;

                        .inventory-title-row {
                            justify-content: space-between;
                            flex: 1;
                        }

                        .inventory-item-title-container {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                        }

                        .inventory-item-quantity {
                            width: 48px;
                            display: flex;
                            align-items: center;
                            margin-right: 96px; // Icon toolbar spacing
                        }
                    }

                    .inventory-item {
                        background: crimson;

                        &:not(:last-of-type) {
                            border-bottom: @normalBorder ridge slategrey;
                        }

                        .inventory-item-title-container {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;

                            .inventory-item-title {
                                display: flex;
                                align-items: center;
                                cursor: pointer;

                                &:hover {
                                    filter: drop-shadow(0 0 3px @secondaryShadow);
                                }
                            }
                        }

                        .inventory-item-quantity {
                            width: 48px;
                            display: flex;
                            align-items: center;

                            &.spaced {
                                margin-right: 56px;
                            }

                            input {
                                margin: 0 @tinyMargin;
                                border: 0;
                                border-bottom: 2px solid black;
                            }

                            i {
                                font-size: 20px;
                            }
                        }
                    }

                    .inventory-title-row {
                        font-size: 20px;
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        padding: 0 @fullPadding;
                    }

                    .inventory-row {
                        display: flex;
                        align-items: center;
                        padding: @fullPadding;
                        font-size: 24px;

                        .row-icon {
                            margin-left: @halfMargin;
                        }

                        .active-item {
                            position: absolute;
                            font-size: 16px;
                            left: calc(50% - 8px);
                            top: calc(50% - 8px);
                            margin-left: @tinyMargin;
                            color: crimson;
                        }

                        img {
                            width: 32px;
                        }
                    }
                }
            }
        }
    }
}