/*DL, 18-Jun-24: app013.css: 
1. now highlights the selected text in input and textarea orange 
2. border style in webtext set to 1 instead of 2
3. adjusts the unity canvas to account for the iOS title bar (safe-area-inset-top)
4. new svg close icon for Help popup
*/
html {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#primary-bar {
  position:absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 9;
}

#primary-bar>button {
    position: fixed;
    top: 0px;
    width: 50px;
    height: 50px;
}

#dragbar {
    position: absolute;
    left: 50px;
    width: 100%;
    height: 100%;
    top: 0px;
    -webkit-app-region: drag;
}

outside {
  cursor: no-drop;
}

inside {
  cursor: copy;
}

pointer {
  cursor: pointer;
}

#unity-canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  width: 100%;
  /*height: calc(100% - (env(safe-area-inset-top)));*/
  height: 100svh;
  position: fixed;
        padding: 0 !important;
        top: env(safe-area-inset-top) + "px"; /* prevent iOS pwa misplacement (bar) */
        left: 0px;
}

#unity-canvas2 {
  /*position: fixed;*/
  top: 0px;
  /*margin-top: 0px;*/
  left: 0px;
  /*max-height: 100vh;*/
  width: 100vw;
  /*background-color: #474F64;*/
  /*background-color: #272F41;*/
  height: 100%;
}

input,
textarea:not(#specialInstructions2) {
  resize: none;
  color: white;
  padding: 5px;
  border-radius: 5px;
}

input:not(#nickname),
textarea:not(#specialInstructions2),
#unity-canvas,
#unity-container,
input:focus,
textarea:focus:not(#specialInstructions2) {
  pointer-events: all;
  /*border: 0;
  border-style: none;*/
  outline: none;
}

input[type="text"]:not(#nickname),
input[type="search"],
textarea:not(#specialInstructions2) {
  border: 1px solid white;
  box-sizing: border-box;
}

input[type="text"]:not(#nickname):hover,
input[type="search"]:hover,
textarea:not(#specialInstructions2):hover, input[type="text"]:not(#nickname):focus,
textarea:not(#specialInstructions2):focus {
  border-color: #ffa780;
}

input[type="text"]::selection,
textarea::selection {
  color: #fff;
  background-color: #ff5000;
    font-family: Montserrat, sans-serif;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.input-big {
  background-color: white;
  color: #2B2B2B;
  font-family: Montserrat, sans-serif;
}

.input-name {
  background-color: #535E75;
}

.input-email {
  background-color: #9196A3;
  font-family: Montserrat, sans-serif;
}

#nickname {
  color: black;
  font-size: 150%;
  font-family: Montserrat, sans-serif;
}

input[type="checkbox"].toggle {
  background: #9196A3 0% 0% no-repeat padding-box;
  color: #fff;
  border: 1px solid #fff;
  font-size: 20px;
  font-weight: 100;
  text-align: center;
}

/* prevent autocomplete/autofill for certain fields on iOS */
.input-big::-webkit-credentials-auto-fill-button,
.input-name::-webkit-credentials-auto-fill-button {
  visibility: hidden;
}

#unity-canvas:focus {
  outline: 0;
}

/* 11-Dec-20 following unsets the overflow-x set in w3Pro.css to avoid VERTICAL scrollbar in Firefox */
html {
  overflow-x: unset;
}

.screenWorld {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
  top: 0;
  /*position: fixed;*/
  overflow-y: hidden;
  overflow-x: hidden;
}

#unity-container,
body .screenWorld {
  /*background-color: #474F64;*/
  height: 100%;
  position: absolute;
}

body {
  /*min-height: 100vh;*/
  /*DL, 11-Dec-20: now using 100% rather than 100vw to take into account scrollbar */
  width: 100%;
  /*overflow: hidden;*/
  /*position: absolute;*/
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 0.5;
  /* Firefox */
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

#unity-container {
  pointer-events: all;
  cursor: pointer;
}

#a {
  position: absolute;
  left: 0px;
  top: 0pz;
  width: 100vw;
  height: 100vh;
  /*background-color: green;*/
  opacity: 0.1;
  z-index: 999;
  visibility: hidden;
}

/* following imported from hub2+hub4.css */
.thumbnail-group {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center
}

.thumbnail,
btn {
  position: relative;
  user-select: none;
  padding: 5px;
  cursor: pointer
}

.thumbnail:active,
.btn:active:active {
  transform: translate(2px, 2px)
}

.thumbnail img {
  width: 320px;
  height: 180px;
  margin: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
  border-radius: 5px;
  -webkit-user-drag: none
}

.thumbnail>span {
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  position: absolute;
  margin: auto;
  color: #fff;
  text-shadow: 2px 2px 4px #000;
  font-size: 150%;
  user-select: none;
  pointer-events: none
}

body>#worldList,
body>#entry,
body>#world,
body>#loading,
body>#exit,
.screenWorld>#mainIntro,
.entry-world-item,
.entry-onlineworld-item,
.entry-img-item,
.entry-video-item {
  display: none
}

body.screenWorlds>#worldList,
body.screenEntry>#entry,
body.screenNone>#exit {
  display: block
}

body.screenLoading>#loading,
body.screenWorld>#world,
.entry-world .entry-world-item,
.entry-onlineworld .entry-onlineworld-item,
.entry-video .entry-video-item,
.entry-img .entry-img-item {
  display: inline
}

body.screenLoading {
  cursor: progress;
}

#world {
  visibility: hidden;
  /*-ms-touch-action: none;
  touch-action: none;*/
  -webkit-touch-callout: none
}

.screenWorld>#world {
  visibility: visible
}

#worldList,
#entry {
  background: url(https://get.proreal.world/app/img/background.jpg) no-repeat center center fixed;
  background-size: cover
}

.left-column img,
.left-column video {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  border-radius: 5px;
  position: relative
}

.right-column {
  border-radius: 5px;
  background-color: white;
}

video:focus {
  outline: none
}

.ns {
  user-select: none
}

body.screenWorlds>div,
body.screenEntry>div,
body.screenNone>div {
  padding: 15px 50px 15px 25px;
}

/*DL, 2-Apr-25: new exit screen css */
body.screenNone>#exit {
  background-color: #475064 !important;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100vh;
  width: 100vw;
  border: 1px solid #000;
}

body.screenNone>#exit>h1,
body.screenNone>#exit>h2 {
  color: white !important;
}

body #WebTextForm {
  display: none;
}

body.screenWorld #WebTextForm {
  display: block;
}

body.screenWorld input,
body.screenWorld textarea::not(#specialInstructions) {
  visibility: hidden;
}

#specialInstructions {
  background: #9196A3 0% 0% no-repeat padding-box;
  color: white
}

.loadingtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: auto;
}

.loadingtext,
.loadingtext>p {
  color: #fff;
  text-shadow: 2px 2px 4px #000;
  font-size: 150%;
  user-select: none;
  cursor: progress
}

#loading-bg {
  /*background-color:#2A3344;*/
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px)
}

@media (max-width:1050px) {

  /* prevents buttons overlapping on Entry page */
  .pr-btn,
  btn,
  button,
  orange-button,
  grey-button {
    width: 100%;
  }
}

/*input,
textarea,
select {
  color: white;
}*/

.persistent-support-button {
  width: 120px;
  height: 40px;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0, 0, 0, 0;
  z-index: 3;
  background-color: #474F64
}

.persistent-help-button {
  background-color: transparent;
  width: 40px;
  height: 40px;
  position: fixed;
  top: 0;
  right: 0;
  margin: 0, 0, 0, 0;
  z-index: 3;
  cursor: pointer;
}

.smileys {
  text-align: justify;
  vertical-align: middle;
  width: 95%;
  max-width: 600px;
  margin: auto;
  padding: 0;
  user-select: none
}

.smileys label:first-of-type {
  padding: 0;
  padding-bottom: 88%;
  height: 0;
  width: 100%;
  top: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-size: 500%;
  transform: scale(.8);
  transition: all .15s linear;
  text-align: center
}

.smileys #img1 {
  background: url(https://get.proreal.world/app/img/smileys7.png) 0 0 / 500%
}

.smileys #img2 {
  background: url(https://get.proreal.world/app/img/smileys7.png) -100% 0 / 500%
}

.smileys #img3 {
  background: url(https://get.proreal.world/app/img/smileys7.png) -200% 0 / 500%
}

.smileys #img4 {
  background: url(https://get.proreal.world/app/img/smileys7.png) -300% 0 / 500%
}

.smileys #img5 {
  background: url(https://get.proreal.world/app/img/smileys7.png) -400% 0 / 500%
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.smileys label:last-of-type {
  text-align: center;
  width: 100%;
  float: left;
  height: 0
}

.smileys label {
  border-style: solid;
  border-color: rgba(255, 255, 255, 1);
  border-width: 3px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.smileys label,
.smileys input {
  filter: grayscale(100%)
}

.smileys label:hover+input,
.smileys input:hover+label,
.smileys input:checked+label {
  transform: scale(1.03);
  filter: grayscale(0%)
}

.smileys input {
  display: none
}

.smileys div {
  width: 18%;
  max-width: 100px;
  display: inline-block;
  margin: auto
}

.help-contents {
  border-radius: 20px;
  position: fixed;
  top: 30px;
  left: 30px;
  width: calc(100% - 60px);
  height: calc(100vh - 60px);
}

@media (min-width:900px) {
  .help-contents {
    left: calc(50% - 400px);
    width: 800px;
  }
}

iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 170px);
  border: none;
}

@media (min-height:800px) {
  .help-contents {
    top: calc(50% - 300px);
    height: 600px;
  }

  iframe {
    height: calc(600px - 120px);
  }
}

.scrollbox {
  overflow-y: auto
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible {
  cursor: pointer;
}

.collapsible:after {
  content: ' \+';
  /* Unicode character for "plus" sign (+) */
  /* font-size: 16px;*/
  /*color: white;*/
  /*float: right;*/
  margin-left: 5px;
}

.active:after {
  content: " \-";
  /* Unicode character for "minus" sign (-) */
}

.collapsible:hover {
  color: rgb(255, 80, 0);
}

.close-button {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-circle-x-filled' width='44' height='44' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-6.489 5.8a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z' stroke-width='0' fill='%23474F64 ' /%3E%3C/svg%3E") no-repeat center;
}

.w3-modal {
  cursor: default;
}

div.w3-modal h2{
  color: #474f64;
}