html {
    scroll-behavior : smooth;
}
html, body {
    padding : 0;
    margin : 0;
    font-family: 'Open Sans', sans-serif;
    position : absolute;
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    color : black;
}
body {
    overflow : hidden;
}

h1, h2, h3, h4, h5 {
    margin-block-start : 0px;
    margin-block-end : 0px;
}

.vividButton {
    width:150px;
}

.naNoErrors {
    display : flex;
    align-items : center;
    height : 100%;
}

.btnOptions_menu__label__specificity_dropdown, .btnOptions_menu__label__themes_dropdown, .changeBackgroundsAutomatically_label, #myForm p, .btnOptions_menu__backgroundTimeSettingsChanged_save__containerDiv div label, .smallPadding  {
    color : white;
}

.verticalSpacer { /* thanks go to : https://tobiasahlin.com/blog/flexbox-break-to-new-row/ */
  flex-basis: 100%;
  height: 0;
}

ol.todoList, ol.todoList_l1, ol.todoList_l2 {
    list-style-type : none;
}
ol.todoList > li, ol.todoList_l1 > li, ol.todoList_l2 > li {
margin-bottom : 10px;
display:flex;
justify-content : left;
align-items : center;
width : fit-content;
margin : 5px !important;
}
ol.todoList > li > div, ol.todoList_l1 > li > div, ol.todoList_l2 > li > div,
ul.todoList > li > div, ul.todoList_l1 > li > div, ul.todoList_l2 > li > div {
padding : 8px !important;
}
body {
    counter-reset : step-counter step-counter-l1 step-counter-l2;
}
ol.todoList > li.active::before { animation : anim___todoList_counter____l0__hover 1s forwards; }
ol.todoList > li::before > div { animation : anim___todoList_counter____l0__normal 1s forwards; }
ol.todoList_l1 > li.active::before { animation : anim___todoList_counter____l1__hover 1s forwards; }
ol.todoList_l1 > li::before { animation : anim___todoList_counter____l1__normal 1s forwards; }
ol.todoList_l2 > li.active::before { animation : anim___todoList_counter____l2__hover 1s forwards; }
ol.todoList_l2 > li::before { animation : anim___todoList_counter____l2__normal 1s forwards; }
@keyframes anim___todoList_counter____l0__hover {
    0% {background:rgba(0,0,0,0.5);border:2px solid blue; box-shadow : 0; }
    100% { background : rgba(0,0,100,0.5); border : 2px solid yellow; box-shadow : 0px 0px 3px 2px rgba(255,255,255,0.8); }
}
@keyframes anim___todoList_counter____l0__normal {
    0% { background : rgba(0,0,100,0.5); border : 2px solid yellow; box-shadow : 0px 0px 3px 2px rgba(255,255,255,0.8); }
    100% {background:rgba(0,0,0,0.5);border:2px solid blue; box-shadow : 0; }
}
@keyframes anim___todoList_counter____l1__hover {
    0% {background:rgba(0,0,0,0.5);border:2px solid blue; box-shadow : 0; }
    100% { background : rgba(0,0,100,0.5); border : 2px solid yellow; box-shadow : 0px 0px 3px 2px rgba(255,255,255,0.8); }
}
@keyframes anim___todoList_counter____l1__normal {
    0% { background : rgba(0,0,100,0.5); border : 2px solid yellow; box-shadow : 0px 0px 3px 2px rgba(255,255,255,0.8); }
    100% {background:rgba(0,0,0,0.5);border:2px solid blue; box-shadow : 0; }
}
@keyframes anim___todoList_counter____l2__hover {
    0% {background:rgba(0,0,0,0.5);border:2px solid blue; box-shadow : 0; }
    100% { background : rgba(0,0,100,0.5); border : 2px solid yellow; box-shadow : 0px 0px 3px 2px rgba(255,255,255,0.8); }
}
@keyframes anim___todoList_counter____l2__normal {
    0% { background : rgba(0,0,100,0.5); border : 2px solid yellow; box-shadow : 0px 0px 3px 2px rgba(255,255,255,0.8); }
    100% {background:rgba(0,0,0,0.5);border:2px solid blue; box-shadow : 0; }
}
ol.todoList, ol.todoList_l1, ol.todoList_l2 {
    counter-reset : section;
    list-style-type : none;
}

ol.todoList > li::before, ol.todoList_l1 > li::before, ol.todoList_l2 > li::before {
    counter-increment: section;
    content:counters(section,".") " ";
    background : rgba(0,0,0,0.5);
    border : 2px solid blue;
    border-radius : 7px;
    order:0;
    box-shadow : 2px 2px 1px 1px rgba(0,0,0,0.7);
    box-shadow : 0px 0px 6px 3px rgba(0,0,0, 0.55), inset 0px 0px 6px 3px rgba(0,0,0,0.7);
    text-shadow : 2px 2px 1px rgba(100,100,100,0.7);
    color : white;
    font-weight : bold;
    padding : 5px;
    margin : 5px;
}
p {
    margin : 8px;
}
li.todoList > div, li.todoList > span {
    width : fit-content;
    padding : 5px;
    padding-left : 15px;
    padding-right : 15px;
    margin : 10px;
    order:2;
    font-size : 115%;
}

.noExtraPadding {
    padding : 0px;
    margin : 0px;
}
.smallPadding {
    padding-top : 2px;
    padding-bottom : 2px;
    margin-top : 2px;
    margin-bottom : 2px;
}

.content_containerDiv_container { display : flex; align-items : center; justify-content : left;}
.content_containerDiv_container.evenly { justify-content : space-evenly;}
.content_containerDiv_container:first-child { align-items : left; text-align : left; }

.linkContainer {
    width : 100%;
    display : flex;
    flex-wrap : wrap;
}
.linkContainer a{
    /*margin-top : 3em;*/
}


#siteContent p {
    padding : 8px;
    width : fit-content;
}

#siteMenu {
    outline : 0
}


#btnOptions_menu {
    height : auto;
    overflow : hidden;
}
#btnOptions_menu__backgroundTimeSettingsChanged_save__containerDiv, .btnOptions_menu__specificity__containerDiv {
    width : calc(100% - 10px);
}
#btnOptions_menu__backgroundTimeSettingsChanged_save__containerDiv span, .btnOptions_menu__specificity__containerDiv span {
    border-radius : 5px;
}

#backgroundChange_hours, #backgroundChange_minutes {
    padding : 8px;
    border-radius : 8px;    
}
#specificityChange_specificityName, #themeChange_themeName {
    padding : 4px;
    border-radius : 8px;    
    width : 225px;
    margin-left : 22px;    
}
#borderSettings select, #textSettings select {
    padding : 0 1.5em 0 5px;
    border-radius : 8px;   
    height : 2.5em;
    width : 100%;
}
#btnFullResetOfAllThemes_text, #btnFullResetOfAllMenuLayoutData_text {
    width : calc(100% - 80px);
}
#changeBackgroundsAutomatically_label {
    width : calc(100% - 40px);
    margin-left : 10px;
    padding-top : 4px;
    padding-bottom : 4px;
}
/*
#btnOptions_menu__specificity__containerDiv span, #btnFullResetOfAllThemes, #btnFullResetOfAllMenuLayoutData, #btnOptions_menu__backgroundTimeSettingsChanged_save__containerDiv span {
    margin-left : 10px;
}*/

#pageTitle::before {
    content : '';
    white-space : inherit;
}

    
#logoAndSiteTitle p {
    margin-block-start : 0;
    margin-block-end : 0.5em;
}

#siteBackground {
    position:absolute;
}
#siteBackground_iframe {
    display : none;
}
#siteBackground img {
    display : none;
    position : absolute;
}
img.bg_first {
    z-index : 211;
    display : none;
}
img.bg_last {
    z-index : 212;
    display : none; 
}
#bg_video {
    width : 100%;
    height : 100%;
    position : relative;
    z-index : 8;
}

.imageDescription_about {
    color : cyan;
    font-weight : bold;
}
.imageDescription_wordList {
    font-size : 1.4rem;
}
.imageDescription_word {
    color : navy;
    text-shadow : 0px 0px 3px lightyellow;
    font-weight : bold;
}
.dataCredits {
    color : white;
    text-shadow : 0px 0px 3px lightyellow;
    font-weight : bold;
}
.dataCredits_brackets {
    color : yellow;
    text-shadow : 0px 0px 2px white;
    font-weight : bold;
}



.naCouchDB_findCommand {
    color : rgb(0, 50, 0);
    background : rgba(255,255,255,0.75);
    text-shadow : none;
    padding : 10px;
}
.naCouchDB_getCommand {
    color : rgb(0, 100, 0);
    background : rgba(255,255,255,0.75);
    text-shadow : none;
    padding : 10px;
}
.naCouchDB_dataReturnedToBrowser {
    color : green;
    background : rgba(255,255,255,0.75);
    text-shadow : none;
    padding : 10px;
}

.vividDialog {
    opacity : 0.00001;
}
.vdBackground {
    position : absolute;
    width : 100%;
    height : 100%;
    z-index : -1;
}

.vividInfoDialog {
    position : absolute;
    z-index : 1000;
}
.vividDialogPopup {
    opacity : 1;
    display : /*none;*/grid;
    position : absolute;
    z-index : -100 * 1000;
    background : rgba(0,0,0,0.4);
}

#siteContent {
    top : calc(1vh + 4rem);
    left : 1vw;
    width : calc(98vw - 6px);
    height : calc(97vh - 4rem - 6px);
    display : none;
    /*top : 48vh;
    left : 48vw;
    width : 4vw;
    height : 4vh;
    border-radius : 20px;*/
}
.vividDialogContent {
    overflow : auto;
    margin : 18px;
    display : none;
    width : calc(100% - 35px);
    height : calc(100% - 40px);
    z-index : 1100;
    text-shadow : 3px 3px 2px rgba(0,0,0,0.5);
    border : none;
    /*opacity : 0.0001;*/
}
#siteToolbarThemeEditor {
    margin : 15px;
    margin-left : 0px;
}
#siteStatusbar .vividDialogContent {
    margin : 5px;
    padding : 10px;
    margin-left : 15px;
    height : auto;
}
#siteStatusbar {
    height : auto;
}

/*
.vividDialogContent:-webkit-scrollbar {
  display: none;
}*/

.vividDialogContent table, .vividDialogContent td {
    z-index : 1101;
}

#siteDateTime {
    display : flex;
    justify-content : center;
    align-items : center;
    text-align : center;
}

#siteComments {
    top : 2vh;
    height : 96vh;
    left : 102vw;
    width : 250px;
}

#siteToolbarRight {
    top : 2vh;
    height : 96vh;
    left : 102vw;
    width : 220px;
}

#siteStatusbar {
    top : 102vh;
    left : 1vw;
    width : 98vw;
}
#siteStatusbar .vividDialogContent {
    height : 100%;
    display : flex;
    text-shadow : 3px 3px 2px rgba(0,0,0,0.7);
}
body {
    font-size: 0.8rem;
}
#siteDateTime > div > div {
    font-size: 0.8rem;
}
.vividDialogPopup p, .vividDialogPopup span, .vividDialogPopup div {
    font-size : 0.8rem;
}

.vividMenu_item {
    float : left;
}
.vividMenu_item a span {
}
.vividDropDownBox_selected, .vividDropDownBox_selector {
    font-size: clamp(0.4375rem, 0.4004rem + 0.1854vw, 0.875rem);
}

#siteStatusbar .vividDialogContent td {
    vertical-align: middle;
}
#siteStatusbar .vividDialogContent span {
    align-items:center;
}

#siteVideo {
    top : 2vh;
    left : 102vw;
    height : 250px;
    width : 250px;
}

#siteVideoSearch {
    top : calc(2vh + 260px);
    left : 102vw;
    height : calc(97vh - 260px);
    width : 230px;
}

.vividDialog {
    position : absolute;
    z-index : 1000;
}
.textCheck {
    /*height : 44px;*/
    padding : 0 !important;
    margin : 0 !important;
}

.vividButton, .vividMenu {
    position : absolute;
    z-index : 700000;
}
.vividButton {
    display : flex;
    justify-content : center;
    align-items : center;
    text-align : center;
}
.vividButton, .vividButtonSelected {
    position : absolute;
    display : flex;
    justify-content : center;
    align-items : center;
    text-align : center;
    height:24px;
    width:150px;
}

.vividButton.level1, .vividButtonSelected.level1 {
}


#siteDateTime {
    top : -5rem;
    left : 10px;
    width : 230px;
    height : 2.8rem;
    font-size : 1rem;
    font-weight : bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius : 10px;
}
#siteDateTime .vdBackground {
    border-radius : 10px;
}

#btnOptions {
    position : absolute;
    opacity : 0.0001;
    z-index : 500;
}

#btnLoginLogout {
    position : absolute;
    opacity : 0.0001;
    z-index : 900000;
}
#btnChangeBackground {
    position : absolute;
    opacity : 0.0001;
    z-index : 500;
}
.vdSettings {
    position : absolute;
    top : -15px;
    left : 15px;
    width : 200px;
    height : 40px;
}
.vdSettings img {
    position : absolute;
    top : 0px;
    left : 0px;
    width : 40px;
    z-index : inherit;
}
.vdTools {
    position : absolute;
    top : -15px;
    right : 15px;
    width : 50px;
    height : 50px;
}
.vdTools img {
    position : absolute;
    top : 0px;
    right : 0px;
    width : 50px;
    z-index : inherit;
}
.sliderOpacityRange {
    position : absolute;
    top : -2px;
    left : 55px;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: calc(100% - 55px); /* Full-width */
    height: 25px; /* Specified height */
    background: rgba(0,0,0,0.95); /* Grey background */
    z-index : 5000;
    border : 2px ridge rgba(100,100,100,0.7);
    border-radius : 8px;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}
.sliderOpacityRange:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.sliderOpacityRange::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.sliderOpacityRangethemeEditor {
    vertical-align : middle;
    position : absolute;
    left : 5px;
    display : none;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: calc(100% - 15px); /* Full-width */
    background: rgba(0,0,0,0.95); /* Grey background */
    z-index : 5000;
    border : 2px ridge rgba(100,100,100,0.7);
    border-radius : 8px;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    margin : 4px;
}
.sliderOpacityRangethemeEditor:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.sliderOpacityRangethemeEditor::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.sliderOpacityRangeBorderSettings {
    position : relative;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    height: 25px; /* Specified height */
    background: rgba(0,0,0,0.95); /* Grey background */
    z-index : 5000;
    border : 2px ridge rgba(100,100,100,0.7);
    border-radius : 8px;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}
.sliderOpacityRangeBorderSettings:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.sliderOpacityRangeBorderSettings::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

#borderSettings {
    display : none;
    flex-wrap : wrap;
    justify-content : center;
    /*align-items : center;*/
    top : 70px;
    width : calc(100% - 10px);
}
.flexBreak {
    flex-basis : 100%;
    height : 5px; width:5px;
}


.vividMenu_subMenuPanel {
    position : absolute;
}

.vividButton_container_50x50 {
    height : auto;
}
.vividButton_icon_50x50_sdsdt img {
    position : absolute;
    top : 0px;
    left : 0px;
    width : 35px;
    height : 35px;
}    
.vividButton_icon_50x50 {
    display : inline-block;
    position : relative;
    z-index : 1100;
    width : 50px;
    height : 50px;
}
.vividButton_icon_50x50_siteTop {
    display : inline-block;
    position : absolute;
    width : 50px;
    height : 50px;
    z-index : 1200;
}
.vividButton_icon_50x50_siteTop img {
    position: absolute;
    top : 3px;
    left : 3px;
    width : 44px;
    height : 44px;
}
.vividButton_icon_50x50_siteTop .vividButton_icon_imgTile_50x50, .vividButton_icon_50x50 .vividButton_icon_imgTile_50x50, .vividButton_icon_50x50.nateNav .vividButton_icon_imgTile_50x50 {
    box-shadow : 2px 2px 2px 2px rgba(0,0,0,0.7);
    border-radius : 5px;
}
.vividButton_icon_50x50_siteTop .vividButton_icon_imgButtonIcon_50x50 {
    top : 8px;
    left : 8px;
    width : 36px;
    height : 36px;
}
.vividButton_icon_50x50.nateNav {
    z-index : 1100;
    width : 48px;
    height : 48px;
    
}
.vividButton_icon_50x50.nateNav img {
    position : absolute;
    top : 2px;
    left : 2px;
    width : 44px;
    height : 44px;
}   
.vividButton_icon_50x50 {
    width : 50px;
    height : 50px;
}
.vividButton_icon_50x50 img {
    outline : 0;
}
/*
.vividButton_icon_50x50 img {
    top : 3px;
    left : 3px;
    width : 44px;
    height : 44px;
}
*/
.vividButton_icon_borderCSS_50x50 {
    position : absolute;
    top : 0px;
    left : 0px;
    width : 50px;
    height : 50px;
    z-index : 2002;
    border-radius : 8px;
}
.vividButton_icon_imgBorder_50x50 {
    position : relative;
    z-index : 2012; 
    top : 1px;
    left : 1px;
    width : 46px;
    height : 46px;
}
.vividButton_icon_imgTile_50x50 {
    position : absolute;
    top : 1px;
    left : 1px;
    width : 46px;
    height : 46px;
    z-index : 2010;
    box-shadow : 2px 2px 2px 2px rgba(0,0,0,0.7);
    border-radius : 10px;
}   
.vividButton_icon_imgButtonIconBG_50x50 {
    position : absolute;
    top : 3px;
    left : 3px;
    width : 42px;
    height : 42px;
    /*opacity : 0.4;*/
    z-index : 2015;
}
.vividButton_icon_50x50_siteTop .vividButton_icon_imgButtonIconBG_50x50 {
    opacity : 0.4; 
}
.vividButton_icon_imgButtonIcon_50x50 {
    width : 32px;
    top : 8px;
    left : 8px;
    position : absolute;
    z-index : 2020;
}
.vividButton_icon_borderCSS_50x50.relative {
    position : relative;
    top : 0px;
    left : 0px;
    width : 50px;
    height : 50px;
    z-index : 2002;
    border-radius : 10px;
}
.vividButton_icon_imgBorder_50x50.relative {
    position : relative;
    z-index : 2012; 
    left : calc(2px + 2px);
    top : calc(-50px + 2px);
    width : 44px;
    height : 44px;
}
.vividButton_icon_imgTile_50x50.relative {
    position : relative;
    left : calc(2px + 1px);
    top : calc(-100px + 2px );
    width : 46px;
    height : 46px;
    z-index : 2010;
    box-shadow : 2px 2px 2px 2px rgba(0,0,0,0.7);
    border-radius : 10px;
}   
.vividButton_icon_imgButtonIconBG_50x50.relative {
    position : relative;
    left : calc(2px + 2px + 2px);
    top : calc(-150px + 1px + 2px);
    width : 42px;
    height : 42px;
    opacity : 0.4;
    z-index : 2015;
}
.vividButton_icon_imgButtonIcon_50x50.relative {
    width : 32px;
    height : 32px;
    left : calc(8px + 1px + 2px);
    top : calc(-200px + 8px + 2px + 2px);
    position : relative;
    z-index : 2020;
}




.vividButton_icon_100x100 {
    display : inline-block;
    flex-grow : 1;
    padding-top : 5px;
    width : 100px;
    height : 100px;
}
.vividButton_icon_borderCSS_100x100.relative {
    position : relative;
    top : -2px;
    left : -2px;
    width : 96px;
    height : 96px;
    z-index : 2011;
    border-radius : 16px;
}
.vividButton_icon_imgBorder_100x100.relative {
    position : relative;
    z-index : 2014; 
    top : calc(-100px + 6px);
    width : 88px;
    height : 88px;
}
.vividButton_icon_imgTile_100x100.relative {
    position : relative;
    top : calc(-200px + 6px + 6px + 2px);
    width : 88px;
    height : 88px;
    z-index : 2012;
    box-shadow : 4px 4px 4px 4px rgba(0,0,0,0.7);
    border-radius : 10px;
}   
.vividButton_icon_imgButtonIconBG_100x100.relative {
    position : relative;
    left : 2px;
    top : calc(-300px + 6px + 6px + 2px + 8px);
    width : 84px;
    height : 84px;
    opacity : 0.4;
    z-index : 2015;
}
.vividButton_icon_imgButtonIcon_100x100.relative {
    width : 64px;
    height : 64px;
    left : calc(10px + 2px);
    top : calc(-400px + 6px + 6px + 3px + 2px + 8px + 18px);
    position : relative;
    z-index : 2020;
}
.vividButton_icon_50x50_text, .vividButton_icon_100x100_text.relative {
    flex-grow:2;
    display:table;
    border-radius : 10px;
    width : calc(100% + 10px);
    height : 50px;
    background : rgba(0,0,0,0.4);
    box-shadow : 4px 4px 4px 4px rgba (0,0,0,0.7), inset 2px 2px 2px 2px rgba(0,0,0,0.5);
}
.vividButton_icon_50x50_text div, .vividButton_icon_100x100_text.relative div {
    display : table-cell;
    vertical-align : middle;
    font-weight : bold;
    padding-left : 5px;
    padding-right : 5px;
    color : white;
}

.vividButton_icon_100x100 {
    display : inline-block;
    flex-grow : 1;
    overflow:hidden;
    padding-top : 5px;
    width : 100px;
    height : 100px;
}
.vividButton_icon_borderCSS_100x100.grouped {
    display : flex;
    position : relative;
    top : -2px;
    left : -2px;
    width : 96px;
    height : 96px;
    z-index : 2011;
    border-radius : 16px;
}
.vividButton_icon_imgBorder_100x100.grouped {
    display : flex;
    position : relative;
    z-index : 2014;
    top : calc(-100px + 6px);
    width : 88px;
    height : 88px;
}
.vividButton_icon_imgTile_100x100.grouped {
    position : relative;
    display : flex;
    top : calc(-200px + 6px + 6px + 2px);
    width : 88px;
    height : 88px;
    z-index : 2012;
    box-shadow : 4px 4px 4px 4px rgba(0,0,0,0.7);
    border-radius : 10px;
}
.vividButton_icon_imgButtonIconBG_100x100.grouped {
    position : relative;
    left : 2px;
    top : calc(-300px + 6px + 6px + 2px + 8px);
    display : flex;
    width : 84px;
    height : 84px;
    opacity : 0.4;
    z-index : 2015;
}
.vividButton_icon_imgButtonIcon_100x100.grouped {
    width : 64px;
    height : 64px;
    left : calc(10px + 2px);
    top : calc(-400px + 6px + 6px + 3px + 2px + 8px + 18px);
    position : relative;
    display : flex;
    z-index : 2020;
}
.vividButton_icon_100x100_text.grouped {
    flex-grow:2;
    display:table;
    border-radius : 10px;
    width : calc(100% + 10px);
    height : 50px;
    background : rgba(0,0,0,0.4);
    box-shadow : 4px 4px 4px 4px rgba (0,0,0,0.7), inset 2px 2px 2px 2px rgba(0,0,0,0.5);
}
.vividButton_icon_100x100_text.grouped div {
    display : table-cell;
    vertical-align : middle;
    font-weight : bold;
    padding-left : 5px;
    padding-right : 5px;
}


.sp-container {
    background : linear-gradient(to top, rgba(255,255,200,0.7), rgba(100,255,100,0.75) 50%, rgba(255,255,200,0.7) 100%);
    padding : 5px;
    border-radius : 10px;
}


#siteMenu {
    top : calc(10px + 18px);
    left : calc(2vw + 340px);
    width : 180px;
}
#siteMenu.phoneView {
    left : calc(1vw + 50px);
}

#siteRegistration {
    display : none;
    position : absolute;
    width : 400px;
    height : auto;
    left : calc(50% - 200px);
    top : calc(50% - 125px);
    padding : 15px;
    z-index : 500000;
}
#siteRegistration:before { 
    content : '';
    background : url('/NicerAppWebOS/siteMedia/backgrounds/tiled/blue/seamless-texture-blue-watercolor.jpg') repeat;
    opacity : 0.7;
    position:absolute;
    z-index:-1;
    border-radius : 15px;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}
#siteRegistration input {
    width : calc(100% - 178px);
    border-radius : 8px;
    background : rgba(255,255,255,0.7);
    font-size : 1.1rem;
    margin : 4px;
    outline : 0;
}

#siteRegistrationContainer {
    position : relative;
    height : auto;
    display : flex;
    flex-direction : column;
}
#btnSrfSubmit {
    position : relative;
}
#siteRegistrationError {
    display : none;
    border-radius : 8px;
    padding : 5px;
    background : white;
    color : red;
}
#siteLoginLogout .vividScrollpane {
    overflow : hidden;
}
#siteLogin {
    display : none;
    position : absolute;
    width : 350px;
    height : auto;
    padding : 15px;
    z-index : 500000;
    text-align : center;
    justify-content : center;
    overflow : hidden;
}
#siteLogin input {
    width : calc(100% - 178px);
    background : rgba(255,255,255,0.4);
    border-radius : 8px;
    font-size : 1.1rem;
    outline : 0;
    margin : 4px;
}
#siteLogin:before { 
    content : '';
    background : url('/NicerAppWebOS/siteMedia/backgrounds/tiled/green/409537396_fa312a886d.jpg') repeat;
    opacity : 0.33;
    position:absolute;
    z-index:-1;
    border-radius : 15px;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}
#siteLoginContainer {
    position : relative;
    height : auto;
    display : flex;
    flex-direction : column;
    align-items : center;
}
#btnLogin {
    position : relative;
}

.buttonHolder {
    display: inline-block;
    position:relative;
    text-align : center;
    vertical-align : middle;
    margin-top : 0.5rem;
    z-index : 1000;
}
.button {
 	cursor: pointer;
	position: relative;
	padding:f1rem 1rem;
    margin : 0.5rem;
	border-radius: 1rem;
	line-height: 2rem;
	font-size: 1.5rem;
	font-weight: 555;
    outline : 0;
	border: 1px solid #012880;
	background-image: linear-gradient(-180deg, #00FF00 0%, #00AA00 100%);
	box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
							0 -0.25rem 1.5rem rgba(0, 80, 0, 1) inset,
							0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.25rem 0.5rem 0 rgba(0, 80, 0, 1) inset;    
}
.button img {
    height : 1.5rem;
}
.button span {
	color: transparent;
	background-image: linear-gradient(0deg, rgba(0,0,77,1) 25%, navy 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 2px 2px hsla(290, 100%, 20%, 1));
}
.button::after {
	content: "";
	display: block;
	height: 0.25rem;
	position: absolute;
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	background: #fff;
	border-radius: 100%;
	
	filter: blur(1px);
	opacity: 0.5;
	background-image: linear-gradient(-270deg, rgba(255,255,255,0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255,255,255,0.00) 100%);
}
.button:hover::after {
    animation : anim_buttonWhiteLines 1s infinite;
}
@keyframes anim_buttonWhiteLines {
    0% {
        opacity : 0.35;
        filter : blur(2px);
    }
    50% {
        opacity : 0.7;
        filter : blur(0px);
    }
    100% {
        opacity : 0.35;
        filter : blur(2px);
    }
}





.vividButton_icon_50x50_text.relative {
    left : 10px;
}
.vividButton_icon_50x50_text.grouped {
    margin-left : 8px;
    margin-right : 10px;
    width : 230px;
    display : flex;
    justify-content : center;
    align-items : center;
}
.vividButton_icon_50x50_text.btnAdd.grouped {
    top : 0px;
    left : 5px;
    display : inline-block;
}
.vividButton_icon_50x50_text div {
    display : inline-block;
    position : relative;
/*    padding : 5px;
    padding-bottom : 10px;*/
}

.vividButton_icon_50x50_text {
 	cursor: pointer;
	position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	border-radius: 1.5rem;
    padding : 10px;
    outline : 0;
    font-size : 88%;
	/*border: 1px solid #012880;*/
	background-image: linear-gradient(-180deg, #000000 0%, #000000 100%);
	box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
							0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
							0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
}
.vividButton_icon_50x50_text.btnRename.forumCategory {
	box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
							0 -0.25rem 1.5rem rgba(0, 80, 0, 0.7) inset,
							0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.25rem 0.5rem 0 rgba(0, 80, 0, 0.7) inset;    
}
.vividButton_icon_50x50_text.btnRename.forum {
	box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
							0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
							0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
}
.vividButton_icon_50x50_text.btnDelete {
	box-shadow: 0.5rem 0.5rem 0.7rem 0 rgba(0,0,0,0.50),
							0 -0.2rem 0.7rem rgba(80, 0, 0, 0.7) inset,
							0 0.7rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.2rem 0.5rem 0 rgba(80, 0, 0, 0.7) inset;    
}
.vividButton.btnSave {
	box-shadow: 0.5rem 0.5rem 0.7rem 0 rgba(0,0,0,0.50),
							0 -0.2rem 0.7rem rgba(0, 0, 255, 0.7) inset,
							0 0.7rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.2rem 0.5rem 0 rgba(0, 0, 255, 0.7) inset;
}
.vividButton_icon_50x50_text div {
	color: white;
	background-image: linear-gradient(0deg, rgba(0,0,77,1) 25%, navy 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 2px 2px hsla(290, 100%, 20%, 1));
}
.vividButton_icon_50x50_text.btnRename.forumCategory div {
    color : yellow;
	background-image: linear-gradient(0deg, rgba(255,255,255,1) 25%, yellow 100%);
	filter: drop-shadow(0 2px 2px hsla(147, 50%, 47%, 1));
}
.vividButton_icon_50x50_text.btnRename.forum div {
    color : cyan;
	background-image: linear-gradient(0deg, rgba(255,255,255,1) 25%, cyan 100%);
	filter: drop-shadow(0 2px 2px hsla(240, 100%, 50%, 1));
}
.vividButton_icon_50x50_text.btnAdd.forumCategory div {
    color : white;
}
.vividButton_icon_50x50_text.btnAdd.forumCategory {
	background-image: linear-gradient(0deg, rgba(70,70,70,0.2) 20%, rgba(255,255,255,0.7) 50%, rgba(70,70,70,0.2) 80%);
    box-shadow : 
        1rem 1rem 1.25rem 0 rgb(0 0 0 / 50%), 
        0 -0.25rem 1.5rem rgb(200 200 200 / 70%) inset, 
        0 0.75rem 0.5rem rgb(255 255 255 / 40%) inset, 
        0 0.25rem 0.5rem 0 rgb(200 200 200 / 70%) inset;
}
.vividButton_icon_50x50_text.btnAdd.forum div {
    color : white;
}
.vividButton_icon_50x50_text.btnAdd.forum {
	background-image: linear-gradient(0deg, rgba(70,70,70,0.2) 20%, rgba(255,255,255,0.7) 50%, rgba(70,70,70,0.2) 80%);
    box-shadow : 
        1rem 1rem 1.25rem 0 rgb(0 0 0 / 20%), 
        0 -0.25rem 1.5rem rgb(150 150 150 / 40%) inset, 
        0 0.75rem 0.5rem rgb(255 255 255 / 10%) inset, 
        0 0.25rem 0.5rem 0 rgb(150 150 150 / 40%) inset;
}
.vividButton_icon_50x50_text.btnDelete div {
    color : rgb(255,100,100);
	background-image: linear-gradient(0deg, rgba(255,255,255,1) 25%, rgb(255,100,100) 100%);
	filter: drop-shadow(0 2px 2px hsla(0, 100%, 50%, 1));
}

.vividButton_icon_50x50_text::after {
	content: "";
	display: block;
	height: 0.25rem;
	position: absolute;
	bottom: 0.3rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 1.3rem);
	background: #fff;
	border-radius: 100%;
	
	filter: blur(1px);
	opacity: 0.5;
	background-image: linear-gradient(-270deg, rgba(255,255,255,0.00) 0%, #FFFFFF 5%, #FFFFFF 80%, rgba(255,255,255,0.00) 100%);
}

.vividButton_icon_50x50_text.hover::after {
    animation : anim_vividButton_icon_50x50_text_WhiteLines 1s infinite;
}
@keyframes anim_vividButton_icon_50x50_text_WhiteLines {
    0% {
        opacity : 0.35;
        filter : blur(2px);
        box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
                                0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
                                0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
                                0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
    }
    50% {
        opacity : 0.7;
        filter : blur(0px);
        box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
                                0 -0.25rem 1.5rem rgba(0, 200, 0, 0.7) inset,
                                0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
                                0 0.25rem 0.5rem 0 rgba(0, 200, 0, 0.7) inset;    
    }
    100% {
        opacity : 0.35;
        filter : blur(2px);
        box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
                                0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
                                0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
                                0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
    }
}

.vividButton_icon_100x100_text {
 	cursor: pointer;
	position: relative;
	border-radius: 1rem;
    outline : 0;
	border: 1px solid #012880;
	background-image: linear-gradient(-180deg, #000000 0%, #000000 100%);
	box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
							0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
							0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
}
.vividButton_icon_100x100_text span {
	color: transparent;
	background-image: linear-gradient(0deg, rgba(0,0,77,1) 25%, navy 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 2px 2px hsla(290, 100%, 20%, 1));
}
.vividButton_icon_100x100_text::after {
	content: "";
	display: block;
	height: 0.25rem;
	position: absolute;
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	background: #fff;
	border-radius: 100%;
	
	filter: blur(1px);
	opacity: 0.5;
	background-image: linear-gradient(-270deg, rgba(255,255,255,0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255,255,255,0.00) 100%);
}
.vividButton_icon_100x100_text.hover::after {
    animation : anim_vividButton_icon_100x100_text_WhiteLines 1s infinite;
}
@keyframes anim_vividButton_icon_100x100_text_WhiteLines {
    0% {
        opacity : 0.35;
        filter : blur(2px);
        box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
                                0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
                                0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
                                0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
    }
    50% {
        opacity : 0.7;
        filter : blur(0px);
        box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
                                0 -0.25rem 1.5rem rgba(0, 200, 0, 0.7) inset,
                                0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
                                0 0.25rem 0.5rem 0 rgba(0, 200, 0, 0.7) inset;    
    }
    100% {
        opacity : 0.35;
        filter : blur(2px);
        box-shadow: 1rem 1rem 1.25rem 0 rgba(0,0,0,0.50),
                                0 -0.25rem 1.5rem rgba(0, 0, 80, 0.7) inset,
                                0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
                                0 0.25rem 0.5rem 0 rgba(0, 0, 80, 0.7) inset;    
    }
}




#siteLoginSuccessful img {
    vertical-align : middle
}
#siteLoginSuccessful {
    display : none;
    position : absolute;
    width : 400px;
    height : auto;
    left : calc(50% - 200px);
    top : calc(50% - 125px);
    padding : 15px;
    z-index : 2000;
    color : white;
    font-weight : bold;
    text-align : center;
    vertical-align : middle;
    justify-content : center;
}
#siteLoginSuccessful::before { 
    content : '';
    background : url('/NicerAppWebOS/siteMedia/backgrounds/tiled/green/cubist 003B.png') repeat;
    opacity : 0.7;
    position:absolute;
    z-index:-1;
    border-radius : 15px;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}

#siteLoginFailed {
    display : none;
    position : absolute;
    width : 400px;
    height : auto;
    left : calc(50% - 200px);
    top : calc(50% - 125px);
    padding : 15px;
    z-index : 2000;
    color : white;
    vertical-align : middle;
    font-weight : bold;
    text-align : center;
    justify-content : center;
}
#siteLoginFailed::before { 
    content : '';
    background : url('/NicerAppWebOS/siteMedia/backgrounds/tiled/red/318801228_12f7b6a8a2.jpg') repeat;
    opacity : 0.7;
    position:absolute;
    z-index:-1;
    border-radius : 15px;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}



#site3D_backgroundsBrowser, #site3D_demo_cube, #site3D_demo_models {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    padding : 15px;
    z-index : 2000;
    justify-content : center;
    background : rgba(0,0,0,0);
}
/*#site3D_backgroundsBrowser::before { 
    content : '';
    background : url('/NicerAppWebOS/siteMedia/backgrounds/tiled/blue/seamless-texture-blue-watercolor.jpg') repeat;
    opacity : 0.5;
    position:absolute;
    z-index:-1;
    border-radius : 15px;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}*/


#site3D_demo {
    display : none;
    position : absolute;
    width : 300px;
    height : 200px;
    left : calc(50% - 150px);
    top : calc(50% - 100px);
    padding : 15px;
    z-index : 2000;
    justify-content : center;
}
#site3D_demo::before { 
    content : '';
    background : url('/NicerAppWebOS/siteMedia/backgrounds/tiled/blue/seamless-texture-blue-watercolor.jpg') repeat;
    opacity : 0.7;
    position:absolute;
    z-index:-1;
    border-radius : 15px;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}

:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}

/* BEGIN thanks https://freefrontend.com/css-select-boxes/ and https://codepen.io/5t3ph/pen/MWyyYNz */
select {
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: calc(100%);
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  z-index: 1;

  outline: none;
}

.select {
  display: inline-block;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  grid-area: select;
  box-sizing:border-box;

  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;

  cursor: pointer;
  line-height: 1.1;
  height : 2em;

  background-image: linear-gradient(to top, rgba(255,255,255,0.4), rgba(255,255,255,0.7) 33%);
}
.select.mainBar_forThemeEditor {
    height : 2.5em;
}
.select::after {
    grid-area: select;
    box-sizing:border-box;
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}

select[multiple] {
  padding-right: 0;

  /*
   * Safari will not reveal an option
   * unless the select height has room to 
   * show all of it
   * Firefox and Chrome allow showing 
   * a partial option
   */
  height: 6rem;

  option {
    white-space: normal;

    outline-color: var(--select-focus);
  }
}

.select--disabled {
  cursor: not-allowed;
  background-image: linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,0.7) 33%);
}

.select + label {
  margin-top: 2rem;
}
/* END thanks https://freefrontend.com/css-select-boxes/ and https://codepen.io/5t3ph/pen/MWyyYNz */
#specificitySettings {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-between;
  align-items : center;
  padding : 5px;
  margin : 4px;
  background : rgba(0,0,0,0.55);
  border-radius : 10px;
  box-shadow : inset 1px 1px 2px 1px rgba(0,0,0,0.8);
  
}
#themeEditor_photoAlbum_specs {
  margin : 4px;
}
label.specificityCB {
    width : auto;
    display : inline-block;
}
input.specificityCB {
    vertical-align : middle;
    position : relative;
    bottom : 1px;
}
#specificitySettings::before, #specificitySettings::after {
  content: '';
  width: 100%;
  order: 1;
}
.sds_dialogTitle {
    display : flex;
    align-items : center;
    background : rgba(0,0,0,0.5);
    border-radius : 10px;
    box-shadow : 2px 2px 3px 2px rgba(0,0,0,0.5) inset;
    padding : 5px;
    margin : 4px;
}
.sds_dialogTitle .vividButton_icon_50x50_sdsdt {
    display : inline-block;
    position : relative;
    margin-left : 10px;
    margin-right:10px;
    z-index : 1100;
    width : 35px;
    height : 35px;
}
#sds_dialogTitle {
    font-weight : bold;
}
#boxShadowControls img, #textShadowControls img, #themePermissionsControls img {
    width : 50px;
    height : 50px;
}
#specificityForDiv {
    font-weight : bold;
}
.textSettingsLabel2 {
    width : 85px;
}
.themeItem input {
    background:rgba(0,0,100,0.5);
    border:1px solid white; 
    border-radius:10px; 
    margin : 5px; 
    padding : 5px;
    color : white;
}
.themeItem.onfocus input {
    background : rgba(0,0,255,0.5);
}

.specificityLabel {
    width : 88px;
}

#document_headers > .sections, #document_navBar > .sections {
    display : inline-block;
}
.navbar {
    display : inline-block;
    padding : 0;
    margin : 0;
    margin-bottom : 4px;
    align-content : center;
    align-items : center;
    height : fit-content;
    width : 100%;
}
.navbar_section {
    display:inline-block;
    align-content : center;
    align-items : center;
    vertical-align:middle;
}
.navbar_button {
    width : 50px;
}
.themeEditorComponent {
    display : inline-block;
    justify-content : center;
    align-items : flex-start;
    padding : 4px;
    left : 4px;
}
.themeEditorComponent_containerDiv {
    display : inline-flex;
    justify-content : center;
    align-items : center;
    width : calc(100% - 30px);
}
.themeEditor_input_containerDiv {
    display : flex;
    align-items : center;
    width : 100%;
    margin-top : 7px;
}
.borderSettings_label_containerDiv, .textSettings_label_containerDiv, .textShadowSettings_label_containerDiv,
.borderSettings_input_containerDiv, .textSettings_input_containerDiv, .textShadowSettings_input_containerDiv {
    display : inline-block;
}
.themeEditorComponent > * {
    vertical-align : middle;
    
}
.borderSettings_input_containerDiv, .textSettings_input_containerDiv, .textShadowSettings_input_containerDiv {
    padding-left : 8px;
    width : 100%;
}
.borderSettings_input {
    padding : 5px;
}
.borderSettings_label, .textSettings_label, .textShadowSettings_label {
    width : 50px;
    display : flex;
    padding : 5px;
    font-weight : bold;
    text-shadow : 2px 2px 1px rgba(0,0,0,0.8);
}
.borderSettings_label_containerDiv, .textSettings_label_containerDiv, .textShadowSettings_label_containerDiv {
    width : 60px;
}
#boxShadowInset_spacer {
    width : 130px;
}
.boxShadow_containerDiv, .textShadow_containerDiv {
    width : 100%;
    margin : 5px;
    padding : 7px;
}
.boxShadow_containerDiv.selected, .textShadow_containerDiv.selected {
    background : rgba(200, 200, 200, 0.7);
    border : 1px solid white;
}

.sliderOpacityRangeBorderSettings, #textFontFamily, #textSize, #textWeight {
    width : calc(100% - 4px);
}
.textShadow > span {
    margin-top : 0 !important;
    margin-bottom : 0 !important;
    padding-top : 2px !important;
    padding-bottom : 0 !important;
}

label {
    width : fit-content;
    font-size : 88%;
    display : inline-block;
}
#documentTitle_label {
    padding : 5px;
}
.radioInput {
    display : inline-block;
    border : 0px;
    width : 20px;
    height : 1.2em; 
}
.flexColumns {
    display : flex;
}
.labelthemeEditor2 {
    display : inline-flex;
    position : relative;
}


.contentSectionTitle {
    text-shadow : 2px 2px 1px rgba(0,0,0,0.4);
}

.selfHealerMsg {
    font-weight : bold;
}
.selfHealerDbg {
    color : rgba(150,150,150,1);
}
.selfHealerResult {
    color : rgba(150,150,255,1);
}
.selfHealerFailed {
    color : rgba(255,150,150,1);
}
.selfHealerWarning {
    color : rgba(235,161,52,1);
}


.tooltipster-sidetip .tooltipster-box {
    background: none;
    border: 0;
    border-radius: 0;
}
.tooltipster-sidetip .tooltipster-content {
    color : white;
}
.mainTooltipTheme {
	border:1px solid navy;
    border-radius : 7px;
    box-shadow : 2px 2px 1px rgba(0,0,0,0.7), 0px 0px 5px rgba(0,0,0,0.7), inset 2px 2px 2px rgba(0,0,0,0.87), inset -2px -2px 2px rgba(0,0,0,0.87);
    opacity : 1;
    z-index : 2765;
	text-align:left;
	color:#8c3901;
    color : black;
	background-color:#fef9d9;
	background-image:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow.png);
	background-image:url(/NicerAppWebOS/siteMedia/backgrounds/tiled/blue/scratched-texture.jpg);
    font-family : Spinnaker;
    font-size : 15px;
    font-weight : bold;
    /*padding : 8px 10px;*/
   /* animation : mainTooltipThemeAnim 2s infinite;*/
    border-radius : 7px;
}
/*
.mainTooltipTheme.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
    bottom : -10px;
}
.mainTooltipTheme .tip-arrow-top {
	margin-top:-7px;
	margin-left:15px;
	top:0;
	left:0;
	width:16px;
	height:10px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat;
}
.mainTooltipTheme .tip-arrow-right {
	margin-top:-9px; /* approx. half the height to center it * /
	margin-left:-4px;
	top:50%;
	left:100%;
	width:10px;
	height:20px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat -16px 0;
}
.mainTooltipTheme .tip-arrow-bottom {
	margin-top:-6px;
	margin-left:15px;
	top:100%;
	left:0;
	width:16px;
	height:13px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat -32px 0;
}
.mainTooltipTheme .tip-arrow-left {
	margin-top:-9px; /* approx. half the height to center it * /
	margin-left:-6px;
	top:50%;
	left:0;
	width:10px;
	height:20px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat -48px 0;
}


.mainTooltipTheme.tooltipster-sidetip .tooltipster-arrow-background {
	/*border: 10px solid transparent;* /
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
	border-bottom-color: white;
    /*animation : mainTooltipThemeAnim2a 2s infinite;* /
	left: 0;
	top: 3px;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
	border-left-color: white;
    /*animation : mainTooltipThemeAnim2b 2s infinite;* /
	left: -3px;
	top: 0;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
	border-right-color: white;
    /*animation : mainTooltipThemeAnim2c 2s infinite;* /
	left: 3px;
	top: 0;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
	border-top-color: white;
    /*animation : mainTooltipThemeAnim2d 2s infinite;* /
	left: 0;
	top: -3px;
}

/* .tooltipster-arrow-border * /

.mainTooltipTheme.tooltipster-sidetip .tooltipster-arrow-border {
	/*border: 10px solid transparent;* /
	left: 0;
	top: 0;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: yellow;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
	border-left-color: yellow;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
	border-right-color: yellow;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
	border-top-color: yellow;
}
*/
.mainTooltipTheme.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
    bottom : -10px;
}
.mainTooltipTheme .tip-arrow-top {
	margin-top:-4px;
	margin-left:15px;
	top:0;
	left:0;
	width:16px;
	height:10px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat;
}
.mainTooltipTheme .tip-arrow-right {
	margin-top:-6px; /* approx. half the height to center it */
	margin-left:-4px;
	top:50%;
	left:100%;
	width:10px;
	height:20px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat -16px 0;
}
.mainTooltipTheme .tip-arrow-bottom {
	margin-top:-3px;
	margin-left:15px;
	top:100%;
	left:0;
	width:16px;
	height:13px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat -32px 0;
}
.mainTooltipTheme .tip-arrow-left {
	margin-top:-6px; /* approx. half the height to center it */
	margin-left:-6px;
	top:50%;
	left:0;
	width:10px;
	height:20px;
    z-index : 2761;
	background:url(/NicerAppWebOS/3rd-party/jQuery/poshytip/src/tip-yellow/tip-yellow_arrows.png) no-repeat -48px 0;
}


.mainTooltipTheme.tooltipster-sidetip .tooltipster-arrow-background {
	/*border: 10px solid transparent;*/
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
	border-bottom-color: white;
    /*animation : mainTooltipThemeAnim2a 2s infinite;*/
	left: 0;
	top: 6px;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
	border-left-color: white;
    /*animation : mainTooltipThemeAnim2b 2s infinite;*/
	left: -3px;
	top: 3;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
	border-right-color: white;
    /*animation : mainTooltipThemeAnim2c 2s infinite;*/
	left: 3px;
	top: 3;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
	border-top-color: white;
    /*animation : mainTooltipThemeAnim2d 2s infinite;*/
	left: 0;
	top: 0;
}

/* .tooltipster-arrow-border */

.mainTooltipTheme.tooltipster-sidetip .tooltipster-arrow-border {
	border: 10px solid transparent;
	left: 0;
	top: 0;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: yellow;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
	border-left-color: yellow;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
	border-right-color: yellow;
}

.mainTooltipTheme.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
	border-top-color: yellow;
}

.lds-facebook {
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  left : calc(50% - 40px);
  top : calc(50% - 40px);
  z-index : 1000000;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background : linear-gradient(rgba(252, 255, 48, 1), rgba(255, 193, 48, 1));
  border-radius : 5px;
  margin : 3px;
  box-shadow : 2px 2px 1px 1px rgba(0,0,0,0.4);
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
    opacity : 0.3;
  }
  50% {
    top: 24px;
    height: 32px;
    opacity : 0.87;
  }
  100% {
    top: 24px;
    height: 32px;
    opacity : 0.3;
  }
}

/*
 * 3D File Manager features
 */
#threedfm_buttons {
    display : flex;
    flex-direction : column;
    align-items : center;
    margin : auto;
}
#threedfm_buttons .vividButton, #threedfm_buttons .vividButtonSelected {
    margin : 5px;
}

/*
 * blogging features 
 */
#jsTree {
    width : 100%;
    height : 100%;
}
#jsTree_navBar {
    display : flex;
    justify-content : space-between;
}
.jsTree_navBar_button {
    width : 50px;
    animation : jsTree_navBar_button__enable 0.5s forwards;
    animation-iteration-count : 1;
    border : 2px solid rgba(0,0,0,0);
    border-radius : 7px;
}
.jsTree_navBar_button:hover {
    animation : jsTree_navBar_button__hover 0.5s forwards;
    animation-iteration-count : 1;
}
@keyframes jsTree_navBar_button__hover {
    0% { border : 2px solid rgba(0,0,0,0); }
    100% { border : 2px solid rgba(255,255,255,0.7); }
}
.jsTree_navBar_button.disabled {
    animation : jsTree_navBar_button__disable;
    animation-fill-mode : forwards;
    animation-duration : 0.5s;
    animation-iteration-count : 1;
}
@keyframes jsTree_navBar_button__disable {
    0% { filter : grayscale(0%); opacity : 1 }
    100% { filter : grayscale(80%); opacity : 0.5; }
}
@keyframes jsTree_navBar_button__enable {
    0% { filter : grayscale(80%); opacity : 0.5; }
    100% { filter : grayscale(0%); border : 2px solid rgba(0,0,0,0); opacity : 1 }
}

#url2_value, #documentLabel, #documentTitle {
    margin : 4px;
    background : rgba(255,255,255,0.4);
    box-shadow : 2px 2px 1px 1px rgba(0,0,0,0.4);
}
/*
#tinymce {
    display : none;
}
*/
.tox-tinymce {
  opacity: 0;
  z-index : 1000;
  transition: opacity 1300ms;
}
.tox-tinymce.fade-in {
  opacity: 1;
}

.mediaThumb {
    cursor : pointer;
}

.helper {
    display : inline-block;
    vertical-align : middle;
}
#viewMedia {
    display: flex;
    z-index : 3000;
    padding : 0;
    margin : auto;
}
#btnPrevious img {
    width : 75px;
}
#btnPrevious {
    position : absolute;
    z-index : 3100;
    left : 10px;
    top : calc(50% - 32px);
    cursor : pointer;
}
#btnNext img {
    width : 75px;
}
#btnNext {
    position : absolute;
    z-index : 3100;
    right : 10px;
    top : calc(50% - 32px);
    cursor : pointer;
}
#btnSetBackground {
    width : 75px;
    position : absolute;
    z-index : 3100;
    top : 10px;
    left : calc(50% - 32px);
    cursor : pointer;
}

/* .tv === .themeViewer */
.tvContainer {
    position:absolute;
    display : block;
    top : 10px;
    height : calc(100% - 20px);
    left : 10px;
    width : calc(100% - 20px);
    text-shadow : none;
}
.tvTable {
    border-spacing: 10px;
    border-collapse: separate;
    width : 100%;
}
.tvTable th {
    font-weight : bold;
    color : yellow;
}
.tvTable tr {
    background : rgba(0,0,0,0.4);
    border-radius : 10px;
    padding : 10px;
}
.tvTable td {
    padding : 5px;
    vertical-align : middle;
    text-align : center;
}
div.tv_na_url {
    word-wrap:break-word;
    text-shadow : none;
    text-align : left;
    margin-left : 20px;
}
pre.tv_na_url {
    text-shadow : none;
    text-align : left;
    margin-left : 20px;
}
.tv_na_css {
    text-shadow : none;
}
.tvKey {
    color : green;
    background : white;
    text-shadow : none;
}
.tvString { 
    color : blue;
    background : white;
    text-shadow : none;
}
.tvBoolean {
    color : red;
    background : white;
    text-shadow : none;
}
.tvNull {
    color : black;
    background : white;
    text-shadow : none;
}

.statusSuccess {
    animation: glow_yellow .5s infinite alternate;
}
@keyframes glow_yellow {
    to {
        text-shadow : 0 0 10px yellow, 2px 2px 2px rgba(0,0,0,0.4);
    }
}

.statusFail {
    animation: glow_red .75s infinite alternate;
}
@keyframes glow_red {
    to {
        text-shadow : 0 0 10px red, 2px 2px 2px rgba(0,0,0,0.4);
        color : rgba(255,0,0,1);
    }
}

.naWebOS_phpTrace {
    margin-left:20px;
    color : yellow;
    padding : 5px;
    border-radius:8px;
    background:rgba(0,0,50,0.55);
    box-shadow:inset 2px 2px 4px 3px rgba(0,0,0,0.7);
}


/* vividEditor */
.vividEditor_toolbar_dropdown {
    display : inline-block;
}