:root {
    --width-left: 400px;
    --width-right: 400px;
    --height-right: 400px;
    --icons-top: 20px;
    --tablet: 1;
    --color-wech2: #00213A;
    --color-block: #11619E;
    font-size: 12px;
}

*{
    margin: 0;
    border: 0;
    padding: 0;
}

body{
    background-color: var(--color-darksky);
    overflow: hidden;

} 
DIV#LeftBackground {position:absolute;top:28px;left:0px;height:var(--height-right);width:var(--width-left);background-color:var(--color-navy) ;overflow:hidden;}
DIV#LeftArea {
    position: absolute;
    top: 28px;
    left: 0px;
    width: var(--width-left);
    height: calc(var(--icons-top) - 28px);
    background-image: linear-gradient(to bottom, var(--color-space) 0%, var(--color-navy) 100%);
    text-align: center;
    overflow: hidden;
    z-index: 1;
} 
DIV#Icons {position:absolute;top:var(--icons-top);left:0px;width:var(--width-left);text-align:center;overflow:hidden; z-index:1; background-color:var(--color-navy);}
DIV#response_big {color:var(--color-snow);position:absolute;top:calc(var(--icons-top) + 25px);width:var(--width-left);overflow:hidden;display:none;z-index:1000;background-color:var(--color-wech2);padding:14px 2px 0px 2px;text-align:center;letter-spacing:-1px;}
DIV#response_small {color:var(--color-snow);position:absolute; top:calc(var(--icons-top) + 52px);width:var(--width-left);overflow:hidden;display:none;z-index:1000;background-color:var(--color-wech2);padding:0px 2px;text-align:center;letter-spacing:-1px;}
DIV#response_trace {position:absolute;top:0px;width:calc(var(--width-left) -  30px);left:30px;height:28px;overflow:hidden;display:none;z-index:1000;background-color:var(--color-wech2);}
DIV#MainMenu {position:absolute;right:13px;top:8px;z-index:51;}
DIV#RightBackground {position:absolute;right:0px;top:48px;height:calc(var(--height-right) - 20px);width:var(--width-right);background-color:var(--color-navy);overflow:hidden;z-index:2;}
DIV#RightArea {position:absolute;right:0px;height:var(--height-right);width:var(--width-right);top:28px;z-index:52;}

#ImageContainer,#VideoContainer {
    width: var(--width-left);
    height:100%;
    border: 0px none red;
    overflow: hidden;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: top center;
}

#NodeContainer {
    background-color:var(--color-navy);
    background-color:rgba(var(--color-navy-rgb),0.9);
    position:absolute;
    top:28px;
    z-index:5;
    left:0;
    width:var(--width-left);
    height:calc(var(--icons-top) - 28px);
    display:none;
    padding-top:20px;
    box-sizing:border-box;
    overflow:auto;
}
#NodeContainer #NodeHead {
    margin:12px 0 5px 12px;
    font-weight:bold;
    text-align:left;
}
#NodeContainer #NodeArea {
    position: relative;
}
#NodeOrderXL {
    box-sizing: border-box;
}
#NodeTextArea {
    margin: 0 30px;
    width: calc(var(--width-left) - 60px);
    min-height: 100px;
    height: calc(var(--icons-top) - 150px);
    resize: none;
    display: block;
    text-align: left;
    color: var(--color-stormy);
    background-color: var(--color-space);
    color: var(--color-snow);
    border-radius: 0.5rem;
    border: 0 none transparent;
    font-size: 15px;
    padding: 0.5rem;
    border: 0 none transparent;
    outline: none;
}
#NodeTextArea[disabled],
#NodeTextArea.disabled-notes-textarea {
    color: var(--color-rainy);
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
}
#NodeEdit {
    float: right;
    display: block;
    margin: 8px 18px 0 0;
    padding: 0 8px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
    outline: none;
    color: var(--color-airforce);
    background-color: var(--color-admin);
    background-image: linear-gradient(to bottom,var(--color-gold) 0%,var(--color-admin) 100%);
    transition: filter 99ms linear;
}
#NodeEdit:hover {
    text-decoration: none;
    filter: brightness(111%);
}

DIV#SiteBottom {position:absolute;left:0px;right:0px;bottom:0px;height:8px;width:calc(var(--width-right) + var(--width-left) + 8px);background-color:var(--color-wech2);z-index:1000;} 
DIV#SiteHeader {position:absolute;top:0px;left:0px;height:28px;overflow:hidden;width:var(--width-left);z-index:53;} 
DIV#SiteHeader A, DIV#SiteHeader SPAN {margin:0px auto;display:block;width:130px;height:28px;outline:none;color:red;background-position:center center; background-repeat:no-repeat;text-align:center;line-height:28px;font-weight: bold;}
DIV#city {font-weight:bold;font-size:11px;padding:3px;} 
DIV#distance {font-weight:normal;font-size:9px;} 
DIV#onstate {padding:2px 0px 5px 0px;width:100%;} 
.headline {padding:2px;font-weight:bold;} 
A.sliderImg {display:inline-block;width:75px;height:75px;} 
A.sliderImg > IMG {border:0px none transparent;width:75px;height:75px;}

DIV#GalleryContent {
    padding: 4px;
    overflow: auto;
    text-align: center;
} 
.rightContent {
    display:none;
    position:absolute;
    right:0px;
    overflow:hidden;
    height:calc(var(--height-right) + 8px);
    width:var(--width-right);
    top:28px;
    z-index:52;
}
.rightInnerContent {
    position: relative;
    top: 0px;
    border: 0px none var(--color-navy);
    overflow: auto;
    overflow-x: hidden;
    height: calc(var(--height-right) - 18px);
    width: var(--width-right);
    background-color: var(--color-navy);
}
.rightInnerContentTab {
    position: relative;
    border: 0px none red;
    top: 0px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    overflow-x: hidden;
    height: calc(var(--height-right) - 38px);
    width: var(--width-right);
    background-color: var(--color-navy);
    box-sizing: border-box;
}

.hpInh {margin:8px 8px 0 8px;width:calc(var(--width-right) - 56px);}
.galContainer { width: calc(var(--width-right) - 30px); text-align: left;}
.hpBox {width:calc(var(--width-right) - 66px);background-color:#11619E;margin:2px 20px 10px 20px;line-height:1.5em;min-height:36px;padding:2px 4px;color:#C6D7E3;}
.TableX {width:calc(var(--width-right) - 66px);margin:2px 20px 10px 20px;background-color:var(--color-block);}
.thX {width:24%;font-weight:normal;color:var(--color-nature);vertical-align:top;border-bottom:1px solid var(--color-navy);padding:2px 2px 2px 4px;}
.tiX {width:24%;font-weight:normal;vertical-align:top;border-bottom:1px solid var(--color-navy) ;color:var(--color-rainy);padding:2px;}
.tiwX {width:75%;font-weight:normal;vertical-align:top;border-bottom:1px solid var(--color-navy) ;color:var(--color-rainy) ;padding:2px;}
.tiwY {font-weight:normal;line-height:1.5em;vertical-align:top;color:var(--color-rainy);padding:2px;}
.emptyX {width:4%;}
.emptyZ {width:4%;border-bottom:1px solid var(--color-navy) ;}
.stats {font-size:11px;text-align:center;margin:2px auto 4px auto;padding:2px;}
.stats SPAN {font-size:11px;}
.tdicon {width:45px;height:45px;margin:0px 4px 0px 0px;border:0px none red;}
.headerLine {display:block;font-weight:bold;padding:2px;}
.tiwY ul {margin-left:20px;}
.border2 {border:1px solid #277BBB;}
.detailLink {text-decoration:none;color:inherit;}
.mutual {font-weight:bold;color:#FFF}
.mutualComm {font-weight:bold;}
.video-thumb {width:178px; height:178px;display:block;background-repeat:no-repeat; background-size:cover;}
.video-stripe {background-position: 0px 0px;}
.video-xxx {background-image:url('/images/hot.png'); background-position: center center;}
.video-filtered {background-image:url('/images/picfiltered.png'); background-position: center center;}
.video-secure {background-position: center center;}
IMG#Brush {background-image:url('/art/royal/images/icons/icn_invisible_off.png');background-repeat:no-repeat;background-size:cover;}
IMG#pink-package {background-image:url('/art/royal/images/icons/hp-actions.png');background-position-x:-194px;}
IMG#pink-package.grey-package {background-position-y:-17px;cursor:default;}
IMG#nodeimg {background-image:url('/art/royal/images/icons/icn_note_off.png');background-repeat:no-repeat;margin-left:2px;background-size:contain;}
IMG#nodeimg.has-note {background-image:url('/art/royal/images/icons/icn_note_on.png');}
A#favlink >IMG#favimg{background-image:url(/img/profile/icn_fav_none-icn_hp_fav_off_off.svg);}
A#favlink[data-is-fav="true"][data-im-fav="false"]>IMG#favimg{background-image:url(/img/profile/icn_fav_mine-icn_hp_fav_on_off.svg);}
A#favlink[data-is-fav="false"][data-im-fav="true"]>IMG#favimg{background-image:url(/img/profile/icn_fav_his-icn_hp_fav_off_on.svg);}
A#favlink[data-is-fav="true"][data-im-fav="true"]>IMG#favimg{background-image:url(/img/profile/icn_fav_both-icn_hp_fav_on_on.svg);}
IMG#nodeimg{background-image:url(/img/profile/note-off.svg)!IMPORTANT;}
IMG#nodeimg.has-note{background-image:url(/img/profile/note-on.svg)!IMPORTANT;}
IMG#Brush{background-image:url(/img/profile/brush-off.svg)!IMPORTANT;}
IMG#pink-package{background-position-x:unset!important;background-position:center!IMPORTANT;background-size:contain;background-repeat:no-repeat;}
IMG#pink-package{background-image:url(/img/profile/gift-on.svg)!IMPORTANT;}
IMG#pink-package.grey-package{background-image:url(/img/profile/gift-off.svg)!IMPORTANT;}
DIV#fav-choice {width:252px;height:93px;background-image:url('/art/royal/images/bubble-wide.png');position:absolute;z-index:102;padding-top:12px;padding-right:2px;box-sizing:border-box;text-align:center;display:none;}
DIV#fav-choice>A {display:inline-block;overflow:hidden;color:#F9C67E;max-width:224px;height:20px;line-height:20px;vertical-align:middle;}
DIV#fav-choice>A:last-of-type {margin-top:4px;}
DIV#fav-choice>a:hover {text-decoration:underline;}
DIV#fav-choice>a.remove-disabled {opacity:0.5;text-decoration:none!important;cursor:default;}
A#app-icon {float:right;margin:6px 0px 2px 4px;width:22px;height:12px;background-image:url('/img/app/app-mini.png');
background-size:22px 12px;outline:none;}
DIV#app-release {position:absolute;z-index:101;width:132px;height:106px;background-image:url('/art/royal/images/bubble.png');
background-repeat:no-repeat;display:none;}
DIV#app-release>A {text-decoration:none;color:#F3BE7E;}
DIV#app-release>A:first-child {position:relative;top:6px;left:15px;width:75%;width:calc(100% - 34px);display:block;
height:69px;padding-top:38px;box-sizing:border-box;overflow:hidden;background-repeat:no-repeat;
text-decoration:none;outline:none;}
DIV#app-release>a:first-child:hover {text-decoration:underline;}
DIV#app-release>a:last-child {position:absolute;top:5px;right:10px;color:#F3BE7E;font-size:14px;cursor:help;border-radius:50%;
width:16px;height:16px;text-align:center;border:1px solid transparent;opacity:0.7;
transition-duration:60ms;transition-property:background-color,color}
DIV#app-release>a:last-child:hover {color:var(--color-wech2);background-color:#F3BE7E;opacity:1;}
DIV#app-release>a:last-child:hover:after {content:attr(data-info);position:absolute;left:20px;width:400px;max-height:50vh;
padding:8px;background-color:#003065;color:lightgrey;border-radius:4px;
border-bottom-left-radius:0;box-shadow:2px 2px 2px #001D3B;overflow:hidden;
white-space:pre-wrap;font-size:11px;text-align:left;}
DIV#app-release[data-release-state='-1']>A:first-child {background-image:url('/art/royal/images/icn_home_give_off.png');
background-position:38px 0px;}
DIV#app-release[data-release-state='1']>a:first-child {background-image:url('/art/royal/images/icn_home_accepted.png');
background-position:38px 8px;font-size:10px;}
#Blur {position:absolute;left:0px;top:4px;z-index:1000000;width:24px;height:24px;}
.vertical, .vertical:hover {text-decoration:none;font-weight:bold;transform:rotate(270deg);color:white;transform-origin: center center 0px;white-space: nowrap;display: block;text-align: center;margin:20px 0 0 0;}
DIV.galNav {float:right;}
TABLE {border:0px none transparent;border-spacing: 0px;border-collapse: collapse;table-layout:fixed;}
.slide DIV {box-sizing: border-box;display:block;width:12px;line-height:90px;height:90px;float:left;white-space:nowrap;border:0px none transparent;background-color:rgba(var(--color-moon-rgb),0.5);background-repeat:no-repeat;background-position:center center;}
.slide DIV.slideDiv {overflow:hidden;width:calc(100% - 90px);border-right:20px solid transparent}
#sliderImg, #sliderVid {position:relative;background-color:transparent;}
.slide DIV DIV.slider SPAN {cursor:pointer;margin:5px 10px;background-repeat:no-repeat;width:80px;height:80px;display:inline-block;}
.slide DIV DIV.slider SPAN[data-filter='1'] {background-size: 22px 22px, contain!important;background-position:center center,center center;background-image:url("/img/icon/filter_gold.svg");}
.slide DIV DIV.slider SPAN[data-xxx='1'] {background-size: cover, contain!important;background-position:center center,center center;background-image:url("/img/misc/xxx_212.png");}
.slide .leftSlider {
    cursor: pointer;
    margin: 0 10px;
    width: 12px;
    background-color: transparent;
    background-image: url('/images/gr2/leftarrow.gif');
}
.leftSlider:hover {background-image:url('/images/gr2/leftarrow_high.gif');}
.slide .rightSlider {cursor:pointer;margin:0 10px;width:12px;background-color:transparent;background-image:url('/images/gr2/rightarrow.gif');}
.rightSlider:hover {background-image:url('/images/gr2/rightarrow_high.gif');}
.slide .sliderTxt {width:20px;}
SPAN.subtitle {margin:4px 2px 2px 4px;width:80%;white-space:nowrap;display:inline-block;overflow:hidden;text-overflow:ellipsis;}
#VideoContent DIV.vidinfo {width:calc(100% - 262px);height:220px;margin:5px 20px 5px 0px;background-color:var(--color-neptune);float:left;}
#VideoContent DIV.vid, #VideoContent DIV.videostripe {background-repeat:no-repeat;cursor:pointer;display: inline-block;width: 212px;border:4px solid var(--color-navy);height: 212px;margin:5px 0px 5px 20px;float:left;}
#VideoContent DIV.vid[data-filter='1'] {background-size: 60px 60px, contain!important;background-position:center center,center center;background-image:url("/img/icon/filter_gold.svg");}
#VideoContent DIV.vid[data-xxx='1']    {background-size: cover, contain!important;background-position:center center,center center;background-image:url("/img/misc/xxx_212.png");}

DIV.vidTitle {font-weight:bold;padding:10px;}
#ImageSlider,#VideoSlider {height:0px;margin-top:1px;}
#VideoContent H1 {margin:8px;font-size:1.1em;font-weight:bold;}
#VideoContent DIV.comments,#VideoContent DIV.duration  {margin:8px;font-size:1.1em;color:var(--color-nature);}
#VideoContent DIV.likes {float:none;margin:8px;display:inline-block;}
DIV.profilegalPicture[data-xxx='1']  {background-size: cover, contain!important;background-position:center center,center center;background-image:url("/img/misc/xxx_212.png");}

.profilegalPicture > span.contentfilter {
    width: 100%;
    height: 100%;
    display: block;
    background-size: 60px 60px;
    background-image: url('/img/icon/filter_gold.svg');
    background-position: center center;
    background-repeat: no-repeat;
}

DIV.profilegalPicture {
    display: inline-block;
    border: 0px none transparent;
    margin: 4px;
    background-color: rgb(0, 43, 85);
    width: 150px;
    height: 150px;
    cursor: pointer;
}

DIV.profilegalPicture > DIV.likes,
DIV.vidinfo > DIV.likes {
    padding: 3px 10px 3px 10px;
    margin: 120px 0 0 0;
    display: block;
    border-style: none;
    background-color: rgba(var(--color-airforce-rgb),0.8);
    color: var(--color-moon);
    float: left;
    clear: both;
    max-width: 90px;
    text-align: left;
    margin-left: 4px;
    border-radius: 15px;
    height: 15px;
    background-image: url('/img/icon/heart_blue_outline.svg');
    background-repeat: no-repeat;
    background-position: 10px 5px;
    cursor: pointer;
}

DIV.profilegalPicture > DIV.likes[data-liked="1"],
DIV.profilegalPicture > DIV.likes:hover,
DIV.vidinfo > DIV.likes[data-liked="1"],
DIV.vidinfo > DIV.likes:hover {
    color: var(--color-gold);
    background-image: url('/img/icon/heart_gold.svg');
}

DIV.profilegalPicture > DIV.likes > SPAN.likesCount,
DIV.vidinfo > DIV.likes > SPAN.likesCount {
    font-size: 11px;
    margin-left: 13px;
    min-width: 13px;
    text-align: right;
    display: inline-block;
    background-color: transparent;
    color: inherit;
    padding-left: 5px;
}

#CoverImage {
    position:absolute;
    display:block;
    width: var(--width-left);
    height: 400px;
    left: 0;
    top: 0;
}


#icons-nickname-cell {
    background-color: var(--color-wech2);
}

body {

}

.hpBox {
    background-color: var(--color-neptune);
}

a {
    color: var(--color-lightsky);
}

#HomeContent.rightInnerContent {
    border-top-color: var(--color-space) !important;
}

#SlideDiv {
    background-color: transparent !important;
}

.slideDiv,
#sliderTxtVid,
#sliderTxtImg,
.TableX,
.headline {
    background-color: var(--color-space) !important;
}

.thX, .tiX, .tiwX, .emptyX {
    background-color: var(--color-neptune) !important;
}

.emptyZ,
.empty {
    background-color: var(--color-neptune) !important;
    border-bottom: 1px solid var(--color-navy);
}

.thX {
    color: var(--color-nature) !important;
}

#icons-nickname-cell {
    background-color: var(--color-darksky);
}

#MainMenu #tab_0_0,
#MainMenu #tab_1_0,
#MainMenu #tab_2_0,
#MainMenu #tab_3_0,
#MainMenu #tab_4_0,
#MainMenu #tabx_0_0,
#MainMenu #tabx_1_0,
#MainMenu #tabx_2_0,
#MainMenu #tabx_3_0,
#MainMenu #tabx_4_0 {
    background-color: var(--color-bluesky) !important;
    background-image: unset !important;
}

    #MainMenu #tab_0_0[style*="tab_bg_active.gif"],
    #MainMenu #tab_1_0[style*="tab_bg_active.gif"],
    #MainMenu #tab_2_0[style*="tab_bg_active.gif"],
    #MainMenu #tab_3_0[style*="tab_bg_active.gif"],
    #MainMenu #tab_4_0[style*="tab_bg_active.gif"],
    #MainMenu #tabx_0_0[style*="tab_bg_active.gif"],
    #MainMenu #tabx_1_0[style*="tab_bg_active.gif"],
    #MainMenu #tabx_2_0[style*="tab_bg_active.gif"],
    #MainMenu #tabx_3_0[style*="tab_bg_active.gif"],
    #MainMenu #tabx_4_0[style*="tab_bg_active.gif"],
    #DetailNavigation #tab_0_5[style*="tab_bg_active.gif"],
    #DetailNavigation #tab_1_5[style*="tab_bg_active.gif"],
    #DetailNavigation #tab_2_5[style*="tab_bg_active.gif"],
    #DetailNavigation #tab_3_5[style*="tab_bg_active.gif"],
    #DetailNavigation #tab_4_5[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_0_3[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_1_3[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_2_3[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_0_1[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_0_2[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_0_4[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_1_2[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_1_4[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_2_4[style*="tab_bg_active.gif"],
    #GalleryNavigation #tab_3_4[style*="tab_bg_active.gif"] {
        background-color: var(--color-space) !important;
        transition: .1s linear background-color;
    }

#MainMenu .tabTable,
#DetailNavigation .tabTable,
#GalleryNavigation .tabTable {
    border-collapse: separate !important;
}

#DetailNavigation #tab_0_5,
#DetailNavigation #tab_1_5,
#DetailNavigation #tab_2_5,
#DetailNavigation #tab_3_5,
#DetailNavigation #tab_4_5 {
    background-color: var(--color-bluesky) !important;
    background-image: unset !important;
}
#sectri_1_5,
#sectri_2_5 {
    background-color: var(--color-darksky) !important;
}
#sectri_1_5,
#sectri_2_5 {
    background-color: transparent !important;
}
#tabx_0_0,
#tabx_1_0,
#tabx_2_0,
#tabx_3_0,
#tabx_4_0,
#tab_0_5,
#tab_1_5,
#tab_2_5 {
    padding-left: 4px;
    border-left: 1px solid var(--color-neptune);
    border-top: 1px solid var(--color-neptune);
    border-top-left-radius: 8px;
}
#tab_0_0,
#tab_1_0,
#tab_2_0,
#tab_3_0,
#tab_4_0,
#tab_0_5,
#tab_1_5,
#tab_2_5 {
    border-right: 1px solid var(--color-neptune);
    border-top: 1px solid var(--color-neptune);
    border-top-right-radius: 8px;
}
#secrow_0_0,
#secrow_1_0,
#secrow_2_0,
#secrow_3_0,
#secrow_4_0 {
    background-color: transparent !important;
}
img[src="/images/tab_end.gif"],
#GalleryNavigation #sectri_1_4,
#GalleryNavigation #sectri_2_4,
#GalleryNavigation #sectri_3_4,
#GalleryNavigation #edge_0_1,
#GalleryNavigation #edge_0_2,
#GalleryNavigation #edge_0_3,
#GalleryNavigation #edge_0_4,
#GalleryNavigation #edge_1_3,
#GalleryNavigation #edge_2_3,
#GalleryNavigation #edge_1_2,
#edge_0_0,
#edge_1_0,
#edge_2_0,
#edge_3_0,
#edge_4_0,
#edge_0_5,
#edge_1_5,
#edge_2_5,
#edge_3_5,
#edge_4_5 {
    opacity: 0 !important;
}
#GalleryNavigation #tab_0_3,
#GalleryNavigation #tab_1_3,
#GalleryNavigation #tab_2_3,
#GalleryNavigation #tab_0_1,
#GalleryNavigation #tab_0_2,
#GalleryNavigation #tab_0_4,
#GalleryNavigation #tab_1_2,
#GalleryNavigation #tab_1_4,
#GalleryNavigation #tab_2_4,
#GalleryNavigation #tab_3_4 {
    padding-left: 8px;
    background-color: var(--color-bluesky) !important;
    background-image: unset !important;
    border-left: 1px solid var(--color-neptune);
    border-top: 1px solid var(--color-neptune);
    border-right: 1px solid var(--color-neptune);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.tabTable .edge,
.tabTable td[id^="sectri_"] {
    max-width: 4px;
}

#reportIFrame {
    background-color: var(--color-bluesky) !important;
    border-color: var(--color-space) !important;
}

.slide .leftSlider,
.slide .rightSlider {
    transition: filter 60ms linear;
}

.slide .leftSlider,
.leftSlider:hover {
    background-image: url(/img/icon/chevron-left-gold.svg);
}

.slide .rightSlider,
.rightSlider:hover {
    background-image: url(/img/icon/chevron-right-gold.svg);
}

.leftSlider:hover,
.rightSlider:hover {
    filter: contrast(150%) saturate(150%);
}

#grNaviPrevious,
#grNaviNext {
    background-repeat: no-repeat;
    background-size: auto 62%;
    filter: hue-rotate(171deg);
}

#grNaviPrevious,
#grNaviPrevious:hover {
    background-image: url(/img/icon/chevron-left-gold.svg);
    background-position: center;
}

#grNaviNext,
#grNaviNext:hover {
    background-image: url(/img/icon/chevron-right-gold.svg);
    background-position: center;
}

#grNaviPrevious:hover,
#grNaviNext:hover {
    filter: unset;
}


.mainStats {
    background-color: var(--color-darksky);
    width:100%;
    text-align:center;
    padding:2px;
}

#mainIcons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-inline: 1rem;
    padding:6px 20px;
    box-sizing:border-box;
}

#mainIcons > a {
    display:inline-block;
    background-color:transparent;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    width:27px;
    height:17px;
    cursor:pointer;
    outline:none;
}

#smileyIcon {
    background-image: url("/img/icon/smiley-off.svg");
}

#smileyIcon[data-set="1"]{
    background-image: url("/img/icon/smiley-on.svg");
}

#smileyIcon[data-special="christmas"] {
    background-image: url("/img/icon/smiley-bauble-off.svg");
}

#smileyIcon[data-special="christmas"][data-set="1"] {
    background-image: url("/img/icon/smiley-bauble-on.svg");
}

#smileyIcon[data-special="halloween"] {
    background-image: url("/img/icon/smiley-jackolantern-off.svg");
}

#smileyIcon[data-special="halloween"][data-set="1"] {
    background-image: url("/img/icon/smiley-jackolantern-on.svg");
}

#smileyIcon[data-special="valentines"] {
    background-image: url("/img/icon/smiley-love-off.svg");
}

#smileyIcon[data-special="valentines"][data-set="1"] {
    background-image: url("/img/icon/smiley-love-on.svg");
}

#dickyIcon {
    background-image: url("/img/profile/dicky-off.svg");
}

#dickyIcon[data-set="1"] {
    background-image: url("/img/profile/dicky-on.svg");
}

#chatIcon {
    background-image: url("/img/profile/chat-off.svg");
}

#favIcon {
    background-image: url("/img/profile/icn_fav_none-icn_hp_fav_off_off.svg")
}

#favIcon[data-is-fav="true"][data-im-fav="false"] {
    background-image: url("/img/profile/icn_fav_mine-icn_hp_fav_on_off.svg");
}

#favIcon[data-is-fav="false"][data-im-fav="true"] {
    background-image: url("/img/profile/icn_fav_his-icn_hp_fav_off_on.svg");
}

#favIcon[data-is-fav="true"][data-im-fav="true"] {
    background-image: url("/img/profile/icn_fav_both-icn_hp_fav_on_on.svg");
}

#saveIcon {
    background-image: url("/img/profile/save-off.svg");
}
#saveIcon[data-saved="true"] {
    background-image: url("/img/profile/save-on.svg");
}

#noteIcon {
    background-image: url("/art/royal/images/icons/icn_note_off.png");
}

#noteIcon[data-note="true"] {
    background-image: url("/art/royal/images/icons/icn_note_on.png");
}

#coverIcon[data-offline],
#coverIcon[data-own] {
    display: none;
}

#coverIcon[data-covered] {
    background-image: url("/art/royal/images/icons/icn_invisible_on.png")
}

#coverIcon {
    background-image: url("/art/royal/images/icons/icn_invisible_off.png");
    transition:background-size ease-in-out 0.5s;
}

#coverIcon[data-animate="1"] {
    background-size:10px;
}

#xlIcon {
    background-image: url("/img/profile/gift-on.svg");
}

#xlIcon[data-disabled] {
    background-image: url("/img/profile/gift-off.svg");
}

a#appIcon {
    position:absolute;
    top:0;
    right:0;
    margin: 6px 0px 2px 4px;
    background-image: url("/img/app/app-mini.png");
    background-size: 22px 12px;
}

#appRelease {
    position: absolute;
    z-index: 101;
    width: 132px;
    height: 106px;
    background-image: url('/art/royal/images/bubble.png');
    background-repeat: no-repeat;
    opacity:0;
}

#appRelease > a {
    text-decoration: none;
    color: #F3BE7E;
}

#appRelease > a:first-child {
    position: relative;
    top: 6px;
    left: 15px;
    width: 75%;
    width: calc(100% - 34px);
    display: block;
    height: 69px;
    padding-top: 38px;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    text-decoration: none;
    outline: none;
}

#appRelease > a:first-child:hover {
    text-decoration: underline;
}

#appRelease > a:last-child {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #F3BE7E;
    font-size: 14px;
    cursor: help;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    text-align: center;
    border: 1px solid transparent;
    opacity: 0.7;
    transition-duration: 60ms;
    transition-property: background-color,color
}

#appRelease > a:last-child:hover {
    color: var(--color-wech2);
    background-color: #F3BE7E;
    opacity: 1;
}

#appRelease > a:last-child:hover:after {
    content: attr(data-info);
    position: absolute;
    left: 20px;
    width: 400px;
    max-height: 50vh;
    padding: 8px;
    background-color: #003065;
    color: lightgrey;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    box-shadow: 2px 2px 2px #001D3B;
    overflow: hidden;
    white-space: pre-wrap;
    font-size: 11px;
    text-align: left;
}

#appRelease[data-release-state='-1'] > A:first-child {
    background-image: url('/art/royal/images/icn_home_give_off.png');
    background-position: 38px 0px;
}

#appRelease[data-release-state='1'] > a:first-child {
    background-image: url('/art/royal/images/icn_home_accepted.png');
    background-position: 38px 8px;
    font-size: 10px;
}

#mainNickname {
   font-size:19px;
   font-weight:bold;
}

DIV#favChoice {
    width: 252px;
    height: 93px;
    background-image: url('/art/royal/images/bubble-wide.png');
    position: absolute;
    z-index: 102;
    padding-top: 12px;
    padding-right: 2px;
    box-sizing: border-box;
    text-align: center;
    opacity:0;
    transition:opacity ease-in-out 0.5s;
}

DIV#favChoice > A {
    display: inline-block;
    overflow: hidden;
    color: #F9C67E;
    max-width: 224px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    cursor: pointer;
}

DIV#favChoice > A:last-of-type {
    margin-top: 4px;
}

DIV#favChoice > a:hover {
    text-decoration: underline;
}

DIV#favChoice > a.remove-disabled {
    opacity: 0.5;
    text-decoration: none !important;
    cursor: default;
}

#report-block-icon {
    position: absolute;
    display: block;
    background-color: transparent;
    width: 1.6rem;
    height: 1.6rem;
    left: calc(var(--width-left) - 3rem);
    top: calc(var(--icons-top) - 5rem);
    cursor: pointer;
    background-image: url(/img/icon/report.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: .5;
}

#report-block-icon:hover {
    opacity:1;
}

#VideoContainer + #report-block-icon {
    top:1rem;
}

.report {
    background-image: url(/img/profile/icn_alert.svg);
}
.block {
    background-image: url(/img/profile/icn_block.svg);
}

.report-block-dialog {
    border-radius: 1rem;
    width: 50ch;
    padding: 0;
    box-shadow: rgba(var(--color-darksky-rgb),.5) 0 0 2rem 1rem;
    background-color: var(--color-space);
    font-family: Poppins,Verdana,Tahoma,Arial,sans-serif;
    color: var(--color-snow);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity ease-in-out 10s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.report-block-dialog[open] {
    opacity: 1;
}


.report-block-dialog textarea {
    outline: none;
    border: 0 none transparent;
    padding: 0.5rem;
    border-radius: 0.5rem;
    resize: vertical;
    background-color: var(--color-rainy);
    color: var(--color-darkestsky);
    font-size: 1rem;
    display: block;
    width: 80%;
    resize: vertical;
    margin: 0.5rem auto 0.5rem auto;
}

.report-block-dialog textarea::placeholder {
    color: var(--color-stormy);
}

.report-block-dialog h2 {
    text-align: center;
    font-size: 1.2rem;
    width: calc(100% - 5rem);
    margin: 1rem 2.5rem 1rem 2.5rem;
}

.report-block-dialog .close {
    display: inline-block;
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    background-repeat: no-repeat;
    background-size: 1.4rem;
    background-image: url(/img/icon/ball-x.svg);
    background-position: center center;
    padding: 1rem;
    top: 0;
    right: 0;
    cursor: pointer;
}

#reportdialog label {
    text-align: left;
    user-select: none;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    display: block;
    background-repeat: no-repeat;
    background-position: 0.7rem 0.7rem;
    background-size: 1.2rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-bluesky);
    background-image: url(/img/ui/checkbox-off.svg);
}

#reportdialog label:last-of-type {
        border-bottom: none;
}

#reportdialog input {
    display: none;
}

#reportdialog input:checked + label {
    background-image: url(/img/ui/checkbox-on.svg);
}

#reportdialog input:checked + label + #reportreasontext {
    visibility: visible;
}

#reportreasontext {
    visibility: hidden;
    height: 2.5rem;
}

.submitArea {
    background-color: var(--color-navy);
    display: flex;
    justify-content: space-evenly;
    padding: 0.5rem;
}

.submitArea > button {
    border: 0;
    width: clamp(8ch,20ch,40%);
    font-size: 1rem;
    padding:0.2rem;
    background-color: var(--color-airforce);
    padding-block: 0.1rem;
    margin: 1rem;
    border-radius: 1rem;
    user-select: none;
    color: var(--color-snow);
    cursor: pointer;
    outline:none;
}

#submitReport, #submitBlock {
    background-image: linear-gradient(180deg, #ff5153, #eb3535 );
}

#cancelReport, #cancelBlock {
    background-image: linear-gradient(180deg, #20bef0, #0d88ed );
}

#blockdialog::backdrop {
    backdrop-filter: blur(0);
    transition: all linear 3s;
}

#blockdialog[data-blocked] {
    min-height: 12rem;
} 

#blockdialog[data-blocked="0"]::backdrop {
    backdrop-filter: blur(1rem);
}

#blockdialog[data-blocked="1"]::backdrop {
    backdrop-filter: blur(4rem);
}

#blockreasontext {
    min-height: 5rem;
}

#blockedform {display:none;text-align:center;}
#blockdialog[data-blocked] #blockedform {display:block;}
#blockdialog[data-blocked] #blockform {display:none;}

#blockedform > p {
    text-align: left;
    border: 2px solid var(--color-gold);
    border-radius: 0.8rem;
    padding: 0.5em;
    font-size: 1rem;
    background-size: 1.5rem;
    margin: 1rem 1rem;
    background-color: var(--color-bluesky);
}

#blockedform > p .circle-gold {
    background-color: var(--color-gold);
    background-image: linear-gradient(to bottom,var(--color-gold) 0%,var(--color-admin) 100%);
    color: var(--color-darksky);
    padding: 0.1rem;
    line-height: 1.2rem;
    text-align: center;
    font-weight: 900;
    font-size: 1.2rem;
    display: none;
    border-radius: 2rem;
    width: 1.2rem;
    height: 1.2rem;
    float: right;
    margin-top: -0.3em;
    margin-right: -0.3em;
}

.gold-button {
    display: block;
    margin: 0.8rem auto;
    padding: 0.5rem 1.5rem;
    background-color: var(--color-gold);
    background-image: linear-gradient(to bottom, var(--color-gold) 0%, var(--color-admin) 100%);
    color: var(--color-airforce);
    font-size: 1.25rem;
    font-weight: 600 /*SemiBold*/;
    border-radius: 2rem;
    outline: none;
    border: 0 none transparent;
    cursor: pointer;
}

.gold-button:hover {
    background-image: linear-gradient(to top, var(--color-gold) 0%, var(--color-admin) 100%);
    color: var(--color-navy);
    border: 0 none transparent;
}

button#closeBlock,
button#error-dialog-close {
    background-color: var(--color-gold);
    background-image: linear-gradient(to bottom,var(--color-gold) 0%,var(--color-admin) 100%);
    font-weight: bold;
    padding: 0.8rem 2ch;
    border-radius: 2rem;
    color: var(--color-darksky);
    border: none transparent;
    outline: none;
    appearance: none;
    cursor: pointer;
    margin: 0 0 1rem 0;
}

#block-error-dialog p {
    text-align: left;
    border: 2px solid var(--color-fire);
    border-radius: 0.5em;
    padding: 0.5em;
    font-size: 1rem;
    background-size: 1.5rem;
    width: 80%;
    margin: 1rem auto;
    background-color: var(--color-bluesky);
}

#block-error-dialog p#block-error-limit-reason,
#block-error-dialog[data-limit] p#block-error-reason {
    display: none;
}

#block-error-dialog p#block-error-reason,
#block-error-dialog[data-limit] p#block-error-limit-reason {
    display: block;
}

#block-manage {
    font-size: inherit;
    color: var(--color-lightsky);
    cursor: pointer;
}

dialog.bubble {min-width:40ch;}