:root {
  --nav-font-size: 1.6rem;
  --nav-font-color: #FFF;
  --nav-font-bg: rgba(30,30,30,.7);

}

#app{ height:100%}
.btn-hover{cursor: pointer;webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-transition:all .3s ease-out;}
.btn-hover:hover{-webkit-filter: contrast(120%) brightness(120%);-moz-filter: contrast(120%) brightness(120%);-ms-filter: contrast(120%) brightness(120%);-o-filter: contrast(120%) brightness(120%);filter: contrast(120%) brightness(120%);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80);transform: translateY(-10px);}
.game-stage{ width: 100%;display: block;}

.map-ui-Popups,.game-popup-bg{     z-index: 50;position:absolute; z-index: 21; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.6)}

.map-ui-popup.layout-popmessage,.ui-popup-item{height: auto; width: auto; max-height: 94%;max-width: 94%;}

.game-popup-bg{ overflow: auto;}


.v-3 .map-ui-popup.item-props-view{height: auto;width: auto;max-height: 96%;max-width: 94%; }
.map-ui-popup{max-width: 1280px;height: 96%;width: 94%; border-radius: 5px;box-shadow: 1px 2px 5px #333,1px 2px 30px #888; position:relative; }
.layout-display.map-ui-popup,.layout-vo.map-ui-popup {  }
.map-ui-Popup-bg-btn{ position:absolute; z-index:0; left:0; top:0; width:100%; height:100%; opacity:0;}
.ui-fate-share{ padding:1rem 2rem 0 0;    z-index: 2;  position: relative; }
.icomoon-icon{width:22px; display:inline-block; margin:auto .25rem;     min-width: unset;}
.icomoon-icon img{width:100%; }
.ui-fate-share .fa-clipboard{ font-size:22px; display:inline-block; padding-right:1rem; padding-left:1rem; }

.map-ui-popup-header{ background:#EEE;border-radius: 5px 5px 0 0; 
 position:absolute; width:100%;  height:60px; display:flex; align-items:center; justify-content:center; z-index:1;  }
.map-ui-popup-header h3{padding: 1rem;font-size: 1.5rem;color: #333;font-weight: bolder;}
.map-ui-popup-header.with-char{ background:#888; }
.map-ui-popup-header.with-char h3{ color:#FFF; }

.popup-btn-close{color: #FFF !important;font-size: 1.7rem; 
    position:absolute ;z-index: 100;
    line-height: 0; background: #333;border-radius: 10% 0 0 10%;
    display: flex;align-items: center; justify-content: center; cursor: pointer; 
    width: 3rem; height: 3rem;    right: 0rem;
    top: 0rem;padding: 0;}
.popup-btn-close:hover{ color: yellow !important;}
.map-ui-popup-contents{ display:flex;background:#F6F6F6;border-radius: 5px;  padding-top:60px;height:100%;    position: relative;
    width: 100%;  }

.map-ui-popup-contain{ padding:0px; line-height:200%;  text-align:left;  position: relative;
	max-width: 100%; vertical-align: top; display: inline-flex; flex-direction: column; width:100%;
  overflow:auto;
}
.map-ui-popup-containright{ min-width: 256px; width:20%; display: inline-block; vertical-align: top;
	height: 100%;  background: #F2F2F2; border-radius: 0;  border-left:1px solid #CCC; border-radius: 0 0 5px 0 ;overflow: auto;}

.map-ui-popup{ position:relative; text-align:center;background: #FFF; border-radius: 10px;box-shadow: 1px 2px 10px #AAA;  
              max-width: 80%; margin: 10px auto; max-height:100%; }
.map-ui-popup.auto-wid{ padding:1rem 1.5rem 1.5rem 1.5rem; width:auto; height:auto; }

.map-ui-popup{  }
.popup-message-header h3{ font-size:1.8rem; font-weight:bold; padding-bottom:1rem; }
.popup-message-desc{ font-size:1.4rem; color:#555;}
.ui-popup-message.auto-wid{width:380px; max-width:80%; padding:1rem 3rem 2rem 2rem;}
.popup-form-header { font-size:1.3rem; font-weight:bold; 
  padding-bottom:.5rem;     word-break: break-all; }
.popup-form-desc{padding-bottom:.5rem;  color:#b77474;  }
.popup-form-row{ padding:.5rem 0; }
.popup-form-ui-row > div{ padding:0 .25rem; }
.form-row-input{ display:flex; align-items: center; }
.form-row-input input,.form-row-input select,.form-row-input textarea{ width:100%; border:1px solid #CCC; border-radius:5px;}
.form-row-input .popup-form-inputs{ width:100%; }
.form-row-input .popup-form-label{ min-width:6rem;text-align: left; }
.popup-form-ui-row{ border-top:1px solid #CCC; margin-top:.5rem; padding-top:.5rem; display:flex;  justify-content: space-around;}
.form-error{  color: #ac0000;display: block;  font-size: small;  text-align: left; }
.layout-vo .map-ui-popup-containright{ background-color:unset; }
.layout-vo .map-ui-popup-containright{ padding-top:400px; position:relative; z-index:2; }
.layout-vo .ui-fate-desc{padding: 15px;border-radius: 10px;border: 2px solid #CCC; background:#FFF; box-shadow: 0 5px 10px #ccc, 0 5px 10px #ccc;}

.game-player-custom-fr{ width:90%; max-width:500px; }
.map-ui-vo-char{ width: 300px; max-height: 100%;
    right: 0;
    /* background-size: contain;
    background-repeat: no-repeat;
    /* z-index: 13; */
    margin-left: -45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
.map-ui-vo-char img{ min-width:200px; height:auto; }
.map-ui-vo-char + div{  }
.excerpt-html{padding:2rem;}
.excerpt-html img{ max-width:100%;   margin: auto; display: block; }
.excerpt-html img{ height:auto !important;}
.excerpt-html{ max-height:unset;  max-height:100%; overflow: auto; width: 100%;}
.excerpt-html > iframe{width:90%; height:70vh; }

.ui-fate-links-widget{ padding:15px; }
.ui-fate-links-widget h3{ font-size:18px; font-weight:bolder; color:#666; }
.ui-fate-links-widget ul{ margin:0; padding:0; }
.ui-fate-links-widget li{ list-style: none; margin-bottom:15px;}
.ui-fate-links-widget li a{ padding:.5rem; text-align:center; display:block; border-radius:5px; box-shadow:0 0 5px #CCC; background:#FFF;
                font-size:1.2rem; font-weight: bold; color:#1089cf;line-height: 1.6rem;  }
.ui-fate-links-widget li:nth-child(even) a{ }

.head-ui{  position: absolute;  }
.head-ui.on-walking{ display:none; }
.people-name{     width: 100px; position: absolute;text-align: center; left: -50px; font-size: .9rem; font-weight: bolder;    padding: 20vh; }

.ui-Notifis{ position: absolute; width: 100%; text-align: center;z-index: 20;display: flex; flex-direction: column; top:15vh;}
.ui-Notifi-one{ display: inline-flex;  background: rgba(0,0,0,.8);padding: .75rem 2rem;  
    margin: 0 auto .5rem auto; text-align:center; color:#CCC; border-radius:20px; flex-direction: column;
    animation: fadeInAniFr ease-out 4s; animation-iteration-count: 1;transform-origin: 50% 50%; animation-fill-mode:forwards;

}
.ui-Notifi-title{ color:yellow; }
.ui-Notifi-desc{ font-size:.9rem; padding-top:.25rem; }
.in-room-span{ color:#f19342; font-size:.8rem; }


.fadeInAni{
  animation: fadeInAniFr ease-out 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}
.top-bar-nav{ padding-top:.75rem; }

.btn-exhibitor{ background: #000; color:#ffb65c !important; font-size:.8rem; padding:1px 4px;  display: inline-block;}
.color-exhibitor-red,.red-span{ color:red !important;}


.view3d.on-mobile-p .UIStageBottom{position: fixed;  width: 100%;  bottom: 0;}
.view3d.on-mobile-p .vk-left-ui, .view3d.on-mobile-p .vk-right-ui{
  display:none;
}
.view3d.on-mobile-p .vk-left-ui.active, .view3d.on-mobile-p .vk-right-ui.active{
  display:block;
}
.on-mobile-p .bottom-tool-nav{justify-content: center;}

.view3d.layout-set-l .UIMainStage { height:100vh  !important; }

.map-184 .ui-btn-minmap,.map-184 .nav-li-map-list,.map-184 .nav-li-user{ display:none; }
.view3d.on-mobile-p .UIStageBottom{ height:0; }

.ui-fateshop-products{    padding: 2rem; display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;  grid-auto-rows: minmax(100px, auto);}

.view3d .vk-left-ui,.view3d .vk-right-ui{ position:fixed; z-index:1;}
.view3d .top-right-nav-sub-nav{min-width:220px;}



.popup-appform{max-height: 100%; position: absolute;  padding: 1rem; width:100%; top: 0;    width: 100%;  left: 0;}
.game-popup-bg .JtFormSection{ display:block;    padding: 3rem 0;  }

.game-popup-bg .JtFormSection > .mt-5 { margin-top:0 !important; }
.game-popup-bg .JtFormSection .Section-title{    background: #FFF; border-radius: 0.375rem 0.375rem 0 0; padding-top:1rem;}
.game-popup-bg .JtFormSection .Section-frame{ border-top-left-radius:0; border-top-right-radius:0; }
.files-selector.active{ z-index:99; }
.row-w-half .section-form-row{    width: 48%;  display: inline-block;  vertical-align: top;  margin-right: 2%;}
body .custom-fr-avators{padding-top:35px;}
.custom-fr-avators{    overflow-y: hidden;}
@keyframes fadeInAniFr{
  0% {
    opacity:0;
    transform:  translate(0px,22px)  ;
  }
  11% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
  88% {
    opacity:1.00;
    transform:  translate(0px,0px)  ;
  }
  98% {
    opacity:0;
    transform:  translate(0px,-90px)  ;
  }
  100% {
    opacity:0;
    transform:  translate(0px,-90px)  ;
    display::none;
  }
}

.chat-history .text-sm{    overflow-wrap: break-word;}
  .layout-set-l.autoHei #mapOneFloor, .layout-set-l.autoHei .UIMainStage{  }
.chat-view-nav{}
.chat-view-nav-admin{    position: absolute; right: 5px;  top: 0px;}
.in-room .draggable-main{background: #333 !important; color: #FFF;}
.in-room .newauthor .chat-who{color: #CCC;}
.in-room .draggable-header{background: #555;  color: yellow;}
.in-room .draggable-footer{background: #555; }
 .chat-input-ui button{background: #EEE;}

li.fix-top-mess{ position:absolute; width:100%; line-height:16px !important; padding:5px 0; }
.fix-top-mess .text-sm.chat-msg{ line-height:16px; font-size:13px;  }

.layout-set-p.left-nav-off .game-popup-bg{padding-left: 10px !important;}
.layout-set-p.right-nav-off .game-popup-bg{padding-right: 10px !important;}


.on-mobile-p .top-bar-nav{ flex-direction: row;}
.layout-set-p.view3d .game-popup-bg{ padding: 10px 180px 0 250px; }
.layout-set-p.view3d .vk-bottom-ui{bottom:3vh;}

.popup-in{ animation: popup-in-Frames ease-out .3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

.ui-popup-form .section-form-row{    text-align: left;gap: 1.5rem;}
.ui-popup-form .form-wrapper{ max-height: 100%; overflow: auto;}
.accept_policy .accept-span{text-align:left;}

.embedmode.layout-set-p.view3d .game-popup-bg,.embedmode.layout-set-p.view3d .vk-top-ui{ padding: 45px 20px 20px 20px; }
.embedmode #VRButton{ bottom:5px; }
body.onembed{ overflow:hidden; }
@keyframes popup-in-Frames{
  0% {
    transform:  scale(.4);
    opacity:.2;
  }
  70% {
    transform:  scale(1.1);
  }
  100% {
    transform:  scale(1);
    opacity:1;
  }
}

.ui-popup-item.item-gallery-view{height: 96%;width: 94%;}

.excerpt-html img,.excerpt-html p, .excerpt-html div {
    height: auto!important;max-height: unset !important;
}

.iframe-node-container.h-full iframe{ height:100vh !important; }
@media screen and (orientation: landscape) {
  
.RGameScene-Ready .RGameScene-Logo img{width: 100%; max-width: 36vw}
}

@media screen and (orientation: portrait) {
.RGameScene-Ready .RGameScene-Logo img{width: 100%; max-width: 60vw}
  body .story-image-one img{max-height: 66vh;}
}
@media all and (min-width: 769px) {


.view3d .vk-top-ui .top-bar-nav{ position:relative; padding: 10px 180px 0 250px;}
}


@media all and (max-width: 768px) {
.map-ui-Popups{ display:flex; align-items:center; justify-content:center;}
                .map-ui-popup{ min-width:90%; overflow: auto;}
                .map-ui-popup-header{     position: relative; height:auto;}
                .map-ui-popup-contents{ padding-top:.5rem; }
                .layout-vo.map-ui-Popups{    flex-direction: column;}
                .layout-vo .map-ui-popup{     position: relative;}
                .layout-vo .map-ui-popup .map-ui-popup-header, .layout-vo .map-ui-popup .map-ui-popup-contain{padding-right:2%;}

                ..map-ui-popup{}
                .layout-display .map-ui-popup-header h3{ padding-top:2.8rem; text-align:left; }
                .layout-display .map-ui-popup-contain{ width: 100%;display: block; }
                .layout-display .map-ui-popup-containright{width: 100%;display: block; padding-bottom:2rem;}

                #draggable-container{ width: 100vw; max-width:96vw; }

                .popup-form-ui-row{justify-content: center;}
                .popup-form-ui-row a{ padding:1rem 1rem !important;  }

                .setplayername-label,.setplayername-label {    min-width: 90px; }

                .game-player-custom-fr{ max-width:100vw; }

                .excerpt-html { padding-bottom:5rem; }
                body .som-frame-head {    padding: 1rem 1.5rem .25rem 1.5rem; font-size: 1.28rem;     min-height: 2.5rem;}
                body .som-frame-content{        padding: .25rem 1.5rem;}
                body .som-message-qas{    padding-top: .25rem;}
                body .som-message-ans{  margin: .25rem .5rem; }
                body .som-message-ans a{ width:max-content;  margin: .125rem auto; }
    			@media screen and (orientation: portrait) {
                    .map-ui-popup-contents {flex-direction:column;}
                    .layout-vo .map-ui-vo-char{position: relative;background-position: right bottom;max-height: 70vw; margin: auto 0 -20vw auto;z-index: 0;}
                    .map-ui-popup-contain{z-index:1;}
                    .map-ui-popup-contain .ui-fate-desc{z-index:1; background:#FFF;}
                    .layout-vo .map-ui-popup-containright{padding-top:0; width:100%; max-width:100%;}

                    .map-ui-popup-contents{height: auto;}

                }




}