/*#region Shared*/
.overlay_RightBar_Wrapper {
    height: calc(100% - 70px);
    width: 550px;
    border: 1px solid black;
    position: absolute;
    right: 5px;
    box-shadow: 0 0 20px black;
    background-color: black;
    position: absolute;
    top: 60px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#020200+0,3f3f3f+46,000000+100 */
    background: #020200; /* Old browsers */
    background: -moz-linear-gradient(top, #020200 0%, #3f3f3f 46%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #020200 0%,#3f3f3f 46%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #020200 0%,#3f3f3f 46%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    z-index: 20;
}

.overlay_RightBar_Inner {
    text-align: center;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    overflow: hidden;
    box-shadow: 0 0 20px rgb(40,40,40) inset;
}

.overlay_RightBar_Header {
    min-width: 50%;
    height: 30px;
    position: absolute;
    top: 10px;
    position: absolute;
    left: 20px;
    top: 10px;
    text-align: left;
    font-size: 30px;
    color: gold;
}

.overlay_rightBar_createNew {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 200px;
    text-align: right;
    height: 40px;
}

.overlay_rightBar_LineItem {
    margin-top: 15px;
    position: relative;
    min-height: 30px;
    width: 100%;
    margin-bottom: 5px;
    display: inline-block;
    right: 0px;
}

.overlay_rightBar_LineItem_LeftCol {
    position: relative;
    left: 0px;
    width: 210px;
    text-align: right;
    font-size: 14px;
    display: inline-block;
}

.overlay_rightBar_LineItem_RightCol {
    position: relative;
    left: 10px;
    width: 300px;
    text-align: left;
    font-size: 14px;
    display: inline-block;
}

.overlay_rightBar_LineItem_fullWidth {
    width: 500px;
    text-align: center;
    margin-top: 25px;
    position: relative;
}

.overlay_rightBar_LineItem_sectionHeader {
    font-size: 23px;
    color: gold;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid gold;
    border-bottom: 1px solid gold;
    width: 50%;
    display: inline-block;
    height: 32px;
}

.overlay_rightBar_LineItem_SectionSpacer {
    height: 30px;
}

.overlay_rightBar_Textbox {
    background-color: black;
    border: none;
    border-bottom: 1px solid lightgrey;
    background-color: #222222;
    width: 250px;
    color: white;
    font-size: 20px;
    text-align: center;
    border: 1px solid #111111;
    background-color: #333333;
    box-shadow: 0 0 10px #111111 inset;
}


.overlay_rightBar_divSave {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.overlay_rightBar_btnSave {
    width: 200px;
    right: 0px;
    border: 1px solid gold;
    color: gold;
    cursor: pointer;
    font-size: 40px;
    display: inline-block;
}


.overlay_rightBar_tbSearch {
    background-color: black;
    border: none;
    border-bottom: 1px solid lightgrey;
    background-color: #222222;
    width: 250px;
    color: white;
    font-size: 20px;
    text-align: center;
    border: 1px solid #111111;
    background-color: #333333;
    box-shadow: 0 0 10px #111111 inset;
}

.overlay_rightBar_plusMinusButton {
    height: 15px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

.overlay_rightBar_smallButton {
    font-size: 16px;
    border: 1px solid rgb(255,225,94);
    box-shadow: 0 0 5px black inset;
    color: black;
    height: 21px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: gold;
    cursor: pointer;
    display: inline-block;
}

.overlay_rightBar_smallButton_red {
    font-size: 15px;
    border: 1px solid darkred;
    box-shadow: 0 0 5px black inset;
    color: white;
    font-weight: bold;
    height: 21px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    background-color: red;
    cursor: pointer;
    display: inline-block;
}

.overlay_rightBar_bigButton {
    font-size: 30px;
    border: 2px solid gold;
    color: gold;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

/*#endregion*/



/*#region Scene*/



.overlay_scenes_currentScenediv {
    position: relative;
    top: 70px;
    width: 100%;
    height: 60px;
    text-align: center;
}

.overlay_scenes_label {
    font-size: 17px;
    text-align: left;
    width: 450px;
    display: inline-block;
    color: white;
    margin-bottom: 5px;
}

.overlay_scenes_availableScenes_Header {
    position: absolute;
    top: 200px;
    width: 100%;
}

.overlay_scenes_sceneList {
    height: calc(100% - 240px);
    position: absolute;
    top: 240px;
    overflow-y: scroll;
    width: 100%;
}



.overlay_scenes_sceneListItem_Wrapper {
    width: 450px;
    height: 75px;
    background-color: rgb(20,20,20);
    position: relative;
    border: 1px solid grey;
    box-shadow: 0 0 5px black;
    left: 50%;
    margin-left: -225px;
    margin-bottom: 15px;
    background-color: black;
    color: white;
    overflow: hidden;
}

    .overlay_scenes_sceneListItem_Wrapper:hover {
        box-shadow: 0 0 10px gold;
        border: 1px solid gold;
        color: gold;
    }

.overlay_scene_sceneListItem_Inner {
    position: relative;
    text-align: left;
    width: 100%;
}

.overlay_scene_sceneListItem_divImage {
    width: 450px;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    display: inline-block;
    left: 0px;
    position: relative;
}

.overlay_scene_sceneListItem_Image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    overflow: hidden;
    opacity: 0.8;
}

.overlay_scene_sceneListItem_SceneName {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 10px;
    width: 90%;
    margin-left: 5%;
    text-shadow: 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000;
}

.overlay_scenes_createScene_Wrapper {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 540px;
    height: 260px;
    top: 50%;
    margin-top: -200px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
}

.overlay_scenes_createScene_Inner {
    text-align: center;
}

.SceneCreationHeader {
    font-weight: bold;
    font-size: 23px;
    margin-top: 20px;
    margin-bottom: 20px;
}


.overlay_scenes_createScene_btnCreateByImage {
    padding: 5px;
    margin-top: 25px;
    width: 300px;
    border: 1px solid gold;
    color: black;
    font-weight: bold;
    background-color: gold;
    cursor: pointer;
    display: inline-block;
}



.overlay_scenes_createScene_btnCancelCreate {
    bottom: 20px;
    width: 300px;
    position: absolute;
    left: 50%;
    padding: 5px;
    margin-left: -150px;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    display: inline-block;
}



.overlay_scenes_ImportScene_Wrapper {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 540px;
    height: 210px;
    top: 50%;
    margin-top: -200px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
}


.overlay_scenes_mapSettings_Wrapper {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 570px;
    height: 700px;
    top: 50%;
    margin-top: -350px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
    overflow-y: scroll;
    overflow-x: hidden;
}

.overlay_scenes_mapSettings_Inner {
}

.overlay_scenes_mapSettings_descriptionTextareaWrapper {
    height: 70px;
    margin-bottom: 10px;
}

.overlay_scenes_mapSettings_descriptionTextarea {
    height: 70px;
    width: 280px;
    margin-bottom: -65px;
    font-size: 12px;
    margin-top: 10px;
    color: black;
}
/*#endregion*/
/*#region Campaign*/
.overlay_Campaign_SettingsList {
    height: calc(100% - 90px);
    position: absolute;
    top: 80px;
    overflow-y: scroll;
    width: 100%;
}

.overlay_Campaign_ImagePreview {
    width: 200px;
    height: 100px;
    overflow-y: hidden;
    object-fit: cover;
    display: inline-block;
    margin-top: 5px;
    border: 1px solid grey;
}

.overlay_Campaign_PlayerListItem {
    width: 500px;
    color: white;
    font-size: 20px;
    position: relative;
    height: 40px;
    display: inline-block;
}

.overlay_Campaign_PlayerListItemInner {
    position: relative;
    width: 100%;
    height: 100%;
}

.overlay_Campaign_PlayerListItem_Name {
    position: relative;
    left: 80px;
    width: 350px;
    text-align: left;
    display: inline-block;
}

.overlay_Campaign_PlayerListItem_EditButton {
    width: 90px;
    position: relative;
    right: 0px;
    border: 1px solid gold;
    color: gold;
    cursor: pointer;
    display: inline-block;
}

.overlay_Campaign_PlayerEdit {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 540px;
    height: 390px;
    top: 50%;
    margin-top: -200px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
}

.overlay_Campaign_PlayerEdit_Inner {
}

.overlay_Campaign_PlayerEdit_SettingsList {
}






/*#endregion*/



/*#region Tokens*/
.overlay_tokens_searcbhar {
    position: absolute;
    top: 80px;
    width: 100%;
}



.overlay_tokens_tokenList {
    position: absolute;
    top: 110px;
    height: calc(100% - 110px);
    width: 100%;
    overflow-y: scroll;
    text-align: center;
}

.overlay_tokens_tokenSection {
    width: 100%;
    display: inline-block;
}

.overlay_tokens_tokenListItem_Wrapper {
    width: 115px;
    height: 115px;
    border-radius: 150px;
    display: inline-block;
    float: left;
    border: 1px solid grey;
    margin-left: 10px;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
    position: relative;
    border-radius: 10px;
    border-radius: 150px;
    border: 3px solid rgb(80,80,80);
    overflow: hidden;
    box-shadow: 0 0 10px grey;
}

    .overlay_tokens_tokenListItem_Wrapper:hover {
        border-color: gold;
        box-shadow: 0 0 20px gold;
    }

.overlay_tokens_tokenListItem_Inner {
}


.overlay_tokens_tokenListItem_divImage {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
}

.overlay_tokens_tokenListItem_img {
    min-height: 100%;
    display: inline-block;
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    max-width: 100%;
    top: 0px;
}

.overlay_tokens_tokenListItem_Name {
    position: absolute;
    bottom: 30px;
    width: calc(100% - 20px);
    padding-right: 10px;
    padding-left: 10px;
    background-color: black;
    box-shadow: 0 0 10px gold;
    color: gold;
    font-size: 14px;
    pointer-events: none;
}

.overlay_tokens_settings_Wrapper {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 540px;
    height: 740px;
    top: 50%;
    margin-top: -355px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
    text-align: center;
}

.overlay_tokens_settings_Inner {
}

.overlay_tokens_settings_divImage {
    margin-top: 20px;
}

.overlay_tokens_statimagediv {
    width: 200px;
    height: 50px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.overlay_tokens_btnClearStatImage {
}

.overlay_tokens_statsheetimage {
    width: 100%;
}

.overlay_tokens_settings_img {
    height: 200px;
}

.overlay_tokens_settings_descTextArea_wrapper {
    height: 45px;
}

.overlay_tokens_settings_descTextArea {
    margin-bottom: -40px;
    width: 250px;
    height: 45px;
}

.divTokenListItem_divConfigure_filesizeWrapper {
    height: 60px;
}

.divTokenListItem_divConfigure_currentSize {
    height: 30px;
}

.divTokenListItem_divConfigure_btnCompress {
    border: 2px solid gold;
    width: 100px;
    text-align: center;
    font-weight: bold;
    color: gold;
}
/*#endregion*/
/*#region Dice*/




/*#endregion*/


/*#region Asset*/
.overlay_assets_searcbhar {
    position: absolute;
    top: 80px;
    width: 100%;
}

.overlay_assets_assetList {
    position: absolute;
    top: 110px;
    height: calc(100% - 110px);
    width: 100%;
    overflow-y: scroll;
    text-align: center;
}

.overlay_asset_listItem_wrapper {
    width: 150px;
    height: 150px;
    display: inline-block;
    float: left;
    border: 1px solid grey;
    margin-left: 10px;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
    position: relative;
    border-radius: 10px;
}

.overlay_asset_listItem_inner {
}

.overlay_asset_listItem_divImg {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
}

.overlay_asset_listItem_img {
    max-height: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.overlay_asset_listItem_divName {
    position: absolute;
    bottom: 10px;
    width: 100%;
    background-color: black;
    box-shadow: 0 0 10px gold;
    color: gold;
    font-size: 18px;
}


.overlay_assets_createImageAsset_Wrapper {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 540px;
    height: 230px;
    top: 50%;
    margin-top: -200px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
}

.overlay_assets_createImageAsset_Inner {
    text-align: center;
}

.overlay_assets_createImageAsset_btnCreateByImage {
    padding: 5px;
    margin-top: 25px;
    width: 300px;
    border: 1px solid gold;
    color: black;
    font-weight: bold;
    background-color: gold;
    cursor: pointer;
    display: inline-block;
}

.overlay_assets_createImageAsset_btnCancelCreate {
    width: 300px;
    padding: 5px;
    margin-top: 15px;
    position: relative;
    right: 0px;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    display: inline-block;
}


.overlay_assets_configScreen {
    position: fixed;
    z-index: 1000;
    right: 80px;
    width: 540px;
    height: 530px;
    top: 50%;
    margin-top: -315px;
    border: 1px solid gold;
    box-shadow: 0 0 20px black;
    background-color: black;
    text-align: center;
}


.overlay_assets_configscreen_inner {
}

.overlay_assets_configScreen_divImage {
    margin-top: 20px;
}

.overlay_assets_configScreen_img {
    height: 200px;
}

.overlay_assets_configScreen_descTextArea_wrapper {
    height: 45px;
}

.overlay_assets_configScreen_filesizeWrapper {
    height: 60px;
}

.overlay_assets_configScreen_currentSize {
    height: 30px;
}

.overlay_assets_configScreen_btnCompress {
    border: 2px solid gold;
    width: 100px;
    text-align: center;
    font-weight: bold;
    color: gold;
}
/*#endregion*/
/*#region Online Controls*/
.overlay_DMOnlineControls_Wrapper {
    box-shadow: 0 0 10px black;
    border: 1px solid rgb(40,40,40);
    position: absolute;
    height: 65px;
    right: 5px;
    top: 60px;
    width: 185px;
    text-align: center;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
    font-size: 17px;
    overflow: hidden;
    text-align: center;
    z-index: 20;
}

.overlay_DMOnlineControls_Inner {
    display: inline-block;
    margin-left: -10px;
}

.overlay_DMOnlineControls_LineItem {
    margin-top: 5px;
    width: 100%;
    position: relative;
    display: inline-block;
    left: 0px;
    text-align: right;
}

.overlay_DMOnlineControls_LeftCol {
    width: 75px;
    position: relative;
    left: 0px;
    display: inline-block;
}

.overlay_DMOnlineControls_RightCol {
    width: 100px;
    position: relative;
    right: 0px;
    display: inline-block;
}

.overlay_DMOnlineControls_btnOn {
    background-color: gold;
    color: black;
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
    cursor: pointer;
}

.overlay_DMOnlineControls_btnOff {
    background-color: grey;
    color: white;
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
    cursor: pointer;
}


/*#endregion*/

/*#region Online Players*/
.overlay_onlinePlayers_Wrapper {
    box-shadow: 0 0 10px black;
    border: 1px solid rgb(40,40,40);
    position: absolute;
    top: 140px;
    right: 0px;
    width: 325px;
    text-align: center;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
    font-size: 17px;
    overflow: hidden;
    text-align: center;
    z-index: 20;
}

.overlay_onlinePlayers_Inner {
    display: inline-block;
    margin-left: -10px;
}

.overlay_onlinePlayers_List {
}

.overlay_onlinePlayers_LineItem {
    font-size: 12px;
    position: relative;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.overlay_onlinePlayers_LineItem_inner {
}

    .overlay_onlinePlayers_LineItem_inner:hover {
    }

.overlay_onlinePlayers_LineItem_nameDiv {
    display: inline-block;
    left: 0px;
    font-weight: bold;
    color: gold;
    text-align: center;
    width: 130px;
}

.overlay_onlinePlayers_LineItem_statusDiv {
    right: 0px;
    display: inline-block;
    width: 180px;
}
/*#endregion*/


/*#region DM Video*/
.overlay_DmVideo_wrapper {
    width: 400px;
    height: 280px;
    border: none;
    position: fixed;
    right: -20px;
    bottom: -30px;
    z-index: 19;
    pointer-events: none;
}

.overlay_DmVideo_inner {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.overlay_DmVideo_VideoWrapper {
}

.videoNodeDM {
    width: 700px;
    position: absolute;
    left: -120px;
    top: -110px;


}

.videoNodeWrapperDM {
    border: 2px solid black;
    border-radius: 30px;
    box-shadow: 0 0 10px black;
    width: 400px;
    height: 280px;
    overflow: hidden;
    position: absolute;
    display: flex;
  background-color:rgb(100,0,0);
}

.videoNodeTitleDM {
    position: absolute;
    bottom: 40px;
    color: gold;
    text-shadow: 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    text-align: center;
}


/*#endregion*/


/*#region Selected Token*/
#xRot {
}

.overlay_SelectedTokenWrapper {
    border-radius: 10px;
    box-shadow: 0 0 30px black;
    position: fixed;
    height: 295px;
    left: 50%;
    margin-left: -350px;
    bottom: 20px;
    width: 700px;
    text-align: center;
    background-color: rgba(40, 40, 40, .65);
    backdrop-filter: blur(5px);
    font-size: 20px;
    z-index: 100;
    background-color: gold;
    border: 2px solid black;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#474747+0,0e0e0e+100 */
    background-color: black;
    border: 2px solid gold;
}

.overlay_SelectedTokenInner {
    box-shadow: 0 0 20px black inset;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding-top: 5px;
}

.overlay_SelectedToken_divImgWrapper {
    width: 115px;
    height: 115px;
    border-radius: 150px;
    display: inline-block;
    float: left;
    border: 1px solid grey;
    margin-left: 10px;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
    position: relative;
    border-radius: 10px;
    border-radius: 150px;
    border: 3px solid gold;
    overflow: hidden;
    box-shadow: 0 0 10px grey;
    position: absolute;
    left: -60px;
    top: -15px;
    box-shadow: 0 0 20px black;
}

.overlay_SelectedToken_divImgInner {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
}

.overlay_SelectedToken_divImg_img {
    min-height: 100%;
    display: inline-block;
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    width: 100%;
    top: 0px;
}

.overlay_SelectedToken_TopRow {
}

.overlay_SelectedToken_TopRow_Left {
    position: absolute;
    left: 0px;
    top: -54px;
    width: 220px;
    height: 50px;
    background-color: black;
    text-align: center;
    border-bottom: 2px solid gold;
    border-top: 2px solid gold;
    border-left: 2px solid gold;
    border-top-left-radius: 30px;
    background-color: rgba(40, 40, 40, .85);
    background-color: black;
}

.overlay_SelectedToken_TopRow_Left_divHealthy {
    position: absolute;
    left: 15px;
    bottom: 6px;
}

.overlay_SelectedToken_TopRow_Left_HealthStatusSection_btn {
    width: 35px;
    cursor: pointer;
}

.overlay_SelectedToken_TopRow_Left_divWounded {
    position: absolute;
    left: 85px;
    bottom: 6px;
}

.overlay_SelectedToken_TopRow_Left_divdead {
    position: absolute;
    left: 155px;
    bottom: 6px;
}

.overlay_SelectedToken_TopRow_Right {
    position: absolute;
    top: -54px;
    left: 350px;
    width: 250px;
}

.overlaySelectedToken_TopRow_Right_btnVisible {
    position: absolute;
    width: 200px;
    height: 45px;
    background-color: black;
    text-align: center;
    border: 2px solid gold;
    border-top-right-radius: 30px;
    background-color: rgba(40, 40, 40, .85);
    font-size: 30px;
    color: gold;
    padding-top: 5px;
    background-color: black;
    cursor: pointer;
}

.overlay_SelectedToken_TopRow_Center {
    position: absolute;
    left: 210px;
    top: -73px;
    font-size: 50px;
    width: 170px;
    border: 1px solid gold;
    border-bottom: 1px solid gold;
    background-color: white;
    color: black;
    font-weight: bold;
    text-align: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    box-shadow: 0 0 10px black;
    color: black;
    height: 70px;
    background-color: rgba(255,255,255, .90);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.overlay_SelectedToken_TopRow_Center_inner {
    box-shadow: 0 0 10px black inset;
    width: 100%;
    height: 100%;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.overlay_SelectedToken_TopRow_CurrentHps {
    position: absolute;
    top: -5px;
    width: 100%;
    height: 100%;
}

.overlay_SelectedToken_TopRow_CurrentHps_healthLabel {
    font-size: 14px;
    position: absolute;
    bottom: 3px;
    left: 65px;
    border-top: 1px solid black;
}

.overlay_SelectedToken_divCloseButton {
    position: absolute;
    right: -30px;
    top: -30px;
    border: 2px solid gold;
    border-radius: 50px;
    box-shadow: 0 0 20px red;
    height: 50px;
    width: 50px;
    cursor: pointer;
    bottom: 130px;
}

.overlay_SelectedToken_btnClose {
    width: 50px;
    height: 50px;
}

.overlay_SelectedToken_MainContent {
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay_SelectedToken_MainContent_LeftCol {
    width: 500px;
    position: absolute;
    left: 0px;
    height: 100%;
}

.overlay_SelectedToken_labelRow {
    width: 100%;
    top: 10px;
    position: absolute;
}

.overlay_SelectedToken_label {
    position: absolute;
    font-size: 15px;
    left: 80px;
    width: 80px;
    color: gold;
    text-align: center;
}

.overlay_SelectedToken_divTbLable {
    position: absolute;
    left: 170px;
}

.overlay_SelectedToken_tbLabel {
    width: 180px;
    border: 1px solid black;
    box-shadow: 0 0 5px black inset;
    height: 28px;
    font-size: 18px;
    text-align: center;
}

.overlay_SelectedToken_divBtnSheet {
    position: absolute;
    top: 0px;
    right: 100px;
}


.overlay_SelectedToken_divBtnLoot {
    position: absolute;
    top: 0px;
    right: 60px;
    margin-top: 2px;
}



.overlay_SelectedToken_btnSheet {
    width: 45px;
    cursor: pointer;
}

.overlay_SelectedToken_btnAi {
    height: 40px;
    cursor: pointer;
}

.overlay_SelectedToken_divEncounterAddRemove {
    position: absolute;
    top: 15px;
}

.overlay_SelectedToken_btnAddToEncounter {
    width: 65px;
    cursor: pointer;
}

.overlay_SelectedToken_ConditionRow {
    width: 100%;
    top: 55px;
    position: absolute;
}

.overlay_SelectedToken_divTbConditions {
    position: absolute;
    font-size: 15px;
    left: 170px;
    width: 80px;
    color: gold;
}

.overlay_SelectedToken_tbConditions {
    width: 270px;
    border: 1px solid black;
    box-shadow: 0 0 5px black inset;
    height: 28px;
    font-size: 18px;
    text-align: center;
}

.overlay_SelectedToken_divPositionalSettings {
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 170px;
}

.overlay_SelectedToken_divPositionalSettings_Row {
    width: 100%;
    position: relative;
    display: inline-block;
    height: 30px;
}

.overlay_SelectedToken_divPositionalSettings_inputarea {
    width: 255px;
    left: 170px;
    position: relative;
}



.overlay_SelectedToken_divPositionalSettings_PlusMinusBtns {
    height: 15px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

.overlay_SelectedToken_numberArea {
    width: 80px;
    display: inline-block;
    text-align: center;
}

.overlay_SelectedToken_MainContent_RightCol {
    width: 200px;
    height: 100%;
    position: absolute;
    right: 0px;
}

.overlay_SelectedToken_divSettingsButton {
    position: absolute;
    right: 40px;
    top: 20px;
}

.overlay_SelectedToken_btnAdditionalSettings {
    width: 60px;
    cursor: pointer;
}

.overlay_SelectedToken_divOwnerSelect {
    position: absolute;
    color: gold;
    bottom: 180px;
    width: 100%;
    text-align: center;
}

.divOwnerSelect_divSelectobj {
    width: 100%;
    position: absolute;
}

.overlay_SelectedToken_ownerSelect {
    width: 90%;
    height: 30px;
    font-size: 20px;
    color: black;
}

.overlay_SelectedToken_divSaveToDefaults {
    position: absolute;
    bottom: 90px;
    width: 100%;
    text-align: center;
}

.overlay_SelectedToken_btnSaveToDefaults {
    background-color: royalblue;
    width: 125px;
    display: inline-block;
    font-size: 14px;
    height: 17px;
    padding: 5px;
    box-shadow: 0 0 10px blue inset;
    cursor: pointer;
}

.overlay_SelectedToken_divDeleteInstance {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.overlay_SelectedToken_btnDeleteInstance {
    background-color: darkred;
    width: 125px;
    display: inline-block;
    font-size: 14px;
    height: 17px;
    padding: 5px;
    box-shadow: 0 0 10px red inset;
    cursor: pointer;
}


.divMainScreen_SelectedToken_divModifyHpsWrapper {
    border: 1px solid black;
    width: 110px;
    height: 40px;
    position: fixed;
    background-color: white;
    bottom: 307px;
    right: 345px;
    font-size: 30px;
    box-shadow: 0 0 20px black;
    border: 2px solid black;
    text-align: center;
}

.divMainScreen_SelectedToken_divModifyHpsInner {
}

.divMainScreen_SelectedToken_divModifyHps_tbInput {
    font-weight: bold;
    font-size: 30px;
    width: 100%;
    height: 40px;
    text-align: center;
    border: none;
    background: transparent;
    box-shadow: 0 0 20px black inset;
    border-radius: 0px
}

/*#endregion*/




/*#region Selected Asset*/
.overlay_SelectedAssetWrapper {
    border-radius: 10px;
    box-shadow: 0 0 30px black;
    position: fixed;
    height: 185px;
    left: 50%;
    margin-left: -350px;
    bottom: 5px;
    width: 700px;
    text-align: center;
    background-color: rgba(40, 40, 40, .65);
    backdrop-filter: blur(5px);
    font-size: 20px;
    z-index: 100;
    background-color: gold;
    border: 2px solid black;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#474747+0,0e0e0e+100 */
    background-color: black;
    border: 2px solid gold;
}

.overlay_SelectedAssetInner {
    box-shadow: 0 0 20px black inset;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding-top: 5px;
}

.overlay_Selectedasset_divAI {
    position: absolute;
    left: 15px;
    bottom: 10px;
    z-index: 19;
}

.overlay_Selectedasset_btnAi {
    height: 40px;
}


.overlay_SelectedAsset_divImgWrapper {
    width: 115px;
    height: 115px;
    border-radius: 150px;
    display: inline-block;
    float: left;
    border: 1px solid grey;
    margin-left: 10px;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
    position: relative;
    border-radius: 10px;
    border-radius: 150px;
    border: 3px solid gold;
    overflow: hidden;
    box-shadow: 0 0 10px grey;
    position: absolute;
    left: -60px;
    top: -15px;
    box-shadow: 0 0 20px black;
}

.overlay_SelectedAsset_divImgInner {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
}

.overlay_SelectedAsset_divImg_img {
    min-height: 100%;
    display: inline-block;
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    width: 100%;
    top: 0px;
}

.overlay_SelectedAsset_TopRow {
}

.overlay_SelectedAsset_TopRow_Left {
    position: absolute;
    left: 0px;
    top: -54px;
    width: 220px;
    height: 50px;
    background-color: black;
    text-align: center;
    border-bottom: 2px solid gold;
    border-top: 2px solid gold;
    border-left: 2px solid gold;
    border-top-left-radius: 30px;
    background-color: rgba(40, 40, 40, .85);
    background-color: black;
}



.overlay_SelectedAsset_TopRow_Right {
    position: absolute;
    top: -54px;
    left: 350px;
    width: 250px;
}

.overlaySelectedAsset_TopRow_Right_btnVisible {
    position: absolute;
    width: 200px;
    height: 45px;
    background-color: black;
    text-align: center;
    border: 2px solid gold;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    background-color: rgba(40, 40, 40, .85);
    font-size: 30px;
    color: gold;
    padding-top: 5px;
    background-color: black;
    cursor: pointer;
}

.overlay_SelectedAsset_TopRow_Center {
    position: absolute;
    left: 210px;
    top: -73px;
    font-size: 50px;
    width: 170px;
    border: 1px solid gold;
    border-bottom: 1px solid gold;
    background-color: white;
    color: black;
    font-weight: bold;
    text-align: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    box-shadow: 0 0 10px black;
    color: black;
    height: 70px;
    background-color: rgba(255,255,255, .90);
    backdrop-filter: blur(5px);
    cursor: pointer;
}




.overlay_SelectedAsset_divCloseButton {
    position: absolute;
    right: -30px;
    top: -30px;
    border: 2px solid gold;
    border-radius: 50px;
    box-shadow: 0 0 20px red;
    height: 50px;
    width: 50px;
    cursor: pointer;
    bottom: 130px;
}

.overlay_SelectedAsset_btnClose {
    width: 50px;
    height: 50px;
}

.overlay_SelectedAsset_MainContent {
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay_SelectedAsset_MainContent_LeftCol {
    width: 500px;
    position: absolute;
    left: 0px;
    height: 100%;
}

.overlay_SelectedAsset_label {
    position: absolute;
    font-size: 15px;
    left: 80px;
    width: 80px;
    color: gold;
    text-align: center;
}



.overlay_SelectedAsset_divPositionalSettings {
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 170px;
}

.overlay_SelectedAsset_divPositionalSettings_Row {
    width: 100%;
    position: relative;
    display: inline-block;
    height: 30px;
}

.overlay_SelectedAsset_divPositionalSettings_inputarea {
    width: 255px;
    left: 170px;
    position: relative;
}



.overlay_SelectedAsset_divPositionalSettings_PlusMinusBtns {
    height: 15px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

.overlay_SelectedAsset_numberArea {
    width: 80px;
    display: inline-block;
    text-align: center;
}

.overlay_SelectedAsset_MainContent_RightCol {
    width: 200px;
    height: 100%;
    position: absolute;
    right: 0px;
}

.overlay_SelectedAsset_divSettingsButton {
    position: absolute;
    right: 40px;
    top: 20px;
}

.overlay_SelectedAsset_btnAdditionalSettings {
    width: 60px;
    cursor: pointer;
}

.overlay_SelectedAsset_divOwnerSelect {
    position: absolute;
    color: gold;
    bottom: 180px;
    width: 100%;
    text-align: center;
}

.divOwnerSelect_divSelectobj {
    width: 100%;
    position: absolute;
}

.overlay_SelectedAsset_ownerSelect {
    width: 90%;
    height: 30px;
    font-size: 20px;
    color: black;
}

.overlay_SelectedAsset_divSaveToDefaults {
    position: absolute;
    bottom: 90px;
    width: 100%;
    text-align: center;
}

.overlay_SelectedAsset_btnSaveToDefaults {
    background-color: royalblue;
    width: 125px;
    display: inline-block;
    font-size: 14px;
    height: 17px;
    padding: 5px;
    box-shadow: 0 0 10px blue inset;
    cursor: pointer;
}

.overlay_SelectedAsset_divDeleteInstance {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.overlay_SelectedAsset_btnDeleteInstance {
    background-color: darkred;
    width: 125px;
    display: inline-block;
    font-size: 14px;
    height: 17px;
    padding: 5px;
    box-shadow: 0 0 10px red inset;
    cursor: pointer;
}



/*#endregion*/


/*#region Encounter Manager */



.divEncounterManager_Inner {
    position: absolute;
    box-shadow: 0 0 10px rgb(50,0,0) inset;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.divEncounterManager_CombatantList {
    width: 510px;
    display: inline-block;
    position: absolute;
    left: 20px;
    top: 65px;
    text-align: center;
    height: calc(100% - 205px);
    overflow-y: scroll;
    border: 1px solid black;
    box-shadow: 0 0 20px black inset;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: darkred;
    overflow-x: hidden;
    overflow-y: auto;
}

.divEncounterManager_bottomBar {
    height: 80px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.divEncounterManager_divAutoRollNPC {
    position: absolute;
    bottom: 55px;
    width: 190px;
    left: 20px;
    color: white;
    font-size: 20px;
}

.divEncounterManager_btnRollForIniativebutton {
    height: 30px;
    width: 180px;
    position: absolute;
    bottom: 10px;
    left: 25px;
    border: 1px solid gold;
    padding-top: 2px;
    background-color: black;
    box-shadow: 0 0 10px black;
    cursor: pointer;
}

.divEncounterManager_btnNextTurn {
    width: 130px;
    position: absolute;
    left: 20px;
    border: 1px solid gold;
    color: gold;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    text-align: center;
}

.divEncounterManager_BottomBar_btnStartButton {
    height: 60px;
    width: 120px;
    padding-top: 5px;
    position: absolute;
    bottom: 10px;
    right: 20px;
    border: 1px solid gold;
    background-color: black;
    box-shadow: 0 0 10px black;
    cursor: pointer;
}

.divEncounterManager_BottomBar_btnEndButton {
    height: 60px;
    width: 120px;
    padding-top: 5px;
    position: absolute;
    bottom: 10px;
    right: 20px;
    border: 1px solid gold;
    background-color: black;
    box-shadow: 0 0 10px black;
    cursor: pointer;
    color: red;
    font-weight: bold;
}
/*----------------------------------------*/
.divEncounterManager_LineItem {
    width: 475px;
    height: 50px;
    margin-top: 5px;
    margin-top: 10px;
    box-shadow: 0 0 10px rgb(50,0,0);
    position: relative;
    border: 1px solid rgb(200, 160, 0);
    left: 10px;
    cursor: pointer;
    background-color: darkred;
}

.divEncounterManager_LineItem_ActiveTurn {
    width: 475px;
    height: 50px;
    margin-top: 5px;
    margin-top: 10px;
    box-shadow: 0 0 10px rgb(50,0,0);
    position: relative;
    border: 1px solid rgb(200, 160, 0);
    left: 10px;
    cursor: pointer;
    color: red;
    background-color: rgb(33, 129, 18);
}

.divEncounterManager_LineItem_dead {
    width: 475px;
    height: 50px;
    margin-top: 5px;
    margin-top: 10px;
    box-shadow: 0 0 10px rgb(50,0,0);
    position: relative;
    border: 1px solid rgb(200, 160, 0);
    left: 10px;
    cursor: pointer;
    background-color: #7d7e7d;
}



.divEncounterManager_LineItem:hover {
    background-color: rgb(198,0,0);
}

.divEncounterManager_LineItemInner {
    width: 100%;
    position: absolute;
}

.divEncounterManager_LineItem_tokenImage {
    position: absolute;
    left: 10px;
}

.divEncounterManager_LineItem_imgtokenImage {
    max-height: 50px;
    max-width: 60px;
}

.divEncounterManager_LineItem_divInitiative {
    width: 80px;
    height: 45px;
    position: absolute;
    right: 10px;
    top: 0px;
}

.divEncounterManager_LineItem_tbIniative {
    width: 75px;
    height: 35px;
    font-size: 35px;
    border-radius: 5px;
    border: 1px solid gold;
    text-align: center;
    margin-top: 5px;
    background-color: rgb(40,40,40);
    color: gold;
}

.divEncounterManager_LineItem_tbIniative_dead {
    width: 75px;
    height: 35px;
    font-size: 35px;
    border-radius: 5px;
    border: 1px solid black;
    text-align: center;
    margin-top: 5px;
    background-color: rgb(40,40,40);
    color: black;
}


.divEncounterManager_LineItem_divDisplayName {
    width: 270px;
    height: 50px;
    position: absolute;
    left: 70px;
    top: 5px;
    font-size: 20px;
    color: gold;
    font-weight: bold;
    text-align: left;
    margin-top:5px;
}

.divEncounterManager_LineItem_divDisplayName_dead {
    width: 270px;
    height: 50px;
    position: absolute;
    left: 70px;
    top: 5px;
    font-size: 25px;
    color: black;
    font-weight: bold;
    text-align: left;
}



.divEncounterManager_LineItem_divRemove {
    position: absolute;
    left: 300px;
}

.divEncounterManager_LineItem_btnRemove {
    height: 40px;
}






/*#endregion*/

/*#region Confirm*/
.divConfirm {
    position: absolute;
    width: 100%;
    height: 500px;
    box-shadow: 0 0px 30px red;
    position: fixed;
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    z-index: 200;
}

.divConfim_Inner {
    position: absolute;
    width: 100%;
    height: 350px;
    top: 50%;
    margin-top: -175px;
    background-color: black;
    box-shadow: 0 0 20px gold;
    border-top: 2px solid gold;
    border-bottom: 2px solid gold;
}

.divConfirm_Header {
    margin-top: 30px;
    color: white;
    font-size: 45px;
}

.divConfirm_divButtons {
    margin-top: 100px;
}

.divConfirm_btnYes {
    font-size: 30px;
    border: 2px solid green;
    color: green;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin-right: 30px;
}

.divConfirm_btnNo {
    font-size: 30px;
    border: 2px solid red;
    color: red;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin-left: 30px;
}
/*#endregion*/


/*#region Selected Door*/
.divMainScreen_SelectedDoorMenu_Wrapper {
    border-radius: 10px;
    box-shadow: 0 0 30px black;
    position: fixed;
    height: 175px;
    left: 50%;
    margin-left: -150px;
    bottom: 20px;
    width: 300px;
    text-align: center;
    background-color: rgba(40, 40, 40, .65);
    backdrop-filter: blur(5px);
    font-size: 20px;
    z-index: 100;
    background-color: gold;
    border: 2px solid black;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#474747+0,0e0e0e+100 */
    background-color: black;
    border: 2px solid gold;
}

.divMainScreen_SelectedDoorMenu_Inner {
    box-shadow: 0 0 20px black inset;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding-top: 5px;
}

.divMainScreen_SelectDoor_ButtonPanel {
}

.divMainScreen_SelectedDoor_OpenButton {
    margin-top: 20px;
    font-size: 30px;
    background-color: gold;
    color: black;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.divMainScreen_SelectedDoor_visibleButton {
    margin-top: 30px;
    font-size: 30px;
    background-color: gold;
    color: black;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.divMainScreen_selectedDoor_divClose {
    position: absolute;
    top: -20px;
    right: -20px;
    border: 2px solid gold;
    border-radius: 30px;
    box-shadow: 0 0 10px red;
}

.divMainScreen_SelectedDoor_divCBShowAsWall{
margin-top:10px;
}



/*#endregion*/
/*#region StatImage*/
.overlay_StatImage {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    z-index: 2000;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
}

.overlay_statImage_Inner {
    top: 70px;
    position: relative;
    display: inline-block;
    padding: 10px;
    background-color: black;
    border: 2px solid black;
    box-shadow: 0 0 10px black;
    max-height: 700px;
    overflow-y: auto;
    bottom: 0px;
}

.overlay_StatImage_Image {
}


/*#endregion*/




/*#region Messaging*/

.overlay_Messaging {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    z-index: 2000;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
}

.overlay_Messaging_Inner {
    width: 900px;
    height: 600px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    z-index: 999;
    top: 50%;
    margin-top: -330px;
    background-color: black;
    box-shadow: -5px 0px 80px black inset;
    border: 3px ridge rgb(20,20,20);
    padding: 10px;
    background-image: url(data:image/png;base64,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);
    background-color: #dfcd87;
}


.overlay_Messaging_Inner {
    text-align: center;
    font-family: Papyrus;
}


.overlay_message_LeftCol {
    position: absolute;
    width: 240px;
    box-shadow: 0 0 10px black inset;
    border-radius: 30px;
    height: calc(100% - 40px);
    left: 20px;
    padding-top: 20px;
}

.overlay_messaging_leftCol_Header {
    font-weight: bold;
    color: black;
    font-size: 20px;
}

.overlay_messaging_leftCol_list {
    text-align: center;
}

.overlay_messaging_recipientBtn {
    color: rgb(193,180,127);
    font-size: 18px;
    background-color: black;
    margin-top: 10px;
    width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    border-radius: 15px;
    font-weight: bold;
}

    .overlay_messaging_recipientBtn:hover {
        color: gold;
    }

.overlay_messaging_divider {
    border: 1px dashed black;
    width: 50px;
    margin-top: 20px;
}

.overlay_messaging_recipientBtn_Clicked {
    color: black;
    font-size: 18px;
    background-color: gold;
    margin-top: 10px;
    width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    border-radius: 15px;
    font-weight: bold;
}

.overlay_messaging_rightCol {
    height: calc(100% - 20px);
    width: 580px;
    position: absolute;
    right: 40px;
}

.overlay_messaging_divMessageType {
    text-align: center;
}

.overlay_messaging_btnTextType {
    height: 100px;
}

.overlay_messaging_btnImageType {
    margin-left: 80px;
    height: 100px;
}

.overlay_messaging_btnYoutubeType {
    margin-left: 80px;
    height: 100px;
}


.overlay_messaging_divImageInput {
}

.overlay_messaging_divImageInput_img {
    max-width: 500px;
    max-height: 400px;
    border: 2px solid black;
    box-shadow: 0 0 10px black;
}

.overlay_messaging_divYoutubeInput {
}

.overlay_messaging_divYoutubeinput_header {
    font-size: 20px;
    color: black;
    font-weight: bold;
    margin-top: 0px;
}

.overlay_messaging_divYoutubeinput_tb {
    font-size: 20px;
    width: 400px;
    margin-bottom: 10px;
    font-family: Papyrus;
}

.overlay_messaging_Youtube_Preview {
    display: inline-block;
    width: 450px;
    height: 250px;
    position: absolute;
    left: 65px;
}

.overlay_messaging_textinputarea {
    width: 500px;
    height: 300px;
    padding: 10px;
    font-family: Papyrus;
    font-size: 20px;
    border: 2px solid rgb(40,40,40);
    box-shadow: 0 0 10px inset;
}



.overlay_messaging_btnSend {
    font-size: 40px;
    background-color: black;
    position: absolute;
    bottom: 15px;
    width: 300px;
    border-radius: 20px;
    right: 150px;
    color: rgb(193,180,127);
}


/*#endregion*/




/*#region Message Received Text*/
.overlay_MessageReceivedText {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    z-index: 2000;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
}

.overlay_MessageReceivedText_Inner {
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 200px;
    z-index: 999;
    background-color: black;
    box-shadow: -5px 0px 80px black inset;
    border: 3px ridge rgb(20,20,20);
    padding: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
    background-image: url(data:image/png;base64,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);
    background-color: #dfcd87;
    color: black;
    font-family: Papyrus;
    font-size: 20px;
    font-weight: bold;
}

.overlay_MessageReceivedText_Header {
}

.overlay_MessageReceivedText_message {
}
/*#endregion*/




/*#region Message Received Image*/
.overlay_MessageReceivedVideo {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    z-index: 2000;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
    text-align: center;
}

.overlay_MessageReceivedVideo_Inner {
    width: 1060px;
    position: absolute;
    left: 50%;
    margin-left: -530px;
    top: 150px;
    z-index: 999;
    background-color: black;
    box-shadow: -5px 0px 80px black inset;
    border: 3px ridge rgb(20,20,20);
    padding: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
    background-image: url(data:image/png;base64,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);
    background-color: #dfcd87;
    color: black;
    font-family: Papyrus;
    font-size: 20px;
    font-weight: bold;
}


.overlay_MessageReceivedVideo_Iframe {
    box-shadow: 0 0 30px black;
    border: 2px solid black;
    margin-left: 50px;
}
/*#endregion*/
/*#region Message Received Video*/
.overlay_MessageReceivedImage {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    z-index: 2000;
    background-color: rgba(40, 40, 40, .45);
    backdrop-filter: blur(5px);
}

.overlay_MessageReceivedImage_Inner {
    top: 70px;
    position: relative;
    display: inline-block;
    padding: 10px;
    background-color: black;
    border: 2px solid black;
    box-shadow: 0 0 10px black;
    max-height: 800px;
    max-width: 1000px;
    overflow-y: auto;
    bottom: 0px;
}

.overlay_messageReceivedImage_img {
    max-width: 1000px;
    width: 100%;
    height: auto;
}
/*#endregion*/



/*#region Overlay_AI*/
.overlay_Ai_gptOutput {
    width: 510px;
    display: inline-block;
    position: absolute;
    left: 20px;
    top: 65px;
    text-align: center;
    height: calc(100% - 165px);
    overflow-y: scroll;
    border: 1px solid black;
    box-shadow: 0 0 20px black inset;
    border-radius: 10px;
    border-bottom-left-radius: 10px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#356aa0+0,356aa0+100;Blue+Flat */
    background: #356aa0; /* Old browsers */
    background: -moz-linear-gradient(top, #356aa0 0%, #356aa0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #356aa0 0%,#356aa0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #356aa0 0%,#356aa0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-image: url(data:image/png;base64,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);
    background-color: #dfcd87;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 12px;
}

.overlay_Ai_DMInput {
    position: absolute;
    left: 20px;
    bottom: 0px;
    height: 60px;
    width: 490px;
    border-radius: 5px;
    border: 1px solid black;
    box-shadow: 0 0 10px black inset;
    background-color: white;
    color: black;
    font-size: 20px;
    padding: 10px;
}



.overlay_Ai_LineItem {
    text-align: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.overlay_Ai_LineItem_right {
    text-align: right;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}


.overlay_Ai_Msg_Prompt {
    border: 1px solid black;
    background-color: white;
    max-width: 75%;
    color: black;
    left: 0px;
    margin-left: 15px;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}


.overlay_Ai_Msg_Response {
    text-align: left;
    border: 1px solid black;
    background-color: gold;
    max-width: 75%;
    color: black;
    left: 0px;
    display: inline-block;
    margin-right: 15px;
    padding: 5px;
    box-shadow: 0 0 10px black;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.overlay_Ai_loading {
    width: 200px;
    font-style: italic;
    color: black;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
    font-size: 16px;
}

/*#endregion*/


/*#region EditChatGPT Window*/
.overlay_campaign_chatgptEdit {
    position: fixed;
    height: 450px;
    width: 600px;
    background-color: black;
    top: 150px;
    right: 50px;
    border: 1px solid gold;
    padding: 10px;
}

.overlay_campaign_chatgptEdit_inner {
}

.overlay_campaign_chatgptEdit_Header {
    width: 100%;
    text-align: center;
}

.overlay_campaign_chatgptEdit_textareawrapper {
    height: 110px;
}

.overlay_campaign_chatgptEdit_textarea {
    width: 300px;
    height: 100px;
    margin-bottom: -90px;
}

.overlay_campaign_chatgptEdit_btndone_wrapper {
    text-align: center;
    margin-top: 30px;
}


/*#endregion*/


/*#region Music Controls*/
.overlay_MusicControls_Wrapper {
    position: fixed;
    z-index: 19;
    height: 50px;
    width: 400px;
    border: 1px solid red;
    left: 160px;
    top: 60px;
    box-shadow: 0 0 10px black;
    border: 1px solid rgb(40,40,40);
    position: absolute;
    text-align: center;
    background-color: rgba(40, 40, 40, .75);
    backdrop-filter: blur(5px);
    font-size: 17px;
    overflow: hidden;
    text-align: center;
    z-index: 20;
}

.overlay_MusicControls_Inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10px;
}

.overlay_MusicControls_divOnOff {
    width: 100px;
    position: absolute;
    left: 10px;
    height: 30px;
}

.overlay_MusicControls_divOnOff_Title {
    position: absolute;
    left: 0px;
}

.overlay_MusicControls_divOnOff_Switch {
    position: absolute;
    left: 50px;
    top: 14px;
}

.overlay_MusicControls_divVolume {
    width: 100px;
    position: absolute;
    left: 160px;
    height: 30px;
}

.overlay_MusicControls_divVolume_Title {
    position: absolute;
    left: 0px;
}

.overlay_MusicControls_divVolume_Slider {
    position: absolute;
    left: 70px;
    width: 150px;
}

/* The slider itself */
.overlay_Music_VolumeSlider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 3px; /* Specified height */
    background: grey; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    margin-top: 10px;
}

    /* Mouse-over effects */
    .overlay_Music_VolumeSlider:hover {
        opacity: 1; /* Fully shown on mouse-over */
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .overlay_Music_VolumeSlider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 25px; /* Set a specific slider handle width */
        height: 15px; /* Slider handle height */
        background: gold; /* Green background */
        cursor: pointer; /* Cursor on hover */
        border-radius: 10px;
    }











.overlay_Music_VolumeSlider {
}


/*#endregion*/








/*#region View Controls*/
.overlay_ViewControls_Wrapper {
    position: fixed;
    z-index: 19;
    height: 110px;
    width: 270px;
    border: 1px solid red;
    left: 130px;
    top: 60px;
    box-shadow: 0 0 10px black;
    border: 1px solid rgb(40,40,40);
    position: absolute;
    text-align: center;
    background-color: rgba(40, 40, 40, .75);
    backdrop-filter: blur(5px);
    font-size: 17px;
    overflow: hidden;
    text-align: center;
    z-index: 20;
}

.overlay_ViewControls_Inner {
    position: relative;
    width: 100%;
    height: 100%;
    top: 10px;
    
}

.overlay_ViewControls_divOnOff {
    width: 290px;
    position: relative;
    left: 0px;
    height: 30px;
   
  
}

.overlay_ViewControls_divOnOff_Title {
    position: relative;
    left: 0px;
    width:150px;
}

.overlay_ViewControls_divOnOff_Switch {
    position: absolute;
    left: 150px;
    top: 14px;
    width:100px;
}




/*#endregion*/


















/*#region Music Now Playing*/
.overlay_MusicNowPlaying {
    position: fixed;
    width: 380px;
    height: 100px;
    top: 140px;
    left: 50%;
    margin-left: -190px;
    z-index: 999;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000;
}

.overlay_MusicNowPlaying_Inner {
}

.overlay_MusicNowPlaying_NowPlayingText {
    font-size: 12px;
}

.overlay_MusicNowPlaying_songTitleText {
}

.overlay_MusicNowPlaying_ArtistText {
    font-size: 12px;
}

.overlay_MusicNowPlaying_divArtistLink {
    font-size: 15px;
    color: gold;
}

.MusicNowPlayingAristLink {
    text-decoration: none;
    color: gold;
}



/*#endregion*/

/*#region Overlay Compass*/

.overlay_Compass {
    position: fixed;
    z-index: 1;
    top: -450px;
    left: 50%;
    margin-left: -300px;
    pointer-events: none;
}

.overlay_Compass_Inner {
}

.overlay_compass_img {
    height: 600px;
}



/*#endregion*/


/*#region Video Chat Bar*/
#video_panel {
    position: fixed;
    padding-left: 4px;
    height: calc(100% - 55px);
    top: 50px;
    left: 0;
    background-color: black;
    box-shadow: 0 0 20px black;
    z-index: 20;
    border: 1px solid black;
    border-left: none;
    text-align: center;
    padding-top: 5px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */

    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

    #video_panel::after {
        content: '';
        background-color: black;
        position: absolute;
        right: 0;
        width: 4px;
        height: 100%;
        cursor: ew-resize;
    }


#video_panel_inner {
    position: absolute;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    text-align: center;
}

.videoNode {
    width: 100%;
    position: relative;
    margin-top: -25px;
    background-image: url('/moat/img/vidcontrols/novideo.png'); /* Replace 'your-image.jpg' with the actual path to your image */
    background-size: cover; /* Cover the entire background */

    background-position: center; /* Center the background image */

}


.videoNodeWrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: calc(20% - 5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 2px solid black;
    text-align: right;
    box-shadow: 0 0 20px black;
    margin-right: 10px;
    overflow-x: hidden;
    border-radius: 10px;
    background-image: url('/moat/img/vidcontrols/novideo.png'); /* Replace 'your-image.jpg' with the actual path to your image */
    background-size: cover; /* Cover the entire background */
    background-position: center; /* Center the background image */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.videoNodeTitle {
    position: absolute;
    bottom: 0px;
    color: gold;
    text-shadow: 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    text-align: right;
    padding-right: 25px;
}


.video_panel_divControls {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0px;
    display: inline-block;
    left: 0px;
    border-top: 1px solid grey;
    background-color: rgb(30,30,30);
    box-shadow: 0 0 10px black inset;
    z-index: 2;
    margin-left: -4px;
}

.vide_panel_divFunctionsMain {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.video_panel_divMicFunction {
    display: inline-block;
    margin-right: 30px;
    margin-left: 40px;
    border: 2px solid grey;
    padding: 20px;
    background-color: black;
    box-shadow: 0 0 10px black;
    border-radius: 70px;
    background: #515151; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #515151 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #515151 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #515151 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    cursor: pointer;
}

.video_panel_btnMic {
    height: 40px;
    cursor: pointer;
}

.video_panel_divVidFunction {
    display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
    border: 2px solid grey;
    padding: 20px;
    background-color: black;
    box-shadow: 0 0 10px black;
    border-radius: 70px;
    background: #515151; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #515151 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #515151 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #515151 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}



.video_panel_btnVid {
    height: 40px;
    cursor: pointer;
}

.video_panel_divVidRestartFunction {
    text-align: center;
    position: absolute;
    bottom: 00px;
    width: 100%;
}

.video_panel_btnrefresh {
    height: 20px;
    cursor: pointer;
}


.video_panel_divSettings{
    position:absolute;
    left:12px;
    bottom:8px;
}
.video_panel_btnSettings{
    height:20px;
    cursor:pointer;
}


.video_panel_settingsWrapper {
    width:500px;
    height:420px;
    border:1px solid gold;
    background-color:black;
    position:absolute;
    left:30px;
    top:50%;
    margin-top:-150px;
    z-index:999;
}

.video_panel_settings_inner {


}

.video_panel_settings_lineItem {
    margin-top:30px;
    height:30px;
}

.video_panel_settings_liHeader {
}

.video_panel_settings_liContent {
    margin-top:5px;
}

.video_panel_settings_btnRestartVideo {
}

.video_panel_settings_liContent{

}
.video_panel_settings_btnRestartVideo {
    font-size: 30px;
    border: 2px solid red;
    color: red;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.video_panel_settings_btnCloseSettings {
    font-size: 30px;
    border: 2px solid gold;
    color: gold;
    height: 40px;
    width: 220px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
/*#endregion*/
/*#region Player Turn Tracker*/
.overlay_PlayerTurnTracker {
    position: fixed;
    height: 300px;
    overflow-y: scroll;
    z-index: 19;
    right: -15px;
    bottom: 300px;
    width: 270px;
}

.overlay_PlayerTurnTracker_Inner {
    text-align: right;
    width: 100%;
    height: 100%;
}

.overlay_PlayerTurnTracker_List {
    position: absolute;
}

.overlay_PlayerTurnTracker_lineItem {
    height: 16px;
    width: 180px;
    background-color: darkred;
    border: 1px solid black;
    margin-top: 10px;
    box-shadow: 0 0 10px black;
    color: gold;
    font-weight: bold;
    text-align: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    font-size: 12px;
    position: relative;
    display: inline-block;
    right: 5px;
}


.overlay_PlayerTurnTracker_lineItem_Active {
    height: 25px;
    padding: 5px;
    background-color: darkred;
    border: 1px solid black;
    margin-top: 10px;
    box-shadow: 0 0 10px black;
    color: gold;
    font-weight: bold;
    text-align: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
    background: #627d4d; /* Old browsers */
    background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
    width: 240px;
    font-size: 20px;
}


.overlay_PlayerTurnTracker_lineItem_Dead {
    height: 16px;
    background-color: darkred;
    border: 1px solid black;
    margin-top: 10px;
    box-shadow: 0 0 10px black;
    color: rgb(50,50,50);
    font-weight: bold;
    text-align: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
    background: #b5bdc8; /* Old browsers */
    background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 150px;
    font-size: 12px;
    position: relative;
    display: inline-block;
    right: 0px;
}



/*#endregion*/


/*#region DDB Roller*/
.overlay_DDBRoll {
    position: fixed;
    height: 800px;
    width: 400px;
    z-index: 5555;
    left: 0px;
    left: 50%;
    margin-left: -200px;
    top: 55px;
    pointer-events: none;
}

.overlay_DDBRoll_Inner {
}

.overlay_overlay_DDBRoll_LineItemWrapper {
    color: black;
    width: 400px;
    height: 100px;
    position: relative;
    background-color: gold;
    box-shadow: 0 0 20px black inset;
    border: 3px solid black;
    margin-bottom: 20px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1e767+0,feb645+100;Yellow+3D */
    background: #f1e767; /* Old browsers */
    background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f1e767 0%,#feb645 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f1e767 0%,#feb645 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
}

.overlay_DDBRoll_SenderName {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 5px;
   
    color: black;
    width:100%;
    
}

.overlay_DDBRoll_SenderImage {
    position: absolute;
    left: -95px;
    top: -5px;
    transform: rotate(-10deg);
}

.overlay_DDBRoll_SenderImage_img {
    height: 100px;
    border: 2px solid black;
    box-shadow: 0 0 20px black;
}

.overlay_DDBRoll_RollType {
    position: absolute;
    right: 0px;
    width: 100%;
    top: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 25px;

}

.overlay_DDBRoll_RollResult {
    width: 400px;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 0px;
    height: 20px;
    text-align: center;
    font-size: 45px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(40,40,40);
    font-weight: bold;
    text-shadow: 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000;
    z-index:30;
}

.overlay_DDBRoll_RollResult_math {
    font-size: 12px;
    position: absolute;
    bottom: -15px;
    right: 20px;
    color: black;
    -webkit-text-stroke-width: 0px;
    z-index: 25;
    width: 150px;
    height: 15px;
    overflow: hidden;
    text-shadow:none;
}

.overlay_DDBRoll_RollImage {
    position: absolute;
    right: -150px;
    top: -150px;
}

.overlay_DDBRoll_RollImage_text {
}


/*#endregion*/


/*#region overlay distance*/
.overlay_Distance{
    position:fixed;
    width:400px;
  
    height:100px;
    left:50%;
    margin-left:-200px;
    top:100px;
    pointer-events:none;
    z-index:99999;
}

.overlay_Distance_inner {
    font-size: 55px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(40,40,40);
    font-weight: bold;
    text-shadow: 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000, 0px 0px 20px #000000;
    backdrop-filter: blur(5px);
    text-align: center;
}



/*#endregion*/


/*#region overlay Voice Recog*/
.divVoiceRecogIcon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
}

.overlay_VoieRecogIcon_Icon {
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    margin-left: -150px;
    margin-top: -150px;
}

/*#endregion*/