@font-face{ 
    font-family: "Liberation Mono", monospace;
    src: url('webfonts/liberationmono_regular_macroman/LiberationMono-Regular-webfont.woff') format('woff');
}

@font-face{ 
    font-family: "Liberation Mono", monospace;
    src: url('webfonts/liberationmono_bold_macroman/LiberationMono-Bold-webfont.woff') format('woff');
    font-weight:bold;
}

@font-face {
    font-family: "century-gothic-bold", sans-serif;
    src: url("gothibc.ttf");
}

:root{
    --font-2: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    --font-2-bold: sans-serif;
    --font-2-italic: sans-serif;
    --color-text: rgb(199,195,189);
    --color-bkg:#17191A;
    --color-header1:#181f3c;
    --color-header2:#38465F;
    --color-header2-dark:#252e3f;
    --color-header3:#414561;
    --color-move-header:#4A4160;
    --color-move-header-dark:#3b344d;
    --color-accordion:#636684;
    --color-accordion-header:white;
    --color-accordion-hover:#1e274b;
    --color-foundry-orange:rgba(153, 84, 0, 0.7);
    --color-navbar:rgb(32,34,36);
    --color-navbar2:rgb(58,59,60);
    --color-nav-button:rgb(20,89,116);
    --color-link:rgb(140,180,255);
}

/* v1 Palette
    --color-bkg:rgb(23,25,26);
    --color-text: rgb(199,195,189);
    --color-header1:rgb(12,53,69);
    --color-header2:rgb(69,86,112);
    --color-header3:rgb(52,58,64);
    --color-move-header:rgb(82,46,44);
    --color-navbar:rgb(32,34,36);
    --color-navbar2:rgb(58,59,60);
    --color-nav-button:rgb(20,89,116);
    --color-link:rgb(140,180,255);*/
/* v2 Palette
    --color-bkg:#17191A;
    --color-header1:#020522;
    --color-header2:#3C405C;
    --color-header3:#414561;
    --color-move-header:#636684;
    --color-navbar:rgb(32,34,36);
    --color-navbar2:rgb(58,59,60);
    --color-nav-button:rgb(20,89,116);
    --color-link:rgb(140,180,255);*/

/* structure */
html{
    scrollbar-width: thin;
}

::-webkit-scrollbar-track{
    background: #cbcbcb;
}

body {
    padding-top:5rem;
	padding-bottom: 5rem;
    background: url('../images/bkg_tile.png') repeat scroll left top;
	color: var(--color-text);
}

body.page-with-sidebar{
    padding-top:0rem;
}

main>div.row>div.nav-col {
    padding-top: 0rem;
}

@media only screen and (min-width: 992px) {
    main>div.row>div.content-col {
        padding-top: 5rem;
    }
}

main>.container, main#playbook div.container, main#lookup div.container, main .container.playbookHeaderText, main .content-col>.container, main .container#Preface{
    background-color: var(--color-bkg);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 3px solid #565656;
    border-bottom: 3px solid #565656;
}

#selector-output.container{
    background: none;
    box-shadow: none;
    border-top: none;
    border-bottom: none;
}

.relative {
    position: relative !important;
}

/***  ***/

div.selector-list{
    padding-bottom: 1rem;
}

div.selector-list .clickable-list-menu{
    border-bottom: 3px solid #565656;
     box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

#selector-output div.selector-content{
    background-color: var(--color-bkg);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 3px solid #565656;
    border-bottom: 3px solid #565656;
}

a:link, a:visited, a:focus, a:hover  {
	color: var(--color-link);
	text-decoration: none;
}

a:hover {
	border-bottom: 1px solid;
	text-decoration: none;
}

a.btn-next, a.btn-playbook, a.btn-mainpage{
	color: rgb(255,255,255);
	border-bottom: initial;
    background-color: var(--color-move-header);
    border-color: var(--color-move-header);
}

a.btn-next{
    margin-top:15px;
}

a.btn-next:hover, a.btn-playbook:hover, a.btn-mainpage:hover{
    background-color: var(--color-move-header-dark);
    border-color: var(--color-move-header-dark);
}

.btn-mainpage {
    width:100%;
    margin: 10px 0px;
}

.btn-playbook-col{
    display: flex;
    align-items: center;
}

.bg-dark{
	background: var(--color-navbar) !important;
}

h1, h2, h3 {
  padding: 15px;
  text-align: center;
  background: var(--color-header1);
  color: rgb(255,255,255);
  font-weight: bold;
  font-size: 48px;
    font-family: var(--font-2);
  font-variant: small-caps;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

h1, h2 {
    margin-top: 20px;
}

h1.playbookHeader{
    margin-top: 0px;
}

h2 {
  background: var(--color-header2);
  font-size: 36px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}


h1 span.subtitle, h2 span.subtitle, h3 span.subtitle{
    display: block;
    font-size: 22px;
}

h2 span.subtitle {
    font-size: 18px;
}

h3 span.subtitle {
    font-size: 16px;
}

h3 {
  background: var(--color-header3);
  font-size: 22px;
}

h3.accordion-header{
    padding:0px;
    margin-bottom: 1rem;
}

h2.narrow, h3.narrow{
    padding:0.3rem;
}

#playbook h2, #playbook h3{
  font-family: var(--font-2);
  font-variant: small-caps;
}

pre {
    background:var(--color-bkg);
}

/* remove bottom margin from last element in a div container */
div.container> *:last-child, div.alert-content> *:last-child, div.move--notes> *:last-child{
    margin-bottom:0;
}

div.container> div.container > *:last-child, div.container> div.row p:last-child{
    margin-bottom:1rem;
}

div.container.no-header{
    margin-top:1rem;
}

span.font-2  {
    font-family: var(--font-2);
    color:white;
    white-space:nowrap;
    font-variant: small-caps;
}

ul.no-bull {
    list-style:none;
}

ul.spaced li, ol.spaced li {
    padding: 0.5em 0em;
}

ol.bold > li::marker {
    font-weight: bold;
}

/*Move Displays*/

.move-name {
  display:flex;
  padding: 15px;
  text-align: initial;
  background: var(--color-move-header);
  font-weight: bold;
  font-size: 22px;
  font-family: var(--font-2);
  font-variant: small-caps;
  line-height:1.1em;
}

.playbook-name {
  padding: 15px;
  font-weight: bold;
  font-family: var(--font-2);
  font-variant: small-caps;
}

.move-name span.move--title-category {
    margin-left:auto;
    margin-right:0;
}

.move-name span.move--title-id, .tag-name span.tag--title-id {
    font-size: 15px;
    color:var(--color-text);
}

.game--tags{
    margin-bottom:0.3em;
    margin-left:15px;
}

.game--tags a:hover{
    text-decoration: none;
    border-bottom: none;
}

.game--tags span.game--tag, span.game--tag-inline.game--tag, span.move--name, span.tag--name, span.item--name{
    border-color: #d8c483;
    border-style: solid;
    border-width: 0.15rem;
    color: white;
    background:black;
    font-size: 1.1em;
    font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    padding-right: 5px;
    padding-left: 5px;
    text-align: left;
    text-indent: 0.00em;
    display: inline-block;
    margin: 0.1em 0;
    margin-bottom:0.3em;
    padding-bottom:5px;
}
.game--tags span.game--tag {
    margin-bottom:0em;
}

.game--tags span.game--tag:hover, span.game--tag-inline.game--tag:hover{
    user-select:none;
}

span.game--tag:hover, span.move--name:hover, span.tag--name:hover, span.item--name:hover{
    text-decoration: underline;
}

a span.game--tag:hover, a span.move--name:hover, a span.tag--name:hover, a span.item--name:hover{
    cursor:pointer;
}



span.game--tag-inline.game--tag, span.move--name, span.tag--name, span.item--name{
    margin: 0;
    padding-bottom:0;
    font-size: 0.95rem;
}

.game--tags span.game--tag.generalTag, span.game--tag-inline.game--tag.generalTag{
    background-color: var(--color-header2-dark);
}

.game--tags span.game--tag.moveTag, span.game--tag-inline.game--tag.moveTag{
    background-color: var(--color-move-header);
}

.game--tags span.game--tag.modeTag, span.game--tag-inline.game--tag.modeTag{
    background-color: #c16c16;
}

.game--tags span.game--tag.classTag, span.game--tag-inline.game--tag.classTag{
    background-color: var(--color-header1);
}

.game--tags span.game--tag.tagTag, span.game--tag-inline.game--tag.tagTag{
    background-color: var(--color-header2);
}

div.move--notes{
    padding: 0 0.7em;
}

/**/

/*Inline links*/
a.inline-lookup span{
    text-decoration: none;
/*    border-bottom: 0px;*/
}

span.move--name {
    background:var(--color-move-header);
}

/*span.move--name:hover {
    background:var(--color-move-header-dark);
}*/

span.tag--name {
    background:var(--color-header2);
}

/*span.tag--name:hover {
    background:var(--color-header2-dark);
}*/

span.item--name {
    background:var(--color-header2);
}

/*span.item--name:hover {
    background:var(--color-header2-dark);
}*/
/**/

span.term {
    font-weight:bold;
    font-variant: small-caps;
    font-size: 1.3em;
    display: inline-block;
    margin-top: -1em;
}

span.term.non-para {
    margin-top:unset;
}

.truecentered {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered {
	text-align:center;
}

.subgrouping{
	padding-left: 0px;
	padding-right: 0px;
}

.subgrouping-first{
    padding-left: 0px;
}

.subgrouping-last{
    padding-right: 0px;
}

.navanchor{
    top: -3rem;
    position: relative;
}

/* Navbar */

.navbar a:link, .navbar a:visited, .navbar a:focus, .navbar a:hover{
    color: rgb(255,255,255);
    border-bottom: none;
}

.navbar a:hover {
    text-decoration: none;
}

.dropdown-menu, .dropdown-item, .dropdown-item a:visited{
	background-color: var(--color-navbar);
	color: var(--color-text) !important; 
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--color-navbar2);
    color: rgb(255,255,255) !important;
}

.dropdown-menu li {
      position: relative;
    }
    
.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
  display: block;
}

.dropdown-submenu-title {
    user-select: none;
    margin-right:2rem;
}

.dropdown-submenu-title::after{
    content: "»";
    text-align: right;
    float:right;
}

.highlight {
    background-color:var(--color-header1);
    color:rgb(255,255,255);
}


/* content */

ul.loose li {
    margin-bottom: 0.5rem;
}

ul.tight {
    margin-bottom:0rem;
}

.blockquote {
    font-size: 1rem;
    border-left: 3px #eee solid;
    padding-left: 0.5rem;
}

/* content */

.move-button {
    background-color: var(--color-move-header);;
    text-align: center;
    color: var(--color-accordion-header);
    font-weight: bold;
    font-size: 25px;
}

button.accordion-button.move-button {
    background-color: var(--color-move-header);
    font-family:var(--font-2);
    font-variant: small-caps;
    font-weight: bold;
    font-size: 25px;
}
button.accordion-button.move-button span {
    text-align: center;
};

.move-button:not(.collapsed) {
    background-color: var(--color-accordion);
    text-align: center;
    color: var(--color-accordion-header);
    font-weight: bold;
    font-size: 25px;
}

.move-content {
	padding-left: 15px;
	padding-right: 15px;
    font-family:var(--font-2);
    color: var(--color-text);
}

.move-content>strong, .move-content>p>strong{
    font-family:var(--font-2-bold);
}

.move-content em {
    font-family:var(--font-2-italic);
    font-style:italic;
}

span.move--trigger {
    font-weight:bold;
    font-family:var(--font-2-bold);
}

span.move--name{
    font-family:var(--bs-body-font-family);
}

.move--name span.move--trigger {
    font-family:var(--font-2);
}

/*span.move--success-head, span.move--partial-head, span.move--failure-head {
    font-weight:bold;
    font-family:var(--font-2-bold);
}*/

.move-content  p::before{
    font-weight:bold;
    font-style:italic;
    font-family:var(--font-2-bold);
}

div.move-content .move-results {
    margin-left:1rem;
}

div.move-content .move-results>div {
    padding-left:0.5rem;
}

.move--critsuccess {
    border-left: 3px solid purple;
}

.move--critsuccess p:first-child::before{
    content:"On critical (multiple 6s): ";
}

.move--success {
    border-left: 3px solid green;
}

.move--success p:first-child::before{
    content:"On a success (6): ";
}

.move--partial {
    border-left: 3px solid orange;
}

.move--partial p:first-child::before{
    content:"On a partial success (4-5): ";
}

.move--failure {
    border-left: 3px solid red;
}

.move--failure p:first-child::before{
    content:"On a failure (3-): ";
}

.accordion-body.move-content, .accordion-header.move-content{
    font-family:var(--font-2);
}

.accordion-header.move-content{
    font-variant: small-caps;
    background: var(--color-accordion);
}

.cc-accordion {
    margin-top:1rem;
    margin-bottom:1.5rem;
}

.cc-accordion>.accordion-item{
    border: none;
}

.accordion-body {
    margin-bottom:1rem;
}

.accordion-button::after{
    margin-left:0.6em;
}

.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
    background-color: var(--color-accordion);
    border-bottom: 1px solid rgb(53, 58, 60); 
 }

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--color-accordion-header);
  box-shadow: none;
}

.cc-accordion-button{
    background-color: var(--color-header1) !important;
}

.cc-accordion-button:hover{
    background-color: var(--color-accordion-hover) !important;
}

.cc-accordion-button:not(.collapsed)::after{
    transform:rotate(-90deg);
}

.accordion-item:first-of-type .accordion-button.cc-accordion-button{
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
}

.cc-accordion > .accordion-item > h3.accordion-header {
    margin-bottom: 0;
}

.move-oneline {
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    padding: 7px 0;
    margin-bottom: 1rem;
}

div.inline-move{
    background:#232628;
}

div.move-text-oneline {
    margin-bottom: 10px;
}

div.move-text-oneline .last {
    margin-bottom: 0;
}

#stats {
    margin-bottom: 20px;
}

#stats td, #stats th {
    border: 1px solid #333; 
}

#stats th {
    background: #333;
    color: rgb(255,255,255);
}

.InstructionsAfterHeader, .Instructions {
    font-weight: bold;
}

.ExplorationQuestions{
	text-align:center;
}

.inline-dice div.fa-solid, .inline-dice div.fal {
    font-size:2em;
}

.inline-dice div.fa-dice-one{
    color:lightcoral;
}

/***** Tables *****/

table.general-table{
	width: 100%;
}

table.general-table tr th:first-child,
table.general-table tr td:first-child {
/*  min-width: 8em;*/
  max-width: 15em;
  text-align:center;
}

table.general-table th {
  background-color: var(--color-header2);
  color: #ffffff;
}

table.general-table tfoot td {
  background-color: var(--color-header2-dark);
}

table.general-table tr:nth-child(even) {
  background-color: #2A2A2A;
}
table.general-table tr:nth-child(odd) {
  background-color: #1a1c1e;
}

table.borderless-table tbody, table.borderless-table td, table.borderless-table tfoot, table.borderless-table thead, table.borderless-table tr {
    border-style: none !important;
    color: var(--color-text);
}

table.hover-table tr:hover, table.hover-table>tbody>tr:hover, table.hover-table>tbody>tr:hover a {
    background-color: #919191;
    color: rgb(0,0,0);
}

table.roll-table {
    margin-bottom:1.5rem;
}

table.roll-table tbody tr td{
    font-size:0.9rem;
}

table.roll-table thead tr th:first-child{
    background-color: var(--color-move-header-dark);
    font-size:1rem;
    width:25%;
}

table.roll-table tbody tr td:first-child, table.roll-table tr th:first-child{
    border-right: 5px solid var(--color-bkg);
    font-size:1rem;
}

table.roll-table tr th.header-col-spacer {
    border-right:0;
    background-color: var(--color-header2);
}

table.roll-table tr th:nth-child(2), table.roll-table tbody tr td:nth-child(2){
   padding-left:1em;
}

.playbookstats-table {
	text-align: center;
}

/* STR */
.playbookstats-table td:nth-child(2) {
  background-color: rgba(247, 69, 69, 0.4);
  color: var(--color-text);
}
/* DEX */
.playbookstats-table td:nth-child(3) {
  background-color: rgba(112, 179, 123, 0.4);
  color: var(--color-text);
}
/* CON */
.playbookstats-table td:nth-child(4) {
  background-color: rgba(219, 169, 107, 0.4);
  color: var(--color-text);
}
/* INT */
.playbookstats-table td:nth-child(5) {
  background-color: rgba(110, 196, 189, 0.4);
  color: var(--color-text);
}
/* WIS */
.playbookstats-table td:nth-child(6) {
  background-color: rgba(52, 47, 196, 0.4);
  color: var(--color-text);
}
/* CHA */
.playbookstats-table td:nth-child(7) {
  background-color: rgba(126, 67, 156, 0.4);
  color: var(--color-text);
}

table.background-table p, table.background-table p:last-child {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

table.font-2 td{
    font-family: var(--font-2);
}

table.spell-pattern-table ul {
    margin-bottom: 0;
}

/***** Alerts *****/
	
.alert-general{
/*	background-color: rgba(20, 89, 116, 0.7);*/
    background-color: var(--color-navbar2);
	color: var(--color-text);
}

.alert-bnuuy{
/*  background-color: rgba(20, 89, 116, 0.7);*/
    background-color: var(--color-navbar2);
    color: var(--color-text);
    background-image: url('../images/BnuuyDice_Logo.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 50px;
    background-position: left;
}

.alert-foundry{
    background-color: var(--color-navbar2);
    color: var(--color-text);
    background-image: url('../images/fvtt.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 50px;
    background-position: left;
}

.alert-foundry div.alert-content, .alert-bnuuy div.alert-content{
    padding-left: 4rem;
}

.rarity-badge{
    margin-left:10px;
}
.playbook-stats {
    text-align: center;
}

.playbook-stats p{
    font-family: var(--font-2);
}


.playbook-stats p.stat-title{
    font-size:2em;
}

.text-over-icon{
    color: var(--color-text);
    user-select:none;
    font-weight:900;
    -webkit-text-stroke: 4px var(--color-header2);
    text-shadow: 0px 2px 4px var(--color-navbar);
}

#hp .text-over-icon {
    top:-8px;
}

#damage .text-over-icon {
    margin-top: .1em;
    top:-5px;
}

#load .text-over-icon {
    margin-top: .1em;
}

#load .text-over-icon {
    margin-top: .1em;
}

#keyabilities .text-over-icon.ability-STR {
    left:-0.3rem;
}

#keyabilities .text-over-icon.ability-DEX {
    left:-0.6rem;
}

#keyabilities .text-over-icon.ability-CON {
    left:-1rem;
}

#keyabilities .text-over-icon.ability-INT {
    left:0.2rem;
}

#keyabilities .text-over-icon.ability-WIS {
    left:-0.75rem;
}

#keyabilities .text-over-icon.ability-CHA {
    left:-0.8rem;
}

.text-over-icon.text-large{
    font-size:1.5em;
}

/***** Lists *****/

ol#general-advice>li{
    padding-bottom:1rem;
}

ul#glossary-list {
    list-style-type: none;
    padding-right:2rem;
}

ul#glossary-list>li {
    padding-bottom:0.5rem;
    padding-top:0.5rem;
    border-bottom: 2px solid var(--color-header2-dark);
}

ul#glossary-list>li>span.glossary-name{
    font-size: 1.1em;
    font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
} 

/* Clickable Selector List */

.clickable-li, .clickable-li-title{
    user-select: none;
    border-bottom:1px solid #444;
    padding-left: 0.4em;
}

.clickable-li-title{
    background-color:var(--color-header1);
    font-family: var(--font-2);
    font-variant:small-caps;
    font-size:1.5em;
    color:white;
}

.clickable-li-header, .clickable-li-footer {
    cursor: pointer;
    user-select:none;
    background-color:var(--color-header2);
    font-family: var(--font-2);
    font-variant:small-caps;
    font-size:1em;
    color:white;
    margin-left:0;
    margin-right:0;
}

.clickable-li-header span:hover{
    background-color:var(--color-header2-dark);
}

.clickable-li-footer {
    text-align:center;
    background-color:var(--color-header2-dark);
}

a .clickable-li-footer:hover {
    background-color:var(--color-header2);
}

.clickable-li {
    cursor: pointer;
    background-color:#222;
    border-bottom:1px solid #444;
    font-size:.8em;
}

a .clickable-li {
    color:var(--color-text);
    text-align: center;
}

.clickable-li:hover {
    background-color: #333;
}

.clickable-li ul{
    list-style: none;
}

.clickable-li div.row{
    align-items:center;
}

.clickable-li span.title{

}

.clickable-li span.rarity{
    
}

.clickable-li span.rarityUncommon{
    color:lightgreen;
}

.clickable-li span.rarityRare{
    color:indianred;
}

.clickable-li span.typeAncestry{
    color:mediumslateblue;
}

.clickable-li span.typeHeritage{
    color:lightcyan;
}

.clickable-list-menu{
    overflow-y:scroll;
    overflow-x:hidden;
    max-height: 40em;
    scrollbar-width: thin;
}

.clickable-list-menu#lineageMenu{
    max-height: 30em;
}

/**** Page Navigation Sidebar Selectors ****/

.clickable-list-menu#rulesMenu, .clickable-list-menu#playbookNavMenu, .clickable-list-menu#ccMenu{
    max-height: 80vh;
}

.clickable-list-menu#sphereMenu, {
    scrollbar-width: none;
}

div.nav-col.mobile{
    padding: 0 4em;
}

.mobile .clickable-list-menu#rulesMenu, .mobile .clickable-list-menu#playbookNavMenu, .mobile .clickable-list-menu#ccMenu{
    max-height: 20em;
}

.nav-col div.selector-nav {
    padding-top: 5rem;
}

.selector-nav .clickable-li-header span {
    padding-left:2em;
}

.selector-nav .clickable-li-header span:hover{
    background-color: initial;
    user-select: none;
    cursor: default;
}

.selector-nav a .clickable-li {
    text-align: left;
}

.selector-nav .clickable-li span.clickable-li-name{
    padding-left:2.5em;
}

.selector-nav#playbookNavSelector .clickable-li span.clickable-li-name{
    padding-left:0.5em;
}
.selector-nav .clickable-li span.clickable-li-subname{
    padding-left:3.5em;
}

a.highlight .clickable-li, .highlight.clickable-li, .highlight.clickable-li span, a.highlight .clickable-li:hover, .highlight.clickable-li:hover, .highlight.clickable-li span:hover{
    background-color: #777;
    color:var(--color-bkg);
    font-weight:bold;
}

a.highlight .clickable-li::before{
    content:"> ";
    margin-right: -0.8rem;
}
/*
a.highlight .clickable-li-name{
    padding-left:1.5em;
}*/

a.highlight .clickable-li:hover, div.highlight.clickable-li:hover{
    background-color: #333;
    color:var(--color-text);
}