abovevtt.css

button[id$='-button'],
button[id$='_button'],
button[id^=peerVideo_],
#combat_tracker > button,
body > button,
#addscene,
.scene button,
#combat_tracker_inside button,
#edit_dialog button:not(.rc-switch),
#edit_scene_form button:not(.rc-switch),
#mega_importer button,
#prewiz td button,
#wizard_popup button,
#aoe_feet
#text_size,
.top_menu button,
.monster_frame > button,
.stp-btn,
.player-actions button,
#add-party,
#reset_round_number,
#zoom_buttons button,
.GameLogEntry_Message__1GoY3 button {
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    color: #3d3d3d;
    height: 22px;
    margin: 0 2px;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
    padding: 2px 8px;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out, background-color 0.3s ease-in-out, background-image 0.1s ease-in-out;
    border: 1px solid lightgray;
    font-size: 12px;
}
table#combat_area .ac{
    position: absolute;
    top: 21px;
    left: 21px;
    width: 18px;
    height: 18px;
}
button[id^=peerVideo_]{
    height: 27px;
}

button#startScreenShare{
    height: 27px;
    background: #fff;
    border: 0px;
    border-radius: 5px;
}


canvas.dice-rolling-panel__container{
    max-width: calc(100% - 340px) !important;
}

.abovevttTempMessage{
    display:block;
    position:fixed;
    width:400px;
    bottom:10%;
    left:50%;
    font-size:20px;
    transform: translateX(-50%);
    pointer-events:none;
    color:#fff;
    text-shadow: 1px 1px 0px #000, 
        -1px -1px 0px #000, 
        -1px 1px 0px #000, 
        1px -1px 0px #000, 
        0px -1px 0px #000, 
        1px 0px 0px #000, 
        0px 1px 0px #000, 
        -1px 0px 0px #000;
    z-index:10000000000;
    text-align:center;
    text-transform: uppercase;
    font-weight:bold;
}
.percentageLoaded{
    height: 10px;
    position: absolute;
    background: #0F0;
}
#check_chapter_access{
    color: #0376e9;
}
button.daylight {
    position: relative;
    height: 20px;
    width: 20px;
    left: -2px;
    top: 3px;
    border-radius: 3px;
    object-fit: cover;
    background: #fff;
    border: 1px solid #d8e1e8;
    cursor: pointer;
}

button.daylight.active-daylight {
    background: #1b9af0;
}

button.daylight span.material-symbols-outlined {
    font-size: 15px;
    position:relative;
    left: -4px;
}
#loading_overlay {
    position: fixed;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    z-index: 70000;
    background-color: #26282a;
}
#loading_overlay_bg {
    background-position: center;
    background-size: cover;
    filter: blur(4px);
    width: 100%;
    height: 100%;
    background-color: #26282a;
    opacity: 0.5;
}
#loading_overlay_bg.dm {
    background-image: url(https://media-waterdeep.cursecdn.com/attachments/0/267/dmg1k.jpg)
}
#loading_overlay_bg.player {
    background-image: url(https://media-waterdeep.cursecdn.com/attachments/0/264/phb1k.jpg)
}

.joindm {
    position: relative;
}

body > div {
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
}
#monster-stat-block,
.note,
.note-flyout{
  -webkit-user-select: text; 
  -ms-user-select: text; 
  user-select: text; 
}
.above_delete {
    width: 400px;
}
.above_delete2 {
    width: 400px;
    margin-top: 6px;
    margin-bottom: 10px;
}

#cpick{
    display: block;
    margin-left: 27px;
    height: 27px;
}

#combat_tracker_inside button {
    padding: 2px 4px;
}

button[id$='-button']:hover,
button[id$='_button']:hover,
button[id^=peerVideo_]:hover,
#combat_tracker > button:hover,
body > button:hover,
#addscene:hover,
.scene button:hover,
#combat_tracker_inside button:hover,
#edit_dialog button:not(.rc-switch):hover,
#edit_scene_form button:not(.rc-switch):hover,
#mega_importer button:hover,
#prewiz td button:hover,
#wizard_popup button:hover,
.top_menu button:hover,
.monster_frame > button:hover,
.stp-btn:hover,
.player-actions button:hover,
#add-party:hover,
.importer_toggle:hover,
#zoom_buttons button:hover,
.GameLogEntry_Message__1GoY3 button:hover {
    color: #333;
    background-image: none;
    background: #e6e6e6;
}
[class*='GameLogEntries'] [class*='Message-Collapsed-Other-Flex'] {
    padding: 8px 10px;
    color: rgb(92, 112, 128);
    background: rgb(245, 248, 250);
    border: 1px solid rgb(206, 217, 224);
    border-radius: 0.75rem 0.75rem 0.75rem 0px;
    width: 100%;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
}

.custom-gamelog-message {
    width: 100%;
    font-size: 14px;
    font-family: Roboto,Helvetica,sans-serif;
    font-weight: 400;
}
button.gamelog-to-everyone-button,
button.set-conditions-button,
button.remove-conditions-button {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(206, 217, 224);
    border-image: initial;
    border-radius: 0px 0px 4px 4px;
    padding: 4px 10px;
    text-transform: uppercase;
    font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 0.7rem;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #5c7080;
    cursor: pointer;
    float:left;
}

span.flex-wrap-center-chat-message{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
button.gamelog-to-everyone-button:hover {
    border: 1px solid rgb(152, 160, 164);
    background-color: rgb(220, 219, 219);
    color: #33404b;
}

.material-icons.md-10 { font-size: 10px; }
.material-icons.md-12 { font-size: 12px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-32 { font-size: 32px; }
.material-icons.md-small{font-size: 100%;}
.material-icons.md-weight-700 { font-weight: 700; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.button-icon {
    color: #838383;
    font-size: 18px;
    font-weight: 700;
    margin: -3px -3px;
}
.material-icons.button-icon:hover {
    color: #fff;
}


.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading {
    display: flex;
    flex-wrap: wrap;
    font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
    cursor: pointer;
    color: #838383;
    line-height: 1;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #f2f2f2;
    margin: 3px 2px;
    border-radius: 3px;
    padding: 5px 7px;
    white-space: nowrap;
}

button .ddbc-tab-options__header-heading{
    background-image: unset;
}
button .ddbc-tab-options__header-heading .menu-option{
    width: 69px;
}
.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading--is-active {
    color: #fff;
    background-color: #c53131;
}
.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading:hover {
    background-color: #5d5d5d;
    color: #f2f2f2;
}
.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading svg path {
    fill: #838383
}
.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading--is-active svg path {
    fill: #fff;
}

#select_locked.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading--is-active svg .st1{
    fill: #fff;
}
.ddbc-tab-options--layout-pill .ddbc-tab-options__header-heading svg{
    padding: 0px 0px 0px 1px;
}
#ping_center .ddbc-tab-options__header-heading{
    width: 26px;
    height: 24px;
}
.menu-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
    padding: 5px 0;
}
.wall-input{
    padding:0px;
}
.top_menu {
    margin: 0 8px;
    top: 30px !important;
    border-radius: 5px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    text-align: center;
}

.top_menu.visible {
    max-height: 100%;
    overflow-y: auto;
    border: solid black 1px;
}

.body-rpgcharacter-sheet div.avtt-sidebar-controls {
    margin: 4px 0px 0px 0px !important;
}
.ct-character-sheet--dark-mode .ct-sidebar__inner div[class*='styles_content'] #chat-text {
    color: #bfccd6;
    background: #313739;
}
.ct-character-sheet--dark-mode .ct-sidebar__inner div[class*='styles_content'] .dice-roller img {
    filter: invert(0.6) sepia(1) saturate(0.5) hue-rotate(175deg);
}
.ct-character-sheet--dark-mode .ct-sidebar__inner div[class*='styles_content'] .sidebar-panel-content {
    color: black;
}


.sidebar__controls > div button {
    width: 30px;
    font-size: 20px;
    line-height: 19px;
}

#scene_selector_toggle {
    align-items: center;
    margin: 0px;
}
#scene_selector_toggle_pill {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    top: 2px;
    z-index: 57000;
}

#scene_selector_toggle > span {
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
}

#scene_selector_toggle.menu_opened > span {
    transform: rotate(180deg);
    transition: 0.5s ease-in-out;
}
#sheet {
    border: none;
    position: fixed;
    top: 30px;
    bottom: 0px;
    right: -1030px;
    left: auto;
    width: 1030px;
    height: auto;
    background: #242527;
    z-index: 0;
    
    transition: -webkit-transform ease-in-out 0.5s;
    transform-origin: top;
    transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateX */

}
#sheet iframe {
    border: none;
    position: absolute;
    top: 24px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#sheet.thin {
    width: 420px;
}
.door-button{
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    left: calc(var(--mid-x) - 10px );
    top: calc(var(--mid-y) - 10px);
    opacity: 0.8;
    transform: scale(Max(1, calc(1 / var(--window-zoom))));
}

.door-button.hiddenDoor,
.body-rpgcharacter-sheet .door-button.secret{
    display:none;
}



.door.background{
    border: 2px ridge #060606;
    height: 130%;
    width: 100%;
    position: absolute;
}
.door.foreground{
    background: #fff6;
    height: calc(130% - 2px);
    width: calc(100% - 2px);
    left: 1px;
    top: 1px;
    border: 1px solid #000;
    position: absolute;
    transform-origin: left;
    transform: rotateY(0deg);
    transition: 200ms transform 0ms linear;
}
.door-icon{
    width: 15%;
    height: 33%;
    position: absolute;
    top: 34%;
    left: 74%;  
}
.door-button:hover .door.foreground {
    background: #fff;
}

.door-button:hover .window.foreground,
.door-button:hover .window.background>div {
    background: #fffc;
}

.door.foreground>div{
    border-radius: 5%;
    width: 15%;
    height: 38%;
    position: absolute;
    top: 37%;
    left: 73%;
    background: #000;
}


.door-button.open .door.foreground{
    transform: rotateY(57deg) skew(0deg, 16deg);
    transition: 200ms transform 0ms linear;
}

.door-button.locked .door-icon{
    content: "";
    display: block;
    background: #0008;
    width: 50%;
    height: 30%;
    position: absolute;
    top: 61%;
    left: 25%;
    border-radius: 0;
    margin: auto;
}
.door-button.locked .door-icon:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    bottom: 100%;
    position: absolute;
    border: 2px solid #0008;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom: 0;
}

.door-button.secret .door-icon:before {
    content: "S";
    font-weight: 600;
    color: #F008;
    display: block;
    font-size: 20px;
    line-height: 18px;
    position: absolute;
}
.door-button.secret .door-icon {
    background: none;
    content: "";
    display: block;
    width: 66%;
    height: 30%;
    position: absolute;
    top: 20%;
    left: 20%;
    border-radius: 0;
    margin: auto;
}
.door-button.secret.locked .door-icon:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    bottom: 100%;
    position: absolute;
    border: 2px solid #0008;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom: 0;
}
.door-button.secret.locked .door-icon:after {
    content: "S";
    font-weight: 600;
    color: #F008;
    display: block;
    font-size: 13px;
    line-height: 18px;
    top: 2px;
    left: 0px;
    position: absolute;
}
.door-button.secret.locked .door-icon{
    content: "";
    display: block;
    background: #0008;
    width: 8px;
    height: 5px;
    position: absolute;
    top: 8px;
    left: 6px;
    border-radius: 0;
    margin: auto;
}
.window.background{
    border: 2px ridge #0a0600c2;
    height: 26px;
    width: 20px;
    position: absolute;
}


.window.foreground{
    background: #fff6;
    height: 13px;
    width: 16px;
    left: 2px;
    top: 1px;
    border: 1px solid #000;
    position: absolute;
}
.window.background>div{
    content: '';
    background: #fff6;
    height: 13px;
    width: 16px;
    transform: translateY(9px);
    border: 1px solid #000;
    position: absolute;
    transition: 200ms transform 0ms linear;
}
.open .window.background>div{
    content: '';
    background: #fff6;
    height: 13px;
    width: 16px;
    top: 0%;
    transform: translateY(1px);
    border: 1px solid #000;
    position: absolute;
    transition: 200ms transform 0ms linear;
}

.door-button:not(.ignore-hover):not(.locked):hover .window.background>div{
    transform: translateY(7px);
    transition: 50ms transform 100ms linear;
}
.door-button.open:not(.ignore-hover):hover .window.background>div{
    transform: translateY(2px);
    transition: 50ms transform 100ms linear;
}

.door-button:not(.ignore-hover):not(.locked):hover .door.foreground{
    transform: rotateY(35deg) skew(0deg, 6deg);
    transition: 50ms transform 100ms linear;
}
.door-button.open:not(.ignore-hover):hover .door.foreground{
    transform: rotateY(45deg) skew(0deg, 10deg);
    transition: 50ms transform 100ms linear;
}



/*for resizable and moveable monsters and sheets in DM view*/

#sheet {
    left: auto;
    right: 340px;
    display: none;
    position: fixed !important;
    border-radius: 5px; 
    z-index: 10010;
    border: 1px solid gray;  
    top: 28px;
    bottom: auto;
    height: calc(100vh - 50px);
}

#sheet.open {
    display: block !important;  
    transition: none;
    transform: none;
    backdrop-filter: opacity(0);
    cursor: move;
    z-index:  49000;
}

.resizeDragWindow,
#resizeDragMon {
    display: flex;
    left: 271px;
    top: 67px;
    right: auto;
    width: 410px;
    height: 85%;
    position: fixed !important;
    opacity: 1;
    background: #242527;  
    cursor: move;   
    z-index: 49000;
    border-radius: 3px;   
    border: 1px solid gray;
}

.resizeDragWindow.hideDragWindow,
#resizeDragMon.hideMon{
    visibility: hidden;
}
.resize_drag_window{
    background: url(https://www.dndbeyond.com/attachments/0/84/background_texture.png) #f9f9f9;
}


#sheet iframe {
    width: 100%;
    height: calc(100% - 24px) !important;
    border-radius: 0 0 3px 3px;   
}


#resizeDragMon iframe {
    width: 100%;
    height: calc(100% - 23px) !important;
    position: absolute;
    left: 0;
    top: 24px;
    max-height: 100%;
    border-radius: 0px 0px 3px 3px;
}

#resizeDragMon .avtt-stat-block-container {
    margin: 25px 0px 0px 0px;
    overflow-y: auto;
    overflow-x: hidden;
}
#resizeDragMon .avtt-stat-block-container .details-more-info {
    background: #fff;
    width: 100%;
}
#resizeDragMon .avtt-stat-block-container .ability-block__stat{
    width:  16.666666667%;
}

#resizeDragMon .avtt-stat-block-container .ability-block__data{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#resizeDragMon .avtt-stat-block-container .mon-stat-block .tooltip-hover{
    color: inherit !important;
    font-weight: inherit !important;
    -webkit-text-decoration: underline solid #47d18c;
    text-decoration: underline solid #47d18c;
}
#resizeDragMon .avtt-stat-block-container .ddbc-creature-block__header{
    margin-top: 10px;
}
#site.body-rpgcharacter #resizeDragMon .avtt-stat-block-container .detail-content > .mon-stat-block {
    padding-top: 0;
    margin-top: 0;
}
#site.body-rpgcharacter #resizeDragMon .avtt-stat-block-container {
    margin: 25px 0px 0px 0px;
}

.open5eMonster .detail-content>div:not(.mon-stat-block) {
    display:none !important;
}
a.ddbeb-button {
    align-items: center;
    -webkit-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #d8e1e8;
    border-radius: 3px;
    color: #1b9af0!important;
    cursor: pointer;
    display: inline-flex;
    font-family: Roboto,Open Sans,Helvetica,sans-serif!important;
    font-size: 12px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    letter-spacing: 1px;
    padding: 0 16px;
    text-transform: uppercase;
}
select#doorTypeSelectUVTT option,
select#doorTypeSelectUVTT{
    text-transform: uppercase;
}
#resizeDragMon iframe {
    z-index: -10000;
}

#resizeDragMon:visible iframe {
    z-index: 10000;
}

.ui-resizable-handle {
    z-index: 50100 !important;
}

#horizontalMinorAdjustment,
#verticalMinorAdjustment
{
    position:relative;
}

#wizard_popup button#resetMinorVerticalAdjustmentRange,
#wizard_popup button#resetMinorHorizontalAdjustmentRange {
    margin: 0;
    padding: 0;
    position: relative;
    display:inline-block;
}
.iframeResizeCover {
    z-index:9999999;
    position:absolute;
    width:calc(100% + 200px);
    height:calc(100% + 200px);
    display: block;
    right:-100px;
    bottom:-100px;
    top:-100px;
    left:-100px;
}

#exitWizard{
    z-index: 50;
    position: fixed;
    top: 4px;
    font-size: 20px;
    line-height: 17px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #c53131;
    background-image: none;
    border: none;
}

.body-rpgcharacter-sheet #fog_overlay {
    filter: drop-shadow(0px 0px 2px #000) blur(1px); /*fill in fog gaps on player view*/
  
}
#fog_overlay{
  pointer-events:none;
}
#elev_overlay{
    opacity: 0.5;
}
#combat_tracker_inside .ui-resizable-s,
#combat_tracker_inside .ui-resizable-se,
#combat_tracker_inside .ui-resizable-sw {
    bottom:-45px;  
    background: none;
    border-width:0px;
}

#combat_tracker_inside .ui-resizable-e,
#combat_tracker_inside .ui-resizable-w {
    height: calc(100% + 45px);  
}


.body-rpgcharacter-sheet #combat_tracker_inside .ui-resizable-s,
.body-rpgcharacter-sheet #combat_tracker_inside .ui-resizable-se,
.body-rpgcharacter-sheet #combat_tracker_inside .ui-resizable-sw{
    bottom: -35px;
}

.body-rpgcharacter-sheet #combat_tracker_inside .ui-resizable-e,
.body-rpgcharacter-sheet #combat_tracker_inside .ui-resizable-w  {
    height: 100%;  
}
#combat_tracker_inside #combat_area{
    width: 100%;
}

div#combat_button {
    z-index: 57000;
    position: fixed;
}
.ui-resizable-s{
    background:  transparent;
    border:  none;
}
#combat_tracker{
    width: 0px;
}
ul.context-menu-list.context-menu-root{
    z-index: 100000 !important;
}
#windowContainment{
    height:  100vh;
    width:  100vw;
    pointer-events:  none;
    display:  block !important;
    position:  fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
#tokenOptionsClickCloseDiv{
    height:  100vh;
    width:  100vw;
    display:  block !important;
    z-index: 58000;
    position:  fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.context-menu-flyout {
    display:  block !important;
    z-index: 1000;
    position:  absolute;
    background: #fff;
}



div.top_menu.visible,
.ddbc-tab-options--layout-pill{
    z-index: 57000;
}

#scene_selector{
    z-index: 58000;
}
#combat_footer,
#combat_tracker_inside{
    border-style: solid;
    border-color: #ddd; 
}
#combat_footer{
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 5px 5px; 
    left: -1px;
    right: -1px;
    position: absolute;
}

#combat_footer button{
    flex-grow: 1;   
}
#combat_footer{
    display: flex;   
}
#combat_tracker_inside {
    border-width: 1px 1px 0px 1px;
    border-radius: 5px 5px 0 0;
    width: 250px;
}
#combat_tracker_inside #combat_footer button:last-of-type{
    border-bottom-right-radius: 5px;   
}
#combat_tracker_inside #combat_footer button:first-of-type{
    border-bottom-left-radius: 5px; 
}

.body-rpgcharacter-sheet #combat_tracker_inside{
    border-radius: 5px;
}

#combat_tracker_inside input[readonly],
#combat_tracker_inside input[disabled=disabled],
#combat_tracker_inside input[disabled=disabled]:hover{
    opacity: 1;
    border-style: solid;
}

/*end resizeable*/
#addscene {
    margin: 5px;
}

.scene {
    border-radius: 5px;
    border: 1px solid #3d3d3d;
    width: 172px;
    height: 50px;
    float: left;
    overflow: hidden;
    margin: 5px;
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}
#sources-import-main-container .sidebar-panel-loading-indicator{
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}

.sortable_placeholder {
    width: 171px;
    height: 50px;
    border: 1px dashed #3d3d3d !important;
    background-image: -webkit-linear-gradient(270deg, #f7a6a6, #ff7777);
    float: left;
    overflow: hidden;
    display: block;
    margin: 5px;
}

.scene button,
#combat_tracker_inside button,
.top_menu button {
    margin: 0;
    border-radius: 0;
    border: 0;
}

.scene > div:first-of-type {
    padding: 5px;
    max-width: 169px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#scene_selector,
#text_controller_inside,
#combat_tracker_inside,
#edit_dialog,
#mega_importer,
#prewiz,
#wizard_popup,
.top_menu,
.elevationLegendDiv {
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}
.elevationLegendDiv{
    top: -5px;
    left: -1px;
    position: relative;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 5px;
    border-top: none;
    padding: 8px;
    width: calc(100% + 2px);
}
.elevationLegendDiv .row{
    display: flex;
    flex-direction: row;
}
.elevationLegendDiv .row .row-color{
    height: 20px;
    width: 20px;
    margin-right:5px;
}
#edit_dialog {
    top: 5px;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute !important;
}

#edit_dialog button:not(.rc-switch),
#edit_scene_form button:not(.rc-switch){
    background:none;
    border-radius:5px;

}
#edit_dialog input[type='text']{
    border-radius:5px;
    border: 1px solid #ddd;
    box-shadow:none;
}


input[type="number"][name='darkness_filter_number'],
input[type="number"][name='gridStrokeNumberInput']{
    width:50px;
    font-size:12px;
}
#edit_dialog input::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 4px;
  height: 12px;
  background: #1b9af0;
  cursor: pointer;
  border-radius:7px;
}

#edit_dialog input[type='range']{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    height:8px !important;
    width:110px !important;
    border-radius:5px;
}

#edit_dialog input{
    outline:none;
}
label[for='grid_line_width'] {
    font-size: 10px;
    position: absolute;
    font-weight: bold;
    top: -7px;
    left: -83px;
    top: -5px;
    left: 71px;
    color: #555;
}

input#grid_line_width {
    position: relative !important;
    top: 5px !important;
    left: 7px;
}

input[name='gridStrokeNumberInput'] {
    position: relative;
    top: 3px;
    left: -57px;
    position: absolute;
    top: 8px;
    left: 170px;
}

.isvideotogglelabel {
    display: inline-block;
    position: absolute;
    width: 80px;
    right: -20px;
    font-size: 11px;
    top: 6px;
    font-size: 9px;
}

button#player_map_is_video_toggle,
button#dm_map_is_video_toggle,
button#gridSubdividedToggle_toggle {
    height: 12px;
    top: -6px;
    color: #555;
}
button#gridSubdividedToggle_toggle{
    top:0px;
    width:60px;
}

button#player_map_is_video_toggle::after,
button#dm_map_is_video_toggle::after,
button#gridSubdividedToggle_toggle::after
 {
    height: 7px;
    width: 7px;
}
#edit_dialog #horizontalMinorAdjustmentInput,
#edit_dialog #verticalMinorAdjustmentInput
{
    width:80% !important;
}
#additionalGridInfo:after{
    width: 10px;
    height: 10px;
    content: "";
    display: inline-block;
    position: relative;
    border-style: solid;
    left: 5px;
    top: 0px;
    border-width: 5px;
    border-color: transparent transparent #888 transparent;
}
#additionalGridInfo{
    margin: 15px 0px 15px 0px;
    font-weight:bold;
}
#additionalGridInfo.closed:after{
    border-color: #888 transparent transparent transparent;
    top: 4px;
}
#additionalGridInfo.closed ~ div{
    display:none;
}
.verticalHex .hideVerticalHex,
.horizontalHex .hideHorizontalHex,
.horizontalHex .hideHex,
.verticalHex .hideHex{
    display:none !important; 
}

#gridType label {
    display: inline-block;
}
#gridType legend{
    font-weight:bold;
    width: initial;
}

#gridType fieldset>div{
    padding:5px;
}
#gridType input{
    margin-left: 10px;
}
#gridType fieldset{
    margin: initial;
    padding: initial;
    border: 1px solid #ddd;
}

button#player_map_is_video_toggle.rc-switch-checked::after,
button#dm_map_is_video_toggle.rc-switch-checked::after {
    left: 33px;
}
button#gridSubdividedToggle_toggle.rc-switch-checked::after{
    left:50px;
}

#show_grid_controls{
    position:relative;
}

#combat_tracker_inside {
    position: fixed;
    top: 67px;
    left: 2px;
    padding-bottom:3px;
    background-image: url('/content/1-0-1487-0/skins/waterdeep/images/mon-summary/paper-texture.png');
}

#combat_area button {
    padding: 2px;

}

#combat_area tr[data-current] {
    background-color: lightgreen;
}

#combat_area td:last-of-type {
    text-align: right;
}

#combat_tracker_inside .tracker-list {
    height: calc(100% - 55px);
    overflow-x: hidden;
}
/*combat UI Changes 2*/
#combat_tracker_inside .tracker-list{
    height: calc(100% - 55px);
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}
#round_number_label{
    width: calc(100% + 2px);
    left: -1px;
    position: relative;
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}


/*end combat ui changes 2*/

#combat_footer {
    text-align: center;
}

#combat_footer button {
    width: 50px;
    font-size: 10px;
}

#round_number_label {
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
}

input.roundNum::-webkit-outer-spin-button,
input.roundNum::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].roundNum {
  -moz-appearance: textfield;
}

input {
    border: 1px solid #3d3d3d;
}

#scene_properties form > button {
    float: right;
    vertical-align: bottom;
    margin-top: 20px;
}

#mega_importer {
    width:100%;
    height: calc(100% - 16px);
    top: 15px;
    z-index: 10000;
    position: absolute;
}
.avtt-stat-block-container .detail-content{
    width: 100%;
}

#sources-import-main-container {
    top: 86px;
    right: 390px;
    height: calc(100% - 170px);
    width: calc(100% - 500px);
    position: fixed !important;
    z-index: 99999;
    border: 1px solid #ddd;
    border-radius: 5px;
    min-width: 850px;
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}
#sources-import-main-container .sidebar-panel-loading-indicator svg{
    margin: 0px !important;
    height: calc(100% - 35px);
}
#sources-import-main-container .sidebar-panel-loading-indicator{
    top: 5px !important;
    border-radius: 0px 0px 5px 5px !important;
}
#sources-import-iframe {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: none;
    border-radius: 0px 0px 5px 5px;
}


#sources-import-content-container{
    width:100%;
    height:100%;
}

#sources-import-content-container .listing-card__body,
#mega_importer .listing-card__body{
    min-width: 200px;
}

@media (min-width: 728px){
    #sources-import-content-container .card-listing .listing-card,
    #mega_importer .card-listing .listing-card {
        width: 50%;

    }
    #sources-import-content-container .listing-card__title,
    #mega_importer .listing-card__title{
        font-size: 18px;
    }
}
@media (min-width: 1750px){
    #sources-import-content-container .card-listing .listing-card,
    #mega_importer .card-listing .listing-card
    {
        width: 33.33333%;
    }
    #sources-import-content-container .listing-card__title,
    #mega_importer .listing-card__title{
        font-size: 25px;
    }
}




#mega_importer.source_select {
    display: flex;
}
#mega_importer.source_select #scenes-panel {
    display: none;
}
#mega_importer.source_select #importer_toggles {
    float: left;
    width: unset;
    padding: 20px;
    height: 100%;
    display: block;
}
#mega_importer.source_select #importer_toggles {
    height: 100% !important;
    padding: 5px 10px 0px 0px;
}
#mega_importer.source_select #importer_toggles .back-to-source-select {
    background-image: url(https://www.dndbeyond.com/file-attachments/0/737/chevron-left-green.svg);
    background-repeat: no-repeat;
    display: inline;
    padding: 0px 20px 0px 20px;
    font-weight: 600;
}
#mega_importer.source_select #importer_toggles li.quick-menu-item {
    padding-top: 5px;
}
#mega_importer.source_select #importer_toggles .quick-menu-item-label {
    font-family: "Roboto Condensed",Roboto,Helvetica,sans-serif;
    border-left: 3px solid transparent;
}
#mega_importer.source_select #importer_toggles .quick-menu-item-tier-1 > .quick-menu-item-label {
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 5px;
    border-bottom: 1px solid #F7F6F5;
}
#mega_importer.source_select #importer_toggles .quick-menu-item-tier-2 > .quick-menu-item-label {
    font-size: 15px;
}
#mega_importer.source_select #importer_toggles .current-source {
    border-left-color: #47D18C;
    padding-left: 5px;
    backdrop-filter: brightness(0.9);
}
#mega_importer.source_select #importer_footer {
    display: none;
}
#mega_importer.source_select .sidebar-scroll-menu {
    overflow: auto;
    height: 100%;
}
#mega_importer.source_select #importer_area {
    overflow: auto;
    width: 100%;
    height: 100%;
    position: relative;
}

#mega_importer.source_select #importer_toggles ~ #importer_area{
    position: relative;
}

.floating-window-title-bar {
    background: #242527;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #fff;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color: gray;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    line-height: 26px;
    text-shadow: 0px 0px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    top: -20px;
    position: absolute;
    width: calc(100% + 2px);
    left: -1px;
    cursor: move;
    z-index: 10;
}


#importer_footer > div.page-number {
    right: 16px !important;
}

#importer_footer{
    bottom: 0px;
    position:absolute;
    padding:5pxc;
}



#importer_footer button:disabled:hover {
    color: #fff;
}

div#template_section {
    margin: 10px 5px;
    font-weight: 600;
}
div#template_section {
    padding-bottom: 5px;
    border-bottom:  1px solid #00000066;
}

div#scene_properties {
    margin: 0 5px;
}

div#scene_properties form > div {
    margin: 5px 0;
}

#importer_toggles {
    display: flex;
    align-items: flex-end;
    padding: .5rem .5rem 0;
    width: 100%;
    position: relative;
    min-width: 200px;
}

#prewiz td {
    padding: 10px;
    font-size: 16px;
    vertical-align: inherit;
}

#prewiz td button {
    width: 150px;
    text-transform: uppercase;
    height: 50px;
}

#wizard_popup {
    font-size: 16px !important;
    padding: 10px;
}

#wizard_popup button {
    display: block;
    margin: 10px auto;
    height: 28px;
    font-size: 16px;
    text-transform: uppercase;
    min-width: 45px;
}

#zoom_buttons {
    position: absolute;
    top: -3px;
    z-index: 57000;
    display: flex;
    flex-direction: row;
}
[class*='styles_controls'] #zoom_buttons svg{
    height: 20px;
    width: 20px;
}
.body-rpgcharacter-sheet #zoom_buttons{
    top: 2px;
}

.condition-lock.material-symbols-outlined {
    position: absolute;
    z-index: 10;
    top: 3px;
    min-width: 18px;
    line-height: 20px;
    display: inline-block;
    height: 20px;
    float: right;
    left: 132px;
}

.condition-lock.material-symbols-outlined:before{
    font-family: "Material Icons", sans-serif !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    content:"\e898"; 
}
.door-open.material-icons:before{
    content:"\eb4f"; 
    padding: 2px 0px;
}

.spatial-audio-off.material-icons:before{
    content:"\ebe8"; 
    padding: 2px 0px;
}
#tokenOptionsContainer .select-to-speak.material-icons:before{
    font-family: 'Material Symbols Outlined' !important;
    content:"\f7cf";
    padding: 2px 0px;
}
.door-lock.material-icons:before{
    content:"\e897"; 
    padding: 2px 0px;
}

.door-secret.material-icons:before{
    content: "S";
    margin: 0px 0px 0px 2px;
    color: #dc0000;
}

.door-hidden{
    padding: none;
    display:none;
}

.door-hidden.material-icons:before,
.door-hidden.material-icons:hover:before {
    content:"\e76e"; 
    font-family: "Material Icons", sans-serif !important;
}
.material-symbols-outlined.group_remove:before,
.material-symbols-outlined.group_remove:hover:before{
    content:"\e7ad"; 
}
.material-symbols-outlined.group_add:before,
.material-symbols-outlined.group_add:hover:before{
    content:"\e7f0"; 
}
.add-to-ct .material-symbols-outlined:before,
.remove-from-ct .material-symbols-outlined:before{
    left: 10px;
    position:absolute;
    font-size: 20px;
}
.condition-lock.locked.material-symbols-outlined:before,
.condition-lock.material-symbols-outlined:hover:before {
    content:"\e897"; 
}
.condition-lock.locked.material-symbols-outlined:hover:before{
    content:"\e898"; 

}
#hide_rightpanel .ddbc-tab-options__header-heading,
#zoom_buttons .ddbc-tab-options__header-heading {
    padding: 2px;
}
#hide_rightpanel .material-icons.button-icon,
#zoom_buttons .material-icons.button-icon {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0px 2px;
}

#scene_selector {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    top: 27px;
    max-height: 60vh;
    min-width: 200px;
    width: calc(100vw - 720px);
    max-width: 750px;
    border: solid black 2px;
    overflow: auto;
}

#scene_selector .scene_title {
    cursor: move;
    font-weight: bold;
}

.active_scene {
    box-shadow: 0px 0px 15px -4px #ff7777;
    border: 1px solid #ff7777;
}

.stp-btn {
    width: 100%;
    height: 34px;
}

.token {
    overflow: visible !important;
    border-radius: 50%;
    transition: box-shadow 0.5 ease-in-out;
    z-index: 50;
}

.hasTooltip::after {
    content: attr(data-name);
    -webkit-font-smoothing: antialiased;
    margin: 0 auto;
    opacity: 0;
    white-space: nowrap;
    background: rgba(32, 31, 31, 0.699);
    padding: 1px 1px 1px 1px;
    box-sizing: border-box;
    color: #fff;
    border-radius: 2px;
    text-shadow: 0px 1px 1px #000;
    visibility: hidden;
    transition: 0.2s ease-in-out 0.5s;
}

.tooltip-body {
    overflow-y: auto;
}

.drag-cancelled {
    display: none;
}

.hasTooltip.button-icon{
    position: relative;
}

.hasTooltip.button-icon.point-right span{
    transform: rotate(0turn);
    transition: transform 0.3s ease-in-out;
}

.hasTooltip.button-icon.point-left span{
    transform: rotate(0.5turn);
    transition: transform 0.3s ease-in-out;
}

.hasTooltip.button-icon::after {
    position: absolute;
    z-index: 100;
    left: 50%;
    font-size: 11px;
    top: 140%;
    transform: translate(-50%);
    transition: 0.1s ease-in-out 0.2s;
}

.hasTooltip.VTTToken::after {
    position: absolute;
    z-index: 4;
    left: 50%;
    font-size: 0.85em;
    font-size: var(--font-size-zoom);
    bottom: -1.2em;
    bottom: calc(-1 * (var(--font-size-zoom) + var(--font-size-zoom) / 1.5));
    transform: translate(-50%);
    pointer-events: none;
}


.definitelyNotAToken.ui-draggable-disabled>.token-image{
    cursor: default !important;
}

.token>.token-image{
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.hasTooltip.CTToken::after{
    position: absolute;
    z-index: 4;
    left: 100%;
    transform: translate(0, calc(var(--scrollY) * -1px + 25%));
    font-size: 16px;
    transition: visibility 0.1s ease-in-out 0.2s;
}

.hasTooltip:hover:after {
    opacity: 1;
    visibility: visible;
    transition: 0.05s ease-in-out 0.3s;
}

.hasTooltip.CTToken:hover:after {
    transition: visibility 0s ease-in-out 0s;
}
[class*='GameLogEntries'] p[class*='InfoItem'] {
    margin:0px
}
[class*='GameLogEntries'] p[class*='InfoItem']:first-of-type {
    font-weight:600
}

[class*='GameLogEntries'] [class*='detail__properties']{
padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.labelToken.hasTooltip:after,
.labelToken.hasTooltip:hover:after{
     content: attr(data-name);
    opacity: 1;
    background: none;
    color: #fff;
    transition: none;
    visibility: visible;
    font-size: 12px;
    bottom: -36px;
    pointer-events: none;
    --positive-shadow: 1px;
    --negative-shadow: -1px;
    left: auto;
    font-weight: bold;
    transform: scale(calc(1 / var(--window-zoom)));
    text-shadow: 0px 0px 0px #000, 
        var(--negative-shadow) var(--negative-shadow) 0px #000, 
        var(--positive-shadow) var(--negative-shadow) 0px #000, 
        var(--negative-shadow) var(--positive-shadow) 0px #000, 
        var(--positive-shadow) var(--positive-shadow) 0px #000, 
        0px 0px 5px #000;
    }

#token_map_items .labelToken.hasTooltip:after, 
#token_map_items .labelToken.hasTooltip:hover:after {
    font-size: calc(12px / var(--scene-scale));
    --positive-shadow: calc(1px / var(--scene-scale));
    --negative-shadow: calc(-1px / var(--scene-scale));
    bottom: calc(-36px / var(--scene-scale));
}
#tokens .underDarkness.labelToken.hasTooltip:after,
#tokens .underDarkness.labelToken.hasTooltip:hover:after{
    content:'';
}
#token_map_items .definitelyNotAToken.hasTooltip.VTTToken:not(.labelToken)::after{
    display:none;
}
.dead {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}


.dead:before, .dead:after {
    position: absolute;
    content: '';
    background: red;
    display: block;
    width: 100%;
    height: var(--size, 10px);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.5s ease-in-out;
}

.dead:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ct_dead img{
    filter: saturate(0);
}
#combat_area .hp,
#combat_area .max_hp,
#combat_area td:nth-of-type(4){
    color: #000000dd;
}
.ct_dead .hp,
.ct_dead .max_hp,
.ct_dead td:nth-of-type(4){
    color: #bc0f0f;
}


input.menu-input.acMenuInput[readonly],
input.menu-input.maxHpMenuInput[readonly], 
input.menu-input.hpMenuInput[readonly] {
    filter:brightness(0.7);
    opacity:0.4;   
}

input.menu-input.acMenuInput[readonly]::-moz-selection,
input.menu-input.maxHpMenuInput[readonly]::-moz-selection, 
input.menu-input.hpMenuInput[readonly]::-moz-selection {
    background: none !important;
    color:#000;
}

input.menu-input.acMenuInput[readonly]::selection,
input.menu-input.maxHpMenuInput[readonly]::selection, 
input.menu-input.hpMenuInput[readonly]::selection {
    background: #0000 !important;
    color:#000;
}


input.menu-input.acMenuInput[readonly]:focus,
input.menu-input.maxHpMenuInput[readonly]:focus, 
input.menu-input.hpMenuInput[readonly]:focus  {
    outline:none;
}
#combat_area .ct_dead[data-current][data-target*="characters"]{
    background: none;
}
#combat_area [data-target*="characters"] input:not(.init){
    text-decoration: none;
    background: none;
    border-width: 0;
    pointer-events:none;
}
#combat_area tr:not([data-target*="characters"]) input.hp{
    text-decoration: underline solid 0.5px #1b9af033;
}
#combat_area tr:not([data-target*="characters"]).ct_dead input.hp{
    text-decoration-color: #bc0f0f33;
}

#combat_area tr input:not(.init){
    border-width: 0;
    background: none;
}

#combat_area tr:not([data-target*="characters"]) input.hp:focus{
    text-decoration: underline;
}
#combat_area tr:not([data-target*="characters"]) input:not(.init):focus{
    border-width: 1px;
}


.ct_dead:not([data-target*="characters"]) .delSVG path:not([fill*="none"]){
    fill: #ff4848;
    opacity: 0.7;
}
.ct_dead[data-current]:not([data-target*="characters"]) .delSVG path:not([fill*="none"]){
    fill: #ff4848;
    opacity: 1;
}
#combat_area .ct_dead[data-current] input{
    border-color: #bc0f0f;
}

.ct_dead[data-current]{
    animation:  deadCombatGlow 3s ease-in-out infinite alternate;
}

@keyframes deadCombatGlow{
    0%, 100%{
        box-shadow: inset 0px 0px 25px 0px #bc0f0f;
        filter: saturate(0.7);
    }
    50%{
        box-shadow: inset 0px 0px 25px 2px #bc0f0f;
        filter: saturate(1);
    }
}
@keyframes pingAnimate {
    0%{

        transform: scale(0);
    }
    50%{
        transform: scale(calc(var(--ping-scale)));
    }
    100%{
        transform: scale(0);
    }

}
#combat_tracker {
    position: fixed;
    height: 450px;
    left: 5px;
    top: 67px;
    z-index: 56000;
}
div#combat_button{
    top: 40px;
}

.tracker-dm {
    width: 200px;
}

.tracker-player {
    width: 150px;
}

#campaign_banner {
    border: 1px dashed #1b9af0;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: .5rem;
}

#campaign_banner a{
    color: #1b9af0;
}

#patreons {
padding-top:10px;
    font-size: 12px;
    width: 100%;
    height: calc(100% - 320px);
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    left: 50%;
    transform: translateX(-50%);
}

.patreons-title{
    font-size: 11px;
    font-weight:bold;
}

.patron-l0{
    font-weight:bold;
    font-size: 14px;
    color:red;
}

.patron-l1{
    font-weight:bold;
    font-size: 13px;
}

.patron-l2{
    font-weight:bold;
}


.player-card {
    box-shadow: 0 8px 16px -8px rgb(0 0 0 / 40%);
    background: linear-gradient(#e6e6e6, #fff);
    border-radius: 6px;
    margin: 10px;
    padding: 5px;
}

.player-card-header {
    display: flex;
    justify-content: space-between;
}

.player-name {
    font-variant: small-caps;
    font-size: 17px;
    width: 160px;
}

.player-actions {
    display: flex;
    align-items: center;
}

.player-card-content {
    display: flex;
    margin: 10px 5px;
}

.player-info {
    display: flex;
    width: 100%;
    margin: 0 10px;
}

.player-attributes {
    width: 60px;
    display: flex;
    flex-wrap: wrap;
    max-height: 70px;
    flex-direction: column;
    justify-content: space-between;
}

.player-attribute {
    display: flex;
    align-items: center;
}

.player-attribute > img {
    width: 16px;
    margin-right: 10px;
}

.player-no-attributes {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.player-conditions {
    max-width: 155px;
    padding-left: 15px;
}

.player-see-more {
    text-align: center;
}

.player-see-more img {
    cursor: pointer;
    width: 20px;
    transition: transform 0.3s ease-in-out;
}

.player-see-more img.reverse {
    transform: rotate(180deg);
}

.player-card-footer {
    display: flex;
    justify-content: space-evenly;
    overflow: hidden;
    max-height: 0px;
    transition: all 0.5s ease-in-out;
}

.player-card-footer.show {
    max-height: 80px;
}

.player-token {
    position: relative;
    border-radius: 50%;
    height: 70px;
}

.player-token img {
    border-radius: 50%;
}

.player-token > div {
    font-size: 10px;
}

.player-token-hp {
    background: #FF7777;
    position: absolute;
    top: 56px;
    left: 1px;
    padding: 0 3px;
}

.player-token-ac {
    position: absolute;
    top: 54px;
    border: 1px solid black;
    background: white;
    border-radius: 50%;
    width: 16px;
    text-align: center;
    left: 51px;
}

.ability_value {
    display: inline-block;
    width: 50px;
    text-align: center;
    position: relative;
    border-radius: 15px 25px 125px 25px/15px 225px 15px 255px;
    height: 60px;
    margin: 10px 0;
}

.ability_name {
    color: #666;
    font-weight: bold;
    font-size: 11px;
}

.ability_modifier {
    font-size: 18px;
    margin-top: -2px;
    font-weight: bold;
}

.ability_score {
    font-weight: bold;
    font-size: 13px;
}

.add-party-container {
    padding: 10px;
    text-align: right;
}

.token.ui-draggable-disabled {
    cursor: default;
}

.token .condition-img {
    padding: 0;
    margin: 0;
    background: #01ffff;
    border: 1px solid black;
    border-radius: 50%;
}

.token .custom-condition.condition-img {
    background: #F58231;
}

.token .note-condition.condition-img {
    background: #e4c700;
}

#note.condition-container{
    pointer-events: auto;
}

.tokenselected::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 0px;
    padding: 5px;
    border: 5px #c0f3fff5 solid;
    z-index: 0;
    border-radius: 5px;
    pointer-events: none;
}

.tokenselected.ui-draggable-disabled::before{
    border: 5px #f7bfbfd5 solid
}

.tokenselected:hover,
.token:focus-within,
.token:active{
    z-index: calc(15000 + var(--z-index-diff)) !important;
}

.ac {
    position: absolute;
}

.token>.ac{
    pointer-events: none;
    font-weight: 900;
    z-index:2;
}

.color-reminder {
    display: inline-block;
    width:85%;
}

.conditions {
    padding: 0;
    margin: 0;
    top: 0;
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.dnd-condition {
    cursor: pointer;
}
body>[class*='styles_mobileNav']{
    display:none;
}
.ct-primary-box [class*='styles_tabs']{
    gap: 0.9rem;
}
.ct-primary-box [class*='styles_tabList'] .ddbc-tab-options__content{

    height: var(--content-height, 560px);
}
.ct-primary-box [class*='styles_tabList'] section{
    height: var(--container-height, 602px);
}
.ct-primary-box [class*='styles_tabList'] section.ct-extras,
.ct-primary-box [class*='styles_tabList'] section.ct-equipment,
.ct-primary-box [class*='styles_tabList'] section.ct-spells{
    height: var(--searchable-height, 602px);
}

   
.ct-character-sheet__inner{
    max-height: calc(100% - 28px);
}
.hpbar {
    z-index: 3;
    background: #fd9696;
    border: 1px solid black;
    border-radius: 5px;
    display: block;
    left: 50%;
    max-width: 100%;
    transform: translateX(-50%);
    width: max-content;
}
.hpbar.tiny-or-smaller{
    border-radius: 2px;
}
.hpbar{
    transition: 250ms transform linear 0ms;
}
.hpbar:focus-within,
.hpbar:hover{
    transform: translateX(-50%) scale(min(max(1, 0.5/var(--window-zoom)), 3));
    transition: 250ms transform linear 500ms;
}

.hpbar.greater-than-10-wide:focus-within,
.hpbar.greater-than-10-wide:hover{
    transform: translateX(-50%);
}
.hpbar.medium:focus-within,
.hpbar.medium:hover{
    transform: translateX(-50%) scale(min(max(1, 1/var(--window-zoom)), 5));
}
.hpbar.smaller-than-medium:focus-within,
.hpbar.smaller-than-medium:hover{
    transform: translateX(-50%) scale(min(max(1, 1.5/var(--window-zoom)), 6));
}

.hpbar input,
.hpbar div{
    float: left;
    height: 100%;
    font-size: var(--font-size);
    line-height: var(--font-size);
    display: flex;
    align-items: center;
}
.hpbar input{
    font-weight: bold;
    background: transparent;
    text-align: center;
    border: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    filter: none;
}
/* Classes for main buttons on campaign page */
.above-vtt-content-div {
    display: inline-block;
    margin-top: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: #1b9af0
}

.above-vtt-right-margin-5px {
    margin-right:5px;
}

.above-vtt-logo {

    display: inline-block;
    margin-left:5px;
    padding-top:15px;
    padding-bottom:15px;
}

.above-vtt-campaignscreen-blue-button {
    color:white;
    background:#1b9af0;
}

.above-vtt-campaignscreen-black-button {
    color:white;
    background:black;
}

.above-vtt-campaignscreen-white-button {
    cursor: pointer;
    color:#1b9af0;
    background:white;
}

.sidebar__inner {
    position: relative;
}

/* .avtt-sidebar-controls, */
.sidebar__controls {
    position: relative;
    margin: 0 !important;
    z-index: 20;
    /* width: 340px; moved to init_ui */
}

/*.sidebar__controls.player {
    left: -206px;
}*/

/* .ct-sidebar__pane-content, */
body:not(.body-rpgcampaign-details) .sidebar__pane-content {
    position: absolute;
    right: 0;
    top: 28px;
    height: calc(100vh - 30px) !important;
}

.ddbc-tab-list__nav-item {
    display: flex;
    border-bottom: 3px solid transparent;
    color: #838383;
    font-size: 14px;
    font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}
.ddbc-tab-list__nav-item--is-active {
    border-bottom-color: #c53131;
    color: #000;
}
.selected-tab img.ddbc-tab-list__nav-item--is-active,
.selected-tab svg.ddbc-tab-list__nav-item--is-active {
    width: 90%;
    margin: auto;
}
#export_current_scene{
    margin: 7px 0px 0px 0px;
    width: 94.5%;
    transform: scale(0.8);
}

#other_export_container button{
    width: 50%;
    vertical-align: middle;
    height: 49px;
    transform: scale(0.8);
    margin: 0px -20px 0px 0px;
}
#other_export_container span{
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 7px;
}
#journal-panel .sidebar-panel-body>ul.folder-item-list{
    height: 100%;
}
.ct-sidebar__inner [class*='styles_pane'] [class*='styles_border']{
    display: none;
}

.ct-sidebar__inner [class*='styles_gap']{
    border:none;
}

.avtt-sidebar-controls .tab-btn,
.sidebar__controls .tab-btn {
    background-color: #f2f2f2;
    margin: 0 2px;
    border-radius: 3px 3px 0 0;
    padding: 0;
    border-style: solid;
    border-width: 0;
    border-color: lightgray;
    transition: all 0.2s ease-in-out;
    font-weight: 400;
    height: 100%;
    flex-grow: 1;
}

.avtt-sidebar-controls .tab-btn .sidebar-tab-image > div,
.sidebar__controls .tab-btn .sidebar-tab-image > div {
    width: 100%;
    height: 80%;
    margin: 5% 0 0 0;
    background-color: #838383;
}
.avtt-sidebar-controls .tab-btn.selected-tab .sidebar-tab-image > div,
.sidebar__controls .tab-btn.selected-tab .sidebar-tab-image > div {
    height: 100%;
    margin-top: 0%;
    background-color: #000;
}
.avtt-sidebar-controls .tab-btn .sidebar-tab-image > svg,
.sidebar__controls .tab-btn .sidebar-tab-image > svg {
    width: 100%;
    height: 80%;
    margin: 5% 0 0 0;
    color: #838383;
}
.avtt-sidebar-controls .tab-btn.selected-tab .sidebar-tab-image > svg,
.sidebar__controls .tab-btn.selected-tab .sidebar-tab-image > svg {
    height: 90%;
    margin-top: 2%;
    color: #000;
}

.avtt-sidebar-controls .tab-btn.selected-tab,
.sidebar__controls .tab-btn.selected-tab {
    width: 50px;
}

.avtt-sidebar-controls .tab-btn.selected-tab.blue-tab,
.sidebar__controls .tab-btn.selected-tab.blue-tab {
    background-color: rgb(235, 241, 245);
}

.avtt-sidebar-controls .tab-btn.notification,
.sidebar__controls .tab-btn.notification {
    background-color: var(--player-border-color, #e40712);
}
.avtt-sidebar-controls .tab-btn.notification svg,
.sidebar__controls .tab-btn.notification svg {
    color: white;
}

.avtt-sidebar-controls .tab-btn.leading-edge,
.sidebar__controls .tab-btn.leading-edge {
    margin-left: 0px;
}

.avtt-sidebar-controls .tab-btn.trailing-edge,
.sidebar__controls .tab-btn.trailing-edge {
    margin-right: 0px;
}

.chat-text-wrapper{
    width:100%;
    padding: 0px 20px;
}
#chat-text {
    width:100%;
    height:30px;
}

.highlight-gamelog {
    -webkit-animation: blink 3.0s linear infinite;
    -moz-animation: blink 3.0s linear infinite;
    -ms-animation: blink 3.0s linear infinite;
    -o-animation: blink 3.0s linear infinite;
    animation: blink 3.0s linear infinite;
}

@keyframes blink {
    0% { box-shadow: inset 0 0 10px red; }
    50% { box-shadow: none; }
    100% { box-shadow: inset 0 0 10px red; }
}

@-webkit-keyframes blink {
    0% { box-shadow: inset 0 0 10px red; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: inset 0 0 10px red; }
}

.dice-roller {
    display: flex;
    justify-content: space-around;
    width: 320px;
    margin: 10px 0 15px 0;
}

.dice-roller > div {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
}

.dice-roller > div:hover:not(.dice-number) {
    transform: translateY(-2px);
}

.dice-roller > div img {
    top: 0;
    transition: all 0.5s ease-in-out;
    position: absolute;
    z-index: 11;
}

/* .dice-roller > div.dice-number img {
    top: -50px;
}

.dice-roller > div input {
    width: 40px;
    opacity: 0;
    z-index: 10;
} */
.dice-badge {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform .2s ease-in-out;
    transform: scale(.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    right: -7px;
    top: -10px;
    color: #fff;
    background: #f44336;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
}

.roll-button {
    position: absolute;
    bottom: 21px;
    border-radius: 50%;
    width: 40px;
    transform: translate(-50%);
    left: 50%;
    height: 40px;
    border: none;
}

input.roll-input-mod::-webkit-inner-spin-button,
input.roll-input-mod::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
body .roll-mod-container input.roll-input-mod[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align:center;
    width: 50%;
    border:none;
    background:#e6e6e6;
    outline: none;
    border: solid #999;
    border-width: 0px 1px 0px 1px;
    border-radius: 0px;
    box-shadow: none;
    padding: 0px;
    transition: none;
}
.roll-mod-container{
    display:none;
    opacity:0;
    transition: all 0.3s ease-in-out;
}
.roll-mod-container.show{
    z-index: 99999999;
    display: flex;
    position: fixed;
    right: 343px;
    bottom: 5px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    width: 60px;
    border-radius: 5px;
    flex-direction: row;
}
button.roll-button-mod {
    text-align: center;
    width: 25%;
    border:none;
    height: 17px;
    outline:none;
    transform: translate(0px, 0px);
    background: #e6e6e6;
    padding: 0px 3px;
}
button.roll-button-mod.plus {
    border-radius: 0px 5px 5px 0px
}
button.roll-button-mod.minus {
    border-radius: 5px 0px 0px 5px
}
.d-block {
    display: block;
}

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

.hidden {
    visibility: hidden;
}
.tokenentryimg {
    width:60px;
    height:60px;
}

.tokenmenuitem {
    float: left;
    width: 33%;
    margin-bottom: 20px;
    position: relative;
}
.tokenmenuitem img {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

.panel-warning {
    font-family: 'Roboto', sans-serif;
    background:#f7a7a3;
    box-shadow: 0 0 15px 5px #ccc;
    border-left: 5px solid #e90c00;
    padding: 8px;
    margin: 8px;
}

#above-vtt-error-message {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    max-height: 100%;
    overflow: auto;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
    min-width: 500px;
    font-size: 16px;
    border: 5px solid #d54f4f;
    border-radius: 5px;
    padding: 10px 50px;
    z-index: 1000000000000;
    box-shadow: #5c7080 0px 8px 24px;
    background: #f9f9f9;
}
#above-vtt-error-message .above-vtt-error-message-header {
    margin: 20px;
    font-size: 24px;
    font-weight: bold;
}
#above-vtt-error-message #error-message-stack {
    padding: 20px;
    background: rgb(92, 112, 128, 10%);
    overflow: scroll;
    position: relative;
}
#above-vtt-error-message h2 {
    text-align: center;
}
#above-vtt-error-message button {
    float: right;
    background-color: #fff;
    border: 1px solid #7f7f7f;
    border-radius: 3px;
    padding: 5px 16px 5px 16px;
    font-family: "Roboto Condensed","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-size: 13px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}
#above-vtt-error-message .github-issue-workaround:before {
    content: "workaround available";
    background-color: #C2E0C6;
    padding: 4px;
    border-radius: 12px;
    margin-right: 4px;
}
#above-vtt-error-message .error-good-news {
    margin: 15px 0 5px 0;
}
#above-vtt-error-message .error-message-buttons {
    margin-top: 15px;
}
#above-vtt-error-message a {
    text-decoration: underline;
}

#btn_add_chapter {
    background: none;
    border: 1px solid #7f7f7f;
    border-radius: 5px;
    color: #7f7f7f;
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0 8px auto;
    padding: 8px;
    cursor: pointer;
}

#btn_add_chapter:hover {
    background: #7f7f7f;
    color: #fff
}

.input-add-chapter {
    background: transparent;
    border: none;
    padding: 8px;
    border-bottom: 1px solid #7f7f7f;
}

.input-add-chapter:focus {
    outline: none;
}

.row-add-chapter {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center; 
}

.row-chapter {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    height:30px;
}
.note-list .sidebar-list-item-row-item {
    margin-left:2px;
    width:calc(100% - 1px);
}
.journal-chapter-title:hover {
    text-decoration: underline;
}

.body-rpgcharacter-sheet .note-list button{
    display: none;
}
.body-rpgcharacter-sheet #journal-panel .folder-item-list {
    padding:0px;
}
.body-rpgcharacter-sheet #journal-panel .note-list{
    padding: 0px 2px 0px 2px;
}

.btn-chapter-icon {
    border: none;
    cursor: pointer;
    width: 30px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #f2f6f8;
    border-left: 1px solid #d8e1e8;
    margin: -4px 0px -4px 0px;
    position:relative;
    right:-3px;
}
.note-list .sidebar-list-item-row{
    height:36px;
}

.row-chapter .btn-chapter-icon {
    height:36px;
    margin:0px 1px 0px 0px;
    right:0px;
}

.btn-chapter-icon:focus {
    outline: none;
}

.btn-chapter-icon > img {
    width: 20px;
    height: 20px;
}

/* If the journal-chapter is collapsed, hide its children and make its background white */
.collapsed {
    background-color: #fff;
}

.journal-chapter {
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #d8e1e8;
}

#journal-panel .folder.collapsed > .note-list,
#journal-panel .folder.collapsed > .folder{
    display: none;
}
#journal-panel .folder>.folder{
    transform: scale(0.98);
}

.journal-chapter-title {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    font-family: Roboto;
    overflow: hidden;
    max-height: 100%;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.folderPlaceholder {
    height: 50px;
    background: #ddd;
}

.row-notes-entry {
    display: flex;
    align-items: center;
    flex: 1;
}


#journal-panel .ui-sortable:not(.ui-sortable-disabled) .note-list .sidebar-list-item-row-item{
    height:26px;
}
#journal-panel .ui-sortable:not(.ui-sortable-disabled) .row-chapter{
    height:15px;
    line-height: 14px;
}
#journal-panel .ui-sortable:not(.ui-sortable-disabled) button{
    display:none;
}


.avtt-sidebar-controls button,
.sidebar__controls button{
    font-size: 10px;
}

#splash {
    position: fixed;
    top: 30px;
    transform: translateX(-50%);
    left: 50%;
    margin: auto;
    overflow:auto;
    height: calc(100% - 40px);
    text-align:center;
    z-index: 70001;
    border: 3px solid black;
    border-radius: 8px;
    padding: 10px;
    width:80%;
}
#patreons ul li {
    width: 136px;
}

#patreons ul {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}


.splashLinkRow div{
    display:inline;
    padding-left:20px;
}


.aura-element {
    position: absolute;
    border-radius: 50%;
    z-index: 19;
    pointer-events: none;
}

.aura-feet label, .aura-color label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.context-menu-input.aura-feet > label > input[type="text"] {
    display: inline-block;
    width: 70%;
}

.context-menu-item.context-menu-input {
    padding: 0.3em !important;
}

#raycastingCanvas{
    mix-blend-mode:multiply;
    opacity: 0;
}
#exploredCanvas{
    top: 0px;
    left: 0px;
    position: absolute;
    mix-blend-mode: lighten;
    opacity: 0.3; 
    z-index: 23;
    filter: brightness(3) blur(calc(3px / var(--scene-scale)));
}

.body-rpgcharacter-sheet #raycastingCanvas{
    opacity: 1;
}
.beyond20-quick-roll-tooltip{
    z-index: 120 !important; /*for beyond20 flyouts to be above character sheet*/
}
#outer_light_container{
    mix-blend-mode:lighten;
    opacity:1;
    background:#000;
}
.ruler-svg-text{
    fill: #000;
    background:#fff;
    border-radius:2px;
    border:1px solid #000;
    position:absolute;
    z-index:20;
    transform: scale(calc(2 / var(--window-zoom)));
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    transform-origin: top left;
    pointer-events: none;
    z-index:80;
    opacity: var(--svg-text-alpha);
}


.ruler-svg-line,
.ruler-svg-bobbles{
    border-radius:2px;
    position:absolute;
    z-index:80;
    opacity: var(--svg-text-alpha);
    transform: scale(var(--scene-scale));
    transform-origin: top left;
    pointer-events:none;
}

.ruler-svg-bobbles{
     z-index:85;
}
.ruler-svg-line line:first-of-type{
    stroke-width: calc(2 / var(--window-zoom));
}

.ruler-svg-line line:nth-of-type(2){
    stroke-width: calc(1 / var(--window-zoom));
}
.ruler-svg-bobbles circle{
    stroke-width: calc(0.5 / var(--window-zoom));
    r: calc(1 / var(--window-zoom));
}
#raycastingCanvas,
#light_overlay,
.aura-element-container-clip:not([data-animation])>.islight,
.aura-element-container-clip>div:not(.islight){
    filter: blur(calc(5px / var(--scene-scale)));
}

#light_container{
    filter: blur(calc(3px / var(--scene-scale)));

}
div#selectedTokensBorder {
    pointer-events: none;
}

#conditions-flyout li,
#playerTokenSelectedWarning {
    position: relative;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0.2em 0em 0em 2em;
    color: #2f2f2f;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
}
#conditions-flyout li{
    padding: 0em 0em 0em 2em;
}
#conditions-flyout li.markers-icon {
    padding-left: 0.2em;
    margin: 1px 0px;
}
#conditions-flyout li .color-condition {
    width: 75%;
    height: 75%;
    position: absolute;
}
#conditions-flyout li.icon-condition::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 2em;
    font-family: "Material Icons", sans-serif;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #2980b9;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#conditions-flyout li:hover {
    background-color: rgb(221 221 222) !important;
}

#playerTokenSelectedWarning
{
    color: #738694;
    font-weight: 700;
    text-transform: uppercase;
}

.icon-condition.material-icons:before,
.context-menu-icon.material-icons:before {
    left: -8px !important;
    font-family: "Material Icons", sans-serif !important;
    font-size: 20px !important;
}
#tokenOptionsContainer .material-icons:before,
#adjustments-flyout .material-icons:before {
    left: 9px;
    position: absolute;
    font-size: 20px;
    line-height: 20px;
    font-family: "Material Icons", sans-serif !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
#tokenOptionsContainer .condition-lock.material-symbols-outlined:before {
    left:0px;
}
.advatageHover svg [fill="#b0b7bd"], .advatageHover svg [fill="#242528"]{
    fill: #0F0;
}
.disadvatageHover svg [fill="#b0b7bd"], .advatageHover svg [fill="#242528"]{
    fill: #F00;
}
#tokenOptionsContainer .to-top:before {
    content: "\e25a" !important;
}
#tokenOptionsContainer .to-bottom:before {
    content: "\e258" !important;
}
#tokenOptionsContainer .open-menu:before {
    content: "\e9bd" !important;
}
#tokenOptionsContainer .send-to:before {
    content: "\ea77" !important;
}
.icon-edit:before,
.context-menu-icon-edit:before {
    content: "\e3c9" !important;
}
.icon-delete-red:before,
.context-menu-icon-delete-red:before {
    content: "\e872" !important;
    color: #e40712 !important;
}
.icon-close-red:before,
.context-menu-icon-close-red:before {
    content: "\e5cd" !important;
    color: #e40712 !important;
}
.icon-note:before,
.context-menu-icon-note:before {
    content: "\e745" !important;
}
.icon-person:before,
.context-menu-icon-person:before {
    content: "\e7fd" !important;
}
.add-link:before,
.context-menu-add-link:before {
    content: "\e178" !important;
}
.link-off:before,
.context-menu-link-off:before {
    content: "\e16f" !important;
}
.icon-note-delete:before{
    content: "\e16c" !important;
}
.icon-view-note:before{
    content: "\e873" !important;
}

.icon-person-add:before,
.context-menu-icon-person-add:before {
    content: "\e7fe" !important;
}
.icon-person-remove:before,
.context-menu-icon-person-remove:before {
    content: "\ef66" !important;
}
.icon-view:before,
.context-menu-icon-view:before {
    content: "\f22e" !important;
}
.icon-add-circle:before,
.context-menu-icon-add-circle:before {
    content: "\e148" !important;
}

.context-menu-icon-hidden {
    border: 1px solid white;
    justify-content: space-between;
}
.note .mce-toolbar-grp.mce-container.mce-panel.mce-first.mce-stack-layout-item[role='group']{
    position: sticky;
    top: 0;
    z-index: 10;
}
.icon-condition,
.context-menu-icon-condition {
    margin: 4px;
    border: 1px solid white;
}
#tokenOptionsContainer button.context-menu-icon-hidden:before {
    width: 16px;
    height: 16px;
    line-height: 16px;
    left: 10px;
}
.icon-condition:before,
.context-menu-icon-condition:before {
    width: 1.4em !important;
    margin-left: 0.2em;
}
.markers-icon:after,
.icon-condition:after,
.context-menu-icon-hidden:after,
.context-menu-icon-condition:after,
.context-menu-icon-grouped:after {
    float: right;
    margin-right: 0px;
    font-family: "Material Icons", sans-serif;
    font-size: 20px;
    margin-top: -5px;
    margin-bottom: -10px;
}
.markers-icon:after, 
.icon-condition:after{
    margin:0px;
}
.context-menu-icon-hidden:after,
.context-menu-icon-condition:after,
.context-menu-icon-grouped:after{
    margin-top: 0px;
    position:absolute;
    right:8px;
}
#tokenOptionsContainer button.context-menu-icon-hidden:after {
    margin-top: -2px;
}

.markers-icon.single-active:after,
.icon-condition.single-active:after,
.context-menu-icon-hidden.single-active:after,
.context-menu-icon-grouped.single-active:after,
.context-menu-icon-condition.single-active:after {
    content: "\e876";
}
.markers-icon.all-active:after,
.icon-condition.all-active:after,
.context-menu-icon-hidden.all-active:after,
.context-menu-icon-grouped.all-active:after,
.context-menu-icon-condition.all-active:after {
    content: "\e6b1";
}
.markers-icon.some-active:after,
.icon-condition.some-active:after,
.context-menu-icon-hidden.some-active:after,
.context-menu-icon-grouped.some-active:after,
.context-menu-icon-condition.some-active:after {
    content: "\f1c2";
}
.icon-blinded:before,
.context-menu-icon-blinded:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/blinded.svg);
}
.icon-charmed:before,
.context-menu-icon-charmed:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/charmed.svg);
}
.icon-deafened:before,
.context-menu-icon-deafened:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/deafened.svg);
}
.icon-exhaustion:before,
.context-menu-icon-exhaustion:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/exhaustion.svg);
}
.icon-frightened:before,
.context-menu-icon-frightened:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/frightened.svg);
}
.icon-grappled:before,
.context-menu-icon-grappled:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/grappled.svg);
}
.icon-incapacitated:before,
.context-menu-icon-incapacitated:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/incapacitated.svg);
}
.icon-invisible:before,
.context-menu-icon-invisible:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/invisible.svg);
}
.icon-paralyzed:before,
.context-menu-icon-paralyzed:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/paralyzed.svg);
}
.icon-petrified:before,
.context-menu-icon-petrified:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/petrified.svg);
}
.icon-poisoned:before,
.context-menu-icon-poisoned:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/poisoned.svg);
}
.icon-prone:before,
.context-menu-icon-prone:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/prone.svg);
}
.icon-restrained:before,
.context-menu-icon-restrained:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/restrained.svg);
}
.icon-stunned:before,
.context-menu-icon-stunned:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/stunned.svg);
}
.icon-unconscious:before,
.context-menu-icon-unconscious:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/unconscious.svg);
}
.icon-unconscious:before,
.context-menu-icon-unconscious:before {
    content: url(https://www.dndbeyond.com/content/1-0-1849-0/skins/waterdeep/images/icons/conditions/unconscious.svg);
}

.aoe-button-moveable {
    font-size: 20px !important;
    /* align-items: flex-end; */
}

.floating-combat-text{
    animation: floating-combat-text 2s;
    animation-timing-function: cubic-bezier(0.55, 0.02, 0, 1.57);
    animation-iteration-count: 1;
    transform-origin: center;
    position:absolute;
    font-size: var(--font-size);
    font-weight: bold;
    --plus-shadow: 1px;
    --minus-shadow: -1px;
    filter: none !important;
    text-shadow: var(--plus-shadow) var(--plus-shadow) var(--plus-shadow) #000, 
        var(--minus-shadow) var(--minus-shadow) var(--plus-shadow) #000, 
        var(--minus-shadow) var(--plus-shadow) var(--plus-shadow) #000, 
        var(--plus-shadow) var(--minus-shadow) var(--plus-shadow) #000, 
        0px var(--minus-shadow) var(--plus-shadow) #000, 
        var(--plus-shadow) 0px var(--plus-shadow) #000, 
        var(--minus-shadow) 0px var(--plus-shadow) #000, 
        0px var(--plus-shadow) var(--plus-shadow) #000;
  }

  @keyframes floating-combat-text {
    0% {
      transform: scale(min(max(1, 1/var(--window-zoom)), 5)) translate(-10%, 0%);
      opacity: 0;
    }
    10% {
      opacity: 1;
      transform: scale(min(max(1, 1/var(--window-zoom)), 5)) translate(-10%, calc(-50% * var(--window-zoom)));
    }
    100% {
      transform:  scale(min(max(1, 1/var(--window-zoom)), 5)) translate(-10%, calc(-100% * var(--window-zoom)));
      opacity: 0;
    }
  }


.floating-combat-text.heal{
    color: #5F5;
}


.floating-combat-text.dmg{
    color: #F55;
}

/* AOE BORDERS */
.aoe-border {
    width: 100%;
    background-position-y: bottom;
    height: 100%;
    background-repeat: repeat-x;
    position:absolute;
}

.aoe-border-cone {
    clip-path: polygon(0% 100%, 5% 100%, 50% 10%, 92% 95%, 5% 95%, 0% 100%, 100% 100%, 50% 0%);
    background-color: white;
    animation: mymove 5s infinite alternate ease-in-out ;
}
.aoe-border-basic{
    border: white 10px solid;
}

/* END AOE BORDERS */

/* AOE SHAPES */
.aoe-shape-circle {
    border-radius: 50%;
}

.aoe-shape-cone {
    clip-path: polygon(50% 10%, 7% 95%, 92% 95%);
}
/* END AOE SHAPES */

/* AOE STYLES */
.aoe-style-acid{
    background-image: url(https://opengameart.org/sites/default/files/styles/medium/public/oga-textures/12976/caust_009.png);
    box-shadow: inset -20px -20px 2px 1000px rgba(13, 253, 0, 0.49);
}
.aoe-style-bludgeoning{
    background-image: url(https://www.tilingtextures.com/wp-content/uploads/2020/06/17064578-0145-512x512.jpg);
}
.aoe-style-default{
    background-image: url(https://www.tilingtextures.com/wp-content/uploads/2021/06/188-comp-512x512.jpg);
}
.aoe-style-force{
    background-image: url(https://www.myfreetextures.com/wp-content/uploads/2014/10/electbubbles-900x900.jpg);
}
.aoe-style-ice {
    background-image: url(https://3djungle.net/upload/resize_cache/iblock/849/400_400_1/8495c4591433cffedbe8a19a13fbc7eb.jpg);
}
.aoe-style-nature{
    background-image: url(https://www.tilingtextures.com/wp-content/uploads/2017/04/0527-1-512x512.jpg);
    filter: brightness(1.2) contrast(1.2);
}
.aoe-style-necrotic {
    background-image: url(https://www.myfreetextures.com/wp-content/uploads/2014/10/abstract8-900x900.jpg);
}
.aoe-style-piercing{
    background-image: url(https://previews.123rf.com/images/sylverarts/sylverarts1801/sylverarts180100741/92992928-horror-style-horrible-seamless-pattern-vector-background-blackthorn-branches-with-thorns-stylish-end.jpg);
}
.aoe-style-poison {
    background-image: url(https://www.tilingtextures.com/wp-content/uploads/2017/02/0005-512x512.jpg);
    box-shadow: inset -20px -20px 2px 1000px rgba(119, 247, 0, 0.52);
}
.aoe-style-psychic {
    background-image: url(https://images.assetsdelivery.com/compings_v2/almagami/almagami1912/almagami191200125.jpg);
    box-shadow: inset -20px -20px 2px 1000px rgba(115, 10, 235, 0.49);
}
.aoe-style-radiant {
    background-image: url(https://www.tilingtextures.com/wp-content/uploads/2019/06/0097-512x512.jpg);
    background-size: 200px
}
.aoe-style-thunder{
    background-image: url(https://www.tilingtextures.com/wp-content/uploads/2018/11/0069-512x512.jpg);
}
.aoe-style-water{
    background-image: url(https://opengameart.org/sites/default/files/styles/medium/public/oga-textures/12976/caust_009.png);
    box-shadow: inset -20px -20px 2px 1000px rgba(49, 177, 246, 0.49);
}

.aoe-style-darkness{
    filter: grayscale(1) brightness(0.2) !important;
}

/* SPECIFIC SPELL STYLES */

.aoe-style-stinking-cloud{
    box-shadow: inset -20px -20px 2px 1000px rgba(49, 246, 85, 0.49) !important;
}



/* END AOE STYLES */


.token.isAoe .token-image,
.token.isAoe .token-image *,
.token.isAoe:before,
.token.isAoe div#note {
    visibility: visible;
}
.lineAoe{
    pointer-events:none;
}
.lineAoe *{
    pointer-events:auto;
}
.aoe-token-tileable {
    height: 100%;
    width: 100%;
    opacity: 50%;
    background-repeat: repeat;
    background-size: 300px;
    filter: blur(0.5px);
    position: absolute;
    animation: mymove 5s infinite alternate ease-in-out ;
}
#token_map_items .underDarkness .aoe-token-tileable{
    background-size: calc(300px / var(--scene-scale));
    filter: none;
}
#token_map_items .underDarkness .aoe-border-basic{
    border-width: calc(10px / var(--scene-scale));
}
@keyframes mymove {
    from{
        opacity: 0.3
    }
    to {
        opacity: 0.7
    }
  }
.above-vtt-container-roll-output{
    position: absolute;
    top: 33%;
    left: 0px;
    width: 220px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #716f6f;
    font-size: 10px;
    font-weight: bold;
    line-height: 10px;
}
.abovevtt-roll-container{
    position:relative;
    width: 100%;
    cursor: pointer;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.abovevtt-roll-container [class*='-Divider']{
    margin: 0px 12px;
    flex: 0 0 auto;
}
.abovevtt-roll-container [class*='-Result']{
    flex: 1 1 auto;
    min-width: 0px;
    overflow: hidden;
    top: -13px;
    position: relative;
}
.abovevtt-roll-container [class*='Total-Other-Collapsed-Pending-Flex'] {
    min-width: 2.5rem;
    font-size: 2rem;
    font-weight: bold;
    flex: 0 0 auto;
    line-height: 1;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
}

.abovevtt-roll-container .above-vtt-roll-whisper {
    position: absolute;
    top: 28px;
    left: 0px;
    width: 220px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #716f6f;
    font-size: 10px;
    font-weight: bold;
}
div.token-image {
    width: 100%;
    height: 100%;
}
.ct-sidebar[class*='styles_sidebar'] {
    min-width: 340px !important;
}

.ct-sidebar[class*='styles_sidebar'] [class*='styles_content'] {
    min-width: 340px !important;
    max-width: 340px !important;
}

.token:before{
    transform: rotate(var(--token-rotation));
}

.markers-icon:before,
.context-menu-markers-icon:before {
    display: inline-block;
    width: 19px;
    height: 19px;
    top: 4px;
    position: relative;
    margin-right: 5px;
    content: "";
    background-size: 100%;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
    flex-shrink: 1;
}
.markers-icon:before{
    top:0px;
}
input.condition-duration-input {
    position: relative !important;
    width: 22px !important;
    z-index: 2;
    text-align: right;
}

#tokenOptionsPopup [id*="flyout"] li {
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#conditions-flyout li span:not(.condition-lock) {
    flex-shrink: 1;
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
}
.condition-duration-input,
.condition-duration-icon {
    display: none;
}
.condition-duration-icon:before{
    content:'\efbf';
    font-size: 19px;
    font-family: "Material Symbols Outlined", sans-serif !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.active-condition .condition-duration-input,
.active-condition .condition-duration-icon {
    display: block;
}
.condition-duration-icon{
    position:absolute;
    left: 144px;
    top: 1px;
    z-index: 2;
    opacity: 0.4;
    pointer-events:none;
}
.condition-duration-icon.hiddenIcon{
    display:none;
}
.markers-icon .condition-duration-icon{
    left: 152px;
}
.markers-icon[class*='icon-#'] input.condition-duration-input{
    left: 9px;
}
[class*='icon-#']::before {
    display: none;
}
.icon-advantage:before,
.context-menu-icon-advantage:before {
    background-image: url(assets/conditons/advantage.png);
}
.icon-baned:before,
.context-menu-icon-baned:before {
    background-image: url(assets/conditons/baned.png);
}
.icon-bardic:before,
.context-menu-icon-bardic:before,
.icon-bardic-inspiration:before,
.context-menu-icon-bardic-inspiration:before {
    background-image: url(assets/conditons/bardic_inspiration.png);
}
.icon-blessed:before,
.context-menu-icon-blessed:before {
    background-image: url(assets/conditons/blessed.png);
}
.icon-bloodied:before,
.context-menu-icon-bloodied:before {
    background-image: url(assets/conditons/bloodied.png);
}
.icon-concentration-reminder:before,
.context-menu-icon-concentration-reminder:before {
    background-image: url(assets/conditons/concentration\(reminder\).png);
}
.icon-reaction-used:before,
.context-menu-icon-reaction-used:before {
    background-image: url(assets/conditons/reaction_used.png);
}
.icon-disadvantage:before,
.context-menu-icon-disadvantage:before {
    background-image: url(assets/conditons/disadvantage.png);
}
.icon-flamed:before,
.context-menu-icon-flamed:before {
    background-image: url(assets/conditons/flamed.png);
}
.icon-flying:before,
.context-menu-icon-flying:before {
    background-image: url(assets/conditons/flying.png);
}
.icon-hasted:before,
.context-menu-icon-hasted:before {
    background-image: url(assets/conditons/hasted.png);
}
.icon-inspiration:before,
.context-menu-icon-inspiration:before {
    background-image: url(assets/conditons/inspiration.png);
}
.icon-rage:before,
.context-menu-icon-rage:before {
    background-image: url(assets/conditons/rage.png);
}

.aura-color button {
    width: 70%;
    height: 23px;
    border: 1px solid #3e3e3e;
    border-radius: 5px;
}

.context-menu-input.aura-color > label > input[type="text"] {
    display: none;
}

.context-menu-input.on-off-title > label > input[type="checkbox"] {
    float: right;
}

ul.context-menu-root {
    max-width: 180px;
}
ul.context-menu-list {
    column-count: 2;
    column-gap: 0;
}
ul.context-menu-list > li {
    column-span: all;
}
.context-menu-item.split-column-context-input {
    column-span: none;
    display: inline-block;
    zoom: 1;
    width: 100%;
    padding: 0.3em 0 !important;
}
.context-menu-item.split-column-context-input-text {
    width: 90%;
    margin: 0 5% !important;
}

.active-condition {
    border: 1px solid #cbc6c3;
    border-radius: 4px;
    background-color: rgba(203, 198, 195, 0.4) !important
}
.active-condition:hover {
    box-shadow: inset 0 0 4px 0 #dcd1c7;
    background-color: rgba(41, 128, 185, 0.9) !important;
}

.context-menu-helptext {
    max-width: 150px;
    color: grey;
    font-size: 0.9em;
}

.token-round{
    border-radius: 50%;
}

.soundpad-section audio{
    height:20px;
    width: 270px;
}

.soundpad-line-title{
    display: inline-block;
    width: 100%;
}

#hide_rightpanel {
    position: absolute;
    left: -32px;
    top: 2px;
}

#site .mfp-wrap {
    z-index: 100000;
}

.soundpad-section-title{
    font-weight: bold;
    background: #dddddd;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display{
    display:none;
}

.loop-pressed{
    background:green;
}

.loop-img{
    height:20px;
}

.loop-button{
    position:relative;
    top: -2px;
}

.journal-note-entry{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0 8px 8px;
    background: #fff;
    border-radius: 3px;
}

.journal-note-entry:last-child {
    background: transparent;
}

.journal-entry-buttons{
    margin-left: auto;
    height: 20px;
}
.journal-note-entry-title{
    flex: 1;
    padding: 8px;
}

.journal-note-entry-title:hover {
    text-decoration: underline;
    cursor: pointer;
}

.visibility-container{
    border: 1px solid #dddddd;
    background: #e9e9e9;
    padding: 5px;
    width: 370px;
    margin-right: auto;
}
.visibility-container button {
    margin: 5px;
}


.visibility-container .visibility-toggle-container{
    display:none;
}
.share-player-visibility:hover .visibility-toggle-container,
.visibility-toggle-container:hover{
    display:block;
    height: fit-content;
    width: 136px;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #a8a8a8;
    position:absolute;
    top: 31px;
    left: 11px;
    background: #e9e9e9;
}
.visibility_toggle_row{
    margin:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-player-visibility:after{
    content:'';
    display: inline-block;
    position:relative;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    top: 3px;
    border: 4px solid #000;
    border-color: #747272 #e9e9e9 #e9e9e9 #e9e9e9;
}
.share-player-visibility label {
    width: 70%;
    overflow-wrap: break-word;
}

.btn-del-chapter{
    right: 0;
    position: absolute;
    margin-top: 4px;
}

.note .mce-panel { 
    border:  none;
}

#help-overlay{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999; /*this seems super over the top but that's what's needed to appear over the combat button. I didn't want to change the z-index for that without checking first*/
}

#help-container{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999; /*this seems super over the top but that's what's needed to appear over the combat button. I didn't want to change the z-index for that without checking first*/
}

#help-menu-outside{
    backdrop-filter: saturate(50%) blur(20px);
    backdrop-filter: hue-rotate(90deg) saturate(30%);
    backdrop-filter: saturate(30%);
    backdrop-filter: brightness(30%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#help-menu {
    max-width: 90vw;
    max-height: 90vh;
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
    position: absolute;
    top: 5%;
    left: 5%;
    /*transform: translate(-50%, -50%);*/
    padding: 5px;
    border-radius: 5px;
    z-index: 3;
    display: flex;
    overflow-y: auto;
}

#cpicker_overlay {
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0); /* Black background with opacity */
    z-index: 100; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
  }



  a {
    text-decoration: none;
  }

  .help-tabs {
      background-color: #f1f1f1;
      flex: 0 0 auto;
  }

  .help-tabs ul {
    margin: 0;
    padding: 0;
  }

  .help-tabs li {
    display: block;
    border-width: 1px 0px 1px 1px;
    margin: -1px;
    margin-bottom: 0px;
  }

  .help-tabs a {
    display: block;
    padding: 10px 15px;
    color: rgb(0, 0, 0);
  }

  .help-tabs li:hover {
    background-color: #DDD;
  }

  .help-tabs li.active {
    background-color: #CCC;
    color: rgb(0, 0, 0);
  }

  .help-tabs li.active a {
    color: inherit;
  }

  .tabs-content {
    display: block;
    top: 0;
    border: 1px solid #34495E;
    padding: 10px;
    margin-top: -1px;
    overflow: auto;
  }

.tabs-content .googledoc iframe{
    width: 830px;
    height: 90vh;
    max-width: 90vw;
    margin-left: -85px;
    margin-top: -12px;
  }

  .tabs-content IMG {
    margin-right: 10px;
  }

  .tabs-content>div:not(:first-child) {
    display: none;
  }
.page-number {
    position: absolute;
    bottom: 40px;
    font-weight: bold;
}
.tabs-content dt {
    display: inline-block;
    text-align: center;
    margin: 0;
    padding: 1px 3px;
    border-radius: 2px;
    background-color: rgb(180, 173, 209);
    color: rgb(0, 0, 0);
    min-width: 8px;
    font-weight: bold;
    box-shadow: 1px 1px 3px 0px black;
}

.tabs-content dd {
    display: inline-block;
    margin: 0 0 0 5px;
}

.label-one-line {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.label-one-line:hover {
    overflow: visible;
    white-space: normal;
    width: auto;
}

.preserve-aspect-ratio {
    object-fit: contain;
}

.sidebar-modal {
    position: fixed;
    z-index: 58000;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow-y: auto;
    background-color: rgb(235, 241, 245);
    width: 340px;
    top: 30px;
    right: 0px;
    left: auto;
    height: calc(100vh - 30px);
}
.sidebar-modal-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sidebar__pane-content .sidebar-panel-content,
.ct-sidebar__pane-content .sidebar-panel-content,
.ct-sidebar__inner [class*='styles_content'] .sidebar-panel-content{
    position: fixed;
    top: 30px;
    right: 0px;
    width: 340px;
    z-index: -1;
    height: calc(-45px + 100vh);
}
div.sidebar__pane-content > div.selected-tab,
div.ct-sidebar__pane-content > div.selected-tab,
.ct-sidebar__inner [class*='styles_content'] div.sidebar-panel-content.selected-tab
{
    z-index: 21;
}

.ct-sidebar--visible{
   height: calc(-15px + 100vh) !important;
}

/*this may be a DDB bug - as the `Send to (default)` button scrolls off screen and messess with our layout as at 4/25/2024*/
.ct-sidebar__pane-content>div:first-of-type,
.ct-sidebar__inner [class*='styles_content']>div:first-of-type{
    height:100%;
}

.ct-sidebar__inner>[class*='styles_controls']{
    margin: 0px 0px 3px 0px;
}

.ct-sidebar__inner [class*='styles_content']{
    --border: none;
    padding-bottom: 0px;
}

.sidebar-panel-content{
    color: #000;
}

/* Make a few adjustments for when it's a modal because we nest it inside or .sidebar-modal and change the UI slightly  */
.sidebar-modal .sidebar-panel-content,
.sidebar-modal .sidebar-panel-content .sidebar-panel-header,
.sidebar-modal .sidebar-panel-content .sidebar-panel-body,
.sidebar-modal .sidebar-panel-content .sidebar-panel-footer {
    background-color: #fff;
}
.sidebar-modal .sidebar-panel-content .sidebar-panel-header,
.sidebar-modal .sidebar-panel-content .sidebar-panel-footer {
    padding: 0px;
}

.sidebar-panel-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    position: relative;
    overflow-y: auto;
    background-color: #fff;
}
.sidebar-panel-header {
    width: 100%;
}
.sidebar-panel-header-title {
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    margin: 8px 0px 8px 8px;
    font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    justify-content: space-between;
}
.sidebar-panel-header-title:empty{
    margin: 0px;
}
.sidebar-panel-header-title .expand-collapse-wrapper {
    display: flex;
    flex-direction: row;
    margin-right: 6px;
}
.sidebar-panel-header-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: #738694;
    line-height: 1.4;
    margin: 8px 0px 8px 8px;
}
.sidebar-panel-header-subtitle:empty{
    margin: 0px;
}
.reorder-explanation,
.sidebar-panel-header-explanation {
    font-size: 14px;
    color: #979AA4;
    font-family: "Roboto Condensed",Roboto,Helvetica,sans-serif;
    margin: 8px 0px 8px 8px;
    padding: 0px;
}
.sidebar-panel-header-explanation:empty{
    margin: 0px;
}
.token-image-modal-footer-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-grow: 1;
    color: #738694;
    line-height: 1.4;
    margin: 4px 6px 2px 2px;
}


span.add-input.slots {
    display: block;
}

div.token-image-modal-footer-title {
    font-size: 13px;
    /*width: 100%;*/
}
h1.token-image-modal-footer-title,
h2.token-image-modal-footer-title,
h3.token-image-modal-footer-title,
h4.token-image-modal-footer-title,
h5.token-image-modal-footer-title {
    display: block;
}
h1.token-image-modal-footer-title:after,
h2.token-image-modal-footer-title:after,
h3.token-image-modal-footer-title:after,
h4.token-image-modal-footer-title:after,
h5.token-image-modal-footer-title:after {
    /* This was lifted from source book titles, and tweaked slightly */
    content: '';
    width: 100%;
    margin: 5px auto 20px;
    height: 1px;
    background-color: #979AA4;
    display: block;
}
.sidebar-panel-footer input,
.token-image-modal-footer input {
    margin-bottom: 6px;
    width: auto;
}
.sidebar-panel-footer-horizontal-wrapper,
.token-image-modal-footer-select-wrapper,
.token-image-modal-url-label-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.sidebar-panel-footer-horizontal-wrapper .sidebar-panel-footer-button {
    margin: 0px 4px 0px 4px;
}
.token-image-modal-footer-select-wrapper select {
    min-width: 35%;
    max-width: 35%;
}
.footer-input-wrapper {
    width: 100%;
    padding: 4px;
    border-top: 1px solid #d8e1e8;
}
.footer-input-wrapper .sidebar-panel-header-explanation {
    font-size: 12px;
    padding: 0;
}
.token-image-modal-url-label-wrapper {
    display: flex;
    flex-grow: 1;
}
.token-image-modal-url-label-add-wrapper {
    display: flex;
    flex-direction: row;
}
.token-image-modal-url-label-add-wrapper .token-image-modal-url-label-wrapper {
    flex-direction: column;
}
.token-image-modal-url-label-add-wrapper .token-image-modal-url-label-wrapper .token-image-modal-footer-title {
    width: 100%;
}
.token-image-modal-remove-all-button {
    appearance: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #e40712;
    border: none;
    color: #fff;
    align-self: stretch;
    font-size: 12px;
    padding: 4px;
    margin: 10px;
}
div#importer_area>div>div:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0px 5px;
}
.sidebar-panel-footer-button {
    appearance: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #1b9af0;
    border: none;
    color: #fff;
    align-self: stretch;
    margin: 4px 0px 4px 0px;
    padding: 10px;
    width: 100%;
    flex-grow: 0;
}
.token-image-modal-add-button {
    margin: 0px 4px 0px 4px;
    width: auto;
}
.example-token,
.custom-token-image-item {
    top: 0 !important;
    left: 0 !important;
    float: left !important;
    width: 90px !important;
    height: 90px !important;
    margin: 5px !important;
    position: relative !important;
    opacity: 1 !important;
}
.custom-token-image-item.ui-draggable-dragging {
    width: auto;
}
.custom-token-image-item [data-img],
.custom-token-image-item img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

button.applyDamageButton {
    padding: 2px;
    margin: 0px 2px;
    border-radius: 5px;
    border-width: 1px;
    border-color: #ddd;
    display: flex;
    align-items: center;
    outline:none;
}
button.applyDamageButton svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    padding: 2px 0px 0px 2px;
    margin:0px;
}

.block-send-to-game-log {
    position:absolute;
    float:right;
    background: none;
    backdrop-filter: brightness(3);
    right: 14px;
    top: -4px;
    font-size:10px !important;
    padding: 2px;
    display: flex;
    border-radius: 5px;
    border: none;
    outline: none !important;
    align-items: center;
}


td button.block-send-to-game-log {
    position: relative;
    display: block;
    top: auto;
    right: auto;
    
}
td button.block-send-to-game-log span{
    font-size:9px !important;
}
h3#error-message{
    max-height:100px;
    overflow:hidden;
    text-overflow: ellipsis;
}
div#initialPosition_row input{
    width: 60px;
    margin-right:10px;
    margin-left:5px;
}

div#initialPosition_row input::-webkit-outer-spin-button,
div#initialPosition_row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


div#initialPosition_row input[type=number] {
  -moz-appearance: textfield;
}
.note-text table.table-compendium>thead>tr {
    background-color: var(--theme-table-header-bg-color,#fdfdfd);
    color: var(--theme-table-header-fg-color,#222)
}

.note-text table.table-compendium>tbody>tr:nth-child(odd) {
    background-color: var(--theme-table-row-bg-dark, #faf8f7);
    color: var(--theme-table-row-fg-dark,#222)
}

.note-text table.table-compendium>tbody>tr:nth-child(2n),.body-page .p-article-a .p-article-content table.table-compendium tbody tr:nth-child(2n) {
    background-color: var(--theme-table-row-bg-light,#fdfdfd);
    color: var(--theme-table-row-fg-light,#222)
}

.note-text table.table-compendium>tbody>tr:hover {
    background-color: var(--theme-table-row-bg-hover,#e3f4eb);
    color: var(--theme-table-row-fg-hover,#222)
}

.text--quote-box ~ .block-send-to-game-log{
    right:25px;
    top:-8px
}
.rules-text ~ .block-send-to-game-log{
    right:5px;
    top: 15px
}
button.block-send-to-game-log span {
    font-size: 13px;
    padding: 0px;
    margin: 0px;
}


.damageButtonsContainer {
    top:-15px;
    position:relative;
    display:flex;
}


.token.groupToken{
    display:none !important;
}
#combat_area tr[skipturn]{
    scale: 0.95;
}
#combat_area tr[skipturn]{
    display:none;
}
#combat_area tr[skipturn].showGroupTokens{
    display:table-row;
}
.custom-token-image-item [data-img]:hover {
    border: lightgrey solid 2px;
}

.token-image-sizing-dummy {
    /* this allows us to size the img using a 1:1 aspect ratio without having to use js to calculate the height after the felx width has been determined */
    margin-top: 100%;
}

.custom-token-list {
    display: flex;
    align-items: center;
    padding: 0px;
    flex-direction: column;
    background: rgb(235, 241, 245);
    height: 100%;
}
.sidebar-list-item-row.encounter,
.sidebar-list-item-row.folder {
    background-color: rgb(235, 241, 245);
}
.sidebar-list-item-row.encounter.collapsed,
.sidebar-list-item-row.folder.collapsed {
    background-color: #fff;
}
#scenes-panel .sidebar-list-item-row.scene-item .scene-bg {
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(1px);
    -webkit-filter: blur(1px);
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 30px;
}
#scenes-panel .sidebar-list-item-row.scene-item:not(.folder) .sidebar-list-item-row-img {
    background-color: gray;
    margin: -4px 0;
    border-radius: 0;
}
#scenes-panel .sidebar-list-item-row.scene-item:not(.folder) .sidebar-list-item-row-img img {
    border-radius: 0;
    max-height: none;
}
#scenes-panel .sidebar-list-item-row.scene-item .sidebar-list-item-row-item {
    position: inherit;
}
#scenes-panel .sidebar-list-item-row.scene-item .sidebar-list-item-row-img img {
    object-fit: cover;
    height: 38px;
}
#scenes-panel .sidebar-list-item-row.scene-item .sidebar-list-item-row-img .scene-list-item-is-video {
    font-size: 38px;
    text-align: center;
    color: lightgray;
}
.sidebar-flyout {
    position: fixed;
    z-index: 100000;
    box-shadow: 1px 1px 10px black, -1px -1px 10px black;
    border-radius: 5px;
    overflow: hidden;
}
.list-item-image-flyout {
    width: 400px;
    height: 400px;
    object-fit: cover;
    display: block;
}
.sidebar-token-options-flyout-container {
    width: 400px;
    max-height: 90vH;
    padding: 5px;
    overflow: scroll;
    background-color: rgb(235, 241, 245);
}
#scenes-panel .sidebar-list-item-row.scene-item .scene-item-footer {
    display: flex;
    flex-direction: row;
    margin: -4px -4px -4px -4px;
}
#scenes-panel .sidebar-list-item-row.scene-item {
    cursor: default;
}
#scenes-panel .selected-scene {
    background-color: #c53131;
    background-position: center;
}
#scenes-panel .selected-scene svg path {
    fill: #fff;
}
.scene-item-footer > button {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-width: 0;
    overflow: hidden;
}
#folder-configuration-modal .token-image-modal-footer-select-wrapper {
    margin-top: 5px;
}
.encounter .folder-item-list,
.folder .folder-item-list {
    padding-left: 8px;
    padding-top: 0.5em;
    cursor: default;
}
.encounter .folder-item-list:empty:before,
.folder .folder-item-list:empty:before {
    content: "This folder is empty";
    color: #738694;
}
.encounter.collapsed .folder-item-list,
.folder.collapsed .folder-item-list {
    display: none;
}
.encounter > .sidebar-list-item-row-item .token-row-button,
.folder > .sidebar-list-item-row-item .token-row-button {
    background-color: rgb(235, 241, 245);
}
.encounter.collapsed > .sidebar-list-item-row-item .token-row-button,
.folder.collapsed > .sidebar-list-item-row-item .token-row-button {
    background-color: #fff;
}
.sidebar-list-item-row {
    position: relative;
    padding: 4px 0px;
    width: 100%;
    margin: 2px 0px;
    border: 1px solid #d8e1e8;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
}
.sidebar-list-item-row:not(.folder) {
    overflow: hidden;
}
.sidebar-list-item-row-item {
    display: flex;
    width: 100%;
    padding-right: 4px;
    padding-left: 4px;
}
.sidebar-list-item-row-img {
    display: flex;
    flex-basis: 38px;
    width: 38px;
    max-width: 38px;
    height: 100%;
    max-height: 38px;
    border-radius: 3px;
    object-fit: cover;
}
.sidebar-list-item-row-img .aoe-shape-line{
    transform: scaleX(0.5);
}
.custom-token-image-item .aoe-shape-line{
    width: 50%;
    left: 25%
}
.custom-token-image-item .aoe-token-tileable,
.sidebar-list-item-row-img [data-img]{
    background-size: 100px;
    animation: none;
    opacity: 100%;
}
.sidebar-list-item-row-img [data-img],
.sidebar-list-item-row-img img {
    object-fit: contain;
    width: 38px;
    max-width: 38px;
    height: 100%;
    max-height: 38px;
}
.sidebar-list-item-row-details {
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #10161a;
    flex-grow: 1;
    margin-left: 8px;
    margin-right: 8px;
    line-height: 1.4;
    font-family: Roboto, "Open Sans", Helvetica, sans-serif;
    text-align: left;
    white-space: nowrap;
    width: 0px;
}
.sidebar-list-item-row-details div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}
.sidebar-list-item-row-details-title {
    font-size: 13px;
    font-weight: 700;
}
.sidebar-list-item-row-details-subtitle {
    color: #738694;
    font-size: 10px;
}
.sidebar-list-item-row-item div.sidebar-list-item-row-details-subtitle .legacy-monster {
    color: rgb(18, 24, 28);
    background-color: rgba(18, 24, 28, 0.12);
    border-radius: 4px;
    flex-grow: 0;
}
.sidebar-list-item-row-item div.sidebar-list-item-row-details-subtitle .legacy-monster span {
    font-family: Roboto;
    font-weight: 500;
    line-height: 20px;
    font-size: 12px;
    letter-spacing: 0px;
    padding: 0px 6px;
}
#door_types{
    padding: 2px;
    width: 105px;
}

.token-row-button{
    position: relative;
    display: block;
    width: 30px;
    border-radius: 3px;
    object-fit: cover;
    background: #fff;
    border: 1px solid #d8e1e8;
    cursor: pointer;
    margin: 0 2px;
    min-width: 30px;
}
#playersFolder .token-row-button,
#playersFolder .token-row-gear {
    position: relative;
    display: block;
    width: 24px;
    border-radius: 3px;
    object-fit: cover;
    background: #fff;
    border: 1px solid #d8e1e8;
    cursor: pointer;
    margin: 0 2px;
    min-width: 24px;
    height: 21px;
}

.note-text ul{
    list-style-type: disc;
}
.note-text li>ul{
    list-style-type: circle;
}
.note-text li>ul ul{
    list-style-type: square;
}
.note-text ol{
    list-style-type: decimal;
}
.note-text>ol,
.note-text>ul{
    display: block;
    margin-block-start: 1em;
}
.note-text ol,
.note-text ul{
    padding-inline-start: 40px;
}

.sidebar-list-item-row.player-row {
    height: 120px;
    transition: height 250ms linear;
}
.sidebar-list-item-row.player-row .player-expansion-button {
    height: 16px;
    margin: 0px 0px -8px 0px;
    bottom: 8px;
    position: absolute;
    left: 0px;
    right: 0px;
    color: #838383;
    line-height: 1;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #f2f2f2;
}
.sidebar-list-item-row .sidebar-list-item-row-details-subtitle {
    flex-direction: row;
    justify-content: start;
}
.sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute {
    font-size: 12px;
    min-width: 34px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}
.sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute img {
    width: 24px;
    height: 24px;
}
.sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute .material-icons {
    font-size: 18px;
}
.sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute .plain-text {
    font-size: 18px;
    margin-top: -2px;
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}
.sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute.inspiration {
    position: absolute;
    top: 2px;
    right: 82px;
}
.sidebar-list-item-row.player-row .player-expansion-button .material-icons {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.sidebar-list-item-row.player-row.expanded {
    height: fit-content;
    padding-bottom:20px;
    transition: height 250ms linear;
}
.sidebar-list-item-row.player-row .player-card-footer {
    max-height: 76px;
    height: 76px;
    margin-top: 4px;
}

.sidebar-list-item-row.player-row .ability_value {
    margin: 8px 0;
}
.sidebar-list-item-row.player-row .token-row-add > .material-icons {
    display: none;
}
.sidebar-list-item-row.player-row.on-scene .token-row-add > .material-icons {
    display: inline-block;
    color: #1b9af0;
}
.sidebar-list-item-row.player-row.on-scene .token-row-add > svg {
    display: none;
}
.sidebar-list-item-row.player-row .token-row-gear {
    border-bottom-right-radius: 0;
}
.sidebar-list-item-row.player-row.button-loading .sidebar-list-item-row-details-subtitle {
    content: "loading character sheet yo!";
}
.sidebar-list-item-row.player-row.expanded .token-row-gear {
    border-bottom: 1px solid #d8e1e8;
}
.token-row-button .material-icons {
    padding: 2px 0px 0px 0px;
    margin-left: -4px;
}
.token-row-button svg {
    width: 100%;
    height: 100%;
    fill: #1b9af0;
}
.token-row-gear {
    display: block;
    width: 30px;
    padding: 7px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #f2f6f8;
    border-left: 1px solid #d8e1e8;
    margin: -4px -4px -4px 2px;
    cursor: pointer;
    min-width: 30px;
}
.token-row-gear img {
    width: 100%;
    height: 100%;
    fill: #738694;
}
.sidebar-list-item-row.encounter .player-row > .sidebar-list-item-row-item,
.sidebar-list-item-row.folder .player-row > .sidebar-list-item-row-item {
    height: 42px; /* players are taller than everything else */
}
.sidebar-list-item-row.encounter > .sidebar-list-item-row-item,
.sidebar-list-item-row.folder > .sidebar-list-item-row-item {
    height: 30px; /* folders are shorter than everything else */
}
.sidebar-list-item-row.encounter > .folder-item-list > .encounter-monster-group.grouped,
.sidebar-list-item-row.folder > .folder-item-list > .encounter-monster-group.grouped {
    border: 2px dashed #1b9af0;
    border-radius: 3px;
    padding: 0px 2px;
    margin: 2px 0px;
}

.sidebar-panel-content {
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background-color: rgb(235, 241, 245);
    height: 100%;
}
.sidebar-panel-content .sidebar-panel-body {
    height: 100%;
    padding: 8px;
}
#monsters-panel .sidebar-panel-body {
    padding: 0px;
}
#players-panel .sidebar-panel-body {
    padding: 0px;
}
#playersFolder .sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute{
    flex-grow: 0;
    margin-right: 0px;
}
.sidebar-panel-content .sidebar-panel-body {
    background-color: rgb(235, 241, 245);
    position: relative; 
    width:100%; 
    overflow-y: auto;
    flex: auto;
}
#token-configuration-modal .sidebar-panel-body{
    min-height:300px;
}
#token-configuration-modal{
    height: unset;
}

.tokens-panel-back-button {
    background-image: url(https://media-waterdeep.cursecdn.com/file-attachments/0/737/chevron-left-green.svg);
    background-repeat: no-repeat;
    background-position: left;
    padding: 4px;
    cursor: pointer;
    margin: 0px 12px;
}
.tokens-panel-back-button div {
    padding-left: 20px;
    color: #878787;
    text-transform: uppercase;
    font-family: "Roboto Condensed", Roboto, Helvetica, sans-serif;
    font-weight: bold;
}
.sidebar-panel-content .sidebar-panel-header {
    background-color: rgb(235, 241, 245);
    padding: 0px;
}
.sidebar-panel-content .sidebar-panel-footer {
    display: flex;
    flex-direction: column;
    padding: 0px;
    background-color: rgb(235, 241, 245);
    width: 100%;
    align-items: center;
}
#playersFolder .player-card-info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#playersFolder span.ct-health-summary__deathsaves-label {
    font-size: 9px;
    font-weight: bold;
    text-transform: none;
    color: #666;
    margin: 0px;
    text-align: center;
}
#playersFolder .players-popout-button{
    position: absolute;
    top: 0px;
    right: 0px;
    margin-right: 5px;
    margin-top: 5px; 
}
#playersFolder .hp-attribute.death-saves.ct-health-summary__data.ct-health-summary__deathsaves {
    float: right;
    margin: 2px 6px 2px 2px;
    border: 1px solid #d8e1e8;
    border-radius: 2px;
    display: flex;
    width: 80px;
    flex-direction: column-reverse;
    justify-content: flex-end;
    height: fit-content;
    padding: 2px 0px 0px 0px;
}
#playersFolder .ct-health-summary__deathsaves-group, 
#playersFolder .ct-health-summary__exhaustion-group{
    flex-direction: column;
}

#playersFolder .ct-health-summary__deathsaves-mark, 
#playersFolder .ct-health-summary__exhaustion-mark {
    width: 11px;
    height: 11px;
    border: none;
}

#playersFolder .player-card-info .subtitle-attibute,
#playersFolder .subtitle-attibute.hp-attribute  {
    font-weight: bold;
    display: flex;
    font-size: 18px;
    flex-direction: column-reverse;
    width: 52px;
    text-align: center;
}

#playersFolder span.subtitle-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    line-height: 10px;
    margin-bottom: 3px;
    padding: 2px;
    font-size: 9px;
    color: #666;
}
#playersFolder .subtitle-attibute.hp-attribute {
    border: 1px solid #d8e1e8;
    border-radius: 2px;
    display: flex;
    width: 80px;
    flex-direction: column-reverse;
    float: right;
    margin: 2px 6px 2px 2px;
}

#playersFolder .sidebar-list-item-row .sidebar-list-item-row-details-subtitle .subtitle-attibute{
        align-items: center;
}
#playersFolder span.hp-value {
    color: #1b9af0;
}
#playersFolder .token-row-button svg, 
#playersFolder .token-row-gear img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: scale(0.8);
}
#playersFolder .token-row-button .material-icons{
    font-size: 18px;
    padding: 0px;
}
#playersFolder .ddbc-box-background svg path{
    fill: var(--player-border-color, #F00);
}

.fly-svg path,
.fly-svg rect{
    fill: #738694;
}
.fly-svg{
    width: 10px;
}
.climb-svg{
    width: 16px;
}
.chat-link {
  word-wrap: break-word;
  width: 100%;
  text-decoration: underline;
}
.ddbc-number-bar {
    display: flex;
    position: relative;
    height: 10px;
    flex-direction: row;
}

span.exhaustion-pip {
    height: 4px;
    width: 10px;
    display: inline;
    position: relative;
    margin: 1px;
    border: 1px solid #666;
}
span.exhaustion-pip.filled {
    background: #202020;
}

span.exhaustion-pip.first{
    border-bottom-left-radius: 5px;
    border-top-left-radius:5px;
}
span.exhaustion-pip.last{
    border-bottom-right-radius: 5px;
    border-top-right-radius:5px;
}

.subtitle-attibute.exhaustion-attribute {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 26px;
    right: 10px;
}

#playersFolder .exhaustion-attribute span.subtitle-title {
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 9px;
}

.example-tokens-wrapper {
    width: 100%;
    height: 100px;
    display: flex;
    margin: 10px 0px;
    justify-content: space-between;
}
.example-token{
    --window-zoom: 1;
}
/* all the rc-switch styles were lifted from the content sharing screen /campaigns/<campaign_id>/content-management and then tweaked slightly */
.rc-switch {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 44px;
    height: 22px;
    line-height: 20px;
    padding: 0;
    vertical-align: middle;
    border-radius: 20px 20px;
    border: 1px solid #ccc;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1), border 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
.rc-switch-checked {
    border: 1px solid #1b9af0;
    background-color: #1b9af0;
    background-image: none !important;
}
.rc-switch-checked:after {
    left: 22px;
}
.rc-switch-unknown {
    border: 1px solid #1b9af0;
}
.rc-switch-unknown:after {
    left: 11px;
}
.rc-switch:after {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 1px;
    border-radius: 50% 50%;
    background-color: #fff;
    background-image: none !important;
    content: " ";
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    transform: scale(1);
    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-name: rcSwitchOff;
    animation-name: rcSwitchOff;
}
.rc-switch-inner {
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 24px;
    top: 0;
}
.rc-switch-checked .rc-switch-inner {
    left: 6px;
}
.rc-switch-unknown .rc-switch-inner {
    left: 9px;
}
.rc-switch-checked:after {
    left: 22px;
}
.rc-switch-unknown:after {
    left: 11px;
}
.rc-switch:hover:after {
    transform: scale(1.1);
    -webkit-animation-name: rcSwitchOn;
    animation-name: rcSwitchOn;
    background-image: none !important;
}
.rc-switch:focus{
    outline: 2px solid #000;
}

#grid_toggle:not(.rc-switch-checked) ~ *{
    display:none !important;
}
.sidebar-hover-text-flyout {
    display: block;
    max-width: 400px;
    padding: 0px 10px;
    background-color: rgba(28,29,30,0.8);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: none;
}
.sidebar-hovertext:before {
    content: attr(data-hover);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: none;
    visibility: hidden;
    opacity: 0;
    width: max-content;
    background-color: rgba(28,29,30,0.8);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 5px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    z-index: 1;
    left: 5%;
    margin-top: 30px;
    width: 90%;
}

#edit_scene_form .sidebar-hovertext:before,
#edit_scene_form .sidebar-hovertext:hover:before{
    width: fit-content;
    white-space: nowrap;
}
.ct-sidebar{
    inset: 0px 0px 0px auto !important;
    right: 0px !important;
 }

.chat-text-wrapper.sidebar-hover-text:before  {
    transition: opacity 0ms;
    content: attr(data-hover);
    display:block;
    position:absolute;
    white-space: pre;
    bottom: 100px;
    text-align: left;
    background:rgb(18, 18, 18);
    padding:5px;
    border:1px solid #ababab;
    border-radius:5px;
    pointer-events:none;
    opacity: 0;
    color: #fff;
}

.chat-text-wrapper.sidebar-hover-text:hover:before {
    transition: opacity 500ms linear 500ms;
    opacity: 1;
}
.sidebar-hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}
.sidebar-panel-content .sidebar-panel-footer .footer-input-wrapper:empty {
    padding: 0px;
    border-top: 0px solid #d8e1e8;
}
.sidebar-panel-loading-indicator {
    padding: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgb(235, 241, 245);
    /* easy debugging */
    /* opacity: 0.5; */
}
.loading-status-indicator__subtext {
    font-size: 14px;
    color: #738694;
    margin-bottom: 8px;
    text-align: center;
}
.beholder-dm-screen__beholder {
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: beholder-float;
}
@keyframes beholder-float {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, -20px); }
    100%   { transform: translate(0, -0px); }   
}

div.sidebar__pane-content div.tooltip::after {
    background: none !important;
}
.dm-eyes-only{
    border: 1px solid #000;
    border-radius: 5px;
    background: #f5f5f5;
    padding: 0px 5px;
    margin: 9px 10px;
    position: relative;
}
.dm-eyes-only:before {
    display:block;
    position:absolute;
    content:'DM Eyes Only';
    top: -10px;
    right: 2px;
    float:right;
    border:1px #000 solid;
    border-radius:5px;
    background: #f5f5f5;
    font-weight: bold;
    font-size:10px;
    padding:0px 4px;
}
.body-rpgcharacter-sheet .dm-eyes-only{
    display:none;
}
.elev svg{
    left: -7px;
    position: absolute;
}

.elev{
    pointer-events: none;
    z-index: 1;
}
.age svg{
    left: -7px;
    position: absolute;
}

.age{
    pointer-events: none;
    z-index: 1;
}
.token img:not(.note-condition):not(.condition-img), .token [data-img]:not(.aoe-shape-line), .token .token-image{
    pointer-events:none !important;
}

.set-conditions-button .tooltip-hover,
.remove-conditions-button .tooltip-hover{
    pointer-events:none;
}
button.avtt-roll-button,
.avtt-ability-roll-button {
    /* lifted from DDB encounter stat blocks  */
    color: #b43c35;
    border: 1px solid #b43c35;
    border-radius: 4px;
    background-color: #fff;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    font-family: Roboto Condensed,Open Sans,Helvetica,sans-serif;
    line-height: 18px;
    letter-spacing: 1px;
    padding: 1px 4px 0;
}
.ct-sidebar__portal{
    overflow: unset !important;
    z-index: 57000 !important;
}
.ct-sidebar__portal>[role='presentation'] .MuiPopover-paper{
    width: fit-content;
    padding:0px;
}

.ct-sidebar__portal>[role='presentation'] .MuiPopover-paper ul{
    padding:10px;
}
body>[role='presentation'] .MuiPopover-paper{
    width: fit-content;
    padding:0px;
}

button.avtt-roll-formula-button {
    font-size: 14px;
    cursor: default;
    color: #394B59;
    padding: 9px;
}
.abovevtt-slash-command-journal button {
    color: #b43c35;
    border: 1px solid #b43c35;
    border-radius: 4px;
    background-color: #fff;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    font-family: Roboto Condensed,Open Sans,Helvetica,sans-serif;
    line-height: 18px;
    letter-spacing: 1px;
    padding: 1px 4px 0;
}
.MuiPaper-root:not(.MuiAlert-root) {
    padding: 0px 16px;
    width: 100px;
    pointer-events: auto;
}

.MuiListItemText-root {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}
.MuiButtonBase-root {
    width: 100%;
}

.MuiModal-root,
div#selectedTokensBorder,
div#selectedTokensBorderRotationGrabberConnector,
#sounds-panel .volume-control {
    width: 50%;
    float: right;
}

#sounds-panel .channel-progress-bar-total {
    width: 100%;
    position: relative;
    height: 1px;
    bottom: 4px;
    left: 0px;
    background: lightgray;
}

#sounds-panel .channel-progress-bar-progress {
    width: 0%;
    position: relative;
    height: 1px;
    bottom: 0px;
    left: 0px;
    background: #0075FF;
}

#sounds-panel .sidebar-panel-header {
    padding: 4px;
    border-bottom: 1px solid #2b2b2b;
}

#sounds-panel .audio-row  {
    height: 25px;
}

#track-list li:hover {
    background-color:lightskyblue;
}

#track-list button {
    float: right;
    height: 100%;
}

.sidebar-panel-footer button.custom-stat-buttons{
   appearance: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #1b9af0;
    border: none;
    color: #fff;
    align-self: stretch;
    margin: 4px 0px 4px 0px;
    padding: 10px;
    width: 100%;
    flex-grow: 0;
    font-size: 16px;
    color: #fff;
}


.ability-block {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    color: #4f1300;
}
.ability-block__stat {
    width: 30%;
    padding: 5px 0;
    text-align: center;
}

.ability-block__heading {
    font-weight: bold;
}

.ability-block__data {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.ability-block__modifier {
    margin-left: 2px;
}
.mon-stat-block__meta {
    font-style: italic;
    margin-bottom: 15px;
}
.mon-stat-block__name {
    color: #822000;
    font-family: MrsEavesSmallCaps,Roboto,Open Sans,Helvetica,sans-serif;
    font-size: 34px;
    font-weight: 700;
}
.mon-stat-block__attribute, .mon-stat-block__feature {
    color: #822000;
    line-height: 1.2;
    margin: 5px 0;
}
.mon-stat-block__name .mon-stat-block__name-link, 
.mon-stat-block__name .mon-stat-block__name-link:active, 
.mon-stat-block__name .mon-stat-block__name-link:hover, 
.mon-stat-block__name .mon-stat-block__name-link:visited {
    color: #822000;
}
.mon-stat-block__attribute-label, 
.mon-stat-block__feature-label{
        font-weight: 700;
}
#VTT{
    z-index:2;
    transform: scale(var(--window-zoom));
}
.mon-stat-block{
    padding: 15px 10px;
}
.more-info footer{
    padding: 0px;
}
.mon-stat-block{
    padding: 15px 10px;
  
}
.ddbc-creature-block__name {
    font-size: 30px;
}
.monster-details .more-info footer{
    padding: 0px;
    height: 20px;
}

.monster-details .more-info footer .source.monster-source {
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    margin-top: 0px;
    float:left;
}
.monster-details .more-info.details-more-info:after {
    display:none
}
.monster-details .more-info-content{
    padding: 0px !important;
}
.monster-details,
.detail-content .image{
    margin-bottom:0px;
}
.top_menu.visible,
.ddbc-tab-options--layout-pill{
    z-index: 57000;
}

/*combat tracker face lift*/
/* Also used in resize can remove if that goes in*/
#combat_footer,
#combat_tracker_inside{
    border-style: solid;
    border-color: #ddd; 
}
#combat_footer{
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 5px 5px; 
    left: -1px;
    right: -1px;
    position: absolute;
}

#combat_footer button{
    flex-grow: 1;   
}
#combat_footer{
    display: flex;   
}
#combat_tracker_inside {
    border-width: 1px 1px 0px 1px;
    border-radius: 5px 5px 0 0;
}
.body-rpgcharacter-sheet #combat_tracker_inside{
    width: 200px;   
}
#combat_tracker_inside #combat_footer button:last-of-type{
    border-bottom-right-radius: 5px;   
}
#combat_tracker_inside #combat_footer button:first-of-type{
    border-bottom-left-radius: 5px; 
}

.body-rpgcharacter-sheet #combat_tracker_inside{
    border-radius: 5px;
}
/* end also used in resize can remove if that goes in*/
/*Changes for combat tracker UI*/
#combat_footer{
    padding: 13px 4px 4px 4px;
}
#combat_area tr td:first-of-type,
#combat_area tr td:nth-of-type(2)
{
    width: 13%;
}
#combat_area tr td:nth-of-type(4) {
    width: 5px;
}
#combat_area tr td:nth-of-type(3),
#combat_area tr td:nth-of-type(5) {
    width: 13%;
}
.body-rpgcharacter-sheet #combat_area tr td:nth-of-type(3),
.body-rpgcharacter-sheet #combat_area tr td:nth-of-type(5) {
    width: 18%;
}

#combat_area tr td:first-of-type,
#combat_area tr td:nth-of-type(2),
#combat_area tr td:nth-of-type(3)
#combat_area td:last-of-type {
    padding: 0px 5px 0px 0px;
}
#combat_area tr{
    position: relative;
}
.resize_drag_window{
    pointer-events:none;
    background:none;
}
.resize_drag_window > *{
    pointer-events:all;
}


#text_controller_title_bar,
.text-input-title-bar,
.resize_drag_window .title_bar,
#combat_tracker_title_bar {
    width: 100%;
    background: #242527;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #fff;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color:  gray;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    line-height: 26px;
    text-shadow: 0px 0px  #000,
        -1px -1px 0  #000,  
         1px -1px 0  #000,
         -1px 1px 0  #000,
         1px 1px 0  #000;
    top: -1px;
    position: relative;
    width: calc(100% + 2px);
    left: -1px;
    cursor: move;
    z-index: 1;
}

#text_controller_inside .ddbc-tab-options--layout-pill{
    min-width: 25px;
    max-width: 75px;
    width: 75px;
    padding:1px
}
#text_controller_inside .sp-replacer,
#text_controller_inside select,
#text_controller_inside input{
    width:inherit;
    display:flex;
    flex-wrap: wrap;
    height: 25px;
    width:100%
}


#text_controller_inside {
    position: fixed;
    top: 555px;
    z-index: 1000;
    width: 240px;
    height: 170px;
}

#text_controller_inside .material-icons{
    font-size: 12px;
    left: calc(50% - 6px);
    position: relative;
}

.drawing-text-box{
    resize: none;
    height:calc(100% - 25px);
    width:100%;
    position: relative;
}
.text-input-inside:before{
    resize: none;
    content: attr(data-text);
    height: calc(100% - 25px);
    width: calc(100% - 2px);
    position: relative;
    z-index: 2;
    white-space: pre-wrap;
    overflow: hidden;
    background-color: transparent;
    text-decoration: none;
    text-shadow: none;
    padding: 0px;
    position: absolute;
    left: 1px;
    top: 26px;
    pointer-events: none;
    overflow-wrap: break-word;
    text-align:  var(--text-align);
    color: var(--color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
}
  



#manual_grid_data>div>div:first-of-type{
    vertical-align: top;
    font-weight:bold;
}
#manual_grid_data>div{
    margin: 10px 0px;

}
.resize_drag_window .title_bar:after,
#text_controller_title_bar:after,
.text-input-title-bar:after,
#combat_tracker_title_bar:after {
    content: '';
    height: 8px;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    bottom: -8px;
    background:  linear-gradient(to bottom, #0005 5%, #0000 40%);
}
#monster_title_bar_name,
#player_title_bar_name{
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    text-align: left;
    width: 100%;
    color: #fff;
}

.resize_drag_window .title_bar .title_bar_close_button,
#text_controller_title_bar_exit,
.text-input-title-bar-exit,
.title-bar-exit,
#combat_tracker_title_bar_exit,
#monster_close_title_button,
#player_close_title_button,
#reload_player_frame_button,
#token_options_title_bar_exit,
.popout-button {
    fill: #fff5;
    filter: drop-shadow(1px 1px 1px #000e);
    cursor: pointer;
    background: #0000;
}
#reload_player_frame_button{
    fill:  #ddd;
}

#monster_close_title_button:hover,
#player_close_title_button:hover,
#reload_player_frame_button:hover,
.text-input-title-bar-exit:hover,
.title-bar-exit:hover,
.resize_drag_window .title_bar .title_bar_close_button,
#text_controller_title_bar_exit:hover,
#combat_tracker_title_bar_exit:hover,
#token_options_title_bar_exit:hover,
.popout-button:hover,
#combat_tracker_title_bar_settings:hover {
    background: #ddd3;
    transition: all linear 0.2s;
}

.text-input-title-bar-enter:hover {
    background: #ddd3;
    transition: all linear 0.2s;
    cursor: pointer;
}
 
.text-input-title-bar-exit svg,
.text-input-title-bar-exittitle-bar-exit svg,
.resize_drag_window .title_bar .title_bar_close_button svg,
#text_controller_title_bar_exit svg,
#combat_tracker_title_bar_exit svg,
#monster_close_title_button svg,
#player_close_title_button svg,
#reload_player_frame_button svg,
#token_options_title_bar_exit svg,
.popout-button svg{
    height: 20px;
    width: 20px;
}

.text-input-title-bar-exit svg g rect,
.title-bar-exit svg g rect,
.resize_drag_window .title_bar .title_bar_close_button svg g rect,
#text_controller_title_bar_exit svg g rect,
#combat_tracker_title_bar_exit svg g rect,
#monster_close_title_button svg g rect,
#player_close_title_button svg g rect,
#token_options_title_bar_exit svg g rect{
    height: 80px;
    width: 10px;
    fill: #ddd;
    transform: translate(45px, 10px);
}

.popout-button svg path:not([fill='none']){
    fill: #ddd;
}

.journal-button.popout-button svg path:not([fill='none']){
    fill: #878787; 
}

.journal-button.popout-button:hover svg path:not([fill='none']){
    fill: #000; 
}

.text-input-title-bar-enter {
    fill: #ddd;
    position: absolute;
    right: 30px;
    width: 20px;
    height: 20px;
    top: 2px;
}

.text-input-title-bar-exit,
.title-bar-exit,
.resize_drag_window .title_bar .title_bar_close_button,
#text_controller_title_bar_exit,
#combat_tracker_title_bar_exit,
#monster_close_title_button,
#player_close_title_button,
#token_options_title_bar_exit{
    position: absolute;
    right: 5px;
    width: 20px;
    height: 20px
}
#combat_tracker_title_bar_settings{
    position: absolute;
    right: 55px;
    width: 20px;
    height: 20px
}
#combat_tracker_title_bar_settings span{
    height: 20px;
    width: 20px;
    font-size: 20px;
    line-height: 25px;
    color: #ddd;
}
.popout-button {
    position: absolute;
    right: 30px;
    width: 20px;
    height: 20px
}
#reload_player_frame_button{
    position: absolute;
    right: 30px;
    width: 20px;
    height: 20px;
}

#monster_close_title_button,
#player_close_title_button,
#reload_player_frame_button,
.text-input-title-bar-exit,
.title-bar-exit,
.resize_drag_window .title_bar .title_bar_close_button,
#text_controller_title_bar_exit,
#combat_tracker_title_bar_exit,
#token_options_title_bar_exit,
.popout-button {
    top: 2px;
}

.glc-game-log .popout-button{
    position: relative;
    display: inline; 
    padding-left: 3px;
    vertical-align: top;
    right: 0;
    filter: none;
}
.glc-game-log .popout-button path:not([fill='none']){
    fill: #000;
    right: 0;
} 
.journal-button{
    filter: none;
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    position: absolute;
    right: 33px;
    top: 9px;
    width: 20px;
    height: 20px;
    border-radius: 3px;

}
.journal-button svg{
    padding: 2px 1px 2px 0px;
}
    
.body-rpgcharacter-sheet .journal-button{
    filter: none;
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    position: absolute;
    right: 43px;
    top: 6px;
    width: 30px;
    height: 27px;   
    border-radius: 3px;
}
.body-rpgcharacter-sheet .journal-button svg {
    padding: 0px;
    transform: scale(1.1);
    left: 4px;
    top: 3px;
    position: relative;
}
#combat_tracker_inside #endplayerturn{
    pointer-events: none;
    background: #ddd;
    color: #888;
    opacity: 0.5;
    padding:0px;
}
.body-rpgcharacter-sheet #combat_tracker_inside #combat_footer{
    padding-top:5px;
}
#combat_tracker_inside #endplayerturn.enabled,
#combat_tracker_inside #endplayerturn.enabled:hover{
    pointer-events:all;
    color:#fff;
    background: #c53131;
    opacity: 1;
}
#combat_tracker_inside #endplayerturn.enabled:active{
    transform: translate(-1px, 1px);
    box-shadow: inset 1px 1px 4px 0px #0008;
}

#tokenOptionsPopup{
    position: fixed;
    z-index: 59000;
    background: #fff;
    border-radius: 10px;
    width: 245px;
    max-height: 100%;
}
.aboveDiceTotal{
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 23px;
    font-family: Roboto,Open Sans,Helvetica,sans-serif;
    color: rgb(92, 112, 128);
}
.aboveDiceOutput{
    width:181px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: rgb(92, 112, 128);
}

[class*='Line-Title'] .aboveDiceOutput .skill-tooltip{
    color: rgb(92, 112, 128) !important;
}

.abovevtt-roll-check,
.abovevtt-roll-skill{
    color: rgb(181, 93, 255);
}
.abovevtt-roll-save,
.abovevtt-roll-heal{
    color: rgb(108, 191, 91);
}
.abovevtt-roll-damage{
    color: rgb(223, 123, 123);
}
.abovevtt-roll-attack,
.abovevtt-roll-to-hit{
    color: rgb(27, 154, 240);
}
.abovevtt-roll-custom,
.abovevtt-roll-initiative,
.abovevtt-roll-roll{
    color: rgb(245, 166, 35);
}

.abovevtt-mon-stat-block__separator{
    max-width: 100%;
    max-height: 1rem;
    min-height: 10px;
    margin: 0px;
    background: url('https://media-waterdeep.cursecdn.com/file-attachments/0/579/stat-block-header-bar.svg') center center no-repeat;
}

#tokenOptionsContainer{
    overflow: hidden auto;
    padding: 5px;
    width: 100%;
    height: 100%;
}
#tokenOptionsContainer div, 
#tokenOptionsContainer h3 {
    font-size: 10px;
}
#tokenOptionsContainer h3,
.token-config-aura-wrapper .token-image-modal-footer-select-wrapper,
.token-image-modal-footer-title,
.menu-outer-aura,
.menu-inner-aura,
.menu-vision-aura {
    display: flex;
    align-self: center;
    line-height: 20px;
}   
.menu-outer-aura,
.menu-inner-aura,
.menu-vision-aura{
    margin: 2px 0px;
}
#tokenOptionsContainer div.token-image-modal-url-label-wrapper{
    display: flex;
    align-self: center;
    line-height: 20px;
}
.context-menu-flyout,
#tokenOptionsContainer input:not([type="range"]),
#tokenOptionsContainer select{
    font-family: Roboto,Open Sans,Helvetica,sans-serif;
    padding: 1px 2px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.context-menu-list{
    border-radius: 10px !important;
}
.context-menu-list li{
    background: none;
}

.menu-outer-aura h3,
.menu-inner-aura h3,
.menu-vision-aura h3{
    min-width: 51px;
    margin-top: 0px;
}

#round_number_label {
    position: relative;
    z-index:  1;
}
#round_number_label:before{
    content: '';
    left: 0;
    right: 0;
    height: 7px;
    position: absolute;
    z-index: -1;
    top: -7px;
    background: linear-gradient(to top, #0004 5%, #0000 40%);
}



#combat_tracker_inside .ui-resizable-ne,
#combat_tracker_inside .ui-resizable-se,
#combat_tracker_inside .ui-resizable-e{
    right: -7px;
}

#combat_tracker_inside .ui-resizable-nw,
#combat_tracker_inside .ui-resizable-sw,
#combat_tracker_inside .ui-resizable-w{
   left: -7px;
}
#combat_tracker_inside .ui-resizable-se{
    width: 10px;
    height: 10px;
}

.resize_drag_window .ui-resizable-s,
.resize_drag_window .ui-resizable-sw,
#resizeDragMon .ui-resizable-s,
#resizeDragMon .ui-resizable-sw,
#sheet .ui-resizable-s,
#sheet .ui-resizable-sw{
    bottom: -7px;  
}
.moveableWindow  .ui-resizable-handle {
    background: none;
    border: none;
    display: block;
    position: absolute;
}
.resize_drag_window .ui-resizable-se,
#resizeDragMon .ui-resizable-se,
#sheet .ui-resizable-se{
    height: 10px;
    width: 10px;
    right: -7px;
    bottom: -10px;
}
.resize_drag_window .ui-resizable-e,
.resize_drag_window .ui-resizable-w,
#resizeDragMon .ui-resizable-e,
#resizeDragMon .ui-resizable-w,
#sheet .ui-resizable-e,
#sheet .ui-resizable-w   {
    height: calc(100% + 4px);  
}

/*Resizable Handle Test code */
/*[class*="ui-resizable"]{
    border:  1px dotted #ddd;
}*/

[class*="ui-resizable"]
#combat_area tr td:last-of-type{
    padding-right: 5px;
}

#combat_tracker_inside{
    width: 295px;
}
/*End changes for UI*/

.body-rpgcharacter-sheet #combat_tracker_inside{
    border-radius: 5px;
}

#combat_area tr[data-current] td{
    background: none;  
}
#combat_area tr[data-current] td{  
    background: none;
    border: none;
}
#combat_area tr[data-current]{
    box-shadow: inset 0 0 50px 2px #1b9af0;
    border-radius: 6px;
    padding: 5px;
}
#combat_area tr td:last-of-type{
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px; 
}
 #combat_area tr td:first-of-type{
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;  
}

#combat_area tr[data-current][data-target*="characters"]{
    background: #0F0;  
}
#combat_area tr[data-current]:not([data-target*="characters"]){
    background: #0000;  
}

#combat_area tr[data-current] input{
    border-color: #1b9af0;
}
#combat_area{
    border-collapse:collapse;  
}

#combat_area td input.init,
#round_number_label input{
    border-radius: 3px;
    border-color: #ddd;
    width: 39px !important;
    height: 19px;
    text-align: center;
    font-size: 13px !important;
}
#combat_area td input:not(.init){
    border-radius: 3px;
    border-color: #ddd;
    width: 100% !important;
    height:22px;
}
#combat_area td input.hp{
    text-align: right;
}

#combat_area td input.max_hp{
    text-align: left;
}

#round_number_label input{
    font-weight: 600;
    -moz-appearance: textfield !important;
}

#combat_area td button{
    vertical-align: middle;
    border-radius: 3px;
    padding: 2px;
    margin: 2px;
    border: 1px solid #ddd;
}

#combat_area td button{
    margin: 0px 1px;
}
#site #combat_area tr td{
    padding-bottom: 4px;
}

#combat_area tr td div,
#combat_area tr td input.hp,
#combat_area tr td input.max_hp{
    top: 1px;
    position: relative;
    font-size: 18px !important; 
}

#combat_area tr td div.hp{
    float: right;  
}

#round_number_label{
    height: 30px;  
}

.VTTToken.freeform .hpbar:after {
    display: var(--token-hpbar-display);
    transition: none;
    position: absolute;
    width: 100%;
    visibility: visible;
    height: 6px;
    width: 100%;
    bottom: -6px;
    left: 0px;
    right: 0px;
    content: '';
    border: 1px solid #000;
    background-color: #0b0b0ddd !important;
    background-image: linear-gradient(to left, transparent calc(100% - var(--hp-percentage)), var(--token-hpbar-aura-color) 0%, var(--token-hpbar-aura-color) 100%) !important;
    box-shadow: inset 0px 0px 0px 1px var(--token-temp-hpbar), 0px 0px 3px 1px var(--token-temp-hpbar);
}

#combat_area td [class*="AvatarPortrait"]{
    border-radius: 5px;
    top:2px;
    left: 2px;
    position: relative;
    vertical-align: bottom;
}

#combat_area tr td{
    vertical-align: middle
}
#combat_area tr td{
    vertical-align: bottom
}

#round_number_label button{
    margin-left: 6px;
}
#round_number_label strong{
    margin-right: 2px;
    top: 1px;
    position: relative;
}
 #combat_tracker button:focus{
    outline: 1px solid #ddd;
}
#combat_area tr[data-current] td img{      
     box-shadow: 1px 1px 2px 0px #000000;  
}
#combat_area tr td input.init,
#combat_area tr td input:focus,
.roundNum,
#combat_area tr td img {
    box-shadow: 1px 1px 1px 0px #00000047;
}

#combat_tracker input[disabled=disabled], 
#combat_tracker input[disabled=disabled]:hover,
#combat_tracker input[readonly]{
    opacity: 1;
    border-style: solid;
}
input.hp[disabled],
input.max_hp[disabled]{
    opacity: 1;
}

#combat_footer{
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
    padding-top: 13px;
}

.openEye path:not([fill*="none"]),
.closedEye path:not([fill*="none"]),
.hideSVG path:not([fill*="none"]),
.rollSVG path:not([fill*="none"]),
.findSVG path:not([fill*="none"]),
.delSVG path:not([fill*="none"]),
.statSVG path:not([fill*="none"]){
    fill: #1b9af0;
}

.findSVG path.cls-1{
    fill: transparent;
}

.openEye,
.closedEye,
.hideSVG,
.findSVG,
.delSVG,
.statSVG {
    width: 16px
}

.rollSVG{
    width: 17px;
    position: relative;
    bottom: 2px;
}

.hideFromPlayerCombatButton:after{
    content: 'Hide/Reveal in Combat Tracker for Players';
}
.rollInitiativeCombatButton:after{
    content:'Roll Initiative';         
}
.findTokenCombatButton:after{
    content:'Find Token';
}
.expandgroup:after{
    content:'Collapse Group';
}
.expandgroup.collapsed:after{
    content:'Expand Group';
}
.removeTokenCombatButton:after{
    content:'Remove from Combat';
}
.openSheetCombatButton:after{
    content:'Open Sheet';   
}

.combatHideFromPlayerInput{
    display: none;
}

.hideFromPlayerCombatButton:after,
.rollInitiativeCombatButton:after,
.findTokenCombatButton:after,
.removeTokenCombatButton:after,
.openSheetCombatButton:after{
    background: #444e;
    transition: 0.3s ease-in-out all;
    transition-delay: 0s;
    position: absolute;
    font-size: 14px;
    z-index: 59000;
    height: fit-content;
    padding: 3px;
    width: fit-content;
    white-space: nowrap;
    border-radius: 2px;
    text-shadow: 0px 1px 1px #000;
    display: block;
    opacity: 0;
    pointer-events: none;
}

#combat_area tr td div{
    line-height: 100%;
}

.hideFromPlayerCombatButton:hover:after,
.rollInitiativeCombatButton:hover:after,
.findTokenCombatButton:hover:after,
.removeTokenCombatButton:hover:after,
.openSheetCombatButton:hover:after {
    transition-delay: 0.7s;
    opacity: 1;
    color: #fff;
    pointer-events: none;
    right: 8px;
    border-radius: 5px;
}

.import-loading-indicator,
.paused-indicator,
.dm-paused-indicator{
    position: fixed;
    z-index: 100000;
    left: calc(50% - 170px);
    top: 50px;
    text-align: center;
    border-radius:20px;
    border:1px solid #000;
    box-shadow: 0px 0px 2px 2px #0008;
    background: #fff6;
    height: 112px;
    width: 200px;
    backdrop-filter: blur(6px);
}
.import-loading-indicator .loading-status-indicator__subtext{
    overflow: visible;
    white-space: nowrap;
    font-size:14px;
    position:relative;
    z-index:200;
    color:#ddd;
    top: 70px;
    text-shadow: 1px 1px 1px #000;
}
.import-loading-indicator .beholder-dm-screen{
    top: -20px;
}
.import-loading-indicator .loading-status-indicator__subtext.complete {
    overflow: visible;
    white-space: nowrap;
    transform: translate(-50%);
}

.paused-indicator,
.dm-paused-indicator{
    top: unset;
    bottom: 50px;
    height: 130px;
}
.paused-indicator .paused-status-indicator__subtext,
.dm-paused-indicator .paused-status-indicator__subtext{
    overflow: visible;
    white-space: nowrap;
    font-size:14px;
    position:relative;
    z-index:200;
    color:#ddd;
    top: 70px;
    text-shadow: 1px 1px 1px #000;
}

.paused-indicator g.beholder-dm-screen__screen path,
.dm-paused-indicator g.beholder-dm-screen__screen path,  
.import-loading-indicator g.beholder-dm-screen__screen path {
    fill: #201911;
    stroke: #0c0a08;
}

/*one button*/
.encounter-builder-app #combat_area td button:first-of-type:nth-last-of-type(1) {
    margin-right:60px;
}

/* two buttons */
.encounter-builder-app #combat_area td button:first-of-type:nth-last-of-type(2) ~ button:last-of-type {
    margin-right:30px;
}

/* three buttons */
.encounter-builder-app #combat_area td button:first-of-type:nth-last-of-type(3) ~ button:last-of-type {
    margin-right:0px;
}
/* four buttons */
.encounter-builder-app #combat_area td button:first-of-type:nth-last-of-type(4) ~ button:last-of-type {

    margin-right:0px;
}
.tracker-list{
    overflow: visible;
}
.openEye,
.closedEye,
.delSVG,
.findSVG,
.statSVG {
    bottom: 3px;
    position:relative;
}

.addCTSVG{
    padding: 4px;
    bottom: 1px;
}

#combat_tracker td button,
#combat_tracker td button svg{
    display: inline-block;
    vertical-align: middle;
} 
#combat_area{
    width: 100%;
}
#combat_tracker_inside {
    height: 450px;
    z-index: 49000;
}
/*minimize windows*/

#darkness_layer.smooth-transition{
    transition: filter 350ms linear;
}

.minimized > *:not(#ct_text_title, .player_title, .monster_title, #text_controller_title, .title_bar_text),
.resize_drag_window .title_bar:after,
.resize_drag_window .title_bar.minimized ~ *,
#combat_tracker_title_bar.minimized:after,
#combat_tracker_title_bar.minimized ~ *{
    display: none !important;
}

#text_controller_title_bar.minimized,
#combat_tracker_title_bar.minimized,
#combat_tracker_title_bar.minimized,
.resize_drag_window .title_bar.minimized,
.resize_drag_window.minimized,
#resizeDragMon.minimized,
#sheet.minimized,
.minimized{
    border-radius: 5px;
    border: 1px solid #fffd;
    opacity: 1;
    filter: drop-shadow(1px 1px 1px #000);
    background-color: #24252788;
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    text-shadow: 0px 0px  #000,
        -1px -1px 0  #000,  
        1px -1px 0  #000,
        -1px 1px 0  #000,
        1px 1px 0  #000;
    padding-left: 3px;
}
#combat_tracker_inside{
    margin: 0px;
}
.minimized #text_controller_title,
.minimized .monster_title,
.minimized .player_title,
.minimized .title_bar_text,
.minimized #ct_text_title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#combat_tracker_inside *:focus{
    outline: none;
}

[class$='NotRoot'] [class*='-MessageCarrot']{
    display:none;
}
[class$='NotRoot'] [class$='-MessageRoot']{
    transform: scale(0.8) translateX(-50%);
    left: calc(50% - 170px) !important;
    position:fixed;
    top:10px !important;;
    transform-origin: center;
}

/*end combat tracker face lift*/
.token>.base{
    background: #0000001c;
    backdrop-filter: blur(3px) brightness(0.7);
    z-index: -1;
    border: inset 5px var(--token-border-color, #ffffff44);
}
[data-notatoken].token>.base{
    border-width: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
}

.token>.base,
.token>.base ~ .hpvisualbar{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 5% 0 0 5%;
}



.VTTToken .base{
    filter: drop-shadow(0.5px 0px 1px #000b);
}
.token>.base.large-or-smaller-base{
    border-width: max(2px, calc(2px / var(--window-zoom)));
}

.token[data-notatoken]>.base.large-or-smaller-base{
    border-width: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
}

.base.circle:before{
    content: "";
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(transparent 45% 67%, #00000088 74% 94%);
    border-radius: 50%;
    z-index: 1;
    position: absolute;
    display: block;
}
.base.large-or-smaller-base.circle:before{
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
}
[data-notatoken] .base.circle:before{
    top: calc(-5px / var(--scene-scale));
    left: calc(-5px / var(--scene-scale));
    right: calc(-5px / var(--scene-scale));
    bottom: calc(-5px / var(--scene-scale));
}
[data-notatoken] .base.large-or-smaller-base.circle:before{
    top: calc(-5px / var(--scene-scale));
    left: calc(-5px / var(--scene-scale));
    right: calc(-5px / var(--scene-scale));
    bottom: calc(-5px / var(--scene-scale));
}

.token>.token-image{
    --aura-width: max(2px, calc(3px / var(--window-zoom)));
    --zoom-border-width: max(calc(2px / var(--scene-scale)), calc(calc(var(--token-border-width) * 1.5) / var(--window-zoom)));
    border: var(--zoom-border-width, 4px) solid var(--token-border-color, #ffffff44);
    box-shadow: 0 0 var(--aura-width) var(--aura-width) var(--token-hp-aura-color), 0 0 var(--aura-width) var(--aura-width) var(--token-temp-hp);
}
button.dropboxChooser{
    padding-left: 18px !important;
    position: relative;
}

button.dropboxChooser.token-row-button{
    position: relative;
    padding-left: 0px !important;
    display:inline-block;
}

button.dropboxChooser.token-row-button span.dropin-btn-status{
    background-size: 100px 20px;
    left: 1px;
    width: 26px;
    position: relative;
    display: block;
    height: 20px;
}

.sidebar-list-item-row-item button.dropboxChooser.token-row-button span.dropin-btn-status{
    background-image: none;
    -webkit-mask-image: url(https://www.dropbox.com/static/metaserver/static/images/widgets/dbx-saver-status-2x.png);
    -webkit-mask-size: 100px 20px;
    -webkit-mask-position: 50px 0px;
    mask-image: url(https://www.dropbox.com/static/metaserver/static/images/widgets/dbx-saver-status-2x.png);
    mask-size: 100px 20px;
    mask-position: 50px 0px;
    background: #000;
}
button span.dropin-btn-status{
    background-image: url(https://www.dropbox.com/static/metaserver/static/images/widgets/dbx-saver-status-2x.png);
    background-size: 60px 14px;
    -webkit-background-size: 60px 14px;
    width: 15px;
    position: absolute;
    height: 15px;
    left: 2px;
}

button.launchPicker{
    padding-left: 18px !important;
    position: relative;
}

button.launchPicker.token-row-button{
    position: relative;
    padding-left: 0px !important;
    display:inline-block;
}

button.launchPicker.token-row-button span.onedrive-btn-status{
    left: 1px;
    width: 26px;
    position: relative;
    display: block;
    height: 20px;
}
button span.onedrive-btn-status{
    background-image: var(--onedrive-svg);
    -webkit-background-position: 0px 2px;
    background-position: 0px 2px;
    width: 15px;
    position: absolute;
    height: 15px;
    left: 2px;
    background-repeat: no-repeat;
}
.sidebar-list-item-row-item button.launchPicker.token-row-button span.onedrive-btn-status{
    background-image: none;
    -webkit-mask-image: var(--onedrive-mask);
    -webkit-mask-size: 25px 17px;
    -webkit-mask-position: 0px 2px;
    mask-image: var(--onedrive-mask);
    mask-size: 25px 17px;
    mask-repeat: no-repeat;
    mask-position: 0px 2px;
    background: #000;
}
#sounds-panel button.dropboxChooser, #sounds-panel button.launchPicker {
    width: 23px;
    padding: 0px !important;
    height: 21px;
}
#sounds-panel button.dropboxChooser span, #sounds-panel button.launchPicker span{
    top: 2px;
}

#sounds-panel .sidebar-panel-body>button{
    vertical-align:top;
}

.addTokenMenu {
    display: flex;
    width: 34px;
    overflow: hidden;
    transition: 250ms width 0ms;
    flex-direction:row-reverse;

}
.addTokenMenu:hover,
.hover-add-button:hover~.addTokenMenu {
    width: 102px;
}

.addTokenMenu button {
    display: inline-block;
    height: 100%;
    margin: 0px 2px;
}

.token>.token-image{
    min-height: var(--min-height) !important;
    min-width: var(--min-width) !important;
    max-height: var(--max-height) !important;
    max-width: var(--max-width) !important;
}
.token[data-notatoken]>.token-image{
    min-height: calc(var(--min-height) / var(--scene-scale)) !important;
    min-width: calc(var(--min-width) / var(--scene-scale)) !important;
    max-height: calc(var(--max-height) / var(--scene-scale)) !important;
    max-width: calc(var(--max-width) / var(--scene-scale)) !important;
}
#token_map_items .token[data-notatoken]>.token-image{
    --aura-width: max(1px, calc(calc(4px / var(--window-zoom)) / var(--scene-scale)));
    --zoom-border-width: max(1px, calc(calc(var(--token-border-width) * 1.5) / var(--window-zoom)));
    border: var(--zoom-border-width, 1px) solid var(--token-border-color, #ffffff44);
    box-shadow: 0 0 var(--aura-width) var(--aura-width) var(--token-hp-aura-color), 0 0 var(--aura-width) var(--aura-width) var(--token-temp-hp);
}
#VTT .token>.base~.token-image,
#token-configuration-modal .token>.base~.token-image
{
    filter: none;
    border: 0px;
    box-shadow: none;
}

#VTT .token.isAoe .token-image,
#token-configuration-modal .token.isAoe .token-image{
  border: 0px;
}

#token_map_items .token:before {
    display: none;
}

.base.circle,
.base.circle:after{
    border-radius: 50%;
}

#VTT .token>.token-image.freeform,
#token-configuration-modal .token>.token-image.freeform{
    border: 0px;
    box-shadow: none;
    transition: max-height 0.2s linear, max-width 0.2s linear, min-height 0.2s linear, min-width 0.2s linear;
    min-height: 0px;
    min-width: 0px;
    --aura-width: max(1px, calc(0.5px / var(--window-zoom)));
    filter:  drop-shadow(#ffffff22 0px 0px var(--aura-width)) drop-shadow(var(--token-border-color) 0px 0px var(--aura-width)) drop-shadow(var(--token-border-color) 0px 0px 0px) drop-shadow(var(--token-hp-aura-color) 0px 0px var(--aura-width)) drop-shadow(var(--token-hp-aura-color) 0px 0px 0px) drop-shadow(var(--token-temp-hp) 0px 0px var(--aura-width)) drop-shadow(var(--token-temp-hp) 0px 0px 0px);
}
.token[data-notatoken]>.token-image.freeform {
    --aura-width: max(calc(1px / var(--scene-scale)), calc(calc(0.5px / var(--scene-scale)) / var(--window-zoom)));
}
.token>.token-image:not(.preserve-aspect-ratio) {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: top;
} 

.base:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 30%;
    opacity: 1;
    --aura-width: max(5px, calc(5px / var(--window-zoom)));
    box-shadow: inset 0 0 var(--aura-width) var(--aura-width) var(--token-hp-aura-color), inset 0 0 var(--aura-width) var(--aura-width) var(--token-temp-hp);
}
[data-notatoken] .base:after{
    --aura-width: max(calc(5px / var(--scene-scale)), calc(calc(5px / var(--scene-scale)) / var(--window-zoom)));
}

.base.large-or-smaller-base:after{
    --aura-width: max(2px, calc(2px / var(--window-zoom)));
    box-shadow: inset 0 0 var(--aura-width) var(--aura-width) var(--token-hp-aura-color), inset 0 0 var(--aura-width) var(--aura-width) var(--token-temp-hp);
}

[data-notatoken] .base.large-or-smaller-base:after{
    --aura-width: max(calc(2px / var(--scene-scale)), calc(calc(2px / var(--window-zoom)) / var(--scene-scale)));
}


.VTTToken.token>.base.circle{
    border-style: solid;
}
.base.border-color-base{
    background: var(--token-border-color, #ffffff44);
    backdrop-filter: blur(2px) brightness(0.9) opacity(0.8);
}
.base.grass-base:after,
.token>.base.grass-base{
    background-image: url(https://opengameart.org/sites/default/files/ground_grass_gen_07.png);
}
.base.tile-base:after,
.token>.base.tile-base{
    background-image: url(https://opengameart.org/sites/default/files/textureStone_0.png);
}
.base.sand-base:after,
.token>.base.sand-base{
    background-image: url(https://opengameart.org/sites/default/files/dirt4.png);
}
.base.rock-base:after,
.token>.base.rock-base{
    background-image: url(https://opengameart.org/sites/default/files/Rockface%20red_0.png);
}
.base.water-base:after,
.token>.base.water-base{
    background-image: url(https://opengameart.org/sites/default/files/Untitled-3_1.jpg);
}
.token.hasbase.ui-draggable-dragging .base,
.token.hasbase.pause_click .base{
    filter: drop-shadow(3px 3px 2px #000000dd)
}
.token.hasbase.ui-draggable-dragging .base.large-or-smaller-base,
.token.hasbase.pause_click .base.large-or-smaller-base{
    filter: drop-shadow(1px 1px 2px #000000dd)
}
.token.hasbase.ui-draggable-dragging,
.token.hasbase.pause_click{
    transform: translate(-1px, -1px)
}

#tokenWrapper__tokenStyleSelect,
#tokenWrapper__tokenBaseStyleSelect{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#tokenWrapper__tokenBaseStyleSelect{
    transition: height 1500ms linear 0s;
    overflow: hidden;
}

.image-size-wrapper,
.border-color-wrapper {
    display: block !important;
}
.border-color-wrapper,
.token-config-aura-wrapper{
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
.image-size-title,
.border-color-title {
    display:  inline-block !important;
}
#aoe_feet_height,
.image-scale-input-number {
    float: right;
    padding-left: 5px !important;
    width: 48px !important;
    height: 24px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
}
.sp-replacer.sp-light{
    float:  right;
    width: 48px;
    height: 24px;
    border-radius: 5px;
    padding: 0;
}

.lightRowLabel{
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
    margin: 4px 6px 2px 2px;
    display: inline-block;
}

.lightRow{
    width:100%; 
    display:flex;
}
.lightRowInput{
    flex-grow:1;
}
.lightRow .sp-replacer.sp-light{
    float:left;
}
.image-scale-input-range {
    width: 100%;
}
.flyout-from-menu-item,
#tokenOptionsContainer>button,
#notes-flyout button,
#adjustments-flyout>div>button {
    line-height: 24px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 2px;
}

#tokenOptionsContainer>button,
#notes-flyout button,
#adjustments-flyout>div>button  {
    background: none;
    font-size: 10px;
    display: flex;
    flex-direction: row;
    width: 100%;    
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 26px;
    height: 24px;
    color: #738694;
    font-family: Roboto,Open Sans,Helvetica,sans-serif;
}
#tokenOptionsContainer .menu-input {
    width: 50px;
    text-align: center;
    margin: 5px;
}
.menu-input-label{
    text-align: center;
    background: none;
    font-size: 10px;   
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 24px;
    color: #738694;
    font-family: Roboto,Open Sans,Helvetica,sans-serif;
}

#menuStatDiv {
    width: 100%; 
    padding: 5px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-bottom: 15px;
}


#tokenOptionsContainer .material-icons{
    color: #738694;
}
#tokenOptionsContainer>button:hover .material-icons {
    color: #ddd;
}
#tokenOptionsContainer>button:hover,
#notes-flyout button:hover,
#adjustments-flyout>div>button:hover   {
    background-color: rgba(41, 128, 185);
    color: #ddd;
}
#tokenOptionsContainer>button.deleteMenuButton:hover{
    background-color: #D33;
}


#tokenOptionsContainer>button.deleteMenuButton:before{
    color: #738694 !important;;
}
#tokenOptionsContainer>button.deleteMenuButton:hover:before{
    filter: drop-shadow(0px 0px 2px #000d);
    color: #ddd !important;
}
#tokenOptionsContainer>button.deleteMenuButton {
    border-top: 1px solid #ddd;
    margin-top: 5px;
}
#tokenOptionsContainer button:before{
    width: 20px;
    height: 20px;
}

#adjustments-flyout button#changeTokenImage:before{
   content: "\e413"; 
}


.invalidExpression:before{
    content: attr(data-content);
    display: block;
    position: relative;
    top: 0;
}

#conditions-flyout li{
    font-size: 14px;
}
#conditions-flyout li.icon-close-red:before{
    font-size: 24px;
    margin: 0px;
    left: -5px;
}

.flyout-from-menu-item:hover {
    background-color: rgba(41, 128, 185);
}

.flyout-from-menu-item:hover > .token-image-modal-footer-title {
    color: #ddd;
}

.flyout-from-menu-item:after {
    position: relative;
    content: '';
    right: 5px;
    top: 7px;
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; 
    border-left: 5px solid #738694;
}
.flyout-from-menu-item:hover:after {
    border-left: 5px solid #ddd;
}

.context-menu-flyout{
    visibility: hidden;
    transition: visibility 0s;
    transition-delay: 1000ms;
}

.flyout-from-menu-item:hover ~ .context-menu-flyout,
#tokenOptionsPopup.touch .context-menu-flyout,
.context-menu-flyout:hover,
.context-menu-flyout:focus-within {
    visibility: visible;
    transition-delay: 0ms;
}


.hponhover {
    visibility:  hidden !important;
    transition:  0.2s ease-in-out 0.5s;
}
.token:hover .hponhover:not([style*='visibility: hidden']),
.token:focus-within .hponhover:not([style*='visibility: hidden']),
.tokenselected .hponhover:not([style*='visibility: hidden']) {
    visibility:  visible !important;
    transition:  0.05s ease-in-out 0.3s
}


#prewiz, 
#wizard_popup{
    z-index: 58000;
}

#character-tools-target{
    z-index: unset !important; /*important to override dndbeyond's index.scss*/
}


.dm_scenes_button.selected,
.player_scenes_button.selected,
.dm_scenes_button.selected:hover,
.player_scenes_button.selected:hover{
    background: #ff7f7f;
}

.scene .dm_scenes_button,
.scene .player_scenes_button {
    transition: none;
}

#tokens {
    z-index: 40;
}
#tokenOptionsPopup>#tokenOptionsContainer>div[data-option-name='lockRestrictDrop'] select{
    background: none !important;
    max-width:unset;
    min-width: unset;
    width:100%;
    padding-left:20px;
    font-family: Roboto, Open Sans, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 0px 5px 22px;
    font-size:10px;
    color: #738694;
    margin-top:2px;
    height: 24px;
}
#tokenOptionsPopup>#tokenOptionsContainer>div[data-option-name='lockRestrictDrop'] .door-lock {
    position:absolute;
    left:-1px;
    padding:3px 0px;
    font-size:16px;  
}
.isAoe .hpvisualbar{
    display: none !important;
}
.ct-character-sheet__inner,
.ct-sidebar__inner *,
.moveableWindow *,
.sidebar *,
.sidebar-flyout,
.note,
.sources-import-main-container *,
.sidebar-modal{
    overscroll-behavior: contain;
}
.VTTToken:not(.freeform) .hpvisualbar:before{
    display: var(--token-hpbar-display);
    transition: none;
    position: absolute;
    visibility: visible;
    z-index: -1;
    filter: blur(1px);
    content:'';
    --mask-size:calc(98% - 2px / var(--window-zoom));
}
.VTTToken[data-notatoken]:not(.freeform) .hpvisualbar:before{
    --mask-size:calc(98% - calc(2px / var(--scene-scale)) / var(--window-zoom));
}

.VTTToken:not(.freeform):not(.hasbase) .hpvisualbar:before{
    --mask-size:calc(98% - 7px);
    transform: scale(var(--token-scale)) rotate(var(--token-rotation));
    height: calc(100% + 5px / min(1, var(--window-zoom)));
    width: calc(100% + 5px / min(1, var(--window-zoom)));
    top: min(-2.5px, calc(-2.5px / var(--window-zoom)));
    left: min(-2.5px, calc(-2.5px / var(--window-zoom)));
    right: 0px;
    background-color: #000;
    background-image: conic-gradient(transparent calc(100% - var(--hp-percentage)), var(--token-hpbar-aura-color) 0%, var(--token-hpbar-aura-color) 100%) !important;
    clip-path: circle();
    -webkit-mask: radial-gradient(45% 45% at center,transparent var(--mask-size),#fff var(--mask-size) 105%);
    mask:radial-gradient(45% 45% at center,transparent var(--mask-size),#fff var(--mask-size) 105%);
}

.VTTToken[data-notatoken]:not(.freeform):not(.hasbase) .hpvisualbar:before{
    --mask-size: calc(100% - 7px / min(1, var(--scene-scale)));
    height: calc(100% + 7px / min(1, var(--scene-scale)));
    width: calc(100% + 7px / min(1, var(--scene-scale)));
    top: min(-3px, calc(-3px / min(1, var(--scene-scale))));
    left: min(-3px, calc(-3px / min(1, var(--scene-scale))));
}

.VTTToken.square:not(.freeform):not(.hasbase) .hpvisualbar:before {
    -webkit-mask: linear-gradient(to left, #0000 var(--mask-size), #000 var(--mask-size) 95%), linear-gradient(to top, #0000 var(--mask-size), #000 var(--mask-size) 95%), linear-gradient(to bottom, #0000 var(--mask-size), #000 var(--mask-size) 95%), linear-gradient(to right, #0000 var(--mask-size), #000 var(--mask-size) 95%);
    clip-path:none;
}

.VTTToken .base ~ .hpvisualbar:before {
    background-size: 100%;
    background-color: transparent;
    background-image: conic-gradient(transparent calc(100% - var(--hp-percentage)), var(--token-hpbar-aura-color) 0%, var(--token-hpbar-aura-color) 100%);
    clip-path: circle();
    -webkit-mask: radial-gradient(45% 45% at center,transparent var(--mask-size),#fff 105%);
    mask:radial-gradient(45% 45% at center,transparent var(--mask-size),#fff 105%);
    box-shadow:none;
    z-index: -1;
}

.VTTToken .base.square ~ .hpvisualbar:before {
    --mask-size: calc(95% - 2px / var(--window-zoom));
    -webkit-mask: linear-gradient(to left, #0000 var(--mask-size), #000 100%), linear-gradient(to top, #0000 var(--mask-size), #000 100%), linear-gradient(to bottom, #0000 var(--mask-size), #000 100%), linear-gradient(to right, #0000 var(--mask-size), #000 100%);
    clip-path: none;
}

.VTTToken[data-notatoken] .base.square ~ .hpvisualbar:before{
    --mask-size:calc(95% - calc(2px / var(--scene-scale)) / var(--window-zoom));
}
.VTTToken .base ~ .hpvisualbar:before {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
}
.VTTToken[data-notatoken] .base ~ .hpvisualbar:before {
    top: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
    left: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
    right: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
    bottom: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
}
.VTTToken .base.large-or-smaller-base ~ .hpvisualbar:before {
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
}
.VTTToken[data-notatoken] .base.large-or-smaller-base ~ .hpvisualbar:before {
    top: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
    left: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
    right: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
    bottom: max(1px, calc(calc(1px / var(--window-zoom)) / 3));
}
.hpvisualbar{
    pointer-events: none;
}

.stream-dice-button {
    display: flex;
    box-shadow: 1px 1px 1px 1px #0003, 1px 2px 0px -2px #0003;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 2px;
    text-align: right;
    position: absolute;
    width: 88px;
    top: 11px;
    left: 250px;
    height: fit-content;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    -webkit-box-align: center;
    align-items: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(111, 116, 120);
    padding: 0px 2px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: #9c2727;
    opacity: 0.8;
}

[class*="glc-game-log"] .crit-success div[class*="TotalContainer-Flex"] span,
[class*="glc-game-log"] .crit-success div[class*="TotalContainer-Flex"] span,
[class*="glc-game-log"] .crit-success div[class*="TotalContainer-Flex"] .aboveDiceTotal,
[class*="glc-game-log"] .crit-success div[class*='DiceMessage_TotalContainer'] span,
[class*="glc-game-log"] .crit-success div[class*='DiceMessage_TotalContainer'] span,
[class*="glc-game-log"] .crit-success div[class*='DiceMessage_TotalContainer'] .aboveDiceTotal{
    color:#0a0 !important;
}
[class*="glc-game-log"] .crit-fail div[class*="TotalContainer-Flex"] span,
[class*="glc-game-log"] .crit-fail div[class*="TotalContainer-Flex"] span,
[class*="glc-game-log"] .crit-fail div[class*="TotalContainer-Flex"] .aboveDiceTotal,
[class*="glc-game-log"] .crit-fail div[class*='DiceMessage_TotalContainer'] span,
[class*="glc-game-log"] .crit-fail div[class*='DiceMessage_TotalContainer'] span,
[class*="glc-game-log"] .crit-fail div[class*='DiceMessage_TotalContainer'] .aboveDiceTotal{
    color:#a00 !important;
}
[class*="glc-game-log"] .crit-mixed div[class*="TotalContainer-Flex"] span,
[class*="glc-game-log"] .crit-mixed div[class*="TotalContainer-Flex"] span,
[class*="glc-game-log"] .crit-mixed div[class*="TotalContainer-Flex"] .aboveDiceTotal,
[class*="glc-game-log"] .crit-mixed div[class*='DiceMessage_TotalContainer'] span,
[class*="glc-game-log"] .crit-mixed div[class*='DiceMessage_TotalContainer'] span,
[class*="glc-game-log"] .crit-mixed div[class*='DiceMessage_TotalContainer'] .aboveDiceTotal{
    color:#4768ff !important;
}

[class*="glc-game-log"] div[class*="TotalContainer-Flex"] .custom-spell-save-text span,
[class*="glc-game-log"] div[class*='DiceMessage_TotalContainer'] .custom-spell-save-text span {
    color: #716f6f !important;
    font-size: 10px;
    font-weight: bold;
    line-height: 10px;
    text-wrap: nowrap;
}

[class*="glc-game-log"] div[class*='DiceMessage_TotalContainer'] .custom-spell-save-text {
    line-height: 13px;
}

[class*="glc-game-log"] div[class*='DiceMessage_TotalContainer']>div[class*='DiceMessage_Total'] {
    position: relative;
    align-self: stretch;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
}

.glc-game-log>div>div[class*="-Title"] {
    margin-bottom: 7px;
}
.glc-game-log .ct-sidebar__heading span:not([class*='uncommon'], [class*='rare'], [class*='very-rare'], [class*='legendary'], [class*='artifact']),
.glc-game-log .ddbc-property-list span{
    color: rgb(92, 112, 128);
}
.glc-game-log .ddbc-pencil-svg {
    display: none;
}
.glc-game-log .ddbc-concentration-icon, 
.glc-game-log .ddbc-ritual-icon{
    position: absolute;
    width: 24px;
    height:  24px;
}
.stream-dice-button:hover {
    cursor: pointer;
    background: rgb(245, 248, 250);
    border: 1px solid rgb(206, 217, 224);
}

.stream-dice-button:hover:after {
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    background: rgb(245, 248, 250);
    border: 1px solid rgb(206, 217, 224);
    visibility: visible;
}

.stream-dice-button:active {
  background-color: rgb(245, 248, 250);
  box-shadow: none;
  transform: translate(1px, 2px);
}

.stream-dice-button.enabled{
    color: rgb(111, 116, 120);
    box-shadow: 1px 1px 1px -1px #0003, 1px 2px 0px -2px #0003;
}
.stream-dice-button:hover:after { 
    opacity:1;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 500ms, background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;  
}

.stream-dice-button:after{
    content: 'Click to join the dice stream';
    position:fixed;
    width: fit-content;
    height: fit-content;
    background: rgb(245, 248, 250);
    border: 1px solid rgb(206, 217, 224);
    top:80px;
    right:0px;
    z-index:80000;
    opacity:0;
    color: rgb(0 0 0);
    visibility: hidden;
    pointer-events: none;
}

.stream-dice-button.enabled:hover:after {
    opacity:1;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 500ms, background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;   
}

.stream-dice-button.enabled:after {
    content: 'Click to leave the dice stream';
}
.stream-dice-button:active:after{
    display:none;
}
.icon-concentration-reminder:before,
.icon-reaction-used:before,
.icon-inspiration:before,
.icon-flying:before,
.icon-flamed:before,
.icon-rage:before,
.icon-blessed:before,
.icon-baned:before,
.icon-bloodied:before,
.icon-advantage:before,
.icon-disadvantage:before,
.icon-bardic-inspiration:before,
.icon-hasted:before,
.context-menu-icon-concentration-reminder:before,
.context-menu-icon-inspiration:before,
.context-menu-icon-flying:before,
.context-menu-icon-flamed:before,
.context-menu-icon-rage:before,
.context-menu-icon-blessed:before,
.context-menu-icon-baned:before,
.context-menu-icon-bloodied:before,
.context-menu-icon-advantage:before,
.context-menu-icon-disadvantage:before,
.context-menu-icon-bardic-inspiration:before,
.context-menu-icon-hasted:before {
    background-position: center;
}

.markers-icon>input[type='text']{
    position: relative;
    max-width: 68%;
}

.custom-condition-text{
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    fill: #fff;
    stroke: #000;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    text-shadow: 1px 1px 2px #000;
    pointer-events:none;
}
.custom-condition.text{
    pointer-events:auto;
}


.duration-badge {
    position: absolute;
    width: max(8px, 50%);
    height: max(8px, 50%);
    font-weight: bold;
    border: 1px solid #959595;
    top: -5%;
    right: -5%;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1c1c;
    container-type: inline-size;
    align-content: center;
    flex-wrap: wrap;
}
.duration-badge.expired span{
    color: #F00;
}
.duration-badge span{
    font-size: 70cqw;
}

.button-loading::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 10px;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

.token img[src*='https://www.googleapis.com/drive/v3/files/1_QnkvmGct2dzeu-pBO9ofT-828pWvCcn?alt=media&key=AIzaSyBcA_C2gXjTueKJY2iPbQbDvkZWrTzvs5I'] {
    background:#ffffff80;
    border-radius:20px !important;
    border: var(--token-border-width) solid #000 !important;
}

.video-listing{
    width: 38px;
}
.body-rpgcampaign .ddb-campaigns-invite-primary {
    filter: blur(6px);
    transition: 0ms filter 200ms;
}
.ct-character-sheet__inner[style*='width: 570px'] #avtt-character-join-button{
  display:none;
}

.body-rpgcampaign .ddb-campaigns-invite-primary:active {
    filter: none;
    transition-delay: 0;
}

.sidebar-panel-body .sp-container,
.sidebar-panel-footer .sp-container,
.sidebar-flyout .sp-container {
    position: fixed !important;
}
.sp-palette-container {
    min-width: 176px;
}
#combat_area tr.CTToken:before{
    content:  '???';
    font-size: 12px;
    position: absolute;
    left: 42px;
    width: calc(100% - 140px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #4443;
}
#combat_area tr[data-name].CTToken:before{
    content: attr(data-name);
    color: #444d;
}
body.body-rpgcharacter-sheet #combat_area tr.CTToken:before{
    width: calc(100% - 80px);
}

.hidden-sidebar-item{
    display: none !important;
}

.hidden-sidebar-item.temporary-visible{
    display: block !important;
}

.reveal-hidden-button.clicked{
    background: #F66;
}

.text-option{
    width:20px;
    height:20px;
    float:left;
}

#draw_menu .sp-replacer,
#text_menu .sp-replacer,
#vision_menu .sp-replacer{
    margin: 3px 1px;
    width: 98%;
}
#vision_menu svg.settings-gear {
    scale: 1.3;
    margin-left: 2px;
}
#vision_menu #bucket_menu {
    display: none;
    position: fixed;
    width: 155px;
    padding: 2px;
    border-radius: 5px;
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}
#vision_menu #paint-bucket.button-enabled ~ #bucket_menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
#vision_menu #bucket_menu>div{
    display: inline-block;
    width: 35%;
}
#vision_menu #bucket_menu>div.menu-subtitle{
    display:inline-block;
    width: 65%;
}

#clearExplored Data{
    width:100%;
    padding:8px;
    margin:10px 0px 30px 0px;
}

div.ddbc-tab-options--layout-pill button{
    background-image: none;
    height: auto;
    box-shadow: none;
    transition: none;
    border: 0px;
}
div.ddbc-tab-options--layout-pill>button{
    width: calc(100% - 4px);
}

#VTTWRAPPER ~ div.ddbc-tab-options--layout-pill>button,
#combat_tracker div.ddbc-tab-options--layout-pill>button{
    width: fit-content !important;
}

.chat-error-shake {
    position: relative;
    animation: shake .1s linear;
    animation-iteration-count: 1;
}
.sidebar__pane-content .audio-error{
    animation: audio-shake .1s linear;
    position:relative;
    animation-iteration-count: 5;
    background: #d44 !important;
}
.sidebar__pane-content .audio-error:hover:before {
    content: 'Failed to load track - double check link is valid';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -24px;
    width: 349px;
    color: #ddd;
    font-size: 16px;
    background: #950000;
    border-radius: 5px;
    opacity: 100%;
    border: 2px solid #000;
}
@keyframes shake {
    0% { left: -1px; }
    100% { right: -1px; }
}
@keyframes audio-shake {
    0% { left: -1px; }
    100% { right: -1px; }
}
.url-validator {
    position: absolute;
    top: -2px;
    left: -24px;
}

.url-validator.invalid {
    color: red;
}

.url-validator.unsure {
    color: rgb(255 82 0);
}

.url-validator.valid {
    color: green;
}

.url-validator.loading {
    color:blue;
    animation: spin 4s infinite linear;
    background: none;
    width: 24px;
    height: 24px;
}

.url-validator.loading.audio {
    animation: spin 4s infinite linear;
    background: none;
    position: absolute;
    font-size: 22px;
    width: 22px;
    height: 22px;
    left: 1px;
    top: 1px;
    transform-origin: center center;
}


.url-validator.loading:before{
    display:none;
}
#projector_toggle{
    display: none;
}
#projector_toggle.enabled{
    display: block;
}


@keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

.body-rpgcharacterbuilder #black_layer,
.body-rpgcharacterbuilder #VTTWRAPPER,
.body-rpgcharacterbuilder .site-bar,
.body-rpgcharacterbuilder #combat_button,
.body-rpgcharacterbuilder #VTTWRAPPER ~ .ddbc-tab-options--layout-pill{
    display: none !important;
}
body:not(.body-rpgcampaign) .site-bar{
    display:none !important;
}

[id^="streamer-"].hidden {
    display: none;
}
.aura-element-container-clip{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    mix-blend-mode: lighten;
}


[data-darkness]{
    transform: rotate(var(--token-rotation));
    z-index:16 !important;
    opacity: 1 !important;
}
[data-darkness] .token-image{
    transform: none !important;
}

[data-darkness] .aoe-style-darkness,
[data-darkness] .aoe-border-cone{
    opacity: 1 !important;
    background: #000;
    border:none;
} 

#tokens .underDarkness .token-image,
#tokens .underDarkness .base,
#tokens .underDarkness .hpvisualbar{
    opacity: 0 !important;
}

.audio-token .audio-radius{
    position: absolute;
    border-radius: 50%;
    z-index: 19;
    pointer-events: none;
    display: none;
}
.audio-token.tokenselected .audio-radius{
    display: block;
}
#map_items{
    width:100%;
    height:100%;
    background: #000;
}
[data-notatoken]{
    border:none;
}
[data-notatoken]:not(.isAoe)>.token-image{
    width: var(--token-width) !important;
    height: var(--token-width) !important;
}



body.preventSelectDefinitelyNot .token.lockedToken,
body.preventSelectDefinitelyNot .token.lockedToken>.token-image,
body.preventSelectDefinitelyNot .token.lockedToken>.token-image,
body.preventSelectDefinitelyNot .token.lockedToken>.token-image>[data-img]{
    pointer-events: none !important;
}
body.preventSelectDefinitelyNot .token.declutterToken[style*='opacity: 0.5']{
    display: none !important;
}
.door-button #note{
    position: absolute;
    right: -4px;
    width: 10px;
    height: 10px;
    top: -5px;
    border-radius: 50%;
    border: 1px solid #000;
    overflow: hidden;
}
.door-button #note>img{
    background: #FF0;
    position:absolute;
    width:100%;
    height:100%;
    
}


.aura-element.islight,
.aura-element[id*='vision_']{
    z-index: 9;
    mix-blend-mode: lighten;
}

.aura-element-container-clip.vision.devilsight{
    z-index: 20 !important;
}
#map_items{
    mix-blend-mode: multiply;

}
#darkness_layer{
    z-index: 7;
    background: #fff;
    filter: brightness(var(--darkness-filter));

}
#light_container{
    mix-blend-mode:lighten;
    z-index: 15;
    opacity: 1;
}


#text_div{
    pointer-events:none;
}

#text_div svg text{
    pointer-events:all;
    cursor: move;
}

#scene_map_container{
    overflow: clip;
    transition: opacity 1.5s linear 0s;
    opacity:1;
    background:#000;
}
#scene_map_container.map-loading{
    opacity: 0;
    transition: none;
}

#peer_overlay {
    pointer-events: none;
}

#scene_map_container{
    transform: scale(var(--scene-scale));
    transform-origin: top left;
}

#scene_map_container.preview{
    pointer-events: none;
    width:50%;
}

.player_map_preview{
    width:45%;
    margin:0px 20px 20px 20px;
    cursor: pointer;
}
.player_map_preview.selected{
    box-shadow: 0px 0px 0px 3px #f00;
}



.aurafx-flicker{
    mix-blend-mode: plus-lighter;
    animation: aurafx-flicker 4s infinite alternate ease-in-out
}

[class*='MessageContainer-Flex'] .ct-creature-pane__full-image img{
    max-width:100%
}
.reduceMovement [data-animation],
.reduceMovement [data-animation]:before,
.reduceMovement [data-animation]:after,
.reduceMovement [data-animation] .islight,
.reduceMovement [data-animation] .islight:before,
.reduceMovement [data-animation] .islight:after{
    animation: none !important;
}

div.note[id^="ui-id"] {
    width: 100% !important;
    padding: 0px !important;
    max-height: calc(100% - 33px) !important;

}

.tooltip-body-description-text.note-text img{
    max-width: 100%;
    height: auto;
}
.glc-game-log .note-text::-webkit-scrollbar{
    width: 3px;
}
.glc-game-log .note-text::-webkit-scrollbar-track {
    background: transparent;
}
.glc-game-log .note-text::-webkit-scrollbar-thumb{
    background-color: #232d3166;
    border-radius: 6px;
    border: none;
}
.glc-game-log .tooltip-body-description-text.note-text > * {
    max-width: calc(100% - 2px);
}

.glc-game-log .note-text{
    overflow:overlay;
}

div.note[id^="ui-id"] .mce-listbox button{
    padding: 0px;
}

div.note[id^="ui-id"] .mce-btn button {
    padding: 1px 4px;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    line-height: 18px;
}
.ui-dialog .ui-dialog-titlebar{
    height: 32px;
}
.ui-widget.ui-widget-content {
    max-height: calc(100vh - 20px);
    overflow: hidden;
}

.scenes-panel-add-buttons-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    padding-right: 6px;
    padding-left: 4px;
    justify-content: space-between;
    width: 100%;
}

.folder.ui-droppable-hover {
    border: 2px solid black;
    background-color: white;
}
.reorder-button {
    background-color: #f2f6f8;
}
.reorder-button.active {
    background-color: #fff;
}


#journal-panel .reorder-button{
    display: inline;
}
#ddb-source-journal-import{
    display:inline;
    float:right;
    width:175px;
}
.body-rpgcharacter-sheet #VTT.paused *{
    pointer-events: none !important;
}

#pause_players.paused #player-pause-svg,
#pause_players #player-play-svg{
    display: none;
}
#pause_players #player-pause-svg,
#pause_players.paused #player-play-svg{
    display: block;
}

#pause_players svg{
    padding:0;
}

.token-row-drag-handle {
    display: block;
    width: 30px;
    height: 30px;
    padding: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid #d8e1e8;
    background-color: #f2f6f8;
    border-left: 1px solid #d8e1e8;
    margin: -4px -4px;
    cursor: move;
    min-width: 30px;

    position: relative;
}

#scenes-panel .sidebar-list-item-row.scene-item.ui-draggable,
.sidebar-list-item-row.ui-draggable {
    cursor: move;
}

.sidebar-list-item-row.ui-draggable-dragging {
    z-index: 100000;
}


.player-card.peerConnected .player-card-content::before,
.sidebar-list-item-row.player-row.peerConnected::before {
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: var(--player-border-color, gray);;
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    border: 1px solid #f2f2f2; /* white border to help it stand out against dark backgrounds */
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* black shadow border to help it stand out against light backgrounds */
}
.player-card.peerConnected .player-card-content:before {
    top: unset;
    left: 12px;
}
.sidebar-panel-footer .token-config-aura-wrapper h3 ~ .token-image-modal-footer-select-wrapper .token-image-modal-footer-title{
    font-size:9px;
    min-width:50px;
    margin-top:0px
    
}
.sidebar-panel-footer .token-config-aura-wrapper h3{
    font-size:12px;
    min-width:65px;
}
.peerCursorPosition {
    height: 16px;
    width: 16px;
    position: absolute;
    background: rgb(182, 6, 14); /* default DDB color */
    z-index: 19; /* fog is at z-index 20. Let's keep it below that so we don't show the DM messing around in the dark */
    border-radius: 8px;
    opacity: 0.7;
    border: 1px solid #f2f2f2; /* white border to help it stand out against dark backgrounds */
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* black shadow border to help it stand out against light backgrounds */
}


.styled-number-input,
#manual_grid_data input {
    height: 15px;
    font-size: 13px;
    font-weight: bold;
    font-family: Roboto,Open Sans,Helvetica,sans-serif;
    text-decoration: underline;
    background: none;
    border-width: 0;
    text-align: right;
    width: 30px;
    border-radius: 2px;
}

.styled-number-input:focus,
#manual_grid_data input:focus {
    text-decoration: none;
    border-width: 1px;
}

#manual_grid_data input,
input[name='darkness_filter_number'],
input[name='gridStrokeNumberInput']{
     text-decoration: none;
     font-weight:normal;
     border: 1px solid #ddd;
}
input[name='upsq'] {
    padding-right: 17px;
}

.ct-decorate-pane__shop .ddbc-collapsible--opened .ddbc-collapsible__header,
.ct-container-manager .ddbc-collapsible--opened > .ddbc-collapsible__header,
.ct-equipment-manage-pane .ddbc-collapsible--opened:not(.ddbc-collapsible--minimal) > .ddbc-collapsible__header {
    top: 0px;
    z-index: 9;
}
.ct-decorate-pane__current-selections {
    position: relative;
}

/*Start note ddb styling*/
button.journal-view-button.journal-button {
    top: 5px;
    right: 27px;
    padding: 2px;
}
:root .note-text{
    --theme-page-fg-color: #242527;
}
/* END - Default text color */
* .note-text{
    font-family: Roboto, Helvetica, sans-serif;
}

.note-text .Basic-Text-Frame {
    clear: both;
    border: 1px solid #d4d0ce;
    background: white;
    padding: 15px
}

@media(min-width: 768px) {
    .note-text .Basic-Text-Frame {
        -webkit-column-count:2;
        column-count: 2
    }
}

.note-text .Basic-Text-Frame-2 {
    border: 1px solid #d4d0ce;
    background: white;
    padding: 15px
}

@media(min-width: 768px) {
    .note-text .Basic-Text-Frame-2 {
        float:right;
        margin: 30px 0 15px 20px;
        width: 410px
    }
}

.note-text .Basic-Text-Frame-2 .compendium-image-center {
    margin-bottom: 20px;
    display: block
}

.note-text .Basic-Text-Frame-3 {
    border: 1px solid #d4d0ce;
    background: white;
    padding: 15px
}

@media(min-width: 768px) {
    .note-text .Basic-Text-Frame-3 {
        float:left;
        margin: 30px 20px 15px 0;
        width: 410px
    }
}

.note-text .Basic-Text-Frame-3 .compendium-image-center {
    margin-bottom: 20px;
    display: block
}

.note-text .Basic-Text-Frame,
.note-text .Basic-Text-Frame-2,
.note-text .Basic-Text-Frame-3 {
    position: relative;
    box-shadow: 0 0 5px #979AA4
}

.note-text .Basic-Text-Frame::before,
.note-text .Basic-Text-Frame::after,
.note-text .Basic-Text-Frame-2::before,
.note-text .Basic-Text-Frame-2::after,
.note-text .Basic-Text-Frame-3::before,
.note-text .Basic-Text-Frame-3::after {
    content: '';
    background-image: url("../images/MMStatBar_lrg.jpg");
    background-size: 100% 100%;
    background-position: center;
    height: 4px;
    display: inline-block;
    position: absolute
}

.note-text .Basic-Text-Frame::before,
.note-text .Basic-Text-Frame-2::before,
.note-text .Basic-Text-Frame-3::before {
    left: -3px;
    top: -3px;
    right: -3px
}

.note-text .Basic-Text-Frame::after,
.note-text .Basic-Text-Frame-2::after,
.note-text .Basic-Text-Frame-3::after {
    left: -3px;
    bottom: -3px;
    right: -3px
}

.note-text .Stat-Block-Styles_Stat-Block-Title {
    font-size: 18px!important;
    font-family: "Roboto Condensed",Roboto,Helvetica,sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.4!important;
    margin-bottom: 0!important;
    display: inline;
    margin-right: 8px
}

.note-text .Stat-Block-Styles_Stat-Block-Metadata {
    font-style: italic;
    font-size: 14px!important;
    line-height: 1.4!important;
    margin-bottom: 8px!important
}

.note-text .Stat-Block-Styles_Stat-Block-Metadata::after {
    content: "";
    display: block;
    border-bottom: 2px solid #bc0f0f;
    padding-top: 5px
}

.note-text .Stat-Block-Styles_Stat-Block-Bar-Object-Space,
.note-text .Stat-Block-Styles_Stat-Block-Bar-Object-Space-Last {
    display: none
}

.note-text .Stat-Block-Styles_Stat-Block-Data,
.note-text .Stat-Block-Styles_Stat-Block-Data-Last,
.note-text .Stat-Block-Styles_Stat-Block-Body,
.note-text .Stat-Block-Styles_Stat-Block-Hanging,
.note-text .Stat-Block-Styles_Stat-Block-Hanging-Last,
.note-text .Stat-Block-Styles_Stat-Block-Body-Last--apply-before-heading- {
    font-size: 14px!important;
    line-height: 1.4!important;
    margin-bottom: 10px!important
}

.note-text .Stat-Block-Styles_Stat-Block-Heading,
.note-text .Stat-Block-Styles_Stat-Block-Heading--after-last-bar- {
    font-size: 16px!important;
    font-weight: bold;
    font-family: "Roboto Condensed",Roboto,Helvetica,sans-serif
}

.note-text .Stat-Block-Styles_Stat-Block-Heading::after,
.note-text .Stat-Block-Styles_Stat-Block-Heading--after-last-bar-::after {
    content: "";
    display: block;
    border-bottom: 1px solid #bc0f0f;
    padding-top: 2px
}

.note-text .Stat-Block-Styles_Stat-Block-Data-Last {
    border-bottom: 2px solid #bc0f0f;
    padding-bottom: 10px
}

.note-text .stat-block-ability-scores {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 2px solid #bc0f0f;
    border-bottom: 2px solid #bc0f0f;
    margin: 10px 0
}
[class*='MessageContainer-Flex'] div[role='listitem'] p,
[class*='MessageContainer-Flex'] div[role='listitem'] span {
    color: rgb(92, 112, 128);
}
[class*='MessageContainer-Flex'] div[role='listitem'] p,
[class*='MessageContainer-Flex'] div[role='listitem'] span{
    margin-left:2px
}
[class*='MessageContainer-Flex'] div[role='listitem']
{ 
    display:flex;
}
.note-text .stat-block-ability-scores-stat {
    width: 33.33333%;
    padding: 10px 5px;
    text-align: center
}
/* START - New quote box implementation */
[class*='MessageContainer'] .tooltip-body{
    padding: 0px;
    width: 265px;
    overflow-wrap: anywhere;
}


.note-text .text--quote-box {
    display: block !important;
    background-color: var(--compendium-quote-box-color, #FAF8EC) !important; /*Fallback: if the variable isn't declared, it'll default to pale yellow*/
    padding: 20px 25px 15px 25px !important;
    position: relative !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-color: var(--compendium-quote-box-border, #620000) !important; /*Fallback: if the variable isn't declared, it'll default to dark red*/
    border-top: 0;
    border-bottom: 0;
    color: var(--theme-page-fg-color, #242527) !important;
    margin: 40px 20px !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}
.note-text .text--quote-box::before {
    top: -4px !important;
}
.note-text .text--quote-box::before, 
.note-text .text--quote-box::after {
    content: '';
    border-radius: 50%;
    background-position: left !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 8px !important;
    width: 8px !important;
    left: -4px !important;
    position: absolute !important;
    background-color: var(--compendium-quote-box-corner, #620000);
}
 .note-text .text--quote-box::after {
    bottom: -4px !important;
}
 .note-text .text--quote-box p:first-of-type::before {
    top: -4px !important;
}
 .note-text .text--quote-box p:first-of-type::before,  
 .note-text .text--quote-box p:last-of-type::after {
    content: '';
    border-radius: 50%;
    background-position: right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 8px !important;
    width: 8px !important;
    right: -4px !important;
    position: absolute !important;
    background-color: var(--compendium-quote-box-corner, #620000);
}
 .note-text .text--quote-box p:last-of-type::after {
    bottom: -4px !important;
}
 .note-text .text--quote-box p:last-of-type {
    margin-bottom: 5px !important;
}
/* END - New quote box implementation */

/* START - New rules sidebar implementation */
.note-text .text--rules-sidebar {
    display: block !important;
    background-color: var(--compendium-rules-sidebar-color, #DAE4C1) !important; /*Fallback: if the variable isn't declared, it'll default to pale-green*/
    position: relative !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    margin: 30px 5px !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    padding: 25px 28px 15px 30px !important;
    border-radius: 0 !important;
    border-top: 3px solid #231f20 !important;
    border-bottom: 3px solid #231f20 !important;
    border-left: 1.5px solid  #b3b3b3 !important;
    border-right: 1.5px solid  #b3b3b3 !important;
    color: var(--theme-page-fg-color, #242527) !important;
    filter: drop-shadow(0px 5px 8px #ccc);
}

.note-text .text--rules-sidebar p:first-of-type {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}

.note-text .text--rules-sidebar .action-tooltip, 
.note-text .text--rules-sidebar .condition-tooltip, 
.note-text .text--rules-sidebar .item-tooltip, 
.note-text .text--rules-sidebar .rule-tooltip, 
.note-text .text--rules-sidebar .sense-tooltip, 
.note-text .text--rules-sidebar .skill-tooltip,
.note-text .text--rules-sidebar .weapon-properties-tooltip,
.note-text .text--rules-sidebar .action-tooltip {
    color: #129b54 !important;
}

.note-text .text--rules-sidebar::before {
    top: -13px !important;
    right: 0.1px !important;
    left: 0.1px !important;
}

.note-text .text--rules-sidebar::before {
    content: '';
    background-image: url("https://media.dndbeyond.com/compendium-images/components/--right-rules.svg"),url("https://media.dndbeyond.com/compendium-images/components/--left-rules.svg") !important;
    background-position: left, right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 11px !important;
    position: absolute !important;
    z-index: -1;
}

.note-text .text--rules-sidebar::after {
    bottom: -13px !important;
    right: -0.1px !important;
    left: 0.1px !important;
}
.note-text .text--rules-sidebar::after {
    content: '';
    background-image: url("https://media.dndbeyond.com/compendium-images/components/--right-rules.svg"),url("https://media.dndbeyond.com/compendium-images/components/--left-rules.svg") !important;
    background-position: left, right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 11px !important;
    position: absolute !important;
    z-index: -1;
    transform: scaleY(-1);
}
/* END - New rules sidebar implementation */

/* START - CSS header variables */
.note-text h1::after {
    background-color: var(--h1-underline, var(--header-underline, #47D18C));
}
.note-text h2::after {
    background-color: var(--h2-underline, var(--header-underline, #47D18C));
}
.note-text h3::after {
    background-color: var(--h3-underline, var(--header-underline, #47D18C));
}
/* END -  CSS header variables */

/* START - Underlines compendium links */
.note-text a:not(.ddb-lightbox-outer, h3 > a):hover,
.note-text a:not(.ddb-lightbox-outer, h3 > a):focus {
    text-decoration: underline;
}
/* END - Underlines Compendium links */


/** TEMP new .text--quote-box type for compendium content - needs to be added to compiled **/

.note-text .text--quote-box.compendium-indented-callout-.text--quote-box {
    background: transparent !important;
    font-size: 16px !important;
    border-left: 4px solid #e0dcdc !important;
    border-right: none !important;
    padding: 10px 20px !important;
    margin: 30px 0 !important;
}

.note-text .text--quote-box.compendium-indented-callout-.text--quote-box::before {
    content: none !important;
}

.note-text .text--quote-box.compendium-indented-callout-.text--quote-box::after {
    content: none !important;
}  

/** END TEMP new .text--quote-box type **/


.note-text h6, {
    font-size: 14px !important;
    font-weight: bold !important;
}


.note-text h1 {
    font-size: 32px!important;
    font-weight: 400!important
}

.note-text h2 {
    font-size: 26px!important;
    font-weight: 400!important;
    clear: both
}

.note-text h3 {
    font-size: 22px!important;
    font-weight: 400!important;
    clear: both
}

.note-text h4 {
    font-size: 18px!important;
    font-weight: 700!important
}

.note-text h5 {
    font-size: 16px!important;
    font-weight: 700!important
}


.note-text .rules-text a {
    color: #129b54!important;
    transition: .3s
}

.note-text .rules-text p:first-child {
    font-size: 16px
}


.note-text .stat-block-background {
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 5px 8px 0 #aaa;
    -moz-box-shadow: 0 5px 8px 0 #aaa;
    box-shadow: 0 5px 8px 0 #aaa;
    background-position: top!important;
    background-image: url(https://media-stg.dndbeyond.com/compendium-images/tcoe/0gqawlEa2tjXGxpc/mm_statbg_sm.jpg)!important
}

.note-text .stat-block-background:after,
.note-text .stat-block-background:before {
    background-image: url(https://media-stg.dndbeyond.com/compendium-images/cm/c43LH2y2Gcaxb3V2/MMStatBar_lrg.png)!important
}


.note-text .block-torn-paper,
.note-text .epigraph,
.note-text .epigraph--with-author {
    overflow: auto;
    background: none;
    color: var(--theme-quote-fg-color,#242527);
    margin: 40px 0;
    line-height: 1.6;
    font-size: 14px;
    border: solid transparent;
    border-width: 20px 10px;
    border-image-source: var(--theme-quote-border,url(https://media.dndbeyond.com/ddb-compendium-client/5f1f1d66d16be68cf09d6ca172f8df92.png));
    border-image-repeat: repeat;
    border-image-slice: 20 10 20 10 fill;
    padding: 10px;
    position: relative
}

.note-text .epigraph--with-author p:last-child {
    font-style: italic;
    text-align: right
}

.note-text .rules-text {
    overflow: auto;
    display: block;
    margin: 30px 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--theme-rules-text-fg-color,#242527);
    border-color: transparent;
    border-style: solid;
    border-width: 15px 20px;
    border-image-repeat: repeat;
    border-image-slice: 21 30 21 30 fill;
    background-color: transparent;
    padding: 20px 10px 10px;
    position: relative;
    border-image-source: var(--theme-rules-text-border,url(https://media.dndbeyond.com/ddb-compendium-client/463d4668370589a1a73886611645df7e.png));
    -webkit-filter: drop-shadow(0 5px 8px #ccc);
    filter: drop-shadow(0 5px 8px #ccc)
}

.note-text .rules-text p:first-child {
    text-transform: uppercase;
    font-weight: 700
}

.note-text .read-aloud-text {
    overflow: auto;
    display: block;
    margin: 30px 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--theme-read-aloud-fg-color,#242527);
    border: 8px solid transparent;
    border-image-repeat: repeat;
    border-image-slice: 8 8 8 8 fill;
    background-color: transparent;
    padding: 20px 20px 10px!important;
    position: relative;
    border-image-source: var(--theme-read-aloud-border,url(https://media.dndbeyond.com/ddb-compendium-client/146117d0758df55ed5ff299b916e9bd1.png))
}
:root .custom-stat-block{
    --theme-page-fg-color: #242527;
}
/* END - Default text color */
* .custom-stat-block{
    font-family: Roboto, Helvetica, sans-serif;
}

.custom-stat-block .Basic-Text-Frame {
    clear: both;
    border: 1px solid #d4d0ce;
    background: white;
    padding: 15px
}

@media(min-width: 768px) {
    .custom-stat-block .Basic-Text-Frame {
        -webkit-column-count:2;
        column-count: 2
    }
}
.note-text .one-column-stat,
.custom-stat-block .one-column-stat {
    -webkit-column-count:1;
    column-count: 1;
}
.custom-stat-block .Basic-Text-Frame-2 {
    border: 1px solid #d4d0ce;
    background: white;
    padding: 15px
}

@media(min-width: 768px) {
    .custom-stat-block .Basic-Text-Frame-2 {
        float:right;
        margin: 30px 0 15px 20px;
        width: 410px
    }
}

.custom-stat-block .Basic-Text-Frame-2 .compendium-image-center {
    margin-bottom: 20px;
    display: block
}

.custom-stat-block .Basic-Text-Frame-3 {
    border: 1px solid #d4d0ce;
    background: white;
    padding: 15px
}

@media(min-width: 768px) {
    .custom-stat-block .Basic-Text-Frame-3 {
        float:left;
        margin: 30px 20px 15px 0;
        width: 410px
    }
}

.custom-stat-block .Basic-Text-Frame-3 .compendium-image-center {
    margin-bottom: 20px;
    display: block
}

.custom-stat-block .Basic-Text-Frame,
.custom-stat-block .Basic-Text-Frame-2,
.custom-stat-block .Basic-Text-Frame-3 {
    position: relative;
    box-shadow: 0 0 5px #979AA4
}

.custom-stat-block .Basic-Text-Frame::before,
.custom-stat-block .Basic-Text-Frame::after,
.custom-stat-block .Basic-Text-Frame-2::before,
.custom-stat-block .Basic-Text-Frame-2::after,
.custom-stat-block .Basic-Text-Frame-3::before,
.custom-stat-block .Basic-Text-Frame-3::after {
    content: '';
    background-image: url("../images/MMStatBar_lrg.jpg");
    background-size: 100% 100%;
    background-position: center;
    height: 4px;
    display: inline-block;
    position: absolute
}

.custom-stat-block .Basic-Text-Frame::before,
.custom-stat-block .Basic-Text-Frame-2::before,
.custom-stat-block .Basic-Text-Frame-3::before {
    left: -3px;
    top: -3px;
    right: -3px
}

.custom-stat-block .Basic-Text-Frame::after,
.custom-stat-block .Basic-Text-Frame-2::after,
.custom-stat-block .Basic-Text-Frame-3::after {
    left: -3px;
    bottom: -3px;
    right: -3px
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Title {
    font-size: 18px!important;
    font-family: "Roboto Condensed",Roboto,Helvetica,sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.4!important;
    margin-bottom: 0!important;
    display: inline;
    margin-right: 8px
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Metadata {
    font-style: italic;
    font-size: 14px!important;
    line-height: 1.4!important;
    margin-bottom: 8px!important
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Metadata::after {
    content: "";
    display: block;
    border-bottom: 2px solid #bc0f0f;
    padding-top: 5px
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Bar-Object-Space,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Bar-Object-Space-Last {
    display: none
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Data,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Data-Last,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Body,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Hanging,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Hanging-Last,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Body-Last--apply-before-heading- {
    font-size: 14px!important;
    line-height: 1.4!important;
    margin-bottom: 10px!important
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Heading,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Heading--after-last-bar- {
    font-size: 16px!important;
    font-weight: bold;
    font-family: "Roboto Condensed",Roboto,Helvetica,sans-serif
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Heading::after,
.custom-stat-block .Stat-Block-Styles_Stat-Block-Heading--after-last-bar-::after {
    content: "";
    display: block;
    border-bottom: 1px solid #bc0f0f;
    padding-top: 2px
}

.custom-stat-block .Stat-Block-Styles_Stat-Block-Data-Last {
    border-bottom: 2px solid #bc0f0f;
    padding-bottom: 10px
}

.custom-stat-block .stat-block-ability-scores {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 2px solid #bc0f0f;
    border-bottom: 2px solid #bc0f0f;
    margin: 10px 0
}

.custom-stat-block .stat-block-ability-scores-stat {
    width: 33.33333%;
    padding: 10px 5px;
    text-align: center
}
/* START - New quote box implementation */
[class*='MessageContainer'] .tooltip-body{
    padding: 0px;
    width: 265px;
    overflow-wrap: anywhere;
}


.custom-stat-block .text--quote-box {
    display: block !important;
    background-color: var(--compendium-quote-box-color, #FAF8EC) !important; /*Fallback: if the variable isn't declared, it'll default to pale yellow*/
    padding: 20px 25px 15px 25px !important;
    position: relative !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-color: var(--compendium-quote-box-border, #620000) !important; /*Fallback: if the variable isn't declared, it'll default to dark red*/
    border-top: 0;
    border-bottom: 0;
    color: var(--theme-page-fg-color, #242527) !important;
    margin: 40px 20px !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}
.custom-stat-block .text--quote-box::before {
    top: -4px !important;
}
.custom-stat-block .text--quote-box::before, 
.custom-stat-block .text--quote-box::after {
    content: '';
    border-radius: 50%;
    background-position: left !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 8px !important;
    width: 8px !important;
    left: -4px !important;
    position: absolute !important;
    background-color: var(--compendium-quote-box-corner, #620000);
}
 .custom-stat-block .text--quote-box::after {
    bottom: -4px !important;
}
 .custom-stat-block .text--quote-box p:first-of-type::before {
    top: -4px !important;
}
 .custom-stat-block .text--quote-box p:first-of-type::before,  
 .custom-stat-block .text--quote-box p:last-of-type::after {
    content: '';
    border-radius: 50%;
    background-position: right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 8px !important;
    width: 8px !important;
    right: -4px !important;
    position: absolute !important;
    background-color: var(--compendium-quote-box-corner, #620000);
}
 .custom-stat-block .text--quote-box p:last-of-type::after {
    bottom: -4px !important;
}
 .custom-stat-block .text--quote-box p:last-of-type {
    margin-bottom: 5px !important;
}
/* END - New quote box implementation */

/* START - New rules sidebar implementation */
.custom-stat-block .text--rules-sidebar {
    display: block !important;
    background-color: var(--compendium-rules-sidebar-color, #DAE4C1) !important; /*Fallback: if the variable isn't declared, it'll default to pale-green*/
    position: relative !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    margin: 30px 5px !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    padding: 25px 28px 15px 30px !important;
    border-radius: 0 !important;
    border-top: 3px solid #231f20 !important;
    border-bottom: 3px solid #231f20 !important;
    border-left: 1.5px solid  #b3b3b3 !important;
    border-right: 1.5px solid  #b3b3b3 !important;
    color: var(--theme-page-fg-color, #242527) !important;
    filter: drop-shadow(0px 5px 8px #ccc);
}

.custom-stat-block .text--rules-sidebar p:first-of-type {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}

.custom-stat-block .text--rules-sidebar .action-tooltip, 
.custom-stat-block .text--rules-sidebar .condition-tooltip, 
.custom-stat-block .text--rules-sidebar .item-tooltip, 
.custom-stat-block .text--rules-sidebar .rule-tooltip, 
.custom-stat-block .text--rules-sidebar .sense-tooltip, 
.custom-stat-block .text--rules-sidebar .skill-tooltip,
.custom-stat-block .text--rules-sidebar .weapon-properties-tooltip,
.custom-stat-block .text--rules-sidebar .action-tooltip {
    color: #129b54 !important;
}

.custom-stat-block .text--rules-sidebar::before {
    top: -13px !important;
    right: 0.1px !important;
    left: 0.1px !important;
}

.custom-stat-block .text--rules-sidebar::before {
    content: '';
    background-image: url("https://media.dndbeyond.com/compendium-images/components/--right-rules.svg"),url("https://media.dndbeyond.com/compendium-images/components/--left-rules.svg") !important;
    background-position: left, right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 11px !important;
    position: absolute !important;
    z-index: -1;
}

.custom-stat-block .text--rules-sidebar::after {
    bottom: -13px !important;
    right: -0.1px !important;
    left: 0.1px !important;
}
.custom-stat-block .text--rules-sidebar::after {
    content: '';
    background-image: url("https://media.dndbeyond.com/compendium-images/components/--right-rules.svg"),url("https://media.dndbeyond.com/compendium-images/components/--left-rules.svg") !important;
    background-position: left, right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 11px !important;
    position: absolute !important;
    z-index: -1;
    transform: scaleY(-1);
}
/* END - New rules sidebar implementation */

/* START - CSS header variables */
.custom-stat-block h1::after {
    background-color: var(--h1-underline, var(--header-underline, #47D18C));
}
.custom-stat-block h2::after {
    background-color: var(--h2-underline, var(--header-underline, #47D18C));
}
.custom-stat-block h3::after {
    background-color: var(--h3-underline, var(--header-underline, #47D18C));
}
/* END -  CSS header variables */

/* START - Underlines compendium links */
.custom-stat-block a:not(.ddb-lightbox-outer, h3 > a):hover,
.custom-stat-block a:not(.ddb-lightbox-outer, h3 > a):focus {
    text-decoration: underline;
}
/* END - Underlines Compendium links */


/** TEMP new .text--quote-box type for compendium content - needs to be added to compiled **/

.custom-stat-block .text--quote-box.compendium-indented-callout-.text--quote-box {
    background: transparent !important;
    font-size: 16px !important;
    border-left: 4px solid #e0dcdc !important;
    border-right: none !important;
    padding: 10px 20px !important;
    margin: 30px 0 !important;
}

.custom-stat-block .text--quote-box.compendium-indented-callout-.text--quote-box::before {
    content: none !important;
}

.custom-stat-block .text--quote-box.compendium-indented-callout-.text--quote-box::after {
    content: none !important;
}  

/** END TEMP new .text--quote-box type **/


.custom-stat-block h6, {
    font-size: 14px !important;
    font-weight: bold !important;
}


.custom-stat-block h1 {
    font-size: 32px!important;
    font-weight: 400!important
}

.custom-stat-block h2 {
    font-size: 26px!important;
    font-weight: 400!important;
    clear: both
}

.custom-stat-block h3 {
    font-size: 22px!important;
    font-weight: 400!important;
    clear: both
}

.custom-stat-block h4 {
    font-size: 18px!important;
    font-weight: 700!important
}

.custom-stat-block h5 {
    font-size: 16px!important;
    font-weight: 700!important
}


.custom-stat-block .rules-text a {
    color: #129b54!important;
    transition: .3s
}

.custom-stat-block .rules-text p:first-child {
    font-size: 16px
}


.custom-stat-block .stat-block-background {
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 5px 8px 0 #aaa;
    -moz-box-shadow: 0 5px 8px 0 #aaa;
    box-shadow: 0 5px 8px 0 #aaa;
    background-position: top!important;
    background-image: url(https://media-stg.dndbeyond.com/compendium-images/tcoe/0gqawlEa2tjXGxpc/mm_statbg_sm.jpg)!important
}

.custom-stat-block .stat-block-background:after,
.custom-stat-block .stat-block-background:before {
    background-image: url(https://media-stg.dndbeyond.com/compendium-images/cm/c43LH2y2Gcaxb3V2/MMStatBar_lrg.png)!important
}


.custom-stat-block .block-torn-paper,
.custom-stat-block .epigraph,
.custom-stat-block .epigraph--with-author {
    overflow: auto;
    background: var(--theme-quote-bg-color,#fff);
    color: var(--theme-quote-fg-color,#242527);
    margin: 40px 0;
    line-height: 1.6;
    font-size: 14px;
    border: solid transparent;
    border-width: 20px 10px;
    border-image-source: var(--theme-quote-border,url(https://media.dndbeyond.com/ddb-compendium-client/5f1f1d66d16be68cf09d6ca172f8df92.png));
    border-image-repeat: repeat;
    border-image-slice: 20 10 20 10 fill;
    padding: 10px;
    position: relative
}

.custom-stat-block .epigraph--with-author p:last-child {
    font-style: italic;
    text-align: right
}

.custom-stat-block .rules-text {
    overflow: auto;
    display: block;
    margin: 30px 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--theme-rules-text-fg-color,#242527);
    border-color: transparent;
    border-style: solid;
    border-width: 15px 20px;
    border-image-repeat: repeat;
    border-image-slice: 21 30 21 30 fill;
    background-color: transparent;
    padding: 20px 10px 10px;
    position: relative;
    border-image-source: var(--theme-rules-text-border,url(https://media.dndbeyond.com/ddb-compendium-client/463d4668370589a1a73886611645df7e.png));
    -webkit-filter: drop-shadow(0 5px 8px #ccc);
    filter: drop-shadow(0 5px 8px #ccc)
}

.custom-stat-block .rules-text p:first-child {
    text-transform: uppercase;
    font-weight: 700
}

.custom-stat-block .read-aloud-text {
    overflow: auto;
    display: block;
    margin: 30px 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--theme-read-aloud-fg-color,#242527);
    border: 8px solid transparent;
    border-image-repeat: repeat;
    border-image-slice: 8 8 8 8 fill;
    background-color: transparent;
    padding: 20px 20px 10px!important;
    position: relative;
    border-image-source: var(--theme-read-aloud-border,url(https://media.dndbeyond.com/ddb-compendium-client/146117d0758df55ed5ff299b916e9bd1.png))
}
.custom-stat-block input.injected-input {
    margin-left: 5px;
}
/* end Note ddb styling*/
/* end Note ddb styling*/


.help-compatible-tool{
    height: fit-content;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    width: 60%;
    margin: auto;
    align-items: center;
    margin-bottom: 50px;
    text-align: center;
}

.compatible-tool-title{
    font-size: 25px;
    font-weight: bold;
}
.compatible-tool-icon{
    filter: drop-shadow(1px 1px 1px #000);
    display: block;
    height:120px;
}



/* start quick roll menu */
#qrm_dialog button{
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    color: #3d3d3d;
    height: 22px;
    margin: 0 2px;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
    padding: 2px 4px;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out, background-color 0.3s ease-in-out, background-image 0.1s ease-in-out;
    border: 1px solid lightgray;
    font-size: 12px;
    overflow: hidden;
}
.qrm_name_line{
    text-align: left;
    color: #444d;
    font-weight: 600;
}
.menu_table{
    overflow: visible;
    overflow-x: scroll;
    height: calc(100% - 55px);
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
}
.menu_roll_input{
    margin: 1px;
    border-radius: 3px;
    border-color: #ddd;
    height:22px;
    font-size: 12px !important;
    box-shadow: 1px 1px 1px 0px #00000047;
    text-transform: uppercase;
}
.custom-stat-block{
    width: 100%;
    height: calc(100% - 25px);
    background: #fff;
}

.aura-element{
    rotate: var(--rotation);
}
/*light/aura animations*/
[data-animation='static-blur-fx'] .islight,
.aura-element[data-animation='static-blur-fx']{
    --light1-blur-size: calc(var(--radius1) * 0.8);
    --light2-blur-size: calc(var(--radius2) * 0.8);
    --transparency-blur-size: calc(var(--light2-blur-size) * 1.2);
    background-image: radial-gradient(rgba(var(--color1), calc(var(--opacity1) * var(--opacity))) var(--light1-blur-size), rgba(var(--color2), calc(var(--opacity2) * var(--opacity))) calc(var(--light1-blur-size) * 1.3) var(--light2-blur-size), transparent var(--transparency-blur-size)) !important;
}

[data-animation='static-blur-fx'] .darkvision{
    background-image: radial-gradient(var(--vision-color) calc(var(--vision-radius) * 0.9), #00000000 var(--vision-radius)) !important;
}
[data-custom-animation] .islight,
.aura-element[data-custom-animation]{
 -webkit-mask-image: var(--custom-mask-image);
 -webkit-mask-size: contain;
}
[data-animation='aurafx-rotate'] .islight,
.aura-element[data-animation='aurafx-rotate'][id*='aura_'] {
    animation: aurafx-rotate 40s infinite linear;
}

[data-animation='flicker-fx'] .islight,
.aura-element[data-animation='flicker-fx']{
    --light1-blur-size: calc(var(--radius1) * var(--light1-blur-size-animated));
    --light2-blur-size: calc(var(--radius2) * var(--light2-blur-size-animated));
    --transparency-blur-size: calc(var(--light2-blur-size) * var(--transparency-blur-size-animated));
    animation: aurafx-flicker 3s infinite alternate linear(1.22 -19.85%, 0.93 -0.74%, 0.46 13.24%, 0.71 34.56%, 0.46 58.82%, 0.74 70.59%, 1 100%);
    background-image: radial-gradient(rgba(var(--color1), calc(var(--opacity1) * var(--opacity))) var(--light1-blur-size), rgba(var(--color2), calc(var(--opacity2) * var(--opacity))) calc(var(--light1-blur-size) * 1.3) var(--light2-blur-size), transparent var(--transparency-blur-size)) !important;
}
.reduceMovement [data-animation='flicker-fx'] .islight,
.reduceMovement .aura-element[data-animation='flicker-fx']{
    --light1-blur-size: calc(var(--radius1) * 0.8);
    --light2-blur-size: calc(var(--radius2) * 0.8);
    --transparency-blur-size: calc(var(--light2-blur-size) * 1.2);
}

[data-animation='rays-fx'] .islight:after,
.aura-element[data-animation='rays-fx'][id*='aura_']:after{
    animation: aurafx-rotate 100s infinite linear;
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    border-radius:50%;
    background-image: repeating-conic-gradient(from 0deg, transparent 0deg 3deg, #0006 5deg 7deg, transparent 9deg)
}
[data-animation='rays-fx'] .islight:after{
    background-image: repeating-conic-gradient(from 0deg, transparent 0deg 3deg, #000 5deg 7deg, transparent 9deg)
}
.aura-element[data-animation='rays-fx'][id*='aura_']{
    animation: aurafx-rotate 100s infinite linear;
    -webkit-mask-image: repeating-conic-gradient(from 0deg, #fff 0deg 3deg, transparent 5deg 7deg, #fff 9deg);
}
[data-animation='wild-fx'] .islight,
.aura-element[data-animation='wild-fx'][id*='aura_'] {
    animation: aurafx-wild 20s infinite linear reverse;
}
[data-animation='wild-fx'] .islight:after,
.aura-element[data-animation='wild-fx'][id*='aura_']:after {
    animation: aurafx-wild-hue 10s infinite linear;
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    border-radius:50%;
    -webkit-mask-image: radial-gradient(45% 45% at center,#ffffff00 70%, #ffffff 100%);
    background-image: radial-gradient(45% 45% at center,#ffffff 50%,#b7b7b75c 90%,#2f0000ba 100%,#fff0 105%, #2f0000 110%), linear-gradient(#ff0000, #ff8f00, #ffda00, #0effe8, #3b59ff, #300057);

}

[data-animation='force-fx'] .islight:after,
.aura-element[data-animation='force-fx'][id*='aura_']:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: multiply;
    filter:blur(1px);
    background-image: radial-gradient(circle at 100px 100px, #ffffff00, #0000003d);
    -webkit-mask-image: radial-gradient(45% 45% at center,#ffffff 108%, #ffffff00 100%);
}
[data-animation='force-fx'] .islight:before,
.aura-element[data-animation='force-fx'][id*='aura_']:before {
  animation: aurafx-force 1s infinite linear alternate;
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0) 25%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  z-index: 2;
}


[data-animation='fairy-fx'] .islight,
.aura-element[data-animation='fairy-fx'][id*='aura_'] {
    animation: aurafx-fairy 150s infinite linear;
    -webkit-mask-size: var(--animation-width);
}

[data-animation='fairy-fx'] .islight:before,
.aura-element[data-animation='fairy-fx'][id*='aura_']:before {
    animation: aurafx-fairy2 50s infinite linear;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    -webkit-mask-size: var(--animation-width);
    border-radius: 50%;
    translate: 5px;
}

[data-animation='magic-circle-fx'] .islight,
.aura-element[data-animation='magic-circle-fx'][id*='aura_'] {
    animation: aurafx-rotate 80s infinite linear;
   -webkit-mask-size: contain;
}

[data-animation='magic-circle-2-fx'] .islight,
.aura-element[data-animation='magic-circle-2-fx'][id*='aura_'] {
    animation: aurafx-rotate 80s infinite linear;
    -webkit-mask-size: contain;
}

[data-animation='spore-fx'] .islight,
.aura-element[data-animation='spore-fx'][id*='aura_'] {
    animation: aurafx-rotate 180s infinite linear;
   -webkit-mask-size: contain;
   filter:blur(5px);
}

[data-animation='lightning-fx'] .islight,
.aura-element[data-animation='lightning-fx'][id*='aura_'] {
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask-1);
    --light1-blur-size: var(--radius1);
    --light2-blur-size: var(--radius2);
    --transparency-blur-size: var(--light2-blur-size);
    background-image: radial-gradient(rgba(var(--color1), calc(var(--opacity1) * var(--opacity))) var(--light1-blur-size), rgba(var(--color2), calc(var(--opacity2) * var(--opacity))) calc(var(--light1-blur-size) * 1.3) var(--light2-blur-size), transparent var(--transparency-blur-size)) !important;
}

[data-animation='hurricane-fx'] .islight,
.aura-element[data-animation='hurricane-fx'][id*='aura_'] {
    animation: aurafx-rotate 30s infinite linear;
    -webkit-mask-size: contain;
    --light1-blur-size: var(--radius1);
    --light2-blur-size: var(--radius2);
    --transparency-blur-size: var(--light2-blur-size);
    background-image: radial-gradient(rgba(var(--color1), calc(var(--opacity1) * var(--opacity))) var(--light1-blur-size), rgba(var(--color2), calc(var(--opacity2) * var(--opacity))) calc(var(--light1-blur-size) * 1.3) var(--light2-blur-size), transparent var(--transparency-blur-size)) !important;
}

[data-animation='hurricane-fx'] .islight:before,
.aura-element[data-animation='hurricane-fx'][id*='aura_']:before
{
    animation: lightning 5s infinite linear;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, var(--opacity));
    -webkit-mask-size: contain;
    mix-blend-mode: overlay;
}

[data-animation='snow-fx'] .islight,
.aura-element[data-animation='snow-fx'][id*='aura_']{
    border-radius:50%;
    overflow:hidden;
    background: #0000 !important;
}

[data-animation='snow-fx'] .islight:before,
.aura-element[data-animation='snow-fx'][id*='aura_']:before,
[data-animation='snow-fx'] .islight:after,
.aura-element[data-animation='snow-fx'][id*='aura_']:after
{
    animation: snow 5s infinite linear;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    --light1-blur-size: var(--radius1);
    --light2-blur-size: var(--radius2);
    --transparency-blur-size: var(--light2-blur-size);
    background-image: radial-gradient(rgba(var(--color1), calc(var(--opacity1) * var(--opacity))) var(--light1-blur-size), rgba(var(--color2), calc(var(--opacity2) * var(--opacity))) calc(var(--light1-blur-size) * 1.3) var(--light2-blur-size), transparent var(--transparency-blur-size)) !important;
    -webkit-mask-size: var(--animation-width);
    overflow:hidden;
    border-radius:50%;
    --starting-deg: 0deg;
}

[data-animation='snow-fx'] .islight:before,
.aura-element[data-animation='snow-fx'][id*='aura_']:before
{
    animation: snow 5s infinite 2.5s linear;
    --starting-deg: 230deg;
    --opacity:0;
}


[data-animation='bubble-fx'] .islight,
.aura-element[data-animation='bubble-fx'][id*='aura_']{
    border-radius:50%;
    overflow:hidden;
    background: #0000 !important;
    filter:blur(2px);
}
[data-animation='bubble-fx'] .islight:before,
.aura-element[data-animation='bubble-fx'][id*='aura_']:before,
[data-animation='bubble-fx'] .islight:after,
.aura-element[data-animation='bubble-fx'][id*='aura_']:after
{
    animation: bubble 6s infinite linear;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    --opacity: 0;
    --light1-blur-size: var(--radius1);
    --light2-blur-size: var(--radius2);
    --transparency-blur-size: var(--light2-blur-size);
    background-image: radial-gradient(rgba(var(--color1), calc(var(--opacity1) * var(--opacity))) var(--light1-blur-size), rgba(var(--color2), calc(var(--opacity2) * var(--opacity))) calc(var(--light1-blur-size) * 1.3) var(--light2-blur-size), transparent var(--transparency-blur-size)) !important;
    -webkit-mask-size: var(--animation-width);
}

[data-animation='bubble-fx'] .islight:before,
.aura-element[data-animation='bubble-fx'][id*='aura_']:before
{
    animation: bubble 6s infinite 3s linear;
    rotate:200deg;
}

.video-meet-area{
    z-index: 100;
    position: fixed;
    bottom: 0px;
    width: calc(100vW - 360px);
    min-height: 133px;
    height: fit-content;
    padding-bottom: 26px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap-reverse;
    align-items: stretch;
    align-content: center;
    pointer-events: none;
}
.meet-controls-bar{
    position: absolute;
    bottom: 0px;
    pointer-events: auto;
}
.meet-controls-bar select{
    background: none rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset;
    color: rgb(0, 0, 0);
    padding: 4px;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

#peerVideo_mute_mic.muted{
    background:#d86565;
}

#peerVideo_echo_cancel,
#peerVideo_noise_sup{
float: right;
    height: 27px;
    background: #fff;
    border: 0px;
    border-radius: 5px;
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 100%;
    margin: 0px;
    vertical-align: baseline;
    color: #000;
    padding: 1px 6px;
    margin-left: 3px;
    transition: none;
}
#peerVideo_echo_cancel.enabled,
#peerVideo_noise_sup.enabled{
    box-shadow: inset #009500 0px 0px 0px 2px;
    color: #009500;
}
#peerVideo_mute_mic span:before{
    content:"\e029";
    font-family: "Material Symbols Outlined", sans-serif !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
#peerVideo_mute_mic.muted span:before{
    content:"\e02b";
}

    
   
#peerVideo_close span.material-icons.button-icon
{
    margin: -3px -3px;
    bottom: -3px;
    position: relative;
}
.video-meet-area video {
    width: 200px;
    margin: 5px 0px 0px 5px;
    pointer-events: auto;
    background: var(--token-image, #000) center top no-repeat, #00000070;
    border: ridge 3px #555555;
    box-shadow: inset 1px 1px 3px #000;
    background-size:contain;
    object-fit:fill;
}

.video-meet-area video::-webkit-media-controls-panel {
    border-radius: 0px;
    color: #fff;
    background:transparent;
    bottom:0px;
    position:relative;
    height:100%;
}



.video-meet-area video::-webkit-media-controls-enclosure {
    width:100%;
    background-color:#80808091;
    border-radius: 0px;
    display: none;
    position:absolute;
    max-height:40px;
    padding:0px !important;
}

.video-meet-area video:hover::-webkit-media-controls-enclosure {
    display: flex;
}

.dice-rolling-panel .dice-toolbar{
    bottom: 35px !important;
}

@keyframes bubble {
     0%{
        --opacity: 0;
        transform: scale(1);
    }
    50%{
         --opacity: 1;
    }
    100%{
        transform: scale(1.4);
        --opacity: 0;
    }
}



@keyframes lightning {
    0%{
        scale: 3.5;
        --opacity: 0;
    }
    20%{
        scale: 3.5;
        --opacity: 0;
    }
    21%{
       scale: 3.5;
       --opacity: 1;
    }
    25%{
        --opacity: 0;
        scale: 3.5;
    }
    70%{
        scale: 5.5;
        --opacity: 0;
    }
    71%{
       scale: 5.5;
       --opacity: 1;
    }
    75%{
        scale: 5.5;
        --opacity: 0;
    }
    100%{
        scale: 5.5;
        --opacity: 0;
    }
}

@keyframes snow {
    0%{
        --opacity: 0;
        transform: scale(1);
        rotate: calc(var(--starting-deg) + 200deg);
    }
    25%{
        rotate: calc(var(--starting-deg) + 200deg);
        --opacity: 1;
    }
    50%{
        rotate: calc(var(--starting-deg) + 200deg);
        --opacity: 0;
    }
    51%{
        rotate: var(--starting-deg);
        --opacity: 0;
    }
    75%{
        rotate: var(--starting-deg);
        --opacity: 1;
    }
    100%{
        rotate: var(--starting-deg);
        transform: scale(0.5);
        --opacity: 0;
    }
}



@keyframes aurafx-fairy {
    0% {
        transform: scale(0.98) rotate(0deg);
    }
    50% {
        transform: scale(1) rotate(180deg);
    }
    100% {
        transform: scale(0.98) rotate(360deg);
    }
}
@keyframes aurafx-fairy2 {
    0% {
        transform: rotate(360deg) scale(1.5);
    }

    50% {
        transform: rotate(180deg) scale(1);
    }
    100% {
        transform: rotate(0deg) scale(1.5);
    }
}
@property --light1-blur-size-animated {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 1;
  inherits: false;
}

@property --light2-blur-size-animated{
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 1;
  inherits: false;
}
@property --transparency-blur-size-animated{
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 1;
  inherits: false;
}
@property --opacity{
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 1;
  inherits: false;
}
@keyframes aurafx-flicker{
      0% { 
        --opacity: 0.7;
        --light1-blur-size-animated: 0.7;
        --light2-blur-size-animated: 0.8;
        --transparency-blur-size-animated: 1.2;
      }
      100% {
        --opacity: 1;
        --light1-blur-size-animated: 0.8;
        --light2-blur-size-animated: 0.8;
        --transparency-blur-size-animated: 1.3;
      }
}
@keyframes aurafx-rotate{
    from {
        transform: rotate(0deg);
   
      }
      to {
         transform: rotate(360deg);
      }
}

@keyframes lightning-circle-fx{
    0% {
        --opacity:1;
        -webkit-mask-image: var(--mask-1);
    }
    5%{
        --opacity:0;
    }
    26.3% {
        --opacity:0;
        -webkit-mask-image: var(--mask-1);
    }

    27.7% {
        --opacity:1;
        -webkit-mask-image: var(--mask-2);
    }
    30%{
        --opacity:0;
    }
    36%{
        --opacity:0;
         -webkit-mask-image: var(--mask-2);
    }
    37% {
         --opacity:1;
        -webkit-mask-image: var(--mask-3);
    }
    40%{
        --opacity:0;
    }
    48%{
         --opacity:0;
          -webkit-mask-image: var(--mask-3);
    }
    50% {
         --opacity:1;
        -webkit-mask-image: var(--mask-2);
    }
    55%{
        --opacity:0;
    }
    66%{
         --opacity:0;
          -webkit-mask-image: var(--mask-2);
    }
    67% {
         --opacity:1;
        -webkit-mask-image: var(--mask-3);
    }
    70%{
        --opacity:0;
    }
    81%{
         --opacity:0;
          -webkit-mask-image: var(--mask-3);
    }
    82% {
         --opacity:1;
        -webkit-mask-image: var(--mask-1);
    }
    85%{
        --opacity:0;
    }
    93%{
         --opacity:0;
          -webkit-mask-image: var(--mask-1);
    }
    94% {
         --opacity:1;
        -webkit-mask-image: var(--mask-2);
    }
    98%{
        --opacity:0;
    }
    99%{
         --opacity:0;
          -webkit-mask-image: var(--mask-2);
    }
    100% {
         --opacity:1;
        -webkit-mask-image: var(--mask-1);
    }
    
}
@keyframes aurafx-wild{
    from {
        transform: rotate(0deg) skew(5deg, 0deg);
      }
      to {
        transform: rotate(360deg) skew(0deg, 5deg);
      }
}
@keyframes aurafx-wild-hue{
    from {
        transform: rotate(0deg) skew(5deg, 0deg);
        filter: hue-rotate(0deg);
      }
      to {
        transform: rotate(360deg) skew(0deg, 5deg);
        filter: hue-rotate(360deg);
      }
}
@keyframes aurafx-force{
    from {
        transform: scale(0.99);
      }
      to {
        transform: scale(1)
      }
}






.general_input{
    border-width: 2px;
    border-radius: 2px;
    border-color: #ddd;
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    color: #3d3d3d;
    height: 22px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
    padding: 1px 1px;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out, background-color 0.3s ease-in-out, background-image 0.1s ease-in-out;
    border: 1px solid lightgray;
    font-size: 12px;
    margin: 1px;
    top: 0px;
    text-transform: uppercase;
}
.menu_hp_input{
    border-width: 0;
    background: none;
    border-radius: 3px;
    border-color: #ddd;
    height:22px;
    font-size: 18px !important;
    top: 1px;
    width: 45%;
    display:inline-block;
}
#light_presets_properties .light_preset_row,
#animation_presets_properties .animation_preset_row,
#aura_presets_properties .aura_preset_row  {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 10px 5px;
}

.light_preset_title,
.animation_preset_title,
.animation_preset_mask,
.aura_preset_title{
    background-color: #fff;
    background: #fff none;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    color: #000;
    padding: 4px;
    width: 180px;
    -webkit-transition: .2s linear border,0.2s linear box-shadow;
    -moz-transition: .2s linear border,0.2s linear box-shadow;
    transition: .2s linear border,0.2s linear box-shadow;
}
.animation_preset_mask{
    width: 520px;
}
#light_presets_properties .light_preset_row>div,
#animation_presets_properties .animation_preset_row>div,
#aura_presets_properties .aura_preset_row>div{
    color: #666;
    font-size: 12px;
    line-height: 100%;
    display: inline-block;
    text-align:center;
    margin:0px 30px;
}
#light_presets_properties .light_preset_row>div>div,
#animation_presets_properties .animation_preset_row>div>div,
#aura_presets_properties .aura_preset_row>div>div{
    color: #666;
    font-size: 12px;
    line-height: 100%;
    margin:5px 0px;
}
#light_presets_properties .light_preset_row>div>h3,
#animation_presets_properties .animation_preset_row>div>h3,
#aura_presets_properties .aura_preset_row>div>h3{
    color: #000;
    font-size: 12px
}
div#addLightPreset,
div.removePreset,
div#addAnimationPreset,
div#addAuraPreset{
    font-size:30px;
    text-align:center;
    line-height:100%;
    font-weight:600;
    color: #0a0;
    margin:10px 20px;
    border-radius:5px;
    border:1px solid #000;
    width:30px;
    height:30px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0px 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    opacity: 0.8;
    outline: none;
    background: rgb(235, 241, 245);
    transform: scale(0.8);
}
#light_presets_properties div.removePreset svg rect,
#animation_presets_properties div.removePreset svg rect,
#aura_presets_properties div.removePreset svg rect{
    fill: #F00;
    height: 80px;
    width: 10px;
    transform: translate(45px, 10px);
}

#light_presets_properties div.removePreset,
#animation_presets_properties div.removePreset,
#aura_presets_properties div.removePreset{
    fill: #d00;
    width:20px;
    height:20px;
    margin:0px !important;
}


.light_preset_title_row,
.animation_preset_title_row,
.aura_preset_title_row  {
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f9f9f9 url(https://www.dndbeyond.com/content/1-0-2416-0/skins/waterdeep/images/background_texture.png) repeat !important;
    z-index: 1;
}
.animation_preset_title_row,
#animation_presets_properties .animation_preset_row{
    justify-content: space-between;
}

.light_preset_title_row>div>h3,
.animation_preset_title_row>div>h3,
.aura_preset_title_row>div>h3 {
    font-size: 12px;
    margin: 10px 75px; 
}
#edit_preset_light_dialog,
#edit_preset_animation_dialog,
#edit_preset_aura_dialog{
    height: 100%;
    overflow-y: scroll;
}
button#editPresets,
button#editAnimations,
button#editAuras  {
    font-size:10px;
    font-weight: 600;
    color: #9f9f9f;
    background:none;
    border-radius:5px;
    outline: none;
    border: 1px solid #ddd;
    left:-45px;
    height: 20px;
    position:relative;
    cursor: pointer;
}
button#editAnimations {
    left: -40px;
}
#qrm_dialog .roll_mods_button {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 40%;
}
.roll_mods_button:before {
    width: 100%;
    height: 100%;
    min-width: 12px;
    min-height: 12px;
    top: 0px; 
    margin-right: 0px;
    left: 1px
}
.roll_mods_button:focus {
    outline: none;
    box-shadow: none;
}
#qrm_healing.active_roll_mod, #adv.active_roll_mod{
    background-image: none !important;
    background: green;
    border-radius: 3px !important;
    border-color: #ddd !important;
}
#qrm_damage.active_roll_mod, #disadv.active_roll_mod{
    background-image: none !important;
    background: red;
    border-radius: 3px;
    border-color: #ddd;
}
#qrm_heal.active_roll_mod{
    background-image: none !important;
    background: green;
    border-radius: 3px !important;
    border-color: #ddd !important;
}
#qrm_damage.active_roll_mod{
    background-image: none !important;
    background: red;
    border-radius: 3px;
    border-color: #ddd;
}
.adjustments_wrapper{
    top: 5px;
    position: relative;
    display: inline-block;
}
.damage_heal_button{
    display: block;
    height: 50% !important;
    font-size: 8px !important;
    text-align: center;
    overflow: unset!important;
    padding: 0px!important;
    width: 50px;
    margin: 1px !important;
}
.ui-selectmenu-menu .ui-menu-item-wrapper .ui-menu-item {
    height: 24px;
    width: 24px;
    top: 0.1em;
    overflow: auto;
    position: relative;
}
.ui-selectmenu-menu .ui-menu {
    max-height: calc(50vh - 20px);
    width: 140px;
    overflow: auto !important;
}
#qrm_apply_conditions-button{
    width: 26% !important;
}
.ui-front {
    z-index: 50010 !important;
}
.ui-selectmenu-text{
    top: 1px;
    position: relative;
}
.ui-menu .ui-menu-item-wrapper{
    display: inline-block;
    padding-right: 100px !important;
    max-width: 175px;
    white-space: nowrap;
    text-transform: uppercase;
}
.icon-avatar{
    width: 22px;
    height: 22px;
}
.ui-selectmenu-button.ui-button{
    width: 22% !important;
    padding: 2px 2px !important;
    border-width: 2px;
    border-radius: 2px;
    border-color: #ddd;
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    color: #3d3d3d;
    height: 22px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out, background-color 0.3s ease-in-out, background-image 0.1s ease-in-out;
    border: 1px solid lightgray;
    font-size: 12px;
    margin: 1px;
    top: -1px;
}
.ui-menu .ui-icon{
    background-image: none;
    background-repeat: no-repeat;
    background-size: contain;
}
.dropdown-advantage {
    background-image: url(assets/conditons/advantage.png) !important;
}
.dropdown-baned {
    background-image: url(assets/conditons/baned.png) !important;
}
.dropdown-bardic {
    background-image: url(assets/conditons/bardic_inspiration.png) !important;
}
.dropdown-blessed{
    background-image: url(assets/conditons/blessed.png) !important;
}
.dropdown-bloodied {
    background-image: url(assets/conditons/bloodied.png) !important;
}
.dropdown-concentration-reminder {
    background-image: url(assets/conditons/concentration\(reminder\).png) !important;
}
.dropdown-disadvantage {
    background-image: url(assets/conditons/disadvantage.png) !important;
}
.dropdown-flamed {
    background-image: url(assets/conditons/flamed.png) !important;
}
.dropdown-flying {
    background-image: url(assets/conditons/flying.png) !important;
}
.dropdown-hasted {
    background-image: url(assets/conditons/hasted.png) !important;
}
.dropdown-bardic-inspiration {
    background-image: url(assets/conditons/bardic_inspiration.png) !important;
}
.dropdown-rage {
    background-image: url(assets/conditons/rage.png) !important;
}
.dropdown-remove {
    background-image: url(assets/icons/delete.svg) !important;
}
/* end quick roll menu */

/*Audio Mixer Start*/
li.audio-row:hover .channel-progress-bar-total .channel-progress-bar-progress,
li.audio-row:hover .channel-progress-bar-total
{
    height:5px !important;
}
.channel-progress-bar-total,
.channel-progress-bar-progress{
    transition: 150ms height linear 500ms;
}
#sounds-panel .channel-progress-bar-progress{
    background: #1b9af0 !important;
}

.token-image[src*='assets/icons/speaker.svg']{
    filter: invert(1) drop-shadow(1px 1px 0px #000) !important;
}

#tokens .audio-token.token:not(.underDarkness),
#map_items .audio-token.token{
    background: #060b04;
    border: #ea2524 2px solid;
}
#sounds-panel .channel-progress-bar-total{
    width: 35%;
}
#sounds-panel .volume-control{
    width: 40%;
}
.audio-row input{
    top: 4px;
    position:relative;
    -webkit-appearance: none;
    width: 100%;
    height: 7px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;

}
#mixer-channels{
    max-height: 400px;
    overflow-y: auto;
    padding-bottom: 2px;
}
#mixer-channels .volume-control{
    left: 0;
    width: calc(40% + 2px)
}
#mixer-channels .audio-row input{
    top: 8px;
}
#mixer-channels .audio-row{
    margin-left: 5px;
}
.audio-row input::-webkit-slider-thumb{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 4px;
    height: 13px;
    background: #899197;
    background-color: #899197;
    border-radius:5px;
    cursor: pointer;
    box-shadow: 1px 1px 1px 0px #000;
    border:1px solid #fff9;
    border-width: 1px 0px 0px 1px;
}

.audio-row input::-moz-range-thumb {
-moz-appearance: none;
    appearance: none;
    width: 4px;
    height: 13px;
    background: #899197;
    background-color: #899197;
    border-radius:5px;
    cursor: pointer;
    box-shadow: 1px 1px 1px 0px #000;
    border:1px solid #fff9;
    border-width: 1px 0px 0px 1px;
}
#sounds-panel .sidebar-panel-header {
    background: #ebf1f5;
    color: #000;
}
#sounds-panel .sidebar-panel-header button{
    border-radius: 5px;
}
#sounds-panel .sidebar-panel-header button{
    box-shadow: inset 1px 1px 4px -2px #a0a0a0e3, 2px 2px 2px -1px #000000a3, 0px 1px 1px 0px #0006;
}
#sounds-panel .sidebar-panel-header button svg{
    transform: scale(0.8);
}
#sounds-panel .sidebar-panel-header button:active,
#sounds-panel .sidebar-panel-header button.pressed:active{
    box-shadow: inset 2px 1px 3px -1px #000, inset 1px 2px 3px -1px #000;
    border: 1px solid tranparent;
}

#sounds-panel .sidebar-panel-header svg path{
    fill: #000;
}
div#sounds-panel {
    overflow-y: visible;
}


button.channel-loop-button{
    left: 20px;
}

.channelNameOverflow,
.trackNameOverflow {
    width: 100px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 16px;
}
.trackNameOverflow{
    width: 230px;
}
.channelNameOverflow:hover .channelName,
.trackNameOverflow:hover .track-name {
    margin-left: var(--name-width-overflow);
}

.channelName,
.track-name{
    transition: margin var(--overflow-speed, 800ms) linear 250ms;
    text-overflow: ellipsis;
    display: inline;
}
#mixerPlaylists{
    width: 100px;
    margin: 0px 0px 0px 5px;
}
#mixerPlaylists ~ button#add-playlist, 
#mixerPlaylists ~ button#remove-playlist {
    box-shadow: 1px 1px 1px 1px #0003, 1px 2px 0px -2px #0003;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
    width: fit-content;
    font-size: 12px;
    height: 16px;
    margin: 0px 4px;
    color: rgb(111, 116, 120);
    padding: 0px 3px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: #000000;
    opacity: 0.8;
    outline: none;
    background: rgb(235, 241, 245);
}   

.mixer-play-pause-button,
.track-play-pause-button,
.mixer-clear-button,
.channel-play-pause-button,
.channel-loop-button,
.track-remove-button,
.add-track-ok-button,
.add-track-cancel-button,
.channel-remove-button,
.track-add-to-mixer,
.track-add-token-mixer,
.sequential-button {
    box-shadow: 1px 1px 1px 1px #0003, 1px 2px 0px -2px #0003;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
    width: 24px;
    height: 24px;
    color: rgb(111, 116, 120);
    padding: 0px 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: #000000;
    opacity: 0.8;
    outline: none;
    background: rgb(235, 241, 245);
    transform: scale(0.8);
}
.mixer-play-pause-button:focus,
.track-play-pause-button:focus,
.mixer-clear-button:focus,
.channel-play-pause-button:focus,
.channel-loop-button:focus,
.track-remove-button:focus,
.add-track-ok-button:focus,
.add-track-cancel-button:focus,
.channel-remove-button:focus,
.track-add-to-mixer:focus,
.track-add-token-mixer:focus,
.sequential-button:focus {
    outline: none;
}

.mixer-play-pause-button:hover,
.track-play-pause-button:hover,
.mixer-clear-button:hover,
.channel-play-pause-button:hover,
.channel-loop-button:hover,
.track-remove-button:hover,
.add-track-ok-button:hover,
.add-track-cancel-button:hover,
.channel-remove-button:hover,
.track-add-to-mixer:hover,
.track-add-token-mixer:hover,
.sequential-button:hover  {
    cursor: pointer;
    background: rgb(245, 248, 250);
    border: 1px solid rgb(206, 217, 224);
}

.mixer-play-pause-button:active,
.mixer-clear-button:active,
.track-play-pause-button:active,
.channel-play-pause-button:active,
.channel-loop-button:active,
.track-remove-button:active,
.add-track-ok-button:active,
.add-track-cancel-button:active,
.channel-remove-button:active,
.track-add-to-mixer:active,
.track-add-token-mixer:active,
.sequential-button:active {
    background-color: rgb(245, 248, 250);
    box-shadow: inset #000 1px 1px 3px 1px;
    transform: translate(1px, 2px) scale(0.8);
}



#mixerPlaylists ~ button#add-playlist:active, 
#mixerPlaylists ~ button#remove-playlist:active{
    background-color: rgb(245, 248, 250);
    box-shadow: inset #000 1px 1px 3px 1px;
    transform: translate(1px, 2px);
} 
.track-add-to-mixer{
   fill:#000;
   padding: 5px 4px 5px 4px; 
}
.track-add-to-mixer svg path{
    fill:#000;
}

.channel-play-pause-button,
.channel-loop-button,
.channel-remove-button{
    float:  right;
}
.channel-remove-button{
    color: #000;
    font-size: 18px;
}
input.trackName.trackInput {
    width: 100px;
}

div#importTrackFields input,
div#editTrackFields input {
    width: 100px;
    margin: 0px 5px 0px 0px;
}
.add-track-ok-button,
.add-track-cancel-button{
    left: 4px;
    position: relative;
}

.trackTags{
    width:258px !important;
}

div#importTrackFields input.trackSrc,
div#editTrackFields input.trackSrc  {
    width: 145px;
}
div#editTrackFields button,
div#editTagsFields button{
    float: initial;
    height: 24px;
    vertical-align:top;
}
div#importTrackFields,
div#playlistFields {
    height: 0px;
    overflow: hidden;
    margin: 5px 0px;
    transition: height ease 250ms;
}
#sounds-panel .sidebar-panel-header button.pressed {
    background: #7dc8fd66 !important;
    border: none;
    box-shadow: inset #000 1px 1px 3px 0px;
    transform: translate(0px, 1px) scale(0.8);
}
.mixer-clear-button{
    position: absolute;
    left: 126px;
}
.sequential-button{
    position: absolute;
    left: 150px;
}
.mixer-play-pause-button{
    position: absolute;
    left: 174px;
}



/***** NEW STAT BLOCKS ****/


.stat-block {
    --compendium-p-bottom: 0;
    border: 1px solid #a7a3a0;
    background-color: #fefcef;
    padding: 10px;
    position: relative;
    background-repeat: no-repeat;
    box-shadow: 0 5px 8px 0 var(--stat-block-shadow,#aaa);
    background-position: top;
    background: var(--stat-block-bg-override,#f6f3ee);
    font-size: 16px;
    line-height: 19.6px;
    border-radius: 8px;
    outline: 1px solid #a7a3a0;
    outline-offset: -4px;
    font-family: var(--stat-block-font,Roboto,Helvetica,sans-serif);
    columns: 384px 2
}

.stat-block :is(h2,h3,h4,h5) {
    --header-font-override: 22px;
    font-family: Roboto Condensed;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 8px;
    margin-block-end:0}

.stat-block :is(h2,h3,h4,h5):after {
    content: "";
    display: block;
    width: 100%;
    margin: 2px auto 8px;
    height: 1px;
    background: var(--monster-header-underline,#7a3c2f);
    column-span: all
}

.stat-block p {
    break-inside: avoid;
    font-size: 15px;
    line-height: 1.4
}

.stat-block p+p {
    --compendium-p-top: 10px
}

 .stat-block p:first-of-type {
    margin-top: 0;
    font-style: italic;
    opacity: .8
}

.stat-block p:first-of-type+p {
    --compendium-p-top: 16px
}

.stat-block :is(ol,ul,dl) {
    margin-bottom: 0;
    padding-top: 0
}

.stat-block .monster-header {
    padding-top: 4px;
    letter-spacing: .35px;
    font-weight: 500;
    color: var(--monster-header-color,#5b160c);
    font-size: var(--monster-trait-header-size,18px);
    font-family: var(--monster-trait-header-font,"Roboto Condensed",Helvetica,sans-serif);
    border-bottom: 2px solid var(--monster-header-underline,#7a3c2f)
}

.stat-block .monster-header+p {
    break-before: avoid
}

.stat-block .stats {
    display: flex;
    gap: 10px
}

.stat-block .stats+p {
    margin-top: 10px
}

.stat-block .stats table.abilities-saves {
    --theme-table-row-color: transparent;
    flex: 1 1 auto;
    line-height: 24px;
    background: revert;
    border: none;
    font-size: 16px;
    break-inside: avoid
}

.stat-block .stats table.abilities-saves.physical {
    --stats-score: #ede6d9;
    --stats-mods: #ded4cc;
    --stats-score-hover: rgba(153,127,109,0.49019607843137253);
    --stats-mods-hover: rgba(153,109,114,0.49019607843137253)
}

.stat-block .stats table.abilities-saves.mental {
    --stats-score: #d8dad1;
    --stats-mods: #d0caca;
    --stats-score-hover: rgba(109,141,153,0.49019607843137253);
    --stats-mods-hover: rgba(117,109,153,0.49019607843137253)
}

.stat-block .stats table.abilities-saves thead {
    border: none;
    height: revert;
    min-height: 45px
}

.stat-block .stats table.abilities-saves thead tr {
    height: revert;
    min-height: 45px
}

.stat-block .stats table.abilities-saves thead tr th {
    padding: 5px 2px 0!important;
    background: inherit;
    color: inherit;
    vertical-align: bottom;
    border: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px
}

.stat-block .stats table.abilities-saves tbody {
    border: none
}

.stat-block .stats table.abilities-saves tbody tr {
    background-color: var(--theme-table-row-color,#fdfdfd);
    color: var(--theme-table-header-fg-color,#222)
}

.stat-block .stats table.abilities-saves tbody tr:hover {
    background-color: var(--stats-hover)
}

.stat-block .stats table.abilities-saves tbody tr:hover :nth-child(-n+3) {
    background-color: var(--stats-score-hover)
}

.stat-block .stats table.abilities-saves tbody tr:hover :nth-child(n+3) {
    background-color: var(--stats-mods-hover)
}

.stat-block .stats table.abilities-saves tbody tr :nth-child(-n+3) {
    background-color: var(--stats-score)
}

.stat-block .stats table.abilities-saves tbody tr :nth-child(n+3) {
    background-color: var(--stats-mods)
}

.stat-block .stats table.abilities-saves tbody th {
    text-transform: uppercase;
    font-weight: 700;
    border: none;
    padding-left: 6px;
    font-size: 16px
}

.stat-block .stats table.abilities-saves tbody td {
    min-width: revert;
    padding: 5px 10px!important;
    border: none;
    font-size: 16px
}

.stat-block .stats table.abilities-saves tr :is(th,td) {
    transition: .3s
}

.stat-block p:nth-of-type(2) strong+strong {
    margin-left: 30px
}
.stat-block figure {
    position: static;
    margin: 0 auto
}

.stat-block figure .artist-credit {
    text-align: end;
    right: 0;
    left: 0;
    bottom: -6px;
    top: unset
}

*+.stat-block {
    margin-top: 24px
}

/***** END NEW STAT BLOCKS ****/