mfate-sheet.css

.fcoSheet .window-content {
    padding: 0;
}

*{
    scrollbar-width:thin;
}

.window-app.fcoSheet * {
    scrollbar-color:var(--fco-accent-colour) #FFFFFF00;
    scrollbar-width:thin;
}

.mfate-sheet {
    display: grid;
    grid-template-areas: "header header" "content content";
    grid-template-rows: auto 1fr;
    /*background: white;*/
    width: 100%;
    height: 100%;
    border: none !important;
    max-height: 100%;
}

.fate * {
    scrollbar-color:var(--fco-accent-colour) #FFFFFF00;
    scrollbar-width:thin;
}

#FateUtilities *{
    scrollbar-color:var(--fco-accent-colour) #FFFFFF00;
    scrollbar-width:thin
}

.mfate-sheet *::-webkit-scrollbar-thumb {
    background:var(--fco-accent-colour);
    border: 1px solid var(--fco-accent-colour);
}

.fate *::-webkit-scrollbar-thumb {
    background:var(--fco-accent-colour);
    border: 1px solid var(--fco-accent-colour);
}

#FateUtilities *::-webkit-scrollbar-thumb {
    background:var(--fco-accent-colour);
    border: 1px solid var(--fco-accent-colour);
}

.fate table {
    background:none;
}

#FateUtilities table {
    background:none;
}

#EditEntityTrack table {
    background:none;
}

.mfate-sheet__header {
    grid-area: header;
}

.mfate-sheet__tab--main {
    /* display: grid;
    grid-template-areas: "skills aspects" "skills stunts" "tracks stunts";
    grid-template-rows: minmax(200px, 2fr) minmax(112px, 1fr) minmax(240px, 2fr);
    grid-template-columns: 1fr 1fr; */
    height: 100%;
    column-gap: 6px;
    row-gap: 6px;
    margin: 0 6px;
    display: flex;
    flex-flow: row wrap;
}

:root {
    /* Can set these with e.g. document.documentElement.style.setProperty('--fco-skills-pane-mheight', '50%');*/
    --fco-aspects-pane-mheight:40%;                                                                         /*Done*/
    --fco-skills-pane-mheight:55%;                                                                          /*Done*/
    --fco-tracks-pane-mheight:45%;                                                                          /*Done*/
    --fco-stunts-pane-mheight:60%;                                                                          /*Done*/
    --fco-header-colour:#185CAB;
    --fco-accent-colour:#6793c5;
    --fco-label-colour:#FFFFFF;
    --fco-sheet-text-colour:#000000;
    --fco-sheet-background-colour:#FFFFFF;
    --fco-sheet-input-colour:#FFFFFF;
    --fco-header-notch: polygon(0% 0px, 0px 0%, 100% 0%, 100% 0px, 100% 100%, 100% 100%, 0px 100%, 0 100%); /*Done*/
    --fco-border-radius:15px;    
    --fco-font-family:Montserrat;   
    --fco-foundry-font-family:var(--font-primary);                                                                     /*Done*/
    --fco-foundry-interactable-color:lightsteelblue;
}

.skill_button {
    font-family:var(--fco-font-family);
    padding-left:25px;
  }

.mfate-panel--skills {
    /* grid-area: skills; */
    /* flex: 1; */
    max-height: var(--fco-skills-pane-mheight);
    padding-right: 6px;
}

.mfate-panel--aspects {
    /* grid-area: aspects; */
    max-height: var(--fco-aspects-pane-mheight);
    padding-left: 6px;
}

.mfate-panel--tracks {
    /* grid-area: tracks; */
    min-height: var(--fco-tracks-pane-mheight);
    padding-right: 6px;
}

.mfate-panel--stunts {
    /* grid-area: stunts; */
    min-height: var(--fco-stunts-pane-mheight);
    padding-left: 6px;
}

.mfate-sheet .sheet-body {
    flex: 1;
    display: flex;
    padding: 7px 0 14px;
    min-height: 50vh;
}

.mfate-sheet .tab[data-tab].active {
    /* display: grid; */
    display: flex !important;
}

.notes-body {
    margin-top:10px;
}

.sheet-body {
    grid-area: content;
    overflow: hidden;
}

.mfate-sheet__header {
    display: flex;
    padding: 7px 7px 0;
    /* background: var(--fco-foundry-interactable-color); */
    box-shadow: inset 0px -1px 0 0 var(--fco-foundry-interactable-color);
}

.mfate-sheet__identity-panel {
    display: flex;
    flex: 2;
}

.mfate-sheet__identity-avatar {
    max-height: 100px;
    width: auto;
    border: 1px solid gray;
}

.mfate-sheet__identity-avatar[src="icons/svg/mystery-man.svg"] {
    filter: invert(75%) hue-rotate(122deg);
}

.mfate-sheet_extra-avatar[src="icons/svg/item-bag.svg"] {
    filter: invert(75%) hue-rotate(122deg) !important;
}

.mfate-sheet__identity-name {
    min-width: 5em;
    max-width: 100em;
    border: 1px solid gray;
    font-size: x-large;
    border: 0;
    resize: none;
    font-family: Jost;
    font-weight: bold;
    /* color: black; */
    color: var(--fco-text-colour);;
    /* text-shadow: 2px 2px 5px darkslategrey; */
    height: auto;
    max-height: 3.5em;
    background: none;
}

.mfate-sheet__meta {
    flex: 1;
    display: flex;
    width: 100%;
    margin-right:0px;
    align-items: center;
}

.mfate-sheet__meta-column {
    display: table;
    margin-right: 0px;
    margin-left:auto;
    box-sizing: border-box;
}

.mfate-sheet__meta-item {
    display: table-row;
}

.mfate-sheet__meta-label,
.mfate-sheet__meta-value {
    display: table-cell;
    padding: 4px 6px;
    color:var(--fco-sheet-text-colour) !important;
    background-color:transparent !important;
}

.mfate-sheet__meta-label {
    padding-left: 7px;
    min-width: 100px;
    max-width: 170px;
}

.mfate-sheet__meta-column+.mfate-sheet__meta-column .mfate-sheet__meta-label {
    min-width: 120px;
    max-width: 170px;
}

.mfate-sheet__meta-value {
    width: 75px;
    background:transparent;
}

.mfate-sheet__meta-value:hover {
    border-color: var(--fco-foundry-interactable-color);
}

/*.mfate-sheet__meta-value[disabled] {
     opacity: .5; 
}*/

.mfate-sheet__tabs {
    flex: 1;
}


/* Tabs navigation */

.mfate-sheet__tabs {
    display: flex;
    flex-direction: column;
}

.mfate-sheet__tabs-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
    /* box-shadow: inset 0px -1px 0 0 #ccc; */
}

/*.mfate-sheet__tabs-nav-item {}*/

.mfate-sheet__tabs-nav-link {
    border: 1px solid var(--fco-foundry-interactable-color);
    border-radius: 3px 3px 0 0;
    margin-left: 3px;
    background: var(--fco-sheet-background-colour)
}

.mfate-sheet__tabs-nav-link:not(.active) {
    box-shadow: inset 0px -6px 9px -6px var(--fco-foundry-interactable-color);
    opacity:0.25;
}

.mfate-sheet__tabs-nav-link.active {
    border-bottom: none;
}

.mfate-sheet__tabs-nav-icon {
    font-size: 1.5em;
    padding: 7px 1em 1px;
    display: block;
}

/* Tabs */

.mfate-sheet__tab {
    flex: 1;
    max-height: 100vh;
}

/*.mfate-sheet__tab--main {
     flex: 1;
    display: grid;
    grid-template-areas: "skills aspects" "tracks stunts"; */
    /* grid-template-rows: minmax(50%, 545px);
    grid-template-columns: 1fr 1fr; */
    /* grid-template-rows: minmax(50%, 545px) minmax(0, 1fr);
    grid-template-columns: 1fr 1fr; 
}*/

.mfate-sheet__tab--secondary {
    display: none;
    flex-direction: column;
    padding: 0 6px;
}


/*  Column */

.mfate-sheet__column {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
}


/* Panel */

.mfate-panel {
    display: flex;
    flex-direction: column;
}

.mfate-panel__panel {
    border: 1px solid gray;
    display: flex;
}

.mfate-panel__header{
    display: flex;
    align-items: center;
    padding: 0 0 0 12px;
    background: var(--fco-header-colour);;
    color:var(--fco-label-colour);
    position: relative;
    overflow: hidden;
    min-height: 30px;
    border-radius: var(--fco-border-radius);
    clip-path: var(--fco-header-notch);
    margin-top: 10px;
}

.mfate-sheet-notes,
.mfate-sheet-notes {
    min-height: 95%;
    max-height: 95%;
    overflow-y: auto;
    padding:5px !important;
    color:var(--fco-sheet-text-colour) !important;
    background-color:var(--fco-sheet-input-colour) !important;
    font-family: var(--fco-font-family) !important;
    font-size:1em;
    cursor:text;
}

.mfate-panel__header-select {
    font-family: var(--fco-font-family);
    margin-right: 8px;
    color:var(--fco-sheet-text-colour);
    background: var(--fco-sheet-input-colour);
    opacity:0.5;
}


/* .mfate-panel__header::after {
    content: "";
    display: block;
    background: #185CAB;
    width: 100%;
    height: 3px;
} */


/* .mfate-panel__header::after {
    content: "";
    display: block;
    background: #185CAB;
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    left: 17px;
    transform: skew(-40deg);
} */

.mfate-panel__body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

.mfate-panel__header-label {
    font-size: 1.5em;
    font-family: var(--fco-font-family);
    font-weight: bold;
    margin: 0 .5em 0 0;
    z-index: 1;
    flex: 1;
}

.mfate-panel__header-button {
    background: none;
    border: none;
    flex: 0;
    font-size: medium;
    padding-right: 8px;
    z-index: 1;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
}

.mfate-panel__header-button:hover {
    box-shadow:none;
    filter: drop-shadow(0px 0px 3px red);
}


/* Skills list */

.mfate-skills-list {
    overflow-x: hidden;
    overflow-y: auto;
    display: table;
    width: 100%;
    /* border: .5em solid transparent; */
    /* padding: 0; */
    padding: .5em;
}

.mfate-skills-list__item {
    display: table-row;
}

.mfate-skills-list__number,
.mfate-skills-list__adjective,
.mfate-skills-list__skill-name,
.mfate-skills-list__skill-name_item {
    display: table-cell;
    border-bottom: 1px solid var(--fco-foundry-interactable-color);
    padding: .3em .5em;
    font-family: var(--fco-font-family);
    color:var(--fco-sheet-text-colour);
}

.mfate-skills-list__number {
    width: 10px;
}

.mfate-skills-list__adjective {
    width: 10px;
}

.mfate-skills-list__skill-name {
    cursor: pointer;
}


/* Aspect list */

.mfate-aspects-list {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 .5em;
}

.mfate-aspects-list__item {
    list-style: none;
    padding-bottom: .5em;
}

.mfate-aspects-list__label {
    font-family: var(--fco-font-family);
    font-weight: bold;
}

.mfate-aspects-list__description {
    width: 100%;
    overflow: hidden;
    border: none;
}

.mfate-aspects-list__input {
    font-size: 1em;
    min-height:1.1em;
    max-height:3em;
    margin-top:5px;
}

.mfate-aspects-notes__input {
    margin-left:25px;
    font-size: 1em;
    min-height:3em;
    max-height:500px;
    padding-left:2px;
    padding-top:2px;
    padding-right:2px;
}

/* Tracks list */

.mfate-tracks {
    flex: 1;
    overflow: auto;
}

.mfate-tracks__list {
    display: table;
    width: 100%;
    padding-bottom: 5px;
}

.mfate-tracks__item {
    display: table-row;
    list-style: none;
}

.mfate-tracks__item+.mfate-tracks__item {
    box-shadow: inset 0 1px var(--fco-foundry-interactable-color);
}

.mfate-tracks__item>* {
    display: table-cell;
}

.mfate-tracks-notes__input {
    margin-left:25px;
    font-size: 1em;
    min-height:3em;
    max-height:500px;
    width: 90%;
    padding-left:2px;
    padding-top:2px;
    padding-right:2px;
}

.mfate-tracks__item-label {
    display: table-cell;
    vertical-align: top;
    padding-left:15px;
    padding-right:10px;
    padding-top:5px;
    width:15em;
    color:var(--fco-sheet-text-colour);
}

.mfate-tracks__boxes {
    padding-top: 8px;
}

.mfate-checkbox {
    margin: 0;
    display: flex-row;
    float: left;
    position: relative;
    padding-left: 0px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mfate-tracks {
    overflow: hidden;
    height: 100%;
}

#tracks_body {
    padding: 5px 5px 0 0;
    overflow-y: auto;
}

.tracks-block {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}   

/* Stunts */

.stunts-block {
    float: left;
    padding-left: 10px;
    padding-top: 10px;
    overflow-y: auto;
}

/*.mfate-stunts {}*/

.mfate-stunts__body {
    font-family: var(--fco-font-family);
    scrollbar-width: thin;
}

.mfate-stunts__table {
    /*background: white;*/
    color: black;
    border: none;
    display: flex;
    flex-direction: column;
}

.mfate-stunts__row {
    padding: 10px 0;
    border-bottom: 1px solid var(--fco-foundry-interactable-color);
    background-color:transparent;
    z-index:1;
}

.mfate-stunts__row-header-cell {
    font-weight: bold;
    font-family: var(--fco-font-family);
    color:var(--fco-sheet-text-colour);
}

.mfate-stunts__row-header-icon {
    border: none;
    color:var(--fco-sheet-text-colour);
    background: transparent;
    float: right;
    width: 22px;
    height: 22px;
    padding: 4px;
    margin: 0 2px;
}

.mfate-stunts__row-header-icon::before {
    width: 22px;
    height: 22px;
}

.mfate-stunts__row-body {
    font-family: var(--fco-font-family);
    font-size: 1em;
    color:var(--fco-sheet-text-colour);
    padding: 5px;
    margin-left:20px;
    margin-right:0;
}

.mfate-stunts__row-footer {
    padding: 0 5px;
}

.mfate-stunts__row-footer-cell {
    font-family: Fate Core;
    font-size: large;
    margin-left:20px;
    margin-right:0;
    color:var(--fco-sheet-text-colour)
    /* padding-bottom: 20px; */
}


/* Secondary panel */

.mfate-description {
    display:flex;
    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;
    min-height:20%;
    margin-bottom: 10px;
}

.mfate-biography {
    display:flex;
    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;
    min-height:20%;
    margin-bottom: 10px;
}

.mfate-notes {
    display:flex;
    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;
    min-height:20%;
    max-height:95%;
}

.mfate-biography-collapsed {
    height:2.5rem;
}

.mfate-description-collapsed {
    height:2.5rem;
}

.circle-input {
    height: 75px !important; 
    width: 75px !important;
    /*background-color: white !important;*/
    border-radius: 50% !important;
    border-color:var(--fco-accent-colour) !important;
    border-width:5px !important;
    text-align:center !important;
    font-size:2em !important;
    padding-left:18px !important;
}

.circle-input:disabled {
    height: 75px !important;
    width: 75px !important;
    /*background-color: white !important;*/
    border:5px solid !important;
    border-radius: 50% !important;
    border-color:var(--fco-accent-colour) !important;
    border-width:5px !important;
    text-align:center !important;
    font-size:2em !important;
    padding-left:18px !important;
}

.mfate-description__content,
.mfate-biography__content,
.mfate-extras__content 
.mfate-notes__content {
    flex-grow:1;
    flex-shrink:1;
    margin:10px;
    
}

.mthing-extras__content {
    flex-grow:1;
    flex-shrink:2;
    margin:10px;
    max-height:90%;
    overflow-y:auto;
}

.mfate-extras {
    flex-direction: column;
    overflow-y: hidden;
    display: flex;
    margin-bottom:10px;
    flex-grow:1;
    flex-shrink:1;
    min-height:33%;
}

.mfate-extras-collapsed {
    height:2.5rem;
}

.mfate-extras__content {
    overflow-y: auto;
}

.mfate-extras__content-body {
    overflow-y: auto;
    /* width: 800px; */
    height: auto;
    padding: 0 10px;
}

.fate-extras__row {
    /*background: white;*/
    color:var(--fco-sheet-text-colour);
    border: none;
}

.mfate-sheet__header-right {
    margin-right:0px;
    margin-left:auto;
}

.fate-extras__row-header {
    font-weight: bold;
    font-family: var(--fco-font-family)
}

.fate-extras__row-header-button {
    border: none;
    color:var(--fco-sheet-text-colour);
    background-color: transparent;
    float: right;
    width: 22px;
    height: 22px;
    padding: 0;
}

.fate-extras__row-header-button::before {
    width: 22px;
    height: 22px;
}

/*.fate-extras__row-body {}*/

.fate-extras__row-body-content {
    padding-bottom: 20px;
    font-family: var(--fco-font-family);
    padding-left:30px;
}